diff --git a/package-lock.json b/package-lock.json
index 150255d..e5ed72f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11049,6 +11049,12 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/synchronous-promise": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz",
+      "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
+      "dev": true
+    },
     "node_modules/synckit": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.1.tgz",
diff --git a/src/__test__/dashBoard/Categories.test.tsx b/src/__test__/dashBoard/Categories.test.tsx
new file mode 100644
index 0000000..a60f2fa
--- /dev/null
+++ b/src/__test__/dashBoard/Categories.test.tsx
@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { MemoryRouter } from 'react-router-dom';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import Category from '@/components/dashBoard/Category';
+import categoriesReducer from '@/features/Products/categorySlice';
+
+const renderWithProviders = (ui: React.ReactElement) => {
+  const store = configureStore({ reducer: { categories: categoriesReducer } });
+  return render(
+    <Provider store={store}>
+      <MemoryRouter>{ui}</MemoryRouter>
+    </Provider>
+  );
+};
+
+describe('Category Component', () => {
+  let mock: MockAdapter;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  it('should render the component with initial state', () => {
+    renderWithProviders(<Category />);
+    expect(screen.getByText(/Categories/i)).toBeInTheDocument();
+  });
+
+  it('renders Categories component with category icons', async () => {
+    mock.onGet('/api/categories').reply(200, [
+      {
+        id: 1,
+        name: 'Category 1',
+        description: 'Description 1',
+        icon: 'https://example.com/icon1.png',
+      },
+      {
+        id: 2,
+        name: 'Category 2',
+        description: 'Description 2',
+        icon: 'https://example.com/icon2.png',
+      },
+    ]);
+
+    renderWithProviders(<Category />);
+
+    const icons = await screen.findAllByRole('img');
+    icons.forEach((icon) => {
+      expect(icon).toHaveAttribute('alt');
+    });
+  });
+
+  it('paginates categories', async () => {
+    mock.onGet('/api/categories').reply(
+      200,
+      Array.from({ length: 20 }, (_, i) => ({
+        id: i + 1,
+        name: `Category ${i + 1}`,
+        description: `Description ${i + 1}`,
+        icon: `https://example.com/icon${i + 1}.png`,
+      }))
+    );
+
+    renderWithProviders(<Category />);
+
+    const nextPageButton = await screen.findByRole('button', { name: /next/i });
+    fireEvent.click(nextPageButton);
+    expect(nextPageButton).toBeInTheDocument();
+  });
+
+  it('should render the component with initial state', async () => {
+    renderWithProviders(<Category />);
+    await waitFor(() =>
+      expect(screen.getByText(/Categories/i)).toBeInTheDocument()
+    );
+  });
+
+  it('paginates categories', async () => {
+    mock.onGet('/api/categories').reply(
+      200,
+      Array.from({ length: 20 }, (_, i) => ({
+        id: i + 1,
+        name: `Category ${i + 1}`,
+        description: `Description ${i + 1}`,
+        icon: `https://example.com/icon${i + 1}.png`,
+      }))
+    );
+
+    renderWithProviders(<Category />);
+
+    const nextPageButton = await screen.findByRole('button', { name: /next/i });
+    fireEvent.click(nextPageButton);
+    expect(nextPageButton).toBeInTheDocument();
+  });
+
+  it('should display validation errors if form is submitted with invalid data', async () => {
+    renderWithProviders(<Category />);
+
+    // Open the form
+    fireEvent.click(screen.getByText(/Add Category/i));
+
+    // Trigger form submission
+    fireEvent.click(screen.getByText(/Save/i));
+
+    // Wait for validation errors to appear
+    await waitFor(() => {
+      expect(screen.getByText(/Name/i)).toBeInTheDocument();
+      expect(screen.getByText(/Icon/i)).toBeInTheDocument();
+      expect(screen.getByText(/Description/i)).toBeInTheDocument();
+    });
+  });
+
+  it('should submit form and handle API response', async () => {
+    mock.onPost(`${import.meta.env.VITE_BASE_URL}/category/`).reply(201);
+
+    renderWithProviders(<Category />);
+
+    // Open the form
+    fireEvent.click(screen.getByText(/Add Category/i));
+
+    // Fill out the form
+    fireEvent.change(screen.getByPlaceholderText(/Name of the category/i), {
+      target: { value: 'New Category' },
+    });
+    fireEvent.change(
+      screen.getByPlaceholderText(/Description of the category/i),
+      {
+        target: { value: 'Category description' },
+      }
+    );
+    fireEvent.change(screen.getByPlaceholderText(/URL of the category icon/i), {
+      target: { value: 'https://example.com/icon.png' },
+    });
+
+    fireEvent.click(screen.getByText(/Save/i));
+
+    await waitFor(() => {
+      expect(mock.history.post.length).toBe(1);
+    });
+  });
+});
diff --git a/src/__test__/dashBoard/Seller.test.tsx b/src/__test__/dashBoard/Seller.test.tsx
index db47d0a..12f9118 100644
--- a/src/__test__/dashBoard/Seller.test.tsx
+++ b/src/__test__/dashBoard/Seller.test.tsx
@@ -1,9 +1,9 @@
 import axios from 'axios';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
 import MockAdapter from 'axios-mock-adapter';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { configureStore } from '@reduxjs/toolkit';
 import Seller from '@/pages/Seller';
 import productReducer from '@/app/Dashboard/AllProductSlices';
@@ -82,42 +82,25 @@ describe('Seller Component', () => {
     expect(screen.getByText('Sellers')).toBeInTheDocument();
   });
 
-  it('should display elements of the table', () => {
-    renderWithProviders(<Seller />);
-
-    expect(screen.getByText(/Image/)).toBeInTheDocument();
-    expect(screen.getByText(/First Name/)).toBeInTheDocument();
-    expect(screen.getByText(/Last Name/)).toBeInTheDocument();
-    expect(screen.getByText(/Email/)).toBeInTheDocument();
-    expect(screen.getByText(/Items Count/)).toBeInTheDocument();
-    expect(screen.getByText(/Date/)).toBeInTheDocument();
-    expect(screen.getByText(/Status/)).toBeInTheDocument();
-    expect(screen.getByText(/Action/)).toBeInTheDocument();
-  });
-
-  it('should filter sellers by search term', async () => {
-    // Mock API response
+  it('should display elements of the table', async () => {
     mock
       .onGet(`${import.meta.env.VITE_BASE_URL}/user/getAllUsers`)
       .reply(200, { users: mockBuyers });
 
-    // Render component
     renderWithProviders(<Seller />);
-
-    // Dispatch fetchBuyers to populate the state
     await store.dispatch(fetchBuyers() as any);
 
-    // Perform search action
-    const searchInput = screen.getByPlaceholderText('Search Seller');
-    fireEvent.change(searchInput, { target: { value: 'Vendor1' } });
-
-    // Check filtered results
-    expect(screen.getByText('Vendor1')).toBeInTheDocument();
-    expect(screen.queryByText('Customer1')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      expect(screen.getByText('Email')).toBeInTheDocument();
+      expect(screen.getByText('Items')).toBeInTheDocument();
+      expect(screen.getByText('Date')).toBeInTheDocument();
+      expect(screen.getByText('Status')).toBeInTheDocument();
+      expect(screen.getByText('Action')).toBeInTheDocument();
+    });
   });
 
   it('should handle loading state', async () => {
-    // Mock API response
     mock
       .onGet(`${import.meta.env.VITE_BASE_URL}/user/getAllUsers`)
       .reply(200, { users: mockBuyers });
@@ -137,7 +120,10 @@ describe('Seller Component', () => {
 
     renderWithProviders(<Seller />);
     await store.dispatch(fetchBuyers() as any);
-    expect(screen.queryByText('Vendor1')).toBeNull();
-    expect(screen.queryByText('Customer1')).toBeNull();
+
+    await waitFor(() => {
+      expect(screen.queryByText('Vendor1')).toBeNull();
+      expect(screen.queryByText('Customer1')).toBeNull();
+    });
   });
 });
diff --git a/src/components/dashBoard/Category.tsx b/src/components/dashBoard/Category.tsx
new file mode 100644
index 0000000..28232b1
--- /dev/null
+++ b/src/components/dashBoard/Category.tsx
@@ -0,0 +1,454 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useDispatch, useSelector } from 'react-redux';
+import { MdOutlineEdit } from 'react-icons/md';
+import { FaRegTrashAlt } from 'react-icons/fa';
+import { IoIosSearch } from 'react-icons/io';
+import * as Yup from 'yup';
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import PuffLoader from 'react-spinners/PuffLoader';
+import CircularPagination from './NavigateonPage';
+import Button from '@/components/form/Button';
+import { showErrorToast, showSuccessToast } from '@/utils/ToastConfig';
+import HSInput from '@/components/form/HSInput';
+import { AppDispatch, RootState } from '@/app/store';
+import { fetchCategories } from '@/features/Products/categorySlice';
+
+interface ICategory {
+  id?: number;
+  name: string;
+  description: string;
+  icon?: string;
+}
+
+function Category() {
+  const dispatch = useDispatch<AppDispatch>();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [deleteModal, setDeleteModal] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<ICategory | null>(
+    null
+  );
+  const [edit, setEdit] = useState(false);
+  const { categories, isLoading } = useSelector(
+    (state: RootState) => state.categories
+  );
+
+  const [visibleCategory, setVisbleCategory] = useState(false);
+
+  useEffect(() => {
+    dispatch(fetchCategories());
+  }, [dispatch]);
+
+  const categoryPerPage = 8;
+  const totalPages = Math.ceil(categories.length / categoryPerPage);
+  const startIndex = (currentPage - 1) * categoryPerPage;
+
+  const paginatedData = categories
+    .filter((category) =>
+      category.description.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+    .slice(startIndex, startIndex + categoryPerPage);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleCancelDelete = () => {
+    setDeleteModal(false);
+    setSelectedCategory(null);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (selectedCategory === null) return;
+
+    try {
+      const response = await axios.delete(
+        `${import.meta.env.VITE_BASE_URL}/category/${selectedCategory.id}`,
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('token')}`,
+          },
+        }
+      );
+      if (response.status === 200) {
+        showSuccessToast(' Deleted sucessfully');
+        dispatch(fetchCategories());
+      }
+    } catch (error) {
+      showErrorToast('Failed to delete category');
+    }
+  };
+
+  const handleEdit = (category: ICategory) => {
+    setEdit(!edit);
+    setSelectedCategory(category);
+  };
+
+  const updateCategory = async (category: ICategory) => {
+    if (!category.id) return;
+    try {
+      const response = await axios.put(
+        `${import.meta.env.VITE_BASE_URL}/category/${category.id}`,
+        {
+          name: category.name,
+          description: category.description,
+          icon: category.icon,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('token')}`,
+          },
+        }
+      );
+      if (response.status === 200) {
+        showSuccessToast(`${category.name} Updated sucessfully`);
+        dispatch(fetchCategories());
+      }
+    } catch (error) {
+      showErrorToast('Failed to update category');
+    }
+  };
+
+  const HandleAddCategory = () => {
+    setVisbleCategory(true);
+  };
+  const showDeleteModal = (category: ICategory) => {
+    setSelectedCategory(category);
+    setDeleteModal(true);
+  };
+
+  const categoryInitialVal = {
+    name: '',
+    icon: '',
+    description: '',
+  };
+  const validationSchemaCategory = Yup.object({
+    name: Yup.string().required('Category name is required'),
+    description: Yup.string().required('Category icon is required'),
+    icon: Yup.string().required('Category description is required'),
+  });
+
+  const onsubmiting = async (
+    values: ICategory,
+    { resetForm }: { resetForm: () => void }
+  ) => {
+    const token = localStorage.getItem('token');
+
+    try {
+      const response = await axios.post(
+        `${import.meta.env.VITE_BASE_URL}/category/`,
+        values,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      if (response.status === 201) {
+        showSuccessToast('Category added successfully');
+        dispatch(fetchCategories());
+        resetForm();
+      }
+    } catch (error) {
+      showErrorToast('Failed to add category');
+    } finally {
+      resetForm();
+    }
+  };
+
+  return (
+    <div className="p-5 max-w-screen-xl">
+      <div className="flex gap-4 items-center py-4">
+        <h1 className="text-2xl font-bold">Categories</h1>
+        <button
+          type="button"
+          onClick={HandleAddCategory}
+          className="border-[2px] border-primary text-primary px-[5px] py-[5px] rounded-md flex justify-center items-center gap-2 text-sm
+                hover:shadow-lg hover:scale-105 transition-all duration-300 ease-in-out hover:bg-primary hover:text-white"
+        >
+          Add Category
+        </button>
+      </div>
+      <div className="mb-4 flex flex-col gap-2 md:flex-row md:justify-between">
+        <ul className="flex gap-4 items-center">
+          <li className="flex gap-2 items-center">
+            <button type="button" className="text-lg">
+              All
+            </button>
+            ({categories.length})
+          </li>
+        </ul>
+        <div className="flex gap-2 border border-gray-500 rounded items-center bg-white p-2">
+          <IoIosSearch size={24} />
+          <input
+            id="searchInput"
+            placeholder="Search category..."
+            type="text"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full outline-none bg-white placeholder:text-gray-400 font-light"
+          />
+        </div>
+      </div>
+
+      {visibleCategory && (
+        <div className="fixed w-screen h-screen flex items-center justify-center z-50 bg-black bg-opacity-50 top-0 left-0">
+          <Formik
+            initialValues={categoryInitialVal}
+            validationSchema={validationSchemaCategory}
+            onSubmit={onsubmiting}
+          >
+            <Form>
+              <div className="w-96 h-auto block items-center justify-center  bg-white rounded-lg p-4">
+                <div className="py-4">
+                  <h1 className="text-xl flex justify-center pb-5 uppercase font-normal">
+                    Add Category
+                  </h1>
+                  <label htmlFor="name">Name</label>
+                  <Field
+                    as={HSInput}
+                    placeholder="Name of the category"
+                    name="name"
+                    type="input"
+                  />
+                  <ErrorMessage
+                    name="name"
+                    component="div"
+                    className="text-redBg"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="description">Description</label>
+                  <Field
+                    as={HSInput}
+                    placeholder="Description of the category"
+                    type="input"
+                    name="description"
+                  />
+                  <ErrorMessage
+                    name="name"
+                    component="div"
+                    className="text-redBg"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="icon">Icon URL</label>
+                  <Field
+                    as={HSInput}
+                    placeholder="URL of the category icon"
+                    type="input"
+                    name="icon"
+                  />
+                  <ErrorMessage
+                    name="name"
+                    component="div"
+                    className="text-redBg"
+                  />
+                </div>
+                <div className="flex items-center justify-center py-7 gap-4 mt-4">
+                  <Button
+                    title="Cancel"
+                    onClick={() => setVisbleCategory(false)}
+                  />
+                  <button
+                    type="submit"
+                    className="bg-primary text-white px-6 py-3 rounded-md flex justify-center items-center gap-2 text-sm active:scale-[.98] active:duration-75 hover:scale-[1.01] ease-in transition-all"
+                  >
+                    Save
+                  </button>
+                </div>
+              </div>
+            </Form>
+          </Formik>
+        </div>
+      )}
+
+      {edit && selectedCategory && (
+        <div className="fixed w-screen h-screen flex items-center justify-center z-50 bg-black bg-opacity-50 top-0 left-0">
+          <div className="w-96 h-auto block items-center justify-center  bg-white rounded-lg p-4">
+            <div className="py-4">
+              <label htmlFor="name">Name</label>
+              <HSInput
+                placeholder="Name of the category"
+                type="input"
+                values={selectedCategory.name}
+                id="name"
+                onChange={(e) =>
+                  setSelectedCategory({
+                    ...selectedCategory,
+                    name: e.target.value,
+                  })
+                }
+              />
+            </div>
+            <div>
+              <label htmlFor="description">Description</label>
+              <HSInput
+                placeholder="Description of the category"
+                type="input"
+                values={selectedCategory.description}
+                onChange={(e) =>
+                  setSelectedCategory({
+                    ...selectedCategory,
+                    description: e.target.value,
+                  })
+                }
+              />
+            </div>
+
+            <div>
+              <label htmlFor="icon">Icon URL</label>
+              {selectedCategory.icon && (
+                <div className="mt-2">
+                  <img
+                    src={selectedCategory.icon}
+                    alt="Icon Preview"
+                    className="w-10 h-6 rounded-md"
+                  />
+                </div>
+              )}
+
+              <HSInput
+                placeholder="URL of the category icon"
+                type="input"
+                values={selectedCategory.icon}
+                onChange={(e) =>
+                  setSelectedCategory({
+                    ...selectedCategory,
+                    icon: e.target.value,
+                  })
+                }
+              />
+            </div>
+            <div className="flex items-center justify-center py-7 gap-4 mt-4">
+              <Button title="Cancel" onClick={() => setEdit(false)} />
+              <Button
+                title="Edit"
+                onClick={() => {
+                  if (selectedCategory) updateCategory(selectedCategory);
+                }}
+                styles="bg-blue-500 text-white"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+      {deleteModal && (
+        <div className="fixed w-screen h-screen flex items-center justify-center z-50 bg-black bg-opacity-50 top-0 left-0">
+          <div className="w-80 h-56 bg-dashgrey rounded-lg">
+            <div className="my-10 ml-5">
+              Are you sure you want to delete this category?
+              <div className="flex justify-center my-1 font-semibold text-primary">
+                <p>{selectedCategory?.name}</p>
+              </div>
+            </div>
+            <div className="flex justify-around items-center">
+              <Button
+                title="Cancel"
+                styles="w-28"
+                onClick={handleCancelDelete}
+              />
+              <Button
+                title="Delete"
+                styles="w-28 bg-red-400"
+                onClick={handleConfirmDelete}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+      {isLoading ? (
+        <div className="md:flex items-center justify-center">
+          <PuffLoader
+            color="#6D31ED"
+            cssOverride={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100vh',
+            }}
+          />
+        </div>
+      ) : (
+        <div className="overflow-x-scroll bg-white p-2">
+          <table className="w-full table-fixed">
+            <thead>
+              <tr className="w-full bg-gray-100 rounded">
+                <th className="w-1/6 px-4 py-2 text-left text-sm uppercase font-normal text-[#565D6D]">
+                  #
+                </th>
+                <th className="w-2/6 px-4 py-2 text-left text-sm uppercase font-normal text-[#565D6D]">
+                  Category
+                </th>
+                <th className="w-2/6 px-4 py-2 text-left text-sm uppercase font-normal text-[#565D6D]">
+                  Icon
+                </th>
+                <th className="w-2/6 px-4 py-2 text-left text-sm uppercase font-normal text-[#565D6D]">
+                  Description
+                </th>
+                <th
+                  className="w-1/6 px-4 py-2 text-center text-sm uppercase font-normal text-[#565D6D]"
+                  colSpan={2}
+                >
+                  Action
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {paginatedData.map((category, index) => (
+                <React.Fragment key={category.id}>
+                  <tr className="hover:bg-gray-100 cursor-pointer font-light border-b py-4">
+                    <td className="w-1/6 px-4 py-2 text-[#0095FF]">
+                      {index + 1 + (currentPage - 1) * categoryPerPage}
+                    </td>
+                    <td className="w-2/6 px-4 py-2">{category.name}</td>
+                    <td className="w-2/6 px-4 py-2">
+                      <div>
+                        <img
+                          src={category.icon}
+                          alt={category.name}
+                          className="w-16 h-8 rounded-md"
+                        />
+                      </div>
+                    </td>
+                    <td className="w-2/6 px-4 py-2">{category.description}</td>
+                    <td className="w-1/6 py-2 text-right">
+                      <button
+                        type="submit"
+                        onClick={() => handleEdit(category)}
+                        className=""
+                      >
+                        <MdOutlineEdit color="black" size={20} />
+                      </button>
+                    </td>
+                    <td className="w-1/6 py-2 text-right">
+                      <button
+                        onClick={() => showDeleteModal(category)}
+                        className="pr-4"
+                        type="submit"
+                      >
+                        <FaRegTrashAlt color="crimson" size={18} />
+                      </button>
+                    </td>
+                  </tr>
+                </React.Fragment>
+              ))}
+            </tbody>
+          </table>
+          <div className="flex flex-row justify-end pt-3">
+            <CircularPagination
+              totalPages={totalPages}
+              currentPage={currentPage}
+              onPageChange={handlePageChange}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Category;
diff --git a/src/components/dashBoard/DashboardSideNav.tsx b/src/components/dashBoard/DashboardSideNav.tsx
index a28db4e..073f3c4 100644
--- a/src/components/dashBoard/DashboardSideNav.tsx
+++ b/src/components/dashBoard/DashboardSideNav.tsx
@@ -49,20 +49,9 @@ const sideBarItems = [
   },
   {
     name: 'seller',
-    icon: <Store className="icon" />,
-    subItems: [
-      {
-        name: 'All Seller',
-        path: '/dashboard/seller',
-        role: ['Admin'],
-      },
-      {
-        name: 'Add New',
-        path: '/dashboard/addSeller',
-        role: ['Admin'],
-      },
-    ],
+    path: '/dashboard/seller',
     role: ['Admin'],
+    icon: <Store className="icon" />,
   },
   {
     name: 'Products',
@@ -79,7 +68,7 @@ const sideBarItems = [
         role: ['Vendor'],
       },
       {
-        path: '/products/categories',
+        path: '/dashboard/category',
         name: 'Categories',
         role: ['Admin'],
       },
diff --git a/src/pages/Seller.tsx b/src/pages/Seller.tsx
index a2bb6d8..2635b4d 100644
--- a/src/pages/Seller.tsx
+++ b/src/pages/Seller.tsx
@@ -1,19 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import axios from 'axios';
-import {
-  ChevronLeft,
-  ChevronRight,
-  Power,
-  RefreshCcw,
-  Search,
-} from 'lucide-react';
+import { ChevronLeft, ChevronRight, Power, Search } from 'lucide-react';
 import PuffLoader from 'react-spinners/PuffLoader';
 import { RootState, AppDispatch } from '@/app/store';
 import { fetchProducts } from '@/app/Dashboard/AllProductSlices';
 import { fetchBuyers } from '@/app/Dashboard/buyerSlice';
 import Button from '@/components/form/Button';
-
 import { showErrorToast, showSuccessToast } from '@/utils/ToastConfig';
 
 interface Vendor {
@@ -36,7 +29,6 @@ function Seller() {
   const [searchTerm, setSearch] = useState('');
   const [filteredVendors, setFilteredVendors] = useState<Vendor[]>([]);
   const [reRenderTrigger, setReRenderTrigger] = useState(false);
-
   const [clickedVendor, setClickedVendor] = useState<Vendor | null>(null);
   const [deactivate, setDeactivate] = useState(false);
   const [activate, setActivate] = useState(false);
@@ -81,6 +73,7 @@ function Seller() {
           if (res.status === 200) {
             showSuccessToast(`${vendor?.firstName} Activated Successfully`);
             setReRenderTrigger((prev) => !prev);
+            dispatch(fetchBuyers());
           } else {
             showErrorToast('Failed to Activate the vendor');
           }
@@ -107,6 +100,7 @@ function Seller() {
           if (res.status === 200) {
             showSuccessToast(`${vendor?.firstName} Suspended Successfully`);
             setReRenderTrigger((prev) => !prev);
+            dispatch(fetchBuyers());
           } else {
             showErrorToast('Failed to Suspend the vendor');
           }
@@ -158,7 +152,7 @@ function Seller() {
   return (
     <div className="mt-8 text-md text-dashgreytext">
       {deactivate && (
-        <div className="fixed w-screen h-screen flex items-center justify-center z-50 bg-black bg-opacity-50 top-0 left-0">
+        <div className="fixed w-screen md:h-screen flex items-center justify-center z-50 bg-black bg-opacity-50 top-0 left-0">
           <div className="w-80 h-48 bg-dashgrey rounded-lg">
             <div className="my-10 ml-5">
               Are you sure you want to suspend?
@@ -208,7 +202,7 @@ function Seller() {
       )}
 
       <div>
-        <div className="md:flex md:gap-5">
+        <div className="md:flex md:gap-5 md:p-5">
           <div className="text-2xl font-medium">Sellers</div>
           <button
             type="button"
@@ -218,7 +212,7 @@ function Seller() {
             Add Seller
           </button>
         </div>
-        <div className="md:flex justify-between">
+        <div className="md:flex justify-between md:p-5">
           <div className="flex gap-5 py-2">
             <p>All ({vendors.length})</p>
             <p className="text-primary">
@@ -243,174 +237,121 @@ function Seller() {
       </div>
       <div className="mt-10">
         {status === 'loading' && (
-          <div className="md:flex items-center justify-center">
-            <PuffLoader
-              color="#6D31ED"
-              cssOverride={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-              }}
-            />
+          <div className="md:flex items-center justify-center h-[60vh]">
+            <PuffLoader size={100} color="#1A8CD8" />
           </div>
         )}
-      </div>
-      <div className="hidden md:block">
-        <div className="bg-white pt-5 w-full rounded-xl">
-          <div className="bg-dashgrey rounded-md flex justify-between mx-1 py-1 px-4 pr-2">
-            <div className="font-semibold text-grey column-img">Image</div>
-            <div className="font-semibold text-grey column-firstName">
-              First Name
-            </div>
-            <div className="font-semibold text-grey column-lastName">
-              Last Name
-            </div>
-            <div className="font-semibold text-grey column-email">Email</div>
-            <div className="font-semibold text-grey column-items mr-5">
-              Items Count
-            </div>
-            <div className="font-semibold text-grey column-date">Date</div>
-            <div className="font-semibold text-grey column-status">Status</div>
-            <div className="font-semibold text-grey column-action">Action</div>
-          </div>
-          {vendors.length > 0 ? (
-            visiblePage.map((v, id) => (
-              <div
-                key={id}
-                className="border-b flex items-center justify-between gap-10 py-3"
+        {status === 'succeeded' && (
+          <div className="overflow-x-auto md:p-5">
+            <table className="table-auto w-full rounded-lg">
+              <thead className="bg-white border-[1px] border-t-0 border-dashborder">
+                <tr>
+                  <th className="py-5 pl-5 text-left">Name</th>
+                  <th className="text-left">Email</th>
+                  <th className="text-left">Items</th>
+                  <th className="text-left">Date</th>
+                  <th className="text-left">Status</th>
+                  <th className="text-left">Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {visiblePage.map((vendor, i) => (
+                  <tr
+                    className={`border border-b-0 border-dashborder ${
+                      i % 2 !== 0 ? 'bg-white' : 'bg-[#F7F7F7]'
+                    }`}
+                    key={vendor.id}
+                  >
+                    <td className="py-3 pl-5 flex items-center gap-3 whitespace-nowrap">
+                      <img
+                        src={vendor.picture}
+                        alt="seller avatar"
+                        className="w-8 h-8 rounded-full object-cover"
+                      />
+                      <div className="flex flex-col">
+                        <span>{`${vendor.firstName} ${vendor.lastName}`}</span>
+                      </div>
+                    </td>
+                    <td>{vendor.email}</td>
+                    <td>{ItemCount(vendor.firstName)}</td>
+                    <td>{DateFormat(vendor.updatedAt)}</td>
+                    <td>
+                      <span
+                        className={`${
+                          vendor.status === 'inactive'
+                            ? 'bg-[#FFEBEB] text-[#D61B1F]'
+                            : 'bg-[#E3F9F1] text-[#38CB89]'
+                        } px-2 py-1 rounded-md text-[10px]`}
+                      >
+                        {vendor.status}
+                      </span>
+                    </td>
+                    <td className="relative">
+                      <div className="flex gap-2 items-center">
+                        {vendor.status === 'inactive' && (
+                          <button
+                            type="button"
+                            className="px-[5px] py-[5px] rounded-md flex justify-center items-center gap-2 text-sm
+                            hover:shadow-lg hover:scale-105 transition-all duration-300 ease-in-out"
+                            onClick={() => HandleActive(vendor)}
+                          >
+                            <Power className="w-5 text-[#00FF00]" />
+                          </button>
+                        )}
+                        {vendor.status === 'active' && (
+                          <button
+                            type="button"
+                            className="px-[5px] py-[5px] rounded-md flex justify-center items-center gap-2 text-sm
+                            hover:shadow-lg hover:scale-105 transition-all duration-300 ease-in-out"
+                            onClick={() => HandleEdit(vendor)}
+                          >
+                            <Power className="w-5 text-red-600" />
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            <div className="flex p-3 justify-end items-center mt-2 mr-2 text-xl text-[#9095A1]">
+              <button
+                type="submit"
+                className="pr-2 cursor-pointer"
+                onClick={() => HandlePrev()}
               >
-                <div className="text-grey font-normal column-img">
-                  <img
-                    src={v.picture}
-                    alt=""
-                    className="w-16 h-14 rounded-full ml-2"
-                  />
-                </div>
-                <div className="text-grey font-normal column-firstName">
-                  {v.firstName}
-                </div>
-                <div className="text-grey font-normal column-lastName">
-                  {v.lastName}
-                </div>
-                <div className="text-grey font-normal column-email">
-                  {v.email}
-                </div>
-                <div className="text-grey font-normal column-items ">
-                  {ItemCount(v.firstName)}
-                </div>
-                <div className="text-grey font-normal column-date">
-                  {DateFormat(v.updatedAt)}
-                </div>
-                <div className="text-grey font-normal column-status leading-none">
-                  <span
-                    className={
-                      v.status === 'active'
-                        ? 'bg-statusBlue rounded-lg px-2 text-white py-1'
-                        : 'bg-[#E06207] rounded-lg px-2 text-white py-1'
-                    }
+                <ChevronLeft />
+              </button>
+              {pages &&
+                pages.map((page) => (
+                  <button
+                    key={page}
+                    type="submit"
+                    className={`cursor-pointer w-10 h-10  hover:translate ${
+                      currentPage === page
+                        ? 'border border-primary rounded-full'
+                        : ''
+                    }`}
+                    onClick={() => setCurrentPage(page)}
                   >
-                    {v.status}
-                  </span>
-                </div>
-                <div className="flex gap-4 items-center column-action">
-                  <button type="submit" onClick={() => HandleActive(v)}>
-                    <RefreshCcw className="w-5" />
+                    {`${page} `}
                   </button>
-                  <button type="submit" onClick={() => HandleEdit(v)}>
-                    <Power className="w-5 text-redBg" />
-                  </button>
-                </div>
-              </div>
-            ))
-          ) : (
-            <div className="ml-8 mt-10">No Vendor Found</div>
-          )}
-          <div className="flex p-3 justify-end items-center mt-2 mr-2 text-xl text-[#9095A1]">
-            <button
-              type="submit"
-              className="pr-2 cursor-pointer"
-              onClick={() => HandlePrev()}
-            >
-              <ChevronLeft />
-            </button>
-            {pages &&
-              pages.map((page) => (
-                <button
-                  key={page}
-                  type="submit"
-                  className={`cursor-pointer w-10 h-10  hover:translate ${
-                    currentPage === page
-                      ? 'border border-primary rounded-full'
-                      : ''
-                  }`}
-                  onClick={() => setCurrentPage(page)}
-                >
-                  {`${page} `}
-                </button>
-              ))}
-            <button
-              type="submit"
-              className="pl-2 cursor-pointer"
-              onClick={() => HandleNext()}
-            >
-              <ChevronRight />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div className="md:hidden">
-        {vendors &&
-          visiblePage.map((v, id) => (
-            <div key={id} className="border p-4 rounded-lg mb-4 bg-white">
-              <div className="flex items- mb-2 gap-4 ">
-                <img
-                  src={v.picture}
-                  alt=""
-                  className="w-10 h-10 rounded-full"
-                />
-                <div className="ml-4 ">
-                  <p className="font-semibold text-grey">
-                    {v.firstName} {v.lastName}
-                  </p>
-                  <p className="text-grey">{v.email}</p>
-                </div>
-              </div>
-              <div className="pt-16 ml-2 leading-7">
-                <p className="text-grey">First Name: {v.firstName}</p>
-                <p className="text-grey">Items: {ItemCount(v.lastName)}</p>
-                <p className="text-grey">Date: {DateFormat(v.updatedAt)}</p>
-                <p className="text-grey">
-                  Status:
-                  <span
-                    className={
-                      v.status === 'active'
-                        ? 'bg-statusBlue px-2 py-0.5 ml-1 rounded-md'
-                        : 'bg-[#E06207] px-2 py-0.5 ml-1 rounded-md'
-                    }
-                  >
-                    {v.status}
-                  </span>
-                </p>
-              </div>
-              <div className="flex justify-end items-end ">
-                <button
-                  type="submit"
-                  onClick={() => HandleActive(v)}
-                  className="mr-2"
-                >
-                  <RefreshCcw className="w-5" />
-                </button>
-                <button type="submit">
-                  <Power
-                    className="w-5 text-redBg"
-                    onClick={() => HandleEdit(v)}
-                  />
-                </button>
-              </div>
+                ))}
+              <button
+                type="submit"
+                className="pl-2 cursor-pointer"
+                onClick={() => HandleNext()}
+              >
+                <ChevronRight />
+              </button>
             </div>
-          ))}
+          </div>
+        )}
+        {status === 'failed' && (
+          <div className="md:flex items-center justify-center h-[60vh]">
+            <div className="text-red-500">Failed to fetch sellers</div>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index bb9c1d1..45f4668 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -28,6 +28,7 @@ import Coupons from '@/pages/Coupons';
 import EditCoupon from '@/pages/EditCoupon';
 import TableUserRole from '@/components/dashBoard/UserRole';
 import Customer from '@/pages/customer';
+import Category from '@/components/dashBoard/Category';
 
 function AppRoutes() {
   return (
@@ -68,6 +69,7 @@ function AppRoutes() {
         <Route path="/dashboard/orders" element={<Orders />} />
         <Route path="/dashboard/seller" element={<Seller />} />
         <Route path="/dashboard/customers" element={<Customer />} />
+        <Route path="/dashboard/category" element={<Category />} />
         <Route
           index
           path="/dashboard/product"