feat: Add dark mode toggle and update UI components with theme-aware styling.

dev.log

@@ -516,3 +516,314 @@ Re-triggering analysis for 18BsJxwYETw (status: pending)
  POST /dashboard 200 in 2440ms
  GET /api/auth/get-session 200 in 677ms
  POST /dashboard 200 in 765ms
+ ✓ Compiled in 220ms
+ ✓ Compiled in 395ms
+ ✓ Compiled in 100ms
+ ✓ Compiled in 346ms
+ GET /api/auth/get-session 200 in 1467ms
+ ✓ Compiled /dashboard in 29ms
+ GET /api/auth/get-session 200 in 662ms
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+ GET /dashboard 200 in 3416ms
+ GET /dashboard 200 in 2649ms
+ ✓ Compiled / in 59ms
+Cache miss - fetching trending content from database
+Cache miss - fetching featured creators from database
+ GET / 200 in 2106ms
+ ✓ Compiled /_not-found/page in 298ms
+ GET /placeholder-product.png 404 in 357ms
+ ⨯ The requested resource isn't a valid image for /placeholder-product.png received null
+ ✓ Compiled in 111ms
+Cache miss - fetching trending content from database
+Cache miss - fetching featured creators from database
+ ✓ Compiled in 239ms
+ GET / 200 in 388ms
+ GET /api/auth/get-session 200 in 1568ms
+ ✓ Compiled /dashboard in 41ms
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+ ✓ Compiled in 91ms
+ GET /dashboard 200 in 3161ms
+ ✓ Compiled in 492ms
+ ✓ Compiled in 108ms
+ ✓ Compiled in 123ms
+ ✓ Compiled in 135ms
+ ✓ Compiled in 93ms
+ ✓ Compiled in 161ms
+ ✓ Compiled in 87ms
+Cache miss - fetching trending content from database
+Cache miss - fetching featured creators from database
+ GET / 200 in 1940ms
+ GET /favicon.ico?favicon.0b3bf435.ico 200 in 380ms
+ GET /api/auth/get-session 200 in 1456ms
+ GET /api/auth/get-session 200 in 1503ms
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+ GET /dashboard 200 in 4082ms
+ GET /api/auth/get-session 200 in 562ms
+ GET /api/auth/get-session 200 in 557ms
+ POST /dashboard 200 in 1638ms
+ GET /api/auth/get-session 200 in 1418ms
+ ○ Compiling /dashboard/moderation ...
+ ✓ Compiled /dashboard/moderation in 593ms
+ GET /dashboard/moderation 200 in 2911ms
+ GET /api/auth/get-session 200 in 620ms
+ POST /dashboard 200 in 1723ms
+ GET /api/auth/get-session 200 in 627ms
+ POST /dashboard 200 in 765ms
+ GET /api/auth/get-session 200 in 1451ms
+ ✓ Compiled in 465ms
+ ✓ Compiled / in 117ms
+Cache miss - fetching trending content from database
+Cache miss - fetching featured creators from database
+Cache miss - fetching trending content from database
+Cache miss - fetching featured creators from database
+ GET / 200 in 1111ms
+ GET / 200 in 1685ms
+Cache miss - fetching trending content from database
+Cache miss - fetching featured creators from database
+ ✓ Compiled in 130ms
+ GET /api/auth/get-session 200 in 1354ms
+ GET / 200 in 223ms
+ ✓ Compiled /dashboard in 39ms
+ GET /api/auth/get-session 200 in 741ms
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+ GET /api/auth/get-session 200 in 557ms
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+ GET /dashboard 200 in 2891ms
+ GET /dashboard 200 in 2113ms
+ GET /dashboard 200 in 2737ms
+ ✓ Compiled /showcase/[videoId] in 48ms
+Self-healing: Re-triggering stuck analysis for video iumWFCvrLLY
+[ingestAndAnalyze] START - videoId: iumWFCvrLLY, userId: undefined, skipAnalysis: undefined
+[ingestAndAnalyze] Fetching oembed for iumWFCvrLLY...
+ GET /showcase/iumWFCvrLLY 200 in 1568ms
+[ingestAndAnalyze] oembed fetch failed with status 403. Trying API fallback...
+[ingestAndAnalyze] Trying full API fallback for iumWFCvrLLY...
+YouTube API fallback failed: Error: Video not found in YouTube API
+    at ShowcaseService.ingestAndAnalyze (src/features/vault/services/showcase.service.ts:411:35)
+  409 |
+  410 |                         if (!videoApiData.items?.[0]) {
+> 411 |                             throw new Error('Video not found in YouTube API');
+      |                                   ^
+  412 |                         }
+  413 |
+  414 |                         const snippet = videoApiData.items[0].snippet;
+Showcase ingest error (detailed): {
+  error: Error: Failed to fetch video metadata via API
+      at ShowcaseService.ingestAndAnalyze (src/features/vault/services/showcase.service.ts:434:31)
+    432 |                     } catch (apiError) {
+    433 |                         console.error('YouTube API fallback failed:', apiError);
+  > 434 |                         throw new Error('Failed to fetch video metadata via API');
+        |                               ^
+    435 |                     }
+    436 |                 } else {
+    437 |                     throw new Error('Video unavailable (OEmbed failed and no API key configured)');,
+  videoId: 'iumWFCvrLLY',
+  stack: 'Error: Failed to fetch video metadata via API\n' +
+    '    at ShowcaseService.ingestAndAnalyze (/Users/vijaykrishnan/Dev/Vault/.next/server/chunks/ssr/[root-of-the-server]__85a520ff._.js:2202:31)\n' +
+    '    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)'
+}
+ GET /favicon.ico?favicon.0b3bf435.ico 200 in 270ms
+ GET /api/auth/get-session 200 in 565ms
+ POST /dashboard 200 in 805ms
+ GET /api/auth/get-session 200 in 664ms
+ POST /dashboard 200 in 809ms
+ ✓ Compiled in 145ms
+ ✓ Compiled in 127ms
+Self-healing: Re-triggering stuck analysis for video UzVH2TzvwiU
+[ingestAndAnalyze] START - videoId: UzVH2TzvwiU, userId: undefined, skipAnalysis: undefined
+[ingestAndAnalyze] Fetching oembed for UzVH2TzvwiU...
+ GET /showcase/UzVH2TzvwiU 200 in 1180ms
+[ingestAndAnalyze] oembed fetch failed with status 403. Trying API fallback...
+[ingestAndAnalyze] Trying full API fallback for UzVH2TzvwiU...
+YouTube API fallback failed: Error: Video not found in YouTube API
+    at ShowcaseService.ingestAndAnalyze (src/features/vault/services/showcase.service.ts:411:35)
+  409 |
+  410 |                         if (!videoApiData.items?.[0]) {
+> 411 |                             throw new Error('Video not found in YouTube API');
+      |                                   ^
+  412 |                         }
+  413 |
+  414 |                         const snippet = videoApiData.items[0].snippet;
+Showcase ingest error (detailed): {
+  error: Error: Failed to fetch video metadata via API
+      at ShowcaseService.ingestAndAnalyze (src/features/vault/services/showcase.service.ts:434:31)
+    432 |                     } catch (apiError) {
+    433 |                         console.error('YouTube API fallback failed:', apiError);
+  > 434 |                         throw new Error('Failed to fetch video metadata via API');
+        |                               ^
+    435 |                     }
+    436 |                 } else {
+    437 |                     throw new Error('Video unavailable (OEmbed failed and no API key configured)');,
+  videoId: 'UzVH2TzvwiU',
+  stack: 'Error: Failed to fetch video metadata via API\n' +
+    '    at ShowcaseService.ingestAndAnalyze (/Users/vijaykrishnan/Dev/Vault/.next/server/chunks/ssr/[root-of-the-server]__85a520ff._.js:2202:31)\n' +
+    '    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)'
+}
+ ✓ Compiled in 118ms
+ GET /api/auth/get-session 200 in 1476ms
+ POST /dashboard 200 in 2987ms
+ GET /api/auth/get-session 200 in 648ms
+ POST /dashboard 200 in 1012ms
+Self-healing: Re-triggering stuck analysis for video fqXkCp2zj30
+[ingestAndAnalyze] START - videoId: fqXkCp2zj30, userId: undefined, skipAnalysis: undefined
+[ingestAndAnalyze] Fetching oembed for fqXkCp2zj30...
+ GET /showcase/fqXkCp2zj30 200 in 1424ms
+[ingestAndAnalyze] oembed fetch failed with status 403. Trying API fallback...
+[ingestAndAnalyze] Trying full API fallback for fqXkCp2zj30...
+YouTube API fallback failed: Error: Video not found in YouTube API
+    at ShowcaseService.ingestAndAnalyze (src/features/vault/services/showcase.service.ts:411:35)
+  409 |
+  410 |                         if (!videoApiData.items?.[0]) {
+> 411 |                             throw new Error('Video not found in YouTube API');
+      |                                   ^
+  412 |                         }
+  413 |
+  414 |                         const snippet = videoApiData.items[0].snippet;
+Showcase ingest error (detailed): {
+  error: Error: Failed to fetch video metadata via API
+      at ShowcaseService.ingestAndAnalyze (src/features/vault/services/showcase.service.ts:434:31)
+    432 |                     } catch (apiError) {
+    433 |                         console.error('YouTube API fallback failed:', apiError);
+  > 434 |                         throw new Error('Failed to fetch video metadata via API');
+        |                               ^
+    435 |                     }
+    436 |                 } else {
+    437 |                     throw new Error('Video unavailable (OEmbed failed and no API key configured)');,
+  videoId: 'fqXkCp2zj30',
+  stack: 'Error: Failed to fetch video metadata via API\n' +
+    '    at ShowcaseService.ingestAndAnalyze (/Users/vijaykrishnan/Dev/Vault/.next/server/chunks/ssr/[root-of-the-server]__85a520ff._.js:2202:31)\n' +
+    '    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)'
+}
+ GET /api/auth/get-session 200 in 824ms
+ POST /dashboard 200 in 811ms
+ GET /api/auth/get-session 200 in 692ms
+ POST /dashboard 200 in 762ms
+ ✓ Compiled in 232ms
+Cache miss - fetching trending content from database
+Cache miss - fetching featured creators from database
+ GET / 200 in 1636ms
+ GET /api/auth/get-session 200 in 1868ms
+ ✓ Compiled /dashboard in 100ms
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+ GET /dashboard 200 in 3179ms
+ GET /api/auth/get-session 200 in 1457ms
+ GET /api/auth/get-session 200 in 563ms
+[quickAddVideoAction] Video ID parsed: mWkXURsMAMk. Calling ingestAndAnalyze with skipAnalysis: true...
+[ingestAndAnalyze] START - videoId: mWkXURsMAMk, userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw, skipAnalysis: true
+[ingestAndAnalyze] Fetching oembed for mWkXURsMAMk...
+[ingestAndAnalyze] OEmbed Metadata fetched: ✅ Best eReader 2026 [Watch This Before You Make a Choice!]
+[ingestAndAnalyze] Generated slug: theforemostpicks2026 for author: Foremost Picks
+[ingestAndAnalyze] Slug 'theforemostpicks2026' already taken. Generating unique variation.
+[ingestAndAnalyze] Creating NEW channel for creatorId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+[ingestAndAnalyze] Attempting to prepopulate products from description for mWkXURsMAMk...
+[prepopulate] Found 6 potential links to process.
+[prepopulate] Processing link: https://geni.us/Y2An4
+METADATA_FETCH: Unknown domain geni.us, attempting redirect resolution...
+REDIRECT_RESOLVE: Checking https://geni.us/Y2An4
+REDIRECT_RESOLVE: Resolved https://geni.us/Y2An4 -> https://www.amazon.com/dp/B0DSZWF122?tag=top5pickksof-20&geniuslink=true
+METADATA_FETCH: Initializing for www.amazon.com
+METADATA_FETCH: Service credentials missing, trying FallbackScraper for amazon
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+METADATA_FETCH: FallbackScraper completed for amazon {
+  hasImage: true,
+  imageUrl: 'https://m.media-amazon.com/images/I/51lam7v+AwL._AC_SL1000_.jpg',
+  hasName: true
+}
+Failed to set fetch cache https://www.amazon.com/dp/B0DSZWF122?tag=top5pickksof-20&geniuslink=true [Error: Failed to set Next.js data cache for https://www.amazon.com/dp/B0DSZWF122?tag=top5pickksof-20&geniuslink=true, items over 2MB can not be cached (2766645 bytes)]
+[prepopulate] Successfully added product: BOOX Palma2 Mobile ePaper eBook Reader Fingerprint Recognition Smart Button Dual Microphones Off White
+[prepopulate] Processing link: https://geni.us/vBxa228
+METADATA_FETCH: Unknown domain geni.us, attempting redirect resolution...
+REDIRECT_RESOLVE: Checking https://geni.us/vBxa228
+REDIRECT_RESOLVE: Resolved https://geni.us/vBxa228 -> https://www.amazon.com/dp/B0CFPJYX7P?tag=top5pickksof-20&geniuslink=true
+METADATA_FETCH: Initializing for www.amazon.com
+METADATA_FETCH: Service credentials missing, trying FallbackScraper for amazon
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+METADATA_FETCH: FallbackScraper completed for amazon {
+  hasImage: true,
+  imageUrl: 'https://m.media-amazon.com/images/I/71YwNBmu+aL._AC_SL1500_.jpg',
+  hasName: true
+}
+Failed to set fetch cache https://www.amazon.com/dp/B0CFPJYX7P?tag=top5pickksof-20&geniuslink=true [Error: Failed to set Next.js data cache for https://www.amazon.com/dp/B0CFPJYX7P?tag=top5pickksof-20&geniuslink=true, items over 2MB can not be cached (2648509 bytes)]
+[prepopulate] Successfully added product: Amazon Kindle Paperwhite 16GB (newest model) – 20% faster, with new 7" glare-free display and weeks of battery life – Black
+[prepopulate] Processing link: https://geni.us/ZNv6u
+METADATA_FETCH: Unknown domain geni.us, attempting redirect resolution...
+REDIRECT_RESOLVE: Checking https://geni.us/ZNv6u
+REDIRECT_RESOLVE: Resolved https://geni.us/ZNv6u -> https://www.amazon.com/dp/B0CZXWGK79?tag=top5pickksof-20&geniuslink=true
+METADATA_FETCH: Initializing for www.amazon.com
+METADATA_FETCH: Service credentials missing, trying FallbackScraper for amazon
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+METADATA_FETCH: FallbackScraper completed for amazon {
+  hasImage: true,
+  imageUrl: 'https://m.media-amazon.com/images/I/61Y4ELO5kOL._AC_SL1080_.jpg',
+  hasName: true
+}
+Failed to set fetch cache https://www.amazon.com/dp/B0CZXWGK79?tag=top5pickksof-20&geniuslink=true [Error: Failed to set Next.js data cache for https://www.amazon.com/dp/B0CZXWGK79?tag=top5pickksof-20&geniuslink=true, items over 2MB can not be cached (3351549 bytes)]
+[prepopulate] Successfully added product: Kobo Libra Colour
+[prepopulate] Processing link: https://geni.us/2xbHMQ
+METADATA_FETCH: Unknown domain geni.us, attempting redirect resolution...
+REDIRECT_RESOLVE: Checking https://geni.us/2xbHMQ
+REDIRECT_RESOLVE: Resolved https://geni.us/2xbHMQ -> https://www.amazon.com/dp/B0CGVSKR1G?tag=top5pickksof-20&geniuslink=true
+METADATA_FETCH: Initializing for www.amazon.com
+METADATA_FETCH: Service credentials missing, trying FallbackScraper for amazon
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+METADATA_FETCH: FallbackScraper completed for amazon {
+  hasImage: true,
+  imageUrl: 'https://m.media-amazon.com/images/I/71KFrD7KfCL._AC_SL1500_.jpg',
+  hasName: true
+}
+Failed to set fetch cache https://www.amazon.com/dp/B0CGVSKR1G?tag=top5pickksof-20&geniuslink=true [Error: Failed to set Next.js data cache for https://www.amazon.com/dp/B0CGVSKR1G?tag=top5pickksof-20&geniuslink=true, items over 2MB can not be cached (2513853 bytes)]
+[prepopulate] Successfully added product: Amazon Kindle Colorsoft 16 GB (newest model) – With color display and adjustable warm light – No Ads – Black
+[prepopulate] Processing link: https://geni.us/TGrtk
+METADATA_FETCH: Unknown domain geni.us, attempting redirect resolution...
+REDIRECT_RESOLVE: Checking https://geni.us/TGrtk
+REDIRECT_RESOLVE: Resolved https://geni.us/TGrtk -> https://www.amazon.com/dp/B0CZ9T2C6B?tag=top5pickksof-20&geniuslink=true
+METADATA_FETCH: Initializing for www.amazon.com
+METADATA_FETCH: Service credentials missing, trying FallbackScraper for amazon
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+METADATA_FETCH: FallbackScraper completed for amazon {
+  hasImage: true,
+  imageUrl: 'https://m.media-amazon.com/images/I/81xUpeu-LzL._AC_SL1500_.jpg',
+  hasName: true
+}
+Failed to set fetch cache https://www.amazon.com/dp/B0CZ9T2C6B?tag=top5pickksof-20&geniuslink=true [Error: Failed to set Next.js data cache for https://www.amazon.com/dp/B0CZ9T2C6B?tag=top5pickksof-20&geniuslink=true, items over 2MB can not be cached (2630133 bytes)]
+[prepopulate] Successfully added product: Amazon Kindle Scribe (64GB) - Your notes, documents and books, all in one place. With built-in AI notebook summarization. Includes Premium Pen - Tungsten
+[prepopulate] Processing link: https://geni.us/seABI
+METADATA_FETCH: Unknown domain geni.us, attempting redirect resolution...
+REDIRECT_RESOLVE: Checking https://geni.us/seABI
+REDIRECT_RESOLVE: Resolved https://geni.us/seABI -> https://www.amazon.com/dp/B0DG9ZXWMK?tag=top5pickksof-20&geniuslink=true
+METADATA_FETCH: Initializing for www.amazon.com
+METADATA_FETCH: Service credentials missing, trying FallbackScraper for amazon
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+Could not parse CSS stylesheet
+METADATA_FETCH: FallbackScraper completed for amazon {
+  hasImage: true,
+  imageUrl: 'https://m.media-amazon.com/images/I/71dzWnEOQvL._AC_SL1500_.jpg',
+  hasName: true
+}
+Failed to set fetch cache https://www.amazon.com/dp/B0DG9ZXWMK?tag=top5pickksof-20&geniuslink=true [Error: Failed to set Next.js data cache for https://www.amazon.com/dp/B0DG9ZXWMK?tag=top5pickksof-20&geniuslink=true, items over 2MB can not be cached (3577397 bytes)]
+[prepopulate] Successfully added product: reMarkable Paper Pro Bundle – Includes 11.8” reMarkable Paper Tablet, and Marker Plus Pen with Eraser
+[quickAddVideoAction] ingestAndAnalyze result for mWkXURsMAMk: { success: true }
+ POST /dashboard 200 in 21445ms
+ GET /showcase/mWkXURsMAMk 200 in 1619ms
+ GET /showcase/mWkXURsMAMk 200 in 1565ms
+ ✓ Compiled /register in 299ms
+ GET /register?videoId=mWkXURsMAMk 200 in 335ms

src/app/dashboard/page.tsx

@@ -174,17 +174,20 @@ export default async function DashboardPage({
                 {/* Key Metrics Row */}
                 <KeyMetricsRow />
 
-                {/* Quick nav */}
+                {/* Add to Vault - Full Width */}
+                <QuickAnalyzeTool />
+
+                {/* Quick Actions Row */}
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                     <Link href="/dashboard/moderation" className="group">
-                        <Card className="glass border-white/10 hover:bg-white/[0.07] transition-all duration-300 cursor-pointer">
+                        <Card className="glass hover:bg-white/[0.07] dark:hover:bg-white/[0.05] transition-all duration-300 cursor-pointer">
                             <CardContent className="flex items-center gap-4 p-4">
-                                <div className="p-2.5 bg-white/5 rounded-lg border border-white/10 group-hover:scale-110 transition-transform">
+                                <div className="p-2.5 bg-background border border-border group-hover:scale-110 transition-transform rounded-lg">
                                     <ShieldCheck className="h-5 w-5 text-amber-400" />
                                 </div>
                                 <div className="flex-1 min-w-0">
                                     <p className="text-sm font-medium">Product Review</p>
-                                    <p className="text-xs text-muted-foreground">Review AI-detected products</p>
+                                    <p className="text-xs text-muted-foreground">Review AI detections</p>
                                 </div>
                                 {pendingCount > 0 && (
                                     <Badge className="bg-amber-500 text-white text-xs">{pendingCount}</Badge>
@@ -192,11 +195,12 @@ export default async function DashboardPage({
                             </CardContent>
                         </Card>
                     </Link>
+
                     {channels.length > 0 && channels[0].creatorSlug && (
                         <Link href={`/vault/${channels[0].creatorSlug}`} className="group">
-                            <Card className="glass border-white/10 hover:bg-white/[0.07] transition-all duration-300 cursor-pointer">
+                            <Card className="glass hover:bg-white/[0.07] dark:hover:bg-white/[0.05] transition-all duration-300 cursor-pointer">
                                 <CardContent className="flex items-center gap-4 p-4">
-                                    <div className="p-2.5 bg-white/5 rounded-lg border border-white/10 group-hover:scale-110 transition-transform">
+                                    <div className="p-2.5 bg-background border border-border group-hover:scale-110 transition-transform rounded-lg">
                                         <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
@@ -204,7 +208,7 @@ export default async function DashboardPage({
                                     </div>
                                     <div className="flex-1 min-w-0">
                                         <p className="text-sm font-medium">View Public Vault</p>
-                                        <p className="text-xs text-muted-foreground">See your public storefront</p>
+                                        <p className="text-xs text-muted-foreground">See your storefront</p>
                                     </div>
                                 </CardContent>
                             </Card>
@@ -217,12 +221,6 @@ export default async function DashboardPage({
                     channels={channels}
                     isGoogleLinked={!!googleAccount?.accessToken}
                 />
-
-                <div className="mt-8 border-t border-white/5 pt-8">
-                    <div className="max-w-xl">
-                        <QuickAnalyzeTool />
-                    </div>
-                </div>
             </div>
 
         </div>

src/app/globals.css

@@ -103,12 +103,25 @@
 }
 
 /* Glassmorphism utility */
+:root {
+  --glass-bg: 0 0% 0% / 0.03;
+  --glass-border: 0 0% 0% / 0.08;
+}
+
+.dark {
+  --glass-bg: 0 0% 100% / 0.05;
+  --glass-border: 0 0% 100% / 0.1;
+}
+
 .glass {
-  @apply bg-white/5 backdrop-blur-md border border-white/10;
+  @apply backdrop-blur-md transition-all duration-300;
+  background-color: hsl(var(--glass-bg));
+  border: 1px solid hsl(var(--glass-border));
 }
 
 .glass-panel {
-  @apply bg-background/60 backdrop-blur-xl border border-border;
+  @apply backdrop-blur-xl border border-border transition-all duration-300;
+  @apply bg-background/60;
 }
 
 /* Animations */

src/components/auth/sign-in-form.tsx

@@ -42,7 +42,7 @@ export function SignInForm() {
                 type="button"
                 disabled={loading}
                 onClick={handleGoogleSignIn}
-                className="w-full h-11 text-base glass border-white/10 hover:bg-white/5 transition-all duration-300"
+                className="w-full h-11 text-base border-border hover:bg-secondary transition-all duration-300"
             >
                 {loading ? (
                     <Loader2 className="mr-2 h-5 w-5 animate-spin" />

src/components/auth/sign-up-form.tsx

@@ -42,7 +42,7 @@ export function SignUpForm() {
                 type="button"
                 disabled={loading}
                 onClick={handleGoogleSignIn}
-                className="w-full h-11 text-base glass border-white/10 hover:bg-white/5 transition-all duration-300"
+                className="w-full h-11 text-base border-border hover:bg-secondary transition-all duration-300"
             >
                 {loading ? (
                     <Loader2 className="mr-2 h-5 w-5 animate-spin" />

src/components/auth/user-nav.tsx

@@ -15,6 +15,8 @@ import { Button } from "@/components/ui/button";
 import { LogOut, User, LayoutDashboard, Settings } from "lucide-react";
 import Link from "next/link";
 
+import { ModeToggle } from "@/components/mode-toggle";
+
 export function UserNav() {
     const { data: session } = useSession();
     const router = useRouter();
@@ -39,48 +41,51 @@ export function UserNav() {
         .toUpperCase() || "U";
 
     return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="relative h-8 w-8 rounded-full hover:bg-transparent p-0">
-                    <Avatar className="h-8 w-8 border-2 border-primary/50 transition-all hover:border-primary ring-2 ring-primary/10">
-                        <AvatarImage src={user.image || ""} alt={user.name || "User"} />
-                        <AvatarFallback className="bg-primary text-primary-foreground font-bold">
-                            {initials}
-                        </AvatarFallback>
-                    </Avatar>
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-56 glass border-white/10" align="end" forceMount>
-                <DropdownMenuLabel className="font-normal">
-                    <div className="flex flex-col space-y-1">
-                        <p className="text-sm font-medium leading-none">{user.name}</p>
-                        <p className="text-xs leading-none text-muted-foreground">
-                            {user.email}
-                        </p>
-                    </div>
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator className="bg-white/10" />
-                <DropdownMenuItem asChild className="focus:bg-white/10 cursor-pointer">
-                    <Link href="/dashboard" className="flex w-full items-center">
-                        <LayoutDashboard className="mr-2 h-4 w-4" />
-                        <span>Dashboard</span>
-                    </Link>
-                </DropdownMenuItem>
-                <DropdownMenuItem asChild className="focus:bg-white/10 cursor-pointer">
-                    <Link href="/dashboard/settings" className="flex w-full items-center">
-                        <Settings className="mr-2 h-4 w-4" />
-                        <span>Settings</span>
-                    </Link>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator className="bg-white/10" />
-                <DropdownMenuItem
-                    onClick={handleSignOut}
-                    className="focus:bg-red-500/10 text-red-500 focus:text-red-500 cursor-pointer"
-                >
-                    <LogOut className="mr-2 h-4 w-4" />
-                    <span>Log out</span>
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
+        <div className="flex items-center gap-3">
+            <ModeToggle />
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" className="relative h-8 w-8 rounded-full hover:bg-transparent p-0">
+                        <Avatar className="h-8 w-8 border-2 border-primary/50 transition-all hover:border-primary ring-2 ring-primary/10">
+                            <AvatarImage src={user.image || ""} alt={user.name || "User"} />
+                            <AvatarFallback className="bg-primary text-primary-foreground font-bold">
+                                {initials}
+                            </AvatarFallback>
+                        </Avatar>
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56 glass border-white/10" align="end" forceMount>
+                    <DropdownMenuLabel className="font-normal">
+                        <div className="flex flex-col space-y-1">
+                            <p className="text-sm font-medium leading-none">{user.name}</p>
+                            <p className="text-xs leading-none text-muted-foreground">
+                                {user.email}
+                            </p>
+                        </div>
+                    </DropdownMenuLabel>
+                    <DropdownMenuSeparator className="bg-white/10" />
+                    <DropdownMenuItem asChild className="focus:bg-white/10 cursor-pointer">
+                        <Link href="/dashboard" className="flex w-full items-center">
+                            <LayoutDashboard className="mr-2 h-4 w-4" />
+                            <span>Dashboard</span>
+                        </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild className="focus:bg-white/10 cursor-pointer">
+                        <Link href="/dashboard/settings" className="flex w-full items-center">
+                            <Settings className="mr-2 h-4 w-4" />
+                            <span>Settings</span>
+                        </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator className="bg-white/10" />
+                    <DropdownMenuItem
+                        onClick={handleSignOut}
+                        className="focus:bg-red-500/10 text-red-500 focus:text-red-500 cursor-pointer"
+                    >
+                        <LogOut className="mr-2 h-4 w-4" />
+                        <span>Log out</span>
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
     );
 }

src/components/mode-toggle.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+    const { setTheme } = useTheme()
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
+                    <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                    <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                    <span className="sr-only">Toggle theme</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="glass border-white/10">
+                <DropdownMenuItem onClick={() => setTheme("light")} className="focus:bg-white/10 cursor-pointer">
+                    Light
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("dark")} className="focus:bg-white/10 cursor-pointer">
+                    Dark
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("system")} className="focus:bg-white/10 cursor-pointer">
+                    System
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}

src/features/analytics/components/key-metrics-row.tsx

@@ -60,19 +60,19 @@ export function KeyMetricsRow() {
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       {/* Active Items */}
       <Link href="/dashboard/moderation?status=approved" className="block">
-        <Card className="glass border-white/10 hover:bg-white/[0.07] transition-all duration-300 cursor-pointer hover:shadow-lg">
+        <Card className="glass hover:bg-white/[0.07] dark:hover:bg-white/[0.07] transition-all duration-300 cursor-pointer hover:shadow-lg">
           <CardHeader className="pb-3">
             <div className="flex items-center justify-between">
-              <CardTitle className="text-sm font-medium text-gray-400">Active Items</CardTitle>
-              <Package className="h-4 w-4 text-gray-400" />
+              <CardTitle className="text-sm font-medium text-muted-foreground">Active Items</CardTitle>
+              <Package className="h-4 w-4 text-muted-foreground" />
             </div>
           </CardHeader>
           <CardContent>
-            <div className="text-3xl font-bold text-gray-200">
+            <div className="text-3xl font-bold">
               {metricsData.activeItems}
             </div>
             <div className="flex items-center gap-1.5 mt-1">
-              <p className="text-xs text-gray-500">
+              <p className="text-xs text-muted-foreground">
                 {metricsData.activeItemsTrend > 0 ? '+' : ''}{metricsData.activeItemsTrend} this week
               </p>
             </div>
@@ -82,10 +82,10 @@ export function KeyMetricsRow() {
 
       {/* Untapped Opportunities */}
       <Link href="/dashboard/requests" className="block">
-        <Card className="glass border-white/10 hover:bg-white/[0.07] transition-all duration-300 cursor-pointer hover:shadow-lg">
+        <Card className="glass hover:bg-white/[0.07] dark:hover:bg-white/[0.07] transition-all duration-300 cursor-pointer hover:shadow-lg">
           <CardHeader className="pb-3">
             <div className="flex items-center justify-between">
-              <CardTitle className="text-sm font-medium text-gray-400">Untapped Opportunities</CardTitle>
+              <CardTitle className="text-sm font-medium text-muted-foreground">Untapped Opportunities</CardTitle>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -97,7 +97,7 @@ export function KeyMetricsRow() {
             </div>
           </CardHeader>
           <CardContent>
-            <div className="text-3xl font-bold text-gray-200">
+            <div className="text-3xl font-bold">
               {metricsData.pendingDemand}
             </div>
             <div className="flex items-center gap-1.5 mt-1">
@@ -106,7 +106,7 @@ export function KeyMetricsRow() {
                   +{metricsData.pendingDemandTrend} this week
                 </span>
               )}
-              <p className="text-xs text-gray-500">
+              <p className="text-xs text-muted-foreground">
                 review to monetize demand
               </p>
             </div>
@@ -115,13 +115,13 @@ export function KeyMetricsRow() {
       </Link>
 
       {/* Total Clicks */}
-      <Card className="glass border-white/10 hover:bg-white/[0.07] transition-all duration-300">
+      <Card className="glass hover:bg-white/[0.07] dark:hover:bg-white/[0.07] transition-all duration-300">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
-            <CardTitle className="text-sm font-medium text-gray-400">Total Clicks</CardTitle>
+            <CardTitle className="text-sm font-medium text-muted-foreground">Total Clicks</CardTitle>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              className="h-4 w-4 text-gray-400"
+              className="h-4 w-4 text-muted-foreground"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -136,7 +136,7 @@ export function KeyMetricsRow() {
           </div>
         </CardHeader>
         <CardContent>
-          <div className="text-3xl font-bold text-gray-200">
+          <div className="text-3xl font-bold">
             {metricsData.totalClicks.toLocaleString()}
           </div>
           <div className="flex items-center gap-1.5 mt-1">
@@ -145,7 +145,7 @@ export function KeyMetricsRow() {
                 {metricsData.totalClicksTrend > 0 ? '↑' : '↓'} {Math.abs(metricsData.totalClicksTrend)}%
               </span>
             )}
-            <p className="text-xs text-gray-500">vs last week</p>
+            <p className="text-xs text-muted-foreground">vs last week</p>
           </div>
         </CardContent>
       </Card>

src/features/dashboard/components/video-list-row.tsx

@@ -47,9 +47,9 @@ export function VideoListRow({ video }: VideoListRowProps) {
     const hasUnmetOpportunities = video.detectionCount > 0 && video.monetizedCount === 0;
 
     return (
-        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 p-4 hover:bg-white/[0.03] transition-colors group">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 p-4 hover:bg-secondary/30 transition-colors group">
             {/* Thumbnail */}
-            <div className="relative shrink-0 w-full sm:w-40 aspect-video rounded-lg overflow-hidden border border-white/10 group-hover:border-primary/50 transition-colors">
+            <div className="relative shrink-0 w-full sm:w-40 aspect-video rounded-lg overflow-hidden border border-border group-hover:border-primary/50 transition-colors">
                 {video.thumbnailUrl ? (
                     <img
                         src={video.thumbnailUrl}
@@ -57,7 +57,7 @@ export function VideoListRow({ video }: VideoListRowProps) {
                         className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                     />
                 ) : (
-                    <div className="w-full h-full bg-white/5 flex items-center justify-center">
+                    <div className="w-full h-full bg-secondary flex items-center justify-center">
                         <Play className="h-8 w-8 text-muted-foreground" />
                     </div>
                 )}
@@ -103,7 +103,7 @@ export function VideoListRow({ video }: VideoListRowProps) {
                             {video.detectionCount} Detections
                         </Badge>
                     ) : (
-                        <Badge variant="secondary" className="bg-white/5 text-muted-foreground border-white/10 text-[10px] gap-1 px-1.5 py-0 h-5">
+                        <Badge variant="secondary" className="bg-secondary text-muted-foreground border-border text-[10px] gap-1 px-1.5 py-0 h-5">
                             <Clock className="h-3 w-3" />
                             {video.scanStatus === 'completed' ? 'Refine Mode' : 'Ready to Scan'}
                         </Badge>
@@ -112,7 +112,7 @@ export function VideoListRow({ video }: VideoListRowProps) {
             </div>
 
             {/* Engagement Sparkstats */}
-            <div className="flex items-center gap-4 sm:gap-6 shrink-0 w-full sm:w-auto pt-2 sm:pt-0 border-t sm:border-0 border-white/5 mt-2 sm:mt-0">
+            <div className="flex items-center gap-4 sm:gap-6 shrink-0 w-full sm:w-auto pt-2 sm:pt-0 border-t sm:border-0 border-border/50 mt-2 sm:mt-0">
                 <div className="flex flex-col items-center gap-0.5 group/stat">
                     <MousePointerClick className={cn("h-4 w-4 transition-colors", video.clickCount > 0 ? "text-primary" : "text-muted-foreground/30")} />
                     <span className="text-xs font-bold leading-none">{video.clickCount || 0}</span>
@@ -132,7 +132,7 @@ export function VideoListRow({ video }: VideoListRowProps) {
                 </div>
 
                 <div className="ml-auto sm:ml-4">
-                    <Button asChild variant="outline" size="sm" className="h-8 rounded-lg glass-border hover:bg-white/10 text-xs gap-1.5">
+                    <Button asChild variant="outline" size="sm" className="h-8 rounded-lg border-border hover:bg-secondary text-xs gap-1.5 transition-colors">
                         <Link href={`/showcase/${video.youtubeVideoId}`}>
                             Manage
                             <ExternalLink className="h-3 w-3" />

src/features/dashboard/components/video-workbench.tsx

@@ -120,9 +120,9 @@ export function VideoWorkbench({ initialVideos, channels, isGoogleLinked }: Vide
 
     if (initialVideos.length === 0) {
         return (
-            <Card className="border-dashed glass bg-white/5 border-white/10">
+            <Card className="border-dashed glass">
                 <CardContent className="flex flex-col items-center justify-center p-12 text-center">
-                    <div className="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mb-6 border border-white/10">
+                    <div className="w-16 h-16 rounded-full bg-secondary flex items-center justify-center mb-6 border border-border">
                         <Youtube className="h-8 w-8 text-muted-foreground" />
                     </div>
                     <CardTitle className="text-2xl">No Videos Found</CardTitle>
@@ -154,28 +154,28 @@ export function VideoWorkbench({ initialVideos, channels, isGoogleLinked }: Vide
                     <p className="text-sm text-muted-foreground">Master list of your videos and their monetization performance.</p>
                 </div>
 
-                <div className="flex flex-wrap items-center gap-4 bg-white/5 p-2 rounded-xl border border-white/10 backdrop-blur-sm">
-                    <div className="px-3 border-r border-white/10 last:border-0">
+                <div className="flex flex-wrap items-center gap-4 glass p-2 rounded-xl backdrop-blur-sm">
+                    <div className="px-3 border-r border-border last:border-0">
                         <p className="text-[10px] uppercase font-bold text-muted-foreground tracking-widest mb-0.5">Total Clicks</p>
                         <p className="text-lg font-bold text-primary">{stats.totalClicks.toLocaleString()}</p>
                     </div>
-                    <div className="px-3 border-r border-white/10 last:border-0">
+                    <div className="px-3 border-r border-border last:border-0">
                         <p className="text-[10px] uppercase font-bold text-muted-foreground tracking-widest mb-0.5">Fan Engagements</p>
                         <p className="text-lg font-bold text-amber-400">{stats.totalPledges.toLocaleString()}</p>
                     </div>
                     <div className="px-3">
                         <p className="text-[10px] uppercase font-bold text-muted-foreground tracking-widest mb-0.5">Monetized</p>
-                        <p className="text-lg font-bold text-green-400">{stats.monetizedVideos} <span className="text-xs font-normal text-muted-foreground">/ {initialVideos.length}</span></p>
+                        <p className="text-lg font-bold text-green-400 dark:text-green-400">{stats.monetizedVideos} <span className="text-xs font-normal text-muted-foreground">/ {initialVideos.length}</span></p>
                     </div>
 
-                    <div className="px-2 border-l border-white/10 ml-2">
+                    <div className="px-2 border-l border-border ml-2">
                         <AlertDialog>
                             <AlertDialogTrigger asChild>
-                                <Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:bg-white/10 rounded-full">
+                                <Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:bg-secondary rounded-full">
                                     <Settings2 className="h-4 w-4" />
                                 </Button>
                             </AlertDialogTrigger>
-                            <AlertDialogContent className="glass-panel border-white/10 backdrop-blur-xl">
+                            <AlertDialogContent className="glass-panel backdrop-blur-xl">
                                 <AlertDialogHeader>
                                     <AlertDialogTitle>Account Connections</AlertDialogTitle>
                                     <AlertDialogDescription>
@@ -185,9 +185,9 @@ export function VideoWorkbench({ initialVideos, channels, isGoogleLinked }: Vide
 
                                 <div className="space-y-4 my-4">
                                     {channels.map(channel => (
-                                        <div key={channel.id} className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/10">
+                                        <div key={channel.id} className="flex items-center gap-3 p-3 rounded-xl bg-secondary border border-border">
                                             {channel.thumbnailUrl && (
-                                                <img src={channel.thumbnailUrl} alt="" className="w-10 h-10 rounded-full border border-white/20" />
+                                                <img src={channel.thumbnailUrl} alt="" className="w-10 h-10 rounded-full border border-border" />
                                             )}
                                             <div className="flex-1 min-w-0">
                                                 <p className="text-sm font-bold truncate">{channel.channelName}</p>
@@ -213,7 +213,7 @@ export function VideoWorkbench({ initialVideos, channels, isGoogleLinked }: Vide
                                             Disconnect YouTube Account
                                         </Button>
                                     </div>
-                                    <AlertDialogCancel className="bg-white/5 border-white/10 hover:bg-white/10">Close</AlertDialogCancel>
+                                    <AlertDialogCancel className="bg-secondary border-border hover:bg-muted transition-colors">Close</AlertDialogCancel>
                                 </AlertDialogFooter>
                             </AlertDialogContent>
                         </AlertDialog>
@@ -224,7 +224,7 @@ export function VideoWorkbench({ initialVideos, channels, isGoogleLinked }: Vide
             {/* Controls Bar */}
             <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 py-2">
                 {/* Tabs */}
-                <div className="flex items-center gap-1 bg-white/5 p-1 rounded-xl border border-white/10">
+                <div className="flex items-center gap-1 bg-secondary p-1 rounded-xl border border-border">
                     {(["all", "active", "opportunities", "requested"] as Tab[]).map(t => (
                         <button
                             key={t}
@@ -232,7 +232,7 @@ export function VideoWorkbench({ initialVideos, channels, isGoogleLinked }: Vide
                             className={cn(
                                 "px-4 py-1.5 rounded-lg text-sm font-medium capitalize transition-all",
                                 tab === t
-                                    ? "bg-white/10 text-foreground shadow-sm"
+                                    ? "bg-background text-foreground shadow-sm border border-border/50"
                                     : "text-muted-foreground hover:text-foreground"
                             )}
                         >
@@ -244,7 +244,7 @@ export function VideoWorkbench({ initialVideos, channels, isGoogleLinked }: Vide
                 <div className="flex flex-wrap items-center gap-3">
                     {/* Channel Filter (if multiple) */}
                     {channels.length > 1 && (
-                        <div className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-xl bg-white/5 border border-white/10">
+                        <div className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-xl bg-secondary border border-border">
                             <Filter className="h-3.5 w-3.5 text-muted-foreground" />
                             <select
                                 value={filterChannel}
@@ -277,8 +277,8 @@ export function VideoWorkbench({ initialVideos, channels, isGoogleLinked }: Vide
                                 className={cn(
                                     "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold transition-all border",
                                     sortBy === f.id
-                                        ? "bg-primary/20 border-primary/30 text-primary"
-                                        : "bg-white/5 border-white/10 text-muted-foreground hover:border-white/20"
+                                        ? "bg-primary/10 border-primary/20 text-primary"
+                                        : "bg-secondary border-border text-muted-foreground hover:border-muted-foreground/30"
                                 )}
                             >
                                 {f.icon}
@@ -293,8 +293,8 @@ export function VideoWorkbench({ initialVideos, channels, isGoogleLinked }: Vide
             </div>
 
             {/* Video List */}
-            <Card className="glass border-white/10 overflow-hidden">
-                <div className="divide-y divide-white/5">
+            <Card className="glass overflow-hidden shadow-sm">
+                <div className="divide-y divide-border/30">
                     {filteredAndSortedVideos.length > 0 ? (
                         filteredAndSortedVideos.map(video => (
                             <VideoListRow key={video.id} video={video} />

src/features/discovery/components/youtube-connect-section.tsx

@@ -130,7 +130,7 @@ export function YouTubeConnectSection({
                                 Disconnect Account
                             </Button>
                         </AlertDialogTrigger>
-                        <AlertDialogContent className="glass-panel border-white/10 backdrop-blur-xl">
+                        <AlertDialogContent className="glass-panel backdrop-blur-xl">
                             <AlertDialogHeader>
                                 <AlertDialogTitle>Disconnect YouTube Account?</AlertDialogTitle>
                                 <AlertDialogDescription>
@@ -139,7 +139,7 @@ export function YouTubeConnectSection({
                                 </AlertDialogDescription>
                             </AlertDialogHeader>
                             <AlertDialogFooter>
-                                <AlertDialogCancel className="bg-white/5 border-white/10 hover:bg-white/10">Cancel</AlertDialogCancel>
+                                <AlertDialogCancel className="bg-secondary border-border hover:bg-muted transition-colors">Cancel</AlertDialogCancel>
                                 <AlertDialogAction
                                     onClick={handleDisconnect}
                                     className="bg-destructive text-white hover:bg-destructive/90 transition-colors"
@@ -151,7 +151,7 @@ export function YouTubeConnectSection({
                     </AlertDialog>
                 )}
                 {channels.length === 0 && (
-                    <Button onClick={handleConnect} disabled={isConnecting} variant="outline" className="gap-2 glass hover:bg-white/10 transition-all">
+                    <Button onClick={handleConnect} disabled={isConnecting} variant="outline" className="gap-2 glass hover:bg-secondary transition-all">
                         <Youtube className="h-4 w-4 text-red-600" />
                         Connect YouTube
                     </Button>
@@ -159,9 +159,9 @@ export function YouTubeConnectSection({
             </div>
 
             {channels.length === 0 ? (
-                <Card className="border-dashed glass bg-white/5 border-white/10 transition-all hover:bg-white/[0.07]">
+                <Card className="border-dashed glass bg-secondary/30 border-border transition-all hover:bg-secondary/50">
                     <CardHeader className="text-center py-10">
-                        <div className="mx-auto w-12 h-12 rounded-full bg-white/5 flex items-center justify-center mb-4 border border-white/10">
+                        <div className="mx-auto w-12 h-12 rounded-full bg-secondary flex items-center justify-center mb-4 border border-border">
                             <Youtube className="h-6 w-6 text-red-500" />
                         </div>
                         <CardTitle>No YouTube Channels Connected</CardTitle>
@@ -194,14 +194,14 @@ export function YouTubeConnectSection({
                                                         alt={channel.channelName}
                                                         width={48}
                                                         height={48}
-                                                        className="w-12 h-12 rounded-full border border-white/20 shadow-lg object-cover group-hover:scale-105 transition-transform"
+                                                        className="w-12 h-12 rounded-full border border-border shadow-lg object-cover group-hover:scale-105 transition-transform"
                                                     />
-                                                    <div className="absolute -bottom-1 -right-1 bg-background rounded-full p-0.5 border border-white/20">
+                                                    <div className="absolute -bottom-1 -right-1 bg-background rounded-full p-0.5 border border-border">
                                                         <Youtube className="h-3 w-3 text-red-600" />
                                                     </div>
                                                 </div>
                                             ) : (
-                                                <div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center border border-white/10">
+                                                <div className="w-12 h-12 rounded-full bg-secondary flex items-center justify-center border border-border">
                                                     <Youtube className="h-6 w-6 text-red-600" />
                                                 </div>
                                             )}
@@ -222,7 +222,7 @@ export function YouTubeConnectSection({
                                                 {status.label}
                                             </Badge>
                                         </CardHeader>
-                                        <CardContent className="pt-0 flex justify-end items-center bg-white/5 px-6 py-3 border-t border-white/10">
+                                        <CardContent className="pt-0 flex justify-end items-center bg-secondary/30 px-6 py-3 border-t border-border">
                                             <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1 opacity-70 hover:opacity-100 transition-opacity" asChild>
                                                 <a href={`https://youtube.com/channel/${channel.channelId}`} target="_blank" rel="noopener noreferrer">
                                                     View <ExternalLink className="h-3 w-3" />

src/features/vault/components/affiliate-submission-dialog.tsx

@@ -92,7 +92,7 @@ export function AffiliateSubmissionDialog({
                     </Button>
                 )}
             </DialogTrigger>
-            <DialogContent className="sm:max-w-[500px] glass border-white/10 text-white">
+            <DialogContent className="sm:max-w-[500px] glass-panel">
                 <DialogHeader>
                     <DialogTitle className="text-xl font-bold tracking-tight">Submit Product Link</DialogTitle>
                     <DialogDescription className="text-muted-foreground">
@@ -107,7 +107,7 @@ export function AffiliateSubmissionDialog({
                             placeholder="e.g. Sony A7 III Camera"
                             value={formData.productName}
                             onChange={(e) => setFormData({ ...formData, productName: e.target.value })}
-                            className="bg-white/5 border-white/10 text-white"
+                            className="bg-secondary border-border"
                             required
                         />
                     </div>
@@ -119,7 +119,7 @@ export function AffiliateSubmissionDialog({
                                 placeholder="https://amazon.com/..."
                                 value={formData.productUrl}
                                 onChange={(e) => setFormData({ ...formData, productUrl: e.target.value })}
-                                className="bg-white/5 border-white/10 text-white"
+                                className="bg-secondary border-border"
                                 required
                             />
                         </div>
@@ -130,7 +130,7 @@ export function AffiliateSubmissionDialog({
                                 placeholder="https://amzn.to/..."
                                 value={formData.affiliateUrl}
                                 onChange={(e) => setFormData({ ...formData, affiliateUrl: e.target.value })}
-                                className="bg-white/5 border-white/10 text-white"
+                                className="bg-secondary border-border"
                                 required
                             />
                         </div>
@@ -142,7 +142,7 @@ export function AffiliateSubmissionDialog({
                             placeholder="e.g. This is the exact model used in the video..."
                             value={formData.note}
                             onChange={(e) => setFormData({ ...formData, note: e.target.value })}
-                            className="min-h-[80px] bg-white/5 border-white/10 text-white"
+                            className="min-h-[80px] bg-secondary border-border"
                         />
                     </div>
                     <div className="grid grid-cols-2 gap-4">
@@ -153,7 +153,7 @@ export function AffiliateSubmissionDialog({
                                 placeholder="Alex"
                                 value={formData.submitterName}
                                 onChange={(e) => setFormData({ ...formData, submitterName: e.target.value })}
-                                className="bg-white/5 border-white/10 text-white"
+                                className="bg-secondary border-border"
                             />
                         </div>
                         <div className="space-y-2">
@@ -164,7 +164,7 @@ export function AffiliateSubmissionDialog({
                                 placeholder="alex@example.com"
                                 value={formData.submitterEmail}
                                 onChange={(e) => setFormData({ ...formData, submitterEmail: e.target.value })}
-                                className="bg-white/5 border-white/10 text-white"
+                                className="bg-secondary border-border"
                             />
                         </div>
                     </div>

src/features/vault/components/product-request-dialog.tsx

@@ -151,12 +151,12 @@ export function ProductRequestDialog({ videoId: initialVideoId, creatorId, video
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
-                <Button variant="outline" className="rounded-full gap-2 border-primary/20 hover:border-primary/40 hover:bg-primary/5 transition-all text-white">
+                <Button variant="outline" className="rounded-full gap-2 border-primary/20 hover:border-primary/40 hover:bg-primary/5 transition-all">
                     <HelpCircle className="w-4 h-4" />
                     Can't find a product?
                 </Button>
             </DialogTrigger>
-            <DialogContent className="sm:max-w-[540px] glass border-white/10 text-white">
+            <DialogContent className="sm:max-w-[540px] glass-panel">
                 <DialogHeader>
                     <DialogTitle className="text-xl font-bold tracking-tight">Request a Product</DialogTitle>
                     <DialogDescription className="text-muted-foreground">
@@ -168,10 +168,10 @@ export function ProductRequestDialog({ videoId: initialVideoId, creatorId, video
                         <div className="space-y-2">
                             <Label htmlFor="video-select" className="text-sm font-medium">Which video did you see it in?*</Label>
                             <Select value={selectedVideoId} onValueChange={setSelectedVideoId}>
-                                <SelectTrigger className="bg-white/5 border-white/10 focus:border-primary/50 text-white">
+                                <SelectTrigger className="bg-secondary border-border focus:border-primary/50">
                                     <SelectValue placeholder="Select a video" />
                                 </SelectTrigger>
-                                <SelectContent className="bg-zinc-900 border-white/10 text-white">
+                                <SelectContent className="bg-popover border-border">
                                     {videos.map(v => (
                                         <SelectItem key={v.id} value={v.id}>{v.title}</SelectItem>
                                     ))}
@@ -186,7 +186,7 @@ export function ProductRequestDialog({ videoId: initialVideoId, creatorId, video
                             placeholder="e.g. The blue jacket at 04:20..."
                             value={formData.note}
                             onChange={(e) => setFormData({ ...formData, note: e.target.value })}
-                            className="min-h-[80px] bg-white/5 border-white/10 focus:border-primary/50 text-white placeholder:text-muted-foreground/50"
+                            className="min-h-[80px] bg-secondary border-border focus:border-primary/50 placeholder:text-muted-foreground/50"
                             required
                         />
                     </div>
@@ -198,7 +198,7 @@ export function ProductRequestDialog({ videoId: initialVideoId, creatorId, video
                                 placeholder="Alex"
                                 value={formData.name}
                                 onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                                className="bg-white/5 border-white/10 text-white placeholder:text-muted-foreground/50"
+                                className="bg-secondary border-border placeholder:text-muted-foreground/50"
                             />
                         </div>
                         <div className="space-y-2">
@@ -209,7 +209,7 @@ export function ProductRequestDialog({ videoId: initialVideoId, creatorId, video
                                 placeholder="alex@gmail.com"
                                 value={formData.email}
                                 onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-                                className="bg-white/5 border-white/10 text-white placeholder:text-muted-foreground/50"
+                                className="bg-secondary border-border placeholder:text-muted-foreground/50"
                             />
                         </div>
                     </div>
@@ -224,7 +224,7 @@ export function ProductRequestDialog({ videoId: initialVideoId, creatorId, video
                             aspectRatio="video"
                             placeholderText="Paste image link or upload a screenshot"
                             extraLabel={
-                                <span className="ml-auto text-[10px] font-normal text-muted-foreground bg-white/5 px-1.5 py-0.5 rounded border border-white/10 animate-pulse">
+                                <span className="ml-auto text-[10px] font-normal text-muted-foreground bg-secondary px-1.5 py-0.5 rounded border border-border animate-pulse">
                                     Cmd+V to Paste
                                 </span>
                             }

src/features/vault/components/quick-analyze-tool.tsx

@@ -38,40 +38,39 @@ export function QuickAnalyzeTool() {
     };
 
     return (
-        <Card className="glass border-white/10 overflow-hidden relative">
-            <div className="absolute top-0 right-0 p-3 opacity-10">
-                <Sparkles className="h-12 w-12" />
-            </div>
-            <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                    <Sparkles className="h-5 w-5 text-amber-400" />
-                    Quick Analyze
-                </CardTitle>
-                <CardDescription>
-                    Paste a YouTube link to instantly analyze and showcase products from the video.
-                </CardDescription>
-            </CardHeader>
-            <CardContent>
-                <form onSubmit={handleSubmit} className="space-y-4">
-                    <div className="flex gap-2">
+        <Card className="glass overflow-hidden shadow-sm hover:shadow-md transition-all duration-300">
+            <CardContent className="p-4">
+                <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row items-center gap-3">
+                    <div className="relative flex-1 w-full">
+                        <Sparkles className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-amber-400/80" />
                         <Input
-                            placeholder="https://www.youtube.com/watch?v=..."
+                            placeholder="Add any YouTube video to your Vault..."
                             value={url}
                             onChange={(e) => setUrl(e.target.value)}
-                            className="bg-white/5 border-white/10"
+                            className="pl-10 h-11 bg-secondary/50 border-border focus:border-primary/50 transition-all font-medium"
                             disabled={loading}
                         />
-                        <Button type="submit" disabled={loading || !url}>
-                            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Analyze"}
-                        </Button>
                     </div>
-                    {error && (
-                        <Alert variant="destructive" className="bg-red-500/10 border-red-500/20 text-red-400">
-                            <AlertCircle className="h-4 w-4" />
-                            <AlertDescription>{error}</AlertDescription>
-                        </Alert>
-                    )}
+                    <Button
+                        type="submit"
+                        disabled={loading || !url}
+                        className="h-11 px-6 shadow-sm hover:translate-y-[-1px] active:translate-y-[0px] transition-all"
+                    >
+                        {loading ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                            <span className="flex items-center gap-2">
+                                Add to Vault
+                            </span>
+                        )}
+                    </Button>
                 </form>
+                {error && (
+                    <div className="mt-3 flex items-center gap-2 text-xs text-destructive bg-destructive/5 p-2 rounded-lg border border-destructive/10 animate-in slide-in-from-top-1">
+                        <AlertCircle className="h-3.5 w-3.5" />
+                        <p>{error}</p>
+                    </div>
+                )}
             </CardContent>
         </Card>
     );