diff --git a/.aiideas b/.aiideas
index 49d9059..904ea96 100644
--- a/.aiideas
+++ b/.aiideas
@@ -1,117 +1,103 @@
-Rolle: Du bist ein Senior Frontend Engineer(React / Tailwind) und UI / UX Designer.Ziel: Wir machen ein umfassendes UI - Overhaul einer bestehenden Whisky - App("WhiskyVault") und benennen sie um in "DramLog".Das Ziel ist eine Premium - Mobile - Experience(Dark Mode, Gold Akzente, Serif Fonts).
+Rolle: Du bist ein UI - Designer mit Fokus auf "Modern Minimalist" Design(Stilrichtung: Linear, Teenage Engineering, Vercel).Ziel: Redesign der Whisky - App "DramLog".Wir verabschieden uns vom klassischen "Luxus-Look"(Gold / Serifen) und nutzen einen "Industrial Dark" Stil.
 
-Tech Stack: React, Tailwind CSS, Lucide - React Icons.
-1. Globales Design - System(Anwenden auf alle Views)
+Design Rules & Tokens:
 
-Branding: App Name ist "DramLog".
+    Color Palette(Tailwind):
 
-  Farben:
+Bg - App: bg - zinc - 950(Ein sehr dunkles, warmes Grau, kein hartes Schwarz).
 
-Background: #0F1014(Deep Rich Black)
+  Bg - Card: bg - zinc - 900(Deutlich abgesetzt vom Hintergrund).
 
-Surface: #1A1B20(Card Backgrounds)
+    Text - Primary: text - zinc - 50(Fast Weiß, hoher Kontrast).
 
-        Primary Accent: #C89D46(Whisky Amber / Gold)
+      Text - Secondary: text - zinc - 400(Mittelgrau für Labels).
 
-Text - Secondary: #8F9096
+        Accent: text - orange - 500(Ein sattes, mattes Orange für Highlights) und bg - orange - 600 für Primary Buttons.Keine Verläufe / Gradients, sondern flache("flat") Farben.
 
-Typografie:
+          Typography:
 
-        Importiere und nutze Playfair Display(Serif) für: Überschriften(h1 - h3), Whisky - Namen auf Cards.
+        Nutze Inter oder DM Sans für alles.
 
-        Nutze Inter(Sans) für: UI - Elemente, Labels, Fließtext, Daten.
+  Headlines: font - bold tracking - tight(Enger Buchstabenabstand, wirkt kompakt und modern).
 
-  Shape: rounded - 2xl für Cards, rounded - full für Buttons.
+    Labels: uppercase text - xs tracking - widest font - semibold(Technischer Look).
 
-2. Spezifische Component Refactorings
+      Component: Whisky Card(Clean Split):
 
-A.Dashboard(Home View):
+        Kein Text mehr über dem Bild!
 
-    Entferne die grauen Hintergründe der 4 oberen Statistik - Boxen.Zeige die Werte(Zahlen) groß in Playfair Display(Weiß) und die Labels klein darunter(Grau).Ordne sie in einem Grid oder einer flex - row mit justify - between an.
+Top: Bild(Aspect Ratio 4: 3 oder 16: 9), rounded - t - xl.
 
-  Benenne "Dein Bestand" um in "Collection".
+  Bottom: Info - Block(p - 4 bg - zinc - 900 rounded - b - xl).
 
-    Mache die Listen - Einträge unter "Tasting Sessions" interaktiv.Entferne die sichtbaren Trash / Edit Buttons und nutze ein sauberes Listen - Layout.
+    Inhalt: Whisky Name(Bold, White), darunter Destillerie(Orange, Small).
 
-  B.Whisky Card(Collection Grid):
+      Tags: Kleine "Pills" mit bg - zinc - 800 text - zinc - 300.
 
-    Redesign der Card - Komponente.
+Component: Dashboard Stats:
 
-  Bild: Muss bis an den Rand gehen(w - full, kein Padding).
+Minimalistisch.Nur die Zahl(riesig, z.B.text - 4xl font - bold text - white) und darunter das Label(text - zinc - 500).
 
-    Overlay: Lege einen bg - gradient - to - t from - black via - black / 80 to - transparent über das untere Drittel des Bildes.
+        Keine Boxen, keine Rahmen. "Data Ink Ratio" optimieren.
 
-      Text: Platziere Name(Serif) und Destillerie(Sans, Uppercase, Gold) weiß auf dem Bild im unteren Bereich(über dem Gradient).
+  Component: Floating Navigation(The Capsule):
 
-        Tags: Mache Tags minimalistisch(bg - white / 10 backdrop - blur - sm text - xs border border - white / 10).
+        Statt einer durchgehenden Leiste unten, nutze eine "Floating Capsule".
 
-3. Die "Floating" Navigation(Core Feature)
+        Eine abgerundete "Insel"(rounded - full) die ca. 20px über dem unteren Bildschirmrand schwebt.
 
-Erstelle eine neue Komponente BottomNavigation.Sie ersetzt alle bisherigen Menüs.Sie muss am unteren Bildschirmrand fixiert sein.WICHTIG: Implementiere exakt dieses Layout - Pattern für den schwebenden Button:
+  Breite: ca. 90 % des Screens oder max - w - md.
+
+    Farbe: bg - zinc - 800 / 90 backdrop - blur - md border border - zinc - 700.
+
+        Scan Button: In der Mitte der Kapsel, Kreis in bg - orange - 600(Flat, kein Schatten), weißes Icon.
+
+  Code - Snippet für die "Industrial Capsule Navigation":
 JavaScript
 
-// Reference Implementation for BottomNavigation.jsx
-import { Home, Grid, Scan, User, Search } from 'lucide-react';
+import { Home, Grid, Scan, User } from 'lucide-react';
 
-export const BottomNavigation = () => {
+export const NavigationCapsule = () => {
   return (
-    <div className= "fixed bottom-0 left-0 w-full z-50" >
-    {/* Background Container mit Glassmorphism */ }
-    < div className = "relative bg-[#0F1014]/90 backdrop-blur-xl border-t border-white/10 pb-safe pt-2" >
+    <div className= "fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-sm z-50" >
+    <div className="flex items-center justify-between px-2 py-2 bg-zinc-900/90 backdrop-blur-lg border border-zinc-800 rounded-full shadow-2xl" >
 
-      <div className="flex justify-between items-end px-6 h-16" >
-
-        {/* Left Actions */ }
-        < button className = "flex flex-col items-center gap-1 text-[#C89D46] w-12" >
-          <Home size={ 24 } />
-            < span className = "text-[10px] font-medium" > Home </span>
-              </button>
-
-              < button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
-                <Grid size={ 24 } />
-                  < span className = "text-[10px] font-medium" > Shelf </span>
-                    </button>
-
-  {/* Spacer für den Center Button */ }
-  <div className="w-16" />
-
-    {/* Right Actions */ }
-    < button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
-      <Search size={ 24 } />
-        < span className = "text-[10px] font-medium" > Search </span>
+      {/* Left Item */ }
+      < button className = "p-3 text-zinc-400 hover:text-white transition-colors" >
+        <Home size={ 22 } strokeWidth = { 2.5} />
           </button>
 
-          < button className = "flex flex-col items-center gap-1 text-gray-500 hover:text-white w-12 transition-colors" >
-            <User size={ 24 } />
-              < span className = "text-[10px] font-medium" > Profile </span>
-                </button>
-                </div>
-
-  {/* THE FLOATING MAGIC BUTTON */ }
-  <div className="absolute -top-8 left-1/2 -translate-x-1/2" >
-    <button 
-            className="flex items-center justify-center w-16 h-16 rounded-full 
-  bg - gradient - to - tr from - [#C89D46] to - [#E0B456]
-  shadow - [0_0_20px_rgba(200, 157, 70, 0.4)]
-  border - 4 border - [#0F1014]
-  active: scale - 95 transition - transform duration - 200"
-  aria - label="Scan Bottle"
-    >
-    <Scan color="#0F1014" size = { 32} strokeWidth = { 2} />
+  {/* Left Item */ }
+  <button className="p-3 text-zinc-400 hover:text-white transition-colors" >
+    <Grid size={ 22 } strokeWidth = { 2.5} />
       </button>
-      </div>
 
-      </div>
-      </div>
+  {/* PRIMARY ACTION - The "Industrial Button" */ }
+  <button className="flex items-center justify-center w-14 h-14 rounded-full bg-orange-600 text-white hover:bg-orange-500 active:scale-95 transition-all mx-2" >
+    <Scan size={ 26 } strokeWidth = { 2.5} />
+      </button>
+
+  {/* Right Item */ }
+  <button className="p-3 text-zinc-400 hover:text-white transition-colors" >
+    <User size={ 22 } strokeWidth = { 2.5} />
+      </button>
+
+  {/* Right Item (Settings/More) */ }
+  <button className="p-3 text-zinc-400 hover:text-white transition-colors" >
+    <div className="w-1 h-1 bg-current rounded-full mb-1" />
+      <div className="w-1 h-1 bg-current rounded-full" />
+        </button>
+
+        </div>
+        </div>
   );
 };
 
-Aufgabe:
+Aufgabe: Setze die bestehenden Views(Dashboard und Liste) mit diesen neuen "Industrial Dark" Regeln um.Sorge für klare Kontraste durch zinc - 950 vs zinc - 900 Flächen.
+Was dieser Look ändert:
 
-    Implementiere das globale Styling(Fonts / Colors).
+Lesbarkeit: Durch den zinc - 900 Hintergrund der Karten hebt sich der weiße Text extrem gut ab.Kein "Text auf unruhigem Foto" - Problem mehr.
 
-    Baue die BottomNavigation ein(ersetze alte Navs).
+  Modernität: Das "Pill" - Menü(Capsule) sieht aus wie bei modernen iOS Apps(Dynamic Island Ästhetik).
 
-    Passe die Dashboard View an den neuen "Clean Look" an.
-
-    Passe die WhiskyCard an den neuen "Editorial Look" an.
\ No newline at end of file
+    Ehrlichkeit: Es versucht nicht, "altes Geld"(Gold / Serifen) zu imitieren, sondern wirkt wie ein modernes Werkzeug für Enthusiasten.
\ No newline at end of file
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
index 6119cb9..825662d 100644
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@@ -12,10 +12,10 @@ export default function GlobalError({
     return (
         <html lang="de">
             <body>
-                <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-50 dark:bg-black text-center">
-                    <div className="bg-white dark:bg-zinc-900 p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-xl max-w-md w-full space-y-6">
+                <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-black text-center">
+                    <div className="bg-zinc-900 p-8 rounded-[32px] border border-zinc-800 shadow-xl max-w-md w-full space-y-6">
                         <div className="space-y-2">
-                            <h2 className="text-2xl font-black text-zinc-900 dark:text-white">Kritischer Fehler</h2>
+                            <h2 className="text-2xl font-bold text-white uppercase tracking-tighter">Kritischer Fehler</h2>
                             <p className="text-zinc-500 text-sm">
                                 Ein schwerwiegender Fehler ist aufgetreten. Bitte versuche die Seite neu zu laden.
                             </p>
@@ -23,7 +23,7 @@ export default function GlobalError({
 
                         <button
                             onClick={() => reset()}
-                            className="w-full py-4 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-bold flex items-center justify-center gap-2 transition-all"
+                            className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-orange-950/20"
                         >
                             <RefreshCcw size={18} />
                             Erneut versuchen
diff --git a/src/app/globals.css b/src/app/globals.css
index cf08d72..aef6c8e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,16 +4,24 @@
 
 @layer base {
   :root {
-    --background: #0F1014;
-    --surface: #1A1B20;
-    --primary: #C89D46;
-    --text-secondary: #8F9096;
-    --border: rgba(255, 255, 255, 0.1);
+    --background: #09090b;
+    /* zinc-950 */
+    --surface: #18181b;
+    /* zinc-900 */
+    --primary: #ea580c;
+    /* orange-600 */
+    --secondary: #f97316;
+    /* orange-500 */
+    --text-primary: #fafafa;
+    --text-secondary: #a1a1aa;
+    --border: #27272a;
+    /* zinc-800 */
+    --ring: #f97316;
   }
 }
 
 body {
-  @apply bg-[#0F1014] text-white antialiased;
+  @apply bg-[#09090b] text-[#fafafa] antialiased;
   font-feature-settings: "cv02", "cv03", "cv04", "cv11";
 }
 
@@ -22,16 +30,17 @@ h2,
 h3,
 h4,
 .font-display {
-  font-family: var(--font-playfair), serif;
+  font-family: var(--font-inter), system-ui, sans-serif;
+  letter-spacing: -0.02em;
 }
 
 @layer utilities {
   .glass {
-    @apply backdrop-blur-md bg-white/5 border border-white/10;
+    @apply backdrop-blur-md bg-zinc-900/50 border border-zinc-800/50;
   }
 
   .glass-dark {
-    @apply backdrop-blur-md bg-black/40 border border-white/5;
+    @apply backdrop-blur-md bg-zinc-950/80 border border-zinc-900/50;
   }
 
   .scrollbar-hide::-webkit-scrollbar {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9b7183b..813c320 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -12,16 +12,13 @@ import AuthListener from "@/components/AuthListener";
 import SyncHandler from "@/components/SyncHandler";
 
 const inter = Inter({ subsets: ["latin"], variable: '--font-inter' });
-const playfair = Playfair_Display({ subsets: ["latin"], variable: '--font-playfair' });
-
-import { Playfair_Display } from "next/font/google";
 
 export const metadata: Metadata = {
     title: {
         default: "DramLog",
         template: "%s | DramLog"
     },
-    description: "Premium Digitaler Tasting Begleiter für Genießer.",
+    description: "Modern Whisky Enthusiast Tool",
     manifest: "/manifest.webmanifest",
     appleWebApp: {
         capable: true,
@@ -48,7 +45,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="de">
-            <body className={`${inter.variable} ${playfair.variable} font-sans`}>
+            <body className={`${inter.variable} font-sans`}>
                 <I18nProvider>
                     <SessionProvider>
                         <AuthListener />
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
index b44df6a..81d7c02 100644
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@@ -2,10 +2,10 @@ import { Loader2 } from 'lucide-react';
 
 export default function Loading() {
     return (
-        <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-50 dark:bg-black text-center">
+        <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-black text-center">
             <div className="flex flex-col items-center gap-4">
-                <Loader2 size={40} className="animate-spin text-amber-600" />
-                <p className="text-zinc-500 font-medium animate-pulse">Whisky Vault wird geladen...</p>
+                <Loader2 size={40} className="animate-spin text-orange-600" />
+                <p className="text-zinc-500 font-bold animate-pulse uppercase tracking-widest text-[10px]">Whisky Vault wird geladen...</p>
             </div>
         </div>
     );
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index e99e5ad..6d24ee8 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -3,12 +3,12 @@ import { Home, MoveLeft } from 'lucide-react';
 
 export default function NotFound() {
     return (
-        <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-50 dark:bg-black text-center">
-            <div className="bg-white dark:bg-zinc-900 p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-xl max-w-md w-full space-y-6">
-                <div className="text-8xl font-black text-amber-600/20">404</div>
+        <div className="flex min-h-screen flex-col items-center justify-center p-6 bg-black text-center">
+            <div className="bg-zinc-900 p-8 rounded-[32px] border border-zinc-800 shadow-xl max-w-md w-full space-y-6">
+                <div className="text-8xl font-bold text-orange-600/10 tracking-tighter">404</div>
 
                 <div className="space-y-2">
-                    <h2 className="text-2xl font-black text-zinc-900 dark:text-white">Seite nicht gefunden</h2>
+                    <h2 className="text-2xl font-bold text-white uppercase tracking-tighter">Seite nicht gefunden</h2>
                     <p className="text-zinc-500 text-sm">
                         Die gesuchte Seite existiert leider nicht oder wurde verschoben.
                     </p>
@@ -17,7 +17,7 @@ export default function NotFound() {
                 <div className="pt-4">
                     <Link
                         href="/"
-                        className="w-full py-4 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-amber-600/20"
+                        className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-orange-950/20"
                     >
                         <Home size={18} />
                         Zurück zum Vault
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e4772f5..41cf1b6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -151,13 +151,13 @@ export default function Home() {
 
     if (!user) {
         return (
-            <main className="flex min-h-screen flex-col items-center justify-center p-6 bg-[#0F1014]">
+            <main className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-950">
                 <div className="mb-12 text-center animate-in fade-in zoom-in duration-1000">
-                    <h1 className="text-6xl font-display font-bold text-white tracking-tighter mb-4">
-                        DRAM<span className="text-[#C89D46]">LOG</span>
+                    <h1 className="text-6xl font-bold text-zinc-50 tracking-tighter mb-4">
+                        DRAM<span className="text-orange-600">LOG</span>
                     </h1>
-                    <p className="text-[#8F9096] max-w-sm mx-auto font-sans tracking-wide">
-                        Premium Digitaler Tasting Begleiter für Genießer.
+                    <p className="text-zinc-500 max-w-sm mx-auto font-bold tracking-wide">
+                        Modern Minimalist Tasting Tool.
                     </p>
                     <div className="mt-8">
                         <LanguageSwitcher />
@@ -169,20 +169,20 @@ export default function Home() {
     }
 
     return (
-        <main className="flex min-h-screen flex-col items-center gap-6 md:gap-12 p-4 md:p-24 bg-[#0F1014] pb-32">
+        <main className="flex min-h-screen flex-col items-center gap-6 md:gap-12 p-4 md:p-24 bg-zinc-950 pb-32">
             <div className="z-10 max-w-5xl w-full flex flex-col items-center gap-12">
                 <header className="w-full flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-0">
                     <div className="flex flex-col items-center sm:items-start group">
-                        <h1 className="text-4xl font-display font-bold text-white tracking-tighter">
-                            DRAM<span className="text-[#C89D46]">LOG</span>
+                        <h1 className="text-4xl font-bold text-zinc-50 tracking-tighter">
+                            DRAM<span className="text-orange-600">LOG</span>
                         </h1>
                         {activeSession && (
                             <div className="flex items-center gap-2 mt-1 animate-in fade-in slide-in-from-left-2 duration-700">
                                 <div className="relative flex h-2 w-2">
-                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#C89D46] opacity-75"></span>
-                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-[#C89D46]"></span>
+                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-600 opacity-75"></span>
+                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-orange-600"></span>
                                 </div>
-                                <span className="text-[9px] font-sans font-bold uppercase tracking-widest text-[#C89D46] flex items-center gap-1">
+                                <span className="text-[9px] font-bold uppercase tracking-widest text-orange-600 flex items-center gap-1">
                                     <Sparkles size={10} className="animate-pulse" />
                                     Live: {activeSession.name}
                                 </span>
@@ -195,7 +195,7 @@ export default function Home() {
                         <DramOfTheDay bottles={bottles} />
                         <button
                             onClick={handleLogout}
-                            className="text-xs font-sans font-bold uppercase tracking-widest text-[#8F9096] hover:text-white transition-colors"
+                            className="text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-white transition-colors"
                         >
                             {t('home.logout')}
                         </button>
@@ -206,7 +206,7 @@ export default function Home() {
                     <StatsDashboard bottles={bottles} />
                 </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-12 w-full max-w-5xl">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full max-w-5xl">
                     <div className="flex flex-col gap-8">
                         <SessionList />
                     </div>
@@ -215,27 +215,27 @@ export default function Home() {
                     </div>
                 </div>
 
-                <div className="w-full mt-4">
+                <div className="w-full mt-4" id="collection">
                     <div className="flex items-end justify-between mb-8">
-                        <h2 className="text-3xl font-display font-bold text-white">
+                        <h2 className="text-3xl font-bold text-zinc-50 uppercase tracking-tight">
                             Collection
                         </h2>
-                        <span className="text-xs font-sans font-bold text-[#8F9096] uppercase tracking-widest pb-1">
+                        <span className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest pb-1">
                             {bottles.length} Bottles
                         </span>
                     </div>
 
                     {isLoading ? (
                         <div className="flex justify-center py-20">
-                            <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-[#C89D46]"></div>
+                            <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-orange-600"></div>
                         </div>
                     ) : fetchError ? (
-                        <div className="p-12 bg-[#1A1B20] border border-white/10 rounded-3xl text-center">
-                            <p className="text-white font-display text-xl mb-4">{t('common.error')}</p>
-                            <p className="text-[#8F9096] text-sm italic mb-8 mx-auto max-w-xs">{fetchError}</p>
+                        <div className="p-12 bg-zinc-900 border border-zinc-800 rounded-3xl text-center">
+                            <p className="text-zinc-50 font-bold text-xl mb-2">{t('common.error')}</p>
+                            <p className="text-zinc-500 text-xs italic mb-8 mx-auto max-w-xs">{fetchError}</p>
                             <button
                                 onClick={fetchCollection}
-                                className="px-10 py-4 bg-[#C89D46] hover:bg-[#E0B456] text-[#0F1014] rounded-full text-xs font-sans font-bold uppercase tracking-widest transition-all"
+                                className="px-10 py-4 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl text-[10px] font-bold uppercase tracking-widest transition-all shadow-lg shadow-orange-950/20"
                             >
                                 {t('home.reTry')}
                             </button>
diff --git a/src/components/ActiveSessionBanner.tsx b/src/components/ActiveSessionBanner.tsx
index 254eb6a..1cc8dce 100644
--- a/src/components/ActiveSessionBanner.tsx
+++ b/src/components/ActiveSessionBanner.tsx
@@ -14,7 +14,7 @@ export default function ActiveSessionBanner() {
 
     return (
         <div className="fixed top-0 left-0 right-0 z-[100] animate-in slide-in-from-top duration-500">
-            <div className="bg-amber-600 text-white px-4 py-2 flex items-center justify-between shadow-lg">
+            <div className="bg-orange-600 text-white px-4 py-2 flex items-center justify-between shadow-lg">
                 <Link
                     href={`/sessions/${activeSession.id}`}
                     className="flex items-center gap-3 flex-1 min-w-0"
@@ -23,7 +23,7 @@ export default function ActiveSessionBanner() {
                         <div className="bg-white/20 p-1.5 rounded-lg">
                             <Sparkles size={16} className="text-white animate-pulse" />
                         </div>
-                        <div className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-amber-600 animate-ping" />
+                        <div className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-orange-600 animate-ping" />
                     </div>
                     <div className="min-w-0">
                         <div className="flex items-center gap-2 mb-0.5">
diff --git a/src/components/AvatarStack.tsx b/src/components/AvatarStack.tsx
index 85e4040..5161103 100644
--- a/src/components/AvatarStack.tsx
+++ b/src/components/AvatarStack.tsx
@@ -30,7 +30,7 @@ export default function AvatarStack({ names, limit = 3, size = 'sm' }: AvatarSta
             {visibleNames.map((name, i) => (
                 <div
                     key={`${name}-${i}`}
-                    className={`${sizeClasses} rounded-full bg-amber-100 dark:bg-amber-900/30 border-2 border-white dark:border-zinc-900 flex items-center justify-center text-amber-700 dark:text-amber-400 font-black ring-1 ring-amber-500/10 shadow-sm relative group`}
+                    className={`${sizeClasses} rounded-full bg-orange-900/30 border-2 border-zinc-950 flex items-center justify-center text-orange-400 font-bold ring-1 ring-orange-500/10 shadow-sm relative group`}
                     title={name}
                 >
                     {getInitials(name)}
diff --git a/src/components/BottleDetails.tsx b/src/components/BottleDetails.tsx
index 23cada4..5db25ae 100644
--- a/src/components/BottleDetails.tsx
+++ b/src/components/BottleDetails.tsx
@@ -24,7 +24,7 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
     if (loading) {
         return (
             <div className="min-h-[60vh] flex flex-col items-center justify-center gap-4">
-                <Loader2 size={48} className="animate-spin text-amber-600" />
+                <Loader2 size={48} className="animate-spin text-orange-600" />
                 <p className="text-zinc-500 font-bold animate-pulse uppercase tracking-widest text-xs">{t('common.loading')}</p>
             </div>
         );
@@ -42,7 +42,7 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
                         Inhalte konnten nicht geladen werden. Bitte stelle eine Internetverbindung her, um diese Flasche zum ersten Mal zu laden.
                     </p>
                 </div>
-                <Link href="/" className="px-6 py-3 bg-amber-600 text-white rounded-2xl text-sm font-black uppercase tracking-widest shadow-xl shadow-amber-600/20">
+                <Link href="/" className="px-6 py-3 bg-orange-600 text-white rounded-2xl text-sm font-black uppercase tracking-widest shadow-xl shadow-orange-950/20">
                     Zurück zum Vault
                 </Link>
             </div>
@@ -56,22 +56,22 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
             {/* Back Button */}
             <Link
                 href={`/${sessionId ? `?session_id=${sessionId}` : ''}`}
-                className="inline-flex items-center gap-2 text-zinc-500 hover:text-amber-600 transition-colors font-medium mb-4"
+                className="inline-flex items-center gap-2 text-zinc-500 hover:text-orange-600 transition-colors font-bold mb-4"
             >
                 <ChevronLeft size={20} />
                 Zurück zur Sammlung
             </Link>
 
             {isOffline && (
-                <div className="bg-amber-600/10 border border-amber-600/20 p-3 rounded-2xl flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
-                    <WifiOff size={16} className="text-amber-600" />
-                    <p className="text-[10px] font-black uppercase tracking-widest text-amber-700">Offline-Modus: Daten aus dem Cache</p>
+                <div className="bg-orange-600/10 border border-orange-600/20 p-3 rounded-2xl flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
+                    <WifiOff size={16} className="text-orange-600" />
+                    <p className="text-[10px] font-bold uppercase tracking-widest text-orange-500">Offline-Modus: Daten aus dem Cache</p>
                 </div>
             )}
 
             {/* Hero Section */}
             <section className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
-                <div className="aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
+                <div className="aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl border border-zinc-800 bg-zinc-900">
                     <img
                         src={getStorageUrl(bottle.image_url)}
                         alt={bottle.name}
@@ -81,10 +81,10 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
 
                 <div className="space-y-6">
                     <div>
-                        <h1 className="text-2xl md:text-4xl font-black text-zinc-900 dark:text-white tracking-tighter leading-tight">
+                        <h1 className="text-2xl md:text-4xl font-bold text-zinc-50 tracking-tighter leading-tight uppercase">
                             {bottle.name}
                         </h1>
-                        <p className="text-sm md:text-xl text-amber-600 font-bold mt-1 uppercase tracking-widest">{bottle.distillery}</p>
+                        <p className="text-sm md:text-xl text-orange-600 font-bold mt-1 uppercase tracking-widest">{bottle.distillery}</p>
 
                         {bottle.whiskybase_id && (
                             <div className="mt-4">
@@ -92,9 +92,9 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
                                     href={`https://www.whiskybase.com/whiskies/whisky/${bottle.whiskybase_id}`}
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    className="inline-flex items-center gap-2 px-4 py-2 bg-[#db0000] text-white rounded-xl text-sm font-bold shadow-lg shadow-red-600/20 hover:scale-[1.05] transition-transform"
+                                    className="inline-flex items-center gap-2 px-4 py-2 bg-zinc-900 text-zinc-400 border border-zinc-800 rounded-xl text-xs font-bold hover:text-orange-600 transition-colors"
                                 >
-                                    <ExternalLink size={16} />
+                                    <ExternalLink size={14} />
                                     Whiskybase ID: {bottle.whiskybase_id}
                                 </a>
                             </div>
@@ -102,59 +102,59 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
                     </div>
 
                     <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-                        <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm flex flex-col justify-between">
+                        <div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm flex flex-col justify-between">
                             <div>
-                                <div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
+                                <div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
                                     <Tag size={12} /> Kategorie
                                 </div>
-                                <div className="font-bold text-sm dark:text-zinc-200">{bottle.category || '-'}</div>
+                                <div className="font-bold text-sm text-zinc-200">{bottle.category || '-'}</div>
                             </div>
                         </div>
-                        <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
-                            <div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
+                        <div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm">
+                            <div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
                                 <Droplets size={12} /> Alkoholgehalt
                             </div>
-                            <div className="font-bold text-sm dark:text-zinc-200">{bottle.abv}% Vol.</div>
+                            <div className="font-bold text-sm text-zinc-200">{bottle.abv}% Vol.</div>
                         </div>
-                        <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
-                            <div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
+                        <div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm">
+                            <div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
                                 <Award size={12} /> Alter
                             </div>
-                            <div className="font-bold text-sm dark:text-zinc-200">{bottle.age ? `${bottle.age} J.` : '-'}</div>
+                            <div className="font-bold text-sm text-zinc-200">{bottle.age ? `${bottle.age} J.` : '-'}</div>
                         </div>
 
                         {bottle.distilled_at && (
-                            <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
-                                <div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
+                            <div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm">
+                                <div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
                                     <Calendar size={12} /> Destilliert
                                 </div>
-                                <div className="font-bold text-sm dark:text-zinc-200">{bottle.distilled_at}</div>
+                                <div className="font-bold text-sm text-zinc-200">{bottle.distilled_at}</div>
                             </div>
                         )}
 
                         {bottle.bottled_at && (
-                            <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
-                                <div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
+                            <div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm">
+                                <div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
                                     <Package size={12} /> Abgefüllt
                                 </div>
-                                <div className="font-bold text-sm dark:text-zinc-200">{bottle.bottled_at}</div>
+                                <div className="font-bold text-sm text-zinc-200">{bottle.bottled_at}</div>
                             </div>
                         )}
 
                         {bottle.batch_info && (
-                            <div className="p-4 bg-zinc-50 dark:bg-zinc-800/30 rounded-2xl border border-dashed border-zinc-200 dark:border-zinc-700/50 md:col-span-1">
-                                <div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
+                            <div className="p-4 bg-zinc-800/30 rounded-2xl border border-dashed border-zinc-700/50 md:col-span-1">
+                                <div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
                                     <Info size={12} /> Batch / Code
                                 </div>
-                                <div className="font-mono text-xs dark:text-zinc-300 truncate" title={bottle.batch_info}>{bottle.batch_info}</div>
+                                <div className="font-mono text-xs text-zinc-300 truncate" title={bottle.batch_info}>{bottle.batch_info}</div>
                             </div>
                         )}
 
-                        <div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
-                            <div className="flex items-center gap-2 text-zinc-400 text-[10px] font-black uppercase mb-1">
+                        <div className="p-4 bg-zinc-900 rounded-2xl border border-zinc-800 shadow-sm">
+                            <div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
                                 <Calendar size={12} /> Letzter Dram
                             </div>
-                            <div className="font-bold text-sm dark:text-zinc-200">
+                            <div className="font-bold text-sm text-zinc-200">
                                 {tastings && tastings.length > 0
                                     ? new Date(tastings[0].created_at).toLocaleDateString('de-DE')
                                     : 'Noch nie'}
@@ -164,9 +164,9 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
 
                     <div className="pt-2 flex flex-wrap gap-4">
                         {isOffline ? (
-                            <div className="w-full p-4 bg-zinc-100 dark:bg-zinc-800/50 border border-dashed border-zinc-200 dark:border-zinc-700 rounded-2xl flex items-center justify-center gap-2">
-                                <Info size={14} className="text-zinc-400" />
-                                <span className="text-[10px] font-black uppercase text-zinc-400 tracking-widest">Bearbeiten & Löschen nur online möglich</span>
+                            <div className="w-full p-4 bg-zinc-900 border border-dashed border-zinc-800 rounded-2xl flex items-center justify-center gap-2">
+                                <Info size={14} className="text-zinc-500" />
+                                <span className="text-[10px] font-bold uppercase text-zinc-500 tracking-widest">Bearbeiten & Löschen nur online möglich</span>
                             </div>
                         ) : (
                             <>
@@ -178,21 +178,21 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
                 </div>
             </section>
 
-            <hr className="border-zinc-200 dark:border-zinc-800" />
+            <hr className="border-zinc-800" />
 
             {/* Tasting Notes Section */}
             <section className="space-y-8">
                 <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
                     <div>
-                        <h2 className="text-3xl font-black text-zinc-900 dark:text-white tracking-tight">Tasting Notes</h2>
+                        <h2 className="text-3xl font-bold text-zinc-50 tracking-tight uppercase">Tasting Notes</h2>
                         <p className="text-zinc-500 mt-1">Hier findest du deine bisherigen Eindrücke.</p>
                     </div>
                 </div>
 
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8 items-start">
                     {/* Form */}
-                    <div className="lg:col-span-1 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-6 bg-white dark:bg-zinc-900/50 md:sticky md:top-24">
-                        <h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-amber-600">
+                    <div className="lg:col-span-1 border border-zinc-800 rounded-3xl p-6 bg-zinc-900/50 md:sticky md:top-24">
+                        <h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-orange-600 uppercase tracking-widest">
                             <Droplets size={20} /> Dram bewerten
                         </h3>
                         <TastingNoteForm bottleId={bottle.id} sessionId={sessionId} />
diff --git a/src/components/BottleGrid.tsx b/src/components/BottleGrid.tsx
index 248f105..a061d18 100644
--- a/src/components/BottleGrid.tsx
+++ b/src/components/BottleGrid.tsx
@@ -36,71 +36,65 @@ function BottleCard({ bottle, sessionId }: BottleCardProps) {
     return (
         <Link
             href={`/bottles/${bottle.id}${sessionId ? `?session_id=${sessionId}` : ''}`}
-            className="block h-[420px] group relative overflow-hidden rounded-2xl border border-white/5 transition-all duration-700 hover:shadow-[0_20px_50px_rgba(0,0,0,0.5)] active:scale-[0.98]"
+            className="block h-fit group relative overflow-hidden rounded-xl bg-zinc-900 border border-zinc-800 transition-all duration-300 hover:border-zinc-700 active:scale-[0.98]"
         >
-            {/* Image Layer - Edge to Edge */}
-            <div className="absolute inset-0">
+            {/* Image Layer - Clean Split Top */}
+            <div className="aspect-[4/3] overflow-hidden">
                 <img
                     src={getStorageUrl(bottle.image_url)}
                     alt={bottle.name}
-                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000 ease-out"
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
                 />
-
-                {/* Gradient Overlay as requested: bottom third, black to transparent */}
-                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent" />
             </div>
 
-            {/* Content Layer */}
-            <div className="absolute inset-0 flex flex-col justify-end p-6">
-                <div className="space-y-3">
-                    {/* Tags Layer - Minimalist Glassmorphism */}
-                    <div className="flex flex-wrap gap-2 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-500">
-                        <span className="px-3 py-1 bg-white/10 backdrop-blur-md border border-white/10 text-[9px] font-sans font-bold uppercase tracking-widest text-[#C89D46] rounded-full">
-                            {shortenCategory(bottle.category)}
-                        </span>
-                        <span className="px-3 py-1 bg-white/10 backdrop-blur-md border border-white/10 text-[9px] font-sans font-bold uppercase tracking-widest text-white/60 rounded-full">
-                            {bottle.abv}% VOL
-                        </span>
-                    </div>
+            {/* Info Layer - Clean Split Bottom */}
+            <div className="p-4 space-y-4">
+                <div className="space-y-1">
+                    <p className="text-[10px] font-bold text-orange-500 uppercase tracking-widest leading-none">
+                        {bottle.distillery}
+                    </p>
+                    <h3 className="font-bold text-lg text-zinc-50 leading-tight">
+                        {bottle.name || t('grid.unknownBottle')}
+                    </h3>
+                </div>
 
-                    <div>
-                        <p className="text-[10px] font-sans font-bold text-[#C89D46] uppercase tracking-[0.2em] mb-1">
-                            {bottle.distillery}
-                        </p>
-                        <h3 className="font-display font-bold text-2xl text-white leading-tight drop-shadow-lg">
-                            {bottle.name || t('grid.unknownBottle')}
-                        </h3>
-                    </div>
+                <div className="flex flex-wrap gap-2">
+                    <span className="px-2 py-0.5 bg-zinc-800 text-zinc-400 text-[9px] font-bold uppercase tracking-widest rounded-md">
+                        {shortenCategory(bottle.category)}
+                    </span>
+                    <span className="px-2 py-0.5 bg-zinc-800 text-zinc-400 text-[9px] font-bold uppercase tracking-widest rounded-md">
+                        {bottle.abv}% VOL
+                    </span>
+                </div>
 
-                    {/* Metadata items */}
-                    <div className="flex items-center gap-4 pt-2 border-t border-white/10 opacity-60 group-hover:opacity-100 transition-opacity">
-                        <div className="flex items-center gap-1.5 text-[10px] font-sans font-medium text-white/70">
-                            <Calendar size={12} className="text-[#C89D46]" />
-                            {new Date(bottle.created_at).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US')}
+                {/* Metadata items */}
+                <div className="flex items-center gap-4 pt-3 border-t border-zinc-800/50">
+                    <div className="flex items-center gap-1 text-[10px] font-medium text-zinc-500">
+                        <Calendar size={12} className="text-zinc-500" />
+                        {new Date(bottle.created_at).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US')}
+                    </div>
+                    {bottle.last_tasted && (
+                        <div className="flex items-center gap-1 text-[10px] font-medium text-zinc-500">
+                            <Clock size={12} className="text-zinc-500" />
+                            {new Date(bottle.last_tasted).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US')}
                         </div>
-                        {bottle.last_tasted && (
-                            <div className="flex items-center gap-1.5 text-[10px] font-sans font-medium text-white/70">
-                                <Clock size={12} className="text-[#C89D46]" />
-                                {new Date(bottle.last_tasted).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US')}
-                            </div>
-                        )}
-                    </div>
+                    )}
                 </div>
             </div>
 
             {/* Top Overlays */}
             {(bottle.is_whisky === false || (bottle.confidence && bottle.confidence < 70)) && (
-                <div className="absolute top-4 right-4 z-10">
-                    <div className="bg-red-500/90 backdrop-blur-sm text-white p-2 rounded-full animate-pulse shadow-lg">
-                        <AlertCircle size={14} />
+                <div className="absolute top-3 right-3 z-10">
+                    <div className="bg-red-500 text-white p-1.5 rounded-full shadow-lg">
+                        <AlertCircle size={12} />
                     </div>
                 </div>
             )}
 
             {sessionId && (
-                <div className="absolute top-4 left-4 z-10 bg-[#C89D46] text-[#0F1014] text-[9px] font-black px-3 py-1.5 rounded-full flex items-center gap-2 border border-white/20 shadow-xl">
-                    <PlusCircle size={14} />
-                    ADD TO SESSION
+                <div className="absolute top-3 left-3 z-10 bg-orange-600 text-white text-[9px] font-bold px-2 py-1 rounded-md flex items-center gap-1.5 shadow-xl">
+                    <PlusCircle size={12} />
+                    ADD
                 </div>
             )}
         </Link>
@@ -200,13 +194,13 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
             <div id="search-filter" className="w-full max-w-6xl mx-auto px-4 space-y-6 scroll-mt-32">
                 <div className="flex flex-col md:flex-row gap-4">
                     <div className="relative flex-1 group">
-                        <Search className="absolute left-0 top-1/2 -translate-y-1/2 text-[#8F9096] group-focus-within:text-[#C89D46] transition-colors" size={20} />
+                        <Search className="absolute left-0 top-1/2 -translate-y-1/2 text-zinc-500 group-focus-within:text-orange-500 transition-colors" size={20} />
                         <input
                             type="text"
                             placeholder={t('grid.searchPlaceholder')}
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
-                            className="w-full pl-8 pr-8 py-4 bg-transparent border-b border-white/10 focus:border-[#C89D46] outline-none transition-all text-white placeholder:text-[#8F9096] font-sans"
+                            className="w-full pl-8 pr-8 py-4 bg-transparent border-b border-zinc-800 focus:border-orange-500 outline-none transition-all text-zinc-50 placeholder:text-zinc-500"
                         />
                         {searchQuery && (
                             <button
@@ -222,24 +216,24 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                         <select
                             value={sortBy}
                             onChange={(e) => setSortBy(e.target.value as any)}
-                            className="bg-transparent border-none text-[#8F9096] text-xs font-sans font-bold uppercase tracking-widest outline-none cursor-pointer hover:text-white transition-colors appearance-none"
+                            className="bg-transparent border-none text-zinc-500 text-xs font-bold uppercase tracking-widest outline-none cursor-pointer hover:text-white transition-colors appearance-none"
                         >
-                            <option value="created_at" className="bg-[#0F1014]">{t('grid.sortBy.createdAt')}</option>
-                            <option value="last_tasted" className="bg-[#0F1014]">{t('grid.sortBy.lastTasted')}</option>
-                            <option value="name" className="bg-[#0F1014]">{t('grid.sortBy.name')}</option>
+                            <option value="created_at" className="bg-zinc-950">{t('grid.sortBy.createdAt')}</option>
+                            <option value="last_tasted" className="bg-zinc-950">{t('grid.sortBy.lastTasted')}</option>
+                            <option value="name" className="bg-zinc-950">{t('grid.sortBy.name')}</option>
                         </select>
 
                         <button
                             onClick={() => setIsFiltersOpen(!isFiltersOpen)}
-                            className={`flex items-center gap-2 text-xs font-sans font-bold uppercase tracking-widest transition-all ${isFiltersOpen || activeFiltersCount > 0
-                                ? 'text-[#C89D46]'
-                                : 'text-[#8F9096] hover:text-white'
+                            className={`flex items-center gap-2 text-xs font-bold uppercase tracking-widest transition-all ${isFiltersOpen || activeFiltersCount > 0
+                                ? 'text-orange-500'
+                                : 'text-zinc-500 hover:text-white'
                                 }`}
                         >
                             <Filter size={18} />
                             <span className="hidden sm:inline">{t('grid.filters')}</span>
                             {activeFiltersCount > 0 && (
-                                <span className="bg-[#C89D46] text-[#0F1014] w-4 h-4 rounded-full flex items-center justify-center text-[8px] font-black">
+                                <span className="bg-orange-600 text-white w-4 h-4 rounded-full flex items-center justify-center text-[8px] font-bold">
                                     {activeFiltersCount}
                                 </span>
                             )}
@@ -247,13 +241,13 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                     </div>
                 </div>
 
-                {/* Category Quick Filter - Glass Chips */}
+                {/* Category Quick Filter - Flat Chips */}
                 <div className="flex gap-3 overflow-x-auto pb-2 -mx-4 px-4 scrollbar-hide touch-pan-x">
                     <button
                         onClick={() => setSelectedCategory(null)}
-                        className={`px-4 py-2 rounded-full text-[10px] font-sans font-bold uppercase tracking-widest whitespace-nowrap transition-all border ${selectedCategory === null
-                            ? 'bg-[#C89D46] border-[#C89D46] text-[#0F1014]'
-                            : 'bg-white/5 border-white/10 text-[#8F9096] hover:border-white/20'
+                        className={`px-4 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest whitespace-nowrap transition-all border ${selectedCategory === null
+                            ? 'bg-orange-600 border-orange-600 text-white'
+                            : 'bg-zinc-900 border-zinc-800 text-zinc-400 hover:border-zinc-700'
                             }`}
                     >
                         {t('common.all')}
@@ -262,9 +256,9 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                         <button
                             key={cat}
                             onClick={() => setSelectedCategory(selectedCategory === cat ? null : cat)}
-                            className={`px-4 py-2 rounded-full text-[10px] font-sans font-bold uppercase tracking-widest whitespace-nowrap transition-all border ${selectedCategory === cat
-                                ? 'bg-[#C89D46] border-[#C89D46] text-[#0F1014]'
-                                : 'bg-white/5 border-white/10 text-[#8F9096] hover:border-white/20'
+                            className={`px-4 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest whitespace-nowrap transition-all border ${selectedCategory === cat
+                                ? 'bg-orange-600 border-orange-600 text-white'
+                                : 'bg-zinc-900 border-zinc-800 text-zinc-400 hover:border-zinc-700'
                                 }`}
                         >
                             {shortenCategory(cat)}
@@ -272,17 +266,17 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                     ))}
                 </div>
 
-                {/* Collapsible Advanced Filters - Minimalist Overlay */}
+                {/* Collapsible Advanced Filters - Industrial Overlay */}
                 {isFiltersOpen && (
-                    <div className="p-8 bg-[#1A1B20] border border-white/10 rounded-3xl space-y-8 animate-in fade-in slide-in-from-top-4 duration-500">
+                    <div className="p-8 bg-zinc-900 border border-zinc-800 rounded-2xl space-y-8 animate-in fade-in slide-in-from-top-4 duration-500">
                         <div className="space-y-4">
-                            <label className="text-[10px] font-sans font-bold uppercase tracking-[0.2em] text-[#8F9096]">{t('grid.filter.distillery')}</label>
+                            <label className="text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">{t('grid.filter.distillery')}</label>
                             <div className="flex flex-wrap gap-2">
                                 <button
                                     onClick={() => setSelectedDistillery(null)}
-                                    className={`px-4 py-2 rounded-full text-[10px] font-sans font-bold uppercase tracking-widest transition-all border ${selectedDistillery === null
-                                        ? 'bg-[#C89D46] border-[#C89D46] text-[#0F1014]'
-                                        : 'bg-white/5 border-white/10 text-[#8F9096]'
+                                    className={`px-4 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest transition-all border ${selectedDistillery === null
+                                        ? 'bg-orange-600 border-orange-600 text-white'
+                                        : 'bg-zinc-800 border-zinc-700 text-zinc-400'
                                         }`}
                                 >
                                     {t('common.all')}
@@ -291,9 +285,9 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                                     <button
                                         key={dist}
                                         onClick={() => setSelectedDistillery(selectedDistillery === dist ? null : dist)}
-                                        className={`px-4 py-2 rounded-full text-[10px] font-sans font-bold uppercase tracking-widest transition-all border ${selectedDistillery === dist
-                                            ? 'bg-[#C89D46] border-[#C89D46] text-[#0F1014]'
-                                            : 'bg-white/5 border-white/10 text-[#8F9096]'
+                                        className={`px-4 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest transition-all border ${selectedDistillery === dist
+                                            ? 'bg-orange-600 border-orange-600 text-white'
+                                            : 'bg-zinc-800 border-zinc-700 text-zinc-400'
                                             }`}
                                     >
                                         {dist}
@@ -302,20 +296,20 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
                             </div>
                         </div>
 
-                        <div className="pt-6 border-t border-white/5 flex justify-between items-center">
+                        <div className="pt-6 border-t border-zinc-800 flex justify-between items-center">
                             <button
                                 onClick={() => {
                                     setSelectedCategory(null);
                                     setSelectedDistillery(null);
                                     setSearchQuery('');
                                 }}
-                                className="text-[10px] font-sans font-bold text-red-500 uppercase tracking-widest hover:text-red-400"
+                                className="text-[10px] font-bold text-red-500 uppercase tracking-widest hover:text-red-400"
                             >
                                 {t('grid.resetAll')}
                             </button>
                             <button
                                 onClick={() => setIsFiltersOpen(false)}
-                                className="px-8 py-3 bg-white text-[#0F1014] text-[10px] font-sans font-bold rounded-full uppercase tracking-widest transition-transform active:scale-95"
+                                className="px-8 py-3 bg-zinc-50 text-zinc-950 text-[10px] font-bold rounded-full uppercase tracking-widest transition-transform active:scale-95"
                             >
                                 {t('grid.close')}
                             </button>
diff --git a/src/components/BottomNavigation.tsx b/src/components/BottomNavigation.tsx
index 8fe190e..39f847c 100644
--- a/src/components/BottomNavigation.tsx
+++ b/src/components/BottomNavigation.tsx
@@ -31,7 +31,7 @@ export const BottomNavigation = ({ onHome, onShelf, onSearch, onProfile, onScan
     };
 
     return (
-        <div className="fixed bottom-0 left-0 w-full z-50 pointer-events-none">
+        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] max-w-sm z-50 pointer-events-none">
             {/* Hidden Input for Scanning */}
             <input
                 type="file"
@@ -41,67 +41,49 @@ export const BottomNavigation = ({ onHome, onShelf, onSearch, onProfile, onScan
                 className="hidden"
             />
 
-            {/* Background Container mit Glassmorphism */}
-            <div className="relative bg-[#0F1014]/90 backdrop-blur-xl border-t border-white/10 pb-safe pt-2 pointer-events-auto shadow-[0_-10px_40px_rgba(0,0,0,0.5)]">
+            <div className="flex items-center justify-between px-2 py-2 bg-zinc-900/90 backdrop-blur-lg border border-zinc-800 rounded-full shadow-2xl pointer-events-auto">
+                {/* Left Items */}
+                <button
+                    onClick={onHome}
+                    className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
+                    aria-label="Home"
+                >
+                    <Home size={22} strokeWidth={2.5} />
+                </button>
 
-                <div className="flex justify-between items-end px-6 h-16">
-                    {/* Left Actions */}
-                    <button
-                        onClick={onHome}
-                        className="flex flex-col items-center gap-1 text-[#C89D46] w-12 transition-all active:scale-90"
-                    >
-                        <Home size={24} />
-                        <span className="text-[10px] font-medium font-sans uppercase tracking-widest opacity-80">Home</span>
-                    </button>
+                <button
+                    onClick={onShelf}
+                    className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
+                    aria-label="Shelf"
+                >
+                    <Grid size={22} strokeWidth={2.5} />
+                </button>
 
-                    <button
-                        onClick={onShelf}
-                        className="flex flex-col items-center gap-1 text-[#8F9096] hover:text-white w-12 transition-all active:scale-90"
-                    >
-                        <Grid size={24} />
-                        <span className="text-[10px] font-medium font-sans uppercase tracking-widest opacity-80">Shelf</span>
-                    </button>
+                {/* PRIMARY ACTION - The "Industrial Button" */}
+                <button
+                    onClick={handleScanClick}
+                    className="flex items-center justify-center w-14 h-14 rounded-full bg-orange-600 text-white hover:bg-orange-500 active:scale-95 transition-all mx-2 shadow-lg shadow-orange-950/40"
+                    aria-label="Scan Bottle"
+                >
+                    <Scan size={26} strokeWidth={2.5} />
+                </button>
 
-                    {/* Spacer für den Center Button */}
-                    <div className="w-16" />
-
-                    {/* Right Actions */}
-                    <button
-                        onClick={onSearch}
-                        className="flex flex-col items-center gap-1 text-[#8F9096] hover:text-white w-12 transition-all active:scale-90"
-                    >
-                        <Search size={24} />
-                        <span className="text-[10px] font-medium font-sans uppercase tracking-widest opacity-80">Search</span>
-                    </button>
-
-                    <button
-                        onClick={onProfile}
-                        className="flex flex-col items-center gap-1 text-[#8F9096] hover:text-white w-12 transition-all active:scale-90"
-                    >
-                        <User size={24} />
-                        <span className="text-[10px] font-medium font-sans uppercase tracking-widest opacity-80">Admin</span>
-                    </button>
-                </div>
-
-                {/* THE FLOATING MAGIC BUTTON */}
-                <div className="absolute -top-10 left-1/2 -translate-x-1/2 pointer-events-auto">
-                    <button
-                        onClick={handleScanClick}
-                        className="flex items-center justify-center w-20 h-20 rounded-full 
-                        bg-gradient-to-tr from-[#C89D46] to-[#E0B456]
-                        shadow-[0_0_30px_rgba(200,157,70,0.4)]
-                        border-[6px] border-[#0F1014]
-                        active:scale-95 transition-transform duration-200"
-                        aria-label="Scan Bottle"
-                    >
-                        <div className="bg-[#0F1014] p-3 rounded-full">
-                            <Scan color="#C89D46" size={32} strokeWidth={2.5} />
-                        </div>
-                    </button>
-                    {/* Visual Gold Glow */}
-                    <div className="absolute inset-0 rounded-full bg-[#C89D46]/20 blur-2xl -z-10 animate-pulse" />
-                </div>
+                {/* Right Items */}
+                <button
+                    onClick={onSearch}
+                    className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
+                    aria-label="Search"
+                >
+                    <Search size={22} strokeWidth={2.5} />
+                </button>
 
+                <button
+                    onClick={onProfile}
+                    className="p-3 text-zinc-400 hover:text-white transition-colors active:scale-90"
+                    aria-label="Profile"
+                >
+                    <User size={22} strokeWidth={2.5} />
+                </button>
             </div>
         </div>
     );
diff --git a/src/components/BuddyList.tsx b/src/components/BuddyList.tsx
index 4ba9208..4aebbcc 100644
--- a/src/components/BuddyList.tsx
+++ b/src/components/BuddyList.tsx
@@ -80,18 +80,18 @@ export default function BuddyList() {
     };
 
     return (
-        <div className="bg-[#1A1B21] rounded-3xl p-6 border border-white/5 shadow-xl transition-all duration-300">
+        <div className="bg-zinc-900 rounded-3xl p-6 border border-zinc-800 shadow-xl transition-all duration-300">
             <div className="flex items-center justify-between mb-6">
-                <h3 className="text-sm font-sans font-bold uppercase tracking-[0.2em] flex items-center gap-2 text-[#8F9096]">
-                    <Users size={18} className="text-[#C89D46]" />
+                <h3 className="text-sm font-bold uppercase tracking-[0.2em] flex items-center gap-2 text-zinc-400">
+                    <Users size={18} className="text-orange-600" />
                     {t('buddy.title')}
                     {!isCollapsed && buddies.length > 0 && (
-                        <span className="text-[10px] font-sans font-bold opacity-50 ml-2">({buddies.length})</span>
+                        <span className="text-[10px] font-bold opacity-50 ml-2">({buddies.length})</span>
                     )}
                 </h3>
                 <button
                     onClick={handleToggleCollapse}
-                    className="p-2 hover:bg-white/5 rounded-xl transition-colors text-[#8F9096] hover:text-[#C89D46]"
+                    className="p-2 hover:bg-zinc-800 rounded-xl transition-colors text-zinc-500 hover:text-orange-600"
                     title={isCollapsed ? 'Aufklappen' : 'Einklappen'}
                 >
                     {isCollapsed ? <ChevronDown size={20} /> : <ChevronUp size={20} />}
@@ -106,23 +106,23 @@ export default function BuddyList() {
                             value={newName}
                             onChange={(e) => setNewName(e.target.value)}
                             placeholder={t('buddy.placeholder')}
-                            className="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm text-white placeholder:text-[#8F9096] focus:outline-none focus:border-[#C89D46] transition-colors"
+                            className="flex-1 bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-2 text-sm text-zinc-50 placeholder:text-zinc-600 focus:outline-none focus:border-orange-600 transition-colors"
                         />
                         <button
                             type="submit"
                             disabled={isAdding || !newName.trim()}
-                            className="bg-[#C89D46] hover:bg-[#A67D2E] text-[#0F1014] p-2 rounded-xl transition-all disabled:opacity-50"
+                            className="bg-orange-600 hover:bg-orange-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
                         >
                             {isAdding ? <Loader2 size={20} className="animate-spin" /> : <UserPlus size={20} />}
                         </button>
                     </form>
 
                     {isLoading ? (
-                        <div className="flex justify-center py-8 text-[#8F9096]">
+                        <div className="flex justify-center py-8 text-zinc-500">
                             <Loader2 size={24} className="animate-spin" />
                         </div>
                     ) : buddies.length === 0 ? (
-                        <div className="text-center py-8 text-[#8F9096] text-xs font-sans">
+                        <div className="text-center py-8 text-zinc-600 text-xs font-bold">
                             {t('buddy.noBuddies')}
                         </div>
                     ) : (
@@ -130,22 +130,22 @@ export default function BuddyList() {
                             {buddies.map((buddy) => (
                                 <div
                                     key={buddy.id}
-                                    className="flex items-center justify-between p-4 bg-white/5 rounded-[2rem] border border-white/5 group hover:border-white/10 transition-all duration-300"
+                                    className="flex items-center justify-between p-4 bg-zinc-950 rounded-2xl border border-zinc-800 group hover:border-zinc-700 transition-all duration-300"
                                 >
                                     <div className="flex items-center gap-3">
-                                        <div className="w-10 h-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-[#C89D46] font-display font-bold shadow-inner">
+                                        <div className="w-10 h-10 rounded-xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-orange-600 font-bold shadow-inner">
                                             {buddy.name[0].toUpperCase()}
                                         </div>
                                         <div className="flex flex-col">
-                                            <span className="font-bold text-white text-sm tracking-tight">{buddy.name}</span>
+                                            <span className="font-bold text-zinc-50 text-sm tracking-tight">{buddy.name}</span>
                                             {buddy.buddy_profile_id && (
-                                                <span className="text-[9px] font-sans font-black uppercase text-[#C89D46]/80 tracking-widest">{t('common.link')}</span>
+                                                <span className="text-[9px] font-bold uppercase text-orange-500/80 tracking-widest">{t('common.link')}</span>
                                             )}
                                         </div>
                                     </div>
                                     <button
                                         onClick={() => handleDeleteBuddy(buddy.id)}
-                                        className="text-[#8F9096] hover:text-red-400 opacity-0 group-hover:opacity-100 transition-all p-2 hover:bg-white/5 rounded-xl"
+                                        className="text-zinc-600 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all p-2 hover:bg-zinc-800 rounded-xl"
                                     >
                                         <Trash2 size={16} />
                                     </button>
@@ -160,17 +160,17 @@ export default function BuddyList() {
                 <div className="flex items-center gap-2 animate-in fade-in slide-in-from-top-1">
                     <div className="flex -space-x-1.5 overflow-hidden">
                         {buddies.slice(0, 5).map((b, i) => (
-                            <div key={b.id} className="w-7 h-7 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-[10px] font-display font-bold text-[#C89D46] shadow-sm">
+                            <div key={b.id} className="w-7 h-7 rounded-lg bg-zinc-950 border border-zinc-800 flex items-center justify-center text-[10px] font-bold text-orange-600 shadow-sm">
                                 {b.name[0].toUpperCase()}
                             </div>
                         ))}
                         {buddies.length > 5 && (
-                            <div className="w-7 h-7 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-[8px] font-sans font-bold text-[#8F9096] shadow-sm">
+                            <div className="w-7 h-7 rounded-lg bg-zinc-950 border border-zinc-800 flex items-center justify-center text-[8px] font-bold text-zinc-500 shadow-sm">
                                 +{buddies.length - 5}
                             </div>
                         )}
                     </div>
-                    <span className="text-[10px] text-[#8F9096] font-sans font-bold uppercase tracking-widest ml-1">{buddies.length} Buddies</span>
+                    <span className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest ml-1">{buddies.length} Buddies</span>
                 </div>
             )}
         </div>
diff --git a/src/components/DramOfTheDay.tsx b/src/components/DramOfTheDay.tsx
index 8bdfe23..d34ad47 100644
--- a/src/components/DramOfTheDay.tsx
+++ b/src/components/DramOfTheDay.tsx
@@ -44,7 +44,7 @@ export default function DramOfTheDay({ bottles }: DramOfTheDayProps) {
             <button
                 onClick={suggestDram}
                 disabled={isRolling}
-                className="flex items-center gap-2 px-4 sm:px-6 py-2 sm:py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-2xl font-black uppercase tracking-widest text-[10px] sm:text-xs transition-all shadow-lg shadow-amber-600/20 active:scale-95 disabled:opacity-50"
+                className="flex items-center gap-2 px-4 sm:px-6 py-2 sm:py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl font-bold uppercase tracking-widest text-[10px] sm:text-xs transition-all shadow-lg shadow-orange-950/20 active:scale-95 disabled:opacity-50"
             >
                 {isRolling ? (
                     <Dices size={18} className="animate-spin" />
@@ -55,23 +55,23 @@ export default function DramOfTheDay({ bottles }: DramOfTheDayProps) {
             </button>
 
             {suggestion && (
-                <div className="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-black/60 backdrop-blur-sm animate-in fade-in duration-300">
-                    <div className="bg-white dark:bg-zinc-900 w-full max-w-sm rounded-[40px] p-8 shadow-2xl border border-amber-500/20 relative animate-in zoom-in-95 duration-300">
+                <div className="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-zinc-950/80 backdrop-blur-sm animate-in fade-in duration-300">
+                    <div className="bg-zinc-900 w-full max-w-sm rounded-[40px] p-8 shadow-2xl border border-orange-500/20 relative animate-in zoom-in-95 duration-300">
                         <button
                             onClick={() => setSuggestion(null)}
-                            className="absolute top-6 right-6 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200"
+                            className="absolute top-6 right-6 text-zinc-500 hover:text-orange-600"
                         >
                             <X size={24} />
                         </button>
 
                         <div className="flex flex-col items-center text-center space-y-6">
-                            <div className="w-20 h-20 bg-amber-100 dark:bg-amber-900/30 rounded-3xl flex items-center justify-center text-amber-600">
+                            <div className="w-20 h-20 bg-orange-900/30 rounded-3xl flex items-center justify-center text-orange-600">
                                 <GlassWater size={40} strokeWidth={2.5} />
                             </div>
 
                             <div className="space-y-2">
-                                <h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-amber-600">{t('home.dramOfDay.title')}</h3>
-                                <h2 className="text-2xl font-black text-zinc-900 dark:text-white leading-tight">
+                                <h3 className="text-[10px] font-bold uppercase tracking-[0.2em] text-orange-600">{t('home.dramOfDay.title')}</h3>
+                                <h2 className="text-2xl font-bold text-zinc-50 leading-tight uppercase">
                                     {suggestion.name}
                                 </h2>
                                 {suggestion.distillery && (
@@ -83,13 +83,13 @@ export default function DramOfTheDay({ bottles }: DramOfTheDayProps) {
                                 <Link
                                     href={`/bottles/${suggestion.id}`}
                                     onClick={() => setSuggestion(null)}
-                                    className="block w-full py-4 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-amber-600 dark:hover:bg-amber-600 hover:text-white transition-all shadow-xl"
+                                    className="block w-full py-4 bg-orange-600 text-white rounded-2xl font-bold uppercase tracking-widest text-xs hover:bg-orange-700 transition-all shadow-xl shadow-orange-950/20"
                                 >
                                     {t('home.dramOfDay.viewBottle')}
                                 </Link>
                                 <button
                                     onClick={suggestDram}
-                                    className="w-full mt-3 py-2 text-zinc-400 hover:text-amber-600 text-[10px] font-black uppercase tracking-widest transition-colors"
+                                    className="w-full mt-3 py-2 text-zinc-500 hover:text-orange-600 text-[10px] font-bold uppercase tracking-widest transition-colors"
                                 >
                                     {t('home.dramOfDay.rollAgain')}
                                 </button>
diff --git a/src/components/EditBottleForm.tsx b/src/components/EditBottleForm.tsx
index f1758da..6d6223d 100644
--- a/src/components/EditBottleForm.tsx
+++ b/src/components/EditBottleForm.tsx
@@ -123,9 +123,9 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
     }
 
     return (
-        <div className="p-6 bg-white dark:bg-zinc-900 border border-amber-500/30 rounded-3xl shadow-xl space-y-4 animate-in zoom-in-95 duration-200">
+        <div className="p-6 bg-zinc-900 border border-orange-500/20 rounded-3xl shadow-2xl space-y-4 animate-in zoom-in-95 duration-200">
             <div className="flex justify-between items-center mb-2">
-                <h3 className="text-lg font-black text-amber-600 uppercase tracking-widest flex items-center gap-2">
+                <h3 className="text-lg font-black text-orange-600 uppercase tracking-widest flex items-center gap-2">
                     <Info size={18} /> {t('bottle.editTitle')}
                 </h3>
                 <button
@@ -143,7 +143,7 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
                         type="text"
                         value={formData.name}
                         onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500"
+                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-orange-600/50"
                     />
                 </div>
                 <div className="space-y-1">
@@ -152,7 +152,7 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
                         type="text"
                         value={formData.distillery}
                         onChange={(e) => setFormData({ ...formData, distillery: e.target.value })}
-                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500"
+                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-orange-600/50"
                     />
                 </div>
                 <div className="space-y-1">
@@ -161,7 +161,7 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
                         type="text"
                         value={formData.category}
                         onChange={(e) => setFormData({ ...formData, category: e.target.value })}
-                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500"
+                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-orange-600/50"
                     />
                 </div>
                 <div className="grid grid-cols-2 gap-2">
@@ -172,7 +172,7 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
                             step="0.1"
                             value={formData.abv}
                             onChange={(e) => setFormData({ ...formData, abv: parseFloat(e.target.value) })}
-                            className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500"
+                            className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-orange-600/50"
                         />
                     </div>
                     <div className="space-y-1">
@@ -181,7 +181,7 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
                             type="number"
                             value={formData.age}
                             onChange={(e) => setFormData({ ...formData, age: parseInt(e.target.value) })}
-                            className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500"
+                            className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-orange-600/50"
                         />
                     </div>
                 </div>
@@ -192,7 +192,7 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
                             type="button"
                             onClick={handleDiscover}
                             disabled={isSearching}
-                            className="text-amber-600 hover:text-amber-700 flex items-center gap-1 normal-case font-bold"
+                            className="text-orange-600 hover:text-orange-700 flex items-center gap-1 normal-case font-bold"
                         >
                             {isSearching ? <Loader2 size={10} className="animate-spin" /> : <Search size={10} />}
                             {t('bottle.autoSearch')}
@@ -202,17 +202,17 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
                         type="text"
                         value={formData.whiskybase_id}
                         onChange={(e) => setFormData({ ...formData, whiskybase_id: e.target.value })}
-                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500"
+                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-orange-600/50"
                     />
                     {discoveryResult && (
-                        <div className="mt-2 p-3 bg-zinc-50 dark:bg-zinc-800/50 border border-amber-500/20 rounded-xl animate-in fade-in slide-in-from-top-2">
+                        <div className="mt-2 p-3 bg-zinc-950 border border-orange-500/20 rounded-xl animate-in fade-in slide-in-from-top-2">
                             <p className="text-[10px] text-zinc-500 mb-2">Treffer gefunden:</p>
-                            <p className="text-[11px] font-bold text-zinc-800 dark:text-zinc-200 mb-2 truncate">{discoveryResult.title}</p>
+                            <p className="text-[11px] font-bold text-zinc-200 mb-2 truncate">{discoveryResult.title}</p>
                             <div className="flex gap-2">
                                 <button
                                     type="button"
                                     onClick={applyDiscovery}
-                                    className="px-3 py-1.5 bg-amber-600 text-white text-[10px] font-black uppercase rounded-lg hover:bg-amber-700 transition-colors"
+                                    className="px-3 py-1.5 bg-orange-600 text-white text-[10px] font-black uppercase rounded-lg hover:bg-orange-700 transition-colors"
                                 >
                                     {t('bottle.applyId')}
                                 </button>
@@ -236,7 +236,7 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
                         placeholder="0.00"
                         value={formData.purchase_price}
                         onChange={(e) => setFormData({ ...formData, purchase_price: e.target.value })}
-                        className="w-full px-4 py-2 bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-900/30 rounded-xl outline-none focus:ring-2 focus:ring-amber-500 font-bold text-amber-700 dark:text-amber-400"
+                        className="w-full px-4 py-2 bg-zinc-950 border border-zinc-800 rounded-xl outline-none focus:ring-2 focus:ring-orange-600/50 font-bold text-zinc-100"
                     />
                 </div>
 
@@ -247,7 +247,7 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
                         placeholder="z.B. 2010"
                         value={formData.distilled_at}
                         onChange={(e) => setFormData({ ...formData, distilled_at: e.target.value })}
-                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500"
+                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-orange-600/50"
                     />
                 </div>
 
@@ -258,7 +258,7 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
                         placeholder="z.B. 2022"
                         value={formData.bottled_at}
                         onChange={(e) => setFormData({ ...formData, bottled_at: e.target.value })}
-                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500"
+                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-orange-600/50"
                     />
                 </div>
 
@@ -269,7 +269,7 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
                         placeholder="z.B. Batch 12 oder L-Code"
                         value={formData.batch_info}
                         onChange={(e) => setFormData({ ...formData, batch_info: e.target.value })}
-                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-amber-500"
+                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl outline-none focus:ring-2 focus:ring-orange-600/50"
                     />
                 </div>
             </div>
@@ -279,7 +279,7 @@ export default function EditBottleForm({ bottle, onComplete }: EditBottleFormPro
             <button
                 onClick={handleSave}
                 disabled={isSaving}
-                className="w-full py-4 bg-amber-600 hover:bg-amber-700 text-white rounded-2xl font-black uppercase tracking-widest transition-all flex items-center justify-center gap-2 shadow-lg shadow-amber-600/20 disabled:opacity-50"
+                className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl font-black uppercase tracking-widest transition-all flex items-center justify-center gap-2 shadow-xl shadow-orange-950/20 disabled:opacity-50"
             >
                 {isSaving ? <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div> : <Save size={20} />}
                 {t('bottle.saveChanges')}
diff --git a/src/components/FloatingScannerButton.tsx b/src/components/FloatingScannerButton.tsx
index 09056ca..039ed29 100644
--- a/src/components/FloatingScannerButton.tsx
+++ b/src/components/FloatingScannerButton.tsx
@@ -38,7 +38,7 @@ export default function FloatingScannerButton({ onImageSelected }: FloatingScann
                 whileTap={{ scale: 0.9 }}
                 initial={{ y: 100, opacity: 0 }}
                 animate={{ y: 0, opacity: 1 }}
-                className="relative group p-6 rounded-full bg-amber-600 text-black shadow-[0_0_30px_rgba(217,119,6,0.4)] hover:shadow-[0_0_40px_rgba(217,119,6,0.6)] transition-all overflow-hidden"
+                className="relative group p-6 rounded-full bg-orange-600 text-black shadow-lg shadow-orange-950/40 hover:shadow-orange-950/60 transition-all overflow-hidden"
             >
                 {/* Shine Animation */}
                 <motion.div
@@ -57,7 +57,7 @@ export default function FloatingScannerButton({ onImageSelected }: FloatingScann
                 <Camera size={32} strokeWidth={2.5} className="relative z-10" />
 
                 {/* Pulse ring */}
-                <span className="absolute inset-0 rounded-full border-4 border-amber-600 animate-ping opacity-20" />
+                <span className="absolute inset-0 rounded-full border-4 border-orange-600 animate-ping opacity-20" />
             </motion.button>
         </div>
     );
diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
index 0c0943b..d309ec6 100644
--- a/src/components/LanguageSwitcher.tsx
+++ b/src/components/LanguageSwitcher.tsx
@@ -11,8 +11,8 @@ const LanguageSwitcher = () => {
             <button
                 onClick={() => setLocale('de')}
                 className={`p-1.5 rounded-lg transition-all ${locale === 'de'
-                        ? 'bg-amber-100 dark:bg-amber-900/30 scale-110 shadow-sm'
-                        : 'opacity-50 hover:opacity-100 grayscale hover:grayscale-0'
+                    ? 'bg-orange-950/30 scale-110 shadow-sm shadow-orange-950/20'
+                    : 'opacity-50 hover:opacity-100 grayscale hover:grayscale-0'
                     }`}
                 title="Deutsch"
             >
@@ -21,8 +21,8 @@ const LanguageSwitcher = () => {
             <button
                 onClick={() => setLocale('en')}
                 className={`p-1.5 rounded-lg transition-all ${locale === 'en'
-                        ? 'bg-amber-100 dark:bg-amber-900/30 scale-110 shadow-sm'
-                        : 'opacity-50 hover:opacity-100 grayscale hover:grayscale-0'
+                    ? 'bg-orange-950/30 scale-110 shadow-sm shadow-orange-950/20'
+                    : 'opacity-50 hover:opacity-100 grayscale hover:grayscale-0'
                     }`}
                 title="English"
             >
diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
index beb07d0..c8b0c32 100644
--- a/src/components/OfflineIndicator.tsx
+++ b/src/components/OfflineIndicator.tsx
@@ -103,8 +103,8 @@ export default function OfflineIndicator() {
         return (
             <div className="flex items-center gap-1.5 px-2.5 py-1 bg-green-600/10 border border-green-600/20 rounded-full group cursor-help relative animate-in fade-in zoom-in duration-500">
                 <ShieldCheck size={10} className="text-green-600" />
-                <span className="text-[9px] font-black uppercase tracking-widest text-green-600">Offline-Modus aktiv</span>
-                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-48 p-2 bg-zinc-900 text-[10px] text-zinc-400 rounded-xl border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50 shadow-2xl text-center">
+                <span className="text-[9px] font-bold uppercase tracking-widest text-green-600">Offline-Modus aktiv</span>
+                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-48 p-2 bg-zinc-900 text-[10px] text-zinc-400 rounded-xl border border-zinc-800 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50 shadow-2xl text-center">
                     Alle Funktionen sind vollständig offline verfügbar.
                 </div>
             </div>
@@ -112,9 +112,9 @@ export default function OfflineIndicator() {
     }
 
     return (
-        <div className="flex items-center gap-1.5 px-2.5 py-1 bg-amber-600/10 border border-amber-600/20 rounded-full animate-in fade-in slide-in-from-right-2">
-            <Loader2 size={10} className="text-amber-600 animate-spin" />
-            <span className="text-[9px] font-black uppercase tracking-widest text-amber-600">
+        <div className="flex items-center gap-1.5 px-2.5 py-1 bg-orange-600/10 border border-orange-600/20 rounded-full animate-in fade-in slide-in-from-right-2">
+            <Loader2 size={10} className="text-orange-600 animate-spin" />
+            <span className="text-[9px] font-bold uppercase tracking-widest text-orange-600">
                 {progress > 0 ? `Vorbereitung... ${progress}%` : 'Warte auf System...'}
             </span>
         </div>
diff --git a/src/components/PlanManagementClient.tsx b/src/components/PlanManagementClient.tsx
index 2214555..3e08b86 100644
--- a/src/components/PlanManagementClient.tsx
+++ b/src/components/PlanManagementClient.tsx
@@ -129,11 +129,11 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
     return (
         <div className="space-y-6">
             {/* Actions Bar */}
-            <div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
+            <div className="bg-zinc-900 rounded-2xl p-6 border border-zinc-800 shadow-sm">
                 <div className="flex gap-3">
                     <button
                         onClick={handleCreate}
-                        className="flex-1 py-3 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl transition-colors flex items-center justify-center gap-2"
+                        className="flex-1 py-3 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-2xl transition-colors flex items-center justify-center gap-2"
                     >
                         <Plus size={18} />
                         Create New Plan
@@ -141,7 +141,7 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
                     <button
                         onClick={handleGrantCredits}
                         disabled={loading}
-                        className="flex-1 py-3 bg-green-600 hover:bg-green-700 text-white font-bold rounded-xl transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
+                        className="flex-1 py-3 bg-zinc-800 hover:bg-zinc-700 text-white font-bold rounded-2xl transition-colors flex items-center justify-center gap-2 disabled:opacity-50 border border-zinc-700"
                     >
                         <Zap size={18} />
                         Grant Monthly Credits
@@ -151,8 +151,8 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
 
             {message && (
                 <div className={`p-4 rounded-xl flex items-center gap-3 ${message.type === 'success'
-                        ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-500'
-                        : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-500'
+                    ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-500'
+                    : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-500'
                     }`}>
                     {message.type === 'success' ? <Check size={20} /> : <AlertCircle size={20} />}
                     {message.text}
@@ -164,27 +164,27 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
                 {plans.map((plan) => (
                     <div
                         key={plan.id}
-                        className={`bg-white dark:bg-zinc-900 rounded-2xl p-6 border-2 ${plan.is_active
-                                ? 'border-amber-200 dark:border-amber-800'
-                                : 'border-zinc-200 dark:border-zinc-800 opacity-60'
+                        className={`bg-zinc-900 rounded-[32px] p-6 border-2 ${plan.is_active
+                            ? 'border-orange-500/30'
+                            : 'border-zinc-800 opacity-60'
                             } shadow-sm relative`}
                     >
                         {!plan.is_active && (
-                            <div className="absolute top-4 right-4 px-2 py-1 bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400 text-xs font-bold rounded">
+                            <div className="absolute top-4 right-4 px-2 py-1 bg-zinc-800 text-zinc-400 text-[8px] font-bold uppercase tracking-widest rounded">
                                 Inactive
                             </div>
                         )}
                         <div className="mb-4">
-                            <h3 className="text-2xl font-black text-zinc-900 dark:text-white">{plan.display_name}</h3>
-                            <p className="text-xs text-zinc-500 mt-1">{plan.name}</p>
+                            <h3 className="text-2xl font-bold text-white uppercase tracking-tighter">{plan.display_name}</h3>
+                            <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">{plan.name}</p>
                         </div>
                         <div className="mb-4">
-                            <div className="text-3xl font-black text-amber-600">{plan.monthly_credits}</div>
-                            <div className="text-xs text-zinc-500">Credits/Month</div>
+                            <div className="text-3xl font-bold text-orange-600 tracking-tighter">{plan.monthly_credits}</div>
+                            <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Credits/Month</div>
                         </div>
                         <div className="mb-4">
-                            <div className="text-2xl font-bold text-zinc-900 dark:text-white">€{plan.price.toFixed(2)}</div>
-                            <div className="text-xs text-zinc-500">per month</div>
+                            <div className="text-2xl font-bold text-white tracking-tight">€{plan.price.toFixed(2)}</div>
+                            <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest leading-none mt-1">per month</div>
                         </div>
                         {plan.description && (
                             <p className="text-sm text-zinc-600 dark:text-zinc-400 mb-4">{plan.description}</p>
@@ -192,14 +192,14 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
                         <div className="flex gap-2">
                             <button
                                 onClick={() => handleEdit(plan)}
-                                className="flex-1 py-2 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 font-bold rounded-lg text-sm transition-colors flex items-center justify-center gap-2"
+                                className="flex-1 py-2 bg-zinc-800 hover:bg-zinc-700 text-white font-bold rounded-xl text-[10px] uppercase tracking-widest transition-colors flex items-center justify-center gap-2 border border-zinc-700"
                             >
                                 <Edit size={14} />
                                 Edit
                             </button>
                             <button
                                 onClick={() => handleDelete(plan.id)}
-                                className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white font-bold rounded-lg text-sm transition-colors"
+                                className="px-3 py-2 bg-red-600/20 hover:bg-red-600 text-red-500 hover:text-white font-bold rounded-xl text-sm transition-colors border border-red-900/50"
                             >
                                 <Trash2 size={14} />
                             </button>
@@ -210,15 +210,15 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
 
             {/* Edit/Create Modal */}
             {(editingPlan || isCreating) && (
-                <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-                    <div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 max-w-2xl w-full border border-zinc-200 dark:border-zinc-800">
+                <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+                    <div className="bg-zinc-900 rounded-[32px] p-6 max-w-2xl w-full border border-zinc-800 shadow-2xl">
                         <div className="flex items-center justify-between mb-6">
-                            <h3 className="text-2xl font-black text-zinc-900 dark:text-white">
+                            <h3 className="text-2xl font-bold text-white uppercase tracking-tighter">
                                 {isCreating ? 'Create Plan' : 'Edit Plan'}
                             </h3>
                             <button
                                 onClick={() => { setEditingPlan(null); setIsCreating(false); }}
-                                className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+                                className="p-2 hover:bg-zinc-800 rounded-xl transition-colors text-zinc-500"
                             >
                                 <X size={20} />
                             </button>
@@ -227,79 +227,79 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
                         <div className="space-y-4">
                             <div className="grid grid-cols-2 gap-4">
                                 <div>
-                                    <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Name (ID)</label>
+                                    <label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Name (ID)</label>
                                     <input
                                         type="text"
                                         value={formData.name}
                                         onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                         placeholder="e.g. starter"
-                                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                        className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                                     />
                                 </div>
                                 <div>
-                                    <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Display Name</label>
+                                    <label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Display Name</label>
                                     <input
                                         type="text"
                                         value={formData.display_name}
                                         onChange={(e) => setFormData({ ...formData, display_name: e.target.value })}
                                         placeholder="e.g. Starter"
-                                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                        className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                                     />
                                 </div>
                             </div>
 
                             <div className="grid grid-cols-2 gap-4">
                                 <div>
-                                    <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Monthly Credits</label>
+                                    <label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Monthly Credits</label>
                                     <input
                                         type="number"
                                         value={formData.monthly_credits}
                                         onChange={(e) => setFormData({ ...formData, monthly_credits: parseInt(e.target.value) || 0 })}
-                                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                        className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                                     />
                                 </div>
                                 <div>
-                                    <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Price (€)</label>
+                                    <label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Price (€)</label>
                                     <input
                                         type="number"
                                         step="0.01"
                                         value={formData.price}
                                         onChange={(e) => setFormData({ ...formData, price: parseFloat(e.target.value) || 0 })}
-                                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                        className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                                     />
                                 </div>
                             </div>
 
                             <div>
-                                <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Description</label>
+                                <label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Description</label>
                                 <textarea
                                     value={formData.description}
                                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                                     placeholder="Brief description of the plan"
                                     rows={3}
-                                    className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                    className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                                 />
                             </div>
 
                             <div className="grid grid-cols-2 gap-4">
                                 <div>
-                                    <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Sort Order</label>
+                                    <label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Sort Order</label>
                                     <input
                                         type="number"
                                         value={formData.sort_order}
                                         onChange={(e) => setFormData({ ...formData, sort_order: parseInt(e.target.value) || 0 })}
-                                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                        className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                                     />
                                 </div>
                                 <div className="flex items-end">
-                                    <label className="flex items-center gap-2 cursor-pointer">
+                                    <label className="flex items-center gap-2 cursor-pointer pb-2">
                                         <input
                                             type="checkbox"
                                             checked={formData.is_active}
                                             onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
-                                            className="w-5 h-5 rounded border-zinc-300 text-amber-600 focus:ring-amber-500"
+                                            className="w-5 h-5 rounded border-zinc-700 bg-zinc-800 text-orange-600 focus:ring-orange-600"
                                         />
-                                        <span className="text-sm font-bold text-zinc-900 dark:text-white">Active</span>
+                                        <span className="text-sm font-bold text-white">Active</span>
                                     </label>
                                 </div>
                             </div>
@@ -307,7 +307,7 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
                             <button
                                 onClick={handleSave}
                                 disabled={loading}
-                                className="w-full py-3 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+                                className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-2xl transition-all shadow-lg shadow-orange-950/20 disabled:opacity-50 flex items-center justify-center gap-2 mt-4"
                             >
                                 <Check size={18} />
                                 {isCreating ? 'Create Plan' : 'Save Changes'}
diff --git a/src/components/ResultCard.tsx b/src/components/ResultCard.tsx
index 44443f3..535592b 100644
--- a/src/components/ResultCard.tsx
+++ b/src/components/ResultCard.tsx
@@ -34,75 +34,75 @@ export default function ResultCard({ data, bottleName, image, onShare }: ResultC
         <motion.div
             initial={{ scale: 0.9, opacity: 0, rotateY: 30 }}
             animate={{ scale: 1, opacity: 1, rotateY: 0 }}
-            transition={{ type: 'spring', damping: 15 }}
-            className="flex flex-col items-center gap-8 w-full max-w-sm"
+            transition={{ type: 'spring', damping: 20 }}
+            className="flex flex-col items-center gap-6 w-full max-w-sm"
         >
             {/* The Trading Card */}
-            <div className="relative w-full aspect-[9/16] rounded-[32px] overflow-hidden shadow-[0_20px_60px_rgba(0,0,0,0.8)] border border-white/20 bg-gradient-to-b from-[#1A1B20] to-black group">
+            <div className="relative w-full aspect-[3/4] rounded-[32px] overflow-hidden shadow-[0_20px_60px_rgba(0,0,0,0.9)] border border-zinc-800 bg-zinc-950 group">
                 {/* Bottle Image with Vignette */}
                 <div className="absolute inset-0">
                     {image ? (
                         <img src={image} alt={bottleName} className="w-full h-full object-cover" />
                     ) : (
-                        <div className="absolute inset-0 bg-white/5 flex items-center justify-center opacity-20 text-[20px] font-black uppercase tracking-[1em] rotate-90">No Image</div>
+                        <div className="absolute inset-0 bg-zinc-900 flex items-center justify-center opacity-40 text-[20px] font-bold uppercase tracking-[1em] rotate-90">No Data</div>
                     )}
-                    <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent opacity-80" />
+                    <div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-zinc-950/20 to-transparent opacity-90" />
                 </div>
 
                 {/* Content Overlay */}
-                <div className="absolute inset-x-0 bottom-0 p-8 space-y-6">
-                    <div className="space-y-1">
-                        <p className="text-[10px] font-black uppercase tracking-[0.3em] text-amber-500">Tasting Record</p>
-                        <h2 className="text-4xl font-black text-white truncate uppercase tracking-tight leading-none">{bottleName}</h2>
+                <div className="absolute inset-x-0 bottom-0 p-6 space-y-4">
+                    <div className="space-y-0.5">
+                        <p className="text-[10px] font-bold uppercase tracking-[0.3em] text-orange-600">Verified Tasting Record</p>
+                        <h2 className="text-3xl font-bold text-white truncate uppercase tracking-tighter leading-none">{bottleName}</h2>
                     </div>
 
                     {/* Radar Chart Area */}
-                    <div className="h-64 w-full glass-dark rounded-3xl p-4 flex flex-col items-center justify-center">
+                    <div className="h-48 w-full bg-zinc-900/40 backdrop-blur-md rounded-[24px] p-2 flex flex-col items-center justify-center border border-zinc-800/50">
                         <ResponsiveContainer width="100%" height="100%">
-                            <RadarChart cx="50%" cy="50%" outerRadius="80%" data={chartData}>
-                                <PolarGrid stroke="rgba(255,255,255,0.1)" />
+                            <RadarChart cx="50%" cy="50%" outerRadius="70%" data={chartData}>
+                                <PolarGrid stroke="rgba(255,255,255,0.05)" />
                                 <PolarAngleAxis
                                     dataKey="subject"
-                                    tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10, fontWeight: 900 }}
+                                    tick={{ fill: '#71717a', fontSize: 9, fontWeight: 700 }}
                                 />
                                 <Radar
                                     name="Whisky Profile"
                                     dataKey="A"
-                                    stroke="#D97706"
-                                    fill="#D97706"
-                                    fillOpacity={0.5}
+                                    stroke="#ea580c"
+                                    fill="#ea580c"
+                                    fillOpacity={0.6}
                                 />
                             </RadarChart>
                         </ResponsiveContainer>
                     </div>
 
-                    <div className="flex items-center justify-between">
+                    <div className="flex items-center justify-between pt-1">
                         <div className="flex items-center gap-2">
-                            <Sparkles size={16} className="text-amber-500" />
-                            <span className="text-xs font-black uppercase tracking-widest text-white/40">Verified Report</span>
+                            <Sparkles size={14} className="text-orange-600" />
+                            <span className="text-[9px] font-bold uppercase tracking-widest text-zinc-500">Authenticated Report</span>
                         </div>
                     </div>
                 </div>
 
                 {/* Score Badge */}
-                <div className="absolute top-8 right-8 w-20 h-20 glass rounded-2xl flex flex-col items-center justify-center border-amber-500/40 shadow-xl">
-                    <span className="text-2xl font-black text-amber-500">{displayScore}</span>
-                    <span className="text-[8px] font-black uppercase tracking-widest text-white/40">Score</span>
+                <div className="absolute top-6 right-6 w-16 h-16 bg-zinc-900/60 backdrop-blur-md rounded-2xl flex flex-col items-center justify-center border border-orange-500/30 shadow-2xl">
+                    <span className="text-2xl font-bold text-orange-600 leading-none">{displayScore}</span>
+                    <span className="text-[7px] font-bold uppercase tracking-widest text-zinc-500 mt-1">Rating</span>
                 </div>
 
                 {/* Decorative Elements */}
-                <div className="absolute top-8 left-8 p-2 rounded-xl bg-amber-600 text-white shadow-lg shadow-amber-600/40">
-                    <Award size={20} />
+                <div className="absolute top-6 left-6 p-2 rounded-xl bg-orange-600 text-white shadow-lg shadow-orange-950/40">
+                    <Award size={18} />
                 </div>
             </div>
 
             {/* Share Button */}
             <button
                 onClick={onShare}
-                className="w-full py-5 bg-zinc-900 hover:bg-zinc-800 border border-white/10 text-white rounded-3xl font-black uppercase tracking-widest text-xs flex items-center justify-center gap-3 transition-all"
+                className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl font-bold uppercase tracking-widest text-[10px] flex items-center justify-center gap-3 transition-all shadow-xl shadow-orange-950/20 active:scale-95"
             >
-                <Share2 size={18} />
-                Share Report
+                <Share2 size={16} />
+                Share Tasting Report
             </button>
         </motion.div>
     );
diff --git a/src/components/ScanAndTasteFlow.tsx b/src/components/ScanAndTasteFlow.tsx
index 8ffa1ac..a7b6e0a 100644
--- a/src/components/ScanAndTasteFlow.tsx
+++ b/src/components/ScanAndTasteFlow.tsx
@@ -133,12 +133,12 @@ export default function ScanAndTasteFlow({ isOpen, onClose, base64Image }: ScanA
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
-                    className="fixed inset-0 z-[60] bg-[#0F1014] flex flex-col h-[100dvh] w-screen overflow-hidden overscroll-none"
+                    className="fixed inset-0 z-[60] bg-zinc-950 flex flex-col h-[100dvh] w-screen overflow-hidden overscroll-none"
                 >
                     {/* Close Button */}
                     <button
                         onClick={onClose}
-                        className="absolute top-6 right-6 z-[70] p-2 rounded-full bg-white/5 border border-white/10 text-white/60 hover:text-white transition-colors"
+                        className="absolute top-6 right-6 z-[70] p-2 rounded-full bg-zinc-900 border border-zinc-800 text-zinc-400 hover:text-white transition-colors"
                     >
                         <X size={24} />
                     </button>
@@ -160,15 +160,15 @@ export default function ScanAndTasteFlow({ isOpen, onClose, base64Image }: ScanA
                                         <motion.div
                                             animate={{ rotate: 360 }}
                                             transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
-                                            className="w-32 h-32 rounded-full border-2 border-dashed border-[#C89D46]/30"
+                                            className="w-32 h-32 rounded-full border-2 border-dashed border-orange-600/30"
                                         />
                                         <div className="absolute inset-0 flex items-center justify-center">
-                                            <Loader2 size={48} className="animate-spin text-[#C89D46]" />
+                                            <Loader2 size={48} className="animate-spin text-orange-600" />
                                         </div>
                                     </div>
                                     <div className="text-center space-y-2">
-                                        <h2 className="text-2xl font-display font-bold text-white uppercase tracking-tight">Analysiere Etikett...</h2>
-                                        <p className="text-[#C89D46] font-sans font-bold uppercase tracking-widest text-[10px] flex items-center justify-center gap-2">
+                                        <h2 className="text-2xl font-bold text-zinc-50 uppercase tracking-tight">Analysiere Etikett...</h2>
+                                        <p className="text-orange-500 font-bold uppercase tracking-widest text-[10px] flex items-center justify-center gap-2">
                                             <Sparkles size={12} /> KI-gestütztes Scanning
                                         </p>
                                     </div>
@@ -223,10 +223,10 @@ export default function ScanAndTasteFlow({ isOpen, onClose, base64Image }: ScanA
                             <motion.div
                                 initial={{ opacity: 0 }}
                                 animate={{ opacity: 1 }}
-                                className="absolute inset-0 z-[80] bg-[#0F1014]/80 backdrop-blur-sm flex flex-col items-center justify-center gap-6"
+                                className="absolute inset-0 z-[80] bg-zinc-950/80 backdrop-blur-sm flex flex-col items-center justify-center gap-6"
                             >
-                                <Loader2 size={48} className="animate-spin text-[#C89D46]" />
-                                <h2 className="text-xl font-display font-bold text-white uppercase tracking-tight">Speichere Tasting...</h2>
+                                <Loader2 size={48} className="animate-spin text-orange-600" />
+                                <h2 className="text-xl font-bold text-zinc-50 uppercase tracking-tight">Speichere Tasting...</h2>
                             </motion.div>
                         )}
 
diff --git a/src/components/SessionBottomSheet.tsx b/src/components/SessionBottomSheet.tsx
index 7020e56..3a3a4db 100644
--- a/src/components/SessionBottomSheet.tsx
+++ b/src/components/SessionBottomSheet.tsx
@@ -76,7 +76,7 @@ export default function SessionBottomSheet({ isOpen, onClose }: SessionBottomShe
                         animate={{ opacity: 1 }}
                         exit={{ opacity: 0 }}
                         onClick={onClose}
-                        className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[80]"
+                        className="fixed inset-0 bg-zinc-950/80 backdrop-blur-sm z-[80]"
                     />
 
                     {/* Sheet */}
@@ -85,12 +85,12 @@ export default function SessionBottomSheet({ isOpen, onClose }: SessionBottomShe
                         animate={{ y: 0 }}
                         exit={{ y: '100%' }}
                         transition={{ type: 'spring', damping: 25, stiffness: 200 }}
-                        className="fixed bottom-0 left-0 right-0 bg-[#1A1B20] border-t border-white/10 rounded-t-[32px] z-[90] p-8 pb-12 max-h-[80vh] overflow-y-auto shadow-[0_-10px_40px_rgba(0,0,0,0.5)]"
+                        className="fixed bottom-0 left-0 right-0 bg-zinc-950 border-t border-zinc-800 rounded-t-[32px] z-[90] p-8 pb-12 max-h-[80vh] overflow-y-auto shadow-[0_-10px_40px_rgba(0,0,0,0.5)]"
                     >
                         {/* Drag Handle */}
-                        <div className="w-12 h-1.5 bg-white/10 rounded-full mx-auto mb-8" />
+                        <div className="w-12 h-1.5 bg-zinc-800 rounded-full mx-auto mb-8" />
 
-                        <h2 className="text-2xl font-bold mb-6 font-display text-white">Tasting Session</h2>
+                        <h2 className="text-2xl font-bold mb-6 text-zinc-50">Tasting Session</h2>
 
                         {/* New Session Input */}
                         <div className="relative mb-8">
@@ -100,12 +100,12 @@ export default function SessionBottomSheet({ isOpen, onClose }: SessionBottomShe
                                 onChange={(e) => setNewSessionName(e.target.value)}
                                 onKeyDown={(e) => e.key === 'Enter' && handleCreateSession()}
                                 placeholder="Neue Session erstellen..."
-                                className="w-full bg-white/5 border border-white/10 rounded-2xl py-4 px-6 text-white focus:outline-none focus:border-[#C89D46] transition-colors"
+                                className="w-full bg-zinc-900 border border-zinc-800 rounded-2xl py-4 px-6 text-zinc-50 focus:outline-none focus:border-orange-600 transition-colors"
                             />
                             <button
                                 onClick={handleCreateSession}
                                 disabled={isCreating || !newSessionName.trim()}
-                                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 bg-[#C89D46] text-black rounded-xl disabled:opacity-50"
+                                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 bg-orange-600 text-white rounded-xl disabled:opacity-50"
                             >
                                 {isCreating ? <Loader2 size={20} className="animate-spin" /> : <Plus size={20} />}
                             </button>
@@ -113,10 +113,10 @@ export default function SessionBottomSheet({ isOpen, onClose }: SessionBottomShe
 
                         {/* Session List */}
                         <div className="space-y-4">
-                            <p className="text-xs font-black uppercase tracking-widest text-white/40 mb-2">Aktuelle Sessions</p>
+                            <p className="text-xs font-bold uppercase tracking-widest text-zinc-500 mb-2">Aktuelle Sessions</p>
                             {isLoading ? (
                                 <div className="flex justify-center py-8">
-                                    <Loader2 size={24} className="animate-spin text-white/20" />
+                                    <Loader2 size={24} className="animate-spin text-zinc-700" />
                                 </div>
                             ) : sessions.length > 0 ? (
                                 sessions.map((s) => (
@@ -126,14 +126,14 @@ export default function SessionBottomSheet({ isOpen, onClose }: SessionBottomShe
                                             setActiveSession({ id: s.id, name: s.name });
                                             onClose();
                                         }}
-                                        className={`w-full flex items-center justify-between p-4 rounded-2xl border transition-all ${activeSession?.id === s.id ? 'bg-[#C89D46]/10 border-[#C89D46] text-[#C89D46]' : 'bg-white/5 border-white/5 hover:border-white/20 text-white'}`}
+                                        className={`w-full flex items-center justify-between p-4 rounded-2xl border transition-all ${activeSession?.id === s.id ? 'bg-orange-600/10 border-orange-600 text-orange-500' : 'bg-zinc-900 border-zinc-800 hover:border-zinc-700 text-zinc-50'}`}
                                     >
                                         <span className="font-bold">{s.name}</span>
-                                        {activeSession?.id === s.id ? <Check size={20} /> : <ChevronRight size={20} className="text-white/20" />}
+                                        {activeSession?.id === s.id ? <Check size={20} /> : <ChevronRight size={20} className="text-zinc-700" />}
                                     </button>
                                 ))
                             ) : (
-                                <div className="text-center py-8 text-white/30 italic">Keine aktiven Sessions gefunden</div>
+                                <div className="text-center py-8 text-zinc-600 italic">Keine aktiven Sessions gefunden</div>
                             )}
                         </div>
                     </motion.div>
diff --git a/src/components/SessionList.tsx b/src/components/SessionList.tsx
index 6d66c2a..98816ea 100644
--- a/src/components/SessionList.tsx
+++ b/src/components/SessionList.tsx
@@ -140,18 +140,18 @@ export default function SessionList() {
     };
 
     return (
-        <div className="bg-[#1A1B21] rounded-3xl p-6 border border-white/5 shadow-xl transition-all duration-300">
+        <div className="bg-zinc-900 rounded-3xl p-6 border border-zinc-800 shadow-xl transition-all duration-300">
             <div className="flex items-center justify-between mb-6">
-                <h3 className="text-sm font-sans font-bold uppercase tracking-[0.2em] flex items-center gap-2 text-[#8F9096]">
-                    <Calendar size={18} className="text-[#C89D46]" />
+                <h3 className="text-sm font-bold uppercase tracking-[0.2em] flex items-center gap-2 text-zinc-400">
+                    <Calendar size={18} className="text-orange-600" />
                     {t('session.title')}
                     {!isCollapsed && sessions.length > 0 && (
-                        <span className="text-[10px] font-sans font-bold opacity-50 ml-2">({sessions.length})</span>
+                        <span className="text-[10px] font-bold opacity-50 ml-2">({sessions.length})</span>
                     )}
                 </h3>
                 <button
                     onClick={handleToggleCollapse}
-                    className="p-2 hover:bg-white/5 rounded-xl transition-colors text-[#8F9096] hover:text-[#C89D46]"
+                    className="p-2 hover:bg-zinc-800 rounded-xl transition-colors text-zinc-500 hover:text-orange-600"
                     title={isCollapsed ? 'Aufklappen' : 'Einklappen'}
                 >
                     {isCollapsed ? <ChevronDown size={20} /> : <ChevronUp size={20} />}
@@ -166,23 +166,23 @@ export default function SessionList() {
                             value={newName}
                             onChange={(e) => setNewName(e.target.value)}
                             placeholder={t('session.sessionName')}
-                            className="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 py-2 text-sm text-white placeholder:text-[#8F9096] focus:outline-none focus:border-[#C89D46] transition-colors"
+                            className="flex-1 bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-2 text-sm text-zinc-50 placeholder:text-zinc-600 focus:outline-none focus:border-orange-600 transition-colors"
                         />
                         <button
                             type="submit"
                             disabled={isCreating || !newName.trim()}
-                            className="bg-[#C89D46] hover:bg-[#A67D2E] text-[#0F1014] p-2 rounded-xl transition-all disabled:opacity-50"
+                            className="bg-orange-600 hover:bg-orange-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
                         >
                             {isCreating ? <Loader2 size={20} className="animate-spin" /> : <Plus size={20} />}
                         </button>
                     </form>
 
                     {isLoading ? (
-                        <div className="flex justify-center py-8 text-[#8F9096]">
+                        <div className="flex justify-center py-8 text-zinc-500">
                             <Loader2 size={24} className="animate-spin" />
                         </div>
                     ) : sessions.length === 0 ? (
-                        <div className="text-center py-8 text-[#8F9096] text-xs font-sans">
+                        <div className="text-center py-8 text-zinc-600 text-xs font-bold">
                             {t('session.noSessions')}
                         </div>
                     ) : (
@@ -191,18 +191,18 @@ export default function SessionList() {
                                 <div
                                     key={session.id}
                                     className={`flex items-center justify-between p-4 rounded-2xl border transition-all ${activeSession?.id === session.id
-                                        ? 'bg-[#C89D46] border-[#C89D46] shadow-lg shadow-[#C89D46]/20'
-                                        : 'bg-white/5 border-white/5 hover:border-white/10'
+                                        ? 'bg-orange-600 border-orange-600 shadow-lg shadow-orange-950/20'
+                                        : 'bg-zinc-950 border-zinc-800 hover:border-zinc-700'
                                         }`}
                                 >
                                     <Link href={`/sessions/${session.id}`} className="flex-1 space-y-1 min-w-0">
-                                        <div className={`font-display font-bold text-lg truncate flex items-center gap-2 ${activeSession?.id === session.id ? 'text-[#0F1014]' : 'text-white'}`}>
+                                        <div className={`font-bold text-lg truncate flex items-center gap-2 ${activeSession?.id === session.id ? 'text-white' : 'text-zinc-50'}`}>
                                             {session.name}
                                             {session.ended_at && (
-                                                <span className={`text-[8px] font-sans font-black uppercase px-1.5 py-0.5 rounded border ${activeSession?.id === session.id ? 'bg-black/10 border-black/20 text-[#0F1014]' : 'bg-white/10 border-white/20 text-[#8F9096]'}`}>Closed</span>
+                                                <span className={`text-[8px] font-bold uppercase px-1.5 py-0.5 rounded border ${activeSession?.id === session.id ? 'bg-black/10 border-black/20 text-white' : 'bg-zinc-800 border-zinc-700 text-zinc-500'}`}>Closed</span>
                                             )}
                                         </div>
-                                        <div className={`flex items-center gap-4 text-[10px] font-sans font-bold uppercase tracking-widest ${activeSession?.id === session.id ? 'text-[#0F1014]/60' : 'text-[#8F9096]'}`}>
+                                        <div className={`flex items-center gap-4 text-[10px] font-bold uppercase tracking-widest ${activeSession?.id === session.id ? 'text-white/60' : 'text-zinc-500'}`}>
                                             <span className="flex items-center gap-1">
                                                 <Calendar size={12} />
                                                 {new Date(session.scheduled_at).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US')}
@@ -225,28 +225,28 @@ export default function SessionList() {
                                             !session.ended_at ? (
                                                 <button
                                                     onClick={() => setActiveSession({ id: session.id, name: session.name })}
-                                                    className="p-2 bg-white/10 text-white rounded-xl hover:bg-[#C89D46] hover:text-[#0F1014] transition-all"
+                                                    className="p-2 bg-zinc-800 text-zinc-50 rounded-xl hover:bg-orange-600 hover:text-white transition-all"
                                                     title="Start Session"
                                                 >
                                                     <GlassWater size={18} />
                                                 </button>
                                             ) : (
-                                                <div className="p-2 bg-white/5 text-[#8F9096] rounded-xl border border-white/5 opacity-50">
+                                                <div className="p-2 bg-zinc-900 text-zinc-500 rounded-xl border border-zinc-800 opacity-50">
                                                     <Check size={18} />
                                                 </div>
                                             )
                                         ) : (
-                                            <div className="p-2 bg-black/10 text-[#0F1014] rounded-xl">
+                                            <div className="p-2 bg-black/10 text-white rounded-xl">
                                                 <Check size={18} />
                                             </div>
                                         )}
-                                        <ChevronRight size={20} className={activeSession?.id === session.id ? 'text-[#0F1014]/40' : 'text-white/20'} />
+                                        <ChevronRight size={20} className={activeSession?.id === session.id ? 'text-white/40' : 'text-zinc-700'} />
                                         <button
                                             onClick={(e) => handleDeleteSession(e, session.id)}
                                             disabled={!!isDeleting}
                                             className={`p-2 rounded-xl transition-all ${activeSession?.id === session.id
-                                                ? 'text-[#0F1014]/40 hover:text-[#0F1014]'
-                                                : 'text-[#8F9096] hover:text-red-400'
+                                                ? 'text-white/40 hover:text-white'
+                                                : 'text-zinc-600 hover:text-red-500'
                                                 }`}
                                             title="Session löschen"
                                         >
@@ -268,17 +268,17 @@ export default function SessionList() {
                 <div className="flex items-center gap-2 animate-in fade-in slide-in-from-top-1">
                     <div className="flex -space-x-1.5 overflow-hidden">
                         {sessions.slice(0, 3).map((s, i) => (
-                            <div key={s.id} className="w-7 h-7 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-[10px] font-display font-bold text-[#C89D46] shadow-sm">
+                            <div key={s.id} className="w-7 h-7 rounded-lg bg-zinc-950 border border-zinc-800 flex items-center justify-center text-[10px] font-bold text-orange-600 shadow-sm">
                                 {s.name[0].toUpperCase()}
                             </div>
                         ))}
                         {sessions.length > 3 && (
-                            <div className="w-7 h-7 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-[8px] font-sans font-bold text-[#8F9096] shadow-sm">
+                            <div className="w-7 h-7 rounded-lg bg-zinc-950 border border-zinc-800 flex items-center justify-center text-[8px] font-bold text-zinc-500 shadow-sm">
                                 +{sessions.length - 3}
                             </div>
                         )}
                     </div>
-                    <span className="text-[10px] text-[#8F9096] font-sans font-bold uppercase tracking-widest ml-1">{sessions.length} Sessions</span>
+                    <span className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest ml-1">{sessions.length} Sessions</span>
                 </div>
             )}
         </div>
diff --git a/src/components/SessionTimeline.tsx b/src/components/SessionTimeline.tsx
index 3ffce37..eecbeef 100644
--- a/src/components/SessionTimeline.tsx
+++ b/src/components/SessionTimeline.tsx
@@ -61,46 +61,46 @@ export default function SessionTimeline({ tastings, sessionStart }: SessionTimel
                 return (
                     <div key={tasting.id} className="relative group">
                         {/* Dot */}
-                        <div className={`absolute -left-[22px] top-4 w-5 h-5 rounded-full border-[3px] border-zinc-100 dark:border-black shadow-sm z-10 flex items-center justify-center ${isSmoky ? 'bg-amber-600' : 'bg-zinc-400'}`}>
+                        <div className={`absolute -left-[22px] top-4 w-5 h-5 rounded-full border-[3px] border-zinc-950 shadow-sm z-10 flex items-center justify-center ${isSmoky ? 'bg-orange-600' : 'bg-zinc-600'}`}>
                             {isSmoky && <Droplets size={8} className="text-white fill-white" />}
                         </div>
 
-                        <div className="bg-white dark:bg-zinc-900 p-4 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-sm hover:shadow-md transition-shadow group-hover:border-amber-500/30">
+                        <div className="bg-zinc-900 p-4 rounded-2xl border border-zinc-800 shadow-sm hover:shadow-md transition-shadow group-hover:border-orange-500/30">
                             <div className="flex justify-between items-start gap-3">
                                 <div className="min-w-0">
                                     <div className="flex items-center gap-2 mb-1">
-                                        <span className="text-[10px] font-black text-amber-600 uppercase tracking-widest leading-none">Dram #{index + 1}</span>
-                                        <span className="text-[10px] font-bold text-zinc-400 dark:text-zinc-600 uppercase tracking-tight leading-none">
+                                        <span className="text-[10px] font-bold text-orange-600 uppercase tracking-widest leading-none">Dram #{index + 1}</span>
+                                        <span className="text-[10px] font-bold text-zinc-500 uppercase tracking-tight leading-none">
                                             {wallClockTime} ({index === 0 ? 'Start' : `+${diffMinutes}m`})
                                         </span>
                                         {isSmoky && (
-                                            <span className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-[8px] font-black px-1.5 py-0.5 rounded-md uppercase tracking-tighter">Peat Bomb</span>
+                                            <span className="bg-orange-900/40 text-orange-500 text-[8px] font-bold px-1.5 py-0.5 rounded-md uppercase tracking-tighter border border-orange-500/20">Peat Bomb</span>
                                         )}
                                     </div>
                                     <Link
                                         href={`/bottles/${tasting.bottle_id}`}
-                                        className="text-sm font-bold text-zinc-800 dark:text-zinc-100 hover:text-amber-600 truncate block mt-0.5"
+                                        className="text-sm font-bold text-zinc-100 hover:text-orange-600 truncate block mt-0.5 uppercase tracking-tight"
                                     >
                                         {tasting.bottle_name}
                                     </Link>
                                     <div className="mt-2 flex flex-wrap gap-1">
                                         {tasting.tags.slice(0, 2).map(tag => (
-                                            <span key={tag} className="text-[9px] text-zinc-500 dark:text-zinc-500 bg-zinc-100 dark:bg-zinc-800/50 px-2 py-0.5 rounded-full">
+                                            <span key={tag} className="text-[9px] text-zinc-500 bg-zinc-800/50 px-2 py-0.5 rounded-full border border-zinc-800">
                                                 {tag}
                                             </span>
                                         ))}
                                     </div>
                                 </div>
                                 <div className="shrink-0 flex flex-col items-end">
-                                    <div className="text-lg font-black text-zinc-900 dark:text-white leading-none">{tasting.rating}</div>
-                                    <div className="text-[9px] font-bold text-zinc-400 uppercase tracking-tighter mt-1">Punkte</div>
+                                    <div className="text-lg font-bold text-zinc-50 leading-none">{tasting.rating}</div>
+                                    <div className="text-[9px] font-bold text-zinc-500 uppercase tracking-tighter mt-1">Punkte</div>
                                 </div>
                             </div>
 
                             {wasPreviousSmoky && timeSinceLastDram < 20 && (
-                                <div className="mt-4 p-2 bg-amber-50 dark:bg-amber-900/10 border border-amber-200/50 dark:border-amber-900/30 rounded-xl flex items-center gap-2 animate-in slide-in-from-top-1">
-                                    <AlertTriangle size={12} className="text-amber-600 shrink-0" />
-                                    <p className="text-[9px] text-amber-800 dark:text-amber-400 font-bold leading-tight">
+                                <div className="mt-4 p-2 bg-orange-900/10 border border-orange-900/30 rounded-xl flex items-center gap-2 animate-in slide-in-from-top-1">
+                                    <AlertTriangle size={12} className="text-orange-600 shrink-0" />
+                                    <p className="text-[9px] text-orange-400 font-bold leading-tight">
                                         Achtung: Gaumen war noch torf-belegt (nur {timeSinceLastDram}m Abstand).
                                     </p>
                                 </div>
diff --git a/src/components/StatsDashboard.tsx b/src/components/StatsDashboard.tsx
index 0110061..73fa162 100644
--- a/src/components/StatsDashboard.tsx
+++ b/src/components/StatsDashboard.tsx
@@ -61,8 +61,8 @@ export default function StatsDashboard({ bottles }: StatsDashboardProps) {
             label: t('home.stats.avgRating'),
             value: `${stats.avgRating}/100`,
             icon: Star,
-            color: 'text-amber-600',
-            bg: 'bg-amber-50 dark:bg-amber-900/20'
+            color: 'text-orange-600',
+            bg: 'bg-orange-900/20'
         },
         {
             label: t('home.stats.topDistillery'),
@@ -74,17 +74,18 @@ export default function StatsDashboard({ bottles }: StatsDashboardProps) {
     ];
 
     return (
-        <div className="w-full grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4 h-fit animate-in fade-in slide-in-from-top-4 duration-500">
+        <div className="w-full grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4 h-fit animate-in fade-in slide-in-from-top-4 duration-500 mb-12">
             {statItems.map((item, idx) => {
+                const value = idx === 1 ? stats.totalCount : item.value;
                 return (
                     <div
                         key={idx}
                         className="flex flex-col gap-1 text-center md:text-left"
                     >
-                        <div className="text-4xl md:text-5xl font-display font-bold text-white tracking-tighter">
-                            {idx === 1 ? stats.totalCount : item.value}
+                        <div className="text-4xl md:text-5xl font-bold text-zinc-50 tracking-tighter">
+                            {value}
                         </div>
-                        <div className="text-[10px] font-sans font-bold uppercase text-[#8F9096] tracking-widest px-1">
+                        <div className="text-[10px] font-bold uppercase text-zinc-500 tracking-[0.2em]">
                             {item.label}
                         </div>
                     </div>
diff --git a/src/components/TagSelector.tsx b/src/components/TagSelector.tsx
index 50f720e..324be14 100644
--- a/src/components/TagSelector.tsx
+++ b/src/components/TagSelector.tsx
@@ -70,35 +70,35 @@ export default function TagSelector({ category, selectedTagIds, onToggleTag, lab
                             key={tag.id}
                             type="button"
                             onClick={() => onToggleTag(tag.id)}
-                            className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-600 text-white rounded-full text-[10px] font-black uppercase tracking-tight shadow-sm shadow-amber-600/20 animate-in fade-in zoom-in-95"
+                            className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-orange-600 text-white rounded-full text-[10px] font-bold uppercase tracking-tight shadow-sm shadow-orange-600/20 animate-in fade-in zoom-in-95"
                         >
                             {tag.is_system_default ? t(`aroma.${tag.name}`) : tag.name}
                             <X size={12} />
                         </button>
                     ))
                 ) : (
-                    <span className="text-[10px] italic text-zinc-400 font-medium">Noch keine Tags gewählt...</span>
+                    <span className="text-[10px] italic text-zinc-500 font-medium">Noch keine Tags gewählt...</span>
                 )}
             </div>
 
             {/* Search and Suggest */}
             <div className="relative">
                 <div className="relative flex items-center">
-                    <Search className="absolute left-3 text-zinc-400" size={14} />
+                    <Search className="absolute left-3 text-zinc-500" size={14} />
                     <input
                         type="text"
                         value={search}
                         onChange={(e) => setSearch(e.target.value)}
                         placeholder="Tag suchen oder hinzufügen..."
-                        className="w-full pl-9 pr-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-xs focus:ring-2 focus:ring-amber-500 outline-none transition-all dark:text-zinc-200 placeholder:text-zinc-400"
+                        className="w-full pl-9 pr-4 py-2 bg-zinc-900 border border-zinc-800 rounded-xl text-xs focus:ring-1 focus:ring-orange-600 outline-none transition-all text-zinc-200 placeholder:text-zinc-600"
                     />
                     {isCreating && (
-                        <Loader2 className="absolute right-3 animate-spin text-amber-600" size={14} />
+                        <Loader2 className="absolute right-3 animate-spin text-orange-600" size={14} />
                     )}
                 </div>
 
                 {search && (
-                    <div className="absolute z-10 w-full mt-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-2xl shadow-xl overflow-hidden animate-in fade-in slide-in-from-top-2">
+                    <div className="absolute z-10 w-full mt-2 bg-zinc-900 border border-zinc-800 rounded-2xl shadow-xl overflow-hidden animate-in fade-in slide-in-from-top-2">
                         <div className="max-h-48 overflow-y-auto">
                             {filteredTags.length > 0 ? (
                                 filteredTags.map(tag => (
@@ -109,17 +109,17 @@ export default function TagSelector({ category, selectedTagIds, onToggleTag, lab
                                             onToggleTag(tag.id);
                                             setSearch('');
                                         }}
-                                        className="w-full px-4 py-2.5 text-left text-xs font-bold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700/50 flex items-center justify-between border-b border-zinc-100 dark:border-zinc-700 last:border-0"
+                                        className="w-full px-4 py-2.5 text-left text-xs font-bold text-zinc-300 hover:bg-zinc-800/50 flex items-center justify-between border-b border-zinc-800 last:border-0"
                                     >
                                         {tag.is_system_default ? t(`aroma.${tag.name}`) : tag.name}
-                                        {selectedTagIds.includes(tag.id) && <Check size={12} className="text-amber-600" />}
+                                        {selectedTagIds.includes(tag.id) && <Check size={12} className="text-orange-600" />}
                                     </button>
                                 ))
                             ) : (
                                 <button
                                     type="button"
                                     onClick={handleCreateTag}
-                                    className="w-full px-4 py-3 text-left text-xs font-bold text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/10 flex items-center gap-2"
+                                    className="w-full px-4 py-3 text-left text-xs font-bold text-orange-600 hover:bg-orange-950/10 flex items-center gap-2"
                                 >
                                     <Plus size={14} />
                                     "{search}" als neuen Tag hinzufügen
@@ -133,7 +133,7 @@ export default function TagSelector({ category, selectedTagIds, onToggleTag, lab
             {/* AI Suggestions */}
             {!search && suggestedTagNames && suggestedTagNames.length > 0 && (
                 <div className="space-y-2">
-                    <div className="flex items-center gap-1.5 text-[9px] font-black uppercase tracking-widest text-amber-500">
+                    <div className="flex items-center gap-1.5 text-[9px] font-bold uppercase tracking-widest text-orange-500">
                         <Sparkles size={10} /> {t('camera.wbMatchFound') ? 'KI Vorschläge' : 'AI Suggestions'}
                     </div>
                     <div className="flex flex-wrap gap-1.5">
@@ -144,7 +144,7 @@ export default function TagSelector({ category, selectedTagIds, onToggleTag, lab
                                     key={tag.id}
                                     type="button"
                                     onClick={() => onToggleTag(tag.id)}
-                                    className="px-2.5 py-1 rounded-lg bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 text-[10px] font-bold uppercase tracking-tight hover:bg-amber-100 dark:hover:bg-amber-900/30 transition-colors border border-amber-200 dark:border-amber-800/50 flex items-center gap-1.5"
+                                    className="px-2.5 py-1 rounded-lg bg-orange-950/20 text-orange-500 text-[10px] font-bold uppercase tracking-tight hover:bg-orange-900/30 transition-colors border border-orange-900/50 flex items-center gap-1.5"
                                 >
                                     <Sparkles size={10} />
                                     {tag.is_system_default ? t(`aroma.${tag.name}`) : tag.name}
@@ -157,7 +157,7 @@ export default function TagSelector({ category, selectedTagIds, onToggleTag, lab
             {/* AI Custom Suggestions */}
             {!search && suggestedCustomTagNames && suggestedCustomTagNames.length > 0 && (
                 <div className="space-y-2">
-                    <div className="flex items-center gap-1.5 text-[9px] font-black uppercase tracking-widest text-zinc-400">
+                    <div className="flex items-center gap-1.5 text-[9px] font-bold uppercase tracking-widest text-zinc-500">
                         Dominante Note anlegen?
                     </div>
                     <div className="flex flex-wrap gap-1.5">
@@ -177,7 +177,7 @@ export default function TagSelector({ category, selectedTagIds, onToggleTag, lab
                                         }
                                         setCreatingSuggestion(null);
                                     }}
-                                    className="px-2.5 py-1 rounded-lg bg-zinc-50 dark:bg-zinc-800/50 text-zinc-500 dark:text-zinc-400 text-[10px] font-bold uppercase tracking-tight hover:bg-amber-600 hover:text-white transition-all border border-dashed border-zinc-200 dark:border-zinc-700/50 flex items-center gap-1.5 disabled:opacity-50"
+                                    className="px-2.5 py-1 rounded-lg bg-zinc-900/50 text-zinc-400 text-[10px] font-bold uppercase tracking-tight hover:bg-orange-600 hover:text-white transition-all border border-dashed border-zinc-800 flex items-center gap-1.5 disabled:opacity-50"
                                 >
                                     {creatingSuggestion === name ? <Loader2 size={10} className="animate-spin" /> : <Plus size={10} />}
                                     {name}
@@ -188,7 +188,7 @@ export default function TagSelector({ category, selectedTagIds, onToggleTag, lab
             )}
 
             {/* Suggestions Chips (limit to 6 random or most common) */}
-            {!search && tags.length > 0 && (
+            {!search && (tags || []).length > 0 && (
                 <div className="flex flex-wrap gap-1.5 pt-1">
                     {(tags || [])
                         .filter(t => !selectedTagIds.includes(t.id) && (!suggestedTagNames || !suggestedTagNames.some((s: string) => s.toLowerCase() === t.name.toLowerCase())))
@@ -198,7 +198,7 @@ export default function TagSelector({ category, selectedTagIds, onToggleTag, lab
                                 key={tag.id}
                                 type="button"
                                 onClick={() => onToggleTag(tag.id)}
-                                className="px-2.5 py-1 rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 text-[10px] font-bold uppercase tracking-tight hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors border border-zinc-200/50 dark:border-zinc-700/50"
+                                className="px-2.5 py-1 rounded-lg bg-zinc-900 text-zinc-500 text-[10px] font-bold uppercase tracking-tight hover:bg-zinc-800 hover:text-zinc-200 transition-colors border border-zinc-800"
                             >
                                 {tag.is_system_default ? t(`aroma.${tag.name}`) : tag.name}
                             </button>
diff --git a/src/components/TastingEditor.tsx b/src/components/TastingEditor.tsx
index 4fa86a3..c4d52b2 100644
--- a/src/components/TastingEditor.tsx
+++ b/src/components/TastingEditor.tsx
@@ -123,18 +123,18 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
     };
 
     return (
-        <div className="flex-1 flex flex-col w-full bg-[#0F1014] h-full overflow-hidden">
+        <div className="flex-1 flex flex-col w-full bg-zinc-950 h-full overflow-hidden">
             {/* Top Context Bar - Flex Child 1 */}
-            <div className="w-full bg-black/40 backdrop-blur-md border-b border-white/10 shrink-0">
+            <div className="w-full bg-zinc-900 border-b border-zinc-800 shrink-0">
                 <button
                     onClick={onOpenSessions}
                     className="max-w-2xl mx-auto w-full p-6 flex items-center justify-between group"
                 >
                     <div className="text-left">
-                        <p className="text-[10px] font-black uppercase tracking-widest text-[#C89D46]">Kontext</p>
-                        <p className="font-bold text-white leading-none mt-1">{activeSessionName || 'Trinkst du in Gesellschaft?'}</p>
+                        <p className="text-[10px] font-bold uppercase tracking-widest text-orange-500">Kontext</p>
+                        <p className="font-bold text-zinc-50 leading-none mt-1">{activeSessionName || 'Trinkst du in Gesellschaft?'}</p>
                     </div>
-                    <ChevronDown size={20} className="text-[#C89D46] group-hover:translate-y-1 transition-transform" />
+                    <ChevronDown size={20} className="text-orange-500 group-hover:translate-y-1 transition-transform" />
                 </button>
             </div>
 
@@ -146,50 +146,50 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                         <motion.div
                             initial={{ opacity: 0, y: -20 }}
                             animate={{ opacity: 1, y: 0 }}
-                            className="p-5 bg-amber-500/10 border border-amber-500/20 rounded-3xl flex items-start gap-3"
+                            className="p-5 bg-orange-500/10 border border-orange-500/20 rounded-2xl flex items-start gap-3"
                         >
-                            <AlertTriangle size={24} className="text-amber-500 shrink-0 mt-0.5" />
+                            <AlertTriangle size={24} className="text-orange-500 shrink-0 mt-0.5" />
                             <div className="space-y-1">
-                                <p className="text-[10px] font-black uppercase tracking-wider text-amber-500">Palette-Checker</p>
-                                <p className="text-xs font-bold text-white leading-relaxed">
+                                <p className="text-[10px] font-bold uppercase tracking-wider text-orange-500">Palette-Checker</p>
+                                <p className="text-xs font-bold text-zinc-50 leading-relaxed">
                                     Dein letzter Dram "{lastDramInSession?.name}" war torfig. Trink etwas Wasser!
                                 </p>
-                                <button onClick={() => setShowPaletteWarning(false)} className="text-[10px] font-black uppercase text-amber-500 underline mt-2 block">Verstanden</button>
+                                <button onClick={() => setShowPaletteWarning(false)} className="text-[10px] font-bold uppercase text-orange-500 underline mt-2 block">Verstanden</button>
                             </div>
                         </motion.div>
                     )}
 
                     {/* Hero Section */}
                     <div className="flex items-center gap-6">
-                        <div className="w-24 h-32 bg-white/5 rounded-2xl border border-white/10 flex items-center justify-center overflow-hidden shrink-0 shadow-2xl relative">
+                        <div className="w-24 h-32 bg-zinc-900 rounded-xl border border-zinc-800 flex items-center justify-center overflow-hidden shrink-0 shadow-2xl relative">
                             {image ? (
                                 <img src={image} alt="Bottle Preview" className="w-full h-full object-cover" />
                             ) : (
-                                <div className="text-[10px] text-white/20 uppercase font-black rotate-[-15deg]">No Photo</div>
+                                <div className="text-[10px] text-zinc-700 uppercase font-bold rotate-[-15deg]">No Photo</div>
                             )}
                         </div>
                         <div className="flex-1 min-w-0">
-                            <h1 className="text-3xl font-black text-amber-600 mb-1 truncate leading-none uppercase tracking-tight">
+                            <h1 className="text-3xl font-bold text-orange-600 mb-1 truncate leading-none uppercase tracking-tight">
                                 {bottleMetadata.distillery || 'Destillerie'}
                             </h1>
-                            <p className="text-white text-xl font-bold truncate mb-2">{bottleMetadata.name || 'Unbekannter Malt'}</p>
-                            <p className="text-white/40 text-[10px] font-black uppercase tracking-widest leading-none">
+                            <p className="text-zinc-50 text-xl font-bold truncate mb-2">{bottleMetadata.name || 'Unbekannter Malt'}</p>
+                            <p className="text-zinc-500 text-[10px] font-bold uppercase tracking-widest leading-none">
                                 {bottleMetadata.category || 'Whisky'} {bottleMetadata.abv ? `• ${bottleMetadata.abv}%` : ''} {bottleMetadata.age ? `• ${bottleMetadata.age}y` : ''}
                             </p>
                         </div>
                     </div>
 
                     {/* Rating Slider */}
-                    <div className="space-y-6 bg-white/5 p-8 rounded-[40px] border border-white/10 shadow-inner relative overflow-hidden">
+                    <div className="space-y-6 bg-zinc-900 p-8 rounded-3xl border border-zinc-800 shadow-inner relative overflow-hidden">
                         <div className="absolute top-0 right-0 p-4 opacity-5 pointer-events-none">
-                            <Zap size={120} className="text-amber-500" />
+                            <Zap size={120} className="text-orange-500" />
                         </div>
                         <div className="flex items-center justify-between relative z-10">
-                            <label className="text-xs font-black text-white/40 uppercase tracking-[0.2em] flex items-center gap-2">
-                                <Star size={14} className="text-amber-500 fill-amber-500" />
+                            <label className="text-xs font-bold text-zinc-500 uppercase tracking-[0.2em] flex items-center gap-2">
+                                <Star size={14} className="text-orange-500 fill-orange-500" />
                                 {t('tasting.rating')}
                             </label>
-                            <span className="text-4xl font-black text-amber-600 tracking-tighter">{rating}<span className="text-white/20 text-sm ml-1">/100</span></span>
+                            <span className="text-4xl font-bold text-orange-600 tracking-tighter">{rating}<span className="text-zinc-700 text-sm ml-1">/100</span></span>
                         </div>
                         <input
                             type="range"
@@ -197,9 +197,9 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                             max="100"
                             value={rating}
                             onChange={(e) => setRating(parseInt(e.target.value))}
-                            className="w-full h-2 bg-zinc-800 rounded-full appearance-none cursor-pointer accent-amber-600 transition-all"
+                            className="w-full h-2 bg-zinc-800 rounded-full appearance-none cursor-pointer accent-orange-600 transition-all"
                         />
-                        <div className="flex justify-between text-[10px] text-zinc-500 font-black uppercase tracking-widest px-1 relative z-10">
+                        <div className="flex justify-between text-[10px] text-zinc-500 font-bold uppercase tracking-widest px-1 relative z-10">
                             <span>Swill</span>
                             <span>Dram</span>
                             <span>Legendary</span>
@@ -210,9 +210,9 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                                 <button
                                     key={type}
                                     onClick={() => setIsSample(type === 'Sample')}
-                                    className={`flex-1 py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest border transition-all ${(type === 'Sample' ? isSample : !isSample)
-                                        ? 'bg-zinc-100 border-zinc-100 text-zinc-900 shadow-lg'
-                                        : 'bg-transparent border-white/10 text-white/40 hover:border-white/30'
+                                    className={`flex-1 py-4 rounded-xl text-[10px] font-bold uppercase tracking-widest border transition-all ${(type === 'Sample' ? isSample : !isSample)
+                                        ? 'bg-orange-600 border-orange-600 text-white shadow-lg'
+                                        : 'bg-transparent border-zinc-800 text-zinc-500 hover:border-zinc-700'
                                         }`}
                                 >
                                     {type}
@@ -230,14 +230,14 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                     {/* Sections */}
                     <div className="space-y-12 pb-12">
                         {/* Nose Section */}
-                        <div className="space-y-8 bg-zinc-900/50 p-8 rounded-[40px] border border-white/5">
+                        <div className="space-y-8 bg-zinc-900/50 p-8 rounded-3xl border border-zinc-800">
                             <div className="flex items-center gap-5">
-                                <div className="w-14 h-14 rounded-3xl bg-amber-500/10 flex items-center justify-center text-amber-500 shrink-0 border border-amber-500/20 shadow-xl">
+                                <div className="w-14 h-14 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-500 shrink-0 border border-orange-500/20 shadow-xl">
                                     <Wind size={28} />
                                 </div>
                                 <div>
-                                    <h3 className="text-xl font-black text-white uppercase tracking-widest leading-none">{t('tasting.nose')}</h3>
-                                    <p className="text-[10px] text-white/30 font-black uppercase tracking-widest mt-2 px-0.5">Aroma & Bouquet</p>
+                                    <h3 className="text-xl font-bold text-zinc-50 uppercase tracking-widest leading-none">{t('tasting.nose')}</h3>
+                                    <p className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest mt-2 px-0.5">Aroma & Bouquet</p>
                                 </div>
                             </div>
 
@@ -245,7 +245,7 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                                 <CustomSlider label="Nose Intensity" value={noseScore} onChange={setNoseScore} icon={<Sparkles size={16} />} />
 
                                 <div className="space-y-3">
-                                    <p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Tags</p>
+                                    <p className="text-[10px] font-bold text-zinc-700 uppercase tracking-widest px-1">Tags</p>
                                     <TagSelector
                                         category="nose"
                                         selectedTagIds={noseTagIds}
@@ -255,26 +255,26 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                                     />
                                 </div>
                                 <div className="space-y-3">
-                                    <p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Eigene Notizen</p>
+                                    <p className="text-[10px] font-bold text-zinc-700 uppercase tracking-widest px-1">Eigene Notizen</p>
                                     <textarea
                                         value={noseNotes}
                                         onChange={(e) => setNoseNotes(e.target.value)}
                                         placeholder={t('tasting.notesPlaceholder') || "Wie riecht er?..."}
-                                        className="w-full p-6 bg-zinc-900 border-none rounded-3xl text-sm text-zinc-200 focus:ring-2 focus:ring-amber-500 outline-none min-h-[120px] resize-none transition-all placeholder:text-zinc-600 shadow-inner"
+                                        className="w-full p-6 bg-zinc-900 border border-zinc-800 rounded-2xl text-sm text-zinc-200 focus:ring-1 focus:ring-orange-500 outline-none min-h-[120px] resize-none transition-all placeholder:text-zinc-600"
                                     />
                                 </div>
                             </div>
                         </div>
 
                         {/* Palate Section */}
-                        <div className="space-y-8 bg-zinc-900/50 p-8 rounded-[40px] border border-white/5">
+                        <div className="space-y-8 bg-zinc-900/50 p-8 rounded-3xl border border-zinc-800">
                             <div className="flex items-center gap-5">
-                                <div className="w-14 h-14 rounded-3xl bg-amber-500/10 flex items-center justify-center text-amber-500 shrink-0 border border-amber-500/20 shadow-xl">
+                                <div className="w-14 h-14 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-500 shrink-0 border border-orange-500/20 shadow-xl">
                                     <Utensils size={28} />
                                 </div>
                                 <div>
-                                    <h3 className="text-xl font-black text-white uppercase tracking-widest leading-none">{t('tasting.palate')}</h3>
-                                    <p className="text-[10px] text-white/30 font-black uppercase tracking-widest mt-2 px-0.5">Geschmack & Textur</p>
+                                    <h3 className="text-xl font-bold text-zinc-50 uppercase tracking-widest leading-none">{t('tasting.palate')}</h3>
+                                    <p className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest mt-2 px-0.5">Geschmack & Textur</p>
                                 </div>
                             </div>
 
@@ -282,7 +282,7 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                                 <CustomSlider label="Taste Impact" value={tasteScore} onChange={setTasteScore} icon={<Sparkles size={16} />} />
 
                                 <div className="space-y-3">
-                                    <p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Tags</p>
+                                    <p className="text-[10px] font-bold text-zinc-700 uppercase tracking-widest px-1">Tags</p>
                                     <TagSelector
                                         category="taste"
                                         selectedTagIds={palateTagIds}
@@ -292,35 +292,35 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                                     />
                                 </div>
                                 <div className="space-y-3">
-                                    <p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Eigene Notizen</p>
+                                    <p className="text-[10px] font-bold text-zinc-700 uppercase tracking-widest px-1">Eigene Notizen</p>
                                     <textarea
                                         value={palateNotes}
                                         onChange={(e) => setPalateNotes(e.target.value)}
                                         placeholder={t('tasting.notesPlaceholder') || "Wie schmeckt er?..."}
-                                        className="w-full p-6 bg-zinc-900 border-none rounded-3xl text-sm text-zinc-200 focus:ring-2 focus:ring-amber-500 outline-none min-h-[120px] resize-none transition-all placeholder:text-zinc-600 shadow-inner"
+                                        className="w-full p-6 bg-zinc-900 border border-zinc-800 rounded-2xl text-sm text-zinc-200 focus:ring-1 focus:ring-orange-500 outline-none min-h-[120px] resize-none transition-all placeholder:text-zinc-600"
                                     />
                                 </div>
                             </div>
                         </div>
 
                         {/* Finish Section */}
-                        <div className="space-y-8 bg-zinc-900/50 p-8 rounded-[40px] border border-white/5">
+                        <div className="space-y-8 bg-zinc-900/50 p-8 rounded-3xl border border-zinc-800">
                             <div className="flex items-center gap-5">
-                                <div className="w-14 h-14 rounded-3xl bg-amber-500/10 flex items-center justify-center text-amber-500 shrink-0 border border-amber-500/20 shadow-xl">
+                                <div className="w-14 h-14 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-500 shrink-0 border border-orange-500/20 shadow-xl">
                                     <Droplets size={28} />
                                 </div>
                                 <div>
-                                    <h3 className="text-xl font-black text-white uppercase tracking-widest leading-none">{t('tasting.finish')}</h3>
-                                    <p className="text-[10px] text-white/30 font-black uppercase tracking-widest mt-2 px-0.5">Abgang & Nachklang</p>
+                                    <h3 className="text-xl font-bold text-zinc-50 uppercase tracking-widest leading-none">{t('tasting.finish')}</h3>
+                                    <p className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest mt-2 px-0.5">Abgang & Nachklang</p>
                                 </div>
                             </div>
 
                             <div className="space-y-6">
                                 <CustomSlider label="Finish Duration" value={finishScore} onChange={setFinishScore} icon={<Sparkles size={16} />} />
 
-                                <div className="space-y-6 pt-4 border-t border-white/5">
+                                <div className="space-y-6 pt-4 border-t border-zinc-800">
                                     <div className="space-y-3">
-                                        <p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Aroma Tags</p>
+                                        <p className="text-[10px] font-bold text-zinc-700 uppercase tracking-widest px-1">Aroma Tags</p>
                                         <TagSelector
                                             category="finish"
                                             selectedTagIds={finishTagIds}
@@ -330,7 +330,7 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                                         />
                                     </div>
                                     <div className="space-y-3">
-                                        <p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Gefühl & Textur</p>
+                                        <p className="text-[10px] font-bold text-zinc-700 uppercase tracking-widest px-1">Gefühl & Textur</p>
                                         <TagSelector
                                             category="texture"
                                             selectedTagIds={textureTagIds}
@@ -341,12 +341,12 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                                     </div>
                                 </div>
                                 <div className="space-y-3">
-                                    <p className="text-[10px] font-black text-white/20 uppercase tracking-widest px-1">Eigene Notizen</p>
+                                    <p className="text-[10px] font-bold text-zinc-700 uppercase tracking-widest px-1">Eigene Notizen</p>
                                     <textarea
                                         value={finishNotes}
                                         onChange={(e) => setFinishNotes(e.target.value)}
                                         placeholder={t('tasting.notesPlaceholder') || "Der bleibende Eindruck..."}
-                                        className="w-full p-6 bg-zinc-900 border-none rounded-3xl text-sm text-zinc-200 focus:ring-2 focus:ring-amber-500 outline-none min-h-[120px] resize-none transition-all placeholder:text-zinc-600 shadow-inner"
+                                        className="w-full p-6 bg-zinc-900 border border-zinc-800 rounded-2xl text-sm text-zinc-200 focus:ring-1 focus:ring-orange-500 outline-none min-h-[120px] resize-none transition-all placeholder:text-zinc-600"
                                     />
                                 </div>
                             </div>
@@ -354,14 +354,14 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
 
                         {/* Buddy Selection */}
                         {buddies && buddies.length > 0 && (
-                            <div className="space-y-8 bg-zinc-900/50 p-8 rounded-[40px] border border-white/5">
+                            <div className="space-y-8 bg-zinc-900/50 p-8 rounded-3xl border border-zinc-800">
                                 <div className="flex items-center gap-5">
-                                    <div className="w-14 h-14 rounded-3xl bg-amber-500/10 flex items-center justify-center text-amber-500 shrink-0 border border-amber-500/20 shadow-xl">
+                                    <div className="w-14 h-14 rounded-2xl bg-orange-500/10 flex items-center justify-center text-orange-500 shrink-0 border border-orange-500/20 shadow-xl">
                                         <Users size={28} />
                                     </div>
                                     <div>
-                                        <h3 className="text-xl font-black text-white uppercase tracking-widest leading-none">Mit wem trinkst du?</h3>
-                                        <p className="text-[10px] text-white/30 font-black uppercase tracking-widest mt-2 px-0.5">Gesellschaft & Buddies</p>
+                                        <h3 className="text-xl font-bold text-zinc-50 uppercase tracking-widest leading-none">Mit wem trinkst du?</h3>
+                                        <p className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest mt-2 px-0.5">Gesellschaft & Buddies</p>
                                     </div>
                                 </div>
                                 <div className="flex flex-wrap gap-2">
@@ -369,9 +369,9 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                                         <button
                                             key={buddy.id}
                                             onClick={() => toggleBuddy(buddy.id)}
-                                            className={`px-5 py-3 rounded-2xl text-[10px] font-black uppercase transition-all border flex items-center gap-2 ${selectedBuddyIds.includes(buddy.id)
-                                                ? 'bg-amber-600 border-amber-600 text-white shadow-lg'
-                                                : 'bg-transparent border-white/10 text-white/40 hover:border-white/30'
+                                            className={`px-5 py-3 rounded-xl text-[10px] font-bold uppercase transition-all border flex items-center gap-2 ${selectedBuddyIds.includes(buddy.id)
+                                                ? 'bg-orange-600 border-orange-600 text-white shadow-lg'
+                                                : 'bg-transparent border-zinc-800 text-zinc-500 hover:border-zinc-700'
                                                 }`}
                                         >
                                             {selectedBuddyIds.includes(buddy.id) && <Check size={14} />}
@@ -385,15 +385,15 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
                 </div>
 
                 {/* Sticky Footer - Flex Child 3 */}
-                <div className="w-full p-8 bg-black/60 backdrop-blur-xl border-t border-white/10 shrink-0">
+                <div className="w-full p-8 bg-zinc-950 border-t border-zinc-800 shrink-0">
                     <div className="max-w-2xl mx-auto">
                         <button
                             onClick={handleInternalSave}
-                            className="w-full py-5 bg-[#C89D46] text-[#0F1014] rounded-3xl font-black uppercase tracking-widest text-xs flex items-center justify-center gap-4 shadow-xl active:scale-[0.98] transition-all"
+                            className="w-full py-5 bg-orange-600 text-white rounded-2xl font-bold uppercase tracking-widest text-xs flex items-center justify-center gap-4 shadow-xl active:scale-[0.98] transition-all"
                         >
                             <Send size={20} />
                             {t('tasting.saveTasting')}
-                            <div className="ml-auto bg-black/20 px-3 py-1 rounded-full text-[10px] font-black text-[#0F1014]/60">{rating}</div>
+                            <div className="ml-auto bg-black/20 px-3 py-1 rounded-full text-[10px] font-bold text-white/60">{rating}</div>
                         </button>
                     </div>
                 </div>
@@ -404,15 +404,15 @@ export default function TastingEditor({ bottleMetadata, image, onSave, onOpenSes
 
 function CustomSlider({ label, value, onChange, icon }: any) {
     return (
-        <div className="space-y-4 bg-zinc-900/50 p-6 rounded-3xl border border-white/5 shadow-inner">
+        <div className="space-y-4 bg-zinc-900/50 p-6 rounded-2xl border border-zinc-800 shadow-inner">
             <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3 text-white/40">
-                    <div className="p-2 rounded-xl bg-[#C89D46]/10 text-[#C89D46]">
+                <div className="flex items-center gap-3 text-zinc-500">
+                    <div className="p-2 rounded-xl bg-orange-500/10 text-orange-500">
                         {icon}
                     </div>
-                    <span className="text-[10px] font-black uppercase tracking-[0.2em]">{label}</span>
+                    <span className="text-[10px] font-bold uppercase tracking-[0.2em]">{label}</span>
                 </div>
-                <span className="text-2xl font-black text-[#C89D46] tracking-tighter">{value}</span>
+                <span className="text-2xl font-bold text-orange-500 tracking-tighter">{value}</span>
             </div>
             <input
                 type="range"
@@ -420,7 +420,7 @@ function CustomSlider({ label, value, onChange, icon }: any) {
                 max="100"
                 value={value}
                 onChange={(e) => onChange(parseInt(e.target.value))}
-                className="w-full h-1.5 bg-zinc-800 rounded-full appearance-none cursor-pointer accent-[#C89D46] transition-all"
+                className="w-full h-1.5 bg-zinc-800 rounded-full appearance-none cursor-pointer accent-orange-600 transition-all"
             />
         </div>
     );
diff --git a/src/components/UserManagementClient.tsx b/src/components/UserManagementClient.tsx
index 350eb57..1a12f3b 100644
--- a/src/components/UserManagementClient.tsx
+++ b/src/components/UserManagementClient.tsx
@@ -166,61 +166,61 @@ export default function UserManagementClient({ initialUsers, plans }: UserManage
     return (
         <div className="space-y-6">
             {/* Search Bar */}
-            <div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
+            <div className="bg-zinc-900 rounded-[32px] p-6 border border-zinc-800 shadow-sm">
                 <div className="relative">
-                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={20} />
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" size={20} />
                     <input
                         type="text"
                         placeholder="Search users by email or username..."
                         value={searchTerm}
                         onChange={(e) => setSearchTerm(e.target.value)}
-                        className="w-full pl-10 pr-4 py-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                        className="w-full pl-10 pr-4 py-3 bg-zinc-800 border border-zinc-700 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                     />
                 </div>
             </div>
 
             {/* User Table */}
-            <div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
-                <h2 className="text-xl font-black text-zinc-900 dark:text-white mb-4">Users ({filteredUsers.length})</h2>
-                <div className="overflow-x-auto">
+            <div className="bg-zinc-900 rounded-[32px] p-6 border border-zinc-800 shadow-sm overflow-hidden">
+                <h2 className="text-xl font-bold text-white uppercase tracking-tighter mb-6">Users ({filteredUsers.length})</h2>
+                <div className="overflow-x-auto -mx-6">
                     <table className="w-full">
                         <thead>
-                            <tr className="border-b border-zinc-200 dark:border-zinc-800">
-                                <th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">User</th>
-                                <th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Balance</th>
-                                <th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Used</th>
-                                <th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Daily Limit</th>
-                                <th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Costs</th>
-                                <th className="text-right py-3 px-4 text-xs font-black uppercase text-zinc-400">Actions</th>
+                            <tr className="border-b border-zinc-800">
+                                <th className="text-left py-4 px-6 text-[10px] font-bold uppercase tracking-widest text-zinc-500">User</th>
+                                <th className="text-left py-4 px-6 text-[10px] font-bold uppercase tracking-widest text-zinc-500">Balance</th>
+                                <th className="text-left py-4 px-6 text-[10px] font-bold uppercase tracking-widest text-zinc-500">Used</th>
+                                <th className="text-left py-4 px-6 text-[10px] font-bold uppercase tracking-widest text-zinc-500">Daily Limit</th>
+                                <th className="text-left py-4 px-6 text-[10px] font-bold uppercase tracking-widest text-zinc-500">Costs</th>
+                                <th className="text-right py-4 px-6 text-[10px] font-bold uppercase tracking-widest text-zinc-500">Actions</th>
                             </tr>
                         </thead>
-                        <tbody>
+                        <tbody className="divide-y divide-zinc-800/50">
                             {filteredUsers.map((user) => (
-                                <tr key={user.id} className="border-b border-zinc-100 dark:border-zinc-800/50 hover:bg-zinc-50 dark:hover:bg-zinc-800/30">
-                                    <td className="py-3 px-4">
+                                <tr key={user.id} className="hover:bg-zinc-800/30 transition-colors">
+                                    <td className="py-4 px-6">
                                         <div>
-                                            <div className="font-semibold text-zinc-900 dark:text-white">{user.username}</div>
-                                            <div className="text-xs text-zinc-500">{user.email}</div>
+                                            <div className="font-bold text-white uppercase tracking-tight text-sm">{user.username}</div>
+                                            <div className="text-[10px] font-medium text-zinc-500">{user.email}</div>
                                         </div>
                                     </td>
-                                    <td className="py-3 px-4">
-                                        <span className={`text-lg font-black ${user.balance < 10 ? 'text-red-600' : 'text-green-600'}`}>
+                                    <td className="py-4 px-6">
+                                        <span className={`text-lg font-bold tracking-tighter ${user.balance < 10 ? 'text-red-500' : 'text-orange-600'}`}>
                                             {user.balance}
                                         </span>
                                     </td>
-                                    <td className="py-3 px-4 text-sm text-zinc-600 dark:text-zinc-400">
+                                    <td className="py-4 px-6 text-sm font-medium text-zinc-400">
                                         {user.total_used}
                                     </td>
-                                    <td className="py-3 px-4 text-sm text-zinc-600 dark:text-zinc-400">
+                                    <td className="py-4 px-6 text-xs text-zinc-500 uppercase tracking-widest">
                                         {user.daily_limit || 'Global (80)'}
                                     </td>
-                                    <td className="py-3 px-4 text-xs text-zinc-500">
+                                    <td className="py-4 px-6 text-[10px] font-bold text-zinc-600 uppercase tracking-widest">
                                         G:{user.google_search_cost} / AI:{user.gemini_ai_cost}
                                     </td>
-                                    <td className="py-3 px-4 text-right">
+                                    <td className="py-4 px-6 text-right">
                                         <button
                                             onClick={() => handleEditUser(user)}
-                                            className="inline-flex items-center gap-2 px-3 py-1.5 bg-amber-600 hover:bg-amber-700 text-white rounded-lg text-xs font-bold transition-colors"
+                                            className="inline-flex items-center gap-2 px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-xl text-[10px] font-bold uppercase tracking-widest transition-all shadow-md shadow-orange-950/20"
                                         >
                                             <Edit size={14} />
                                             Edit
@@ -235,18 +235,18 @@ export default function UserManagementClient({ initialUsers, plans }: UserManage
 
             {/* Edit Modal */}
             {editingUser && (
-                <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-                    <div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-zinc-200 dark:border-zinc-800">
-                        <div className="flex items-center justify-between mb-6">
+                <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+                    <div className="bg-zinc-900 rounded-[32px] p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-zinc-800 shadow-2xl space-y-8">
+                        <div className="flex items-center justify-between">
                             <div>
-                                <h3 className="text-2xl font-black text-zinc-900 dark:text-white">Edit User</h3>
-                                <p className="text-sm text-zinc-500 mt-1">{editingUser.email}</p>
+                                <h3 className="text-2xl font-bold text-white uppercase tracking-tighter">Edit User</h3>
+                                <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">{editingUser.email}</p>
                             </div>
                             <button
                                 onClick={() => setEditingUser(null)}
-                                className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
+                                className="p-2 hover:bg-zinc-800 rounded-xl transition-colors text-zinc-500"
                             >
-                                <X size={20} />
+                                <X size={24} />
                             </button>
                         </div>
 
@@ -262,40 +262,40 @@ export default function UserManagementClient({ initialUsers, plans }: UserManage
 
                         <div className="space-y-6">
                             {/* Current Balance */}
-                            <div className="p-4 bg-zinc-50 dark:bg-zinc-800 rounded-xl">
-                                <div className="text-xs font-black uppercase text-zinc-400 mb-1">Current Balance</div>
-                                <div className="text-3xl font-black text-zinc-900 dark:text-white">{editingUser.balance} Credits</div>
+                            <div className="p-6 bg-zinc-800/50 rounded-2xl border border-zinc-800">
+                                <div className="text-[10px] font-bold uppercase text-zinc-500 tracking-widest mb-1">Current Balance</div>
+                                <div className="text-4xl font-bold text-orange-600 tracking-tighter">{editingUser.balance} <span className="text-xl text-zinc-500 ml-1">Credits</span></div>
                             </div>
 
                             {/* Add/Remove Credits */}
                             <div className="space-y-4">
-                                <h4 className="font-bold text-zinc-900 dark:text-white">Adjust Credits</h4>
+                                <h4 className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Adjust Credits</h4>
                                 <div className="grid grid-cols-2 gap-4">
                                     <div>
-                                        <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Amount</label>
+                                        <label className="block text-[8px] font-bold text-zinc-600 uppercase tracking-widest mb-1 ml-1">Amount</label>
                                         <input
                                             type="number"
                                             value={creditAmount}
                                             onChange={(e) => setCreditAmount(e.target.value)}
                                             placeholder="e.g. 100 or -50"
-                                            className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                            className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                                         />
                                     </div>
                                     <div>
-                                        <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Reason</label>
+                                        <label className="block text-[8px] font-bold text-zinc-600 uppercase tracking-widest mb-1 ml-1">Reason</label>
                                         <input
                                             type="text"
                                             value={reason}
                                             onChange={(e) => setReason(e.target.value)}
                                             placeholder="e.g. Monthly bonus"
-                                            className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                            className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                                         />
                                     </div>
                                 </div>
                                 <button
                                     onClick={handleUpdateCredits}
                                     disabled={loading || !creditAmount || !reason}
-                                    className="w-full py-3 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                                    className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-2xl transition-all shadow-lg shadow-orange-950/20 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                                 >
                                     <Plus size={18} />
                                     Update Credits
@@ -306,20 +306,20 @@ export default function UserManagementClient({ initialUsers, plans }: UserManage
 
                             {/* Subscription Plan */}
                             <div className="space-y-4">
-                                <h4 className="font-bold text-zinc-900 dark:text-white">Subscription Plan</h4>
+                                <h4 className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Subscription Plan</h4>
                                 {currentPlan && (
-                                    <div className="p-4 bg-amber-50 dark:bg-amber-900/20 rounded-xl border border-amber-200 dark:border-amber-800">
-                                        <div className="text-xs font-bold text-amber-600 dark:text-amber-400 uppercase mb-1">Current Plan</div>
-                                        <div className="text-lg font-black text-amber-900 dark:text-amber-100">{currentPlan.display_name}</div>
-                                        <div className="text-sm text-amber-700 dark:text-amber-300 mt-1">{currentPlan.monthly_credits} credits/month</div>
+                                    <div className="p-4 bg-orange-900/20 rounded-2xl border border-orange-500/30">
+                                        <div className="text-[10px] font-bold text-orange-400 uppercase tracking-widest mb-1">Current Plan</div>
+                                        <div className="text-xl font-bold text-orange-100 uppercase tracking-tight">{currentPlan.display_name}</div>
+                                        <div className="text-[10px] font-bold text-orange-400/60 uppercase tracking-widest mt-1">{currentPlan.monthly_credits} credits/month</div>
                                     </div>
                                 )}
                                 <div>
-                                    <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Assign Plan</label>
+                                    <label className="block text-[8px] font-bold text-zinc-600 uppercase tracking-widest mb-1 ml-1">Assign Plan</label>
                                     <select
                                         value={selectedPlan}
                                         onChange={(e) => setSelectedPlan(e.target.value)}
-                                        className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                        className="w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white appearance-none"
                                     >
                                         <option value="">Select a plan...</option>
                                         {plans.map(plan => (
@@ -343,41 +343,41 @@ export default function UserManagementClient({ initialUsers, plans }: UserManage
 
                             {/* Settings */}
                             <div className="space-y-4">
-                                <h4 className="font-bold text-zinc-900 dark:text-white">User Settings</h4>
+                                <h4 className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">User Settings</h4>
                                 <div className="grid grid-cols-3 gap-4">
                                     <div>
-                                        <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Daily Limit</label>
+                                        <label className="block text-[8px] font-bold text-zinc-600 uppercase tracking-widest mb-1 ml-1">Daily Limit</label>
                                         <input
                                             type="number"
                                             value={dailyLimit}
                                             onChange={(e) => setDailyLimit(e.target.value)}
                                             placeholder="Global (80)"
-                                            className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                            className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                                         />
                                     </div>
                                     <div>
-                                        <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Google Cost</label>
+                                        <label className="block text-[8px] font-bold text-zinc-600 uppercase tracking-widest mb-1 ml-1">Google Cost</label>
                                         <input
                                             type="number"
                                             value={googleCost}
                                             onChange={(e) => setGoogleCost(e.target.value)}
-                                            className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                            className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                                         />
                                     </div>
                                     <div>
-                                        <label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Gemini Cost</label>
+                                        <label className="block text-[8px] font-bold text-zinc-600 uppercase tracking-widest mb-1 ml-1">Gemini Cost</label>
                                         <input
                                             type="number"
                                             value={geminiCost}
                                             onChange={(e) => setGeminiCost(e.target.value)}
-                                            className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
+                                            className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
                                         />
                                     </div>
                                 </div>
                                 <button
                                     onClick={handleUpdateSettings}
                                     disabled={loading}
-                                    className="w-full py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 font-bold rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                                    className="w-full py-4 bg-zinc-800 hover:bg-zinc-700 text-white font-bold rounded-2xl transition-all border border-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                                 >
                                     <Check size={18} />
                                     Save Settings