diff --git a/app/dashboard/storefront/customers/page.tsx b/app/dashboard/storefront/customers/page.tsx
index 5ffeae1..ab48278 100644
--- a/app/dashboard/storefront/customers/page.tsx
+++ b/app/dashboard/storefront/customers/page.tsx
@@ -132,17 +132,17 @@ export default function CustomerManagementPage() {
     <Layout>
       <div className="space-y-6">
         <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
+          <h1 className="text-2xl font-semibold text-white flex items-center">
             <Users className="mr-2 h-6 w-6" />
             Customer Management
           </h1>
         </div>
 
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
-          <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+        <div className="bg-gray-800 rounded-lg shadow overflow-hidden">
+          <div className="p-4 border-b border-gray-700 flex justify-between items-center">
             <div className="flex items-center gap-4">
               <div className="flex items-center gap-2">
-                <div className="text-sm font-medium text-gray-500 dark:text-gray-400">Show:</div>
+                <div className="text-sm font-medium text-gray-400">Show:</div>
                 <Select value={itemsPerPage.toString()} onValueChange={handleItemsPerPageChange}>
                   <SelectTrigger className="w-[70px]">
                     <SelectValue placeholder="25" />
@@ -156,7 +156,7 @@ export default function CustomerManagementPage() {
               </div>
             </div>
 
-            <div className="text-sm text-gray-500 dark:text-gray-400">
+            <div className="text-sm text-gray-400">
               {loading 
                 ? "Loading..." 
                 : `Showing ${customers.length} of ${totalPages * itemsPerPage} customers`}
@@ -177,12 +177,12 @@ export default function CustomerManagementPage() {
             </div>
           ) : (
             <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-[250px]">Customer</TableHead>
+              <Table className="border-t border-gray-700">
+                <TableHeader className="bg-gray-800/40">
+                  <TableRow className="hover:bg-gray-800/60 border-gray-700">
+                    <TableHead className="w-[250px] text-gray-300">Customer</TableHead>
                     <TableHead 
-                      className="cursor-pointer w-[100px]"
+                      className="cursor-pointer w-[100px] text-gray-300"
                       onClick={() => handleSort("totalOrders")}
                     >
                       <div className="flex items-center">
@@ -191,7 +191,7 @@ export default function CustomerManagementPage() {
                       </div>
                     </TableHead>
                     <TableHead 
-                      className="cursor-pointer w-[150px]"
+                      className="cursor-pointer w-[150px] text-gray-300"
                       onClick={() => handleSort("totalSpent")}
                     >
                       <div className="flex items-center">
@@ -199,35 +199,35 @@ export default function CustomerManagementPage() {
                         <ArrowUpDown className="ml-2 h-4 w-4" />
                       </div>
                     </TableHead>
-                    <TableHead className="w-[250px]">Status</TableHead>
+                    <TableHead className="w-[250px] text-gray-300">Status</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {customers.map((customer) => (
                     <TableRow 
                       key={customer.userId}
-                      className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
+                      className="cursor-pointer hover:bg-gray-800/60 border-gray-700"
                       onClick={() => setSelectedCustomer(customer)}
                     >
                       <TableCell>
-                        <div className="font-medium">@{customer.telegramUsername || "Unknown"}</div>
-                        <div className="text-sm text-gray-500">ID: {customer.telegramUserId}</div>
+                        <div className="font-medium text-gray-100">@{customer.telegramUsername || "Unknown"}</div>
+                        <div className="text-sm text-gray-400">ID: {customer.telegramUserId}</div>
                       </TableCell>
                       <TableCell>
                         <Badge className="font-medium">{customer.totalOrders}</Badge>
                       </TableCell>
-                      <TableCell className="font-medium">
+                      <TableCell className="font-medium text-gray-100">
                         {formatCurrency(customer.totalSpent)}
                       </TableCell>
                       <TableCell>
                         <div className="flex space-x-1">
-                          <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-300">
+                          <Badge className="bg-blue-500 text-white hover:bg-blue-600">
                             {customer.ordersByStatus.paid} Paid
                           </Badge>
-                          <Badge className="bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300">
+                          <Badge className="bg-green-500 text-white hover:bg-green-600">
                             {customer.ordersByStatus.completed} Completed
                           </Badge>
-                          <Badge className="bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-300">
+                          <Badge className="bg-amber-500 text-white hover:bg-amber-600">
                             {customer.ordersByStatus.shipped} Shipped
                           </Badge>
                         </div>
@@ -239,8 +239,8 @@ export default function CustomerManagementPage() {
             </div>
           )}
 
-          <div className="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center">
-            <div className="text-sm text-gray-500 dark:text-gray-400">
+          <div className="p-4 border-t border-gray-700 flex justify-between items-center">
+            <div className="text-sm text-gray-400">
               Page {page} of {totalPages}
             </div>
             <div className="flex gap-2">
@@ -346,21 +346,21 @@ export default function CustomerManagementPage() {
                   </CardHeader>
                   <CardContent>
                     <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-                      <div className="bg-blue-100 dark:bg-blue-900/30 p-3 rounded-md">
-                        <p className="text-sm text-blue-800 dark:text-blue-300">Paid</p>
-                        <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.paid}</p>
+                      <div className="bg-blue-500/20 p-3 rounded-md border border-blue-500/30">
+                        <p className="text-sm text-blue-300">Paid</p>
+                        <p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.paid}</p>
                       </div>
-                      <div className="bg-purple-100 dark:bg-purple-900/30 p-3 rounded-md">
-                        <p className="text-sm text-purple-800 dark:text-purple-300">Acknowledged</p>
-                        <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.acknowledged}</p>
+                      <div className="bg-purple-500/20 p-3 rounded-md border border-purple-500/30">
+                        <p className="text-sm text-purple-300">Acknowledged</p>
+                        <p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.acknowledged}</p>
                       </div>
-                      <div className="bg-amber-100 dark:bg-amber-900/30 p-3 rounded-md">
-                        <p className="text-sm text-amber-800 dark:text-amber-300">Shipped</p>
-                        <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.shipped}</p>
+                      <div className="bg-amber-500/20 p-3 rounded-md border border-amber-500/30">
+                        <p className="text-sm text-amber-300">Shipped</p>
+                        <p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.shipped}</p>
                       </div>
-                      <div className="bg-green-100 dark:bg-green-900/30 p-3 rounded-md">
-                        <p className="text-sm text-green-800 dark:text-green-300">Completed</p>
-                        <p className="text-xl font-semibold">{selectedCustomer.ordersByStatus.completed}</p>
+                      <div className="bg-green-500/20 p-3 rounded-md border border-green-500/30">
+                        <p className="text-sm text-green-300">Completed</p>
+                        <p className="text-xl font-semibold text-white">{selectedCustomer.ordersByStatus.completed}</p>
                       </div>
                     </div>
                   </CardContent>