diff --git a/.mcp.json b/.mcp.json
index 9ea125f..16fc2a6 100644
--- a/.mcp.json
+++ b/.mcp.json
@@ -13,7 +13,10 @@
     },
     "brave-search": {
       "command": "npx",
-      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
+      "args": [
+        "-y",
+        "@modelcontextprotocol/server-brave-search"
+      ],
       "env": {
         "BRAVE_API_KEY": "BSAcRGGikEzY4B2j3NZ8Qy5NYh9l4HZ"
       }
@@ -36,7 +39,10 @@
     "perplexity": {
       "type": "stdio",
       "command": "npx",
-      "args": ["-y", "perplexity-mcp"],
+      "args": [
+        "-y",
+        "perplexity-mcp"
+      ],
       "env": {
         "PERPLEXITY_API_KEY": "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",
         "PERPLEXITY_TIMEOUT_MS": "600000"
@@ -44,13 +50,23 @@
     },
     "chrome-devtools": {
       "command": "npx",
-      "args": ["-y", "chrome-devtools-mcp@latest"]
+      "args": [
+        "-y",
+        "chrome-devtools-mcp@latest"
+      ]
     },
     "browsermcp": {
       "type": "stdio",
       "command": "npx",
-      "args": ["-y", "@browsermcp/mcp@latest"],
+      "args": [
+        "-y",
+        "@browsermcp/mcp@latest"
+      ],
       "env": {}
+    },
+    "shadcn": {
+      "command": "npx",
+      "args": ["shadcn@latest", "mcp"]
     }
   }
 }
diff --git a/apps/landing/components.json b/apps/landing/components.json
new file mode 100644
index 0000000..edcaef2
--- /dev/null
+++ b/apps/landing/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
diff --git a/apps/landing/package.json b/apps/landing/package.json
index 0f92f17..6c16392 100644
--- a/apps/landing/package.json
+++ b/apps/landing/package.json
@@ -10,17 +10,28 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@banatie/database": "workspace:*",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.400.0",
+    "next": "15.5.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "next": "15.5.4",
-    "@banatie/database": "workspace:*"
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4"
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
   }
 }
diff --git a/apps/landing/src/app/(lab)/CLAUDE.md b/apps/landing/src/app/(lab)/CLAUDE.md
new file mode 100644
index 0000000..792f12f
--- /dev/null
+++ b/apps/landing/src/app/(lab)/CLAUDE.md
@@ -0,0 +1,364 @@
+# Lab Section Design System
+
+The Lab section is a production-ready UI interface for interacting with the Banatie API service. It provides a clean, work-focused experience for image generation, gallery browsing, alias management, and flow control.
+
+## File Structure
+
+```
+apps/landing/src/
+├── app/(lab)/
+│   ├── CLAUDE.md              # This design documentation
+│   ├── layout.tsx             # Root lab layout with scroll context
+│   └── lab/
+│       ├── layout.tsx         # Sub-layout with PageProvider
+│       ├── page.tsx           # Redirect to /lab/generate
+│       ├── generate/page.tsx  # Generation workbench
+│       ├── images/page.tsx    # Image gallery browser
+│       ├── live/page.tsx      # Live generation testing
+│       └── upload/page.tsx    # File upload interface
+│
+├── components/layout/lab/
+│   ├── LabLayout.tsx          # Main layout (sidebar + content + footer)
+│   ├── LabSidebar.tsx         # Left filter panel
+│   └── LabFooter.tsx          # Contextual footer with links
+│
+├── components/lab/
+│   ├── GenerateFormPlaceholder.tsx  # Generation form component
+│   └── FilterPlaceholder.tsx        # Reusable filter checkbox/radio
+│
+└── contexts/
+    └── lab-scroll-context.tsx  # Scroll state for header collapse
+```
+
+## Design Principles
+
+1. **Work-focused, not marketing** - Small typography, efficient spacing
+2. **Clean and functional** - Like Google AI Studio
+3. **Dual color system** - Zinc for layout, Slate for forms
+4. **Consistent icons** - Lucide React only, no emojis
+5. **Responsive** - Works on 768px to 1920px+ screens
+
+---
+
+## Color System
+
+### Layout/Chrome → Zinc (Neutral Gray)
+Used for sidebar, footer, and layout borders:
+```css
+bg-zinc-950       /* Sidebar background */
+bg-zinc-950/50    /* Footer background, layout wrappers */
+border-zinc-800   /* Layout borders, dividers */
+text-zinc-400     /* Sidebar text */
+text-zinc-500     /* Footer text, muted */
+```
+
+### Forms/Cards → Slate (Original Style)
+Used for cards, inputs, and interactive UI elements:
+```css
+bg-slate-900/80   /* Card backgrounds */
+bg-slate-900/50   /* Empty states, lighter cards */
+bg-slate-800      /* Input backgrounds, secondary surfaces */
+border-slate-700  /* Card borders, input borders */
+text-gray-400     /* Labels, secondary text */
+text-gray-500     /* Placeholders, hints */
+```
+
+### Accent Colors (Purple/Cyan)
+```css
+/* Primary gradient */
+bg-gradient-to-r from-purple-600 to-cyan-600
+hover:from-purple-500 hover:to-cyan-500
+shadow-lg shadow-purple-900/30
+focus:ring-2 focus:ring-purple-500
+
+/* Single-color accents */
+text-purple-400   /* Links, interactive text */
+
+/* Info banners */
+bg-purple-900/10 border-purple-700/50
+```
+
+### Status Colors
+```css
+/* Success */ bg-emerald-500/10 border-emerald-500/30 text-emerald-400
+/* Warning */ bg-amber-500/10 border-amber-500/30 text-amber-400
+/* Error   */ bg-red-500/10 border-red-500/30 text-red-400
+/* Info    */ bg-purple-900/10 border-purple-700/50 text-purple-400
+```
+
+---
+
+## Typography Scale
+
+### Headings (Practical Sizes)
+```tsx
+// Page Title (only on main pages)
+text-lg font-semibold text-white
+
+// Section Title
+text-base font-semibold text-white
+
+// Card Title
+text-sm font-medium text-white
+```
+
+### Body Text
+```tsx
+// Primary body
+text-sm text-gray-300
+
+// Secondary/descriptions
+text-sm text-gray-400
+
+// Small text (hints, metadata)
+text-xs text-gray-500
+
+// Labels (form fields)
+text-xs font-medium text-gray-400
+```
+
+### Interactive
+```tsx
+// Button text
+text-sm font-semibold
+
+// Links
+text-sm text-purple-400 hover:text-purple-300
+
+// Badge/count
+text-xs text-gray-600
+```
+
+---
+
+## Spacing System
+
+### Padding
+```tsx
+// Cards
+p-4 md:p-5
+
+// Compact cards
+p-3
+
+// Form inputs
+px-3 py-2
+
+// Buttons (primary)
+px-4 py-2.5
+
+// Buttons (secondary)
+px-3 py-2
+```
+
+### Section Spacing
+```tsx
+// Page padding
+p-4 md:p-6
+
+// Between sections
+space-y-4
+
+// Between cards in grid
+gap-3 md:gap-4
+
+// Between form fields
+gap-2
+
+// Label to input
+mb-1.5
+```
+
+### Border Radius
+```tsx
+rounded-lg     /* Standard (inputs, small cards) */
+rounded-xl     /* Medium (cards) */
+```
+
+---
+
+## Component Patterns
+
+### Page Header
+```tsx
+<header className="pb-3 border-b border-zinc-800">
+  <div className="flex items-center gap-2">
+    <Sparkles className="w-5 h-5 text-purple-400" />
+    <div>
+      <h1 className="text-lg font-semibold text-white">Generate</h1>
+      <p className="text-xs text-gray-400">Create AI images from text prompts</p>
+    </div>
+  </div>
+</header>
+```
+
+### Form Card (Slate)
+```tsx
+<section className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-xl">
+  {/* content */}
+</section>
+```
+
+### Form Input (Slate)
+```tsx
+<div className="space-y-1.5">
+  <label className="block text-xs font-medium text-gray-400">Field Label</label>
+  <input
+    className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+    placeholder="Enter value..."
+  />
+</div>
+```
+
+### Textarea (Slate)
+```tsx
+<textarea
+  className="w-full px-3 py-2.5 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"
+  rows={4}
+/>
+```
+
+### Primary Button
+```tsx
+<button className="px-4 py-2 text-sm rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 transition-all shadow-lg shadow-purple-900/30 focus:ring-2 focus:ring-purple-500 flex items-center gap-1.5">
+  <Sparkles className="w-4 h-4" />
+  Generate
+</button>
+```
+
+### Secondary Button (Slate)
+```tsx
+<button className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-gray-400 hover:text-white hover:bg-slate-700 transition-colors flex items-center justify-center gap-1.5 focus:ring-2 focus:ring-purple-500">
+  <Settings className="w-4 h-4" />
+  Configure
+</button>
+```
+
+### Empty State (Slate)
+```tsx
+<div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
+  <div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
+    <ImageOff className="w-6 h-6 text-gray-500" />
+  </div>
+  <h3 className="text-sm font-medium text-white mb-1">No results yet</h3>
+  <p className="text-xs text-gray-400">Generated images will appear here</p>
+</div>
+```
+
+### Info Banner
+```tsx
+<div className="p-3 bg-purple-900/10 border border-purple-700/50 rounded-lg">
+  <div className="flex items-start gap-2">
+    <Info className="w-4 h-4 text-purple-400 mt-0.5 shrink-0" />
+    <p className="text-xs text-gray-300">
+      <span className="font-medium text-white">Lab Mode:</span> Experimental features enabled.
+    </p>
+  </div>
+</div>
+```
+
+---
+
+## Icon System (Lucide React)
+
+### Standard Sizes
+```tsx
+// Inline with text
+<Icon className="w-4 h-4" />
+
+// Small (badges)
+<Icon className="w-3 h-3" />
+
+// Medium (empty states)
+<Icon className="w-6 h-6" />
+
+// With margin (before text)
+<Icon className="w-4 h-4 mr-1.5" />
+```
+
+### Recommended Icons
+```tsx
+// Navigation
+import { Home, Image, Upload, Zap, Settings } from 'lucide-react';
+
+// Actions
+import { Plus, X, Download, Share2, Copy, Trash2, Edit3, MoreVertical } from 'lucide-react';
+
+// Filters
+import { Activity, Calendar, Palette, ChevronRight, ChevronDown } from 'lucide-react';
+
+// Status
+import { CheckCircle2, AlertCircle, XCircle, Info, Loader2 } from 'lucide-react';
+
+// Media
+import { ImageOff, FileImage, Sparkles } from 'lucide-react';
+
+// Form
+import { Search, Filter, SlidersHorizontal } from 'lucide-react';
+```
+
+---
+
+## Responsive Breakpoints
+
+```tsx
+// Base: < 768px (mobile) - single column, no sidebar
+// md: >= 768px (tablet) - 2 columns, no sidebar
+// lg: >= 1024px (desktop) - sidebar visible, 2-3 columns
+// xl: >= 1280px (large desktop) - optimal spacing, 3 columns
+```
+
+### Sidebar Behavior
+```tsx
+// Hidden on mobile/tablet, visible lg+
+hidden lg:block w-64
+```
+
+### Content Grid
+```tsx
+// Images: 1 col mobile, 2 col tablet, 3 col desktop
+grid-cols-1 md:grid-cols-2 xl:grid-cols-3
+
+// Form fields
+grid-cols-1 md:grid-cols-3
+```
+
+---
+
+## Do's and Don'ts
+
+### DO
+- Use **zinc** for layout (sidebar, footer, layout borders)
+- Use **slate** for forms (cards, inputs, empty states)
+- Use text-sm/text-xs for most text
+- Use Lucide icons exclusively
+- Keep spacing tight (p-3 to p-5)
+- Add focus:ring-2 focus:ring-purple-500 to all interactive elements
+- Use transitions (transition-colors, transition-all)
+
+### DON'T
+- Use emojis anywhere in the UI
+- Use marketing-size headings (text-3xl+)
+- Use generous spacing (p-8+, py-12+)
+- Mix zinc and slate inconsistently
+- Forget aria-label on icon-only buttons
+
+---
+
+## Layout Architecture
+
+The Lab uses a scroll-aware header system:
+
+1. **LabScrollProvider** wraps the entire section
+2. **LabLayout** detects scroll > 50px in content area
+3. When scrolled, header collapses (h-16 → h-0)
+4. SubsectionNav becomes the top element
+5. Content height adjusts: `h-[calc(100vh-7rem)]` → `h-[calc(100vh-3rem)]`
+
+```tsx
+// Layout hierarchy
+(lab)/layout.tsx          → LabScrollProvider + LabHeader
+  └── lab/layout.tsx      → PageProvider (SubsectionNav)
+      └── LabLayout.tsx   → ThreeColumnLayout (sidebar + content + footer)
+          └── page.tsx    → Actual page content
+```
diff --git a/apps/landing/src/app/(lab)/lab/generate/page.tsx b/apps/landing/src/app/(lab)/lab/generate/page.tsx
index a9383f9..0dd4808 100644
--- a/apps/landing/src/app/(lab)/lab/generate/page.tsx
+++ b/apps/landing/src/app/(lab)/lab/generate/page.tsx
@@ -1,14 +1,9 @@
 'use client';
 
-import { Section } from '@/components/shared/Section';
 import { GenerateFormPlaceholder } from '@/components/lab/GenerateFormPlaceholder';
 
 const GeneratePage = () => {
-  return (
-    <Section className="py-12 md:py-16 min-h-screen">
-      <GenerateFormPlaceholder />
-    </Section>
-  );
+  return <GenerateFormPlaceholder />;
 };
 
 export default GeneratePage;
diff --git a/apps/landing/src/app/(lab)/lab/images/page.tsx b/apps/landing/src/app/(lab)/lab/images/page.tsx
index d270fe7..df523b1 100644
--- a/apps/landing/src/app/(lab)/lab/images/page.tsx
+++ b/apps/landing/src/app/(lab)/lab/images/page.tsx
@@ -1,27 +1,30 @@
 'use client';
 
-import { Section } from '@/components/shared/Section';
+import { Image, ImageOff } from 'lucide-react';
 
 const ImagesPage = () => {
   return (
-    <Section className="py-12 md:py-16 min-h-screen">
-      <header className="mb-8 md:mb-12">
-        <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
-          Image Library
-        </h1>
-        <p className="text-gray-400 text-base md:text-lg">
-          Browse and manage your generated images
-        </p>
+    <div className="p-4 md:p-6 space-y-4">
+      {/* Page Header */}
+      <header className="pb-3 border-b border-slate-800">
+        <div className="flex items-center gap-2">
+          <Image className="w-5 h-5 text-purple-400" />
+          <div>
+            <h1 className="text-lg font-semibold text-white">Images</h1>
+            <p className="text-xs text-gray-400">Browse and manage your generated images</p>
+          </div>
+        </div>
       </header>
 
-      <div className="p-8 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl">
-        <div className="text-center py-12">
-          <div className="text-6xl mb-4">🖼️</div>
-          <h2 className="text-2xl font-semibold text-white mb-2">Image Browser</h2>
-          <p className="text-gray-400">Component will be implemented here</p>
+      {/* Empty State Placeholder */}
+      <div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
+        <div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
+          <ImageOff className="w-6 h-6 text-gray-500" />
         </div>
+        <h2 className="text-sm font-medium text-white mb-1">Image Browser</h2>
+        <p className="text-xs text-gray-400">Component will be implemented here</p>
       </div>
-    </Section>
+    </div>
   );
 };
 
diff --git a/apps/landing/src/app/(lab)/lab/live/page.tsx b/apps/landing/src/app/(lab)/lab/live/page.tsx
index eb04de6..bf1b107 100644
--- a/apps/landing/src/app/(lab)/lab/live/page.tsx
+++ b/apps/landing/src/app/(lab)/lab/live/page.tsx
@@ -1,27 +1,30 @@
 'use client';
 
-import { Section } from '@/components/shared/Section';
+import { Zap, Radio } from 'lucide-react';
 
 const LivePage = () => {
   return (
-    <Section className="py-12 md:py-16 min-h-screen">
-      <header className="mb-8 md:mb-12">
-        <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
-          Live Generation
-        </h1>
-        <p className="text-gray-400 text-base md:text-lg">
-          Real-time testing and experimentation workspace
-        </p>
+    <div className="p-4 md:p-6 space-y-4">
+      {/* Page Header */}
+      <header className="pb-3 border-b border-slate-800">
+        <div className="flex items-center gap-2">
+          <Zap className="w-5 h-5 text-purple-400" />
+          <div>
+            <h1 className="text-lg font-semibold text-white">Live</h1>
+            <p className="text-xs text-gray-400">Real-time testing and experimentation</p>
+          </div>
+        </div>
       </header>
 
-      <div className="p-8 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl">
-        <div className="text-center py-12">
-          <div className="text-6xl mb-4">⚡</div>
-          <h2 className="text-2xl font-semibold text-white mb-2">Live Testing Interface</h2>
-          <p className="text-gray-400">Component will be implemented here</p>
+      {/* Live Testing Placeholder */}
+      <div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
+        <div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
+          <Radio className="w-6 h-6 text-gray-500" />
         </div>
+        <h2 className="text-sm font-medium text-white mb-1">Live Testing Interface</h2>
+        <p className="text-xs text-gray-400">Component will be implemented here</p>
       </div>
-    </Section>
+    </div>
   );
 };
 
diff --git a/apps/landing/src/app/(lab)/lab/upload/page.tsx b/apps/landing/src/app/(lab)/lab/upload/page.tsx
index 1fc4c1c..514fe1e 100644
--- a/apps/landing/src/app/(lab)/lab/upload/page.tsx
+++ b/apps/landing/src/app/(lab)/lab/upload/page.tsx
@@ -1,27 +1,30 @@
 'use client';
 
-import { Section } from '@/components/shared/Section';
+import { Upload, UploadCloud } from 'lucide-react';
 
 const UploadPage = () => {
   return (
-    <Section className="py-12 md:py-16 min-h-screen">
-      <header className="mb-8 md:mb-12">
-        <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
-          File Upload
-        </h1>
-        <p className="text-gray-400 text-base md:text-lg">
-          Upload and manage reference images for generation
-        </p>
+    <div className="p-4 md:p-6 space-y-4">
+      {/* Page Header */}
+      <header className="pb-3 border-b border-slate-800">
+        <div className="flex items-center gap-2">
+          <Upload className="w-5 h-5 text-purple-400" />
+          <div>
+            <h1 className="text-lg font-semibold text-white">Upload</h1>
+            <p className="text-xs text-gray-400">Upload and manage reference images</p>
+          </div>
+        </div>
       </header>
 
-      <div className="p-8 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl">
-        <div className="text-center py-12">
-          <div className="text-6xl mb-4">📤</div>
-          <h2 className="text-2xl font-semibold text-white mb-2">Upload Interface</h2>
-          <p className="text-gray-400">Component will be implemented here</p>
+      {/* Upload Dropzone Placeholder */}
+      <div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 border-dashed rounded-lg text-center">
+        <div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
+          <UploadCloud className="w-6 h-6 text-gray-500" />
         </div>
+        <h2 className="text-sm font-medium text-white mb-1">Upload Interface</h2>
+        <p className="text-xs text-gray-400">Drag and drop files or click to browse</p>
       </div>
-    </Section>
+    </div>
   );
 };
 
diff --git a/apps/landing/src/app/(main)/banatie-landing-v3.html b/apps/landing/src/app/(main)/banatie-landing-v3.html
new file mode 100644
index 0000000..3a61dce
--- /dev/null
+++ b/apps/landing/src/app/(main)/banatie-landing-v3.html
@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Banatie - AI Images for Modern Development</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background: #0a0a0f;
+        }
+        
+        .gradient-text {
+            background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .gradient-border {
+            background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
+            padding: 1px;
+            border-radius: 12px;
+        }
+        
+        .gradient-border-inner {
+            background: #0a0a0f;
+            border-radius: 11px;
+            height: 100%;
+        }
+        
+        .card-gradient {
+            background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
+            border: 1px solid rgba(139, 92, 246, 0.2);
+        }
+        
+        .cta-gradient {
+            background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(6, 182, 212, 0.2) 100%);
+            border: 1px solid rgba(139, 92, 246, 0.3);
+        }
+        
+        .btn-gradient {
+            background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
+        }
+        
+        .btn-gradient:hover {
+            background: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);
+        }
+        
+        .badge {
+            background: rgba(139, 92, 246, 0.15);
+            border: 1px solid rgba(139, 92, 246, 0.3);
+        }
+        
+        .feature-icon {
+            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
+        }
+        
+        .screenshot-placeholder {
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            border: 1px solid rgba(139, 92, 246, 0.3);
+        }
+        
+        .step-number {
+            background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
+        }
+        
+        .tool-badge {
+            background: rgba(30, 30, 50, 0.8);
+            border: 1px solid rgba(139, 92, 246, 0.2);
+        }
+        
+        .powered-badge {
+            background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
+            border: 1px solid rgba(251, 191, 36, 0.3);
+        }
+        
+        .unique-feature {
+            background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
+            border: 1px solid rgba(6, 182, 212, 0.3);
+        }
+        
+        .code-block {
+            background: rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(139, 92, 246, 0.2);
+        }
+        
+        .api-example {
+            background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
+            border: 1px solid rgba(139, 92, 246, 0.15);
+        }
+        
+        .shape-your-future {
+            background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
+            border: 1px solid rgba(236, 72, 153, 0.3);
+        }
+    </style>
+</head>
+<body class="bg-[#0a0a0f] text-white min-h-screen">
+    
+    <!-- Navigation -->
+    <nav class="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0f]/80 backdrop-blur-md border-b border-white/5">
+        <div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
+            <div class="flex items-center gap-2">
+                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 via-purple-500 to-pink-500"></div>
+                <span class="text-xl font-bold">Banatie</span>
+            </div>
+            <div class="flex items-center gap-6">
+                <a href="#lab" class="text-gray-400 hover:text-white transition-colors text-sm">Lab</a>
+                <a href="#join" class="text-gray-300 hover:text-white transition-colors">Get Access</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- SECTION 1: HERO -->
+    <section class="pt-32 pb-20 px-6">
+        <div class="max-w-4xl mx-auto text-center">
+            <!-- Headline -->
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
+                AI Image Generation<br>
+                <span class="gradient-text">Inside Your Workflow</span>
+            </h1>
+            
+            <!-- Subheadline - replaced "No context switching" -->
+            <p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
+                Generate images via API, SDK, CLI, Lab, or live URLs.<br>
+                Production-ready CDN delivery in seconds.
+            </p>
+            
+            <!-- Email Form -->
+            <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-4">
+                <input 
+                    type="email" 
+                    placeholder="your@email.com" 
+                    class="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
+                >
+                <button type="submit" class="btn-gradient px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity whitespace-nowrap">
+                    Get Early Access
+                </button>
+            </form>
+            
+            <p class="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>
+            
+            <!-- Badges - Prompt URLs moved to last -->
+            <div class="flex flex-wrap gap-3 justify-center">
+                <span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
+                    <i data-lucide="zap" class="w-4 h-4"></i>
+                    API-First
+                </span>
+                <span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
+                    <i data-lucide="globe" class="w-4 h-4"></i>
+                    Built-in CDN
+                </span>
+                <span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
+                    <i data-lucide="flask-conical" class="w-4 h-4"></i>
+                    Web Lab
+                </span>
+                <span class="badge px-4 py-2 rounded-full text-sm text-purple-300 flex items-center gap-2">
+                    <i data-lucide="at-sign" class="w-4 h-4"></i>
+                    Style References
+                </span>
+                <span class="badge px-4 py-2 rounded-full text-sm text-cyan-300 flex items-center gap-2 border-cyan-500/30">
+                    <i data-lucide="link" class="w-4 h-4"></i>
+                    Prompt URLs
+                </span>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 2: API EXAMPLE - Practical code right after Hero -->
+    <section class="py-16 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="api-example rounded-2xl p-8">
+                <div class="flex items-center gap-3 mb-6">
+                    <div class="feature-icon w-10 h-10 rounded-lg flex items-center justify-center">
+                        <i data-lucide="terminal" class="w-5 h-5 text-purple-400"></i>
+                    </div>
+                    <div>
+                        <h2 class="text-xl font-bold">One request. Production-ready URL.</h2>
+                        <p class="text-gray-400 text-sm">Simple REST API that handles everything</p>
+                    </div>
+                </div>
+                
+                <!-- Code Example - Request -->
+                <div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto mb-4">
+                    <div class="text-gray-500 mb-2"># Generate an image</div>
+                    <span class="text-cyan-400">curl</span> <span class="text-gray-300">-X POST https://api.banatie.app/v1/generate \</span><br>
+                    <span class="text-gray-300 ml-4">-H</span> <span class="text-green-400">"Authorization: Bearer $API_KEY"</span> <span class="text-gray-300">\</span><br>
+                    <span class="text-gray-300 ml-4">-d</span> <span class="text-green-400">'{"prompt": "modern office interior, natural light"}'</span>
+                </div>
+                
+                <!-- Code Example - Response -->
+                <div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto">
+                    <div class="text-gray-500 mb-2"># Response</div>
+                    <span class="text-gray-300">{</span><br>
+                    <span class="text-purple-400 ml-4">"url"</span><span class="text-gray-300">:</span> <span class="text-green-400">"https://cdn.banatie.app/img/a7x2k9.png"</span><span class="text-gray-300">,</span><br>
+                    <span class="text-purple-400 ml-4">"enhanced_prompt"</span><span class="text-gray-300">:</span> <span class="text-green-400">"A photorealistic modern office..."</span><span class="text-gray-300">,</span><br>
+                    <span class="text-purple-400 ml-4">"generation_time"</span><span class="text-gray-300">:</span> <span class="text-yellow-400">12.4</span><br>
+                    <span class="text-gray-300">}</span>
+                </div>
+                
+                <p class="text-gray-500 text-sm mt-4 text-center">
+                    CDN-cached, optimized, ready to use. No download, no upload, no extra steps.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 3: PROBLEM → SOLUTION -->
+    <section class="py-20 px-6">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
+                Why developers choose Banatie
+            </h2>
+            <p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
+                Stop fighting your image workflow. Start building.
+            </p>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- Card 1 -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="refresh-cw" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2 text-red-400">Placeholder hell</h3>
+                    <p class="text-gray-500 text-sm mb-4">"I'll add images later" never happens</p>
+                    <p class="text-gray-300 text-sm">
+                        <i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
+                        Generate real images as you build
+                    </p>
+                </div>
+                
+                <!-- Card 2 -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="arrow-left-right" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2 text-red-400">Context switching</h3>
+                    <p class="text-gray-500 text-sm mb-4">Leave IDE, generate elsewhere, come back</p>
+                    <p class="text-gray-300 text-sm">
+                        <i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
+                        Stay in your workflow. API, SDK, MCP
+                    </p>
+                </div>
+                
+                <!-- Card 3 -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="package" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2 text-red-400">Asset management</h3>
+                    <p class="text-gray-500 text-sm mb-4">Download, optimize, upload, get URL</p>
+                    <p class="text-gray-300 text-sm">
+                        <i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
+                        Production CDN URLs instantly
+                    </p>
+                </div>
+                
+                <!-- Card 4 -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="layers" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2 text-red-400">Style drift</h3>
+                    <p class="text-gray-500 text-sm mb-4">Every image looks different</p>
+                    <p class="text-gray-300 text-sm">
+                        <i data-lucide="check" class="w-4 h-4 inline text-green-400 mr-1"></i>
+                        Reference images keep style consistent
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 4: PROMPT URLs HIGHLIGHT - Moved after Problem/Solution -->
+    <section class="py-16 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="unique-feature rounded-2xl p-8">
+                <div class="flex items-start gap-4 mb-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0">
+                        <i data-lucide="sparkles" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <div>
+                        <span class="inline-block px-3 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded-full mb-2">Unique</span>
+                        <h2 class="text-2xl font-bold mb-2">Prompt URLs — Images via HTML</h2>
+                        <p class="text-gray-400">Put a prompt in your <code class="text-cyan-300">img src</code> and get a real image. No API calls. No JavaScript. Just HTML.</p>
+                    </div>
+                </div>
+                
+                <!-- Code Example -->
+                <div class="code-block rounded-lg p-4 font-mono text-sm overflow-x-auto">
+                    <span class="text-gray-500">&lt;!-- Write this --&gt;</span><br>
+                    <span class="text-purple-400">&lt;img</span> <span class="text-cyan-300">src</span>=<span class="text-green-400">"https://cdn.banatie.app/gen?p=modern office interior"</span> <span class="text-purple-400">/&gt;</span><br><br>
+                    <span class="text-gray-500">&lt;!-- Get this: production-ready image, cached, CDN-delivered --&gt;</span>
+                </div>
+                
+                <p class="text-gray-500 text-sm mt-4">Perfect for static sites, prototypes, and AI coding agents that generate HTML.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 5: HOW IT WORKS -->
+    <section class="py-20 px-6 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
+                Your prompt. Your control. Production-ready.
+            </h2>
+            <p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
+                We handle the complexity so you can focus on building.
+            </p>
+            
+            <div class="max-w-4xl mx-auto">
+                <!-- Pipeline visualization -->
+                <div class="grid md:grid-cols-4 gap-4 mb-8">
+                    <!-- Step 1 -->
+                    <div class="text-center p-4">
+                        <div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">1</div>
+                        <p class="text-sm font-medium mb-1">Your Prompt</p>
+                        <p class="text-xs text-gray-500">"a cat on windowsill"</p>
+                    </div>
+                    
+                    <!-- Step 2 -->
+                    <div class="text-center p-4">
+                        <div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">2</div>
+                        <p class="text-sm font-medium mb-1">Smart Enhancement</p>
+                        <p class="text-xs text-gray-500">Style + details added</p>
+                    </div>
+                    
+                    <!-- Step 3 -->
+                    <div class="text-center p-4">
+                        <div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">3</div>
+                        <p class="text-sm font-medium mb-1">AI Generation</p>
+                        <p class="text-xs text-gray-500">Gemini creates image</p>
+                    </div>
+                    
+                    <!-- Step 4 -->
+                    <div class="text-center p-4">
+                        <div class="step-number w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-3 text-sm font-bold">4</div>
+                        <p class="text-sm font-medium mb-1">CDN Delivery</p>
+                        <p class="text-xs text-gray-500">Instant global URL</p>
+                    </div>
+                </div>
+                
+                <!-- What you control box -->
+                <div class="card-gradient rounded-xl p-6 mt-8">
+                    <h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
+                        <i data-lucide="settings-2" class="w-5 h-5 text-purple-400"></i>
+                        What you control
+                    </h3>
+                    <div class="grid md:grid-cols-3 gap-4 text-sm">
+                        <div class="flex items-start gap-2">
+                            <i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300"><strong class="text-white">Style templates</strong> — photorealistic, illustration, minimalist, and more</span>
+                        </div>
+                        <div class="flex items-start gap-2">
+                            <i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300"><strong class="text-white">Reference images</strong> — @aliases maintain visual consistency</span>
+                        </div>
+                        <div class="flex items-start gap-2">
+                            <i data-lucide="check" class="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0"></i>
+                            <span class="text-gray-300"><strong class="text-white">Output specs</strong> — aspect ratio, dimensions, format</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Transparency note -->
+                <p class="text-center text-gray-500 text-sm mt-6">
+                    <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
+                    Enhanced prompts are visible in API response. You always see what was generated.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 6: KEY FEATURES -->
+    <section class="py-20 px-6">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
+                Built for real development workflows
+            </h2>
+            <p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
+                Everything you need to integrate AI images into your projects.
+            </p>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Feature 1: Reference Images -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="at-sign" class="w-6 h-6 text-pink-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2">Reference Images</h3>
+                    <p class="text-gray-400 text-sm">
+                        Use @aliases to maintain style consistency across your project. Reference up to 3 images per generation.
+                    </p>
+                </div>
+                
+                <!-- Feature 2: Flows -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="git-branch" class="w-6 h-6 text-purple-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2">Flows</h3>
+                    <p class="text-gray-400 text-sm">
+                        Chain generations, iterate on results, build image sequences with @last and @first references.
+                    </p>
+                </div>
+                
+                <!-- Feature 3: Style Templates -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="palette" class="w-6 h-6 text-yellow-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2">7 Style Templates</h3>
+                    <p class="text-gray-400 text-sm">
+                        Same prompt, different styles. Photorealistic, illustration, minimalist, product, comic, sticker, and more.
+                    </p>
+                </div>
+                
+                <!-- Feature 4: Instant CDN -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="globe" class="w-6 h-6 text-green-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2">Instant CDN Delivery</h3>
+                    <p class="text-gray-400 text-sm">
+                        Every image gets production-ready URL. No upload, no optimization, no hosting setup needed.
+                    </p>
+                </div>
+                
+                <!-- Feature 5: Output Control -->
+                <div class="card-gradient rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="sliders-horizontal" class="w-6 h-6 text-blue-400"></i>
+                    </div>
+                    <h3 class="font-semibold text-lg mb-2">Output Control</h3>
+                    <p class="text-gray-400 text-sm">
+                        Control aspect ratio, dimensions, and format. From square thumbnails to ultra-wide banners.
+                    </p>
+                </div>
+                
+                <!-- Feature 6: Prompt URLs -->
+                <div class="unique-feature rounded-xl p-6">
+                    <div class="feature-icon w-12 h-12 rounded-xl flex items-center justify-center mb-4">
+                        <i data-lucide="link" class="w-6 h-6 text-cyan-400"></i>
+                    </div>
+                    <div class="flex items-center gap-2 mb-2">
+                        <h3 class="font-semibold text-lg">Prompt URLs</h3>
+                        <span class="px-2 py-0.5 bg-cyan-500/20 text-cyan-300 text-xs rounded">Unique</span>
+                    </div>
+                    <p class="text-gray-400 text-sm">
+                        Generate images via URL parameters. Put prompt in img src, get real image. Built-in caching.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 7: INTEGRATIONS - Added Lab -->
+    <section id="lab" class="py-20 px-6 bg-gradient-to-b from-transparent via-cyan-900/5 to-transparent">
+        <div class="max-w-6xl mx-auto text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">
+                Works with your tools
+            </h2>
+            <p class="text-gray-400 mb-12 max-w-2xl mx-auto">
+                Use what fits your workflow. All methods, same capabilities.
+            </p>
+            
+            <div class="flex flex-wrap justify-center gap-4 mb-8">
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
+                    <i data-lucide="server" class="w-5 h-5 text-cyan-400"></i>
+                    <span>REST API</span>
+                </div>
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
+                    <i data-lucide="code" class="w-5 h-5 text-blue-400"></i>
+                    <span>TypeScript SDK</span>
+                </div>
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
+                    <i data-lucide="cpu" class="w-5 h-5 text-purple-400"></i>
+                    <span>MCP Server</span>
+                </div>
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
+                    <i data-lucide="terminal" class="w-5 h-5 text-green-400"></i>
+                    <span>CLI</span>
+                </div>
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2">
+                    <i data-lucide="flask-conical" class="w-5 h-5 text-orange-400"></i>
+                    <span>Banatie Lab</span>
+                </div>
+                <div class="tool-badge px-6 py-3 rounded-lg flex items-center gap-2 border-cyan-500/30">
+                    <i data-lucide="link-2" class="w-5 h-5 text-cyan-400"></i>
+                    <span>Prompt URLs</span>
+                </div>
+            </div>
+            
+            <!-- Lab description -->
+            <div class="max-w-2xl mx-auto mt-8 p-4 bg-white/5 rounded-lg">
+                <p class="text-sm text-gray-400">
+                    <strong class="text-white">Banatie Lab</strong> — Official web interface for Banatie API. Generate images, build flows, browse your gallery, and explore all capabilities with ready-to-use code snippets.
+                </p>
+            </div>
+            
+            <p class="text-gray-500 text-sm mt-6">
+                Perfect for Claude Code, Cursor, and any AI-powered workflow.
+            </p>
+        </div>
+    </section>
+
+    <!-- SECTION 8: POWERED BY - Focus on Gemini capabilities -->
+    <section class="py-20 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="powered-badge rounded-2xl p-8">
+                <div class="flex items-center justify-center gap-3 mb-4">
+                    <i data-lucide="zap" class="w-8 h-8 text-yellow-400"></i>
+                    <h2 class="text-2xl font-bold">Powered by Google Gemini</h2>
+                </div>
+                
+                <!-- Model names -->
+                <p class="text-center text-gray-400 mb-6">
+                    Currently using <span class="text-white font-medium">Gemini 2.5 Flash Image</span> <span class="text-gray-500">(Nano Banana)</span> — Google's fastest natively multimodal image model.
+                </p>
+                
+                <!-- Gemini capabilities -->
+                <div class="grid md:grid-cols-2 gap-4 max-w-2xl mx-auto">
+                    <div class="flex items-start gap-3 text-sm">
+                        <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
+                        <div>
+                            <strong class="text-white">Native multimodal</strong>
+                            <p class="text-gray-400">Text and image understanding in one model</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3 text-sm">
+                        <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
+                        <div>
+                            <strong class="text-white">High-fidelity text rendering</strong>
+                            <p class="text-gray-400">Legible text in images for logos and diagrams</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3 text-sm">
+                        <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
+                        <div>
+                            <strong class="text-white">Conversational editing</strong>
+                            <p class="text-gray-400">Refine images through natural language</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-3 text-sm">
+                        <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i>
+                        <div>
+                            <strong class="text-white">Optimized for speed</strong>
+                            <p class="text-gray-400">Fast generation without quality compromise</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Future models hint -->
+                <p class="text-center text-gray-500 text-sm mt-6">
+                    More models coming — including Gemini 3 Pro Image (Nano Banana Pro) for advanced use cases.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 9: SHAPE THE FUTURE - Replaced "What's next" -->
+    <section class="py-20 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="shape-your-future rounded-2xl p-8 text-center">
+                <div class="flex items-center justify-center gap-3 mb-4">
+                    <i data-lucide="rocket" class="w-8 h-8 text-pink-400"></i>
+                    <h2 class="text-2xl font-bold">Shape the future of Banatie</h2>
+                </div>
+                <p class="text-gray-400 mb-6 max-w-xl mx-auto">
+                    We're building this for developers like you. Early adopters get direct influence on our roadmap — suggest features, vote on priorities, and help us build exactly what you need.
+                </p>
+                <div class="flex flex-wrap justify-center gap-4 text-sm">
+                    <div class="flex items-center gap-2 text-gray-300">
+                        <i data-lucide="message-circle" class="w-4 h-4 text-pink-400"></i>
+                        <span>Direct feedback channel</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-gray-300">
+                        <i data-lucide="vote" class="w-4 h-4 text-pink-400"></i>
+                        <span>Feature voting</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-gray-300">
+                        <i data-lucide="users" class="w-4 h-4 text-pink-400"></i>
+                        <span>Early adopter community</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 10: FINAL CTA -->
+    <section id="join" class="py-20 px-6">
+        <div class="max-w-4xl mx-auto">
+            <div class="cta-gradient rounded-2xl p-12 text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">
+                    Be first to try it
+                </h2>
+                <p class="text-gray-300 mb-8 max-w-xl mx-auto">
+                    Join developers waiting for early access. We'll notify you when your spot is ready.
+                </p>
+                
+                <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
+                    <input 
+                        type="email" 
+                        placeholder="your@email.com" 
+                        class="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
+                    >
+                    <button type="submit" class="btn-gradient px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity whitespace-nowrap">
+                        Get Early Access
+                    </button>
+                </form>
+            </div>
+        </div>
+    </section>
+
+    <!-- SECTION 11: FOOTER -->
+    <footer class="py-12 px-6 border-t border-white/5">
+        <div class="max-w-6xl mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-center gap-6">
+                <!-- Logo -->
+                <div class="flex items-center gap-2">
+                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 via-purple-500 to-pink-500"></div>
+                    <span class="text-xl font-bold">Banatie</span>
+                </div>
+                
+                <!-- Links -->
+                <div class="flex flex-wrap justify-center gap-6 text-gray-400">
+                    <a href="#" class="hover:text-white transition-colors">Documentation</a>
+                    <a href="#" class="hover:text-white transition-colors">API Reference</a>
+                    <a href="#" class="hover:text-white transition-colors">Lab</a>
+                    <a href="#" class="hover:text-white transition-colors">Pricing</a>
+                    <a href="#" class="hover:text-white transition-colors">Contact</a>
+                </div>
+            </div>
+            
+            <div class="mt-8 pt-8 border-t border-white/5 text-center text-gray-500 text-sm">
+                <p class="mb-2">Built for builders who create.</p>
+                <p>© 2025 Banatie. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Initialize Lucide Icons -->
+    <script>
+        lucide.createIcons();
+    </script>
+</body>
+</html>
diff --git a/apps/landing/src/app/globals.css b/apps/landing/src/app/globals.css
index bafa22b..c65a01d 100644
--- a/apps/landing/src/app/globals.css
+++ b/apps/landing/src/app/globals.css
@@ -1,20 +1,49 @@
 @import 'tailwindcss';
+@import "tw-animate-css";
 
-:root {
-  --background: #0f172a;
-  --foreground: #f8fafc;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
   font-family:
     'Inter',
     -apple-system,
@@ -99,3 +128,81 @@ pre::-webkit-scrollbar-thumb {
 pre::-webkit-scrollbar-thumb:hover {
   background: rgb(148, 163, 184); /* slate-400 */
 }
+
+/* Dark theme as default (no .dark class needed) */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+/* Light theme (optional, requires .light class) */
+.light {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  /* Body background handled by page-specific gradients, not Shadcn variables */
+}
diff --git a/apps/landing/src/components/lab/FilterPlaceholder.tsx b/apps/landing/src/components/lab/FilterPlaceholder.tsx
index 7932e5d..e8b3060 100644
--- a/apps/landing/src/components/lab/FilterPlaceholder.tsx
+++ b/apps/landing/src/components/lab/FilterPlaceholder.tsx
@@ -5,16 +5,20 @@
  *
  * Checkbox/radio button group for sidebar filters.
  * Supports both single-select (radio) and multi-select (checkbox) modes.
+ * Uses Shadcn UI components with custom slate styling.
  *
  * Features:
- * - Radio buttons for single selection
- * - Checkboxes for multiple selection
+ * - Radio buttons for single selection (Shadcn RadioGroup)
+ * - Checkboxes for multiple selection (Shadcn Checkbox)
  * - Option counts (e.g., "All (127)")
  * - Accessible keyboard navigation
  * - Focus indicators
  */
 
 import { useState } from 'react';
+import { Checkbox } from '@/components/ui/checkbox';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Label } from '@/components/ui/label';
 
 type FilterOption = {
   id: string;
@@ -35,37 +39,75 @@ export const FilterPlaceholder = ({
 }: FilterPlaceholderProps) => {
   const [selected, setSelected] = useState<string[]>(multiSelect ? [] : [options[0]?.id || '']);
 
-  const handleSelect = (optionId: string) => {
-    if (multiSelect) {
-      setSelected((prev) =>
-        prev.includes(optionId) ? prev.filter((id) => id !== optionId) : [...prev, optionId]
-      );
-    } else {
-      setSelected([optionId]);
-    }
+  const handleCheckboxChange = (optionId: string, checked: boolean) => {
+    setSelected((prev) =>
+      checked ? [...prev, optionId] : prev.filter((id) => id !== optionId)
+    );
+  };
+
+  const handleRadioChange = (value: string) => {
+    setSelected([value]);
   };
 
   const isSelected = (optionId: string) => selected.includes(optionId);
 
+  if (multiSelect) {
+    // Checkbox mode for multi-select
+    return (
+      <div className="mt-2 space-y-1" role="group" aria-label={`${groupId} filters`}>
+        {options.map((option) => {
+          const checked = isSelected(option.id);
+          const inputId = `${groupId}-${option.id}`;
+
+          return (
+            <Label
+              key={option.id}
+              htmlFor={inputId}
+              className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer transition-colors hover:bg-white/5 group font-normal"
+            >
+              <Checkbox
+                id={inputId}
+                checked={checked}
+                onCheckedChange={(checked) => handleCheckboxChange(option.id, checked === true)}
+                className="border-slate-600 bg-slate-800 data-[state=checked]:bg-purple-600 data-[state=checked]:border-purple-600 data-[state=checked]:text-white focus-visible:ring-purple-500 focus-visible:ring-offset-0"
+              />
+              <span className={`flex-1 ${checked ? 'text-white font-medium' : 'text-gray-400 group-hover:text-gray-300'}`}>
+                {option.label}
+              </span>
+              {option.count !== undefined && (
+                <span className="text-xs text-gray-600">
+                  {option.count}
+                </span>
+              )}
+            </Label>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Radio mode for single-select
   return (
-    <div className="mt-2 space-y-1" role="group" aria-label={`${groupId} filters`}>
+    <RadioGroup
+      value={selected[0]}
+      onValueChange={handleRadioChange}
+      className="mt-2 space-y-1"
+      aria-label={`${groupId} filters`}
+    >
       {options.map((option) => {
         const checked = isSelected(option.id);
         const inputId = `${groupId}-${option.id}`;
 
         return (
-          <label
+          <Label
             key={option.id}
             htmlFor={inputId}
-            className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer transition-colors hover:bg-white/5 group"
+            className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm cursor-pointer transition-colors hover:bg-white/5 group font-normal"
           >
-            <input
-              type={multiSelect ? 'checkbox' : 'radio'}
+            <RadioGroupItem
               id={inputId}
-              name={groupId}
-              checked={checked}
-              onChange={() => handleSelect(option.id)}
-              className="w-4 h-4 bg-slate-800 border-slate-600 text-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-offset-0 rounded cursor-pointer"
+              value={option.id}
+              className="border-slate-600 bg-slate-800 text-purple-600 data-[state=checked]:border-purple-600 focus-visible:ring-purple-500 focus-visible:ring-offset-0"
             />
             <span className={`flex-1 ${checked ? 'text-white font-medium' : 'text-gray-400 group-hover:text-gray-300'}`}>
               {option.label}
@@ -75,9 +117,9 @@ export const FilterPlaceholder = ({
                 {option.count}
               </span>
             )}
-          </label>
+          </Label>
         );
       })}
-    </div>
+    </RadioGroup>
   );
 };
diff --git a/apps/landing/src/components/lab/GenerateFormPlaceholder.tsx b/apps/landing/src/components/lab/GenerateFormPlaceholder.tsx
index 7d3bde7..e35bb3d 100644
--- a/apps/landing/src/components/lab/GenerateFormPlaceholder.tsx
+++ b/apps/landing/src/components/lab/GenerateFormPlaceholder.tsx
@@ -3,26 +3,62 @@
 /**
  * Generate Form Placeholder Component
  *
- * Main content placeholder for lab generation interface.
- * Matches the /demo/tti page visual style with form card and results area.
+ * Main content for lab generation interface.
+ * Clean, work-focused design with compact layout.
+ * Uses Shadcn UI components with custom slate styling.
  *
  * Features:
- * - Header with title and description
- * - Prompt textarea (similar to TTI page)
- * - Options row with selects and buttons
- * - Submit button with gradient styling
- * - Results area placeholder
- * - Keyboard shortcuts (Ctrl+Enter)
+ * - Compact info banner (dismissible)
+ * - Prompt textarea with keyboard shortcuts (Shadcn Textarea)
+ * - Options grid with Shadcn Select dropdowns
+ * - Results area with empty state
+ * - Lucide icons throughout
+ *
+ * Color scheme: Forms use slate palette (original style)
  */
 
-import { useState, useRef, KeyboardEvent } from 'react';
+import { useState, KeyboardEvent } from 'react';
+import {
+  Info,
+  X,
+  Loader2,
+  Settings,
+  ImageOff,
+  Trash2,
+  Sparkles,
+  Wand2,
+  Palette,
+  Image,
+  Layers,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+// Shared styles for consistent theming
+const selectTriggerStyles = "w-full bg-slate-800 border-slate-700 text-white focus:ring-purple-500 focus:ring-offset-0 hover:bg-slate-700/50";
+const selectContentStyles = "bg-slate-800 border-slate-700";
+const selectItemStyles = "text-white focus:bg-slate-700 focus:text-white";
+const inputStyles = "bg-slate-800 border-slate-700 text-white placeholder:text-gray-500 focus-visible:ring-purple-500 focus-visible:ring-offset-0";
+const textareaStyles = "bg-slate-800 border-slate-700 text-white placeholder:text-gray-500 focus-visible:ring-purple-500 focus-visible:ring-offset-0 resize-none";
+const labelStyles = "text-xs font-medium text-gray-400";
+const cardStyles = "p-4 bg-slate-900/80 backdrop-blur-sm border-slate-700 rounded-xl gap-0 py-4";
 
 export const GenerateFormPlaceholder = () => {
   const [prompt, setPrompt] = useState('');
   const [aspectRatio, setAspectRatio] = useState('1:1');
   const [template, setTemplate] = useState('photorealistic');
   const [generating, setGenerating] = useState(false);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [showBanner, setShowBanner] = useState(true);
 
   const handleGenerate = () => {
     if (!prompt.trim()) return;
@@ -38,174 +74,373 @@ export const GenerateFormPlaceholder = () => {
   };
 
   return (
-    <div className="min-h-screen">
-      {/* Page Header */}
-      <header className="mb-8 md:mb-12">
-        <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
-          Generate Workbench
-        </h1>
-        <p className="text-gray-400 text-base md:text-lg">
-          Create and experiment with AI-generated images
-        </p>
-      </header>
-
-      {/* Info Banner (Placeholder) */}
-      <div className="mb-6 p-5 bg-purple-900/10 border border-purple-700/50 rounded-2xl">
-        <div className="flex items-center justify-between flex-wrap gap-4">
-          <div>
-            <h3 className="text-lg font-semibold text-white mb-1">Lab Environment</h3>
-            <p className="text-sm text-gray-400">
-              This is an experimental interface for testing generation features
-            </p>
-          </div>
-          <div className="flex items-center gap-2 text-sm text-purple-400">
-            <span className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></span>
-            <span>Active</span>
+    <div className="p-4 md:p-6 space-y-4">
+      {/* Compact Info Banner */}
+      {showBanner && (
+        <div className="p-3 bg-purple-900/10 border border-purple-700/50 rounded-lg">
+          <div className="flex items-start gap-2">
+            <Info className="w-4 h-4 text-purple-400 mt-0.5 shrink-0" />
+            <div className="flex-1">
+              <p className="text-xs text-gray-300">
+                <span className="font-medium text-white">Lab Mode:</span>{' '}
+                Experimental features enabled. API calls may be rate-limited.
+              </p>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={() => setShowBanner(false)}
+              className="p-1 h-auto w-auto text-gray-500 hover:text-gray-300 hover:bg-transparent"
+              aria-label="Dismiss"
+            >
+              <X className="w-3 h-3" />
+            </Button>
           </div>
         </div>
-      </div>
+      )}
 
       {/* Generation Form Card */}
-      <section
-        className="mb-8 p-6 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
-        aria-label="Image Generation Form"
-      >
-        {/* Prompt Textarea */}
-        <div className="mb-4">
-          <label htmlFor="lab-prompt-input" className="block text-lg font-semibold text-white mb-3">
-            Your Prompt
-          </label>
-          <textarea
-            id="lab-prompt-input"
-            ref={textareaRef}
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Describe the image you want to generate..."
-            disabled={generating}
-            rows={5}
-            className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed resize-none"
-            aria-label="Image generation prompt"
-          />
-          <p className="mt-2 text-xs text-gray-500">
-            Tip: Be specific and descriptive for better results
-          </p>
-        </div>
-
-        {/* Options Row */}
-        <div className="mb-4 grid grid-cols-1 md:grid-cols-3 gap-3">
-          {/* Aspect Ratio */}
+      <Card className={cardStyles} aria-label="Image Generation Form">
+        <CardContent className="p-0 px-4 space-y-3">
+          {/* Prompt Textarea */}
           <div>
-            <label
-              htmlFor="lab-aspect-ratio"
-              className="block text-xs font-medium text-gray-400 mb-1.5"
-            >
-              Aspect Ratio
-            </label>
-            <select
-              id="lab-aspect-ratio"
-              value={aspectRatio}
-              onChange={(e) => setAspectRatio(e.target.value)}
+            <Label htmlFor="lab-prompt-input" className={labelStyles}>
+              Prompt
+            </Label>
+            <Textarea
+              id="lab-prompt-input"
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Describe the image you want to generate..."
               disabled={generating}
-              className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+              rows={4}
+              className={`mt-1.5 ${textareaStyles}`}
+              aria-label="Image generation prompt"
+            />
+          </div>
+
+          {/* Options Row */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
+            {/* Aspect Ratio */}
+            <div>
+              <Label htmlFor="lab-aspect-ratio" className={labelStyles}>
+                Aspect Ratio
+              </Label>
+              <Select value={aspectRatio} onValueChange={setAspectRatio} disabled={generating}>
+                <SelectTrigger id="lab-aspect-ratio" className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue placeholder="Select ratio" />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="1:1" className={selectItemStyles}>Square (1:1)</SelectItem>
+                  <SelectItem value="3:4" className={selectItemStyles}>Portrait (3:4)</SelectItem>
+                  <SelectItem value="4:3" className={selectItemStyles}>Landscape (4:3)</SelectItem>
+                  <SelectItem value="9:16" className={selectItemStyles}>Vertical (9:16)</SelectItem>
+                  <SelectItem value="16:9" className={selectItemStyles}>Widescreen (16:9)</SelectItem>
+                  <SelectItem value="21:9" className={selectItemStyles}>Ultrawide (21:9)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Template */}
+            <div>
+              <Label htmlFor="lab-template" className={labelStyles}>
+                Style Template
+              </Label>
+              <Select value={template} onValueChange={setTemplate} disabled={generating}>
+                <SelectTrigger id="lab-template" className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue placeholder="Select style" />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="photorealistic" className={selectItemStyles}>Photorealistic</SelectItem>
+                  <SelectItem value="illustration" className={selectItemStyles}>Illustration</SelectItem>
+                  <SelectItem value="minimalist" className={selectItemStyles}>Minimalist</SelectItem>
+                  <SelectItem value="sticker" className={selectItemStyles}>Sticker</SelectItem>
+                  <SelectItem value="product" className={selectItemStyles}>Product</SelectItem>
+                  <SelectItem value="comic" className={selectItemStyles}>Comic</SelectItem>
+                  <SelectItem value="general" className={selectItemStyles}>General</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Advanced Options Button */}
+            <div>
+              <Label className={labelStyles}>Advanced</Label>
+              <Button
+                variant="outline"
+                disabled={generating}
+                className={`mt-1.5 w-full ${selectTriggerStyles} justify-center`}
+                aria-label="Advanced options"
+              >
+                <Settings className="w-4 h-4" />
+                <span>Configure</span>
+              </Button>
+            </div>
+          </div>
+
+          {/* Submit Button Row */}
+          <div className="flex items-center justify-between gap-3 pt-3 border-t border-slate-700/50">
+            <div className="text-xs text-gray-500">
+              {generating ? (
+                <span className="flex items-center gap-1.5 text-purple-400">
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  Generating...
+                </span>
+              ) : (
+                <span className="hidden sm:inline">Ctrl+Enter to submit</span>
+              )}
+            </div>
+            <Button
+              onClick={handleGenerate}
+              disabled={generating || !prompt.trim()}
+              className="bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 shadow-lg shadow-purple-900/30"
             >
-              <option value="1:1">Square (1:1)</option>
-              <option value="3:4">Portrait (3:4)</option>
-              <option value="4:3">Landscape (4:3)</option>
-              <option value="9:16">Vertical (9:16)</option>
-              <option value="16:9">Widescreen (16:9)</option>
-              <option value="21:9">Ultrawide (21:9)</option>
-            </select>
+              <Sparkles className="w-4 h-4" />
+              {generating ? 'Generating...' : 'Generate'}
+            </Button>
           </div>
+        </CardContent>
+      </Card>
 
-          {/* Template */}
-          <div>
-            <label htmlFor="lab-template" className="block text-xs font-medium text-gray-400 mb-1.5">
-              Style Template
-            </label>
-            <select
-              id="lab-template"
-              value={template}
-              onChange={(e) => setTemplate(e.target.value)}
-              disabled={generating}
-              className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              <option value="photorealistic">Photorealistic</option>
-              <option value="illustration">Illustration</option>
-              <option value="minimalist">Minimalist</option>
-              <option value="sticker">Sticker</option>
-              <option value="product">Product</option>
-              <option value="comic">Comic</option>
-              <option value="general">General</option>
-            </select>
-          </div>
-
-          {/* Advanced Options Button */}
-          <div>
-            <label className="block text-xs font-medium text-gray-400 mb-1.5">
-              Advanced Options
-            </label>
-            <button
-              disabled={generating}
-              className="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-700 rounded-lg text-gray-400 hover:text-white hover:bg-slate-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-              aria-label="Advanced options"
-            >
-              <span>⚙️</span>
-              <span>Configure</span>
-            </button>
-          </div>
-        </div>
-
-        {/* Submit Button Row */}
-        <div className="flex items-center justify-between gap-4 flex-wrap pt-2 border-t border-slate-700/50">
-          <div className="text-sm text-gray-500">
-            {generating ? (
-              <span className="flex items-center gap-2">
-                <span className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></span>
-                Generating...
-              </span>
-            ) : (
-              'Press Ctrl+Enter to submit'
-            )}
-          </div>
-          <button
-            onClick={handleGenerate}
-            disabled={generating || !prompt.trim()}
-            className="px-6 py-2.5 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-purple-900/30 focus:ring-2 focus:ring-purple-500"
-          >
-            {generating ? 'Generating...' : 'Generate Images'}
-          </button>
-        </div>
-      </section>
-
-      {/* Results Area Placeholder */}
-      <section className="space-y-6" aria-label="Generated Results">
+      {/* Results Area */}
+      <section className="space-y-3" aria-label="Generated Results">
         <div className="flex items-center justify-between">
-          <h2 className="text-xl md:text-2xl font-bold text-white">Results</h2>
-          <button className="text-sm text-gray-500 hover:text-gray-300 transition-colors">
-            Clear All
-          </button>
+          <h2 className="text-sm font-semibold text-white">Results</h2>
+          <Button variant="ghost" size="sm" className="h-auto py-1 text-xs text-gray-500 hover:text-gray-300 hover:bg-transparent">
+            <Trash2 className="w-3.5 h-3.5" />
+            Clear
+          </Button>
         </div>
 
         {/* Empty State */}
-        <div className="p-12 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-2xl text-center">
-          <div className="mb-4 text-5xl">🎨</div>
-          <h3 className="text-lg font-semibold text-white mb-2">No results yet</h3>
-          <p className="text-gray-400 text-sm">
-            Generate your first image to see results here
-          </p>
-        </div>
+        {!generating && (
+          <div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
+            <div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
+              <ImageOff className="w-6 h-6 text-gray-500" />
+            </div>
+            <h3 className="text-sm font-medium text-white mb-1">No results yet</h3>
+            <p className="text-xs text-gray-400">
+              Generated images will appear here
+            </p>
+          </div>
+        )}
 
-        {/* Result Cards Placeholder (would appear after generation) */}
+        {/* Loading State */}
         {generating && (
-          <div className="p-6 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl animate-pulse">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg animate-pulse">
+            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
               <div className="aspect-square bg-slate-800 rounded-lg"></div>
               <div className="aspect-square bg-slate-800 rounded-lg"></div>
+              <div className="aspect-square bg-slate-800 rounded-lg hidden xl:block"></div>
             </div>
           </div>
         )}
       </section>
+
+      {/* Additional Form Sections for Scroll Testing */}
+      <Card className={cardStyles}>
+        <CardHeader className="p-0 px-4 pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Wand2 className="w-4 h-4 text-purple-400" />
+            Style Refinement
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0 px-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div>
+              <Label className={labelStyles}>Color Palette</Label>
+              <Select defaultValue="vibrant">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="vibrant" className={selectItemStyles}>Vibrant</SelectItem>
+                  <SelectItem value="muted" className={selectItemStyles}>Muted</SelectItem>
+                  <SelectItem value="monochrome" className={selectItemStyles}>Monochrome</SelectItem>
+                  <SelectItem value="pastel" className={selectItemStyles}>Pastel</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Lighting</Label>
+              <Select defaultValue="natural">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="natural" className={selectItemStyles}>Natural</SelectItem>
+                  <SelectItem value="studio" className={selectItemStyles}>Studio</SelectItem>
+                  <SelectItem value="dramatic" className={selectItemStyles}>Dramatic</SelectItem>
+                  <SelectItem value="soft" className={selectItemStyles}>Soft</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Mood</Label>
+              <Select defaultValue="neutral">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="neutral" className={selectItemStyles}>Neutral</SelectItem>
+                  <SelectItem value="happy" className={selectItemStyles}>Happy</SelectItem>
+                  <SelectItem value="mysterious" className={selectItemStyles}>Mysterious</SelectItem>
+                  <SelectItem value="energetic" className={selectItemStyles}>Energetic</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Detail Level</Label>
+              <Select defaultValue="high">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="high" className={selectItemStyles}>High</SelectItem>
+                  <SelectItem value="medium" className={selectItemStyles}>Medium</SelectItem>
+                  <SelectItem value="low" className={selectItemStyles}>Low</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className={cardStyles}>
+        <CardHeader className="p-0 px-4 pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Palette className="w-4 h-4 text-purple-400" />
+            Color Controls
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0 px-4 space-y-3">
+          <div>
+            <Label className={labelStyles}>Primary Color</Label>
+            <Input type="text" placeholder="#8B5CF6" className={`mt-1.5 ${inputStyles}`} />
+          </div>
+          <div>
+            <Label className={labelStyles}>Secondary Color</Label>
+            <Input type="text" placeholder="#06B6D4" className={`mt-1.5 ${inputStyles}`} />
+          </div>
+          <div>
+            <Label className={labelStyles}>Background Hint</Label>
+            <Input type="text" placeholder="e.g., gradient, solid, transparent" className={`mt-1.5 ${inputStyles}`} />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className={cardStyles}>
+        <CardHeader className="p-0 px-4 pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Image className="w-4 h-4 text-purple-400" />
+            Reference Images
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0 px-4">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} className="aspect-square bg-slate-800 border border-slate-700 border-dashed rounded-lg flex items-center justify-center">
+                <span className="text-xs text-gray-500">Drop image</span>
+              </div>
+            ))}
+          </div>
+          <p className="mt-2 text-xs text-gray-500">Upload up to 4 reference images to guide the generation</p>
+        </CardContent>
+      </Card>
+
+      <Card className={cardStyles}>
+        <CardHeader className="p-0 px-4 pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Layers className="w-4 h-4 text-purple-400" />
+            Advanced Parameters
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0 px-4 space-y-3">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+            <div>
+              <Label className={labelStyles}>Guidance Scale</Label>
+              <Input type="number" defaultValue={7.5} step={0.5} min={1} max={20} className={`mt-1.5 ${inputStyles}`} />
+            </div>
+            <div>
+              <Label className={labelStyles}>Steps</Label>
+              <Input type="number" defaultValue={30} step={5} min={10} max={100} className={`mt-1.5 ${inputStyles}`} />
+            </div>
+            <div>
+              <Label className={labelStyles}>Seed</Label>
+              <Input type="number" placeholder="Random" className={`mt-1.5 ${inputStyles}`} />
+            </div>
+          </div>
+          <div>
+            <Label className={labelStyles}>Negative Prompt</Label>
+            <Textarea rows={2} placeholder="Elements to avoid in the generation..." className={`mt-1.5 ${textareaStyles}`} />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className={cardStyles}>
+        <CardHeader className="p-0 px-4 pb-3">
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Settings className="w-4 h-4 text-purple-400" />
+            Output Settings
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0 px-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div>
+              <Label className={labelStyles}>Output Format</Label>
+              <Select defaultValue="png">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="png" className={selectItemStyles}>PNG</SelectItem>
+                  <SelectItem value="jpeg" className={selectItemStyles}>JPEG</SelectItem>
+                  <SelectItem value="webp" className={selectItemStyles}>WebP</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Quality</Label>
+              <Select defaultValue="max">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="max" className={selectItemStyles}>Maximum (100%)</SelectItem>
+                  <SelectItem value="high" className={selectItemStyles}>High (90%)</SelectItem>
+                  <SelectItem value="medium" className={selectItemStyles}>Medium (80%)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Number of Images</Label>
+              <Select defaultValue="1">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="1" className={selectItemStyles}>1</SelectItem>
+                  <SelectItem value="2" className={selectItemStyles}>2</SelectItem>
+                  <SelectItem value="4" className={selectItemStyles}>4</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className={labelStyles}>Auto-save to</Label>
+              <Select defaultValue="default">
+                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className={selectContentStyles}>
+                  <SelectItem value="default" className={selectItemStyles}>Default folder</SelectItem>
+                  <SelectItem value="favorites" className={selectItemStyles}>Favorites</SelectItem>
+                  <SelectItem value="none" className={selectItemStyles}>Don&apos;t save</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 };
diff --git a/apps/landing/src/components/layout/lab/LabFooter.tsx b/apps/landing/src/components/layout/lab/LabFooter.tsx
index 8a9b406..145a2eb 100644
--- a/apps/landing/src/components/layout/lab/LabFooter.tsx
+++ b/apps/landing/src/components/layout/lab/LabFooter.tsx
@@ -5,10 +5,12 @@
  *
  * Simple 1-line footer for lab section with contextual navigation links.
  * Displays copyright on left and contextual docs/API links on right.
+ * Uses slate color palette (blue-tinted gray).
  */
 
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
+import { BookOpen, Code } from 'lucide-react';
 
 type LinkMapEntry = {
   docs: string;
@@ -32,27 +34,29 @@ export const LabFooter = () => {
 
   return (
     <footer
-      className="border-t border-white/10 bg-slate-950/50 backdrop-blur-sm"
+      className="border-t border-slate-800 bg-slate-950/80 backdrop-blur-sm"
       role="contentinfo"
     >
-      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 md:gap-0 px-6 py-4 md:h-14">
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-0 px-4 py-3 md:h-12">
         {/* Left: Copyright */}
-        <p className="text-sm text-gray-500 order-2 md:order-1">
+        <p className="text-xs text-slate-500 order-2 md:order-1">
           © 2025 Banatie. Built for builders who create.
         </p>
 
         {/* Right: Contextual Links */}
-        <nav aria-label="Footer navigation" className="flex items-center gap-6 order-1 md:order-2">
+        <nav aria-label="Footer navigation" className="flex items-center gap-4 order-1 md:order-2">
           <Link
             href={links.docs}
-            className="text-sm text-gray-500 hover:text-white transition-colors min-h-[44px] flex items-center"
+            className="text-xs text-slate-500 hover:text-white transition-colors flex items-center gap-1.5"
           >
+            <BookOpen className="w-3.5 h-3.5" />
             Documentation
           </Link>
           <Link
             href={links.api}
-            className="text-sm text-gray-500 hover:text-white transition-colors min-h-[44px] flex items-center"
+            className="text-xs text-slate-500 hover:text-white transition-colors flex items-center gap-1.5"
           >
+            <Code className="w-3.5 h-3.5" />
             API Reference
           </Link>
         </nav>
diff --git a/apps/landing/src/components/layout/lab/LabLayout.tsx b/apps/landing/src/components/layout/lab/LabLayout.tsx
index 4dd48bd..86d17c0 100644
--- a/apps/landing/src/components/layout/lab/LabLayout.tsx
+++ b/apps/landing/src/components/layout/lab/LabLayout.tsx
@@ -61,12 +61,12 @@ export const LabLayout = ({ children }: LabLayoutProps) => {
   return (
     <ThreeColumnLayout
       left={
-        <div className={`border-r border-white/10 bg-slate-950/50 backdrop-blur-sm ${containerHeight} overflow-y-auto transition-all duration-300`}>
+        <div className={`border-r border-slate-800 bg-slate-950 ${containerHeight} overflow-y-auto transition-all duration-300`}>
           <LabSidebar />
         </div>
       }
       center={
-        <div className={`flex flex-col ${containerHeight} transition-all duration-300`}>
+        <div className={`flex flex-col ${containerHeight} bg-[#0f121d] transition-all duration-300`}>
           <div ref={contentRef} className="flex-1 overflow-y-auto min-h-0">{children}</div>
           <LabFooter />
         </div>
diff --git a/apps/landing/src/components/layout/lab/LabSidebar.tsx b/apps/landing/src/components/layout/lab/LabSidebar.tsx
index 9467eba..ed50dff 100644
--- a/apps/landing/src/components/layout/lab/LabSidebar.tsx
+++ b/apps/landing/src/components/layout/lab/LabSidebar.tsx
@@ -4,22 +4,26 @@
  * Lab Sidebar - Filter Panel
  *
  * Narrow left sidebar for filtering lab content.
- * Matches DocsSidebar visual style with collapsible filter sections.
+ * Clean, work-focused design with Lucide icons and slate palette.
+ * Uses Shadcn UI Collapsible for expandable sections.
  *
  * Features:
  * - Multiple filter groups (Status, Date Range, Source Type)
- * - Collapsible sections
- * - Checkbox/radio button controls
- * - Clean, minimal design
+ * - Collapsible sections with Shadcn UI and Lucide icons
+ * - Checkbox/radio button controls (Shadcn components)
+ * - Slate color palette (blue-tinted gray)
  */
 
-import { useState } from 'react';
+import { useState, type ElementType } from 'react';
+import { Activity, Calendar, Palette, ChevronRight, RotateCcw, Layers, Sliders, Tag, Folder, Star, Clock } from 'lucide-react';
 import { FilterPlaceholder } from '@/components/lab/FilterPlaceholder';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Button } from '@/components/ui/button';
 
 type FilterGroupProps = {
   id: string;
   label: string;
-  icon: string;
+  icon: ElementType;
   options: Array<{ id: string; label: string; count?: number }>;
   multiSelect?: boolean;
 };
@@ -28,7 +32,7 @@ const filterGroups: FilterGroupProps[] = [
   {
     id: 'status',
     label: 'Status',
-    icon: '📊',
+    icon: Activity,
     options: [
       { id: 'all', label: 'All', count: 127 },
       { id: 'completed', label: 'Completed', count: 98 },
@@ -40,7 +44,7 @@ const filterGroups: FilterGroupProps[] = [
   {
     id: 'date',
     label: 'Date Range',
-    icon: '📅',
+    icon: Calendar,
     options: [
       { id: 'today', label: 'Today', count: 12 },
       { id: 'week', label: 'Last 7 days', count: 45 },
@@ -52,7 +56,7 @@ const filterGroups: FilterGroupProps[] = [
   {
     id: 'source',
     label: 'Source Type',
-    icon: '🎨',
+    icon: Palette,
     options: [
       { id: 'text', label: 'Text-to-Image', count: 78 },
       { id: 'upload', label: 'Uploads', count: 34 },
@@ -60,6 +64,75 @@ const filterGroups: FilterGroupProps[] = [
     ],
     multiSelect: true,
   },
+  {
+    id: 'model',
+    label: 'Model',
+    icon: Layers,
+    options: [
+      { id: 'gemini-2', label: 'Gemini 2.0', count: 45 },
+      { id: 'gemini-1.5', label: 'Gemini 1.5', count: 62 },
+      { id: 'imagen-3', label: 'Imagen 3', count: 20 },
+    ],
+    multiSelect: false,
+  },
+  {
+    id: 'quality',
+    label: 'Quality',
+    icon: Sliders,
+    options: [
+      { id: 'high', label: 'High (1024px)', count: 34 },
+      { id: 'medium', label: 'Medium (768px)', count: 56 },
+      { id: 'low', label: 'Low (512px)', count: 37 },
+    ],
+    multiSelect: false,
+  },
+  {
+    id: 'tags',
+    label: 'Tags',
+    icon: Tag,
+    options: [
+      { id: 'portrait', label: 'Portrait', count: 23 },
+      { id: 'landscape', label: 'Landscape', count: 31 },
+      { id: 'product', label: 'Product', count: 18 },
+      { id: 'abstract', label: 'Abstract', count: 12 },
+      { id: 'architecture', label: 'Architecture', count: 9 },
+    ],
+    multiSelect: true,
+  },
+  {
+    id: 'folder',
+    label: 'Folder',
+    icon: Folder,
+    options: [
+      { id: 'default', label: 'Default', count: 89 },
+      { id: 'favorites', label: 'Favorites', count: 15 },
+      { id: 'archive', label: 'Archive', count: 23 },
+    ],
+    multiSelect: false,
+  },
+  {
+    id: 'rating',
+    label: 'Rating',
+    icon: Star,
+    options: [
+      { id: '5star', label: '5 Stars', count: 12 },
+      { id: '4star', label: '4 Stars', count: 28 },
+      { id: '3star', label: '3 Stars', count: 45 },
+      { id: 'unrated', label: 'Unrated', count: 42 },
+    ],
+    multiSelect: true,
+  },
+  {
+    id: 'duration',
+    label: 'Generation Time',
+    icon: Clock,
+    options: [
+      { id: 'fast', label: '< 5 seconds', count: 67 },
+      { id: 'medium', label: '5-15 seconds', count: 43 },
+      { id: 'slow', label: '> 15 seconds', count: 17 },
+    ],
+    multiSelect: false,
+  },
 ];
 
 export const LabSidebar = () => {
@@ -74,61 +147,64 @@ export const LabSidebar = () => {
   const isExpanded = (id: string) => expandedSections.includes(id);
 
   return (
-    <aside className="h-full bg-slate-950 border-r border-white/10" aria-label="Lab filters">
+    <aside className="h-full bg-slate-950 border-r border-slate-800" aria-label="Lab filters">
       {/* Header */}
-      <div className="p-6 border-b border-slate-800">
-        <h2 className="text-lg font-semibold text-white">Filters</h2>
-        <p className="text-xs text-gray-500 mt-1">Refine your results</p>
+      <div className="p-4 border-b border-slate-800">
+        <h2 className="text-sm font-semibold text-white">Filters</h2>
+        <p className="text-xs text-slate-500 mt-0.5">Refine your results</p>
       </div>
 
       {/* Filter Groups */}
-      <div className="p-4 space-y-4">
+      <div className="p-3 space-y-3">
         {filterGroups.map((group) => {
           const expanded = isExpanded(group.id);
+          const Icon = group.icon;
 
           return (
-            <div key={group.id} className="border-b border-slate-800 pb-4 last:border-b-0">
+            <Collapsible
+              key={group.id}
+              open={expanded}
+              onOpenChange={() => toggleSection(group.id)}
+              className="border-b border-slate-800 pb-3 last:border-b-0"
+            >
               {/* Section Header */}
-              <button
-                onClick={() => toggleSection(group.id)}
-                className="w-full flex items-center justify-between px-2 py-2 rounded-lg text-sm transition-colors text-gray-400 hover:text-white hover:bg-white/5"
-                aria-expanded={expanded}
-              >
-                <span className="flex items-center gap-2">
-                  <span className="text-base">{group.icon}</span>
-                  <span className="font-medium">{group.label}</span>
-                </span>
-                <svg
-                  className={`w-4 h-4 transition-transform ${expanded ? 'rotate-90' : ''}`}
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
+              <CollapsibleTrigger asChild>
+                <button
+                  className="w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-sm transition-colors text-slate-400 hover:text-white hover:bg-slate-800/50"
                 >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              </button>
+                  <span className="flex items-center gap-2">
+                    <Icon className="w-4 h-4" />
+                    <span className="font-medium">{group.label}</span>
+                  </span>
+                  <ChevronRight
+                    className={`w-4 h-4 transition-transform duration-200 ${expanded ? 'rotate-90' : ''}`}
+                  />
+                </button>
+              </CollapsibleTrigger>
 
               {/* Filter Options */}
-              {expanded && (
+              <CollapsibleContent>
                 <FilterPlaceholder
                   options={group.options}
                   multiSelect={group.multiSelect}
                   groupId={group.id}
                 />
-              )}
-            </div>
+              </CollapsibleContent>
+            </Collapsible>
           );
         })}
       </div>
 
       {/* Bottom Actions */}
-      <div className="mt-auto p-4 border-t border-slate-800">
-        <button
-          className="w-full px-3 py-2 text-sm text-gray-500 hover:text-gray-300 transition-colors rounded-lg hover:bg-white/5"
+      <div className="mt-auto p-3 border-t border-slate-800">
+        <Button
+          variant="ghost"
+          className="w-full flex items-center justify-center gap-1.5 px-3 py-2 text-sm text-slate-500 hover:text-slate-300 hover:bg-slate-800/50"
           aria-label="Reset all filters"
         >
+          <RotateCcw className="w-3.5 h-3.5" />
           Reset Filters
-        </button>
+        </Button>
       </div>
     </aside>
   );
diff --git a/apps/landing/src/components/ui/button.tsx b/apps/landing/src/components/ui/button.tsx
new file mode 100644
index 0000000..21409a0
--- /dev/null
+++ b/apps/landing/src/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+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-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/apps/landing/src/components/ui/card.tsx b/apps/landing/src/components/ui/card.tsx
new file mode 100644
index 0000000..681ad98
--- /dev/null
+++ b/apps/landing/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/apps/landing/src/components/ui/checkbox.tsx b/apps/landing/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..cb0b07b
--- /dev/null
+++ b/apps/landing/src/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/apps/landing/src/components/ui/collapsible.tsx b/apps/landing/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..ae9fad0
--- /dev/null
+++ b/apps/landing/src/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/apps/landing/src/components/ui/input.tsx b/apps/landing/src/components/ui/input.tsx
new file mode 100644
index 0000000..8916905
--- /dev/null
+++ b/apps/landing/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/apps/landing/src/components/ui/label.tsx b/apps/landing/src/components/ui/label.tsx
new file mode 100644
index 0000000..fb5fbc3
--- /dev/null
+++ b/apps/landing/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/apps/landing/src/components/ui/radio-group.tsx b/apps/landing/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..5e6778c
--- /dev/null
+++ b/apps/landing/src/components/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/apps/landing/src/components/ui/select.tsx b/apps/landing/src/components/ui/select.tsx
new file mode 100644
index 0000000..25e5439
--- /dev/null
+++ b/apps/landing/src/components/ui/select.tsx
@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          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
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/apps/landing/src/components/ui/textarea.tsx b/apps/landing/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7f21b5e
--- /dev/null
+++ b/apps/landing/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/apps/landing/src/lib/utils.ts b/apps/landing/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/apps/landing/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 86b1387..e48d736 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -196,6 +196,33 @@ importers:
       '@banatie/database':
         specifier: workspace:*
         version: link:../../packages/database
+      '@radix-ui/react-checkbox':
+        specifier: ^1.3.3
+        version: 1.3.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.12
+        version: 1.1.12(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-label':
+        specifier: ^2.1.8
+        version: 2.1.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-radio-group':
+        specifier: ^1.3.8
+        version: 1.3.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@19.1.16)(react@19.1.0)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.400.0
+        version: 0.400.0(react@19.1.0)
       next:
         specifier: 15.5.4
         version: 15.5.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -205,6 +232,9 @@ importers:
       react-dom:
         specifier: 19.1.0
         version: 19.1.0(react@19.1.0)
+      tailwind-merge:
+        specifier: ^3.4.0
+        version: 3.4.0
     devDependencies:
       '@tailwindcss/postcss':
         specifier: ^4
@@ -221,6 +251,9 @@ importers:
       tailwindcss:
         specifier: ^4
         version: 4.1.13
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
       typescript:
         specifier: ^5
         version: 5.9.2
@@ -1410,6 +1443,358 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.3':
+    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.12':
+    resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.8':
+    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.3.8':
+    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@react-aria/focus@3.21.1':
     resolution: {integrity: sha512-hmH1IhHlcQ2lSIxmki1biWzMbGgnhdxJUM0MFfzc71Rv6YAzhlx4kX3GYn4VNcjCeb6cdPv4RZ5vunV4kgMZYQ==}
     peerDependencies:
@@ -2150,6 +2535,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
@@ -2383,6 +2772,9 @@ packages:
   cjs-module-lexer@1.4.3:
     resolution: {integrity: sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -2610,6 +3002,9 @@ packages:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   dezalgo@1.0.4:
     resolution: {integrity: sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==}
 
@@ -3200,6 +3595,10 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   get-package-type@0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
@@ -4385,12 +4784,42 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-smooth@4.0.4:
     resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-transition-group@4.4.5:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -4809,6 +5238,9 @@ packages:
   tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
+  tailwind-merge@3.4.0:
+    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+
   tailwindcss@3.4.17:
     resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
     engines: {node: '>=14.0.0'}
@@ -4943,6 +5375,9 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -5029,6 +5464,26 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-sync-external-store@1.5.0:
     resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
     peerDependencies:
@@ -5776,6 +6231,12 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  '@floating-ui/react-dom@2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   '@floating-ui/react@0.26.28(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -6213,6 +6674,326 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-label@2.1.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.2(@types/react@19.1.16)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-slot@1.2.4(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.16)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.16)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.16)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.16))(@types/react@19.1.16)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+      '@types/react-dom': 19.1.9(@types/react@19.1.16)
+
+  '@radix-ui/rect@1.1.1': {}
+
   '@react-aria/focus@3.21.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@react-aria/interactions': 3.25.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -7006,6 +7787,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.2: {}
 
   array-buffer-byte-length@1.0.2:
@@ -7295,6 +8080,10 @@ snapshots:
 
   cjs-module-lexer@1.4.3: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   client-only@0.0.1: {}
 
   cliui@8.0.1:
@@ -7497,6 +8286,8 @@ snapshots:
 
   detect-newline@3.1.0: {}
 
+  detect-node-es@1.1.0: {}
+
   dezalgo@1.0.4:
     dependencies:
       asap: 2.0.6
@@ -8288,6 +9079,8 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-package-type@0.1.0: {}
 
   get-proto@1.0.1:
@@ -9192,6 +9985,10 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  lucide-react@0.400.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   magic-string@0.30.19:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -9655,6 +10452,25 @@ snapshots:
 
   react-is@18.3.1: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@19.1.16)(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-style-singleton: 2.2.3(@types/react@19.1.16)(react@19.1.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  react-remove-scroll@2.7.2(@types/react@19.1.16)(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-remove-scroll-bar: 2.3.8(@types/react@19.1.16)(react@19.1.0)
+      react-style-singleton: 2.2.3(@types/react@19.1.16)(react@19.1.0)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.1.16)(react@19.1.0)
+      use-sidecar: 1.1.3(@types/react@19.1.16)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.16
+
   react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       fast-equals: 5.3.2
@@ -9663,6 +10479,14 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
+  react-style-singleton@2.2.3(@types/react@19.1.16)(react@19.1.0):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.1.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.16
+
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.28.4
@@ -10189,6 +11013,8 @@ snapshots:
 
   tabbable@6.2.0: {}
 
+  tailwind-merge@3.4.0: {}
+
   tailwindcss@3.4.17:
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -10325,6 +11151,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  tw-animate-css@1.4.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -10437,6 +11265,21 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-callback-ref@1.3.3(@types/react@19.1.16)(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.16
+
+  use-sidecar@1.1.3(@types/react@19.1.16)(react@19.1.0):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.1.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.16
+
   use-sync-external-store@1.5.0(react@18.3.1):
     dependencies:
       react: 18.3.1