diff --git a/app/(public)/page.jsx b/app/(public)/page.jsx
index a850a631..2bee3a61 100644
--- a/app/(public)/page.jsx
+++ b/app/(public)/page.jsx
@@ -4,12 +4,14 @@ import Hero from "@/components/Hero";
 import Newsletter from "@/components/Newsletter";
 import OurSpecs from "@/components/OurSpec";
 import LatestProducts from "@/components/LatestProducts";
+import RecommendedProducts from "@/components/RecommendedProducts";
 
 export default function Home() {
     return (
         <div>
             <Hero />
             <LatestProducts />
+            <RecommendedProducts />
             <BestSelling />
             <OurSpecs />
             <Newsletter />
diff --git a/app/(public)/shop/page.jsx b/app/(public)/shop/page.jsx
index e76d4ea7..34699b4f 100644
--- a/app/(public)/shop/page.jsx
+++ b/app/(public)/shop/page.jsx
@@ -1,42 +1,136 @@
 'use client'
-import { Suspense } from "react"
+import { Suspense, useState } from "react"
 import ProductCard from "@/components/ProductCard"
 import { MoveLeftIcon } from "lucide-react"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useSelector } from "react-redux"
 
- function ShopContent() {
+function ShopContent() {
 
-    // get query params ?search=abc
     const searchParams = useSearchParams()
     const search = searchParams.get('search')
     const router = useRouter()
-
     const products = useSelector(state => state.product.list)
+    const [minPrice, setMinPrice] = useState(0)
+    const [maxPrice, setMaxPrice] = useState(999999)
+    const [inStockOnly, setInStockOnly] = useState(false)
+    const [proximity, setProximity] = useState(100)
+    const [category, setCategory] = useState("all")
 
-    const filteredProducts = search
+    let filteredProducts = search
         ? products.filter(product =>
             product.name.toLowerCase().includes(search.toLowerCase())
         )
-        : products;
+        : products
+
+    filteredProducts = filteredProducts.filter(p =>
+        p.price >= minPrice &&
+        p.price <= maxPrice &&
+        (inStockOnly ? p.inStock === true : true) &&
+        (category === "all" ? true : p.category === category)
+    )
 
     return (
         <div className="min-h-[70vh] mx-6">
-            <div className=" max-w-7xl mx-auto">
-                <h1 onClick={() => router.push('/shop')} className="text-2xl text-slate-500 my-6 flex items-center gap-2 cursor-pointer"> {search && <MoveLeftIcon size={20} />}  All <span className="text-slate-700 font-medium">Products</span></h1>
-                <div className="grid grid-cols-2 sm:flex flex-wrap gap-6 xl:gap-12 mx-auto mb-32">
-                    {filteredProducts.map((product) => <ProductCard key={product.id} product={product} />)}
+            <div className="max-w-7xl mx-auto flex gap-10">
+
+                {/* LEFT: PRODUCT GRID */}
+                <div className="w-full">
+                    <h1
+                        onClick={() => router.push('/shop')}
+                        className="text-2xl text-slate-500 my-6 flex items-center gap-2 cursor-pointer"
+                    >
+                        {search && <MoveLeftIcon size={20} />}
+                        All <span className="text-slate-700 font-medium">Products</span>
+                    </h1>
+
+                    <div className="grid grid-cols-2 sm:flex flex-wrap gap-6 xl:gap-12 mb-32">
+                        {filteredProducts.map((product) => (
+                            <ProductCard key={product.id} product={product} />
+                        ))}
+                    </div>
                 </div>
+
+                {/* RIGHT: FILTER PANEL - moved further down */}
+                <div className="w-[260px] xl:block sticky top-[150px] h-fit p-2 border border-slate-200 rounded">
+                    <h2 className="text-lg font-semibold mb-4 text-slate-700">
+                        Filters
+                    </h2>
+
+                    {/* PRICE FILTER */}
+                    <div className="mb-6">
+                        <h3 className="font-medium text-slate-600">Price</h3>
+                        <div className="flex items-center gap-2 mt-2">
+                            <input
+                                type="number"
+                                className="border p-1 rounded w-full"
+                                placeholder="Min"
+                                value={minPrice}
+                                onChange={(e) => setMinPrice(Number(e.target.value))}
+                            />
+                            <span>-</span>
+                            <input
+                                type="number"
+                                className="border p-1 rounded w-full"
+                                placeholder="Max"
+                                value={maxPrice}
+                                onChange={(e) => setMaxPrice(Number(e.target.value))}
+                            />
+                        </div>
+                    </div>
+
+                    {/* STOCK FILTER */}
+                    <div className="mb-6">
+                        <label className="flex items-center gap-2 cursor-pointer">
+                            <input
+                                type="checkbox"
+                                checked={inStockOnly}
+                                onChange={() => setInStockOnly(!inStockOnly)}
+                            />
+                            <span className="text-slate-600">In Stock Only</span>
+                        </label>
+                    </div>
+
+                    {/* PROXIMITY FILTER */}
+                    <div className="mb-6">
+                        <h3 className="font-medium text-slate-600">Proximity (km)</h3>
+                        <input
+                            type="range"
+                            min="1"
+                            max="100"
+                            value={proximity}
+                            onChange={(e) => setProximity(Number(e.target.value))}
+                            className="w-full mt-2"
+                        />
+                        <p className="text-sm text-slate-500">{proximity} km</p>
+                    </div>
+
+                    {/* CATEGORY FILTER */}
+                    <div className="mb-6">
+                        <h3 className="font-medium text-slate-600">Category</h3>
+                        <select
+                            className="border p-2 rounded w-full mt-2"
+                            value={category}
+                            onChange={(e) => setCategory(e.target.value)}
+                        >
+                            <option value="all">All</option>
+                            <option value="watches">Watches</option>
+                            <option value="speakers-headphones">Speakers & Headphones</option>
+                            <option value="home">Home</option>
+                        </select>
+                    </div>
+
+                </div>
+
             </div>
         </div>
     )
 }
 
-
 export default function Shop() {
-  return (
-    <Suspense fallback={<div>Loading shop...</div>}>
-      <ShopContent />
-    </Suspense>
-  );
+    return (
+        <Suspense fallback={<div>Loading shop...</div>}>
+            <ShopContent />
+        </Suspense>
+    );
 }
\ No newline at end of file
diff --git a/app/store/add-product/page.jsx b/app/store/add-product/page.jsx
index 2707490d..200546c7 100644
--- a/app/store/add-product/page.jsx
+++ b/app/store/add-product/page.jsx
@@ -14,11 +14,11 @@ export default function StoreAddProduct() {
         description: "",
         mrp: 0,
         price: 0,
+        quantity: 1, // Added quantity field
         category: "",
     })
     const [loading, setLoading] = useState(false)
 
-
     const onChangeHandler = (e) => {
         setProductInfo({ ...productInfo, [e.target.name]: e.target.value })
     }
@@ -26,42 +26,52 @@ export default function StoreAddProduct() {
     const onSubmitHandler = async (e) => {
         e.preventDefault()
         // Logic to add a product
-        
     }
 
-
     return (
         <form onSubmit={e => toast.promise(onSubmitHandler(e), { loading: "Adding Product..." })} className="text-slate-500 mb-28">
             <h1 className="text-2xl">Add New <span className="text-slate-800 font-medium">Products</span></h1>
             <p className="mt-7">Product Images</p>
 
-            <div htmlFor="" className="flex gap-3 mt-4">
+            <div className="flex gap-3 mt-4">
                 {Object.keys(images).map((key) => (
                     <label key={key} htmlFor={`images${key}`}>
-                        <Image width={300} height={300} className='h-15 w-auto border border-slate-200 rounded cursor-pointer' src={images[key] ? URL.createObjectURL(images[key]) : assets.upload_area} alt="" />
+                        <Image 
+                            width={300} 
+                            height={300} 
+                            className='h-15 w-auto border border-slate-200 rounded cursor-pointer' 
+                            src={images[key] ? URL.createObjectURL(images[key]) : assets.upload_area} 
+                            alt="" 
+                        />
                         <input type="file" accept='image/*' id={`images${key}`} onChange={e => setImages({ ...images, [key]: e.target.files[0] })} hidden />
                     </label>
                 ))}
             </div>
 
-            <label htmlFor="" className="flex flex-col gap-2 my-6 ">
+            <label className="flex flex-col gap-2 my-6">
                 Name
                 <input type="text" name="name" onChange={onChangeHandler} value={productInfo.name} placeholder="Enter product name" className="w-full max-w-sm p-2 px-4 outline-none border border-slate-200 rounded" required />
             </label>
 
-            <label htmlFor="" className="flex flex-col gap-2 my-6 ">
+            <label className="flex flex-col gap-2 my-6">
                 Description
                 <textarea name="description" onChange={onChangeHandler} value={productInfo.description} placeholder="Enter product description" rows={5} className="w-full max-w-sm p-2 px-4 outline-none border border-slate-200 rounded resize-none" required />
             </label>
 
             <div className="flex gap-5">
-                <label htmlFor="" className="flex flex-col gap-2 ">
+                <label className="flex flex-col gap-2">
                     Actual Price ($)
-                    <input type="number" name="mrp" onChange={onChangeHandler} value={productInfo.mrp} placeholder="0" rows={5} className="w-full max-w-45 p-2 px-4 outline-none border border-slate-200 rounded resize-none" required />
+                    <input type="number" name="mrp" onChange={onChangeHandler} value={productInfo.mrp} placeholder="0" className="w-full max-w-45 p-2 px-4 outline-none border border-slate-200 rounded resize-none" required />
                 </label>
-                <label htmlFor="" className="flex flex-col gap-2 ">
+
+                <label className="flex flex-col gap-2">
                     Offer Price ($)
-                    <input type="number" name="price" onChange={onChangeHandler} value={productInfo.price} placeholder="0" rows={5} className="w-full max-w-45 p-2 px-4 outline-none border border-slate-200 rounded resize-none" required />
+                    <input type="number" name="price" onChange={onChangeHandler} value={productInfo.price} placeholder="0" className="w-full max-w-45 p-2 px-4 outline-none border border-slate-200 rounded resize-none" required />
+                </label>
+
+                <label className="flex flex-col gap-2">
+                    Quantity
+                    <input type="number" name="quantity" onChange={onChangeHandler} value={productInfo.quantity} placeholder="1" min={1} className="w-full max-w-45 p-2 px-4 outline-none border border-slate-200 rounded resize-none" required />
                 </label>
             </div>
 
@@ -77,4 +87,4 @@ export default function StoreAddProduct() {
             <button disabled={loading} className="bg-slate-800 text-white px-6 mt-7 py-2 hover:bg-slate-900 rounded transition">Add Product</button>
         </form>
     )
-}
\ No newline at end of file
+}
diff --git a/app/store/manage-product/page.jsx b/app/store/manage-product/page.jsx
index ea91b5bb..2b98797e 100644
--- a/app/store/manage-product/page.jsx
+++ b/app/store/manage-product/page.jsx
@@ -1,9 +1,15 @@
+// StoreManageProducts.jsx (Updated for Unit Pricing)
+
 'use client'
 import { useEffect, useState } from "react"
 import { toast } from "react-hot-toast"
 import Image from "next/image"
 import Loading from "@/components/Loading"
 import { productDummyData } from "@/assets/assets"
+import { PencilIcon } from 'lucide-react' 
+import EditProductModal from '@/components/EditProductModal'; // Must be imported
+
+const FALLBACK_IMAGE = '/images/placeholder-product.png'; 
 
 export default function StoreManageProducts() {
 
@@ -11,20 +17,53 @@ export default function StoreManageProducts() {
 
     const [loading, setLoading] = useState(true)
     const [products, setProducts] = useState([])
+    
+    // State for Modal Management
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [editingProduct, setEditingProduct] = useState(null); 
 
     const fetchProducts = async () => {
-        setProducts(productDummyData)
+        // Assume productDummyData now contains 'itemsInUnit' property for each product
+        setProducts(productDummyData) 
         setLoading(false)
     }
 
     const toggleStock = async (productId) => {
         // Logic to toggle the stock of a product
+    }
 
+    // Handler to open the modal with the product data
+    const handleEditClick = (product) => {
+        setEditingProduct(product);
+        setIsModalOpen(true);
+    };
+
+    // Handler to close the modal
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+        setEditingProduct(null);
+    };
+
+    // Logic to update the 'products' state when the modal saves
+    const handleSave = (updatedData) => {
+        
+        setProducts(currentProducts => {
+            return currentProducts.map(p => {
+                // Find the edited product by ID and merge the new data
+                if (p.id === updatedData.id) {
+                    return { ...p, ...updatedData };
+                }
+                return p;
+            });
+        });
+
+        toast.success(`${updatedData.name} updated successfully.`);
+        handleCloseModal();
+    };
 
-    }
 
     useEffect(() => {
-            fetchProducts()
+        fetchProducts()
     }, [])
 
     if (loading) return <Loading />
@@ -32,39 +71,78 @@ export default function StoreManageProducts() {
     return (
         <>
             <h1 className="text-2xl text-slate-500 mb-5">Manage <span className="text-slate-800 font-medium">Products</span></h1>
-            <table className="w-full max-w-4xl text-left  ring ring-slate-200  rounded overflow-hidden text-sm">
+            <table className="w-full max-w-4xl text-left ring ring-slate-200 rounded overflow-hidden text-sm">
+                
                 <thead className="bg-slate-50 text-gray-700 uppercase tracking-wider">
                     <tr>
                         <th className="px-4 py-3">Name</th>
                         <th className="px-4 py-3 hidden md:table-cell">Description</th>
-                        <th className="px-4 py-3 hidden md:table-cell">MRP</th>
-                        <th className="px-4 py-3">Price</th>
+                        <th className="px-4 py-3 hidden md:table-cell">MRP (Unit)</th>
+                        <th className="px-4 py-3">Price (Unit)</th>
+                        <th className="px-4 py-3 text-center">Quantity (Total Units)</th>
+                        <th className="px-4 py-3 text-center">Items per Unit</th> {/* 🌟 NEW COLUMN 🌟 */}
                         <th className="px-4 py-3">Actions</th>
                     </tr>
                 </thead>
+                
                 <tbody className="text-slate-700">
                     {products.map((product) => (
                         <tr key={product.id} className="border-t border-gray-200 hover:bg-gray-50">
-                            <td className="px-4 py-3">
+                            
+                            <td className="px-4 py-3 whitespace-nowrap min-w-max align-middle">
                                 <div className="flex gap-2 items-center">
-                                    <Image width={40} height={40} className='p-1 shadow rounded cursor-pointer' src={product.images[0]} alt="" />
+                                    <Image 
+                                        width={40} 
+                                        height={40} 
+                                        className='p-1 shadow rounded cursor-pointer' 
+                                        src={(product.images && product.images[0]) ? product.images[0] : FALLBACK_IMAGE} 
+                                        alt={product.name || "Product Image"} 
+                                    />
                                     {product.name}
                                 </div>
                             </td>
-                            <td className="px-4 py-3 max-w-md text-slate-600 hidden md:table-cell truncate">{product.description}</td>
-                            <td className="px-4 py-3 hidden md:table-cell">{currency} {product.mrp.toLocaleString()}</td>
-                            <td className="px-4 py-3">{currency} {product.price.toLocaleString()}</td>
-                            <td className="px-4 py-3 text-center">
-                                <label className="relative inline-flex items-center cursor-pointer text-gray-900 gap-3">
-                                    <input type="checkbox" className="sr-only peer" onChange={() => toast.promise(toggleStock(product.id), { loading: "Updating data..." })} checked={product.inStock} />
-                                    <div className="w-9 h-5 bg-slate-300 rounded-full peer peer-checked:bg-green-600 transition-colors duration-200"></div>
-                                    <span className="dot absolute left-1 top-1 w-3 h-3 bg-white rounded-full transition-transform duration-200 ease-in-out peer-checked:translate-x-4"></span>
-                                </label>
+                            
+                            <td className="px-4 py-3 max-w-md text-slate-600 hidden md:table-cell truncate align-middle">{product.description}</td>
+                            <td className="px-4 py-3 hidden md:table-cell align-middle">{currency} {product.mrp.toLocaleString()}</td>
+                            <td className="px-4 py-3 whitespace-nowrap align-middle">{currency} {product.price.toLocaleString()}</td>
+                            <td className="px-4 py-3 text-center align-middle">{product.quantity}</td>
+                            <td className="px-4 py-3 text-center align-middle">{product.itemsInUnit || 1}</td> {/* 🌟 NEW CELL 🌟 */}
+                            
+                            <td className="px-4 py-3 align-middle"> 
+                                <div className="flex items-center justify-center space-x-3">
+
+                                    {/* Edit Button */}
+                                    <button 
+                                        onClick={() => handleEditClick(product)}
+                                        className="text-blue-600 hover:text-blue-800 p-1 rounded-full hover:bg-blue-100 transition duration-150"
+                                        aria-label={`Edit ${product.name}`}
+                                    >
+                                        <PencilIcon size={16} />
+                                    </button>
+
+                                    {/* Toggle Button UI */}
+                                    <label className="relative inline-flex items-center cursor-pointer text-gray-900">
+                                        <input type="checkbox" className="sr-only peer" onChange={() => toast.promise(toggleStock(product.id), { loading: "Updating data..." })} checked={product.inStock} />
+                                        <div className="w-9 h-5 bg-slate-300 rounded-full peer peer-checked:bg-green-600 transition-colors duration-200"></div>
+                                        <span className="dot absolute left-1 top-1 w-3 h-3 bg-white rounded-full transition-transform duration-200 ease-in-out peer-checked:translate-x-4"></span>
+                                    </label>
+                                </div>
                             </td>
                         </tr>
                     ))}
                 </tbody>
             </table>
+            
+            {/* Modal Component: Uses key={id} and conditional rendering */}
+            {isModalOpen && editingProduct && (
+                <EditProductModal 
+                    key={editingProduct.id} 
+                    product={editingProduct} 
+                    currency={currency}
+                    onClose={handleCloseModal} 
+                    onSave={handleSave}
+                />
+            )}
         </>
     )
 }
\ No newline at end of file
diff --git a/app/wholesale/add-product/page.jsx b/app/wholesale/add-product/page.jsx
new file mode 100644
index 00000000..4cb608b7
--- /dev/null
+++ b/app/wholesale/add-product/page.jsx
@@ -0,0 +1,90 @@
+'use client'
+import { assets } from "@/assets/assets"
+import Image from "next/image"
+import { useState } from "react"
+import { toast } from "react-hot-toast"
+
+export default function WStoreAddProduct() {
+
+    const categories = ['Electronics', 'Clothing', 'Home & Kitchen', 'Food & Drink', 'Bulk Others']
+
+    const [images, setImages] = useState({ 1: null, 2: null, 3: null, 4: null })
+    const [productInfo, setProductInfo] = useState({
+        name: "",
+        description: "",
+        mrp: 0,
+        price: 0,
+        quantity: 1, // Added quantity
+        category: "",
+    })
+    const [loading, setLoading] = useState(false)
+
+    const onChangeHandler = (e) => {
+        setProductInfo({ ...productInfo, [e.target.name]: e.target.value })
+    }
+
+    const onSubmitHandler = async (e) => {
+        e.preventDefault()
+        // Logic to add a wholesale product
+    }
+
+    return (
+        <form onSubmit={e => toast.promise(onSubmitHandler(e), { loading: "Adding Product..." })} className="text-slate-500 mb-28">
+            <h1 className="text-2xl">Add New <span className="text-slate-800 font-medium">Wholesale Products</span></h1>
+            <p className="mt-7">Product Images</p>
+
+            <div className="flex gap-3 mt-4">
+                {Object.keys(images).map((key) => (
+                    <label key={key} htmlFor={`images${key}`}>
+                        <Image 
+                            width={300} 
+                            height={300} 
+                            className='h-15 w-auto border border-slate-200 rounded cursor-pointer' 
+                            src={images[key] ? URL.createObjectURL(images[key]) : assets.upload_area} 
+                            alt="" 
+                        />
+                        <input type="file" accept='image/*' id={`images${key}`} onChange={e => setImages({ ...images, [key]: e.target.files[0] })} hidden />
+                    </label>
+                ))}
+            </div>
+
+            <label className="flex flex-col gap-2 my-6">
+                Name
+                <input type="text" name="name" onChange={onChangeHandler} value={productInfo.name} placeholder="Enter product name" className="w-full max-w-sm p-2 px-4 outline-none border border-slate-200 rounded" required />
+            </label>
+
+            <label className="flex flex-col gap-2 my-6">
+                Description
+                <textarea name="description" onChange={onChangeHandler} value={productInfo.description} placeholder="Enter product description" rows={5} className="w-full max-w-sm p-2 px-4 outline-none border border-slate-200 rounded resize-none" required />
+            </label>
+
+            <div className="flex gap-5">
+                <label className="flex flex-col gap-2">
+                    Actual Price ($)
+                    <input type="number" name="mrp" onChange={onChangeHandler} value={productInfo.mrp} placeholder="0" className="w-full max-w-45 p-2 px-4 outline-none border border-slate-200 rounded resize-none" required />
+                </label>
+
+                <label className="flex flex-col gap-2">
+                    Offer Price ($)
+                    <input type="number" name="price" onChange={onChangeHandler} value={productInfo.price} placeholder="0" className="w-full max-w-45 p-2 px-4 outline-none border border-slate-200 rounded resize-none" required />
+                </label>
+
+                <label className="flex flex-col gap-2">
+                    Quantity
+                    <input type="number" name="quantity" onChange={onChangeHandler} value={productInfo.quantity} placeholder="1" min={1} className="w-full max-w-45 p-2 px-4 outline-none border border-slate-200 rounded resize-none" required />
+                </label>
+            </div>
+
+            <select onChange={e => setProductInfo({ ...productInfo, category: e.target.value })} value={productInfo.category} className="w-full max-w-sm p-2 px-4 my-6 outline-none border border-slate-200 rounded" required>
+                <option value="">Select a category</option>
+                {categories.map((category) => (
+                    <option key={category} value={category}>{category}</option>
+                ))}
+            </select>
+
+            <br />
+
+            <button disabled={loading} className="bg-slate-800 text-white px-6 mt-7 py-2 hover:bg-slate-900 rounded transition">Add Product</button>
+        </form>
+    )
+}
diff --git a/app/wholesale/layout.jsx b/app/wholesale/layout.jsx
new file mode 100644
index 00000000..d1e9b7fe
--- /dev/null
+++ b/app/wholesale/layout.jsx
@@ -0,0 +1,17 @@
+import WStoreLayout from "@/components/wholesale/WStoreLayout";
+
+export const metadata = {
+    title: "GoCart. - Store Dashboard",
+    description: "GoCart. - Store Dashboard",
+};
+
+export default function RootAdminLayout({ children }) {
+
+    return (
+        <>
+            <WStoreLayout>
+                {children}
+            </WStoreLayout>
+        </>
+    );
+}
diff --git a/app/wholesale/manage-product/page.jsx b/app/wholesale/manage-product/page.jsx
new file mode 100644
index 00000000..0300b507
--- /dev/null
+++ b/app/wholesale/manage-product/page.jsx
@@ -0,0 +1,145 @@
+// WStoreManageProducts.jsx (Complete & Functional Code)
+
+'use client'
+import { useEffect, useState } from "react"
+import { toast } from "react-hot-toast"
+import Image from "next/image"
+import Loading from "@/components/Loading"
+import { productDummyData } from "@/assets/assets"
+import { PencilIcon } from 'lucide-react'
+import EditProductModal from '@/components/EditProductModal'; 
+
+const FALLBACK_IMAGE = '/images/placeholder-product.png'; 
+
+export default function WStoreManageProducts() {
+
+    const currency = process.env.NEXT_PUBLIC_CURRENCY_SYMBOL || '$'
+
+    const [loading, setLoading] = useState(true)
+    const [products, setProducts] = useState([])
+    
+    // State for Modal Management
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [editingProduct, setEditingProduct] = useState(null); 
+
+    const fetchProducts = async () => {
+        // Simulating data fetch from a static source
+        setProducts(productDummyData)
+        setLoading(false)
+    }
+
+    const toggleStock = async (productId) => {
+        // Logic to toggle the stock of a wholesale product
+    }
+
+    // Handler to open the modal with the product data
+    const handleEditClick = (product) => {
+        setEditingProduct(product);
+        setIsModalOpen(true);
+    };
+
+    // Handler to close the modal
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+        setEditingProduct(null);
+    };
+
+    // 🌟 FIX: Logic to update the 'products' state when the modal saves
+    const handleSave = (updatedData) => {
+        
+        setProducts(currentProducts => {
+            return currentProducts.map(p => {
+                // Find the edited product by ID and merge the new data
+                if (p.id === updatedData.id) {
+                    return { ...p, ...updatedData };
+                }
+                return p;
+            });
+        });
+
+        toast.success(`${updatedData.name} updated successfully.`);
+        handleCloseModal();
+    };
+
+    useEffect(() => {
+        fetchProducts()
+    }, [])
+
+    if (loading) return <Loading />
+
+    return (
+        <>
+            <h1 className="text-2xl text-slate-500 mb-5">Manage <span className="text-slate-800 font-medium">Wholesale Products</span></h1>
+            <table className="w-full max-w-4xl text-left ring ring-slate-200 rounded overflow-hidden text-sm">
+                
+                <thead className="bg-slate-50 text-gray-700 uppercase tracking-wider">
+                    <tr>
+                        <th className="px-4 py-3">Name</th>
+                        <th className="px-4 py-3 hidden md:table-cell">Description</th>
+                        <th className="px-4 py-3 hidden md:table-cell">MRP</th>
+                        <th className="px-4 py-3">Price</th>
+                        <th className="px-4 py-3 text-center">Quantity</th>
+                        <th className="px-4 py-3">Actions</th>
+                    </tr>
+                </thead>
+                
+                <tbody className="text-slate-700">
+                    {products.map((product) => (
+                        <tr key={product.id} className="border-t border-gray-200 hover:bg-gray-50">
+                            
+                            <td className="px-4 py-3 whitespace-nowrap min-w-max align-middle">
+                                <div className="flex gap-2 items-center">
+                                    <Image 
+                                        width={40} 
+                                        height={40} 
+                                        className='p-1 shadow rounded cursor-pointer' 
+                                        src={(product.images && product.images[0]) ? product.images[0] : FALLBACK_IMAGE} 
+                                        alt={product.name || "Product Image"} 
+                                    />
+                                    {product.name}
+                                </div>
+                            </td>
+                            
+                            <td className="px-4 py-3 max-w-md text-slate-600 hidden md:table-cell truncate align-middle">{product.description}</td>
+                            <td className="px-4 py-3 hidden md:table-cell align-middle">{currency} {product.mrp.toLocaleString()}</td>
+                            <td className="px-4 py-3 whitespace-nowrap align-middle">{currency} {product.price.toLocaleString()}</td>
+                            <td className="px-4 py-3 text-center align-middle">{product.quantity}</td>
+                            
+                            <td className="px-4 py-3 align-middle"> 
+                                <div className="flex items-center justify-center space-x-3">
+                                    
+                                    {/* Edit Button: Opens modal and passes product data */}
+                                    <button 
+                                        onClick={() => handleEditClick(product)}
+                                        className="text-blue-600 hover:text-blue-800 p-1 rounded-full hover:bg-blue-100 transition duration-150"
+                                        aria-label={`Edit ${product.name}`}
+                                    >
+                                        <PencilIcon size={16} />
+                                    </button>
+                                    
+                                    {/* Toggle Button UI */}
+                                    <label className="relative inline-flex items-center cursor-pointer text-gray-900">
+                                        <input type="checkbox" className="sr-only peer" onChange={() => toast.promise(toggleStock(product.id), { loading: "Updating data..." })} checked={product.inStock} />
+                                        <div className="w-9 h-5 bg-slate-300 rounded-full peer peer-checked:bg-green-600 transition-colors duration-200"></div>
+                                        <span className="dot absolute left-1 top-1 w-3 h-3 bg-white rounded-full transition-transform duration-200 ease-in-out peer-checked:translate-x-4"></span>
+                                    </label>
+                                </div>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+            
+            {/* Modal Component: Uses the dynamic key={id} to force remount and field update */}
+            {isModalOpen && editingProduct && (
+                <EditProductModal 
+                    key={editingProduct.id} 
+                    product={editingProduct} 
+                    currency={currency}
+                    onClose={handleCloseModal} 
+                    onSave={handleSave}
+                />
+            )}
+        </>
+    )
+}
\ No newline at end of file
diff --git a/app/wholesale/orders/page.jsx b/app/wholesale/orders/page.jsx
new file mode 100644
index 00000000..e18d49db
--- /dev/null
+++ b/app/wholesale/orders/page.jsx
@@ -0,0 +1,159 @@
+'use client'
+import { useEffect, useState } from "react"
+import Loading from "@/components/Loading"
+import { orderDummyData } from "@/assets/assets"
+
+export default function StoreOrders() {
+    const [orders, setOrders] = useState([])
+    const [loading, setLoading] = useState(true)
+    const [selectedOrder, setSelectedOrder] = useState(null)
+    const [isModalOpen, setIsModalOpen] = useState(false)
+
+
+    const fetchOrders = async () => {
+       setOrders(orderDummyData)
+       setLoading(false)
+    }
+
+    const updateOrderStatus = async (orderId, status) => {
+        // Logic to update the status of an order
+
+
+    }
+
+    const openModal = (order) => {
+        setSelectedOrder(order)
+        setIsModalOpen(true)
+    }
+
+    const closeModal = () => {
+        setSelectedOrder(null)
+        setIsModalOpen(false)
+    }
+
+    useEffect(() => {
+        fetchOrders()
+    }, [])
+
+    if (loading) return <Loading />
+
+    return (
+        <>
+            <h1 className="text-2xl text-slate-500 mb-5">Store <span className="text-slate-800 font-medium">Orders</span></h1>
+            {orders.length === 0 ? (
+                <p>No orders found</p>
+            ) : (
+                <div className="overflow-x-auto max-w-4xl rounded-md shadow border border-gray-200">
+                    <table className="w-full text-sm text-left text-gray-600">
+                        <thead className="bg-gray-50 text-gray-700 text-xs uppercase tracking-wider">
+                            <tr>
+                                {["Sr. No.", "Customer", "Total", "Payment", "Coupon", "Status", "Date"].map((heading, i) => (
+                                    <th key={i} className="px-4 py-3">{heading}</th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-100">
+                            {orders.map((order, index) => (
+                                <tr
+                                    key={order.id}
+                                    className="hover:bg-gray-50 transition-colors duration-150 cursor-pointer"
+                                    onClick={() => openModal(order)}
+                                >
+                                    <td className="pl-6 text-green-600" >
+                                        {index + 1}
+                                    </td>
+                                    <td className="px-4 py-3">{order.user?.name}</td>
+                                    <td className="px-4 py-3 font-medium text-slate-800">${order.total}</td>
+                                    <td className="px-4 py-3">{order.paymentMethod}</td>
+                                    <td className="px-4 py-3">
+                                        {order.isCouponUsed ? (
+                                            <span className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">
+                                                {order.coupon?.code}
+                                            </span>
+                                        ) : (
+                                            "—"
+                                        )}
+                                    </td>
+                                    <td className="px-4 py-3" onClick={(e) => { e.stopPropagation() }}>
+                                        <select
+                                            value={order.status}
+                                            onChange={e => updateOrderStatus(order.id, e.target.value)}
+                                            className="border-gray-300 rounded-md text-sm focus:ring focus:ring-blue-200"
+                                        >
+                                            <option value="ORDER_PLACED">ORDER_PLACED</option>
+                                            <option value="PROCESSING">PROCESSING</option>
+                                            <option value="SHIPPED">SHIPPED</option>
+                                            <option value="DELIVERED">DELIVERED</option>
+                                        </select>
+                                    </td>
+                                    <td className="px-4 py-3 text-gray-500">
+                                        {new Date(order.createdAt).toLocaleString()}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+
+            {/* Modal */}
+            {isModalOpen && selectedOrder && (
+                <div onClick={closeModal} className="fixed inset-0 flex items-center justify-center bg-black/50 text-slate-700 text-sm backdrop-blur-xs z-50" >
+                    <div onClick={e => e.stopPropagation()} className="bg-white rounded-lg shadow-lg max-w-2xl w-full p-6 relative">
+                        <h2 className="text-xl font-semibold text-slate-900 mb-4 text-center">
+                            Order Details
+                        </h2>
+
+                        {/* Customer Details */}
+                        <div className="mb-4">
+                            <h3 className="font-semibold mb-2">Customer Details</h3>
+                            <p><span className="text-green-700">Name:</span> {selectedOrder.user?.name}</p>
+                            <p><span className="text-green-700">Email:</span> {selectedOrder.user?.email}</p>
+                            <p><span className="text-green-700">Phone:</span> {selectedOrder.address?.phone}</p>
+                            <p><span className="text-green-700">Address:</span> {`${selectedOrder.address?.street}, ${selectedOrder.address?.city}, ${selectedOrder.address?.state}, ${selectedOrder.address?.zip}, ${selectedOrder.address?.country}`}</p>
+                        </div>
+
+                        {/* Products */}
+                        <div className="mb-4">
+                            <h3 className="font-semibold mb-2">Products</h3>
+                            <div className="space-y-2">
+                                {selectedOrder.orderItems.map((item, i) => (
+                                    <div key={i} className="flex items-center gap-4 border border-slate-100 shadow rounded p-2">
+                                        <img
+                                            src={item.product.images?.[0].src || item.product.images?.[0]}
+                                            alt={item.product?.name}
+                                            className="w-16 h-16 object-cover rounded"
+                                        />
+                                        <div className="flex-1">
+                                            <p className="text-slate-800">{item.product?.name}</p>
+                                            <p>Qty: {item.quantity}</p>
+                                            <p>Price: ${item.price}</p>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Payment & Status */}
+                        <div className="mb-4">
+                            <p><span className="text-green-700">Payment Method:</span> {selectedOrder.paymentMethod}</p>
+                            <p><span className="text-green-700">Paid:</span> {selectedOrder.isPaid ? "Yes" : "No"}</p>
+                            {selectedOrder.isCouponUsed && (
+                                <p><span className="text-green-700">Coupon:</span> {selectedOrder.coupon.code} ({selectedOrder.coupon.discount}% off)</p>
+                            )}
+                            <p><span className="text-green-700">Status:</span> {selectedOrder.status}</p>
+                            <p><span className="text-green-700">Order Date:</span> {new Date(selectedOrder.createdAt).toLocaleString()}</p>
+                        </div>
+
+                        {/* Actions */}
+                        <div className="flex justify-end">
+                            <button onClick={closeModal} className="px-4 py-2 bg-slate-200 rounded hover:bg-slate-300" >
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    )
+}
diff --git a/app/wholesale/page.jsx b/app/wholesale/page.jsx
new file mode 100644
index 00000000..58189357
--- /dev/null
+++ b/app/wholesale/page.jsx
@@ -0,0 +1,92 @@
+'use client'
+import { dummyWholesaleDashboardData } from "@/assets/assets" // wholesale data
+import Loading from "@/components/Loading"
+import { CircleDollarSignIcon, ShoppingBasketIcon, StarIcon, TagsIcon } from "lucide-react"
+import Image from "next/image"
+import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
+
+export default function Dashboard() {
+
+    const currency = process.env.NEXT_PUBLIC_CURRENCY_SYMBOL || '$'
+    const router = useRouter()
+
+    const [loading, setLoading] = useState(true)
+    const [dashboardData, setDashboardData] = useState({
+        totalProducts: 0,
+        totalEarnings: 0,
+        totalOrders: 0,
+        ratings: [],
+    })
+
+    const dashboardCardsData = [
+        { title: 'Total Products', value: dashboardData.totalProducts, icon: ShoppingBasketIcon },
+        { title: 'Total Earnings', value: currency + dashboardData.totalEarnings, icon: CircleDollarSignIcon },
+        { title: 'Total Orders', value: dashboardData.totalOrders, icon: TagsIcon },
+        { title: 'Total Ratings', value: dashboardData.ratings.length, icon: StarIcon },
+    ]
+
+    const fetchDashboardData = async () => {
+        setDashboardData(dummyWholesaleDashboardData)
+        setLoading(false)
+    }
+
+    useEffect(() => {
+        fetchDashboardData()
+    }, [])
+
+    if (loading) return <Loading />
+
+    return (
+        <div className="text-slate-500 mb-28">
+            <h1 className="text-2xl">Wholesale Seller <span className="text-slate-800 font-medium">Dashboard</span></h1>
+
+            <div className="flex flex-wrap gap-5 my-10 mt-4">
+                {
+                    dashboardCardsData.map((card, index) => (
+                        <div key={index} className="flex items-center gap-11 border border-slate-200 p-3 px-6 rounded-lg">
+                            <div className="flex flex-col gap-3 text-xs">
+                                <p>{card.title}</p>
+                                <b className="text-2xl font-medium text-slate-700">{card.value}</b>
+                            </div>
+                            <card.icon size={50} className=" w-11 h-11 p-2.5 text-slate-400 bg-slate-100 rounded-full" />
+                        </div>
+                    ))
+                }
+            </div>
+
+            <h2>Total Reviews</h2>
+
+            <div className="mt-5">
+                {
+                    dashboardData.ratings.map((review, index) => (
+                        <div key={index} className="flex max-sm:flex-col gap-5 sm:items-center justify-between py-6 border-b border-slate-200 text-sm text-slate-600 max-w-4xl">
+                            <div>
+                                <div className="flex gap-3">
+                                    <Image src={review.user.image} alt="" className="w-10 aspect-square rounded-full" width={100} height={100} />
+                                    <div>
+                                        <p className="font-medium">{review.user.name}</p>
+                                        <p className="font-light text-slate-500">{new Date(review.createdAt).toDateString()}</p>
+                                    </div>
+                                </div>
+                                <p className="mt-3 text-slate-500 max-w-xs leading-6">{review.review}</p>
+                            </div>
+                            <div className="flex flex-col justify-between gap-6 sm:items-end">
+                                <div className="flex flex-col sm:items-end">
+                                    <p className="text-slate-400">{review.product?.category}</p>
+                                    <p className="font-medium">{review.product?.name}</p>
+                                    <div className='flex items-center'>
+                                        {Array(5).fill('').map((_, index) => (
+                                            <StarIcon key={index} size={17} className='text-transparent mt-0.5' fill={review.rating >= index + 1 ? "#00C950" : "#D1D5DB"} />
+                                        ))}
+                                    </div>
+                                </div>
+                                <button onClick={() => router.push(`/wholesale/product/${review.product.id}`)} className="bg-slate-100 px-5 py-2 hover:bg-slate-200 rounded transition-all">View Product</button>
+                            </div>
+                        </div>
+                    ))
+                }
+            </div>
+        </div>
+    )
+}
diff --git a/assets/assets.js b/assets/assets.js
index ff900041..93ca7727 100644
--- a/assets/assets.js
+++ b/assets/assets.js
@@ -61,6 +61,36 @@ export const dummyStoreData = {
     }
 }
 
+export const dummyWholesaleDashboardData = {
+    ratings: dummyRatingsData,
+    totalOrders: 2,
+    totalEarnings: 636,
+    totalProducts: 5
+};
+
+export const dummyWholesaleData = {
+    id: "wholesale_1",
+    userId: "user_1",
+    name: "Wholesale Hub",
+    description: "At Wholesale Hub, we offer bulk products at great prices. Our goal is to simplify your buying experience with quality products in large quantities.",
+    username: "wholesalehub",
+    address: "1st Floor, Wholesale Hub, Main Building, 456 Market St, B Sector, NY, US",
+    status: "approved",
+    isActive: true,
+    logo: gs_logo, // can use same logo or another image if you want
+    email: "wholesalehub@example.com",
+    contact: "+0 9876543210",
+    createdAt: "2025-09-04T09:04:16.189Z",
+    updatedAt: "2025-09-04T09:04:44.273Z",
+    user: {
+        id: "user_31dOriXqC4TATvc0brIhlYbwwc5",
+        name: "Great Stack",
+        email: "user.greatstack@gmail.com",
+        image: gs_logo,
+    }
+};
+
+
 export const productDummyData = [
     {
         id: "prod_1",
@@ -68,6 +98,7 @@ export const productDummyData = [
         description: "Modern table lamp with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty. Enhance your audio experience with this earbuds. Indulge yourself in a world of pure sound with 50 hours of uninterrupted playtime. Equipped with the cutting-edge Zen Mode Tech ENC and BoomX Tech, prepare to be enthralled by a symphony of crystal-clear melodies.",
         mrp: 40,
         price: 29,
+        quantity: 5,
         images: [product_img1, product_img2, product_img3, product_img4],
         category: "Decoration",
         storeId: "seller_1",
@@ -83,6 +114,7 @@ export const productDummyData = [
         description: "Smart speaker with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty.",
         mrp: 50,
         price: 29,
+        quantity: 3,
         images: [product_img2],
         storeId: "seller_1",
         inStock: true,
@@ -98,6 +130,7 @@ export const productDummyData = [
         description: "Smart watch with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty.",
         mrp: 60,
         price: 29,
+        quantity: 2,
         images: [product_img3],
         storeId: "seller_1",
         inStock: true,
@@ -113,6 +146,7 @@ export const productDummyData = [
         description: "Wireless headphones with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty.",
         mrp: 70,
         price: 29,
+        quantity: 4,
         images: [product_img4],
         storeId: "seller_1",
         inStock: true,
@@ -128,6 +162,7 @@ export const productDummyData = [
         description: "Smart watch with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty.",
         mrp: 49,
         price: 29,
+        quantity: 1,
         images: [product_img5],
         storeId: "seller_1",
         inStock: true,
@@ -143,6 +178,7 @@ export const productDummyData = [
         description: "Security Camera with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty.",
         mrp: 59,
         price: 29,
+        quantity: 4,
         images: [product_img6],
         storeId: "seller_1",
         inStock: true,
@@ -158,6 +194,7 @@ export const productDummyData = [
         description: "Smart Pen for iPad with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty.",
         mrp: 89,
         price: 29,
+        quantity: 4,
         images: [product_img7],
         storeId: "seller_1",
         inStock: true,
@@ -173,6 +210,7 @@ export const productDummyData = [
         description: "Home Theater with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty.",
         mrp: 99,
         price: 29,
+        quantity: 1,
         images: [product_img8],
         storeId: "seller_1",
         inStock: true,
@@ -188,6 +226,7 @@ export const productDummyData = [
         description: "Apple Wireless Earbuds with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty.",
         mrp: 89,
         price: 29,
+        quantity: 2,
         images: [product_img9],
         storeId: "seller_1",
         inStock: true,
@@ -203,6 +242,7 @@ export const productDummyData = [
         description: "Apple Smart Watch with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty.",
         mrp: 179,
         price: 29,
+        quantity: 6,
         images: [product_img10],
         storeId: "seller_1",
         inStock: true,
@@ -218,6 +258,7 @@ export const productDummyData = [
         description: "RGB Gaming Mouse with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty.",
         mrp: 39,
         price: 29,
+        quantity: 8,
         images: [product_img11],
         storeId: "seller_1",
         inStock: true,
@@ -233,6 +274,7 @@ export const productDummyData = [
         description: "Smart Home Cleaner with a sleek design. It's perfect for any room. It's made of high-quality materials and comes with a lifetime warranty.",
         mrp: 199,
         price: 29,
+        quantity: 10,
         images: [product_img12],
         storeId: "seller_1",
         inStock: true,
@@ -284,7 +326,7 @@ export const orderDummyData = [
     {
         id: "cmemm75h5001jtat89016h1p3",
         total: 214.2,
-        status: "DELIVERED",
+        status: "PROCESSING",
         userId: "user_31dQbH27HVtovbs13X2cmqefddM",
         storeId: "cmemkqnzm000htat8u7n8cpte",
         addressId: "cmemm6g95001ftat8omv9b883",
diff --git a/assets/pencil.png b/assets/pencil.png
new file mode 100644
index 00000000..d9e86432
Binary files /dev/null and b/assets/pencil.png differ
diff --git a/changes.txt b/changes.txt
new file mode 100644
index 00000000..a52f3fe4
--- /dev/null
+++ b/changes.txt
@@ -0,0 +1,2 @@
+adding quantity for adding product for wholesaler and  retialer page //add product page
+adding stock left in the manage product page//
diff --git a/components/EditProductModal.jsx b/components/EditProductModal.jsx
new file mode 100644
index 00000000..8dcb3649
--- /dev/null
+++ b/components/EditProductModal.jsx
@@ -0,0 +1,140 @@
+// src/components/EditProductModal.jsx (Grey Focus Border Fix)
+
+'use client';
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+
+export default function EditProductModal({ product, currency, onClose, onSave }) {
+    
+    const [formData, setFormData] = useState({
+        mrp: product.mrp,
+        price: product.price,
+        quantity: product.quantity,
+    });
+
+    useEffect(() => {
+        setFormData({
+            mrp: product.mrp,
+            price: product.price,
+            quantity: product.quantity,
+        });
+    }, [product]); 
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ 
+            ...prev, 
+            [name]: +value 
+        }));
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        
+        if (formData.price > formData.mrp) {
+            alert("Discounted Price cannot be higher than the MRP/Original Price.");
+            return;
+        }
+        
+        onSave({ id: product.id, ...formData });
+    };
+
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        window.addEventListener('keydown', handleEscape);
+        return () => window.removeEventListener('keydown', handleEscape);
+    }, [onClose]);
+
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30 backdrop-blur-sm" onClick={onClose}>
+            
+            <div 
+                className="bg-white p-6 rounded-lg shadow-2xl w-full max-w-md mx-4 transform transition-all duration-300 scale-100 opacity-100" 
+                onClick={(e) => e.stopPropagation()} 
+            >
+                <div className="flex justify-between items-center border-b pb-3 mb-4">
+                    <h2 className="text-xl font-semibold text-slate-800">Edit Product: {product.name}</h2>
+                    <button onClick={onClose} className="text-slate-400 hover:text-slate-600 p-1 rounded-full hover:bg-gray-100 transition">
+                        <X size={20} />
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-4">
+                    
+                    {/* MRP/Original Price Input */}
+                    <div>
+                        <label htmlFor="mrp" className="block text-sm font-medium text-slate-700">MRP / Original Price ({currency})</label>
+                        <input
+                            type="number"
+                            id="mrp"
+                            name="mrp"
+                            value={formData.mrp}
+                            onChange={handleChange}
+                            min="0"
+                            step="0.01"
+                            // 🌟 FOCUS FIX: Changed to focus:border-slate-400 focus:ring-slate-400
+                            className="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-slate-400 focus:ring-1 focus:ring-slate-400 p-2"
+                            required
+                        />
+                    </div>
+
+                    {/* Price After Discount Input */}
+                    <div>
+                        <label htmlFor="price" className="block text-sm font-medium text-slate-700">Discounted Price ({currency})</label>
+                        <input
+                            type="number"
+                            id="price"
+                            name="price"
+                            value={formData.price}
+                            onChange={handleChange}
+                            min="0"
+                            step="0.01"
+                            // 🌟 FOCUS FIX: Changed to focus:border-slate-400 focus:ring-slate-400
+                            className="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-slate-400 focus:ring-1 focus:ring-slate-400 p-2"
+                            required
+                        />
+                    </div>
+                    
+                    {/* Quantity Input */}
+                    <div>
+                        <label htmlFor="quantity" className="block text-sm font-medium text-slate-700">Quantity in Stock</label>
+                        <input
+                            type="number"
+                            id="quantity"
+                            name="quantity"
+                            value={formData.quantity}
+                            onChange={handleChange}
+                            min="0"
+                            step="1"
+                            // 🌟 FOCUS FIX: Changed to focus:border-slate-400 focus:ring-slate-400
+                            className="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-slate-400 focus:ring-1 focus:ring-slate-400 p-2"
+                            required
+                        />
+                    </div>
+                    
+                    {/* Action Buttons */}
+                    <div className="flex justify-end space-x-3 pt-4">
+                        <button 
+                            type="button" 
+                            onClick={onClose} 
+                            className="px-4 py-2 text-sm font-medium text-slate-700 bg-gray-200 rounded-md hover:bg-gray-300 transition"
+                        >
+                            Cancel
+                        </button>
+                        <button 
+                            type="submit" 
+                            className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 transition"
+                        >
+                            Save Changes
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/OrderItem.jsx b/components/OrderItem.jsx
index 29b68410..2063def9 100644
--- a/components/OrderItem.jsx
+++ b/components/OrderItem.jsx
@@ -5,6 +5,7 @@ import { useSelector } from "react-redux";
 import Rating from "./Rating";
 import { useState } from "react";
 import RatingModal from "./RatingModal";
+import OrderStatusTracker from "./OrderStatusTracker"; // 👈 1. Import the new tracker component
 
 const OrderItem = ({ order }) => {
 
@@ -13,6 +14,11 @@ const OrderItem = ({ order }) => {
 
     const { ratings } = useSelector(state => state.rating);
 
+    // Count the total number of columns in the main header (4 visible + 1 or more implicit/responsive columns)
+    // Based on the <thead> in your Orders.jsx: Product, Total Price, Address, Status = 4 columns.
+    // We'll use '4' for colspan in the main section, and '5' for the mobile section as you did.
+    const COLSPAN_COUNT = 4; // Assuming 4 columns in the main desktop view
+
     return (
         <>
             <tr className="text-sm">
@@ -67,7 +73,13 @@ const OrderItem = ({ order }) => {
                     </div>
                 </td>
             </tr>
-            {/* Mobile */}
+            {/* 🔽 2. Status Tracker Row (Visible on Desktop and Mobile) 🔽 */}
+            <tr>
+                <td colSpan={COLSPAN_COUNT} className="pt-0 pb-12 max-sm:pb-6 max-sm:px-4">
+                    <OrderStatusTracker currentStatus={order.status} />
+                </td>
+            </tr>
+            {/* Mobile (Original mobile row is kept as is, but now followed by the tracker) */}
             <tr className="md:hidden">
                 <td colSpan={5}>
                     <p>{order.address.name}, {order.address.street}</p>
@@ -81,8 +93,9 @@ const OrderItem = ({ order }) => {
                     </div>
                 </td>
             </tr>
+            {/* Final Separator */}
             <tr>
-                <td colSpan={4}>
+                <td colSpan={COLSPAN_COUNT}>
                     <div className="border-b border-slate-300 w-6/7 mx-auto" />
                 </td>
             </tr>
@@ -90,4 +103,4 @@ const OrderItem = ({ order }) => {
     )
 }
 
-export default OrderItem
\ No newline at end of file
+export default OrderItems
\ No newline at end of file
diff --git a/components/OrderStatusTracker.jsx b/components/OrderStatusTracker.jsx
new file mode 100644
index 00000000..230399cb
--- /dev/null
+++ b/components/OrderStatusTracker.jsx
@@ -0,0 +1,66 @@
+// src/components/OrderStatusTracker.jsx
+
+const orderSteps = [
+    { key: 'placed', label: 'Order Placed' },
+    { key: 'processing', label: 'Processing' },
+    { key: 'shipped', label: 'Shipped' },
+    { key: 'delivered', label: 'Delivered' },
+];
+
+export default function OrderStatusTracker({ currentStatus }) {
+
+    const normalizedStatus = currentStatus?.toLowerCase().replace(/\s/g, '') || '';
+    const currentStatusIndex = orderSteps.findIndex(s => s.key === normalizedStatus);
+
+    // Correct: fills to center of dot
+    const totalSteps = orderSteps.length - 1;
+    const completionPercentage =
+        currentStatusIndex < 0 ? 0 : (currentStatusIndex / totalSteps) * 100;
+
+    return (
+        <div className="w-full pt-6">
+            <div className="relative flex justify-between items-center mb-6">
+
+                {/* Background Line */}
+                <div className="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2 rounded-full"></div>
+
+                {/* Filled Line (on top; now aligns correctly) */}
+                <div
+                    className="absolute top-1/2 left-0 h-1 bg-green-500 rounded-full -translate-y-1/2 transition-all duration-500"
+                    style={{ width: `${completionPercentage}%` }}
+                />
+
+                {/* Status Dots + Labels */}
+                {orderSteps.map((step, index) => {
+                    const isCompleted = index <= currentStatusIndex;
+                    const isActive = index === currentStatusIndex;
+
+                    return (
+                        <div key={step.key} className="flex flex-col items-center z-10 w-1/4">
+
+                            {/* Dot */}
+                            <div
+                                className={`
+                                    w-5 h-5 rounded-full border-2 
+                                    transition-all duration-300
+                                    ${isCompleted ? "border-green-600 bg-white" : "border-gray-300 bg-gray-200"}
+                                    ${isActive ? "ring-4 ring-green-200/60 shadow" : ""}
+                                `}
+                            />
+
+                            {/* Label (increased spacing ↓↓↓) */}
+                            <span
+                                className={`
+                                    mt-4 text-sm text-center font-medium transition-colors duration-300
+                                    ${isCompleted ? "text-green-700" : "text-slate-500"}
+                                `}
+                            >
+                                {step.label}
+                            </span>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
diff --git a/components/RecommendedProducts.jsx b/components/RecommendedProducts.jsx
new file mode 100644
index 00000000..61e98c61
--- /dev/null
+++ b/components/RecommendedProducts.jsx
@@ -0,0 +1,35 @@
+'use client'
+import React from 'react'
+import Title from './Title'
+import ProductCard from './ProductCard'
+import { useSelector } from 'react-redux'
+
+const RecommendedProducts = () => {
+    const displayQuantity = 4;
+    const products = useSelector(state => state.product.list);
+
+    // Very simple placeholder logic for now:
+    // Just pick 4 random products until backend exists.
+    const recommendations = [...products]
+        .sort(() => Math.random() - 0.5)
+        .slice(0, displayQuantity);
+
+    return (
+        <div className='px-6 my-30 max-w-6xl mx-auto'>
+            <Title
+                title='Recommended For You'
+                description={`Showing ${recommendations.length} recommendations`}
+                href='/shop'
+            />
+            
+            <div className='mt-12 grid grid-cols-2 sm:flex flex-wrap gap-6 justify-between'>
+                {recommendations.map((product, index) => (
+                    <ProductCard key={index} product={product} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default RecommendedProducts;
+
diff --git a/components/wholesale/WStoreLayout.jsx b/components/wholesale/WStoreLayout.jsx
new file mode 100644
index 00000000..6333fb88
--- /dev/null
+++ b/components/wholesale/WStoreLayout.jsx
@@ -0,0 +1,48 @@
+'use client'
+import { useEffect, useState } from "react"
+import Loading from "../Loading"
+import Link from "next/link"
+import { ArrowRightIcon } from "lucide-react"
+import WStoreNavbar from "./WStoreNavbar"
+import WStoreSidebar from "./WStoreSidebar"
+import { dummyWholesaleData } from "@/assets/assets"  // updated for wholesale
+
+const WStoreLayout = ({ children }) => {
+
+    const [isSeller, setIsSeller] = useState(false)
+    const [loading, setLoading] = useState(true)
+    const [storeInfo, setStoreInfo] = useState(null)
+
+    const fetchIsSeller = async () => {
+        setIsSeller(true)
+        setStoreInfo(dummyWholesaleData)  // wholesale data
+        setLoading(false)
+    }
+
+    useEffect(() => {
+        fetchIsSeller()
+    }, [])
+
+    return loading ? (
+        <Loading />
+    ) : isSeller ? (
+        <div className="flex flex-col h-screen">
+            <WStoreNavbar />
+            <div className="flex flex-1 items-start h-full overflow-y-scroll no-scrollbar">
+                <WStoreSidebar storeInfo={storeInfo} />
+                <div className="flex-1 h-full p-5 lg:pl-12 lg:pt-12 overflow-y-scroll">
+                    {children}
+                </div>
+            </div>
+        </div>
+    ) : (
+        <div className="min-h-screen flex flex-col items-center justify-center text-center px-6">
+            <h1 className="text-2xl sm:text-4xl font-semibold text-slate-400">You are not authorized to access this page</h1>
+            <Link href="/" className="bg-slate-700 text-white flex items-center gap-2 mt-8 p-2 px-6 max-sm:text-sm rounded-full">
+                Go to home <ArrowRightIcon size={18} />
+            </Link>
+        </div>
+    )
+}
+
+export default WStoreLayout
diff --git a/components/wholesale/WStoreNavbar.jsx b/components/wholesale/WStoreNavbar.jsx
new file mode 100644
index 00000000..a8a84d65
--- /dev/null
+++ b/components/wholesale/WStoreNavbar.jsx
@@ -0,0 +1,21 @@
+'use client'
+import Link from "next/link"
+
+const WStoreNavbar = () => {
+
+    return (
+        <div className="flex items-center justify-between px-12 py-3 border-b border-slate-200 transition-all">
+            <Link href="/" className="relative text-4xl font-semibold text-slate-700">
+                <span className="text-green-600">go</span>cart<span className="text-green-600 text-5xl leading-0">.</span>
+                <p className="absolute text-xs font-semibold -top-1 -right-11 px-3 p-0.5 rounded-full flex items-center gap-2 text-white bg-green-500">
+                    Wholesale
+                </p>
+            </Link>
+            <div className="flex items-center gap-3">
+                <p>Hi, Seller</p>
+            </div>
+        </div>
+    )
+}
+
+export default WStoreNavbar
diff --git a/components/wholesale/WStoreSidebar.jsx b/components/wholesale/WStoreSidebar.jsx
new file mode 100644
index 00000000..3d3ab1ab
--- /dev/null
+++ b/components/wholesale/WStoreSidebar.jsx
@@ -0,0 +1,40 @@
+'use client'
+import { usePathname } from "next/navigation"
+import { HomeIcon, LayoutListIcon, SquarePenIcon, SquarePlusIcon } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+
+const WStoreSidebar = ({storeInfo}) => {
+
+    const pathname = usePathname()
+
+    const sidebarLinks = [
+        { name: 'Dashboard', href: '/wholesale', icon: HomeIcon },
+        { name: 'Add Product', href: '/wholesale/add-product', icon: SquarePlusIcon },
+        { name: 'Manage Product', href: '/wholesale/manage-product', icon: SquarePenIcon },
+        { name: 'Orders', href: '/wholesale/orders', icon: LayoutListIcon },
+    ]
+
+    return (
+        <div className="inline-flex h-full flex-col gap-5 border-r border-slate-200 sm:min-w-60">
+            <div className="flex flex-col gap-3 justify-center items-center pt-8 max-sm:hidden">
+                <Image className="w-14 h-14 rounded-full shadow-md" src={storeInfo?.logo} alt="" width={80} height={80} />
+                <p className="text-slate-700">{storeInfo?.name}</p>
+            </div>
+
+            <div className="max-sm:mt-6">
+                {
+                    sidebarLinks.map((link, index) => (
+                        <Link key={index} href={link.href} className={`relative flex items-center gap-3 text-slate-500 hover:bg-slate-50 p-2.5 transition ${pathname === link.href && 'bg-slate-100 sm:text-slate-600'}`}>
+                            <link.icon size={18} className="sm:ml-5" />
+                            <p className="max-sm:hidden">{link.name}</p>
+                            {pathname === link.href && <span className="absolute bg-green-500 right-0 top-1.5 bottom-1.5 w-1 sm:w-1.5 rounded-l"></span>}
+                        </Link>
+                    ))
+                }
+            </div>
+        </div>
+    )
+}
+
+export default WStoreSidebar
diff --git a/gocart-clone b/gocart-clone
new file mode 160000
index 00000000..8f7a4400
--- /dev/null
+++ b/gocart-clone
@@ -0,0 +1 @@
+Subproject commit 8f7a440020e7bbb062df7d9cb087d146ba34adfc
diff --git a/package-lock.json b/package-lock.json
index 9bef31fd..4f448eea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1164,7 +1164,8 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/d3-array": {
       "version": "3.2.4",
@@ -1832,6 +1833,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
       "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1841,6 +1843,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
       "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -1926,7 +1929,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",