diff --git a/app/dashboard/storefront/customers/page.tsx b/app/dashboard/storefront/customers/page.tsx
index 9dc7b5e..71341db 100644
--- a/app/dashboard/storefront/customers/page.tsx
+++ b/app/dashboard/storefront/customers/page.tsx
@@ -164,11 +164,11 @@ export default function CustomerManagementPage() {
           </div>
 
           {loading ? (
-            <div className="p-8 flex justify-center bg-black">
+            <div className="p-8 flex justify-center bg-black/60">
               <Loader2 className="h-8 w-8 animate-spin text-primary" />
             </div>
           ) : customers.length === 0 ? (
-            <div className="p-8 text-center bg-black">
+            <div className="p-8 text-center bg-black/60">
               <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">
@@ -247,7 +247,6 @@ export default function CustomerManagementPage() {
               <Button
                 variant="outline"
                 size="sm"
-                className="border-gray-800 bg-black text-gray-300 hover:bg-gray-900 hover:text-white"
                 onClick={() => handlePageChange(Math.max(1, page - 1))}
                 disabled={page === 1 || loading}
               >
@@ -257,7 +256,6 @@ export default function CustomerManagementPage() {
               <Button
                 variant="outline"
                 size="sm"
-                className="border-gray-800 bg-black text-gray-300 hover:bg-gray-900 hover:text-white"
                 onClick={() => handlePageChange(Math.min(totalPages, page + 1))}
                 disabled={page === totalPages || loading}
               >
@@ -270,7 +268,7 @@ export default function CustomerManagementPage() {
 
         {/* Customer Details Dialog */}
         <Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}>
-          <DialogContent className="max-w-2xl bg-gray-900 text-white border-gray-800">
+          <DialogContent className="max-w-2xl bg-gray-900 text-white border-zinc-800">
             <DialogHeader>
               <DialogTitle className="text-xl font-semibold flex items-center text-white">
                 <Users className="h-5 w-5 mr-2" />
@@ -284,7 +282,7 @@ export default function CustomerManagementPage() {
             {selectedCustomer && (
               <div className="space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <Card className="bg-gray-800 border-gray-800">
+                  <Card className="bg-gray-800 border-zinc-800">
                     <CardHeader className="pb-2">
                       <CardTitle className="text-md font-medium text-white">Customer Information</CardTitle>
                     </CardHeader>
@@ -305,7 +303,7 @@ export default function CustomerManagementPage() {
                         <Button 
                           variant="outline" 
                           size="sm" 
-                          className="text-xs border-gray-800 text-gray-300 hover:text-white hover:bg-gray-700"
+                          className="text-xs border-zinc-800 text-gray-300 hover:text-white hover:bg-gray-700"
                           onClick={() => {
                             window.open(`https://t.me/${selectedCustomer.telegramUsername || selectedCustomer.telegramUserId}`, '_blank');
                           }}
@@ -317,7 +315,7 @@ export default function CustomerManagementPage() {
                     </CardContent>
                   </Card>
 
-                  <Card className="bg-gray-800 border-gray-800">
+                  <Card className="bg-gray-800 border-zinc-800">
                     <CardHeader className="pb-2">
                       <CardTitle className="text-md font-medium text-white">Order Statistics</CardTitle>
                     </CardHeader>
@@ -342,7 +340,7 @@ export default function CustomerManagementPage() {
                   </Card>
                 </div>
 
-                <Card className="bg-gray-800 border-gray-800">
+                <Card className="bg-gray-800 border-zinc-800">
                   <CardHeader className="pb-2">
                     <CardTitle className="text-md font-medium text-white">Order Status Breakdown</CardTitle>
                   </CardHeader>