diff --git a/app/dashboard/storefront/customers/page.tsx b/app/dashboard/storefront/customers/page.tsx
index ab48278..8d725d8 100644
--- a/app/dashboard/storefront/customers/page.tsx
+++ b/app/dashboard/storefront/customers/page.tsx
@@ -138,8 +138,8 @@ export default function CustomerManagementPage() {
           </h1>
         </div>
 
-        <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="bg-black rounded-lg shadow overflow-hidden">
+          <div className="p-4 border-b border-gray-800 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-400">Show:</div>
@@ -164,22 +164,22 @@ export default function CustomerManagementPage() {
           </div>
 
           {loading ? (
-            <div className="p-8 flex justify-center">
+            <div className="p-8 flex justify-center bg-black">
               <Loader2 className="h-8 w-8 animate-spin text-primary" />
             </div>
           ) : customers.length === 0 ? (
-            <div className="p-8 text-center">
-              <Users className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
-              <h3 className="text-lg font-medium mb-2">No customers found</h3>
-              <p className="text-muted-foreground">
+            <div className="p-8 text-center bg-black">
+              <Users className="h-12 w-12 mx-auto text-gray-500 mb-4" />
+              <h3 className="text-lg font-medium mb-2 text-white">No customers found</h3>
+              <p className="text-gray-500">
                 Once you have customers placing orders, they will appear here.
               </p>
             </div>
           ) : (
             <div className="overflow-x-auto">
-              <Table className="border-t border-gray-700">
-                <TableHeader className="bg-gray-800/40">
-                  <TableRow className="hover:bg-gray-800/60 border-gray-700">
+              <Table className="border-t border-gray-800 bg-black">
+                <TableHeader className="bg-black">
+                  <TableRow className="hover:bg-gray-900 border-gray-800">
                     <TableHead className="w-[250px] text-gray-300">Customer</TableHead>
                     <TableHead 
                       className="cursor-pointer w-[100px] text-gray-300"
@@ -202,11 +202,11 @@ export default function CustomerManagementPage() {
                     <TableHead className="w-[250px] text-gray-300">Status</TableHead>
                   </TableRow>
                 </TableHeader>
-                <TableBody>
+                <TableBody className="bg-black">
                   {customers.map((customer) => (
                     <TableRow 
                       key={customer.userId}
-                      className="cursor-pointer hover:bg-gray-800/60 border-gray-700"
+                      className="cursor-pointer hover:bg-gray-900 border-gray-800 bg-black"
                       onClick={() => setSelectedCustomer(customer)}
                     >
                       <TableCell>
@@ -214,7 +214,7 @@ export default function CustomerManagementPage() {
                         <div className="text-sm text-gray-400">ID: {customer.telegramUserId}</div>
                       </TableCell>
                       <TableCell>
-                        <Badge className="font-medium">{customer.totalOrders}</Badge>
+                        <Badge className="bg-gray-700 text-white hover:bg-gray-600">{customer.totalOrders}</Badge>
                       </TableCell>
                       <TableCell className="font-medium text-gray-100">
                         {formatCurrency(customer.totalSpent)}
@@ -239,7 +239,7 @@ export default function CustomerManagementPage() {
             </div>
           )}
 
-          <div className="p-4 border-t border-gray-700 flex justify-between items-center">
+          <div className="p-4 border-t border-gray-800 flex justify-between items-center">
             <div className="text-sm text-gray-400">
               Page {page} of {totalPages}
             </div>
@@ -247,6 +247,7 @@ export default function CustomerManagementPage() {
               <Button
                 variant="outline"
                 size="sm"
+                className="border-gray-700 bg-gray-900 text-gray-300 hover:bg-gray-800 hover:text-white"
                 onClick={() => handlePageChange(Math.max(1, page - 1))}
                 disabled={page === 1 || loading}
               >
@@ -256,6 +257,7 @@ export default function CustomerManagementPage() {
               <Button
                 variant="outline"
                 size="sm"
+                className="border-gray-700 bg-gray-900 text-gray-300 hover:bg-gray-800 hover:text-white"
                 onClick={() => handlePageChange(Math.min(totalPages, page + 1))}
                 disabled={page === totalPages || loading}
               >
@@ -268,13 +270,13 @@ export default function CustomerManagementPage() {
 
         {/* Customer Details Dialog */}
         <Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}>
-          <DialogContent className="max-w-2xl">
+          <DialogContent className="max-w-2xl bg-gray-900 text-white border-gray-700">
             <DialogHeader>
-              <DialogTitle className="text-xl font-semibold flex items-center">
+              <DialogTitle className="text-xl font-semibold flex items-center text-white">
                 <Users className="h-5 w-5 mr-2" />
                 Customer Details
               </DialogTitle>
-              <DialogDescription>
+              <DialogDescription className="text-gray-400">
                 Details and order statistics for this customer
               </DialogDescription>
             </DialogHeader>
@@ -282,28 +284,28 @@ export default function CustomerManagementPage() {
             {selectedCustomer && (
               <div className="space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <Card>
+                  <Card className="bg-gray-800 border-gray-700">
                     <CardHeader className="pb-2">
-                      <CardTitle className="text-md font-medium">Customer Information</CardTitle>
+                      <CardTitle className="text-md font-medium text-white">Customer Information</CardTitle>
                     </CardHeader>
                     <CardContent className="space-y-2">
                       <div className="flex justify-between text-sm">
-                        <div className="text-gray-500 dark:text-gray-400">Username:</div>
-                        <div className="font-medium">@{selectedCustomer.telegramUsername || "Unknown"}</div>
+                        <div className="text-gray-400">Username:</div>
+                        <div className="font-medium text-white">@{selectedCustomer.telegramUsername || "Unknown"}</div>
                       </div>
                       <div className="flex justify-between text-sm">
-                        <div className="text-gray-500 dark:text-gray-400">Telegram ID:</div>
-                        <div className="font-medium">{selectedCustomer.telegramUserId}</div>
+                        <div className="text-gray-400">Telegram ID:</div>
+                        <div className="font-medium text-white">{selectedCustomer.telegramUserId}</div>
                       </div>
                       <div className="flex justify-between text-sm">
-                        <div className="text-gray-500 dark:text-gray-400">Chat ID:</div>
-                        <div className="font-medium">{selectedCustomer.chatId}</div>
+                        <div className="text-gray-400">Chat ID:</div>
+                        <div className="font-medium text-white">{selectedCustomer.chatId}</div>
                       </div>
                       <div className="flex justify-end pt-2">
                         <Button 
                           variant="outline" 
                           size="sm" 
-                          className="text-xs"
+                          className="text-xs border-gray-600 text-gray-300 hover:text-white hover:bg-gray-700"
                           onClick={() => {
                             window.open(`https://t.me/${selectedCustomer.telegramUsername || selectedCustomer.telegramUserId}`, '_blank');
                           }}
@@ -315,34 +317,34 @@ export default function CustomerManagementPage() {
                     </CardContent>
                   </Card>
 
-                  <Card>
+                  <Card className="bg-gray-800 border-gray-700">
                     <CardHeader className="pb-2">
-                      <CardTitle className="text-md font-medium">Order Statistics</CardTitle>
+                      <CardTitle className="text-md font-medium text-white">Order Statistics</CardTitle>
                     </CardHeader>
                     <CardContent className="space-y-2">
                       <div className="flex justify-between text-sm">
-                        <div className="text-gray-500 dark:text-gray-400">Total Orders:</div>
-                        <div className="font-medium">{selectedCustomer.totalOrders}</div>
+                        <div className="text-gray-400">Total Orders:</div>
+                        <div className="font-medium text-white">{selectedCustomer.totalOrders}</div>
                       </div>
                       <div className="flex justify-between text-sm">
-                        <div className="text-gray-500 dark:text-gray-400">Total Spent:</div>
-                        <div className="font-medium">{formatCurrency(selectedCustomer.totalSpent)}</div>
+                        <div className="text-gray-400">Total Spent:</div>
+                        <div className="font-medium text-white">{formatCurrency(selectedCustomer.totalSpent)}</div>
                       </div>
                       <div className="flex justify-between text-sm">
-                        <div className="text-gray-500 dark:text-gray-400">First Order:</div>
-                        <div className="font-medium">{formatDate(selectedCustomer.firstOrderDate)}</div>
+                        <div className="text-gray-400">First Order:</div>
+                        <div className="font-medium text-white">{formatDate(selectedCustomer.firstOrderDate)}</div>
                       </div>
                       <div className="flex justify-between text-sm">
-                        <div className="text-gray-500 dark:text-gray-400">Last Order:</div>
-                        <div className="font-medium">{formatDate(selectedCustomer.lastOrderDate)}</div>
+                        <div className="text-gray-400">Last Order:</div>
+                        <div className="font-medium text-white">{formatDate(selectedCustomer.lastOrderDate)}</div>
                       </div>
                     </CardContent>
                   </Card>
                 </div>
 
-                <Card>
+                <Card className="bg-gray-800 border-gray-700">
                   <CardHeader className="pb-2">
-                    <CardTitle className="text-md font-medium">Order Status Breakdown</CardTitle>
+                    <CardTitle className="text-md font-medium text-white">Order Status Breakdown</CardTitle>
                   </CardHeader>
                   <CardContent>
                     <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">