diff --git a/shop/app/admin/tools/page.tsx b/shop/app/admin/tools/page.tsx
index f09255f..a36073e 100644
--- a/shop/app/admin/tools/page.tsx
+++ b/shop/app/admin/tools/page.tsx
@@ -1,16 +1,15 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { 
-  getDatabaseIntegrity, 
-  repairDatabaseSchema, 
-  optimizeDatabaseIndices 
+import { motion } from "framer-motion";
+import {
+  getDatabaseIntegrity,
+  repairDatabaseSchema,
+  optimizeDatabaseIndices
 } from "@/lib/actions/admin";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Loader2, RefreshCw, Wrench, Database, AlertTriangle, CheckCircle2, XCircle, Terminal, ArrowLeft } from "lucide-react";
-import Link from "next/link";
+import { Loader2, RefreshCw, Wrench, Database, CheckCircle2, XCircle, Terminal } from "lucide-react";
 import { createClient } from "@/lib/supabase/client";
 import { useRouter } from "next/navigation";
 
@@ -26,6 +25,19 @@ interface IntegrityData {
   };
 }
 
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 }
+  }
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 15 },
+  visible: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 80, damping: 15 } }
+};
+
 export default function AdminToolsPage() {
   const [integrity, setIntegrity] = useState<IntegrityData | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -88,218 +100,145 @@ export default function AdminToolsPage() {
 
   useEffect(() => {
     async function checkAccess() {
-      const supabase = createClient();
-      const { data: { user } } = await supabase.auth.getUser();
-      if (!user) {
-        router.push('/auth/login');
-        return;
+      try {
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          router.push('/auth/login');
+          return;
+        }
+
+        const [userRes] = await Promise.all([
+          supabase.from('users').select('role').eq('id', user.id).single(),
+          loadStatus(true)
+        ]);
+
+        if (!userRes.data || userRes.data.role === 'verwaltung') {
+          router.push('/admin');
+          return;
+        }
+      } catch (err) {
+        console.error("Fehler beim Laden von Admin Tools:", err);
+      } finally {
+        setLoading(false);
       }
-      const { data: userData } = await supabase
-        .from('users')
-        .select('role')
-        .eq('id', user.id)
-        .single();
-      if (!userData || userData.role === 'verwaltung') {
-        router.push('/admin');
-        return;
-      }
-      setLoading(false);
-      loadStatus();
     }
     checkAccess();
   }, [router]);
 
   if (loading) {
-    return <div className="min-h-screen bg-[#020617] text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
+    return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
   }
 
   return (
-    <div className="min-h-screen bg-[#020617] text-white px-4 py-12 relative overflow-hidden">
-      {/* Background decoration */}
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-blue-600/10 blur-[120px] rounded-full -z-10 opacity-30" />
-      
-      {/* Loading Overlay */}
-      {isLoading && (
-        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex flex-col items-center justify-center gap-4">
-          <Loader2 className="w-12 h-12 text-primary animate-spin" />
-          <p className="text-slate-200 text-lg font-medium">
-            {activeAction === "repair" 
-              ? "Schema wird repariert..." 
-              : activeAction === "optimize" 
-              ? "Datenbank wird indexiert..." 
-              : "Verbindung zur Datenbank wird aufgebaut..."}
-          </p>
-        </div>
-      )}
+    <div className="p-6 max-w-7xl mx-auto text-slate-900 dark:text-white space-y-6">
+      {/* Header */}
+      <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="space-y-1">
+        <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
+          <Database className="w-8 h-8 text-primary" />
+          Datenbank Cockpit & Tools
+        </h1>
+        <p className="text-slate-400 text-xs">
+          Verwalten und reparieren Sie Systemtabellen, Sicherheitsrichtlinien (RLS) und Datenbank-Indizes.
+        </p>
+      </motion.div>
 
-      <div className="max-w-5xl mx-auto space-y-8">
-        {/* Header */}
-        <div className="flex items-center gap-4">
-          <Link href="/">
-            <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
-              <ArrowLeft className="w-4 h-4 mr-2" /> Startseite
-            </Button>
-          </Link>
-          <div>
-            <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
-              <Database className="w-8 h-8 text-primary" />
-              Admin Datenbank-Cockpit
-            </h1>
-            <p className="text-slate-400 text-sm mt-1">
-              Verwalten und reparieren Sie Systemtabellen, Sicherheitsrichtlinien (RLS) und Datenbank-Indizes.
-            </p>
-          </div>
-        </div>
-
-        {/* Action Controls */}
-        <div className="grid md:grid-cols-3 gap-6">
-          <Card className="glass-dark border-white/10 flex flex-col justify-between">
-            <CardHeader>
-              <CardTitle className="text-white text-lg flex items-center gap-2">
-                <RefreshCw className="w-5 h-5 text-blue-400" />
-                Integritätsscan
-              </CardTitle>
-              <CardDescription className="text-slate-400">
+      {/* Bento Grid layout */}
+      <motion.div variants={containerVariants} initial="hidden" animate="visible" className="grid grid-cols-1 md:grid-cols-3 gap-5">
+        {/* Bento Card 1: Integritätsscan */}
+        <motion.div variants={itemVariants} whileHover={{ y: -3 }} className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-blue-500/30 transition-all duration-300 shadow-md">
+          <div className="space-y-3">
+            <div className="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center">
+              <RefreshCw className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">Integritätsscan</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                 Prüft die physische Existenz der Tabellen und zählt deren Zeilenanzahl.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="pt-0">
-              <Button 
-                onClick={() => loadStatus()} 
-                disabled={isLoading}
-                className="w-full bg-blue-600 hover:bg-blue-700 text-white"
-              >
-                Status aktualisieren
-              </Button>
-            </CardContent>
-          </Card>
-
-          <Card className="glass-dark border-white/10 flex flex-col justify-between">
-            <CardHeader>
-              <CardTitle className="text-white text-lg flex items-center gap-2">
-                <Wrench className="w-5 h-5 text-emerald-400" />
-                Schema reparieren
-              </CardTitle>
-              <CardDescription className="text-slate-400">
-                Erstellt fehlende Kerntabellen automatisch neu und konfiguriert die RLS-Rechte.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="pt-0">
-              <Button 
-                onClick={handleRepair} 
-                disabled={isLoading}
-                className="w-full bg-emerald-600 hover:bg-emerald-700 text-white"
-              >
-                Schema reparieren
-              </Button>
-            </CardContent>
-          </Card>
-
-          <Card className="glass-dark border-white/10 flex flex-col justify-between">
-            <CardHeader>
-              <CardTitle className="text-white text-lg flex items-center gap-2">
-                <Database className="w-5 h-5 text-amber-400" />
-                Index optimieren
-              </CardTitle>
-              <CardDescription className="text-slate-400">
-                Baut korrupte Suchindizes im Schema public mittels REINDEX neu auf.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="pt-0">
-              <Button 
-                onClick={handleOptimize} 
-                disabled={isLoading}
-                className="w-full bg-amber-600 hover:bg-amber-700 text-white"
-              >
-                Index optimieren
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Tabellenstatus */}
-        <Card className="glass-dark border-white/10">
-          <CardHeader>
-            <CardTitle className="text-white text-xl">Tabellen-Status & Diagnose</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-4">
-              {integrity?.tables ? (
-                Object.entries(integrity.tables).map(([name, status]) => (
-                  <div 
-                    key={name} 
-                    className="p-4 rounded-xl border bg-white/5 border-white/10 flex flex-col justify-between gap-2"
-                  >
-                    <span className="font-semibold text-slate-300 text-sm capitalize">
-                      {name.replace("_", " ")}
-                    </span>
-                    <div className="flex items-center justify-between">
-                      <span className="text-xs text-slate-500">Zeilen: {status.count}</span>
-                      {status.exists ? (
-                        <Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20 gap-1">
-                          <CheckCircle2 className="w-3.5 h-3.5" /> OK
-                        </Badge>
-                      ) : (
-                        <Badge className="bg-red-500/10 text-red-400 border-red-500/20 gap-1">
-                          <XCircle className="w-3.5 h-3.5" /> Fehlt
-                        </Badge>
-                      )}
-                    </div>
-                  </div>
-                ))
-              ) : (
-                <div className="col-span-4 py-8 text-center text-slate-500 text-sm">
-                  Lade Diagnosedaten...
-                </div>
-              )}
+              </p>
             </div>
+          </div>
+          <Button onClick={() => loadStatus()} disabled={isLoading} className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-xl h-10 text-xs font-bold">
+            {isLoading && activeAction === null ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Prüft...</> : 'Status Scannen'}
+          </Button>
+        </motion.div>
 
-            {/* Foreign Key Errors */}
-            {integrity && integrity.errors.foreign_keys > 0 && (
-              <div className="p-4 rounded-xl bg-red-500/10 border border-red-500/20 flex gap-3 items-center">
-                <AlertTriangle className="w-6 h-6 text-red-400 shrink-0" />
-                <div>
-                  <p className="font-bold text-red-200">Fremdschlüssel-Fehler gefunden!</p>
-                  <p className="text-red-300/80 text-sm">
-                    Es wurden {integrity.errors.foreign_keys} verwaiste Lizenzen ohne zugeordneten Endkunden in der Tabelle `licenses` detektiert.
-                  </p>
+        {/* Bento Card 2: Schema Reparieren */}
+        <motion.div variants={itemVariants} whileHover={{ y: -3 }} className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-emerald-500/30 transition-all duration-300 shadow-md">
+          <div className="space-y-3">
+            <div className="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 flex items-center justify-center">
+              <Wrench className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">Schema Reparieren</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Erstellt fehlende Kerntabellen automatisch neu und konfiguriert RLS-Rechte.
+              </p>
+            </div>
+          </div>
+          <Button onClick={handleRepair} disabled={isLoading} className="w-full bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl h-10 text-xs font-bold">
+            {isLoading && activeAction === 'repair' ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Repariert...</> : 'Schema Reparieren'}
+          </Button>
+        </motion.div>
+
+        {/* Bento Card 3: Index Optimieren */}
+        <motion.div variants={itemVariants} whileHover={{ y: -3 }} className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-amber-500/30 transition-all duration-300 shadow-md">
+          <div className="space-y-3">
+            <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center">
+              <Database className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">Index Optimieren</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Baut Suchindizes im Schema public mittels REINDEX neu auf für maximale Performance.
+              </p>
+            </div>
+          </div>
+          <Button onClick={handleOptimize} disabled={isLoading} className="w-full bg-amber-600 hover:bg-amber-500 text-white rounded-xl h-10 text-xs font-bold">
+            {isLoading && activeAction === 'optimize' ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Indexiert...</> : 'Index Optimieren'}
+          </Button>
+        </motion.div>
+
+        {/* Bento Card 4: Tabellen-Diagnose (2 Spalten) */}
+        <motion.div variants={itemVariants} className="md:col-span-2 p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-4 shadow-md">
+          <h3 className="font-bold text-base text-white border-b border-slate-800 pb-3">Tabellen-Status & Diagnose</h3>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+            {integrity?.tables ? (
+              Object.entries(integrity.tables).map(([name, status]) => (
+                <div key={name} className="p-3 rounded-xl border bg-slate-950/60 border-slate-800 flex items-center justify-between">
+                  <div>
+                    <span className="font-bold text-xs text-slate-200 capitalize block">{name.replace("_", " ")}</span>
+                    <span className="text-[10px] text-slate-400">Zeilen: {status.count}</span>
+                  </div>
+                  {status.exists ? (
+                    <Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20 text-[10px] py-0 px-1.5">OK</Badge>
+                  ) : (
+                    <Badge className="bg-red-500/10 text-red-400 border-red-500/20 text-[10px] py-0 px-1.5">Fehlt</Badge>
+                  )}
                 </div>
-              </div>
+              ))
+            ) : (
+              <p className="text-xs text-slate-500 col-span-3">Keine Diagnose-Daten geladen.</p>
             )}
-          </CardContent>
-        </Card>
+          </div>
+        </motion.div>
 
-        {/* Console / Output logs */}
-        <Card className="glass-dark border-white/10">
-          <CardHeader className="flex flex-row items-center justify-between">
-            <CardTitle className="text-white text-lg flex items-center gap-2">
-              <Terminal className="w-5 h-5 text-primary" />
-              Diagnose-Konsole
-            </CardTitle>
-            <Button 
-              variant="ghost" 
-              size="sm" 
-              onClick={() => setLogs([])}
-              className="text-slate-400 hover:text-white text-xs"
-            >
-              Konsole leeren
-            </Button>
-          </CardHeader>
-          <CardContent className="pt-0">
-            <div className="font-mono text-xs bg-black/50 p-4 rounded-xl border border-white/5 h-64 overflow-y-auto space-y-1.5 scrollbar-thin">
+        {/* Bento Card 5: Live Konsole / Logs (1 Spalte) */}
+        <motion.div variants={itemVariants} className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-3 shadow-md flex flex-col justify-between">
+          <div className="space-y-2">
+            <h3 className="font-bold text-base text-white flex items-center gap-2 border-b border-slate-800 pb-3">
+              <Terminal className="w-4 h-4 text-sky-400" /> System-Konsole
+            </h3>
+            <div className="bg-slate-950 p-3 rounded-xl border border-slate-800 font-mono text-[11px] text-slate-300 h-44 overflow-y-auto space-y-1 subpixel-antialiased">
               {logs.length === 0 ? (
-                <span className="text-slate-600 italic">Konsole bereit. Führen Sie einen Scan aus.</span>
+                <span className="text-slate-600 italic">Warte auf Aktionen...</span>
               ) : (
-                logs.map((log, index) => (
-                  <div key={index} className={log.includes("FEHLER") ? "text-red-400" : log.includes("Erfolgreich") ? "text-emerald-400" : "text-slate-300"}>
-                    {log}
-                  </div>
-                ))
+                logs.map((log, i) => <div key={i} className="leading-tight">{log}</div>)
               )}
             </div>
-          </CardContent>
-        </Card>
-      </div>
+          </div>
+        </motion.div>
+      </motion.div>
     </div>
   );
 }