diff --git a/app/dashboard/categories/page.tsx b/app/dashboard/categories/page.tsx
index f898aaf..f466c3d 100644
--- a/app/dashboard/categories/page.tsx
+++ b/app/dashboard/categories/page.tsx
@@ -263,10 +263,10 @@ export default function CategoriesPage() {
       >
         <div
           ref={ref}
-          className={`group flex items-center p-2 rounded-md transition-all duration-200 border border-transparent
-            ${isEditing ? 'bg-muted/50 border-primary/20' : ''}
-            ${isOver ? 'bg-muted border-primary/20' : 'hover:bg-muted/50 hover:border-border/50'}
-            ${isDragging ? 'opacity-50' : 'opacity-100'}`}
+          className={`group flex items-center p-3 rounded-xl transition-all duration-200 border mb-2
+            ${isEditing ? 'bg-indigo-500/10 border-indigo-500/30' : ''}
+            ${isOver ? 'bg-indigo-500/20 border-indigo-500/50 scale-[1.02]' : 'bg-black/40 border-white/5 hover:bg-black/60 hover:border-white/10 hover:shadow-lg'}
+            ${isDragging ? 'opacity-30' : 'opacity-100'} backdrop-blur-sm`}
           style={{ marginLeft: `${level * 24}px` }}
           data-handler-id={handlerId}
         >
@@ -384,51 +384,53 @@ export default function CategoriesPage() {
 
         <div className="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-5 gap-6 lg:gap-8">
           {/* Add Category Card */}
-          <Card className="lg:col-span-2 border-border/40 bg-background/50 backdrop-blur-sm shadow-sm h-fit sticky top-6">
-            <CardHeader className="bg-muted/20 border-b border-border/40 pb-4">
-              <CardTitle className="text-lg font-medium flex items-center">
-                <Plus className="mr-2 h-4 w-4 text-primary" />
+          <Card className="lg:col-span-2 border-white/10 bg-black/40 backdrop-blur-xl shadow-xl h-fit sticky top-6 rounded-xl overflow-hidden">
+            <CardHeader className="bg-white/[0.02] border-b border-white/5 pb-4">
+              <CardTitle className="text-lg font-bold flex items-center text-white">
+                <div className="p-2 mr-3 rounded-lg bg-indigo-500/10 border border-indigo-500/20">
+                  <Plus className="h-4 w-4 text-indigo-400" />
+                </div>
                 Add New Category
               </CardTitle>
-              <CardDescription>
+              <CardDescription className="text-zinc-400">
                 Create a new category or subcategory
               </CardDescription>
             </CardHeader>
             <CardContent className="pt-6">
               <div className="space-y-4">
                 <div className="space-y-2">
-                  <label className="text-sm font-medium leading-none">
+                  <label className="text-sm font-medium leading-none text-zinc-300">
                     Category Name
                   </label>
                   <Input
                     value={newCategoryName}
                     onChange={(e) => setNewCategoryName(e.target.value)}
                     placeholder="e.g. Electronics, Clothing..."
-                    className="h-10 border-border/50 bg-background/50 focus:bg-background transition-colors"
+                    className="h-10 border-white/10 bg-black/20 focus:bg-black/40 transition-colors text-white placeholder:text-zinc-600"
                   />
                 </div>
                 <div className="space-y-2">
-                  <label className="text-sm font-medium leading-none">
+                  <label className="text-sm font-medium leading-none text-zinc-300">
                     Parent Category
                   </label>
                   <Select
                     value={selectedParentId || "none"}
                     onValueChange={setSelectedParentId}
                   >
-                    <SelectTrigger className="h-10 border-border/50 bg-background/50 focus:bg-background transition-colors">
+                    <SelectTrigger className="h-10 border-white/10 bg-black/20 focus:bg-black/40 transition-colors text-white">
                       <SelectValue placeholder="Select parent category" />
                     </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">No parent (root category)</SelectItem>
+                    <SelectContent className="bg-zinc-900 border-white/10 text-white">
+                      <SelectItem value="none" className="focus:bg-zinc-800">No parent (root category)</SelectItem>
                       {categories.map((cat) => (
-                        <SelectItem key={cat._id} value={cat._id}>
+                        <SelectItem key={cat._id} value={cat._id} className="focus:bg-zinc-800">
                           {cat.name}
                         </SelectItem>
                       ))}
                     </SelectContent>
                   </Select>
                 </div>
-                <Button onClick={handleAddCategory} className="w-full mt-2" size="lg">
+                <Button onClick={handleAddCategory} className="w-full mt-2 bg-indigo-600 hover:bg-indigo-700 text-white border-0" size="lg">
                   <Plus className="h-4 w-4 mr-2" />
                   Add Category
                 </Button>
@@ -437,14 +439,14 @@ export default function CategoriesPage() {
           </Card>
 
           {/* Category List Card */}
-          <Card className="lg:col-span-3 border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
-            <CardHeader className="bg-muted/20 border-b border-border/40 pb-4">
-              <CardTitle className="text-lg font-medium">Structure</CardTitle>
-              <CardDescription>
+          <Card className="lg:col-span-3 border-none bg-transparent shadow-none">
+            <CardHeader className="pl-0 pt-0 pb-4">
+              <CardTitle className="text-lg font-bold text-white">Structure</CardTitle>
+              <CardDescription className="text-zinc-400">
                 Drag and drop to reorder categories
               </CardDescription>
             </CardHeader>
-            <CardContent className="pt-6">
+            <CardContent className="p-0">
               <DndProvider backend={HTML5Backend}>
                 <div className="space-y-2 min-h-[300px]">
                   {loading ? (
diff --git a/components/dashboard/quick-actions.tsx b/components/dashboard/quick-actions.tsx
index a4db859..5a02f90 100644
--- a/components/dashboard/quick-actions.tsx
+++ b/components/dashboard/quick-actions.tsx
@@ -164,13 +164,16 @@ export default function QuickActions() {
                     const isModalAction = action.action === "modal";
 
                     const CardContentWrapper = () => (
-                        <Card className="hover:border-primary/50 transition-colors cursor-pointer group h-full border-border/40 bg-background/50 backdrop-blur-sm">
-                            <CardContent className="p-6 flex flex-col items-center text-center">
-                                <div className={`p-3 rounded-xl ${action.color} mb-4 group-hover:scale-110 transition-transform`}>
+                        <Card className="h-full border-none bg-black/40 backdrop-blur-xl hover:bg-black/60 transition-all duration-300 group overflow-hidden relative">
+                            <div className="absolute inset-0 border border-white/10 rounded-xl pointer-events-none group-hover:border-white/20 transition-colors" />
+                            <div className={`absolute inset-0 bg-gradient-to-br ${action.color.split(' ')[0].replace('/10', '/5')} opacity-0 group-hover:opacity-100 transition-opacity duration-500`} />
+
+                            <CardContent className="p-6 flex flex-col items-center text-center relative z-10">
+                                <div className={`p-4 rounded-2xl ${action.color.replace('bg-', 'bg-opacity-10 bg-')} mb-4 group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-black/20`}>
                                     <action.icon className="h-6 w-6" />
                                 </div>
-                                <h3 className="font-semibold text-lg">{action.title}</h3>
-                                <p className="text-sm text-muted-foreground mt-1">{action.description}</p>
+                                <h3 className="font-bold text-lg text-white group-hover:text-primary transition-colors">{action.title}</h3>
+                                <p className="text-sm text-zinc-400 mt-1">{action.description}</p>
                             </CardContent>
                         </Card>
                     );
@@ -181,15 +184,15 @@ export default function QuickActions() {
                             initial={{ opacity: 0, y: 20 }}
                             animate={{ opacity: 1, y: 0 }}
                             transition={{ delay: index * 0.1 }}
-                            whileHover={{ scale: 1.02 }}
+                            whileHover={{ y: -5 }}
                             whileTap={{ scale: 0.98 }}
                         >
                             {isModalAction ? (
-                                <div onClick={() => setModalOpen(true)}>
+                                <div onClick={() => setModalOpen(true)} className="cursor-pointer h-full">
                                     <CardContentWrapper />
                                 </div>
                             ) : (
-                                <Link href={action.href}>
+                                <Link href={action.href} className="h-full block">
                                     <CardContentWrapper />
                                 </Link>
                             )}
diff --git a/components/tables/product-table.tsx b/components/tables/product-table.tsx
index 384cdea..f18b6ab 100644
--- a/components/tables/product-table.tsx
+++ b/components/tables/product-table.tsx
@@ -211,12 +211,14 @@ const ProductTable = ({
   return (
     <div className="space-y-8">
       {/* Enabled Products Table */}
-      <Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
-        <CardHeader className="py-4 px-6 border-b border-border/50 bg-muted/30">
-          <CardTitle className="text-lg font-medium flex items-center gap-2">
-            <CheckCircle className="h-5 w-5 text-primary" />
+      <Card className="border-white/10 bg-black/40 backdrop-blur-xl shadow-2xl overflow-hidden rounded-xl">
+        <CardHeader className="py-4 px-6 border-b border-white/5 bg-white/[0.02]">
+          <CardTitle className="text-lg font-bold flex items-center gap-3 text-white">
+            <div className="p-2 rounded-lg bg-indigo-500/10 border border-indigo-500/20">
+              <CheckCircle className="h-5 w-5 text-indigo-400" />
+            </div>
             Active Products
-            <Badge variant="secondary" className="ml-2 bg-background/80 backdrop-blur-sm">
+            <Badge variant="secondary" className="ml-2 bg-indigo-500/10 text-indigo-300 border-indigo-500/20 hover:bg-indigo-500/20">
               {sortedEnabledProducts.length}
             </Badge>
           </CardTitle>
@@ -226,11 +228,14 @@ const ProductTable = ({
             <Table>
               {renderTableHeader()}
               <TableBody>
-                <AnimatePresence mode="popLayout">
+                <AnimatePresence>
                   {loading ? (
                     <TableRow>
                       <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
-                        Loading products...
+                        <div className="flex flex-col items-center gap-2">
+                          <div className="h-6 w-6 animate-spin rounded-full border-2 border-indigo-500 border-t-transparent" />
+                          <span>Loading products...</span>
+                        </div>
                       </TableCell>
                     </TableRow>
                   ) : sortedEnabledProducts.length > 0 ? (
@@ -239,7 +244,7 @@ const ProductTable = ({
                     <TableRow>
                       <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
                         <div className="flex flex-col items-center justify-center gap-2">
-                          <PackageX className="h-8 w-8 opacity-50" />
+                          <PackageX className="h-8 w-8 opacity-20" />
                           <p>No active products found</p>
                         </div>
                       </TableCell>
@@ -254,12 +259,12 @@ const ProductTable = ({
 
       {/* Disabled Products Section */}
       {!loading && disabledProducts.length > 0 && (
-        <Card className="border-border/40 bg-background/30 backdrop-blur-sm shadow-sm overflow-hidden opacity-90">
-          <CardHeader className="py-4 px-6 border-b border-border/50 bg-muted/20">
-            <CardTitle className="text-lg font-medium flex items-center gap-2 text-muted-foreground">
+        <Card className="border-white/5 bg-black/20 backdrop-blur-sm shadow-none overflow-hidden opacity-80 hover:opacity-100 transition-opacity">
+          <CardHeader className="py-4 px-6 border-b border-white/5 bg-white/[0.01]">
+            <CardTitle className="text-lg font-medium flex items-center gap-2 text-zinc-400">
               <Archive className="h-5 w-5" />
               Archived / Disabled
-              <Badge variant="outline" className="ml-2">
+              <Badge variant="outline" className="ml-2 border-white/10 text-zinc-500">
                 {sortedDisabledProducts.length}
               </Badge>
             </CardTitle>
@@ -269,7 +274,7 @@ const ProductTable = ({
               <Table>
                 {renderTableHeader()}
                 <TableBody>
-                  <AnimatePresence mode="popLayout">
+                  <AnimatePresence>
                     {sortedDisabledProducts.map((product, index) =>
                       renderProductRow(product, index, true),
                     )}