From 46f02ba03bf71fee415af31d0a1bfc7d8dab1f88 Mon Sep 17 00:00:00 2001
From: anuphilipp3 <anuphilipp3@gmail.com>
Date: Thu, 25 Jun 2026 16:12:03 +0530
Subject: [PATCH 1/2] Dashboard revamp

---
 apps/web/src/app/dashboard/page.tsx           | 169 +++--
 apps/web/src/app/globals.css                  | 203 ++++--
 apps/web/src/app/profile/page.tsx             |  16 +-
 apps/web/src/app/settings/page.tsx            |  40 +-
 .../web/src/components/app-loading-screen.tsx |  39 ++
 .../app-tools/client-only-tool-loaders.tsx    |   7 +-
 apps/web/src/components/branded-toaster.tsx   |  32 +
 apps/web/src/components/client-shell.tsx      |   2 +-
 .../dashboard/activity/activity-log-panel.tsx |  12 +-
 .../dashboard/dashboard-featured.tsx          |  54 ++
 .../components/dashboard/dashboard-hero.tsx   |  75 ++-
 .../dashboard/dashboard-login-cta.tsx         |   8 +-
 .../dashboard/dashboard-pinned-section.tsx    |  60 +-
 .../dashboard/dashboard-recent-tools.tsx      |  36 +-
 .../components/dashboard/dashboard-reveal.tsx |  37 ++
 .../dashboard/dashboard-search-bar.tsx        |  10 +-
 .../dashboard/dashboard-section-header.tsx    |  57 ++
 .../dashboard/dashboard-tool-card.tsx         |  45 +-
 .../dashboard/dashboard-tool-grid.tsx         |  77 +--
 .../dashboard/dashboard-whats-new.tsx         |  18 +-
 .../src/components/ensure-backend-session.tsx |   9 +-
 .../src/components/global-command-palette.tsx |  12 +-
 .../graphql-formatter-layout.tsx              |   2 +-
 .../json-formatter/json-formatter-layout.tsx  |  12 +-
 .../lorem-ipsum/lorem-ipsum-layout.tsx        |   2 +-
 .../src/components/master-password-gate.tsx   |  17 +-
 apps/web/src/components/mobile-nav.tsx        |   6 +-
 .../mock-data-generator-layout.tsx            |   2 +-
 apps/web/src/components/nav-bar.tsx           |  49 +-
 apps/web/src/components/onboarding-modal.tsx  | 600 +++++++++++++++++-
 apps/web/src/components/require-auth.tsx      |   9 +-
 .../secret-api-key-generator-layout.tsx       |   2 +-
 .../src/components/sidebar/app-sidebar.tsx    |  31 +-
 apps/web/src/components/sidebar/nav-group.tsx |  23 +-
 .../sql-formatter/sql-formatter-layout.tsx    |   2 +-
 .../ssh-key-generator-layout.tsx              |   2 +-
 apps/web/src/components/ui/button.tsx         |  10 +-
 apps/web/src/components/ui/card.tsx           |   2 +-
 apps/web/src/components/ui/dialog.tsx         |   2 +-
 apps/web/src/components/ui/dropdown-menu.tsx  |  12 +-
 apps/web/src/components/ui/input.tsx          |   2 +-
 apps/web/src/components/ui/popover.tsx        |   2 +-
 apps/web/src/components/ui/select.tsx         |   6 +-
 apps/web/src/components/ui/tabs.tsx           |   4 +-
 apps/web/src/components/ui/tooltip.tsx        |   2 +-
 .../uuid-generator/uuid-generator-layout.tsx  |   2 +-
 .../yaml-formatter/yaml-formatter-layout.tsx  |   2 +-
 apps/web/src/hooks/use-count-up.ts            |  36 ++
 48 files changed, 1513 insertions(+), 346 deletions(-)
 create mode 100644 apps/web/src/components/app-loading-screen.tsx
 create mode 100644 apps/web/src/components/branded-toaster.tsx
 create mode 100644 apps/web/src/components/dashboard/dashboard-featured.tsx
 create mode 100644 apps/web/src/components/dashboard/dashboard-reveal.tsx
 create mode 100644 apps/web/src/components/dashboard/dashboard-section-header.tsx

diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index dea12ed1..3aebbfcd 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useMemo } from 'react'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
-import { BarChart3, LayoutGrid } from 'lucide-react'
+import { ArrowLeft, ArrowRight, BarChart3, LayoutGrid } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { sidebarData } from '@/components/sidebar/data/sidebar-data'
 import { usePinnedToolsStore } from '@/store/pinned-tools-store'
@@ -30,6 +30,9 @@ import { DashboardRecentTools } from '@/components/dashboard/dashboard-recent-to
 import { ActivityLogDrawer } from '@/components/dashboard/activity/activity-log-drawer'
 import { DashboardLoginCta } from '@/components/dashboard/dashboard-login-cta'
 import { DashboardToolGrid } from '@/components/dashboard/dashboard-tool-grid'
+import { DashboardFeatured } from '@/components/dashboard/dashboard-featured'
+import { RevealItem } from '@/components/dashboard/dashboard-reveal'
+import { AppLoadingScreen } from '@/components/app-loading-screen'
 
 
 // Lazy-load the analytics panel — it's behind a tab click, not in the critical path
@@ -66,6 +69,8 @@ const DashboardPage: React.FC = () => {
   const [searchQuery, setSearchQuery] = useState('')
   const [filterGroup, setFilterGroup] = useState<string | null>(null)
   const [showFilters, setShowFilters] = useState(false)
+  // Home-screen model: 'home' shows a curated launchpad; 'all' opens the full catalog.
+  const [view, setView] = useState<'home' | 'all'>('home')
 
   const totalTools = useMemo(() => getTotalToolCount(), [])
 
@@ -240,21 +245,20 @@ const DashboardPage: React.FC = () => {
   }, [])
 
   if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-background">
-        <div className="animate-pulse flex flex-col items-center gap-4">
-          <div className="h-12 w-12 bg-muted rounded-full" />
-          <div className="h-4 w-32 bg-muted rounded" />
-        </div>
-      </div>
-    )
+    return <AppLoadingScreen />
   }
 
   const toolCardProps = { user, isPinned, togglePin }
 
+  // Home-screen model: curated launchpad by default; the full catalog only shows
+  // when the user searches, filters, or explicitly opens "Browse all".
+  const showCurated = view === 'home' && !searchQuery && !filterGroup
+  const isBrowsing = !!searchQuery || !!filterGroup || view === 'all'
+
   return (
     <TooltipProvider delayDuration={300} disableHoverableContent>
-    <div className="min-h-screen bg-background/50 dashboard-grid-bg mobile-nav-offset">
+    <div className="relative min-h-screen bg-background/50 dashboard-grid-bg mobile-nav-offset">
+      <div className="dash-ambient -z-10" aria-hidden />
       {/* ── Mobile Sticky Header (outside padded container for full-bleed) ── */}
       <DashboardHero
         user={user}
@@ -267,16 +271,18 @@ const DashboardPage: React.FC = () => {
       <div className="px-3 md:px-8 pb-24 md:pb-12">
         <div className="max-w-7xl mx-auto space-y-5 md:space-y-8">
           {/* ── Desktop Hero (inside padded container for alignment) ── */}
-          <DashboardHero
-            user={user}
-            totalTools={totalTools}
-            pinnedCount={pinnedItems.length}
-            recentCount={recentlyUsedItems.length}
-            desktopOnly
-          />
+          <RevealItem index={0}>
+            <DashboardHero
+              user={user}
+              totalTools={totalTools}
+              pinnedCount={pinnedItems.length}
+              recentCount={recentlyUsedItems.length}
+              desktopOnly
+            />
+          </RevealItem>
           <Tabs defaultValue="apps" className="w-full">
             <div className="mb-3 flex items-center justify-between gap-3">
-              <TabsList className="grid h-auto w-full grid-cols-2 gap-1 rounded-xl bg-muted/50 p-1 sm:inline-flex sm:w-auto sm:justify-start">
+              <TabsList className="grid h-auto w-full grid-cols-2 gap-1 rounded-xl border border-border/50 bg-muted/50 p-1 shadow-sm backdrop-blur-sm sm:inline-flex sm:w-auto sm:justify-start">
                 <TabsTrigger value="apps" className="gap-1.5 text-xs sm:text-sm">
                   <LayoutGrid className="h-3.5 w-3.5 shrink-0" aria-hidden />
                   {tTabs('apps')}
@@ -306,41 +312,100 @@ const DashboardPage: React.FC = () => {
 
 
 
-              {/* ── Pinned Tools ── */}
-              <DashboardPinnedSection
-                pinnedItems={pinnedItems}
-                toolCardProps={toolCardProps}
-                searchQuery={searchQuery}
-                filterGroup={filterGroup}
-              />
-
-              {/* ── What's New ── */}
-              <DashboardWhatsNew
-                whatsNewItems={whatsNewItems}
-                toolCardProps={toolCardProps}
-                searchQuery={searchQuery}
-                filterGroup={filterGroup}
-              />
-
-              {/* ── Recently Used ── */}
-              <DashboardRecentTools
-                recentItems={recentlyUsedItems}
-                toolCardProps={toolCardProps}
-                user={user}
-                searchQuery={searchQuery}
-              />
-
-              {/* ── Login CTA (non-auth) ── */}
-              <DashboardLoginCta user={user} searchQuery={searchQuery} />
+              {/* ── Curated home (launchpad) ── */}
+              {showCurated && (
+                <>
+                  {/* Pinned — your go-to tools */}
+                  <RevealItem index={1}>
+                    <DashboardPinnedSection
+                      pinnedItems={pinnedItems}
+                      toolCardProps={toolCardProps}
+                      searchQuery={searchQuery}
+                      filterGroup={filterGroup}
+                    />
+                  </RevealItem>
+
+                  {/* Recently used — jump back in */}
+                  <RevealItem index={2}>
+                    <DashboardRecentTools
+                      recentItems={recentlyUsedItems}
+                      toolCardProps={toolCardProps}
+                      user={user}
+                      searchQuery={searchQuery}
+                    />
+                  </RevealItem>
+
+                  {/* Suggested / popular — discovery */}
+                  <RevealItem index={3}>
+                    <DashboardFeatured
+                      items={popularItems}
+                      toolCardProps={toolCardProps}
+                      searchQuery={searchQuery}
+                      filterGroup={filterGroup}
+                    />
+                  </RevealItem>
+
+                  {/* What's new */}
+                  <RevealItem index={4}>
+                    <DashboardWhatsNew
+                      whatsNewItems={whatsNewItems}
+                      toolCardProps={toolCardProps}
+                      searchQuery={searchQuery}
+                      filterGroup={filterGroup}
+                    />
+                  </RevealItem>
+
+                  {/* Login CTA (non-auth) */}
+                  <RevealItem index={5}>
+                    <DashboardLoginCta user={user} searchQuery={searchQuery} />
+                  </RevealItem>
+
+                  {/* Browse-all entry — the door to the full catalog */}
+                  <RevealItem index={6}>
+                    <button
+                      type="button"
+                      onClick={() => setView('all')}
+                      className="group flex w-full items-center gap-4 rounded-2xl border border-border/60 bg-gradient-to-br from-primary/[0.05] to-transparent p-5 text-left transition-all duration-200 hover:border-primary/40 hover:shadow-md motion-safe:hover:-translate-y-0.5"
+                    >
+                      <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-primary/15 to-violet-500/10 text-primary ring-1 ring-inset ring-border/50">
+                        <LayoutGrid className="h-5 w-5" />
+                      </span>
+                      <div className="min-w-0 flex-1">
+                        <p className="font-semibold text-foreground">
+                          Browse all {totalTools} tools
+                        </p>
+                        <p className="mt-0.5 text-sm text-muted-foreground">
+                          Explore the full toolkit by category
+                        </p>
+                      </div>
+                      <ArrowRight className="h-5 w-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" />
+                    </button>
+                  </RevealItem>
+                </>
+              )}
 
-              {/* ── All Tools Grid ── */}
-              <DashboardToolGrid
-                filteredGroups={filteredGroups}
-                popularItems={popularItems}
-                toolCardProps={toolCardProps}
-                searchQuery={searchQuery}
-                filterGroup={filterGroup}
-              />
+              {/* ── Full catalog (searching, filtering, or "Browse all") ── */}
+              {isBrowsing && (
+                <RevealItem index={1}>
+                  {view === 'all' && !searchQuery && !filterGroup && (
+                    <button
+                      type="button"
+                      onClick={() => setView('home')}
+                      className="mb-3 inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+                    >
+                      <ArrowLeft className="h-4 w-4" />
+                      Back to home
+                    </button>
+                  )}
+                  <DashboardToolGrid
+                    filteredGroups={filteredGroups}
+                    popularItems={popularItems}
+                    toolCardProps={toolCardProps}
+                    searchQuery={searchQuery}
+                    filterGroup={filterGroup}
+                  />
+                </RevealItem>
+              )}
             </TabsContent>
 
             <TabsContent value="analytics" className="mt-0 rounded-2xl focus-visible:outline-none">
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index cade53e4..34ad86ec 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -13,42 +13,43 @@ body {
 
 @layer base {
   :root {
-    --background: 40 18% 93%;
-    --foreground: 220 14% 14%;
-    --card: 40 14% 95%;
-    --card-foreground: 220 14% 14%;
-    --popover: 40 14% 95%;
-    --popover-foreground: 220 14% 14%;
-    --primary: 220 14% 16%;
-    --primary-foreground: 40 18% 93%;
-    --secondary: 40 10% 89%;
-    --secondary-foreground: 220 14% 14%;
-    --muted: 40 10% 89%;
-    --muted-foreground: 220 12% 34%;
-    --accent: 40 10% 89%;
-    --accent-foreground: 220 14% 14%;
+    /* Light "deck-in-daylight": crisp white panels lifting off a soft cool canvas */
+    --background: 225 24% 96.5%;
+    --foreground: 222 32% 11%;
+    --card: 0 0% 100%;
+    --card-foreground: 222 32% 11%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222 32% 11%;
+    --primary: 222 47% 16%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 225 22% 93.5%;
+    --secondary-foreground: 222 30% 16%;
+    --muted: 225 22% 93.5%;
+    --muted-foreground: 222 14% 42%;
+    --accent: 225 24% 93%;
+    --accent-foreground: 222 30% 16%;
     --destructive: 0 72% 51%;
-    --destructive-foreground: 40 18% 93%;
-    --border: 40 10% 83%;
-    --input: 40 10% 83%;
-    --ring: 220 14% 16%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 222 18% 88%;
+    --input: 222 18% 88%;
+    --ring: 222 47% 16%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
-    --surface-1: 40 14% 91%;
-    --surface-2: 40 12% 87%;
-    --surface-3: 40 10% 83%;
-    --sidebar-background: 40 14% 91%;
-    --sidebar-foreground: 220 10% 24%;
-    --sidebar-primary: 220 14% 16%;
-    --sidebar-primary-foreground: 40 18% 93%;
-    --sidebar-accent: 40 10% 89%;
-    --sidebar-accent-foreground: 220 14% 14%;
-    --sidebar-border: 40 10% 83%;
-    --sidebar-ring: 220 14% 16%;
+    --surface-1: 0 0% 100%;
+    --surface-2: 225 24% 97.5%;
+    --surface-3: 225 22% 94.5%;
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 222 18% 28%;
+    --sidebar-primary: 222 47% 16%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 225 26% 94.5%;
+    --sidebar-accent-foreground: 222 32% 14%;
+    --sidebar-border: 222 18% 90%;
+    --sidebar-ring: 222 47% 16%;
     --sidebar-width: 247px;
     --main-content-width: calc(100% - var(--sidebar-width));
 
@@ -90,8 +91,8 @@ body {
     --surface-1: 240 8% 7%;
     --surface-2: 240 7% 9%;
     --surface-3: 240 6% 12%;
-    /* Sidebar with neutral dark theme */
-    --sidebar-background: 240 5.9% 10%;
+    /* 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%;
@@ -459,14 +460,6 @@ body {
     border-color: hsl(var(--primary) / 0.2);
   }
 
-  /* Clean gradient backgrounds to remove blue tint */
-  .dark .bg-gradient-to-br {
-    background-image: linear-gradient(135deg,
-        hsl(var(--background)),
-        hsl(var(--background)),
-        hsl(var(--muted)));
-  }
-
   /* Standard neutral background for body */
   .dark body {
     background: hsl(var(--background));
@@ -811,6 +804,76 @@ body {
     box-shadow: 0 0 20px hsl(var(--primary) / 0.1);
   }
 
+  /* Dashboard greeting — brand gradient both themes (deep, legible stops in light) */
+  .dash-greeting {
+    background: linear-gradient(100deg, #4338ca 0%, #7c3aed 52%, #0e7490 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+  }
+  .dark .dash-greeting {
+    background: var(--mdt-grad);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+  }
+
+  /* Ambient top glow for the dashboard surface (theme-aware, decorative) */
+  .dash-ambient {
+    position: absolute;
+    inset: 0 0 auto 0;
+    height: 26rem;
+    pointer-events: none;
+    background:
+      radial-gradient(58% 100% at 12% 0%, rgba(99, 102, 241, 0.16), transparent 68%),
+      radial-gradient(50% 100% at 50% 0%, rgba(124, 58, 237, 0.10), transparent 70%),
+      radial-gradient(58% 100% at 90% 0%, rgba(34, 211, 238, 0.12), transparent 70%);
+  }
+  .dark .dash-ambient {
+    background:
+      radial-gradient(60% 100% at 18% 0%, hsl(var(--primary) / 0.16), transparent 70%),
+      radial-gradient(55% 100% at 88% 0%, rgba(79, 208, 230, 0.12), transparent 70%);
+  }
+
+  /* Tool card gradient sheen revealed on hover (transform/opacity only) */
+  .dash-card-sheen::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(130deg, hsl(var(--primary) / 0.55), transparent 40%, transparent 60%, rgba(79, 208, 230, 0.45));
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    opacity: 0;
+    transition: opacity var(--dur-2, 0.2s) var(--ease-out-quart, ease);
+  }
+  .group:hover .dash-card-sheen::before {
+    opacity: 1;
+  }
+  /* Cursor-anchored glow — illuminates the card under the pointer (set via --mx/--my). */
+  .dash-card-sheen::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background: radial-gradient(
+      240px circle at var(--mx, 50%) var(--my, 50%),
+      hsl(var(--primary) / 0.13),
+      rgba(79, 208, 230, 0.06) 35%,
+      transparent 60%
+    );
+    opacity: 0;
+    transition: opacity var(--dur-2, 0.2s) var(--ease-out-quart, ease);
+  }
+  .group:hover .dash-card-sheen::after {
+    opacity: 1;
+  }
+
   .dark .stats-glow {
     box-shadow: 0 0 30px hsl(var(--primary) / 0.15);
   }
@@ -1359,6 +1422,16 @@ body {
   /* Disable animations on low-end devices */
   @media (prefers-reduced-motion: reduce) {
 
+    /* Universal reset — honor the OS-level "reduce motion" preference everywhere */
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+
     .fab-pulse,
     .animate-float,
     .animate-float-delayed,
@@ -1629,6 +1702,58 @@ html { overflow-x: hidden; }
 }
 @keyframes mdt-spin { to { --mdt-angle: 360deg; } }
 
+/* ── Branded app loading screen (theme-aware) ───────────── */
+.mdt-loading__aura {
+  position: absolute; inset: 0; pointer-events: none;
+  background:
+    radial-gradient(40rem 28rem at 50% 42%, hsl(var(--primary) / 0.10), transparent 70%),
+    radial-gradient(26rem 26rem at 66% 66%, rgba(154, 92, 242, 0.10), transparent 70%);
+}
+.mdt-loading__ring {
+  position: absolute; width: 8.5rem; height: 8.5rem; border-radius: 50%;
+  background: conic-gradient(from var(--mdt-angle), transparent 0 58%, #5b63f0 74%, #9a5cf2 86%, #4fd0e6 95%, transparent 100%);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
+          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
+  animation: mdt-spin 1.4s linear infinite;
+  filter: drop-shadow(0 0 10px rgba(122, 107, 245, 0.35));
+}
+.mdt-loading__bar {
+  position: relative; display: block; width: 11rem; height: 3px; border-radius: 999px;
+  overflow: hidden; background: hsl(var(--foreground) / 0.08);
+}
+.mdt-loading__bar > span {
+  position: absolute; inset: 0; width: 40%; border-radius: inherit;
+  background: var(--mdt-grad);
+  animation: mdt-loading-slide 1.25s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+@keyframes mdt-loading-slide {
+  0% { transform: translateX(-110%); }
+  100% { transform: translateX(360%); }
+}
+.mdt-loading__dots::after {
+  content: "…"; display: inline-block; width: 1.2ch; text-align: left;
+  animation: mdt-loading-dots 1.4s steps(1, end) infinite;
+}
+@keyframes mdt-loading-dots {
+  0% { content: ""; } 33% { content: "·"; } 66% { content: "··"; } 100% { content: "···"; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mdt-loading__ring { animation-duration: 3s; }
+  .mdt-loading__bar > span { animation: mdt-loading-pulse 1.6s ease-in-out infinite; width: 100%; }
+  .mdt-loading__dots::after { animation: none; content: "…"; }
+}
+@keyframes mdt-loading-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
+
+/* Compact branded spinner for per-tool lazy loading */
+.mdt-tool-spinner {
+  width: 2.25rem; height: 2.25rem; border-radius: 50%;
+  background: conic-gradient(from var(--mdt-angle), transparent 0 55%, #5b63f0 74%, #9a5cf2 88%, #4fd0e6 96%, transparent 100%);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
+          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
+  animation: mdt-spin 1.1s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) { .mdt-tool-spinner { animation-duration: 2.4s; } }
+
 /* scroll-progress beam */
 .mdt-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; transform-origin: 0 50%; background: var(--mdt-grad); z-index: 60; }
 
diff --git a/apps/web/src/app/profile/page.tsx b/apps/web/src/app/profile/page.tsx
index f732366e..90141c09 100644
--- a/apps/web/src/app/profile/page.tsx
+++ b/apps/web/src/app/profile/page.tsx
@@ -252,9 +252,13 @@ export default function ProfilePage() {
     <div className="flex-1 w-full max-w-5xl mx-auto px-4 sm:px-8 pt-20 lg:pt-10 pb-16 space-y-8">
       {/* ── Page header ── */}
       <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-3xl font-bold tracking-tight">Your Profile</h2>
-          <p className="text-muted-foreground text-sm mt-1">Manage your identity and developer portfolio.</p>
+        <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" />
+            Developer identity
+          </p>
+          <h2 className="text-2xl sm:text-3xl font-bold tracking-tight">Your Profile</h2>
+          <p className="text-muted-foreground text-sm">Manage your identity and developer portfolio.</p>
         </div>
         <div className="flex items-center gap-2">
           <Button
@@ -369,11 +373,7 @@ export default function ProfilePage() {
               className="h-full rounded-full transition-all duration-500"
               style={{
                 width: `${completenessPercent}%`,
-                background: completenessPercent >= 80
-                  ? 'hsl(var(--primary))'
-                  : completenessPercent >= 50
-                  ? 'hsl(var(--primary) / 0.7)'
-                  : 'hsl(var(--primary) / 0.4)',
+                background: 'var(--mdt-grad)',
               }}
             />
           </div>
diff --git a/apps/web/src/app/settings/page.tsx b/apps/web/src/app/settings/page.tsx
index e33e8a49..75d93715 100644
--- a/apps/web/src/app/settings/page.tsx
+++ b/apps/web/src/app/settings/page.tsx
@@ -52,22 +52,30 @@ export default function SettingsPage() {
   }
 
   return (
-    <div className="flex-1 space-y-8 p-8 max-w-5xl mx-auto w-full pt-20 lg:pt-8 bg-background/50">
-      <div className="flex items-center justify-between space-y-2">
-        <div>
-          <h2 className="text-3xl font-bold tracking-tight">{t('title')}</h2>
-          <p className="text-muted-foreground">{t('subtitle')}</p>
-        </div>
+    <div className="flex-1 space-y-8 p-6 md:p-8 max-w-5xl mx-auto w-full pt-20 lg:pt-8 bg-background/50">
+      <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" />
+          Workspace
+        </p>
+        <h2 className="text-2xl sm:text-3xl font-bold tracking-tight">{t('title')}</h2>
+        <p className="text-muted-foreground">{t('subtitle')}</p>
       </div>
 
       <div className="grid gap-6">
 
+<<<<<<< Updated upstream
         <PasskeySection />
 
         <Card className="border shadow-sm bg-card/50 backdrop-blur-sm">
+=======
+        <Card className="rounded-2xl border border-border/60 bg-card/60 shadow-sm backdrop-blur-sm">
+>>>>>>> Stashed changes
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <List className="h-5 w-5 opacity-70" />
+            <CardTitle className="flex items-center gap-2.5">
+              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary/15 to-violet-500/10 text-primary ring-1 ring-inset ring-border/50">
+                <List className="h-4 w-4" />
+              </span>
               {t('tools.title')}
             </CardTitle>
             <CardDescription>
@@ -125,10 +133,12 @@ export default function SettingsPage() {
           </CardContent>
         </Card>
 
-        <Card className="border shadow-sm bg-card/50 backdrop-blur-sm">
+        <Card className="rounded-2xl border border-border/60 bg-card/60 shadow-sm backdrop-blur-sm">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Sun className="h-5 w-5 opacity-70" />
+            <CardTitle className="flex items-center gap-2.5">
+              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary/15 to-violet-500/10 text-primary ring-1 ring-inset ring-border/50">
+                <Sun className="h-4 w-4" />
+              </span>
               {t('appearance.title')}
             </CardTitle>
             <CardDescription>
@@ -192,10 +202,12 @@ export default function SettingsPage() {
           </CardContent>
         </Card>
 
-        <Card className="border shadow-sm bg-card/50 backdrop-blur-sm">
+        <Card className="rounded-2xl border border-border/60 bg-card/60 shadow-sm backdrop-blur-sm">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Globe className="h-5 w-5 opacity-70" />
+            <CardTitle className="flex items-center gap-2.5">
+              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary/15 to-violet-500/10 text-primary ring-1 ring-inset ring-border/50">
+                <Globe className="h-4 w-4" />
+              </span>
               {t('language.title')}
             </CardTitle>
             <CardDescription>
diff --git a/apps/web/src/components/app-loading-screen.tsx b/apps/web/src/components/app-loading-screen.tsx
new file mode 100644
index 00000000..9816973c
--- /dev/null
+++ b/apps/web/src/components/app-loading-screen.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { Logo } from "@/components/logo";
+
+/**
+ * Branded full-screen loading state for the authenticated shell.
+ * Theme-aware (works in light and dark) — a spinning deck-gradient ring
+ * orbiting the logo mark, with an indeterminate progress beam.
+ */
+export function AppLoadingScreen({ label = "Preparing your workspace" }: { label?: string }) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="mdt-loading fixed inset-0 z-[9999] flex h-[100dvh] w-[100dvw] flex-col items-center justify-center gap-7 bg-background"
+    >
+      <div className="mdt-loading__aura" aria-hidden />
+
+      <div className="relative flex items-center justify-center">
+        <span className="mdt-loading__ring" aria-hidden />
+        <div className="relative flex h-[5.5rem] w-[5.5rem] items-center justify-center rounded-[1.4rem] bg-background/70 shadow-xl ring-1 ring-border/60 backdrop-blur-sm">
+          <Logo size={42} showText={false} />
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-3.5">
+        <p className="text-sm font-medium tracking-tight text-foreground/80">
+          {label}
+          <span className="mdt-loading__dots" />
+        </p>
+        <span className="mdt-loading__bar" aria-hidden>
+          <span />
+        </span>
+      </div>
+
+      <span className="sr-only">Loading</span>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/app-tools/client-only-tool-loaders.tsx b/apps/web/src/components/app-tools/client-only-tool-loaders.tsx
index 71f1ab7c..91ee2f87 100644
--- a/apps/web/src/components/app-tools/client-only-tool-loaders.tsx
+++ b/apps/web/src/components/app-tools/client-only-tool-loaders.tsx
@@ -3,8 +3,11 @@
 import dynamic from 'next/dynamic'
 
 const toolLoading = () => (
-  <div className="h-full w-full min-h-0 min-w-0">
-    <div className="h-full min-h-[8rem] w-full bg-muted/20 animate-pulse rounded-lg" />
+  <div className="flex h-full min-h-[8rem] w-full min-w-0 items-center justify-center">
+    <div className="flex flex-col items-center gap-4">
+      <span className="mdt-tool-spinner" aria-hidden />
+      <span className="text-xs font-medium text-muted-foreground">Loading tool…</span>
+    </div>
   </div>
 )
 
diff --git a/apps/web/src/components/branded-toaster.tsx b/apps/web/src/components/branded-toaster.tsx
new file mode 100644
index 00000000..529abc8f
--- /dev/null
+++ b/apps/web/src/components/branded-toaster.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as SonnerToaster } from "sonner"
+
+/**
+ * App-wide toast styling. Theme-aware (syncs with next-themes) and matched to
+ * the overlay design language — rounded-xl, soft border, blur, layered shadow.
+ */
+export function BrandedToaster() {
+  const { resolvedTheme } = useTheme()
+
+  return (
+    <SonnerToaster
+      theme={resolvedTheme === "dark" ? "dark" : "light"}
+      position="bottom-right"
+      gap={10}
+      toastOptions={{
+        classNames: {
+          toast:
+            "group rounded-xl border border-border/70 bg-popover/95 backdrop-blur-md shadow-xl shadow-black/10",
+          title: "text-sm font-semibold text-foreground",
+          description: "text-xs text-muted-foreground",
+          actionButton:
+            "rounded-md bg-primary text-primary-foreground text-xs font-medium",
+          cancelButton: "rounded-md bg-muted text-muted-foreground text-xs",
+          closeButton: "border-border/70 bg-background hover:bg-muted",
+        },
+      }}
+    />
+  )
+}
diff --git a/apps/web/src/components/client-shell.tsx b/apps/web/src/components/client-shell.tsx
index 205435e6..e97a878d 100644
--- a/apps/web/src/components/client-shell.tsx
+++ b/apps/web/src/components/client-shell.tsx
@@ -20,7 +20,7 @@ const ClientSpeedInsights = dynamic(
   { ssr: false }
 )
 const ClientToaster = dynamic(
-  () => import('sonner').then((m) => m.Toaster),
+  () => import('@/components/branded-toaster').then((m) => m.BrandedToaster),
   { ssr: false }
 )
 
diff --git a/apps/web/src/components/dashboard/activity/activity-log-panel.tsx b/apps/web/src/components/dashboard/activity/activity-log-panel.tsx
index c471e6c2..b609db35 100644
--- a/apps/web/src/components/dashboard/activity/activity-log-panel.tsx
+++ b/apps/web/src/components/dashboard/activity/activity-log-panel.tsx
@@ -216,7 +216,7 @@ export function ActivityLogPanel({ embedded = false }: { embedded?: boolean }) {
               className={cn(
                 'h-7 cursor-pointer rounded-full border px-2.5 text-xs font-medium transition-colors',
                 active
-                  ? 'border-primary bg-primary text-primary-foreground'
+                  ? 'border-transparent bg-gradient-to-r from-primary to-violet-500 text-primary-foreground shadow-sm'
                   : 'border-border bg-card text-muted-foreground hover:bg-muted/50',
               )}
               aria-pressed={active}
@@ -396,9 +396,13 @@ export function ActivityLogPanel({ embedded = false }: { embedded?: boolean }) {
 
   return (
     <div className="mx-auto max-w-3xl p-4 sm:p-6">
-      <header className="mb-5">
-        <h1 className="text-2xl font-semibold tracking-tight">{t('title')}</h1>
-        <p className="mt-1 text-sm text-muted-foreground">{t('subtitle')}</p>
+      <header className="mb-5 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" />
+          Audit trail
+        </p>
+        <h1 className="text-2xl font-bold tracking-tight">{t('title')}</h1>
+        <p className="text-sm text-muted-foreground">{t('subtitle')}</p>
       </header>
       <div className="mb-5 rounded-xl border border-border bg-card p-3 shadow-sm">
         {filters}
diff --git a/apps/web/src/components/dashboard/dashboard-featured.tsx b/apps/web/src/components/dashboard/dashboard-featured.tsx
new file mode 100644
index 00000000..3ff17b8b
--- /dev/null
+++ b/apps/web/src/components/dashboard/dashboard-featured.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import React from 'react'
+import { TrendingUp } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import { type RenderToolItem, type ToolCardProps } from './types'
+import { ToolCard } from './dashboard-tool-card'
+import { DashboardSectionHeader } from './dashboard-section-header'
+
+const FEATURED_ACCENT = { bg: 'bg-primary/15', text: 'text-primary' }
+
+interface DashboardFeaturedProps {
+  items: RenderToolItem[]
+  toolCardProps: Omit<ToolCardProps, 'item' | 'id' | 'index'>
+  searchQuery: string
+  filterGroup: string | null
+}
+
+/**
+ * "Popular tools" featured panel — a bento-style highlighted starting point.
+ * Hidden while searching/filtering (the grid below handles those states).
+ */
+export function DashboardFeatured({
+  items,
+  toolCardProps,
+  searchQuery,
+  filterGroup,
+}: DashboardFeaturedProps) {
+  const t = useTranslations('Dashboard')
+
+  if (items.length === 0 || searchQuery || filterGroup) return null
+
+  return (
+    <section className="space-y-4 rounded-2xl border border-primary/15 bg-gradient-to-br from-primary/[0.06] via-card/20 to-transparent p-4 md:p-5">
+      <DashboardSectionHeader
+        icon={TrendingUp}
+        title={t('popularTools')}
+        accent={FEATURED_ACCENT}
+      />
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-3 md:gap-4 lg:grid-cols-6">
+        {items.map((item, index) => (
+          <ToolCard
+            key={`featured-${item.originalId}`}
+            item={item}
+            id={item.originalId!}
+            index={index}
+            accent={FEATURED_ACCENT}
+            {...toolCardProps}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
diff --git a/apps/web/src/components/dashboard/dashboard-hero.tsx b/apps/web/src/components/dashboard/dashboard-hero.tsx
index 70146402..1054da6e 100644
--- a/apps/web/src/components/dashboard/dashboard-hero.tsx
+++ b/apps/web/src/components/dashboard/dashboard-hero.tsx
@@ -5,6 +5,8 @@ import Link from 'next/link'
 import { Layers, Zap, Pin, Clock, History } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { dashboardGreeting } from './types'
+import { useCountUp } from '@/hooks/use-count-up'
+import { cn } from '@/lib/utils'
 
 interface DashboardHeroProps {
   user: { displayName?: string | null } | null
@@ -27,8 +29,8 @@ interface DashboardHeroProps {
  * must be outside the padded container for full-bleed, while the
  * desktop hero sits inside it for proper alignment).
  */
-/** Compact KPI stat tile for the dashboard hero. */
-function KpiCard({
+/** A single count-up stat in the hero strip. */
+function Stat({
   icon: Icon,
   label,
   value,
@@ -37,15 +39,29 @@ function KpiCard({
   label: string
   value: number
 }) {
+  const display = useCountUp(value)
+  const isZero = value === 0
   return (
-    <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-card border border-border">
-      <div className="p-1.5 rounded-md bg-primary/10">
-        <Icon size={16} className="text-primary" />
-      </div>
-      <div>
-        <p className="text-[10px] md:text-xs text-muted-foreground leading-tight">{label}</p>
-        <p className="text-sm font-semibold tabular-nums leading-tight">{value}</p>
-      </div>
+    <div className={cn('flex items-center gap-2 transition-opacity', isZero && 'opacity-45')}>
+      <span
+        className={cn(
+          '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',
+        )}
+      >
+        <Icon size={14} className={isZero ? 'text-muted-foreground' : 'text-primary'} />
+      </span>
+      <span
+        className={cn(
+          'text-sm font-semibold tabular-nums',
+          isZero ? 'text-muted-foreground' : 'text-foreground',
+        )}
+      >
+        {display}
+      </span>
+      <span className="text-sm text-muted-foreground">{label}</span>
     </div>
   )
 }
@@ -101,26 +117,27 @@ export function DashboardHero({
 
       {/* ── Desktop Header Section ──────────────────────────────────────── */}
       {!mobileOnly && (
-        <div className="hidden md:flex flex-col gap-5">
-          <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
-            <div className="space-y-1">
-              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                {dashboardGreeting(t)}
-              </p>
-              <h1 className="text-xl sm:text-2xl font-bold tracking-tight text-foreground">
-                {user?.displayName
-                  ? t('welcomeBackNamed', { name: user.displayName.split(' ')[0] })
-                  : t('welcomeBack')}
-              </h1>
-              <p className="text-sm text-muted-foreground">{t('tagline')}</p>
-            </div>
+        <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" />
+              {dashboardGreeting(t)}
+            </p>
+            <h1 className="dash-greeting text-2xl sm:text-[1.75rem] font-bold tracking-tight leading-tight">
+              {user?.displayName
+                ? t('welcomeBackNamed', { name: user.displayName.split(' ')[0] })
+                : t('welcomeBack')}
+            </h1>
+            <p className="text-sm text-muted-foreground">{t('tagline')}</p>
+          </div>
 
-            {/* Quick Stats — KPI row */}
-            <div className="grid grid-cols-3 gap-2 md:gap-3">
-              <KpiCard icon={Layers} label={t('stats.tools')} value={totalTools} />
-              <KpiCard icon={Pin} label={t('stats.pinned')} value={pinnedCount} />
-              <KpiCard icon={Clock} label={t('stats.recent')} value={recentCount} />
-            </div>
+          {/* Quick stats — inline strip with count-up */}
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border border-border/60 bg-card px-4 py-2.5 shadow-sm shadow-primary/[0.03] ring-1 ring-inset ring-white/40 dark:ring-white/[0.04] backdrop-blur-sm w-fit">
+            <Stat icon={Layers} label={t('stats.tools')} value={totalTools} />
+            <span className="h-4 w-px bg-border/70" aria-hidden />
+            <Stat icon={Pin} label={t('stats.pinned')} value={pinnedCount} />
+            <span className="h-4 w-px bg-border/70" aria-hidden />
+            <Stat icon={Clock} label={t('stats.recent')} value={recentCount} />
           </div>
         </div>
       )}
diff --git a/apps/web/src/components/dashboard/dashboard-login-cta.tsx b/apps/web/src/components/dashboard/dashboard-login-cta.tsx
index a1f2f5e3..871fa177 100644
--- a/apps/web/src/components/dashboard/dashboard-login-cta.tsx
+++ b/apps/web/src/components/dashboard/dashboard-login-cta.tsx
@@ -40,11 +40,11 @@ export function DashboardLoginCta({ user, searchQuery }: DashboardLoginCtaProps)
         ))}
       </div>
       {/* Overlay CTA */}
-      <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-background/60 backdrop-blur-[2px]">
-        <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary/10 text-primary">
-          <LogIn size={20} strokeWidth={1.5} />
+      <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-gradient-to-b from-background/50 via-background/70 to-background/80 backdrop-blur-[2px]">
+        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-primary/15 to-violet-500/10 text-primary ring-1 ring-inset ring-border/50 shadow-sm">
+          <LogIn size={20} strokeWidth={1.75} />
         </div>
-        <p className="text-sm text-muted-foreground text-center max-w-xs px-4">
+        <p className="max-w-xs px-4 text-center text-sm text-muted-foreground">
           {t('loginCta.description')}
         </p>
         <Button size="sm" className="rounded-xl shadow-sm" asChild>
diff --git a/apps/web/src/components/dashboard/dashboard-pinned-section.tsx b/apps/web/src/components/dashboard/dashboard-pinned-section.tsx
index ac62b22a..be498065 100644
--- a/apps/web/src/components/dashboard/dashboard-pinned-section.tsx
+++ b/apps/web/src/components/dashboard/dashboard-pinned-section.tsx
@@ -1,10 +1,12 @@
 'use client'
 
 import React, { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { Pin, ChevronDown } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { type RenderToolItem, type ToolCardProps } from './types'
 import { ToolCard, ToolCardSkeleton, HScrollFade } from './dashboard-tool-card'
+import { DashboardSectionHeader } from './dashboard-section-header'
 import { usePinnedToolsHydrated } from '@/store/pinned-tools-store'
 import { Button } from '@/components/ui/button'
 
@@ -42,12 +44,7 @@ export function DashboardPinnedSection({
   if (!hydrated) {
     return (
       <section className="space-y-3 md:space-y-5">
-        <div className="flex items-center gap-3 section-header-line pb-2">
-          <div className="p-2 rounded-lg bg-primary/10 text-primary">
-            <Pin size={18} strokeWidth={1.5} />
-          </div>
-          <h2 className="text-xl font-semibold">{t('sections.pinned')}</h2>
-        </div>
+        <DashboardSectionHeader icon={Pin} title={t('sections.pinned')} />
         <div className={SKELETON_GRID_CLASS}>
           {Array.from({ length: 4 }).map((_, i) => (
             <ToolCardSkeleton key={i} />
@@ -60,13 +57,13 @@ export function DashboardPinnedSection({
   // Empty state
   if (pinnedItems.length === 0) {
     return (
-      <div className="flex items-start gap-3 rounded-lg border border-dashed border-border/50 bg-muted/20 px-4 py-3.5">
-        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary mt-0.5">
-          <Pin size={16} strokeWidth={1.5} />
+      <div className="flex items-start gap-3 rounded-xl border border-dashed border-border/60 bg-gradient-to-br from-primary/[0.04] to-transparent px-4 py-4">
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary ring-1 ring-inset ring-border/50 mt-0.5">
+          <Pin size={16} strokeWidth={1.75} />
         </div>
         <div>
-          <p className="text-sm font-medium text-foreground">{t('sections.pinned')}</p>
-          <p className="text-xs text-muted-foreground mt-0.5">{t('pinnedEmpty')}</p>
+          <p className="text-sm font-semibold text-foreground">{t('sections.pinned')}</p>
+          <p className="text-xs text-muted-foreground mt-0.5 leading-relaxed">{t('pinnedEmpty')}</p>
         </div>
       </div>
     )
@@ -77,15 +74,7 @@ export function DashboardPinnedSection({
 
   return (
     <section className="space-y-3 md:space-y-5">
-      <div className="flex items-center gap-3 section-header-line pb-2">
-        <div className="p-2 rounded-lg bg-primary/10 text-primary">
-          <Pin size={18} strokeWidth={1.5} />
-        </div>
-        <h2 className="text-xl font-semibold">{t('sections.pinned')}</h2>
-        <span className="text-xs font-medium text-muted-foreground bg-muted/50 px-2 py-0.5 rounded-full">
-          {pinnedItems.length}
-        </span>
-      </div>
+      <DashboardSectionHeader icon={Pin} title={t('sections.pinned')} count={pinnedItems.length} />
       {/* Mobile: horizontal scroll */}
       <div className="md:hidden -mx-4 px-4">
         <HScrollFade>
@@ -102,17 +91,26 @@ export function DashboardPinnedSection({
         </HScrollFade>
       </div>
       {/* Desktop: grid */}
-      <div className="hidden md:grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4 xl:gap-5">
-        {visible.map((item, index) => (
-          <ToolCard
-            key={`pinned-${item.originalId}`}
-            item={item}
-            id={item.originalId!}
-            index={index}
-            {...toolCardProps}
-          />
-        ))}
-      </div>
+      <motion.div
+        layout
+        className="hidden md:grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4 xl:gap-5"
+      >
+        <AnimatePresence mode="popLayout" initial={false}>
+          {visible.map((item, index) => (
+            <motion.div
+              key={`pinned-${item.originalId}`}
+              layout
+              initial={{ opacity: 0, scale: 0.85 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.85 }}
+              transition={{ type: 'spring', stiffness: 420, damping: 30 }}
+              className="h-full"
+            >
+              <ToolCard item={item} id={item.originalId!} index={index} {...toolCardProps} />
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </motion.div>
       {overflow > 0 && (
         <div className="hidden md:flex justify-center">
           <Button
diff --git a/apps/web/src/components/dashboard/dashboard-recent-tools.tsx b/apps/web/src/components/dashboard/dashboard-recent-tools.tsx
index 7a7d3bbe..86af56b4 100644
--- a/apps/web/src/components/dashboard/dashboard-recent-tools.tsx
+++ b/apps/web/src/components/dashboard/dashboard-recent-tools.tsx
@@ -6,8 +6,11 @@ import { Clock, ChevronDown, History } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { type FavoriteItem, type ToolCardProps } from './types'
 import { ToolCard, HScrollFade } from './dashboard-tool-card'
+import { DashboardSectionHeader } from './dashboard-section-header'
 import { Button } from '@/components/ui/button'
 
+const RECENT_ACCENT = { bg: 'bg-blue-500/10', text: 'text-blue-600 dark:text-blue-400' }
+
 interface DashboardRecentToolsProps {
   recentItems: FavoriteItem[]
   toolCardProps: Omit<ToolCardProps, 'item' | 'id' | 'index'>
@@ -37,24 +40,21 @@ export function DashboardRecentTools({
 
   return (
     <section className="space-y-3 md:space-y-5">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3 section-header-line pb-2">
-          <div className="p-2 rounded-lg bg-blue-500/10 text-blue-600 dark:text-blue-400">
-            <Clock size={18} strokeWidth={1.5} />
-          </div>
-          <h2 className="text-xl font-semibold">{t('sections.recentlyUsed')}</h2>
-          <span className="text-xs font-medium text-muted-foreground bg-muted/50 px-2 py-0.5 rounded-full">
-            {recentItems.length}
-          </span>
-        </div>
-        <Link
-          href="/dashboard/activity"
-          className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-card text-sm font-medium text-foreground hover:bg-muted/50 transition-colors shrink-0"
-        >
-          <History size={15} className="text-primary" />
-          {t('viewActivity')}
-        </Link>
-      </div>
+      <DashboardSectionHeader
+        icon={Clock}
+        title={t('sections.recentlyUsed')}
+        count={recentItems.length}
+        accent={RECENT_ACCENT}
+        action={
+          <Link
+            href="/dashboard/activity"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-card text-sm font-medium text-foreground hover:bg-muted/50 hover:border-primary/40 transition-colors"
+          >
+            <History size={15} className="text-primary" />
+            {t('viewActivity')}
+          </Link>
+        }
+      />
       {/* Mobile: horizontal scroll */}
       <div className="md:hidden -mx-4 px-4">
         <HScrollFade>
diff --git a/apps/web/src/components/dashboard/dashboard-reveal.tsx b/apps/web/src/components/dashboard/dashboard-reveal.tsx
new file mode 100644
index 00000000..e59f1922
--- /dev/null
+++ b/apps/web/src/components/dashboard/dashboard-reveal.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import React from 'react'
+import { motion, useReducedMotion } from 'framer-motion'
+
+const EASE = [0.16, 1, 0.3, 1] as const
+
+/**
+ * Mount fade-up for a dashboard section, staggered by `index`.
+ *
+ * Animates opacity + y only (compositor-friendly) and resolves to a static
+ * wrapper under prefers-reduced-motion. Do NOT wrap a position:sticky element
+ * in this — the residual transform would break stickiness; render those plainly.
+ */
+export function RevealItem({
+  index = 0,
+  children,
+  className,
+}: {
+  index?: number
+  children: React.ReactNode
+  className?: string
+}) {
+  const reduce = useReducedMotion()
+  if (reduce) return <div className={className}>{children}</div>
+
+  return (
+    <motion.div
+      className={className}
+      initial={{ opacity: 0, y: 14 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.45, delay: Math.min(index * 0.06, 0.4), ease: EASE }}
+    >
+      {children}
+    </motion.div>
+  )
+}
diff --git a/apps/web/src/components/dashboard/dashboard-search-bar.tsx b/apps/web/src/components/dashboard/dashboard-search-bar.tsx
index 6eaf7753..d0f03abe 100644
--- a/apps/web/src/components/dashboard/dashboard-search-bar.tsx
+++ b/apps/web/src/components/dashboard/dashboard-search-bar.tsx
@@ -54,15 +54,15 @@ export function DashboardSearchBar({
   )
 
   return (
-    <div className="sticky top-[56px] md:top-0 z-30 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60 border border-border/40 focus-within:border-primary/50 rounded-xl px-3 py-2 transition-colors">
+    <div className="sticky top-[56px] md:top-0 z-30 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60 border border-border/40 rounded-xl px-3 py-2 shadow-sm transition-all focus-within:border-primary/50 focus-within:shadow-md focus-within:shadow-primary/5 focus-within:ring-1 focus-within:ring-primary/20">
       <div className="relative flex items-center gap-1">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 h-[18px] w-[18px] text-muted-foreground" />
         <Input
           ref={searchInputRef}
           value={searchQuery}
           onChange={(event) => onSearchChange(event.target.value)}
-          placeholder={`Search ${totalTools}+ tools…`}
-          className="pl-9 pr-20 h-10 border-transparent bg-transparent shadow-none focus-visible:ring-0 focus-visible:border-transparent"
+          placeholder={`Search or jump to any of ${totalTools}+ tools…`}
+          className="h-12 pl-11 pr-24 text-[15px] border-transparent bg-transparent shadow-none placeholder:text-muted-foreground/70 focus-visible:ring-0 focus-visible:border-transparent"
         />
         <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
           {searchQuery && (
@@ -103,7 +103,7 @@ export function DashboardSearchBar({
             className={cn(
               'shrink-0 px-3 py-1 rounded-full text-xs font-medium border transition-colors',
               filterGroup === null
-                ? 'bg-primary text-primary-foreground border-primary'
+                ? 'bg-gradient-to-r from-primary to-violet-500 text-primary-foreground border-transparent shadow-sm'
                 : 'bg-muted/50 text-muted-foreground border-border/50 hover:border-primary/40 hover:text-foreground',
             )}
           >
diff --git a/apps/web/src/components/dashboard/dashboard-section-header.tsx b/apps/web/src/components/dashboard/dashboard-section-header.tsx
new file mode 100644
index 00000000..2b616ac4
--- /dev/null
+++ b/apps/web/src/components/dashboard/dashboard-section-header.tsx
@@ -0,0 +1,57 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { DEFAULT_ACCENT } from './types'
+
+interface DashboardSectionHeaderProps {
+  icon: React.ElementType
+  title: string
+  /** Optional count pill (e.g. number of tools in the section). */
+  count?: number
+  /** Per-category accent classes for the icon chip; defaults to primary. */
+  accent?: { bg: string; text: string }
+  /** Optional trailing action rendered on the right (e.g. a link/button). */
+  action?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Shared dashboard section header — an accented icon chip, title, optional
+ * count pill, and an optional trailing action, finished with a faded gradient
+ * hairline. Used across every dashboard section for consistent hierarchy.
+ */
+export function DashboardSectionHeader({
+  icon: Icon,
+  title,
+  count,
+  accent = DEFAULT_ACCENT,
+  action,
+  className,
+}: DashboardSectionHeaderProps) {
+  return (
+    <div className={cn('space-y-2.5', className)}>
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2.5">
+          <span
+            className={cn(
+              'flex h-9 w-9 shrink-0 items-center justify-center rounded-xl shadow-sm ring-1 ring-inset ring-border/60',
+              accent.bg,
+              accent.text,
+            )}
+          >
+            <Icon size={18} strokeWidth={1.75} />
+          </span>
+          <h2 className="truncate text-lg font-semibold tracking-tight md:text-xl">{title}</h2>
+          {typeof count === 'number' && (
+            <span className="shrink-0 rounded-full bg-muted/60 px-2 py-0.5 text-xs font-medium tabular-nums text-muted-foreground">
+              {count}
+            </span>
+          )}
+        </div>
+        {action ? <div className="shrink-0">{action}</div> : null}
+      </div>
+      <div className="h-px w-full bg-gradient-to-r from-border via-border/40 to-transparent" />
+    </div>
+  )
+}
diff --git a/apps/web/src/components/dashboard/dashboard-tool-card.tsx b/apps/web/src/components/dashboard/dashboard-tool-card.tsx
index a8737d0c..bdc678f0 100644
--- a/apps/web/src/components/dashboard/dashboard-tool-card.tsx
+++ b/apps/web/src/components/dashboard/dashboard-tool-card.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react'
 import Link from 'next/link'
+import { motion } from 'framer-motion'
 import { Sparkles, Pin } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { Card, CardContent } from '@/components/ui/card'
@@ -73,26 +74,38 @@ export const ToolCard = React.memo(function ToolCard({
 
   const pinned = item.url ? isPinned(item.url.toString()) : false
 
+  const cardRef = React.useRef<HTMLDivElement>(null)
+  const handleMove = (e: React.MouseEvent) => {
+    const el = cardRef.current
+    if (!el) return
+    const r = el.getBoundingClientRect()
+    el.style.setProperty('--mx', `${e.clientX - r.left}px`)
+    el.style.setProperty('--my', `${e.clientY - r.top}px`)
+  }
+
   return (
     <div className="rounded-xl h-full">
       <Link
         href={item.url || '#'}
         className="block group h-full rounded-xl focus-visible:outline-none"
         onClick={handleClick}
+        onMouseMove={handleMove}
         title={displayTitle}
       >
         <Card
+          ref={cardRef}
           className={cn(
-            'relative h-full overflow-hidden rounded-xl border border-border bg-gradient-to-br from-card to-card/60',
+            'dash-card-sheen relative h-full overflow-hidden rounded-xl border border-border bg-gradient-to-br from-card to-card/80',
+            'shadow-sm dark:shadow-none',
             'transition-[colors,transform,box-shadow,border-color] duration-200 ease-out',
-            'hover:border-primary/40 hover:shadow-md motion-safe:hover:-translate-y-0.5',
+            'hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5 motion-safe:hover:-translate-y-0.5',
             'group-focus-visible:ring-2 group-focus-visible:ring-primary/60 group-focus-visible:border-primary',
           )}
         >
           <CardContent className="flex items-start gap-3 p-3 md:p-3.5 relative z-10">
             <div
               className={cn(
-                'shrink-0 p-2 md:p-2.5 rounded-lg transition-transform duration-200 ease-out',
+                'shrink-0 p-2 md:p-2.5 rounded-lg ring-1 ring-inset ring-border/50 transition-transform duration-200 ease-out',
                 'motion-safe:group-hover:scale-110',
                 a.bg,
                 a.text,
@@ -150,15 +163,23 @@ export const ToolCard = React.memo(function ToolCard({
                       togglePin(item.url!.toString())
                     }}
                   >
-                    <Pin
-                      className={cn(
-                        'transition-colors',
-                        pinned
-                          ? 'text-primary fill-primary'
-                          : 'text-muted-foreground/70 hover:text-primary',
-                      )}
-                      size={14}
-                    />
+                    <motion.span
+                      key={pinned ? 'pinned' : 'unpinned'}
+                      initial={{ scale: 0.5 }}
+                      animate={{ scale: 1 }}
+                      transition={{ type: 'spring', stiffness: 520, damping: 14 }}
+                      className="inline-flex"
+                    >
+                      <Pin
+                        className={cn(
+                          'transition-colors',
+                          pinned
+                            ? 'text-primary fill-primary'
+                            : 'text-muted-foreground/70 hover:text-primary',
+                        )}
+                        size={14}
+                      />
+                    </motion.span>
                   </button>
                 </TooltipTrigger>
                 <TooltipContent side="top" sideOffset={4} className="text-xs">
diff --git a/apps/web/src/components/dashboard/dashboard-tool-grid.tsx b/apps/web/src/components/dashboard/dashboard-tool-grid.tsx
index 4b1ab152..0b2450dc 100644
--- a/apps/web/src/components/dashboard/dashboard-tool-grid.tsx
+++ b/apps/web/src/components/dashboard/dashboard-tool-grid.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import React from 'react'
-import { Sparkles } from 'lucide-react'
+import { motion } from 'framer-motion'
+import { Sparkles, SearchX } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import {
   type RenderGroup,
@@ -13,6 +14,7 @@ import {
   categoryAccent,
 } from './types'
 import { ToolCard } from './dashboard-tool-card'
+import { DashboardSectionHeader } from './dashboard-section-header'
 
 interface DashboardToolGridProps {
   filteredGroups: RenderGroup[]
@@ -41,49 +43,47 @@ export function DashboardToolGrid({
         const accent = categoryAccent(group.title)
         return (
         <section key={`${group.title}-${group.originalGroupIndex}`} className="space-y-5">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3 section-header-line pb-2">
-              <div className={`p-2 rounded-lg ${accent.bg} ${accent.text}`}>
-                {group.icon ? (
-                  <group.icon size={18} strokeWidth={1.5} />
-                ) : (
-                  <Sparkles size={18} strokeWidth={1.5} />
-                )}
-              </div>
-              <h2 className="text-xl font-semibold">{groupDisplayTitle(group.title, t)}</h2>
-              <span className="text-xs font-medium text-muted-foreground bg-muted/50 px-2 py-0.5 rounded-full">
-                {group.items.reduce(
-                  (acc, item) => acc + (item.items ? item.items.length : 1),
-                  0,
-                )}
-              </span>
-            </div>
-          </div>
+          <DashboardSectionHeader
+            icon={group.icon ?? Sparkles}
+            title={groupDisplayTitle(group.title, t)}
+            accent={accent}
+            count={group.items.reduce(
+              (acc, item) => acc + (item.items ? item.items.length : 1),
+              0,
+            )}
+          />
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4 xl:gap-5">
             {group.items.map((item: any, itemIndex: number) => (
               <React.Fragment key={`${groupIndex}-${itemIndex}`}>
                 {/* Render search result items (flattened) */}
                 {item.originalId && (
-                  <ToolCard
-                    item={item}
-                    id={item.originalId}
-                    index={itemIndex}
-                    accent={accent}
-                    {...toolCardProps}
-                  />
+                  <motion.div layout="position" className="h-full">
+                    <ToolCard
+                      item={item}
+                      id={item.originalId}
+                      index={itemIndex}
+                      accent={accent}
+                      {...toolCardProps}
+                    />
+                  </motion.div>
                 )}
 
                 {/* Render nested items directly in the grid (only when not searching) */}
                 {item.items &&
                   item.items.map((subItem: ToolItem, subIndex: number) => (
-                    <ToolCard
+                    <motion.div
                       key={`${groupIndex}-${itemIndex}-${subIndex}`}
-                      item={{ ...subItem, icon: subItem.icon ?? item.icon }}
-                      id={createItemId(group.originalGroupIndex, itemIndex, subIndex)}
-                      index={subIndex}
-                      accent={accent}
-                      {...toolCardProps}
-                    />
+                      layout="position"
+                      className="h-full"
+                    >
+                      <ToolCard
+                        item={{ ...subItem, icon: subItem.icon ?? item.icon }}
+                        id={createItemId(group.originalGroupIndex, itemIndex, subIndex)}
+                        index={subIndex}
+                        accent={accent}
+                        {...toolCardProps}
+                      />
+                    </motion.div>
                   ))}
               </React.Fragment>
             ))}
@@ -94,9 +94,14 @@ export function DashboardToolGrid({
       {/* No results state */}
       {(searchQuery || filterGroup) && filteredGroups.length === 0 && (
         <div className="space-y-5">
-          <div className="rounded-lg border border-dashed border-border p-8 text-center">
-            <p className="text-sm font-medium text-foreground">{t('noResults')}</p>
-            <p className="mt-1 text-xs text-muted-foreground">{t('noResultsHint')}</p>
+          <div className="flex flex-col items-center gap-3 rounded-2xl border border-dashed border-border/60 bg-gradient-to-b from-muted/20 to-transparent p-10 text-center">
+            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-muted/60 text-muted-foreground ring-1 ring-inset ring-border/50">
+              <SearchX size={22} strokeWidth={1.5} />
+            </div>
+            <div>
+              <p className="text-sm font-semibold text-foreground">{t('noResults')}</p>
+              <p className="mt-1 text-xs text-muted-foreground">{t('noResultsHint')}</p>
+            </div>
           </div>
           {popularItems.length > 0 && (
             <div className="space-y-3">
diff --git a/apps/web/src/components/dashboard/dashboard-whats-new.tsx b/apps/web/src/components/dashboard/dashboard-whats-new.tsx
index 82b27af3..bf2eaf0e 100644
--- a/apps/web/src/components/dashboard/dashboard-whats-new.tsx
+++ b/apps/web/src/components/dashboard/dashboard-whats-new.tsx
@@ -5,6 +5,9 @@ import { Wand2 } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { type RenderToolItem, type ToolCardProps } from './types'
 import { ToolCard, HScrollFade } from './dashboard-tool-card'
+import { DashboardSectionHeader } from './dashboard-section-header'
+
+const WHATS_NEW_ACCENT = { bg: 'bg-amber-500/15', text: 'text-amber-600 dark:text-amber-400' }
 
 interface DashboardWhatsNewProps {
   whatsNewItems: RenderToolItem[]
@@ -29,15 +32,12 @@ export function DashboardWhatsNew({
 
   return (
     <section className="space-y-3 md:space-y-5 rounded-2xl border border-amber-500/20 bg-amber-500/[0.03] p-4 md:p-5">
-      <div className="flex items-center gap-3 pb-2 border-b border-amber-500/15">
-        <div className="p-2 rounded-xl bg-amber-500/15 text-amber-500">
-          <Wand2 size={18} strokeWidth={1.5} />
-        </div>
-        <h2 className="text-xl font-semibold">{t('sections.whatsNew')}</h2>
-        <span className="text-xs font-medium text-amber-600/80 dark:text-amber-400/80 bg-amber-500/10 px-2 py-0.5 rounded-full border border-amber-500/20">
-          {whatsNewItems.length}
-        </span>
-      </div>
+      <DashboardSectionHeader
+        icon={Wand2}
+        title={t('sections.whatsNew')}
+        count={whatsNewItems.length}
+        accent={WHATS_NEW_ACCENT}
+      />
       {/* Mobile: horizontal scroll */}
       <div className="md:hidden -mx-4 px-4">
         <HScrollFade>
diff --git a/apps/web/src/components/ensure-backend-session.tsx b/apps/web/src/components/ensure-backend-session.tsx
index 7721b251..85e1590d 100644
--- a/apps/web/src/components/ensure-backend-session.tsx
+++ b/apps/web/src/components/ensure-backend-session.tsx
@@ -2,8 +2,8 @@
 
 import { useEffect, useState } from "react"
 import type { User } from "firebase/auth"
-import { Loader2 } from "lucide-react"
 import { ensureBackendSession } from "@/lib/backend-auth"
+import { AppLoadingScreen } from "@/components/app-loading-screen"
 
 type Props = {
     user: User | null
@@ -51,12 +51,7 @@ export function EnsureBackendSession({ user, children }: Props) {
     }, [user])
 
     if (user && !ready) {
-        return (
-            <div className="fixed inset-0 z-[9999] flex h-[100dvh] w-[100dvw] flex-col items-center justify-center gap-3 bg-background">
-                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" aria-hidden />
-                <p className="text-sm text-muted-foreground">Loading…</p>
-            </div>
-        )
+        return <AppLoadingScreen label="Securing your session" />
     }
 
     return <>{children}</>
diff --git a/apps/web/src/components/global-command-palette.tsx b/apps/web/src/components/global-command-palette.tsx
index 78ef5481..baea1c23 100644
--- a/apps/web/src/components/global-command-palette.tsx
+++ b/apps/web/src/components/global-command-palette.tsx
@@ -174,7 +174,11 @@ export function GlobalCommandPalette() {
           shouldFilter
           loop
         >
-          <CommandInput placeholder="Search tools and pages…" aria-label="Search tools and pages" />
+          <CommandInput
+            placeholder="Search tools and pages…"
+            aria-label="Search tools and pages"
+            className="focus-visible:outline-none"
+          />
           <CommandList className="max-h-[min(60vh,480px)] overflow-y-auto">
             <CommandEmpty>No results found.</CommandEmpty>
             {recentEntries.length > 0 && (
@@ -187,7 +191,7 @@ export function GlobalCommandPalette() {
                         key={`recent-${entry.url}`}
                         value={`recent ${entry.searchValue} ${entry.url}`.toLowerCase()}
                         onSelect={() => run(entry)}
-                        className="flex items-start gap-3 py-2.5 aria-selected:bg-accent"
+                        className="mx-1 flex items-start gap-3 rounded-lg py-2.5 transition-colors aria-selected:bg-gradient-to-r aria-selected:from-primary/[0.12] aria-selected:to-primary/[0.04] aria-selected:ring-1 aria-selected:ring-inset aria-selected:ring-primary/15"
                       >
                         <ItemIcon className="mt-0.5 h-4 w-4 shrink-0 opacity-70" aria-hidden />
                         <span className="flex min-w-0 flex-1 flex-col gap-0.5">
@@ -217,7 +221,7 @@ export function GlobalCommandPalette() {
                         key={`pinned-${entry.url}`}
                         value={`pinned ${entry.searchValue} ${entry.url}`.toLowerCase()}
                         onSelect={() => run(entry)}
-                        className="flex items-start gap-3 py-2.5 aria-selected:bg-accent"
+                        className="mx-1 flex items-start gap-3 rounded-lg py-2.5 transition-colors aria-selected:bg-gradient-to-r aria-selected:from-primary/[0.12] aria-selected:to-primary/[0.04] aria-selected:ring-1 aria-selected:ring-inset aria-selected:ring-primary/15"
                       >
                         <Star
                           className="mt-0.5 h-4 w-4 shrink-0 fill-primary text-primary"
@@ -278,7 +282,7 @@ export function GlobalCommandPalette() {
               </React.Fragment>
             ))}
           </CommandList>
-          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-border/60 px-3 py-2 text-[11px] text-muted-foreground">
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 border-t border-border/60 px-4 py-3 text-[11px] text-muted-foreground">
             <span>
               <kbd className="pointer-events-none rounded border border-border bg-muted/80 px-1.5 py-0.5 font-mono">
                 ↑↓
diff --git a/apps/web/src/components/graphql-formatter/graphql-formatter-layout.tsx b/apps/web/src/components/graphql-formatter/graphql-formatter-layout.tsx
index 4435f6dc..71b4cdca 100644
--- a/apps/web/src/components/graphql-formatter/graphql-formatter-layout.tsx
+++ b/apps/web/src/components/graphql-formatter/graphql-formatter-layout.tsx
@@ -151,7 +151,7 @@ export function GraphqlFormatterLayout() {
                 </Select>
               </div>
               <div className="flex flex-wrap gap-2 pb-0.5">
-                <Button type="button" size="sm" className="gap-1.5 h-9" onClick={runFormat}>
+                <Button type="button" variant="gradient" size="sm" className="gap-1.5 h-9" onClick={runFormat}>
                   <Wand2 className="h-3.5 w-3.5" />
                   {t('format')}
                 </Button>
diff --git a/apps/web/src/components/json-formatter/json-formatter-layout.tsx b/apps/web/src/components/json-formatter/json-formatter-layout.tsx
index 4bcf4b39..96359b84 100644
--- a/apps/web/src/components/json-formatter/json-formatter-layout.tsx
+++ b/apps/web/src/components/json-formatter/json-formatter-layout.tsx
@@ -289,11 +289,11 @@ export function JsonFormatterLayout() {
   const renderPaneToolbar = (pane: PaneKey) => {
     const state = pane === 'left' ? leftPane : rightPane
     return (
-      <div className="flex flex-wrap items-center gap-2 border-b p-2">
+      <div className="flex flex-wrap items-center gap-2 border-b border-border/60 bg-muted/30 px-2.5 py-2">
         <input
           value={state.documentName}
           onChange={(event) => handlePaneNameChange(pane, event.target.value)}
-          className="h-8 w-full sm:w-[170px] rounded-md border border-input bg-background px-2.5 text-xs text-foreground outline-none ring-offset-background transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          className="h-8 w-full sm:w-[170px] rounded-md border border-input bg-background px-2.5 text-xs font-medium text-foreground outline-none transition-[color,border-color,box-shadow] duration-150 hover:border-border focus-visible:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary/20"
           aria-label={pane === 'left' ? t('leftDocNameLabel') : t('rightDocNameLabel')}
         />
         <Button variant="outline" size="sm" onClick={() => handleNewDocument(pane)}>
@@ -309,7 +309,7 @@ export function JsonFormatterLayout() {
           <IconFolderOpen className="mr-1.5 h-4 w-4" />
           {t.has('load') ? t('load') : 'Load'}
         </Button>
-        <Button size="sm" onClick={() => handleSave(pane)} disabled={state.isSaving}>
+        <Button variant="gradient" size="sm" onClick={() => handleSave(pane)} disabled={state.isSaving}>
           <IconDeviceFloppy className="mr-1.5 h-4 w-4" />
           {state.isSaving ? t('saving') : t('save')}
         </Button>
@@ -323,7 +323,7 @@ export function JsonFormatterLayout() {
         <CardHeader className="p-3 md:pb-3">
           <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
             <div className="flex items-center gap-2.5">
-              <div className="rounded-xl bg-primary/10 p-2 shadow-sm transition-all hover:scale-105 hover:bg-primary/20">
+              <div className="rounded-xl bg-gradient-to-br from-primary/15 to-violet-500/10 p-2 text-primary shadow-sm ring-1 ring-inset ring-border/50 transition-all hover:scale-105">
                 <IconJson className="h-5 w-5 text-primary" aria-hidden />
               </div>
               <div className="flex flex-col gap-0.5">
@@ -367,7 +367,7 @@ export function JsonFormatterLayout() {
 
       {isMobile ? (
         /* Mobile: single full-height pane, toggled by tabs */
-        <div className="min-h-0 flex-1 rounded-lg border overflow-hidden flex flex-col">
+        <div className="min-h-0 flex-1 rounded-xl border border-border/70 bg-card shadow-sm overflow-hidden flex flex-col">
           {renderPaneToolbar(activePane)}
           <div className="min-h-0 flex-1">
             {activePane === 'left' ? (
@@ -398,7 +398,7 @@ export function JsonFormatterLayout() {
         /* Desktop: side-by-side resizable panes */
         <ResizablePanelGroup
           direction="horizontal"
-          className="min-h-0 flex-1 rounded-lg border overflow-hidden"
+          className="min-h-0 flex-1 rounded-xl border border-border/70 bg-card shadow-sm 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/web/src/components/lorem-ipsum/lorem-ipsum-layout.tsx b/apps/web/src/components/lorem-ipsum/lorem-ipsum-layout.tsx
index cabbc3fd..4a9ed376 100644
--- a/apps/web/src/components/lorem-ipsum/lorem-ipsum-layout.tsx
+++ b/apps/web/src/components/lorem-ipsum/lorem-ipsum-layout.tsx
@@ -130,7 +130,7 @@ export function LoremIpsumLayout() {
             <Switch id="lorem-html" checked={asHtml} onCheckedChange={setAsHtml} />
           </div>
 
-          <Button type="button" onClick={runGenerate} className="gap-1.5 w-full sm:w-fit">
+          <Button type="button" variant="gradient" onClick={runGenerate} className="gap-1.5 w-full sm:w-fit">
             <RefreshCw className="h-3.5 w-3.5" />
             {t('generate')}
           </Button>
diff --git a/apps/web/src/components/master-password-gate.tsx b/apps/web/src/components/master-password-gate.tsx
index 35fde7cb..0f896711 100644
--- a/apps/web/src/components/master-password-gate.tsx
+++ b/apps/web/src/components/master-password-gate.tsx
@@ -294,6 +294,16 @@ export function MasterPasswordGate() {
                     if (showBackupCodes) e.preventDefault()
                 }}
             >
+                {/* Premium branded top accent (deck signature) */}
+                <div
+                    aria-hidden
+                    className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-primary/[0.07] via-violet-500/[0.04] to-transparent"
+                />
+                <div
+                    aria-hidden
+                    className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"
+                />
+
                 {/* Hidden accessible title/description for screen readers */}
                 <DialogHeader className="sr-only">
                     <DialogTitle>
@@ -405,10 +415,10 @@ export function MasterPasswordGate() {
                                     />
                                     <div
                                         className={cn(
-                                            "relative flex h-[60px] w-[60px] items-center justify-center rounded-full border",
+                                            "relative flex h-[60px] w-[60px] items-center justify-center rounded-full border shadow-sm",
                                             isSetup
-                                                ? "border-emerald-500/25 bg-emerald-500/8"
-                                                : "border-border bg-muted/60",
+                                                ? "border-emerald-500/30 bg-gradient-to-b from-emerald-500/20 to-emerald-500/[0.04] ring-1 ring-inset ring-emerald-500/10"
+                                                : "border-border bg-gradient-to-b from-muted to-muted/40 ring-1 ring-inset ring-border/50",
                                         )}
                                     >
                                         {mode === "loading" ? (
@@ -676,6 +686,7 @@ export function MasterPasswordGate() {
 
                                             <Button
                                                 type="submit"
+                                                variant="gradient"
                                                 className="w-full"
                                                 size="lg"
                                                 disabled={
diff --git a/apps/web/src/components/mobile-nav.tsx b/apps/web/src/components/mobile-nav.tsx
index 1da00209..d11ddd19 100644
--- a/apps/web/src/components/mobile-nav.tsx
+++ b/apps/web/src/components/mobile-nav.tsx
@@ -128,7 +128,7 @@ export function MobileNav() {
                 {activeTab === 'home' && (
                     <motion.div
                         layoutId="active-mobile-nav"
-                        className="absolute inset-0 bg-primary/10 rounded-full -z-10"
+                        className="absolute inset-0 rounded-full bg-gradient-to-br from-primary/20 to-violet-500/10 ring-1 ring-inset ring-primary/15 -z-10"
                         transition={{ type: "spring", stiffness: 400, damping: 30 }}
                     />
                 )}
@@ -149,7 +149,7 @@ export function MobileNav() {
                 {activeTab === 'tools' && (
                     <motion.div
                         layoutId="active-mobile-nav"
-                        className="absolute inset-0 bg-primary/10 rounded-full -z-10"
+                        className="absolute inset-0 rounded-full bg-gradient-to-br from-primary/20 to-violet-500/10 ring-1 ring-inset ring-primary/15 -z-10"
                         transition={{ type: "spring", stiffness: 400, damping: 30 }}
                     />
                 )}
@@ -171,7 +171,7 @@ export function MobileNav() {
                             {activeTab === 'profile' && (
                                 <motion.div
                                     layoutId="active-mobile-nav"
-                                    className="absolute inset-0 bg-primary/10 rounded-full -z-10"
+                                    className="absolute inset-0 rounded-full bg-gradient-to-br from-primary/20 to-violet-500/10 ring-1 ring-inset ring-primary/15 -z-10"
                                     transition={{ type: "spring", stiffness: 400, damping: 30 }}
                                 />
                             )}
diff --git a/apps/web/src/components/mock-data-generator/mock-data-generator-layout.tsx b/apps/web/src/components/mock-data-generator/mock-data-generator-layout.tsx
index 77e99ef6..91b29b6d 100644
--- a/apps/web/src/components/mock-data-generator/mock-data-generator-layout.tsx
+++ b/apps/web/src/components/mock-data-generator/mock-data-generator-layout.tsx
@@ -282,7 +282,7 @@ export function MockDataGeneratorLayout() {
                 </SelectContent>
               </Select>
             </div>
-            <Button type="button" onClick={runGenerate} className="gap-2 shrink-0">
+            <Button type="button" variant="gradient" onClick={runGenerate} className="gap-2 shrink-0">
               <RefreshCw className="h-4 w-4" />
               {t('generate')}
             </Button>
diff --git a/apps/web/src/components/nav-bar.tsx b/apps/web/src/components/nav-bar.tsx
index dd906347..11500722 100644
--- a/apps/web/src/components/nav-bar.tsx
+++ b/apps/web/src/components/nav-bar.tsx
@@ -2,10 +2,43 @@
 
 import { usePathname } from "next/navigation";
 import { useTranslations, useMessages } from "next-intl";
+import { Search } from "lucide-react";
 import { ModeToggle } from "@/components/modeToggle";
 import { getToolMessageKey } from "@/lib/tool-i18n";
 import { routeConfig } from "@/lib/route-config";
 
+function openCommandPalette() {
+  document.dispatchEvent(new CustomEvent("open-command-palette"));
+}
+
+/** Global ⌘K launcher — keeps the command-center pattern on every app page. */
+function CommandTrigger() {
+  return (
+    <>
+      <button
+        type="button"
+        onClick={openCommandPalette}
+        aria-label="Search or jump to a tool"
+        className="group hidden h-9 w-[clamp(180px,22vw,300px)] items-center gap-2 rounded-lg border border-border/60 bg-muted/40 px-3 text-sm text-muted-foreground shadow-sm transition-all hover:border-primary/40 hover:bg-muted/60 hover:text-foreground lg:flex"
+      >
+        <Search className="h-4 w-4 shrink-0" />
+        <span className="flex-1 truncate text-left">Search or jump to…</span>
+        <kbd className="inline-flex items-center gap-0.5 rounded border border-border/60 bg-background/70 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+          ⌘K
+        </kbd>
+      </button>
+      <button
+        type="button"
+        onClick={openCommandPalette}
+        aria-label="Search or jump to a tool"
+        className="flex h-9 w-9 items-center justify-center rounded-lg border border-border/60 bg-muted/40 text-muted-foreground transition-colors hover:border-primary/40 hover:text-foreground lg:hidden"
+      >
+        <Search className="h-4 w-4" />
+      </button>
+    </>
+  );
+}
+
 /** Strip HTML-like tags and ICU {variable} placeholders from rich-text subtitles. */
 function cleanSubtitle(raw: string): string {
   return raw
@@ -29,8 +62,9 @@ export function NavBar() {
   if (!config) {
     if (pathname.startsWith("/app")) {
       return (
-        <header className="sticky top-0 z-20 hidden w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:block">
-          <div className="flex h-12 items-center justify-end gap-2 px-4">
+        <header className="sticky top-0 z-20 hidden w-full border-b border-border/60 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:block">
+          <div className="flex h-14 items-center justify-end gap-2 px-4">
+            <CommandTrigger />
             <ModeToggle />
           </div>
         </header>
@@ -50,10 +84,10 @@ export function NavBar() {
   const subtitle = rawSubtitle ? cleanSubtitle(rawSubtitle) : undefined;
 
   return (
-    <header className="sticky top-0 z-20 hidden w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:block">
-      <div className="flex min-h-12 w-full items-center justify-between gap-3 px-4 py-2">
-        <div className="flex min-w-0 items-center gap-2.5">
-          <div className="shrink-0 rounded-lg bg-primary/10 p-1.5">
+    <header className="sticky top-0 z-20 hidden w-full border-b border-border/60 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:block">
+      <div className="flex h-14 w-full items-center gap-4 px-4">
+        <div className="flex min-w-0 flex-1 items-center gap-2.5">
+          <div className="shrink-0 rounded-lg bg-gradient-to-br from-primary/15 to-violet-500/10 p-1.5 ring-1 ring-inset ring-border/50">
             <Icon className="h-4 w-4 text-primary" strokeWidth={2} />
           </div>
           <div className="flex min-w-0 flex-col">
@@ -67,7 +101,8 @@ export function NavBar() {
             )}
           </div>
         </div>
-        <div className="flex shrink-0 items-center gap-2">
+        <CommandTrigger />
+        <div className="flex flex-1 shrink-0 items-center justify-end gap-2">
           <ModeToggle />
         </div>
       </div>
diff --git a/apps/web/src/components/onboarding-modal.tsx b/apps/web/src/components/onboarding-modal.tsx
index 4ffb73f8..bdfd7b9b 100644
--- a/apps/web/src/components/onboarding-modal.tsx
+++ b/apps/web/src/components/onboarding-modal.tsx
@@ -8,10 +8,101 @@ import { Progress } from "@/components/ui/progress"
 import { completeOnboarding } from "@/lib/onboarding-api"
 import { useToolVisibilityStore } from "@/store/tool-visibility-store"
 import { patchUserPreferences } from "@/lib/user-preferences-api"
+<<<<<<< Updated upstream
 import { IconArrowRight, IconCheck, IconX } from "@tabler/icons-react"
 import { WelcomeStep } from "./onboarding-modal/welcome-step"
 import { TourStep, TOUR_SLIDES } from "./onboarding-modal/tour-step"
 import { ToolSelectionStep, buildCategories } from "./onboarding-modal/tool-selection"
+=======
+import {
+  IconRocket,
+  IconShield,
+  IconBraces,
+  IconArrowsExchange,
+  IconWand,
+  IconNetwork,
+  IconServer,
+  IconPalette,
+  IconDeviceGamepad2,
+  IconCheck,
+  IconArrowRight,
+  IconLayout,
+  IconCommand,
+  IconPin,
+  IconX,
+  IconChevronDown as IconChevron,
+} from "@tabler/icons-react"
+import { sidebarData } from "@/components/sidebar/data/sidebar-data"
+import type { NavLink, NavCollapsible } from "@/components/sidebar/types"
+import MdtAurora from "@/components/mdt-aurora"
+
+// ── Tool category icons by title ──────────────────────────────────────────────
+
+const CATEGORY_ICONS: Record<string, React.ElementType> = {
+  Productivity: IconRocket,
+  Security: IconShield,
+  Formatters: IconBraces,
+  Converters: IconArrowsExchange,
+  Generators: IconWand,
+  "Network & API": IconNetwork,
+  Database: IconServer,
+  "Media & Design": IconPalette,
+  "Break Room": IconDeviceGamepad2,
+}
+
+const CATEGORY_COLORS: Record<string, string> = {
+  Productivity: "from-violet-500/20 to-violet-600/10 border-violet-500/30",
+  Security: "from-green-500/20 to-green-600/10 border-green-500/30",
+  Formatters: "from-blue-500/20 to-blue-600/10 border-blue-500/30",
+  Converters: "from-cyan-500/20 to-cyan-600/10 border-cyan-500/30",
+  Generators: "from-amber-500/20 to-amber-600/10 border-amber-500/30",
+  "Network & API": "from-orange-500/20 to-orange-600/10 border-orange-500/30",
+  Database: "from-red-500/20 to-red-600/10 border-red-500/30",
+  "Media & Design": "from-pink-500/20 to-pink-600/10 border-pink-500/30",
+  "Break Room": "from-emerald-500/20 to-emerald-600/10 border-emerald-500/30",
+}
+
+const CATEGORY_ICON_COLORS: Record<string, string> = {
+  Productivity: "text-violet-400",
+  Security: "text-green-400",
+  Formatters: "text-blue-400",
+  Converters: "text-cyan-400",
+  Generators: "text-amber-400",
+  "Network & API": "text-orange-400",
+  Database: "text-red-400",
+  "Media & Design": "text-pink-400",
+  "Break Room": "text-emerald-400",
+}
+
+// ── Tour slides ───────────────────────────────────────────────────────────────
+
+const TOUR_SLIDES = [
+  {
+    icon: IconLayout,
+    iconColor: "text-violet-400",
+    bg: "from-violet-500/10 to-transparent",
+    title: "Your workspace, your way",
+    description:
+      "Every tool lives in the sidebar. Open multiple tools in tabs — they stay open until you close them. Your layout is restored on every visit.",
+  },
+  {
+    icon: IconCommand,
+    iconColor: "text-blue-400",
+    bg: "from-blue-500/10 to-transparent",
+    title: "Command palette",
+    description:
+      "Press ⌘K (or Ctrl+K) to instantly search and launch any tool, jump to settings, or switch tabs — without touching the mouse.",
+  },
+  {
+    icon: IconPin,
+    iconColor: "text-amber-400",
+    bg: "from-amber-500/10 to-transparent",
+    title: "Pin your favourites",
+    description:
+      "Right-click any tool in the sidebar to pin it to the top. Pinned tools are synced across all your devices.",
+  },
+]
+>>>>>>> Stashed changes
 
 // ── Step indicators ───────────────────────────────────────────────────────────
 
@@ -26,6 +117,439 @@ function StepDot({ active, done }: { active: boolean; done: boolean }) {
   )
 }
 
+<<<<<<< Updated upstream
+=======
+// ── Step 0: Welcome ───────────────────────────────────────────────────────────
+
+const WELCOME_HIGHLIGHTS = [
+  { icon: IconBraces, label: "60+ tools" },
+  { icon: IconCommand, label: "⌘K to launch" },
+  { icon: IconShield, label: "Encrypted sync" },
+  { icon: IconLayout, label: "Yours, instantly" },
+]
+
+function WelcomeStep() {
+  return (
+    <div className="relative flex h-full flex-col items-center justify-center px-8 py-10 text-center">
+      <motion.p
+        initial={{ y: 12, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.05 }}
+        className="mdt-kicker mb-5"
+      >
+        Welcome aboard
+      </motion.p>
+
+      <motion.h2
+        initial={{ y: 16, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.12 }}
+        className="max-w-3xl text-balance text-4xl font-bold leading-[1.08] tracking-tight sm:text-5xl"
+      >
+        Your entire dev toolkit,{" "}
+        <span className="mdt-grad-text mdt-grad-anim">one tab away.</span>
+      </motion.h2>
+
+      <motion.p
+        initial={{ y: 16, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.2 }}
+        className="mx-auto mt-5 max-w-md text-pretty text-base leading-relaxed text-muted-foreground"
+      >
+        Let&apos;s take 30 seconds to build your workspace and learn the two shortcuts you&apos;ll use
+        every day.
+      </motion.p>
+
+      <motion.div
+        initial={{ y: 16, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.3 }}
+        className="mt-10 grid w-full max-w-lg grid-cols-2 gap-3 sm:grid-cols-4"
+      >
+        {WELCOME_HIGHLIGHTS.map(({ icon: Icon, label }) => (
+          <div
+            key={label}
+            className="glass-overlay flex flex-col items-center gap-2 rounded-xl px-3 py-4"
+          >
+            <Icon className="mdt-icon-grad h-5 w-5" />
+            <span className="text-xs font-medium text-foreground/80">{label}</span>
+          </div>
+        ))}
+      </motion.div>
+    </div>
+  )
+}
+
+// ── Step 1: Tool selection ────────────────────────────────────────────────────
+
+/** Flip this to switch between selection UIs without touching anything else. */
+const TOOL_SELECTION_MODE: "tags" | "checkboxes" = "tags"
+
+interface ToolEntry {
+  title: string
+  url: string
+  icon?: React.ElementType
+}
+
+interface Category {
+  title: string
+  tools: ToolEntry[]
+}
+
+function buildCategories(): Category[] {
+  return sidebarData.navGroups.map((g) => ({
+    title: g.title,
+    tools: g.items.flatMap((item) => {
+      if (!("items" in item)) {
+        const link = item as NavLink
+        return [{ title: link.title, url: String(link.url), icon: link.icon }]
+      }
+      return (item as NavCollapsible).items.map((s) => ({
+        title: s.title,
+        url: String(s.url),
+        icon: s.icon,
+      }))
+    }),
+  }))
+}
+
+interface SelectionProps {
+  selectedUrls: Set<string>
+  onToggleTool: (url: string) => void
+  onToggleCategory: (urls: string[], selected: boolean) => void
+}
+
+// ── Tags UI ───────────────────────────────────────────────────────────────────
+
+function TagsToolSelection({ selectedUrls, onToggleTool, onToggleCategory }: SelectionProps) {
+  const categories = React.useMemo(() => buildCategories(), [])
+  const allUrls = React.useMemo(() => categories.flatMap((c) => c.tools.map((t) => t.url)), [categories])
+  const allTools = React.useMemo(() => categories.flatMap((c) => c.tools), [categories])
+  const selectedTools = allTools.filter((t) => selectedUrls.has(t.url))
+
+  return (
+    <div className="flex h-full flex-col">
+      <header className="shrink-0 px-6 pt-6 pb-3">
+        <p className="mdt-kicker mb-2">Step 2 · Build your workspace</p>
+        <h2 className="text-2xl font-bold tracking-tight">Pick the tools you&apos;ll use</h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          They get pinned to your sidebar — watch it fill as you choose. Change anytime in Settings.
+        </p>
+      </header>
+
+      <div className="grid min-h-0 flex-1 lg:grid-cols-[minmax(0,1fr)_290px]">
+        {/* Picker */}
+        <ScrollArea className="h-full px-6 pb-4">
+          <div className="flex flex-col gap-5 pb-2">
+            {categories.map((cat) => {
+              const urls = cat.tools.map((t) => t.url)
+              const allSelected = urls.every((u) => selectedUrls.has(u))
+              const Icon = CATEGORY_ICONS[cat.title] ?? IconWand
+              const iconColor = CATEGORY_ICON_COLORS[cat.title] ?? "text-primary"
+
+              return (
+                <div key={cat.title}>
+                  <div className="mb-2.5 flex items-center gap-2">
+                    <Icon className={cn("h-3.5 w-3.5 flex-shrink-0", iconColor)} />
+                    <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                      {cat.title}
+                    </span>
+                    <div className="h-px flex-1 bg-border/50" />
+                    <button
+                      onClick={() => onToggleCategory(urls, !allSelected)}
+                      className="text-[11px] text-muted-foreground/60 transition-colors hover:text-primary"
+                    >
+                      {allSelected ? "Deselect all" : "Select all"}
+                    </button>
+                  </div>
+
+                  <div className="flex flex-wrap gap-1.5">
+                    {cat.tools.map((tool) => {
+                      const selected = selectedUrls.has(tool.url)
+                      const ToolIcon = tool.icon
+                      return (
+                        <motion.button
+                          key={tool.url}
+                          onClick={() => onToggleTool(tool.url)}
+                          whileTap={{ scale: 0.94 }}
+                          className={cn(
+                            "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-all duration-150",
+                            selected
+                              ? "border-transparent bg-gradient-to-r from-[#5b63f0] via-[#9a5cf2] to-[#4fd0e6] text-[#0a0b12] shadow-sm shadow-violet-500/25"
+                              : "border-border bg-muted/40 text-muted-foreground hover:border-primary/40 hover:bg-muted/70 hover:text-foreground"
+                          )}
+                        >
+                          {ToolIcon && <ToolIcon className="h-3 w-3 flex-shrink-0" />}
+                          {tool.title}
+                        </motion.button>
+                      )
+                    })}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </ScrollArea>
+
+        {/* Live sidebar preview */}
+        <aside className="hidden min-h-0 flex-col border-l border-white/10 bg-black/20 lg:flex">
+          <div className="flex items-center justify-between border-b border-white/5 px-4 py-3">
+            <span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              Your sidebar
+            </span>
+            <span className="rounded-full bg-primary/15 px-2 py-0.5 text-[11px] font-semibold tabular-nums text-primary">
+              {selectedTools.length}
+            </span>
+          </div>
+          {selectedTools.length === 0 ? (
+            <div className="flex flex-1 flex-col items-center justify-center gap-2 px-4 text-center">
+              <IconLayout className="h-6 w-6 text-muted-foreground/40" />
+              <p className="text-xs text-muted-foreground">Pick tools to build your sidebar.</p>
+            </div>
+          ) : (
+            <ScrollArea className="h-full px-2 py-2">
+              <AnimatePresence initial={false} mode="popLayout">
+                {selectedTools.map((tool) => {
+                  const ToolIcon = tool.icon
+                  return (
+                    <motion.div
+                      key={tool.url}
+                      layout
+                      initial={{ opacity: 0, x: -10 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      exit={{ opacity: 0, x: -10 }}
+                      transition={{ type: "spring", stiffness: 500, damping: 34 }}
+                      className="flex items-center gap-2.5 rounded-lg px-2 py-1.5"
+                    >
+                      <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-white/5 text-foreground/80 ring-1 ring-inset ring-white/10">
+                        {ToolIcon ? <ToolIcon className="h-3.5 w-3.5" /> : null}
+                      </span>
+                      <span className="truncate text-sm text-foreground/90">{tool.title}</span>
+                    </motion.div>
+                  )
+                })}
+              </AnimatePresence>
+            </ScrollArea>
+          )}
+        </aside>
+      </div>
+
+      <div className="flex shrink-0 items-center justify-between border-t border-border/50 px-6 py-3">
+        <p className="text-xs text-muted-foreground">
+          <span className="font-semibold text-foreground">{selectedUrls.size}</span> tools enabled
+        </p>
+        <div className="flex gap-2">
+          <button onClick={() => onToggleCategory(allUrls, true)} className="text-xs text-primary hover:underline">
+            Select all
+          </button>
+          <span className="text-muted-foreground/40">·</span>
+          <button onClick={() => onToggleCategory([], false)} className="text-xs text-muted-foreground hover:underline">
+            Clear
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ── Checkboxes UI ─────────────────────────────────────────────────────────────
+
+function CheckboxCategoryRow({
+  cat,
+  selectedUrls,
+  onToggleTool,
+  onToggleCategory,
+}: SelectionProps & { cat: Category }) {
+  const [expanded, setExpanded] = useState(false)
+  const urls = cat.tools.map((t) => t.url)
+  const selectedCount = urls.filter((u) => selectedUrls.has(u)).length
+  const allSelected = selectedCount === urls.length
+  const someSelected = selectedCount > 0 && selectedCount < urls.length
+  const Icon = CATEGORY_ICONS[cat.title] ?? IconWand
+  const iconColor = CATEGORY_ICON_COLORS[cat.title] ?? "text-primary"
+  const color = CATEGORY_COLORS[cat.title] ?? "from-primary/20 to-primary/10 border-primary/30"
+
+  return (
+    <div
+      className={cn(
+        "rounded-xl border bg-gradient-to-br transition-all duration-200 overflow-hidden",
+        allSelected
+          ? cn("border-primary/40 ring-1 ring-primary/20", color)
+          : someSelected
+          ? cn("border-primary/20", color)
+          : "border-border bg-card"
+      )}
+    >
+      <div className="flex items-center gap-3 px-3 py-3">
+        <button
+          onClick={(e) => { e.stopPropagation(); onToggleCategory(urls, !allSelected) }}
+          className={cn(
+            "flex-shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors",
+            allSelected ? "bg-primary border-primary" : someSelected ? "bg-primary/30 border-primary/60" : "border-border hover:border-primary/50"
+          )}
+        >
+          {allSelected && <IconCheck className="w-3 h-3 text-primary-foreground" />}
+          {someSelected && <div className="w-2 h-0.5 bg-primary rounded" />}
+        </button>
+
+        <button onClick={() => setExpanded((v) => !v)} className="flex items-center gap-2.5 flex-1 min-w-0 text-left">
+          <div className={cn("flex-shrink-0 w-7 h-7 rounded-lg flex items-center justify-center", allSelected || someSelected ? "bg-primary/15" : "bg-muted")}>
+            <Icon className={cn("w-4 h-4", allSelected || someSelected ? iconColor : "text-muted-foreground")} />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className={cn("font-medium text-sm leading-none", allSelected ? "text-foreground" : someSelected ? "text-foreground/80" : "text-muted-foreground")}>
+              {cat.title}
+            </p>
+            <p className="text-xs text-muted-foreground/60 mt-0.5">{selectedCount}/{urls.length} selected</p>
+          </div>
+          <IconChevron className={cn("w-4 h-4 text-muted-foreground/50 flex-shrink-0 transition-transform duration-200", expanded && "rotate-180")} />
+        </button>
+      </div>
+
+      <AnimatePresence initial={false}>
+        {expanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden border-t border-border/40"
+          >
+            <div className="px-3 py-2 flex flex-col gap-0.5">
+              {cat.tools.map((tool) => {
+                const ToolIcon = tool.icon
+                const checked = selectedUrls.has(tool.url)
+                return (
+                  <button
+                    key={tool.url}
+                    onClick={() => onToggleTool(tool.url)}
+                    className={cn(
+                      "flex items-center gap-2.5 px-2 py-2 rounded-lg text-left transition-colors group",
+                      checked ? "hover:bg-primary/10" : "hover:bg-muted/60"
+                    )}
+                  >
+                    <div className={cn("flex-shrink-0 w-4 h-4 rounded border-2 flex items-center justify-center transition-colors", checked ? "bg-primary border-primary" : "border-border group-hover:border-primary/40")}>
+                      {checked && <IconCheck className="w-2.5 h-2.5 text-primary-foreground" />}
+                    </div>
+                    {ToolIcon && <ToolIcon className={cn("w-3.5 h-3.5 flex-shrink-0", checked ? "text-primary/70" : "text-muted-foreground/60")} />}
+                    <span className={cn("text-xs font-medium truncate", checked ? "text-foreground" : "text-muted-foreground")}>{tool.title}</span>
+                  </button>
+                )
+              })}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+function CheckboxesToolSelection({ selectedUrls, onToggleTool, onToggleCategory }: SelectionProps) {
+  const categories = React.useMemo(() => buildCategories(), [])
+  const allUrls = React.useMemo(() => categories.flatMap((c) => c.tools.map((t) => t.url)), [categories])
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-6 pt-6 pb-3">
+        <h2 className="text-2xl font-bold tracking-tight">Pick your tools</h2>
+        <p className="text-muted-foreground text-sm mt-1">
+          Toggle categories or expand to select individual tools. Change anytime in Settings.
+        </p>
+      </div>
+
+      <ScrollArea className="flex-1 px-6 pb-4">
+        <div className="flex flex-col gap-2 pb-2">
+          {categories.map((cat) => (
+            <CheckboxCategoryRow
+              key={cat.title}
+              cat={cat}
+              selectedUrls={selectedUrls}
+              onToggleTool={onToggleTool}
+              onToggleCategory={onToggleCategory}
+            />
+          ))}
+        </div>
+      </ScrollArea>
+
+      <div className="px-6 py-3 border-t border-border/50 flex items-center justify-between">
+        <p className="text-xs text-muted-foreground">
+          <span className="font-semibold text-foreground">{selectedUrls.size}</span> tools enabled
+        </p>
+        <div className="flex gap-2">
+          <button onClick={() => onToggleCategory(allUrls, true)} className="text-xs text-primary hover:underline">Select all</button>
+          <span className="text-muted-foreground/40">·</span>
+          <button onClick={() => onToggleCategory([], false)} className="text-xs text-muted-foreground hover:underline">Clear</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ── Dispatcher ────────────────────────────────────────────────────────────────
+
+function ToolSelectionStep(props: SelectionProps) {
+  if (TOOL_SELECTION_MODE === "checkboxes") return <CheckboxesToolSelection {...props} />
+  return <TagsToolSelection {...props} />
+}
+
+// ── Step 2: Tour ──────────────────────────────────────────────────────────────
+
+function TourStep({ slideIndex, onSlide }: { slideIndex: number; onSlide: (i: number) => void }) {
+  const slide = TOUR_SLIDES[slideIndex]!
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-6 pt-6 pb-3 shrink-0">
+        <p className="mdt-kicker mb-2">Step 3 · The shortcuts you&apos;ll live in</p>
+        <h2 className="text-2xl font-bold tracking-tight">Quick tour</h2>
+      </div>
+
+      <div className="flex flex-1 flex-col items-center justify-center gap-8 px-8">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={slideIndex}
+            initial={{ x: 40, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: -40, opacity: 0 }}
+            transition={{ duration: 0.28, ease: [0.16, 1, 0.3, 1] }}
+            className="flex w-full flex-col items-center gap-7 text-center"
+          >
+            <motion.div
+              initial={{ scale: 0.85 }}
+              animate={{ scale: 1 }}
+              transition={{ type: "spring", stiffness: 240, damping: 18 }}
+              className={cn(
+                "relative flex h-28 w-28 items-center justify-center rounded-[1.75rem] border border-white/10 bg-gradient-to-br shadow-lg",
+                slide.bg
+              )}
+            >
+              <slide.icon className={cn("h-12 w-12", slide.iconColor)} />
+            </motion.div>
+            <div className="max-w-md space-y-3">
+              <h3 className="text-2xl font-semibold tracking-tight">{slide.title}</h3>
+              <p className="text-base leading-relaxed text-muted-foreground">{slide.description}</p>
+            </div>
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      {/* slide dots */}
+      <div className="flex items-center justify-center gap-2 pb-6">
+        {TOUR_SLIDES.map((_, i) => (
+          <button
+            key={i}
+            onClick={() => onSlide(i)}
+            className={cn(
+              "h-2 rounded-full transition-all duration-300",
+              i === slideIndex ? "w-6 bg-primary" : "w-2 bg-muted-foreground/30 hover:bg-muted-foreground/50"
+            )}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+>>>>>>> Stashed changes
 
 // ── Root modal ────────────────────────────────────────────────────────────────
 
@@ -39,6 +563,7 @@ export function OnboardingModal({ onComplete }: OnboardingModalProps) {
   const [step, setStep] = useState(0)
   const [tourSlide, setTourSlide] = useState(0)
   const [completing, setCompleting] = useState(false)
+  const [celebrating, setCelebrating] = useState(false)
 
   const setEnabledTools = useToolVisibilityStore((s) => s.setEnabledTools)
 
@@ -96,10 +621,12 @@ export function OnboardingModal({ onComplete }: OnboardingModalProps) {
       ])
     } catch {
       // non-blocking — user can still proceed
-    } finally {
-      setCompleting(false)
-      onComplete()
     }
+    // Payoff reveal, then drop them onto their personalized home.
+    setCompleting(false)
+    setCelebrating(true)
+    await new Promise((r) => setTimeout(r, 1600))
+    onComplete()
   }
 
   const handleBack = () => {
@@ -124,14 +651,32 @@ export function OnboardingModal({ onComplete }: OnboardingModalProps) {
     : "Continue"
 
   return (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm">
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/70 backdrop-blur-md">
       <motion.div
         initial={{ scale: 0.95, opacity: 0, y: 20 }}
         animate={{ scale: 1, opacity: 1, y: 0 }}
         transition={{ type: "spring", stiffness: 260, damping: 22 }}
-        className="relative w-full max-w-lg sm:max-w-2xl md:max-w-4xl lg:max-w-5xl xl:max-w-6xl bg-card border border-border rounded-2xl shadow-2xl overflow-hidden flex flex-col"
+        className="dark mdt-deck relative isolate flex w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-white/10 bg-[#0a0b12] text-foreground shadow-2xl sm:max-w-2xl md:max-w-4xl lg:max-w-5xl xl:max-w-6xl"
         style={{ height: "min(90vh, 900px)" }}
       >
+        {/* Deck backdrop */}
+        <div aria-hidden className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
+          <MdtAurora />
+          <div className="mdt-grid" />
+          <div className="mdt-noise" />
+          <div className="absolute -left-24 -top-16 h-80 w-80 rounded-full bg-violet-500/15 blur-[120px]" />
+          <div className="absolute -right-20 bottom-0 h-72 w-72 rounded-full bg-sky-500/12 blur-[110px]" />
+          <svg width="0" height="0" className="absolute" aria-hidden focusable="false">
+            <defs>
+              <linearGradient id="mdtGrad" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%" stopColor="#5b63f0" />
+                <stop offset="52%" stopColor="#9a5cf2" />
+                <stop offset="100%" stopColor="#4fd0e6" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
         {/* Header bar */}
         <div className="flex items-center justify-between px-6 pt-5 pb-3 border-b border-border/50">
           <div className="flex items-center gap-3">
@@ -212,7 +757,7 @@ export function OnboardingModal({ onComplete }: OnboardingModalProps) {
             size="sm"
             onClick={handleBack}
             disabled={step === 0 && tourSlide === 0}
-            className="text-muted-foreground"
+            className="text-foreground/70 hover:text-foreground hover:bg-white/5"
           >
             Back
           </Button>
@@ -222,8 +767,9 @@ export function OnboardingModal({ onComplete }: OnboardingModalProps) {
             disabled={completing}
             size="sm"
             className={cn(
-              "gap-2 transition-all",
-              isLastAction && "bg-primary hover:bg-primary/90 shadow-md shadow-primary/25"
+              "gap-2 rounded-full px-5 font-semibold transition-all",
+              "bg-gradient-to-r from-[#5b63f0] via-[#9a5cf2] to-[#4fd0e6] text-[#0a0b12] hover:brightness-110",
+              isLastAction && "shadow-lg shadow-violet-500/30"
             )}
           >
             {nextLabel}
@@ -231,6 +777,44 @@ export function OnboardingModal({ onComplete }: OnboardingModalProps) {
             {isLastAction && !completing && <IconCheck className="w-4 h-4" />}
           </Button>
         </div>
+
+        {/* Payoff reveal */}
+        <AnimatePresence>
+          {celebrating && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-6 bg-[#0a0b12]/95 px-8 text-center backdrop-blur-sm"
+            >
+              <motion.div
+                initial={{ scale: 0.5, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ type: "spring", stiffness: 300, damping: 16 }}
+                className="flex h-20 w-20 items-center justify-center rounded-3xl bg-gradient-to-br from-primary/25 to-violet-500/15 ring-1 ring-inset ring-white/10 shadow-lg shadow-primary/20"
+              >
+                <IconCheck className="h-10 w-10 text-primary" />
+              </motion.div>
+              <motion.div
+                initial={{ y: 14, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ delay: 0.15 }}
+                className="space-y-2"
+              >
+                <h2 className="text-3xl font-bold tracking-tight">
+                  Your workspace is <span className="mdt-grad-text mdt-grad-anim">ready</span>
+                </h2>
+                <p className="text-muted-foreground">
+                  {selectedUrls.size} tools pinned. Press{" "}
+                  <kbd className="rounded border border-white/15 bg-white/5 px-1.5 py-0.5 font-mono text-xs">
+                    ⌘K
+                  </kbd>{" "}
+                  anytime to launch.
+                </p>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
       </motion.div>
     </div>
   )
diff --git a/apps/web/src/components/require-auth.tsx b/apps/web/src/components/require-auth.tsx
index cc5f8c67..d28929be 100644
--- a/apps/web/src/components/require-auth.tsx
+++ b/apps/web/src/components/require-auth.tsx
@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import useAuth from "@/utils/useAuth";
 import { EnsureBackendSession } from "@/components/ensure-backend-session";
-import { Loader2 } from "lucide-react";
+import { AppLoadingScreen } from "@/components/app-loading-screen";
 
 export function RequireAuth({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth(false);
@@ -18,12 +18,7 @@ export function RequireAuth({ children }: { children: React.ReactNode }) {
   }, [loading, user, router]);
 
   if (loading || !user) {
-    return (
-      <div className="fixed inset-0 z-[9999] flex h-[100dvh] w-[100dvw] flex-col items-center justify-center gap-3 bg-background">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" aria-hidden />
-        <p className="text-sm text-muted-foreground">Loading…</p>
-      </div>
-    );
+    return <AppLoadingScreen />;
   }
 
   return (
diff --git a/apps/web/src/components/secret-api-key-generator/secret-api-key-generator-layout.tsx b/apps/web/src/components/secret-api-key-generator/secret-api-key-generator-layout.tsx
index a9196051..92daed98 100644
--- a/apps/web/src/components/secret-api-key-generator/secret-api-key-generator-layout.tsx
+++ b/apps/web/src/components/secret-api-key-generator/secret-api-key-generator-layout.tsx
@@ -213,7 +213,7 @@ export function SecretApiKeyGeneratorLayout() {
           </div>
 
           <div className="flex flex-wrap gap-2 pt-1">
-            <Button type="button" onClick={runGenerate} className="w-full gap-1.5 sm:w-auto">
+            <Button type="button" variant="gradient" onClick={runGenerate} className="w-full gap-1.5 sm:w-auto">
               <RefreshCw className="h-3.5 w-3.5" />
               {t('generate')}
             </Button>
diff --git a/apps/web/src/components/sidebar/app-sidebar.tsx b/apps/web/src/components/sidebar/app-sidebar.tsx
index 3088323c..3f4a56f4 100644
--- a/apps/web/src/components/sidebar/app-sidebar.tsx
+++ b/apps/web/src/components/sidebar/app-sidebar.tsx
@@ -1,6 +1,10 @@
 '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'
+import { cn } from '@/lib/utils'
 import {
   Sidebar,
   SidebarContent,
@@ -55,6 +59,8 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   })
 
   const router = useRouter();
+  const pathname = usePathname();
+  const isDashboardActive = pathname === '/dashboard';
 
   // ...
 
@@ -145,9 +151,28 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       <SidebarContent className="mt-2 md:mt-0">
         <SidebarMenu className="px-2 mb-1">
           <SidebarMenuItem>
-            <SidebarMenuButton onClick={() => router.push('/dashboard')} tooltip="Dashboard">
-              <LayoutDashboard className="size-4" />
-              <span>Dashboard</span>
+            <SidebarMenuButton
+              asChild
+              isActive={isDashboardActive}
+              tooltip="Dashboard"
+              className={cn(
+                'transition-all duration-200',
+                isDashboardActive && 'bg-transparent hover:bg-transparent dark:bg-transparent',
+              )}
+            >
+              <Link href="/dashboard" className="relative flex items-center">
+                {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"
+                    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" />
+                  </motion.div>
+                )}
+                <LayoutDashboard className={cn('z-10 size-4 transition-colors', isDashboardActive && 'text-primary')} />
+                <span className={cn('z-10 font-medium', isDashboardActive && 'text-primary')}>Dashboard</span>
+              </Link>
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
diff --git a/apps/web/src/components/sidebar/nav-group.tsx b/apps/web/src/components/sidebar/nav-group.tsx
index 548f1df8..33a34bfd 100644
--- a/apps/web/src/components/sidebar/nav-group.tsx
+++ b/apps/web/src/components/sidebar/nav-group.tsx
@@ -178,11 +178,11 @@ export function NavGroup({ title, titleKey, items, collapsible, icon: Icon, hidd
 
   return (
     <SidebarGroup>
-      <SidebarGroupLabel>
+      <SidebarGroupLabel className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/70">
         {Icon && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <Icon className="mr-2" size={16} />
+              <Icon className="mr-2 opacity-70" size={15} />
             </TooltipTrigger>
             <TooltipContent side="right" align="center" className="capitalize">{groupTitle}</TooltipContent>
           </Tooltip>
@@ -235,12 +235,23 @@ const SidebarMenuLink = ({
           {isActive && (
             <motion.div
               layoutId="sidebar-active-pill"
-              className="absolute inset-0 rounded-md bg-primary/10 dark:bg-primary/20 -z-10"
+              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"
               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" />
+            </motion.div>
+          )}
+          {item.icon && (
+            <item.icon className={cn("z-10 transition-colors", isActive && "text-primary")} />
           )}
-          {item.icon && <item.icon className="z-10" />}
-          <span className="z-10 font-medium group-hover:translate-x-0.5 transition-transform">{displayTitle}</span>
+          <span
+            className={cn(
+              "z-10 font-medium transition-transform group-hover:translate-x-0.5",
+              isActive && "text-primary",
+            )}
+          >
+            {displayTitle}
+          </span>
           {item.badge && <NavBadge>{item.badge}</NavBadge>}
         </Link>
       </SidebarMenuButton>
diff --git a/apps/web/src/components/sql-formatter/sql-formatter-layout.tsx b/apps/web/src/components/sql-formatter/sql-formatter-layout.tsx
index 1a97fe40..00aa87af 100644
--- a/apps/web/src/components/sql-formatter/sql-formatter-layout.tsx
+++ b/apps/web/src/components/sql-formatter/sql-formatter-layout.tsx
@@ -138,7 +138,7 @@ export function SqlFormatterLayout() {
             </Select>
           </div>
           <div className="flex flex-wrap gap-2 pb-0.5">
-            <Button type="button" size="sm" className="gap-1.5 h-9" onClick={runFormat}>
+            <Button type="button" variant="gradient" size="sm" className="gap-1.5 h-9" onClick={runFormat}>
               <Wand2 className="h-3.5 w-3.5" />
               {t('format')}
             </Button>
diff --git a/apps/web/src/components/ssh-key-generator/ssh-key-generator-layout.tsx b/apps/web/src/components/ssh-key-generator/ssh-key-generator-layout.tsx
index af328c50..e789951f 100644
--- a/apps/web/src/components/ssh-key-generator/ssh-key-generator-layout.tsx
+++ b/apps/web/src/components/ssh-key-generator/ssh-key-generator-layout.tsx
@@ -334,7 +334,7 @@ export function SshKeyGeneratorLayout() {
           </div>
         </div>
 
-        <Button onClick={generate} disabled={generating} className="w-full sm:w-auto gap-2">
+        <Button onClick={generate} variant="gradient" disabled={generating} className="w-full sm:w-auto gap-2">
           <RefreshCw className={cn('h-4 w-4', generating && 'animate-spin')} />
           {generating
             ? (keyType === 'rsa-4096' ? t('generatingLong') : t('generating'))
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 65d4fcd9..c7b1f43e 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -5,19 +5,21 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,transform] duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow-md hover:shadow-primary/20",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow-md hover:shadow-destructive/20",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-border",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
+        gradient:
+          "text-white shadow-sm shadow-primary/25 bg-[linear-gradient(100deg,#5b63f0,#9a5cf2_52%,#4fd0e6)] hover:shadow-md hover:shadow-primary/30 hover:brightness-[1.06]",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
index e17b1408..af99fdaf 100644
--- a/apps/web/src/components/ui/card.tsx
+++ b/apps/web/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border border-border/70 bg-card text-card-foreground shadow-[0_1px_2px_-1px_rgb(0_0_0/0.08),0_2px_8px_-3px_rgb(0_0_0/0.08)] dark:shadow-[0_1px_2px_-1px_rgb(0_0_0/0.4)]",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 4e3c4f98..d0ac268a 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg sm:rounded-lg max-h-[calc(100vh-4rem)] overflow-y-auto",
+        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border/70 bg-background p-4 sm:p-6 shadow-2xl shadow-black/20 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-xl sm:rounded-xl max-h-[calc(100vh-4rem)] overflow-y-auto",
         className
       )}
       {...props}
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index 082639fb..5a24ed6b 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "flex cursor-default gap-2 select-none items-center rounded-md px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border/70 bg-popover p-1 text-popover-foreground shadow-xl shadow-black/10 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border/70 bg-popover p-1 text-popover-foreground shadow-xl shadow-black/10",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
@@ -84,7 +84,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -100,7 +100,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -124,7 +124,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 69b64fb2..d6749e7a 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-[color,border-color,box-shadow] duration-150 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground hover:border-border focus-visible:outline-none focus-visible:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index 70a28f66..0d246deb 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+        "z-50 w-72 rounded-xl border border-border/70 bg-popover p-4 text-popover-foreground shadow-xl shadow-black/10 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
         className
       )}
       {...props}
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index 6e637f7d..188a2e58 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background transition-[color,border-color,box-shadow] duration-150 data-[placeholder]:text-muted-foreground hover:border-border focus:outline-none focus:border-primary/50 focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:flex [&>span]:items-center [&>span]:gap-2",
       className
     )}
     {...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-xl border border-border/70 bg-popover text-popover-foreground shadow-xl shadow-black/10 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -118,7 +118,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-2 pr-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
index 0f4caebb..9cfe4b33 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted/70 p-1 text-muted-foreground ring-1 ring-inset ring-border/50",
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all duration-150 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=active]:ring-1 data-[state=active]:ring-border/60",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/tooltip.tsx b/apps/web/src/components/ui/tooltip.tsx
index 28e19183..975e950b 100644
--- a/apps/web/src/components/ui/tooltip.tsx
+++ b/apps/web/src/components/ui/tooltip.tsx
@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        "z-50 overflow-hidden rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground shadow-md shadow-black/15 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
         className
       )}
       {...props}
diff --git a/apps/web/src/components/uuid-generator/uuid-generator-layout.tsx b/apps/web/src/components/uuid-generator/uuid-generator-layout.tsx
index 715a4dea..981b8144 100644
--- a/apps/web/src/components/uuid-generator/uuid-generator-layout.tsx
+++ b/apps/web/src/components/uuid-generator/uuid-generator-layout.tsx
@@ -401,7 +401,7 @@ export function UuidGeneratorLayout() {
           )}
 
           <div className="flex flex-wrap gap-2 pt-1">
-            <Button type="button" onClick={runGenerate} className="gap-1.5 w-full sm:w-auto">
+            <Button type="button" variant="gradient" onClick={runGenerate} className="gap-1.5 w-full sm:w-auto">
               <RefreshCw className="h-3.5 w-3.5" />
               {t('generate')}
             </Button>
diff --git a/apps/web/src/components/yaml-formatter/yaml-formatter-layout.tsx b/apps/web/src/components/yaml-formatter/yaml-formatter-layout.tsx
index 1253413a..c4bc539e 100644
--- a/apps/web/src/components/yaml-formatter/yaml-formatter-layout.tsx
+++ b/apps/web/src/components/yaml-formatter/yaml-formatter-layout.tsx
@@ -130,7 +130,7 @@ export function YamlFormatterLayout() {
             </Select>
           </div>
           <div className="flex flex-wrap gap-2 pb-0.5">
-            <Button type="button" size="sm" className="gap-1.5 h-9" onClick={runFormat}>
+            <Button type="button" variant="gradient" size="sm" className="gap-1.5 h-9" onClick={runFormat}>
               <Wand2 className="h-3.5 w-3.5" />
               {t('format')}
             </Button>
diff --git a/apps/web/src/hooks/use-count-up.ts b/apps/web/src/hooks/use-count-up.ts
index 2f050c83..fbe195fa 100644
--- a/apps/web/src/hooks/use-count-up.ts
+++ b/apps/web/src/hooks/use-count-up.ts
@@ -1,5 +1,6 @@
 'use client'
 
+<<<<<<< Updated upstream
 import { useEffect, useRef, useState } from 'react'
 
 export function useCountUp(target: number, duration = 550): number {
@@ -21,4 +22,39 @@ export function useCountUp(target: number, duration = 550): number {
     return () => cancelAnimationFrame(raf)
   }, [target, duration])
   return count
+=======
+import { useEffect, useState } from 'react'
+
+/**
+ * Animate a number from 0 → target with an ease-out curve on mount/target change.
+ * Under prefers-reduced-motion the duration collapses to 0 so it lands on the
+ * target on the first frame (no misleading lingering "0").
+ */
+export function useCountUp(target: number, durationMs = 900): number {
+  const [value, setValue] = useState(0)
+
+  useEffect(() => {
+    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    const duration = reduce ? 0 : durationMs
+    let raf = 0
+    let start: number | null = null
+
+    const tick = (now: number) => {
+      if (start === null) start = now
+      const progress = duration <= 0 ? 1 : Math.min(1, (now - start) / duration)
+      const eased = 1 - Math.pow(1 - progress, 3) // easeOutCubic
+      setValue(Math.round(target * eased))
+      if (progress < 1) raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+    // Safety net: if rAF is throttled (backgrounded/inactive tab), still land on target.
+    const fallback = setTimeout(() => setValue(target), duration + 120)
+    return () => {
+      cancelAnimationFrame(raf)
+      clearTimeout(fallback)
+    }
+  }, [target, durationMs])
+
+  return value
+>>>>>>> Stashed changes
 }

From 3c2f74300a37acf096868ae9e2b11e7f128a8b71 Mon Sep 17 00:00:00 2001
From: anuphilipp3 <anuphilipp3@gmail.com>
Date: Thu, 25 Jun 2026 16:30:14 +0530
Subject: [PATCH 2/2] fix: resolve committed merge conflict markers blocking
 the build

- onboarding-modal: keep the immersive-deck redesign over the older
  modular sub-module version; restore dropped ScrollArea import
- settings: merge upstream PasskeySection with the redesigned card styling
- use-count-up: keep the reduced-motion + throttled-tab fallback variant

Resolves the conflict markers committed in 46f02ba that failed the
Vercel/turbopack build.
---
 apps/web/src/app/settings/page.tsx           |  4 ----
 apps/web/src/components/onboarding-modal.tsx | 11 +--------
 apps/web/src/hooks/use-count-up.ts           | 24 --------------------
 3 files changed, 1 insertion(+), 38 deletions(-)

diff --git a/apps/web/src/app/settings/page.tsx b/apps/web/src/app/settings/page.tsx
index 75d93715..3a55f17c 100644
--- a/apps/web/src/app/settings/page.tsx
+++ b/apps/web/src/app/settings/page.tsx
@@ -64,13 +64,9 @@ export default function SettingsPage() {
 
       <div className="grid gap-6">
 
-<<<<<<< Updated upstream
         <PasskeySection />
 
-        <Card className="border shadow-sm bg-card/50 backdrop-blur-sm">
-=======
         <Card className="rounded-2xl border border-border/60 bg-card/60 shadow-sm backdrop-blur-sm">
->>>>>>> Stashed changes
           <CardHeader>
             <CardTitle className="flex items-center gap-2.5">
               <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary/15 to-violet-500/10 text-primary ring-1 ring-inset ring-border/50">
diff --git a/apps/web/src/components/onboarding-modal.tsx b/apps/web/src/components/onboarding-modal.tsx
index bdfd7b9b..284f24eb 100644
--- a/apps/web/src/components/onboarding-modal.tsx
+++ b/apps/web/src/components/onboarding-modal.tsx
@@ -8,12 +8,6 @@ import { Progress } from "@/components/ui/progress"
 import { completeOnboarding } from "@/lib/onboarding-api"
 import { useToolVisibilityStore } from "@/store/tool-visibility-store"
 import { patchUserPreferences } from "@/lib/user-preferences-api"
-<<<<<<< Updated upstream
-import { IconArrowRight, IconCheck, IconX } from "@tabler/icons-react"
-import { WelcomeStep } from "./onboarding-modal/welcome-step"
-import { TourStep, TOUR_SLIDES } from "./onboarding-modal/tour-step"
-import { ToolSelectionStep, buildCategories } from "./onboarding-modal/tool-selection"
-=======
 import {
   IconRocket,
   IconShield,
@@ -35,6 +29,7 @@ import {
 import { sidebarData } from "@/components/sidebar/data/sidebar-data"
 import type { NavLink, NavCollapsible } from "@/components/sidebar/types"
 import MdtAurora from "@/components/mdt-aurora"
+import { ScrollArea } from "@/components/ui/scroll-area"
 
 // ── Tool category icons by title ──────────────────────────────────────────────
 
@@ -102,7 +97,6 @@ const TOUR_SLIDES = [
       "Right-click any tool in the sidebar to pin it to the top. Pinned tools are synced across all your devices.",
   },
 ]
->>>>>>> Stashed changes
 
 // ── Step indicators ───────────────────────────────────────────────────────────
 
@@ -117,8 +111,6 @@ function StepDot({ active, done }: { active: boolean; done: boolean }) {
   )
 }
 
-<<<<<<< Updated upstream
-=======
 // ── Step 0: Welcome ───────────────────────────────────────────────────────────
 
 const WELCOME_HIGHLIGHTS = [
@@ -549,7 +541,6 @@ function TourStep({ slideIndex, onSlide }: { slideIndex: number; onSlide: (i: nu
     </div>
   )
 }
->>>>>>> Stashed changes
 
 // ── Root modal ────────────────────────────────────────────────────────────────
 
diff --git a/apps/web/src/hooks/use-count-up.ts b/apps/web/src/hooks/use-count-up.ts
index fbe195fa..b94d609d 100644
--- a/apps/web/src/hooks/use-count-up.ts
+++ b/apps/web/src/hooks/use-count-up.ts
@@ -1,28 +1,5 @@
 'use client'
 
-<<<<<<< Updated upstream
-import { useEffect, useRef, useState } from 'react'
-
-export function useCountUp(target: number, duration = 550): number {
-  const [count, setCount] = useState(0)
-  const prev = useRef(0)
-  useEffect(() => {
-    const from = prev.current
-    prev.current = target
-    if (target === from) return
-    const start = Date.now()
-    let raf: number
-    const tick = () => {
-      const t = Math.min((Date.now() - start) / duration, 1)
-      const eased = 1 - Math.pow(1 - t, 3) // ease-out-cubic
-      setCount(Math.round(from + (target - from) * eased))
-      if (t < 1) raf = requestAnimationFrame(tick)
-    }
-    raf = requestAnimationFrame(tick)
-    return () => cancelAnimationFrame(raf)
-  }, [target, duration])
-  return count
-=======
 import { useEffect, useState } from 'react'
 
 /**
@@ -56,5 +33,4 @@ export function useCountUp(target: number, durationMs = 900): number {
   }, [target, durationMs])
 
   return value
->>>>>>> Stashed changes
 }