Add Icons

app/dashboard/categories/page.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef } from "react";
 import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Plus, Pencil, Trash2, ChevronRight, ChevronDown, MoveVertical } from "lucide-react";
+import { Plus, Pencil, Trash2, ChevronRight, ChevronDown, MoveVertical, FolderTree } from "lucide-react";
 import { toast } from "sonner";
 import {
   Select,
@@ -340,18 +340,23 @@ export default function CategoriesPage() {
 
   return (
     <Layout>
-      <div className="max-w-4xl mx-auto space-y-6 p-6">
+      <div className="space-y-6">
         <div className="flex items-center justify-between">
-          <h1 className="text-3xl font-bold tracking-tight">Categories</h1>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
+            <FolderTree className="mr-2 h-6 w-6" />
+            Categories
+          </h1>
         </div>
 
-        <Card>
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+          {/* Add Category Card - Takes up 2 columns */}
+          <Card className="lg:col-span-2">
             <CardHeader>
-            <CardTitle className="text-xl font-semibold">Add New Category</CardTitle>
+              <CardTitle className="text-lg font-medium">Add New Category</CardTitle>
             </CardHeader>
             <CardContent>
-            <div className="flex items-end gap-4">
+              <div className="space-y-4">
-              <div className="flex-1 space-y-2">
+                <div className="space-y-2">
                   <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                     Category Name
                   </label>
@@ -362,7 +367,7 @@ export default function CategoriesPage() {
                     className="h-9"
                   />
                 </div>
-              <div className="flex-1 space-y-2">
+                <div className="space-y-2">
                   <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                     Parent Category
                   </label>
@@ -383,7 +388,7 @@ export default function CategoriesPage() {
                     </SelectContent>
                   </Select>
                 </div>
-              <Button onClick={handleAddCategory} className="h-9">
+                <Button onClick={handleAddCategory} className="w-full">
                   <Plus className="h-4 w-4 mr-2" />
                   Add Category
                 </Button>
@@ -391,9 +396,10 @@ export default function CategoriesPage() {
             </CardContent>
           </Card>
 
-        <Card>
+          {/* Category List Card - Takes up 3 columns */}
+          <Card className="lg:col-span-3">
             <CardHeader>
-            <CardTitle className="text-xl font-semibold">Category List</CardTitle>
+              <CardTitle className="text-lg font-medium">Category List</CardTitle>
             </CardHeader>
             <CardContent>
               <DndProvider backend={HTML5Backend}>
@@ -411,6 +417,7 @@ export default function CategoriesPage() {
               </DndProvider>
             </CardContent>
           </Card>
+        </div>
         
         {/* Delete Confirmation Dialog */}
         {categoryToDelete && (

app/dashboard/products/page.tsx

@@ -6,7 +6,7 @@ import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Product } from "@/models/products";
-import { Plus, Upload, Search, RefreshCw } from "lucide-react";
+import { Plus, Upload, Search, RefreshCw, Package2 } from "lucide-react";
 import { clientFetch } from "@/lib/api";
 import { ProductModal } from "@/components/modals/product-modal";
 import ProductTable from "@/components/tables/product-table";
@@ -269,8 +269,11 @@ export default function ProductsPage() {
   return (
     <Layout>
       <div className="space-y-6">
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-semibold">Product Inventory</h1>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
+            <Package2 className="mr-2 h-6 w-6" />
+            Products
+          </h1>
           <div className="flex items-center gap-3">
             <div className="relative">
               <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />

app/dashboard/promotions/page.tsx

@@ -3,6 +3,7 @@ import Dashboard from "@/components/dashboard/dashboard";
 import { Metadata, Viewport } from "next";
 import PromotionsList from "@/components/dashboard/promotions/PromotionsList";
 import PromotionsPageSkeleton from "@/components/dashboard/promotions/PromotionsPageSkeleton";
+import { Ticket } from "lucide-react";
 
 export const metadata: Metadata = {
   title: "Promotions | Ember Market",
@@ -23,7 +24,10 @@ export default function PromotionsPage() {
     <Dashboard>
       <div className="space-y-6">
         <div>
-          <h1 className="text-3xl font-bold">Promotions</h1>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
+            <Ticket className="mr-2 h-6 w-6" />
+            Promotions
+          </h1>
           <p className="mt-1 text-muted-foreground">
             Create and manage promotional codes and discounts for your store
           </p>

app/dashboard/shipping/page.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, ChangeEvent } from "react";
 import { useRouter } from "next/navigation";
 import Layout from "@/components/layout/layout";
-import { Edit, Plus, Trash } from "lucide-react";
+import { Edit, Plus, Trash, Truck } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ShippingModal } from "@/components/modals/shipping-modal";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -174,8 +174,9 @@ export default function ShippingPage() {
     <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">
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
-            Manage Shipping Options
+            <Truck className="mr-2 h-6 w-6" />
+            Shipping Methods
           </h1>
           <Button onClick={() => {
             setNewShipping({ name: "", price: 0 });