diff --git a/shop/app/admin/companies/page.tsx b/shop/app/admin/companies/page.tsx
index 4e099e4..5915463 100644
--- a/shop/app/admin/companies/page.tsx
+++ b/shop/app/admin/companies/page.tsx
@@ -13,8 +13,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-import { getCompanies, createCompany, updateCompany, deleteCompany } from '@/lib/actions/companies'
-import { getUsersByCompany } from '@/lib/actions/users'
+import { getCompanies, createCompany, updateCompany, deleteCompany, getEndCustomersByCompany } from '@/lib/actions/companies'
 
 export default function CompaniesPage() {
   const [companies, setCompanies] = useState<any[]>([])
@@ -33,10 +32,10 @@ export default function CompaniesPage() {
   const [deletingId, setDeletingId] = useState<string | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
 
-  const [isUsersOpen, setIsUsersOpen] = useState(false)
-  const [selectedCompanyForUsers, setSelectedCompanyForUsers] = useState<any>(null)
-  const [companyUsers, setCompanyUsers] = useState<any[]>([])
-  const [loadingUsers, setLoadingUsers] = useState(false)
+  const [isCustomersOpen, setIsCustomersOpen] = useState(false)
+  const [selectedCompanyForCustomers, setSelectedCompanyForCustomers] = useState<any>(null)
+  const [companyCustomers, setCompanyCustomers] = useState<any[]>([])
+  const [loadingCustomers, setLoadingCustomers] = useState(false)
 
   const loadCompanies = async () => {
     setLoading(true)
@@ -91,17 +90,17 @@ export default function CompaniesPage() {
     }
   }
 
-  const handleShowUsers = async (company: any) => {
-    setSelectedCompanyForUsers(company)
-    setIsUsersOpen(true)
-    setLoadingUsers(true)
+  const handleShowCustomers = async (company: any) => {
+    setSelectedCompanyForCustomers(company)
+    setIsCustomersOpen(true)
+    setLoadingCustomers(true)
     try {
-      const data = await getUsersByCompany(company.id)
-      setCompanyUsers(data)
+      const data = await getEndCustomersByCompany(company.id)
+      setCompanyCustomers(data)
     } catch (err) {
-      console.error('Fehler beim Laden der Benutzer:', err)
+      console.error('Fehler beim Laden der Endkunden:', err)
     } finally {
-      setLoadingUsers(false)
+      setLoadingCustomers(false)
     }
   }
 
@@ -212,9 +211,9 @@ export default function CompaniesPage() {
                       <Button
                         variant="ghost"
                         size="icon"
-                        onClick={() => handleShowUsers(company)}
+                        onClick={() => handleShowCustomers(company)}
                         className="h-8 w-8 text-indigo-500 hover:text-indigo-400 hover:bg-indigo-500/10"
-                        title="Benutzer anzeigen"
+                        title="Endkunden dieser Firma anzeigen"
                       >
                         <Users className="h-4 w-4" />
                       </Button>
@@ -342,60 +341,54 @@ export default function CompaniesPage() {
         </DialogContent>
       </Dialog>
 
-      {/* Dialog: Benutzer der Firma anzeigen */}
-      <Dialog open={isUsersOpen} onOpenChange={(val) => {
-        setIsUsersOpen(val);
+      {/* Dialog: Endkunden der Firma anzeigen */}
+      <Dialog open={isCustomersOpen} onOpenChange={(val) => {
+        setIsCustomersOpen(val);
         if (!val) {
-          setCompanyUsers([]);
+          setCompanyCustomers([]);
         }
       }}>
         <DialogContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
           <DialogHeader>
             <DialogTitle>
-              Benutzer von {selectedCompanyForUsers?.name}
+              Endkunden von {selectedCompanyForCustomers?.name}
             </DialogTitle>
             <DialogDescription className="text-slate-500 dark:text-slate-400">
-              Liste aller Benutzer, die dieser Firma zugewiesen sind.
+              Liste aller Endkunden, die von den Partnern dieser Firma betreut werden.
             </DialogDescription>
           </DialogHeader>
           <div className="py-4">
-            {loadingUsers ? (
+            {loadingCustomers ? (
               <div className="flex justify-center items-center py-8">
                 <Loader2 className="w-6 h-6 text-indigo-500 animate-spin" />
-                <span className="ml-2 text-slate-400 text-sm">Lade Benutzer...</span>
+                <span className="ml-2 text-slate-400 text-sm">Lade Endkunden...</span>
               </div>
-            ) : companyUsers.length === 0 ? (
+            ) : companyCustomers.length === 0 ? (
               <p className="text-center text-slate-500 text-sm py-8">
-                Keine Benutzer für diese Firma registriert.
+                Keine Endkunden für diese Firma registriert.
               </p>
             ) : (
               <div className="space-y-3 max-h-60 overflow-y-auto pr-1">
-                {companyUsers.map((user) => (
-                  <div key={user.id} className="flex justify-between items-center p-3 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5">
-                    <div>
-                      <p className="text-sm font-semibold text-slate-900 dark:text-white">
-                        {user.first_name || user.last_name ? `${user.first_name} ${user.last_name}` : 'Kein Name'}
-                      </p>
-                      <p className="text-xs text-slate-500 dark:text-slate-400">
-                        {user.email}
-                      </p>
+                {companyCustomers.map((customer) => (
+                  <div key={customer.id} className="flex flex-col gap-1 p-3 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5">
+                    <p className="text-sm font-semibold text-slate-900 dark:text-white">
+                      {customer.company_name}
+                    </p>
+                    <div className="flex justify-between items-center text-xs text-slate-500 dark:text-slate-400">
+                      <span>
+                        {customer.first_name || customer.last_name ? `${customer.first_name || ''} ${customer.last_name || ''}`.trim() : 'Kein Ansprechpartner'}
+                      </span>
+                      <span>
+                        {customer.zip} {customer.city}
+                      </span>
                     </div>
-                    <span className={`text-[10px] font-bold uppercase rounded-full px-2.5 py-0.5 border ${
-                      user.role === 'admin' 
-                        ? 'bg-purple-500/10 text-purple-400 border-purple-500/30' 
-                        : user.role === 'gesperrt'
-                        ? 'bg-red-500/10 text-red-400 border-red-500/30'
-                        : 'bg-blue-500/10 text-blue-400 border-blue-500/30'
-                    }`}>
-                      {user.role}
-                    </span>
                   </div>
                 ))}
               </div>
             )}
           </div>
           <DialogFooter>
-            <Button onClick={() => { setIsUsersOpen(false); setCompanyUsers([]); }} className="bg-slate-800 hover:bg-slate-700 text-white font-semibold">
+            <Button onClick={() => { setIsCustomersOpen(false); setCompanyCustomers([]); }} className="bg-slate-800 hover:bg-slate-700 text-white font-semibold">
               Schließen
             </Button>
           </DialogFooter>
diff --git a/shop/app/admin/layout.tsx b/shop/app/admin/layout.tsx
index 506ad7f..af738a4 100644
--- a/shop/app/admin/layout.tsx
+++ b/shop/app/admin/layout.tsx
@@ -25,9 +25,9 @@ export default async function AdminLayout({
   }
 
   return (
-    <div className="flex min-h-screen bg-[#020617] text-white">
+    <div className="flex min-h-screen bg-slate-50 dark:bg-[#020617] text-slate-900 dark:text-white">
       {/* Sidebar */}
-      <aside className="w-64 border-r border-white/5 bg-black/20 backdrop-blur-xl flex flex-col">
+      <aside className="w-64 border-r border-slate-200 dark:border-white/5 bg-white dark:bg-black/20 backdrop-blur-xl flex flex-col">
         <div className="p-6">
           <Link href="/" className="flex items-center gap-2">
             <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
@@ -38,55 +38,55 @@ export default async function AdminLayout({
         </div>
         
         <nav className="flex-1 px-4 space-y-2 py-4">
-          <Link href="/admin" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          <Link href="/admin" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
             <LayoutDashboard className="w-5 h-5" />
             Dashboard
           </Link>
-          <Link href="/admin/products" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          <Link href="/admin/products" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
             <Package className="w-5 h-5" />
             Produkte
           </Link>
-          <Link href="/admin/categories" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          <Link href="/admin/categories" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
             <LayoutGrid className="w-5 h-5" />
             Kategorien
           </Link>
-          <Link href="/admin/orders" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          <Link href="/admin/orders" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
             <ShoppingCart className="w-5 h-5" />
             Bestellungen
           </Link>
-          <Link href="/admin/users" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          <Link href="/admin/users" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
             <Users className="w-5 h-5" />
             Benutzer
           </Link>
 
-          <Link href="/admin/companies" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          <Link href="/admin/companies" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
             <Building2 className="w-5 h-5" />
             Firmen
           </Link>
 
           <div className="pt-2 pb-1 px-3">
-            <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-600">Einstellungen</span>
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-600">Einstellungen</span>
           </div>
-          <Link href="/admin/einstellungen" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          <Link href="/admin/einstellungen" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
             <Settings className="w-5 h-5" />
             Allgemein
           </Link>
-          <Link href="/admin/settings" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          <Link href="/admin/settings" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
             <Wrench className="w-5 h-5" />
             SMTP
           </Link>
-          <Link href="/admin/tools" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          <Link href="/admin/tools" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all">
             <Database className="w-5 h-5" />
             DB-Tools
           </Link>
         </nav>
 
-        <div className="p-4 border-t border-white/5 space-y-4">
+        <div className="p-4 border-t border-slate-200 dark:border-white/5 space-y-4">
           <AdminLogoutButton />
-          <div className="px-3 pt-2 flex items-center gap-2 border-t border-white/5 opacity-60">
-            <span className="font-bold text-sm tracking-tighter text-white">CASPOS Store</span>
+          <div className="px-3 pt-2 flex items-center gap-2 border-t border-slate-200 dark:border-white/5 opacity-60">
+            <span className="font-bold text-sm tracking-tighter text-slate-800 dark:text-white">CASPOS Store</span>
             <DemoWrapper>
-              <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
+              <span className="text-[10px] bg-amber-500/20 text-amber-600 dark:text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
                 Demo
               </span>
             </DemoWrapper>
diff --git a/shop/components/admin/category-dialog.tsx b/shop/components/admin/category-dialog.tsx
index 0cc3d03..f558829 100644
--- a/shop/components/admin/category-dialog.tsx
+++ b/shop/components/admin/category-dialog.tsx
@@ -99,10 +99,10 @@ export function CategoryDialog({
           </Button>
         )}
       </DialogTrigger>
-      <DialogContent className="glass-dark border-white/10 text-white shadow-2xl">
+      <DialogContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
         <DialogHeader>
           <DialogTitle>{category ? 'Kategorie bearbeiten' : 'Neue Kategorie erstellen'}</DialogTitle>
-          <DialogDescription className="text-slate-300">
+          <DialogDescription className="text-slate-500 dark:text-slate-400">
             Definieren Sie eine Kategorie für Ihre Produkte.
           </DialogDescription>
         </DialogHeader>
@@ -116,9 +116,9 @@ export function CategoryDialog({
                   name="name"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel className="text-white">Name</FormLabel>
+                      <FormLabel className="text-slate-900 dark:text-white">Name</FormLabel>
                       <FormControl>
-                        <Input placeholder="z.B. Software" className="bg-white/5 border-white/10 text-white" {...field} />
+                        <Input placeholder="z.B. Software" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -129,9 +129,9 @@ export function CategoryDialog({
                   name="description"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel className="text-white">Beschreibung</FormLabel>
+                      <FormLabel className="text-slate-900 dark:text-white">Beschreibung</FormLabel>
                       <FormControl>
-                        <Input placeholder="Kurze Beschreibung" className="bg-white/5 border-white/10 text-white" {...field} />
+                        <Input placeholder="Kurze Beschreibung" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -142,16 +142,16 @@ export function CategoryDialog({
                   name="icon"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel className="text-white">Icon</FormLabel>
+                      <FormLabel className="text-slate-900 dark:text-white">Icon</FormLabel>
                       <Select onValueChange={field.onChange} defaultValue={field.value}>
                         <FormControl>
-                          <SelectTrigger className="bg-white/5 border-white/10 text-white">
+                          <SelectTrigger className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
                             <SelectValue placeholder="Icon wählen" />
                           </SelectTrigger>
                         </FormControl>
-                        <SelectContent className="glass-dark border-white/10 text-white">
+                        <SelectContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
                           {icons.map(({ name, Icon }) => (
-                            <SelectItem key={name} value={name} className="text-white hover:bg-white/10">
+                            <SelectItem key={name} value={name}>
                               <div className="flex items-center gap-2">
                                 <Icon className="w-4 h-4" />
                                 {name}
@@ -169,18 +169,18 @@ export function CategoryDialog({
                   name="sort_order"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel className="text-white">Reihenfolge im Bestellvorgang</FormLabel>
+                      <FormLabel className="text-slate-900 dark:text-white">Reihenfolge im Bestellvorgang</FormLabel>
                       <FormControl>
                         <Input
                           type="number"
                           min={0}
                           placeholder="0 = zuerst"
-                          className="bg-white/5 border-white/10 text-white"
+                          className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500"
                           {...field}
                         />
                       </FormControl>
                       <FormMessage />
-                      <p className="text-xs text-slate-400">Kleinere Zahl = weiter oben im Bestellformular angezeigt.</p>
+                      <p className="text-xs text-slate-500 dark:text-slate-400">Kleinere Zahl = weiter oben im Bestellformular angezeigt.</p>
                     </FormItem>
                   )}
                 />
@@ -188,7 +188,7 @@ export function CategoryDialog({
                   control={form.control}
                   name="is_required"
                   render={({ field }) => (
-                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-lg border border-white/10 bg-white/5 p-4">
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-lg border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 p-4">
                       <FormControl>
                         <Checkbox
                           checked={field.value}
@@ -196,10 +196,10 @@ export function CategoryDialog({
                         />
                       </FormControl>
                       <div className="space-y-1 leading-none">
-                        <FormLabel className="text-white font-semibold cursor-pointer">
+                        <FormLabel className="text-slate-900 dark:text-white font-semibold cursor-pointer">
                           Pflichtauswahl im Bestellvorgang
                         </FormLabel>
-                        <p className="text-xs text-slate-400">
+                        <p className="text-xs text-slate-500 dark:text-slate-400">
                           Wenn aktiv, muss der Kunde aus dieser Kategorie einen Artikel wählen.
                           Wenn deaktiviert, ist die Kategorie optional.
                         </p>
@@ -210,7 +210,7 @@ export function CategoryDialog({
               </div>
             </ScrollArea>
             <DialogFooter className="pt-4">
-              <Button type="submit" className="w-full bg-primary hover:bg-primary/90">
+              <Button type="submit" className="w-full bg-primary hover:bg-primary/90 text-white">
                 {category ? 'Aktualisieren' : 'Erstellen'}
               </Button>
             </DialogFooter>
diff --git a/shop/components/admin/category-list.tsx b/shop/components/admin/category-list.tsx
index de0fb88..dd9f75b 100644
--- a/shop/components/admin/category-list.tsx
+++ b/shop/components/admin/category-list.tsx
@@ -41,39 +41,39 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
   }
 
   return (
-    <Card className="glass-dark border-white/10 shadow-2xl overflow-hidden">
+    <Card className="bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden text-slate-900 dark:text-white">
       <CardHeader>
         <CardTitle>Kategorienübersicht</CardTitle>
-        <CardDescription className="text-slate-400">
+        <CardDescription className="text-slate-500 dark:text-slate-400">
           Verwalten Sie die Hauptkategorien für Ihre Produkte.
         </CardDescription>
       </CardHeader>
       <CardContent>
         <Table>
           <TableHeader>
-            <TableRow className="border-white/10 hover:bg-white/5">
-              <TableHead className="text-white font-bold w-10">Icon</TableHead>
-              <TableHead className="text-white font-bold">Name</TableHead>
-              <TableHead className="text-white font-bold">Beschreibung</TableHead>
-              <TableHead className="text-white font-bold w-28">
+            <TableRow className="border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5">
+              <TableHead className="text-slate-700 dark:text-white font-bold w-10">Icon</TableHead>
+              <TableHead className="text-slate-700 dark:text-white font-bold">Name</TableHead>
+              <TableHead className="text-slate-700 dark:text-white font-bold">Beschreibung</TableHead>
+              <TableHead className="text-slate-700 dark:text-white font-bold w-28">
                 <span className="flex items-center gap-1">
                   <ArrowUpDown className="w-3 h-3" /> Reihenfolge
                 </span>
               </TableHead>
-              <TableHead className="text-white font-bold w-24">Typ</TableHead>
-              <TableHead className="text-right text-white font-bold">Aktionen</TableHead>
+              <TableHead className="text-slate-700 dark:text-white font-bold w-24">Typ</TableHead>
+              <TableHead className="text-right text-slate-700 dark:text-white font-bold">Aktionen</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {categories.map((category) => (
-              <TableRow key={category.id} className="border-white/5 hover:bg-white/5 transition-colors">
+              <TableRow key={category.id} className="border-slate-100 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                 <TableCell>
                   <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                     {getIcon(category.icon)}
                   </div>
                 </TableCell>
-                <TableCell className="font-medium text-white">{category.name}</TableCell>
-                <TableCell className="text-slate-300">{category.description}</TableCell>
+                <TableCell className="font-medium text-slate-900 dark:text-white">{category.name}</TableCell>
+                <TableCell className="text-slate-700 dark:text-slate-300">{category.description}</TableCell>
                 <TableCell>
                   <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-primary/20 text-primary text-sm font-bold">
                     {category.sort_order}
@@ -81,15 +81,15 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
                 </TableCell>
                 <TableCell>
                   {category.is_required ? (
-                    <Badge className="bg-green-500/20 text-green-400 border border-green-500/30 whitespace-nowrap">Pflicht</Badge>
+                    <Badge className="bg-green-500/20 text-green-600 dark:text-green-400 border border-green-500/30 whitespace-nowrap">Pflicht</Badge>
                   ) : (
-                    <Badge variant="outline" className="border-white/20 text-slate-400 whitespace-nowrap">Optional</Badge>
+                    <Badge variant="outline" className="border-slate-200 dark:border-white/20 text-slate-500 dark:text-slate-400 whitespace-nowrap">Optional</Badge>
                   )}
                 </TableCell>
                 <TableCell className="text-right">
                   <div className="flex justify-end gap-2">
                     <CategoryDialog category={category}>
-                      <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-white">
+                      <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
                         <Edit2 className="h-4 w-4" />
                       </Button>
                     </CategoryDialog>
@@ -107,7 +107,7 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
             ))}
             {categories.length === 0 && (
               <TableRow>
-                <TableCell colSpan={6} className="text-center py-10 text-slate-400">
+                <TableCell colSpan={6} className="text-center py-10 text-slate-500 dark:text-slate-400">
                   Keine Kategorien gefunden.
                 </TableCell>
               </TableRow>
diff --git a/shop/components/admin/create-product-dialog.tsx b/shop/components/admin/create-product-dialog.tsx
index 23cbd35..55c6692 100644
--- a/shop/components/admin/create-product-dialog.tsx
+++ b/shop/components/admin/create-product-dialog.tsx
@@ -120,12 +120,12 @@ export function CreateProductDialog({ children, categories, product }: { childre
           </Button>
         )}
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-hidden flex flex-col glass-dark border-white/10 text-white shadow-2xl">
+      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-hidden flex flex-col bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
         <DialogHeader>
           <DialogTitle className="text-2xl font-bold">
             {product ? 'Produkt bearbeiten' : 'Neues Produkt erstellen'}
           </DialogTitle>
-          <DialogDescription className="text-slate-300">
+          <DialogDescription className="text-slate-500 dark:text-slate-400">
             Definieren Sie das Basisprodukt und fügen Sie optionale oder erforderliche Module hinzu.
           </DialogDescription>
         </DialogHeader>
@@ -140,9 +140,9 @@ export function CreateProductDialog({ children, categories, product }: { childre
                     name="name"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel className="text-white">Produktname</FormLabel>
+                        <FormLabel className="text-slate-900 dark:text-white">Produktname</FormLabel>
                         <FormControl>
-                          <Input placeholder="z.B. Basic ERP" className="bg-white/5 border-white/10 text-white" {...field} />
+                          <Input placeholder="z.B. Basic ERP" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -153,9 +153,9 @@ export function CreateProductDialog({ children, categories, product }: { childre
                     name="base_price"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel className="text-white">Basispreis (€)</FormLabel>
+                        <FormLabel className="text-slate-900 dark:text-white">Basispreis (€)</FormLabel>
                         <FormControl>
-                          <Input type="number" step="0.01" className="bg-white/5 border-white/10 text-white" {...field} />
+                          <Input type="number" step="0.01" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -168,16 +168,16 @@ export function CreateProductDialog({ children, categories, product }: { childre
                   name="category_id"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel className="text-white">Kategorie</FormLabel>
+                      <FormLabel className="text-slate-900 dark:text-white">Kategorie</FormLabel>
                       <Select onValueChange={field.onChange} defaultValue={field.value}>
                         <FormControl>
-                          <SelectTrigger className="bg-white/5 border-white/10 text-white">
-                            <SelectValue placeholder="Kategorie wählen" className="text-white" />
+                          <SelectTrigger className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
+                            <SelectValue placeholder="Kategorie wählen" />
                           </SelectTrigger>
                         </FormControl>
-                        <SelectContent className="glass-dark border-white/10 text-white">
+                        <SelectContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
                           {categories.map(cat => (
-                            <SelectItem key={cat.id} value={cat.id} className="text-white">{cat.name}</SelectItem>
+                            <SelectItem key={cat.id} value={cat.id}>{cat.name}</SelectItem>
                           ))}
                         </SelectContent>
                       </Select>
@@ -191,7 +191,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
                   name="billing_interval"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel className="text-white">Abrechnungsmodell</FormLabel>
+                      <FormLabel className="text-slate-900 dark:text-white">Abrechnungsmodell</FormLabel>
                       <div className="grid grid-cols-2 gap-2 pt-1">
                         {[
                           { value: 'one_time', label: 'Einmalig',  icon: '💳' },
@@ -203,8 +203,8 @@ export function CreateProductDialog({ children, categories, product }: { childre
                             onClick={() => field.onChange(opt.value)}
                             className={`flex flex-col items-center gap-1 p-3 rounded-xl border-2 text-sm font-medium transition-all ${
                               field.value === opt.value
-                                ? 'border-primary bg-primary/10 text-white'
-                                : 'border-white/10 bg-white/5 text-slate-400 hover:bg-white/10'
+                                ? 'border-primary bg-primary/10 text-primary dark:text-white'
+                                : 'border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10'
                             }`}
                           >
                             <span className="text-lg">{opt.icon}</span>
@@ -222,16 +222,16 @@ export function CreateProductDialog({ children, categories, product }: { childre
                   name="description"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel className="text-white">Beschreibung</FormLabel>
+                      <FormLabel className="text-slate-900 dark:text-white">Beschreibung</FormLabel>
                       <FormControl>
-                        <Input placeholder="Kurze Beschreibung des Produkts" className="bg-white/5 border-white/10 text-white placeholder:text-slate-400" {...field} />
+                        <Input placeholder="Kurze Beschreibung des Produkts" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
 
-                <Separator className="bg-white/10" />
+                <Separator className="bg-slate-200 dark:bg-white/10" />
 
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
@@ -268,7 +268,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
                       .filter((_, idx) => idx !== index)
 
                     return (
-                      <div key={field.id} className="p-4 rounded-lg bg-white/5 border border-white/10 space-y-4 relative group">
+                      <div key={field.id} className="p-4 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 space-y-4 relative group">
                         <Button
                           type="button"
                           variant="ghost"
@@ -285,9 +285,9 @@ export function CreateProductDialog({ children, categories, product }: { childre
                             name={`modules.${index}.name`}
                             render={({ field }) => (
                               <FormItem>
-                                <FormLabel className="text-white">Modulname</FormLabel>
+                                <FormLabel className="text-slate-900 dark:text-white">Modulname</FormLabel>
                                 <FormControl>
-                                  <Input placeholder="z.B. Cloud Storage" className="bg-white/10 border-white/10 text-white placeholder:text-slate-400" {...field} />
+                                  <Input placeholder="z.B. Cloud Storage" className="bg-slate-100 dark:bg-white/10 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                                 </FormControl>
                                 <FormMessage />
                               </FormItem>
@@ -298,9 +298,9 @@ export function CreateProductDialog({ children, categories, product }: { childre
                             name={`modules.${index}.price`}
                             render={({ field }) => (
                               <FormItem>
-                                <FormLabel className="text-white">Aufpreis (€)</FormLabel>
+                                <FormLabel className="text-slate-900 dark:text-white">Aufpreis (€)</FormLabel>
                                 <FormControl>
-                                  <Input type="number" step="0.01" className="bg-white/10 border-white/10 text-white" {...field} />
+                                  <Input type="number" step="0.01" className="bg-slate-100 dark:bg-white/10 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                                 </FormControl>
                                 <FormMessage />
                               </FormItem>
@@ -308,15 +308,15 @@ export function CreateProductDialog({ children, categories, product }: { childre
                           />
                         </div>
 
-                        <div className="grid grid-cols-2 gap-4 border border-white/10 rounded-lg p-3 bg-black/20">
+                        <div className="grid grid-cols-2 gap-4 border border-slate-200 dark:border-white/10 rounded-lg p-3 bg-slate-100 dark:bg-black/20">
                           {/* Requirements Selection Matrix */}
                           <FormField
                             control={form.control}
                             name={`modules.${index}.requirements`}
                             render={({ field: reqField }) => (
                               <div className="space-y-2">
-                                <FormLabel className="text-white text-xs font-semibold">Benötigt Module</FormLabel>
-                                <ScrollArea className="h-28 border border-white/5 rounded p-2 bg-white/5">
+                                <FormLabel className="text-slate-900 dark:text-white text-xs font-semibold">Benötigt Module</FormLabel>
+                                <ScrollArea className="h-28 border border-slate-200 dark:border-white/5 rounded p-2 bg-slate-50 dark:bg-white/5">
                                   {otherModules.length === 0 ? (
                                     <p className="text-[10px] text-slate-500 italic">Keine anderen Module vorhanden.</p>
                                   ) : (
@@ -339,7 +339,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
                                             />
                                             <label
                                               htmlFor={`req-${index}-${other.id}`}
-                                              className="text-xs text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
+                                              className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
                                               title={other.name}
                                             >
                                               {other.name}
@@ -360,8 +360,8 @@ export function CreateProductDialog({ children, categories, product }: { childre
                             name={`modules.${index}.exclusions`}
                             render={({ field: exclField }) => (
                               <div className="space-y-2">
-                                <FormLabel className="text-white text-xs font-semibold">Schließt aus</FormLabel>
-                                <ScrollArea className="h-28 border border-white/5 rounded p-2 bg-white/5">
+                                <FormLabel className="text-slate-900 dark:text-white text-xs font-semibold">Schließt aus</FormLabel>
+                                <ScrollArea className="h-28 border border-slate-200 dark:border-white/5 rounded p-2 bg-slate-50 dark:bg-white/5">
                                   {otherModules.length === 0 ? (
                                     <p className="text-[10px] text-slate-500 italic">Keine anderen Module vorhanden.</p>
                                   ) : (
@@ -384,7 +384,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
                                             />
                                             <label
                                               htmlFor={`excl-${index}-${other.id}`}
-                                              className="text-xs text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
+                                              className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
                                               title={other.name}
                                             >
                                               {other.name}
@@ -413,7 +413,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
                                   />
                                 </FormControl>
                                 <div className="space-y-1 leading-none">
-                                  <FormLabel className="text-white">Erforderlich</FormLabel>
+                                  <FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">Erforderlich</FormLabel>
                                 </div>
                               </FormItem>
                             )}
@@ -424,7 +424,7 @@ export function CreateProductDialog({ children, categories, product }: { childre
                   })}
                   
                   {fields.length === 0 && (
-                    <div className="text-center py-6 border-2 border-dashed border-white/5 rounded-lg text-slate-400 text-sm">
+                    <div className="text-center py-6 border-2 border-dashed border-slate-200 dark:border-white/5 rounded-lg text-slate-500 dark:text-slate-400 text-sm">
                       Noch keine Module hinzugefügt.
                     </div>
                   )}
@@ -432,9 +432,9 @@ export function CreateProductDialog({ children, categories, product }: { childre
               </div>
             </ScrollArea>
 
-            <DialogFooter className="pt-4 border-t border-white/10">
-              <Button type="button" variant="ghost" onClick={() => setOpen(false)}>Abbrechen</Button>
-              <Button type="submit" className="bg-primary hover:bg-primary/90">Speichern</Button>
+            <DialogFooter className="pt-4 border-t border-slate-200 dark:border-white/10">
+              <Button type="button" variant="ghost" onClick={() => setOpen(false)} className="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">Abbrechen</Button>
+              <Button type="submit" className="bg-primary hover:bg-primary/90 text-white">Speichern</Button>
             </DialogFooter>
           </form>
         </Form>
diff --git a/shop/components/admin/logout-menu-item.tsx b/shop/components/admin/logout-menu-item.tsx
index c0685db..c715681 100644
--- a/shop/components/admin/logout-menu-item.tsx
+++ b/shop/components/admin/logout-menu-item.tsx
@@ -42,7 +42,7 @@ export function AdminLogoutButton() {
   return (
     <button
       onClick={handleLogout}
-      className="flex w-full items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all text-left"
+      className="flex w-full items-center gap-3 px-3 py-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-all text-left"
     >
       <LogOut className="w-5 h-5" />
       Abmelden
diff --git a/shop/components/admin/product-list.tsx b/shop/components/admin/product-list.tsx
index aedf70c..944e595 100644
--- a/shop/components/admin/product-list.tsx
+++ b/shop/components/admin/product-list.tsx
@@ -32,28 +32,28 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
   }
 
   return (
-    <Card className="glass-dark border-white/10 shadow-2xl overflow-hidden">
+    <Card className="bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden text-slate-900 dark:text-white">
       <CardHeader>
         <CardTitle>Produktübersicht</CardTitle>
-        <CardDescription className="text-slate-400">
+        <CardDescription className="text-slate-500 dark:text-slate-400">
           Alle konfigurierten Software-Lösungen und Erweiterungen.
         </CardDescription>
       </CardHeader>
       <CardContent>
         <Table>
           <TableHeader>
-            <TableRow className="border-white/10 hover:bg-white/5">
-              <TableHead className="text-white font-bold">Name</TableHead>
-              <TableHead className="text-white font-bold">Basispreis</TableHead>
-              <TableHead className="text-white font-bold">Module</TableHead>
-              <TableHead className="text-white font-bold">Status</TableHead>
-              <TableHead className="text-right text-white font-bold">Aktionen</TableHead>
+            <TableRow className="border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5">
+              <TableHead className="text-slate-700 dark:text-white font-bold">Name</TableHead>
+              <TableHead className="text-slate-700 dark:text-white font-bold">Basispreis</TableHead>
+              <TableHead className="text-slate-700 dark:text-white font-bold">Module</TableHead>
+              <TableHead className="text-slate-700 dark:text-white font-bold">Status</TableHead>
+              <TableHead className="text-right text-slate-700 dark:text-white font-bold">Aktionen</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {products.map((product) => (
-              <TableRow key={product.id} className="border-white/5 hover:bg-white/5 transition-colors">
-                <TableCell className="font-medium text-white">
+              <TableRow key={product.id} className="border-slate-100 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
+                <TableCell className="font-medium text-slate-900 dark:text-white">
                   <div className="flex flex-col gap-1">
                     <div className="flex items-center gap-2">
                       {product.name}
@@ -63,20 +63,20 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
                         </Badge>
                       )}
                       {product.billing_interval === 'monthly' && (
-                        <Badge className="text-[10px] bg-blue-500/20 text-blue-400 border border-blue-500/30 py-0 h-4">Abo/Monat</Badge>
+                        <Badge className="text-[10px] bg-blue-500/20 text-blue-600 dark:text-blue-400 border border-blue-500/30 py-0 h-4">Abo/Monat</Badge>
                       )}
                       {product.billing_interval === 'one_time' && (
-                        <Badge className="text-[10px] bg-slate-500/20 text-slate-300 border border-slate-500/30 py-0 h-4">Einmalig</Badge>
+                        <Badge className="text-[10px] bg-slate-500/20 text-slate-600 dark:text-slate-300 border border-slate-500/30 py-0 h-4">Einmalig</Badge>
                       )}
                     </div>
-                    <p className="text-xs text-slate-300 font-normal">{product.description}</p>
+                    <p className="text-xs text-slate-500 dark:text-slate-400 font-normal">{product.description}</p>
                   </div>
                 </TableCell>
-                <TableCell className="text-white font-semibold">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.base_price)}</TableCell>
+                <TableCell className="text-slate-900 dark:text-white font-semibold">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.base_price)}</TableCell>
                 <TableCell>
                   <div className="flex items-center gap-1">
                     <Layers className="w-3 h-3 text-primary" />
-                    <span className="text-slate-200">{product.modules?.length || 0} Module</span>
+                    <span className="text-slate-700 dark:text-slate-200">{product.modules?.length || 0} Module</span>
                   </div>
                 </TableCell>
                 <TableCell>
@@ -87,7 +87,7 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
                 <TableCell className="text-right">
                   <div className="flex justify-end gap-2">
                     <CreateProductDialog categories={categories} product={product}>
-                      <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-white">
+                      <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
                         <Edit2 className="h-4 w-4" />
                       </Button>
                     </CreateProductDialog>
@@ -105,7 +105,7 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
             ))}
             {products.length === 0 && (
               <TableRow>
-                <TableCell colSpan={5} className="text-center py-10 text-slate-400">
+                <TableCell colSpan={5} className="text-center py-10 text-slate-500 dark:text-slate-400">
                   Keine Produkte gefunden. Erstellen Sie Ihr erstes Produkt!
                 </TableCell>
               </TableRow>
diff --git a/shop/components/admin/user-dialog.tsx b/shop/components/admin/user-dialog.tsx
index 16c88d0..59f0a6c 100644
--- a/shop/components/admin/user-dialog.tsx
+++ b/shop/components/admin/user-dialog.tsx
@@ -121,10 +121,10 @@ export function UserDialog({ companies }: UserDialogProps) {
           <Plus className="mr-2 h-4 w-4" /> Benutzer neu anlegen
         </Button>
       </DialogTrigger>
-      <DialogContent className="glass-dark border-white/10 text-white shadow-2xl">
+      <DialogContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
         <DialogHeader>
           <DialogTitle>Neuen Benutzer anlegen</DialogTitle>
-          <DialogDescription className="text-slate-300">
+          <DialogDescription className="text-slate-500 dark:text-slate-400">
             Geben Sie die E-Mail, die Rolle und optional die Firma für den neuen Benutzer ein. Nach der Erstellung erhält der Benutzer eine E-Mail zum Festlegen seines Passworts.
           </DialogDescription>
         </DialogHeader>
@@ -136,9 +136,9 @@ export function UserDialog({ companies }: UserDialogProps) {
               name="email"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="text-white">E-Mail</FormLabel>
+                  <FormLabel className="text-slate-900 dark:text-white">E-Mail</FormLabel>
                   <FormControl>
-                    <Input placeholder="user@example.com" className="bg-white/5 border-white/10 text-white" {...field} />
+                    <Input placeholder="user@example.com" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -150,9 +150,9 @@ export function UserDialog({ companies }: UserDialogProps) {
                 name="first_name"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="text-white">Vorname</FormLabel>
+                    <FormLabel className="text-slate-900 dark:text-white">Vorname</FormLabel>
                     <FormControl>
-                      <Input placeholder="Vorname" className="bg-white/5 border-white/10 text-white" {...field} />
+                      <Input placeholder="Vorname" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -163,9 +163,9 @@ export function UserDialog({ companies }: UserDialogProps) {
                 name="last_name"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel className="text-white">Nachname</FormLabel>
+                    <FormLabel className="text-slate-900 dark:text-white">Nachname</FormLabel>
                     <FormControl>
-                      <Input placeholder="Nachname" className="bg-white/5 border-white/10 text-white" {...field} />
+                      <Input placeholder="Nachname" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -177,14 +177,14 @@ export function UserDialog({ companies }: UserDialogProps) {
               name="role"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="text-white">Rolle</FormLabel>
+                  <FormLabel className="text-slate-900 dark:text-white">Rolle</FormLabel>
                   <FormControl>
                     <select
-                      className="flex h-10 w-full rounded-md border border-white/10 bg-slate-950/80 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+                      className="flex h-10 w-full rounded-md border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-slate-950/80 px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
                       {...field}
                     >
-                      <option value="partner">Partner</option>
-                      <option value="admin">Admin</option>
+                      <option value="partner" className="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">Partner</option>
+                      <option value="admin" className="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">Admin</option>
                     </select>
                   </FormControl>
                   <FormMessage />
@@ -198,7 +198,7 @@ export function UserDialog({ companies }: UserDialogProps) {
                 const selectedCompany = localCompanies.find((c) => c.id === field.value)
                 return (
                   <FormItem className="flex flex-col">
-                    <FormLabel className="text-white">Firma</FormLabel>
+                    <FormLabel className="text-slate-900 dark:text-white">Firma</FormLabel>
                     <FormControl>
                       <div className="flex flex-col gap-2">
                         <div className="relative" ref={dropdownRef}>
@@ -210,20 +210,20 @@ export function UserDialog({ companies }: UserDialogProps) {
                                 setDropdownOpen(!dropdownOpen)
                                 setSearch('')
                               }}
-                              className="w-full text-left text-sm bg-white/5 border border-white/10 rounded-md px-3 py-2 text-slate-300 hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 max-w-full truncate"
+                              className="w-full text-left text-sm bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md px-3 py-2 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 max-w-full truncate"
                             >
                               {selectedCompany ? selectedCompany.name : 'Keine Firma'}
                             </button>
                           </div>
                           {dropdownOpen && (
-                            <div className="absolute z-50 mt-1 left-0 w-full bg-slate-900 border border-white/10 rounded-lg shadow-xl overflow-hidden">
-                              <div className="p-2 border-b border-white/10">
+                            <div className="absolute z-50 mt-1 left-0 w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-lg shadow-xl overflow-hidden">
+                              <div className="p-2 border-b border-slate-200 dark:border-white/10">
                                 <input
                                   type="text"
                                   placeholder="Firma suchen..."
                                   value={search}
                                   onChange={(e) => setSearch(e.target.value)}
-                                  className="w-full text-xs bg-white/5 border border-white/10 rounded px-2 py-1.5 text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-primary/50"
+                                  className="w-full text-xs bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded px-2 py-1.5 text-slate-900 dark:text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-primary/50"
                                   autoFocus
                                 />
                               </div>
@@ -235,8 +235,8 @@ export function UserDialog({ companies }: UserDialogProps) {
                                     setDropdownOpen(false)
                                     setSearch('')
                                   }}
-                                  className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
-                                    !field.value ? 'text-primary font-semibold' : 'text-slate-300'
+                                  className={`w-full text-left text-xs px-3 py-2 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors ${
+                                    !field.value ? 'text-primary font-semibold' : 'text-slate-700 dark:text-slate-300'
                                   }`}
                                 >
                                   Keine Firma
@@ -252,8 +252,8 @@ export function UserDialog({ companies }: UserDialogProps) {
                                         setDropdownOpen(false)
                                         setSearch('')
                                       }}
-                                      className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
-                                        field.value === c.id ? 'text-primary font-semibold' : 'text-slate-300'
+                                      className={`w-full text-left text-xs px-3 py-2 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors ${
+                                        field.value === c.id ? 'text-primary font-semibold' : 'text-slate-700 dark:text-slate-300'
                                       }`}
                                     >
                                       {c.name}
@@ -270,7 +270,7 @@ export function UserDialog({ companies }: UserDialogProps) {
                               placeholder="Name der neuen Firma"
                               value={newCompanyName}
                               onChange={(e) => setNewCompanyName(e.target.value)}
-                              className="bg-white/5 border-white/10 text-white text-xs h-8"
+                              className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-xs h-8"
                             />
                             <Button
                               type="button"
@@ -307,7 +307,7 @@ export function UserDialog({ companies }: UserDialogProps) {
                                 setShowNewCompanyInput(false)
                                 setNewCompanyName('')
                               }}
-                              className="text-xs h-8 text-slate-400"
+                              className="text-xs h-8 text-slate-500 dark:text-slate-400"
                             >
                               Abbrechen
                             </Button>
@@ -329,7 +329,7 @@ export function UserDialog({ companies }: UserDialogProps) {
               }}
             />
             <DialogFooter>
-              <Button type="submit" className="w-full bg-primary hover:bg-primary/90">
+              <Button type="submit" className="w-full bg-primary hover:bg-primary/90 text-white">
                 Benutzer erstellen
               </Button>
             </DialogFooter>
diff --git a/shop/components/admin/user-list.tsx b/shop/components/admin/user-list.tsx
index 72aa649..f9fd1e7 100644
--- a/shop/components/admin/user-list.tsx
+++ b/shop/components/admin/user-list.tsx
@@ -147,10 +147,10 @@ export function UserList({ initialUsers, companies }: UserListProps) {
   let lastCompanyName: string | null = null
 
   return (
-    <Card className="glass-dark border-white/10 shadow-2xl overflow-visible">
+    <Card className="bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 shadow-sm overflow-visible text-slate-900 dark:text-white">
       <CardHeader>
         <CardTitle>Benutzerverwaltung</CardTitle>
-        <CardDescription className="text-slate-400">
+        <CardDescription className="text-slate-500 dark:text-slate-400">
           Rollen, Firmenzuweisungen, Passwörter und Benutzerkonten verwalten.
         </CardDescription>
       </CardHeader>
@@ -163,31 +163,31 @@ export function UserList({ initialUsers, companies }: UserListProps) {
               placeholder="Benutzer suchen (E-Mail, Firma, Rolle)..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-9 pr-4 py-2 text-sm bg-white/5 border border-white/10 rounded-md text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-slate-950 transition-all"
+              className="w-full pl-9 pr-4 py-2 text-sm bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md text-slate-900 dark:text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-slate-50 dark:focus:ring-offset-slate-950 transition-all"
             />
           </div>
           <div className="flex flex-wrap items-center gap-3">
-            <div className="flex items-center gap-2 bg-white/5 border border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-white/10 transition-colors">
+            <div className="flex items-center gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-slate-100 dark:hover:bg-white/10 transition-colors">
               <input
                 type="checkbox"
                 id="hideLocked"
                 checked={hideLocked}
                 onChange={(e) => setHideLocked(e.target.checked)}
-                className="h-4 w-4 rounded border-white/10 bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-950 accent-primary cursor-pointer"
+                className="h-4 w-4 rounded border-slate-200 dark:border-white/10 bg-white dark:bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-50 dark:focus:ring-offset-slate-950 accent-primary cursor-pointer"
               />
-              <label htmlFor="hideLocked" className="text-xs text-slate-300 font-medium cursor-pointer select-none">
+              <label htmlFor="hideLocked" className="text-xs text-slate-700 dark:text-slate-300 font-medium cursor-pointer select-none">
                 Gesperrte ausblenden
               </label>
             </div>
-            <div className="flex items-center gap-2 bg-white/5 border border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-white/10 transition-colors">
+            <div className="flex items-center gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-slate-100 dark:hover:bg-white/10 transition-colors">
               <input
                 type="checkbox"
                 id="groupByCompany"
                 checked={groupByCompany}
                 onChange={(e) => setGroupByCompany(e.target.checked)}
-                className="h-4 w-4 rounded border-white/10 bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-950 accent-primary cursor-pointer"
+                className="h-4 w-4 rounded border-slate-200 dark:border-white/10 bg-white dark:bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-50 dark:focus:ring-offset-slate-950 accent-primary cursor-pointer"
               />
-              <label htmlFor="groupByCompany" className="text-xs text-slate-300 font-medium cursor-pointer select-none">
+              <label htmlFor="groupByCompany" className="text-xs text-slate-700 dark:text-slate-300 font-medium cursor-pointer select-none">
                 Nach Firma gruppieren
               </label>
             </div>
@@ -195,12 +195,12 @@ export function UserList({ initialUsers, companies }: UserListProps) {
         </div>
         <Table containerClassName="overflow-visible">
           <TableHeader>
-            <TableRow className="border-white/10 hover:bg-white/5">
-              <TableHead className="text-slate-200">E-Mail</TableHead>
-              <TableHead className="text-slate-200">Rolle</TableHead>
-              <TableHead className="text-slate-200">Firma</TableHead>
-              <TableHead className="text-slate-200">Zuletzt angemeldet</TableHead>
-              <TableHead className="text-right text-slate-200">Aktionen</TableHead>
+            <TableRow className="border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5">
+              <TableHead className="text-slate-700 dark:text-slate-200">E-Mail</TableHead>
+              <TableHead className="text-slate-700 dark:text-slate-200">Rolle</TableHead>
+              <TableHead className="text-slate-700 dark:text-slate-200">Firma</TableHead>
+              <TableHead className="text-slate-700 dark:text-slate-200">Zuletzt angemeldet</TableHead>
+              <TableHead className="text-right text-slate-700 dark:text-slate-200">Aktionen</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -217,14 +217,14 @@ export function UserList({ initialUsers, companies }: UserListProps) {
               return (
                 <Fragment key={user.id}>
                   {showGroupHeader && (
-                    <TableRow className="bg-white/5 border-y border-white/10 hover:bg-white/5">
+                    <TableRow className="bg-slate-50 dark:bg-white/5 border-y border-slate-200 dark:border-white/10 hover:bg-slate-100 dark:hover:bg-white/5">
                       <TableCell colSpan={5} className="font-semibold text-primary py-2 px-4 text-xs tracking-wider uppercase">
                         Firma: {currentCompanyName}
                       </TableCell>
                     </TableRow>
                   )}
-                  <TableRow className="border-white/5 hover:bg-white/5 transition-colors">
-                    <TableCell className="font-medium text-white">
+                  <TableRow className="border-slate-150 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
+                    <TableCell className="font-medium text-slate-900 dark:text-white">
                       <div className="flex flex-col">
                         <div className="flex items-center gap-2">
                           <Mail className="w-4 h-4 text-slate-500" />
@@ -251,7 +251,7 @@ export function UserList({ initialUsers, companies }: UserListProps) {
                                 (e.target as HTMLInputElement).blur()
                               }
                             }}
-                            className="bg-transparent border-b border-transparent hover:border-white/20 focus:border-primary focus:outline-none text-xs text-slate-400 w-20 px-1 py-0.5 transition-all placeholder:text-slate-600 placeholder:italic"
+                            className="bg-transparent border-b border-transparent hover:border-slate-300 dark:hover:border-white/20 focus:border-primary focus:outline-none text-xs text-slate-600 dark:text-slate-400 w-20 px-1 py-0.5 transition-all placeholder:text-slate-500 placeholder:italic"
                           />
                           <input
                             type="text"
@@ -273,7 +273,7 @@ export function UserList({ initialUsers, companies }: UserListProps) {
                                 (e.target as HTMLInputElement).blur()
                               }
                             }}
-                            className="bg-transparent border-b border-transparent hover:border-white/20 focus:border-primary focus:outline-none text-xs text-slate-400 w-24 px-1 py-0.5 transition-all placeholder:text-slate-600 placeholder:italic"
+                            className="bg-transparent border-b border-transparent hover:border-slate-300 dark:hover:border-white/20 focus:border-primary focus:outline-none text-xs text-slate-600 dark:text-slate-400 w-24 px-1 py-0.5 transition-all placeholder:text-slate-500 placeholder:italic"
                           />
                         </div>
                       </div>
@@ -286,18 +286,18 @@ export function UserList({ initialUsers, companies }: UserListProps) {
                           <select
                             value={role}
                             onChange={(e) => handleRoleChange(user.id, e.target.value as Role)}
-                            className={`text-xs font-semibold rounded px-3 py-1.5 cursor-pointer focus:outline-none focus:ring-2 transition-colors ${
+                            className={`text-xs font-semibold rounded px-3 py-1.5 cursor-pointer focus:outline-none focus:ring-2 transition-colors bg-white dark:bg-slate-950/80 ${
                               role === 'admin'
-                                ? 'bg-purple-500/20 text-purple-300 border border-purple-500/40 focus:ring-purple-500/50'
+                                ? 'text-purple-600 dark:text-purple-300 border border-purple-500/40 focus:ring-purple-500/50'
                                 : role === 'gesperrt'
-                                ? 'bg-red-500/20 text-red-300 border border-red-500/40 focus:ring-red-500/50'
-                                : 'bg-blue-500/20 text-blue-300 border border-blue-500/40 focus:ring-blue-500/50'
+                                ? 'text-red-600 dark:text-red-300 border border-red-500/40 focus:ring-red-500/50'
+                                : 'text-blue-600 dark:text-blue-300 border border-blue-500/40 focus:ring-blue-500/50'
                             }`}
                             style={{ appearance: 'auto' }}
                           >
-                            <option value="admin">Admin</option>
-                            <option value="partner">Partner</option>
-                            <option value="gesperrt">Gesperrt</option>
+                            <option value="admin" className="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">Admin</option>
+                            <option value="partner" className="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">Partner</option>
+                            <option value="gesperrt" className="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">Gesperrt</option>
                           </select>
                         )}
                       </div>
@@ -315,21 +315,21 @@ export function UserList({ initialUsers, companies }: UserListProps) {
                                 setCompanyDropdownOpen(companyDropdownOpen === user.id ? null : user.id)
                                 setCompanySearch('')
                               }}
-                              className="text-xs bg-white/5 border border-white/10 rounded px-3 py-1.5 text-slate-300 hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary/50 max-w-[180px] truncate text-left"
+                              className="text-xs bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded px-3 py-1.5 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary/50 max-w-[180px] truncate text-left"
                             >
                               {user.company_name || 'Keine Firma'}
                             </button>
                           )}
                         </div>
                         {companyDropdownOpen === user.id && (
-                          <div className="absolute z-50 mt-1 left-0 w-56 bg-slate-900 border border-white/10 rounded-lg shadow-xl overflow-hidden">
-                            <div className="p-2 border-b border-white/10">
+                          <div className="absolute z-50 mt-1 left-0 w-56 bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-lg shadow-xl overflow-hidden">
+                            <div className="p-2 border-b border-slate-200 dark:border-white/10">
                               <input
                                 type="text"
                                 placeholder="Firma suchen..."
                                 value={companySearch}
                                 onChange={(e) => setCompanySearch(e.target.value)}
-                                className="w-full text-xs bg-white/5 border border-white/10 rounded px-2 py-1.5 text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-primary/50"
+                                className="w-full text-xs bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded px-2 py-1.5 text-slate-900 dark:text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-primary/50"
                                 autoFocus
                               />
                             </div>
@@ -337,8 +337,8 @@ export function UserList({ initialUsers, companies }: UserListProps) {
                               <button
                                 type="button"
                                 onClick={() => { handleCompanyChange(user.id, ''); setCompanyDropdownOpen(null); setCompanySearch(''); }}
-                                className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
-                                  !user.company_id ? 'text-primary font-semibold' : 'text-slate-300'
+                                className={`w-full text-left text-xs px-3 py-2 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors ${
+                                  !user.company_id ? 'text-primary font-semibold' : 'text-slate-700 dark:text-slate-300'
                                 }`}
                               >
                                 Keine Firma
@@ -350,8 +350,8 @@ export function UserList({ initialUsers, companies }: UserListProps) {
                                     key={c.id}
                                     type="button"
                                     onClick={() => { handleCompanyChange(user.id, c.id); setCompanyDropdownOpen(null); setCompanySearch(''); }}
-                                    className={`w-full text-left text-xs px-3 py-2 hover:bg-white/10 transition-colors ${
-                                      user.company_id === c.id ? 'text-primary font-semibold' : 'text-slate-300'
+                                    className={`w-full text-left text-xs px-3 py-2 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors ${
+                                      user.company_id === c.id ? 'text-primary font-semibold' : 'text-slate-700 dark:text-slate-300'
                                     }`}
                                   >
                                     {c.name}
diff --git a/shop/lib/actions/companies.ts b/shop/lib/actions/companies.ts
index e95d060..ccb6a16 100644
--- a/shop/lib/actions/companies.ts
+++ b/shop/lib/actions/companies.ts
@@ -52,3 +52,27 @@ export async function assignCompanyToUser(userId: string, companyId: string | nu
   revalidatePath('/admin/users')
   return true
 }
+
+export async function getEndCustomersByCompany(companyId: string) {
+  const admin = createAdminClient()
+  
+  // 1. Get all partners of this company
+  const { data: partners, error: partnersError } = await admin
+    .from('users')
+    .select('id')
+    .eq('company_id', companyId)
+  if (partnersError) throw partnersError
+
+  if (!partners || partners.length === 0) return []
+
+  const partnerIds = partners.map((p) => p.id)
+
+  // 2. Get all end customers belonging to these partners
+  const { data: customers, error: customersError } = await admin
+    .from('end_customers')
+    .select('*')
+    .in('partner_id', partnerIds)
+  if (customersError) throw customersError
+
+  return customers || []
+}
diff --git a/shop/lib/actions/users.ts b/shop/lib/actions/users.ts
index 5dea4bd..00543f4 100644
--- a/shop/lib/actions/users.ts
+++ b/shop/lib/actions/users.ts
@@ -231,38 +231,3 @@ export async function updateUserProfile(id: string, data: { first_name: string |
   revalidatePath('/admin/users');
 }
 
-export async function getUsersByCompany(companyId: string) {
-  const admin = createAdminClient();
-  const { data: dbUsers, error: dbError } = await admin
-    .from('users')
-    .select('id, role')
-    .eq('company_id', companyId);
-  if (dbError) throw dbError;
-
-  if (dbUsers.length === 0) return [];
-
-  const { data: { users }, error } = await admin.auth.admin.listUsers();
-  if (error) throw error;
-
-  const authUserMap = new Map(users.map((u) => [u.id, u]));
-  const userIds = dbUsers.map((u) => u.id);
-
-  const { data: dbProfiles } = await admin
-    .from('profiles')
-    .select('id, first_name, last_name')
-    .in('id', userIds);
-
-  const profileMap = new Map((dbProfiles || []).map((p) => [p.id, p]));
-
-  return dbUsers.map((u) => {
-    const authUser = authUserMap.get(u.id);
-    const profile = profileMap.get(u.id);
-    return {
-      id: u.id,
-      email: authUser?.email || '',
-      role: u.role,
-      first_name: profile?.first_name || '',
-      last_name: profile?.last_name || '',
-    };
-  });
-}