diff --git a/src/__test__/dashBoard/ConfirmationCard.test.tsx b/src/__test__/dashBoard/ConfirmationCard.test.tsx
new file mode 100644
index 00000000..82cf3365
--- /dev/null
+++ b/src/__test__/dashBoard/ConfirmationCard.test.tsx
@@ -0,0 +1,98 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest'; // Assuming 'vitest' is used for assertions
+import ConfirmationCard from '@/components/dashBoard/ConfirmationCard'; // Adjust path as needed
+
+describe('ConfirmationCard Component', () => {
+  it('does not render when isVisible is false', () => {
+    render(
+      <ConfirmationCard
+        isVisible={false}
+        onClose={() => {}}
+        onConfirm={() => {}}
+        message="Are you sure?"
+      />
+    );
+
+    const modal = screen.queryByText('Are you sure?');
+    expect(modal).not.toBeInTheDocument();
+  });
+
+  it('renders correctly when isVisible is true', () => {
+    render(
+      <ConfirmationCard
+        isVisible
+        onClose={() => {}}
+        onConfirm={() => {}}
+        message="Are you sure?"
+      />
+    );
+
+    const modal = screen.getByText('Are you sure?');
+    expect(modal).toBeInTheDocument();
+  });
+
+  it('calls onClose when the close button is clicked', () => {
+    const onClose = vi.fn();
+    render(
+      <ConfirmationCard
+        isVisible
+        onClose={onClose}
+        onConfirm={() => {}}
+        message="Are you sure?"
+      />
+    );
+
+    const closeButton = screen.getByRole('button', { name: /close modal/i });
+    fireEvent.click(closeButton);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClose when the "No, cancel" button is clicked', () => {
+    const onClose = vi.fn();
+    render(
+      <ConfirmationCard
+        isVisible
+        onClose={onClose}
+        onConfirm={() => {}}
+        message="Are you sure?"
+      />
+    );
+
+    const cancelButton = screen.getByRole('button', { name: /no, cancel/i });
+    fireEvent.click(cancelButton);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onConfirm when the "Yes, I\'m sure" button is clicked', () => {
+    const onConfirm = vi.fn();
+    render(
+      <ConfirmationCard
+        isVisible
+        onClose={() => {}}
+        onConfirm={onConfirm}
+        message="Are you sure?"
+      />
+    );
+
+    const confirmButton = screen.getByRole('button', {
+      name: /yes, i'm sure/i,
+    });
+    fireEvent.click(confirmButton);
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays the correct message', () => {
+    const message = 'Are you absolutely sure?';
+    render(
+      <ConfirmationCard
+        isVisible
+        onClose={() => {}}
+        onConfirm={() => {}}
+        message={message}
+      />
+    );
+
+    const modalMessage = screen.getByText(message);
+    expect(modalMessage).toBeInTheDocument();
+  });
+});
diff --git a/src/__test__/dashBoard/NavigateonPage.test.tsx b/src/__test__/dashBoard/NavigateonPage.test.tsx
new file mode 100644
index 00000000..757771c7
--- /dev/null
+++ b/src/__test__/dashBoard/NavigateonPage.test.tsx
@@ -0,0 +1,151 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import CircularPagination from '@/components/dashBoard/NavigateonPage';
+
+describe('CircularPagination Component', () => {
+  const onPageChange = vi.fn();
+
+  it('renders the correct number of pages when totalPages <= 5', () => {
+    render(
+      <CircularPagination
+        totalPages={5}
+        currentPage={1}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const pageButtons = screen.getAllByRole('button');
+    expect(pageButtons).toHaveLength(7);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('renders correctly when currentPage is at the beginning', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={1}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const pageButtons = screen.getAllByRole('button');
+    expect(pageButtons).toHaveLength(9);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('...')).toBeInTheDocument();
+    expect(screen.getByText('9')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+  });
+
+  it('renders correctly when currentPage is at the end', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={10}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const pageButtons = screen.getAllByRole('button');
+    expect(pageButtons).toHaveLength(9);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('...')).toBeInTheDocument();
+    expect(screen.getByText('7')).toBeInTheDocument();
+    expect(screen.getByText('8')).toBeInTheDocument();
+    expect(screen.getByText('9')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+  });
+
+  it('renders correctly when currentPage is in the middle', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={5}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const pageButtons = screen.getAllByRole('button');
+    expect(pageButtons).toHaveLength(10);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('4')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('6')).toBeInTheDocument();
+    expect(screen.getByText('...')).toBeInTheDocument();
+    expect(screen.getByText('9')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+  });
+
+  it('calls onPageChange with the correct page number when a page button is clicked', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={5}
+        onPageChange={onPageChange}
+      />
+    );
+
+    fireEvent.click(screen.getByText('6'));
+    expect(onPageChange).toHaveBeenCalledWith(6);
+  });
+
+  it('calls onPageChange with the correct page number when the next button is clicked', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={5}
+        onPageChange={onPageChange}
+      />
+    );
+
+    fireEvent.click(screen.getByLabelText('next page'));
+    expect(onPageChange).toHaveBeenCalledWith(6);
+  });
+
+  it('calls onPageChange with the correct page number when the previous button is clicked', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={5}
+        onPageChange={onPageChange}
+      />
+    );
+
+    fireEvent.click(screen.getByLabelText('Previous page'));
+    expect(onPageChange).toHaveBeenCalledWith(4);
+  });
+
+  it('disables the previous button when on the first page', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={1}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const prevButton = screen.getByLabelText('Previous page');
+    expect(prevButton).toBeDisabled();
+  });
+
+  it('disables the next button when on the last page', () => {
+    render(
+      <CircularPagination
+        totalPages={10}
+        currentPage={10}
+        onPageChange={onPageChange}
+      />
+    );
+
+    const nextButton = screen.getByLabelText('next page');
+    expect(nextButton).toBeDisabled();
+  });
+});
diff --git a/src/__test__/dashBoard/dashboardProductSlice.test.tsx b/src/__test__/dashBoard/dashboardProductSlice.test.tsx
new file mode 100644
index 00000000..0ca21cb4
--- /dev/null
+++ b/src/__test__/dashBoard/dashboardProductSlice.test.tsx
@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import DeshboardProductsSlice, {
+  initialState,
+  fetchDashboardProduct,
+} from '@/features/Dashboard/dashboardProductsSlice'; // Adjust path as needed
+
+describe('DeshboardProductsSlice reducer', () => {
+  it('should return the initial state', () => {
+    const action = { type: 'unknown/action' };
+    expect(DeshboardProductsSlice(undefined, action)).toEqual(initialState);
+  });
+
+  it('should handle fetchDashboardProduct.pending', () => {
+    expect(
+      DeshboardProductsSlice(initialState, {
+        type: fetchDashboardProduct.pending.type,
+      })
+    ).toEqual({
+      ...initialState,
+      status: 'loading',
+    });
+  });
+
+  it('should handle fetchDashboardProduct.fulfilled', () => {
+    const mockProducts = [
+      { id: 1, title: 'Product A' },
+      { id: 2, title: 'Product B' },
+    ];
+    expect(
+      DeshboardProductsSlice(initialState, {
+        type: fetchDashboardProduct.fulfilled.type,
+        payload: mockProducts,
+      })
+    ).toEqual({
+      ...initialState,
+      status: 'succeeded',
+      DashboardProduct: mockProducts,
+    });
+  });
+
+  it('should handle fetchDashboardProduct.rejected', () => {
+    expect(
+      DeshboardProductsSlice(initialState, {
+        type: fetchDashboardProduct.rejected.type,
+      })
+    ).toEqual({
+      ...initialState,
+      status: 'failed',
+    });
+  });
+});
diff --git a/src/app/store.ts b/src/app/store.ts
index 70113541..2da7d850 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -5,6 +5,7 @@ import productsReducer from '@/app/slices/ProductSlice';
 import categoriesReducer from '@/app/slices/categorySlice';
 import bannerReducer from '@/app/bannerAds/BannerSlice';
 import availableProductsSlice from '@/features/Popular/availableProductSlice';
+import DeshboardProductsSlice from '../features/Dashboard/dashboardProductsSlice';
 import subscribeReducer from '@/app/Footer/Subscribe';
 
 export const store = configureStore({
@@ -16,6 +17,7 @@ export const store = configureStore({
     banners: bannerReducer,
     availableProducts: availableProductsSlice,
     footer: subscribeReducer,
+    DeshboardProducts: DeshboardProductsSlice,
   },
 });
 
diff --git a/src/components/dashBoard/ConfirmationCard.tsx b/src/components/dashBoard/ConfirmationCard.tsx
new file mode 100644
index 00000000..dd45ed0b
--- /dev/null
+++ b/src/components/dashBoard/ConfirmationCard.tsx
@@ -0,0 +1,76 @@
+interface ConfirmationCardProps {
+  isVisible: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  message: string;
+}
+
+function ConfirmationCard({
+  isVisible,
+  onClose,
+  onConfirm,
+  message,
+}: ConfirmationCardProps) {
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed inset-0 flex justify-center items-center z-50 bg-black bg-opacity-50">
+      <div className="relative p-4 w-full max-w-md h-full md:h-auto">
+        <div className="relative p-4 text-center bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
+          <button
+            type="button"
+            className="text-gray-400 absolute top-2.5 right-2.5 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+            onClick={onClose}
+          >
+            <svg
+              aria-hidden="true"
+              className="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span className="sr-only">Close modal</span>
+          </button>
+          <svg
+            className="text-gray-400 dark:text-gray-500 w-11 h-11 mb-3.5 mx-auto"
+            aria-hidden="true"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+              clipRule="evenodd"
+            />
+          </svg>
+          <p className="mb-4 text-gray-500 dark:text-gray-300">{message}</p>
+          <div className="flex justify-center items-center space-x-4">
+            <button
+              type="button"
+              className="py-2 px-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+              onClick={onClose}
+            >
+              No, cancel
+            </button>
+            <button
+              type="button"
+              className="py-2 px-3 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900"
+              onClick={onConfirm}
+            >
+              Yes, I&apos;m sure
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ConfirmationCard;
diff --git a/src/components/dashBoard/DashboardSideNav.tsx b/src/components/dashBoard/DashboardSideNav.tsx
index baba810f..a8eb9018 100644
--- a/src/components/dashBoard/DashboardSideNav.tsx
+++ b/src/components/dashBoard/DashboardSideNav.tsx
@@ -30,7 +30,7 @@ const sideBarItems = [
     icon: <Box className="icon" />,
     subItems: [
       {
-        path: '/products/all',
+        path: '/adminDashboard/products',
         name: 'All Products',
       },
       {
diff --git a/src/components/dashBoard/NavigateonPage.tsx b/src/components/dashBoard/NavigateonPage.tsx
new file mode 100644
index 00000000..632e3459
--- /dev/null
+++ b/src/components/dashBoard/NavigateonPage.tsx
@@ -0,0 +1,98 @@
+import { MdKeyboardArrowRight, MdKeyboardArrowLeft } from 'react-icons/md';
+
+interface CircularPaginationProps {
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+}
+
+function CircularPagination({
+  totalPages,
+  currentPage,
+  onPageChange,
+}: CircularPaginationProps) {
+  const generatePages = () => {
+    const pages = [];
+    if (totalPages <= 5) {
+      for (let i = 1; i <= totalPages; i += 1) {
+        pages.push(i);
+      }
+    } else if (currentPage < 3) {
+      pages.push(1, 2, 3, 4, '...', totalPages - 1, totalPages);
+    } else if (currentPage >= totalPages - 2) {
+      pages.push(
+        1,
+        2,
+        '...',
+        totalPages - 3,
+        totalPages - 2,
+        totalPages - 1,
+        totalPages
+      );
+    } else {
+      pages.push(
+        1,
+        2,
+        currentPage - 1,
+        currentPage,
+        currentPage + 1,
+        '...',
+        totalPages - 1,
+        totalPages
+      );
+    }
+    return pages;
+  };
+
+  const pages = generatePages();
+  // -----------------------------------------------------------------
+
+  const next = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  const prev = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  return (
+    <div className="flex items-center">
+      <button
+        type="button"
+        aria-label="Previous page"
+        className="h-[36px] w-[36px] flex items-center justify-center rounded-full  hover:border-primary hover:border"
+        onClick={prev}
+        disabled={currentPage === 1}
+      >
+        <MdKeyboardArrowLeft className=" h-[16px] w-[16px] text-grey" />
+      </button>
+      <div className="flex items-center text-grey">
+        {pages.map((page, index) => (
+          <button
+            key={index}
+            type="button"
+            onClick={() => typeof page === 'number' && onPageChange(page)}
+            className="h-[36px] w-[36px] rounded-full text-[14px] hover:border-primary hover:border"
+          >
+            {page}
+          </button>
+        ))}
+      </div>
+      <button
+        type="button"
+        aria-label="next page"
+        className="h-[36px] w-[36px] flex items-center justify-center gap-2 rounded-full hover:border-primary hover:border"
+        onClick={next}
+        disabled={currentPage === totalPages}
+      >
+        <MdKeyboardArrowRight className=" h-[16px] w-[16px] text-grey" />
+      </button>
+    </div>
+  );
+}
+
+export default CircularPagination;
diff --git a/src/components/dashBoard/Table.tsx b/src/components/dashBoard/Table.tsx
new file mode 100644
index 00000000..70a21322
--- /dev/null
+++ b/src/components/dashBoard/Table.tsx
@@ -0,0 +1,281 @@
+import { useState, useEffect } from 'react';
+import { FaRegTrashAlt } from 'react-icons/fa';
+import { MdOutlineEdit } from 'react-icons/md';
+import { useSelector, useDispatch } from 'react-redux';
+import ConfirmationCard from './ConfirmationCard';
+import CircularPagination from './NavigateonPage';
+import { AppDispatch, RootState } from '../../app/store';
+import { fetchDashboardProduct } from '@/features/Dashboard/dashboardProductsSlice';
+
+interface Column {
+  Header: string;
+  accessor: string;
+}
+
+interface Column {
+  Header: string;
+  accessor: string;
+}
+
+const columns: Column[] = [
+  { Header: 'ID', accessor: 'id' },
+  { Header: 'IMAGE', accessor: 'image' },
+  { Header: 'TITLE', accessor: 'title' },
+  { Header: 'QUANTITY', accessor: 'quantity' },
+  { Header: 'PRICE', accessor: 'price' },
+  { Header: 'DATE', accessor: 'date' },
+  { Header: 'CATEGORY', accessor: 'category' },
+  { Header: 'ACTION', accessor: 'action' },
+];
+
+function Table() {
+  const dispatch: AppDispatch = useDispatch();
+
+  const { DashboardProduct, status } = useSelector(
+    (state: RootState) => state.DeshboardProducts
+  );
+
+  const data = [...DashboardProduct];
+
+  useEffect(() => {
+    dispatch(fetchDashboardProduct());
+  }, [dispatch]);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const PRODUCTS_PER_PAGE = 6;
+
+  const totalPages = Math.ceil(data.length / PRODUCTS_PER_PAGE);
+  const startIndex = (currentPage - 1) * PRODUCTS_PER_PAGE;
+  const paginatedData = data.slice(startIndex, startIndex + PRODUCTS_PER_PAGE);
+  // -----------------------------------------------------------
+  const [isDeleteModalVisible, setModalVisible] = useState(false);
+  const [itemSelected, setItemToselected] = useState<number | null>(null);
+  const [mode, setmode] = useState('');
+  // ---------------------------------------------------
+
+  const handleDelete = (id: number) => {
+    setItemToselected(id);
+    setmode('delete');
+    setModalVisible(true);
+  };
+  // -----------------------------------
+
+  const handleUpdate = (id: number) => {
+    setItemToselected(id);
+    setmode('update');
+    setModalVisible(true);
+  };
+  // -----------------------------------
+
+  const confirmDelete = () => {
+    if (itemSelected !== null) {
+      // Logic to delete the item
+    }
+    setModalVisible(false);
+  };
+  // ---------------------------------------
+
+  const confirmUpdate = () => {
+    if (itemSelected !== null) {
+      // Logic to update the item
+    }
+    setModalVisible(false);
+  };
+  // ----------------------------------------
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return (
+    <div className=" min-w-full min-h-full pr-[15px] pl-[25px] pt-[35px]">
+      <table className="min-w-full min-h-full">
+        <thead className=" text-[12px] leading-[26px]">
+          <tr className="bg-[#F5F6F6] rounded-[10px]">
+            {columns.map((column, index) => (
+              <th
+                key={column.Header}
+                className={` px-4 text-left text-grey text-[12px] leading-[26px] hover:scale-105 hover:border hover:border-primary ${
+                  index === 0 ? 'rounded-tl-lg rounded-bl-lg' : ''
+                } ${index === columns.length - 1 ? 'rounded-tr-lg rounded-br-lg' : ''}`}
+              >
+                {column.Header}
+              </th>
+            ))}
+          </tr>
+          <tr className="h-[20px]"></tr>
+        </thead>
+
+        <tbody className="">
+          {status === 'loading' &&
+            Array(6)
+              .fill(null)
+              .map((_, index) => (
+                <tr
+                  key={index}
+                  className="border-b-[2.5px] min-w-full h-[60px]  border-[#F5F6F6] last:border-none"
+                >
+                  <td key="ID" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg h-[40px]"></div>
+                  </td>
+                  <td key="image" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg h-[40px]"></div>
+                  </td>
+                  <td key="title" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px]"></div>
+                  </td>
+                  <td key="quintity" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px]"></div>
+                  </td>
+                  <td key="price" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px]"></div>
+                  </td>
+                  <td key="date" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px]"></div>
+                  </td>
+                  <td key="category" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px]"></div>
+                  </td>
+                  <td key="action" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px]"></div>
+                  </td>
+                </tr>
+              ))}
+          {status === 'failed' &&
+            Array(8)
+              .fill(null)
+              .map((_, index) => (
+                <tr
+                  key={index}
+                  className="border-b-[2.5px] min-w-full h-[60px]  border-[#F5F6F6] last:border-none"
+                >
+                  <td key="ID" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg h-[40px] text-center">
+                      Failed..
+                    </div>
+                  </td>
+                  <td key="image" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg h-[40px] text-center">
+                      Failed..
+                    </div>
+                  </td>
+                  <td key="title" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px] text-center">
+                      Failed..
+                    </div>
+                  </td>
+                  <td key="quintity" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px] text-center">
+                      Failed..
+                    </div>
+                  </td>
+                  <td key="price" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px] text-center">
+                      Failed..
+                    </div>
+                  </td>
+                  <td key="date" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px] text-pretty">
+                      Failed..
+                    </div>
+                  </td>
+                  <td key="category" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px] text-center">
+                      Failed..
+                    </div>
+                  </td>
+                  <td key="action" className="">
+                    <div className="shadow-lg animate-pulse bg-slate-300 rounded-lg  h-[40px] text-center">
+                      Failed..
+                    </div>
+                  </td>
+                </tr>
+              ))}
+          {status === 'succeeded' &&
+            paginatedData.map((product, index) => (
+              <tr
+                key={index}
+                className=" h-[68px] text-grey leading-[16px] text-[12px] font-normal border-b-[2px] border-[#F5F6F6] last:border-none hover:translate-x-[0.7px] hover:border hover:bg-[#F5F6F6]"
+              >
+                <td key="ID" className="px-4">
+                  {product.id}
+                </td>
+                <td key="image" className="px-4 py-2">
+                  <img
+                    src={product.image}
+                    alt="product"
+                    className="h-[46px] w-[59px] object-cover"
+                  />
+                </td>
+                <td key="title" className="px-4">
+                  {product.name}
+                </td>
+                <td key="quintity" className="px-4">
+                  {product.quantity}
+                </td>
+                <td key="price" className="px-4">
+                  ${product.regularPrice}
+                </td>
+                <td key="date" className="px-4">
+                  {product.updatedAt.slice(0, 10)}
+                </td>
+                <td key="category" className="px-4">
+                  {product.category.name}
+                </td>
+                <td key="action" className="px-4">
+                  <div className="flex flex-row justify-start">
+                    <div className=" h-[36px] w-[36px] rounded-full flex items-center justify-center hover:border-primary hover:border ">
+                      <MdOutlineEdit
+                        type="button"
+                        className=" text-textBlack cursor-pointer  h-[18px] w-[18px]"
+                        onClick={() => handleUpdate(product.id)}
+                      />
+                    </div>
+                    <div className="h-[36px] w-[36px] rounded-full flex items-center justify-center hover:border-primary hover:border ">
+                      <FaRegTrashAlt
+                        type="button"
+                        className="text-red-500 cursor-pointer h-[16px] w-[16px]"
+                        onClick={() => handleDelete(product.id)}
+                      />
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+
+      <div className=" flex flex-row justify-end pb-[2%] pt-[5%] pr-[5%]">
+        <CircularPagination
+          totalPages={totalPages}
+          currentPage={currentPage}
+          onPageChange={handlePageChange}
+        />
+      </div>
+
+      {mode === 'delete' && (
+        <div className="">
+          <ConfirmationCard
+            isVisible={isDeleteModalVisible}
+            onClose={() => setModalVisible(false)}
+            onConfirm={confirmDelete}
+            message="Are you sure you want to delete this item?"
+          />
+        </div>
+      )}
+
+      {mode === 'update' && (
+        <div className="">
+          <ConfirmationCard
+            isVisible={isDeleteModalVisible}
+            onClose={() => setModalVisible(false)}
+            onConfirm={confirmUpdate}
+            message="Are you sure you want to Update this item ?"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Table;
diff --git a/src/features/Dashboard/dashboardProductsSlice.ts b/src/features/Dashboard/dashboardProductsSlice.ts
new file mode 100644
index 00000000..a764e1f2
--- /dev/null
+++ b/src/features/Dashboard/dashboardProductsSlice.ts
@@ -0,0 +1,49 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+import Product from '../../interfaces/product';
+
+interface ProductsState {
+  DashboardProduct: Product[];
+  status: 'idle' | 'loading' | 'succeeded' | 'failed';
+}
+
+const URL = import.meta.env.VITE_BASE_URL;
+
+export const fetchDashboardProduct = createAsyncThunk<Product[]>(
+  'DashboardProduct',
+  async (_, thunkAPI) => {
+    try {
+      const response = await axios.get(`${URL}/product`);
+      const { data } = response;
+      return data.data;
+    } catch (error) {
+      return thunkAPI.rejectWithValue(error);
+    }
+  }
+);
+
+export const initialState: ProductsState = {
+  DashboardProduct: [],
+  status: 'idle',
+};
+
+const DeshboardProductsSlice = createSlice({
+  name: 'products',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchDashboardProduct.pending, (state) => {
+        state.status = 'loading';
+      })
+      .addCase(fetchDashboardProduct.fulfilled, (state, action) => {
+        state.status = 'succeeded';
+        state.DashboardProduct = action.payload;
+      })
+      .addCase(fetchDashboardProduct.rejected, (state) => {
+        state.status = 'failed';
+      });
+  },
+});
+
+export default DeshboardProductsSlice.reducer;
diff --git a/src/features/Popular/availableProductSlice.ts b/src/features/Popular/availableProductSlice.ts
index b64f09d5..ceb57c79 100644
--- a/src/features/Popular/availableProductSlice.ts
+++ b/src/features/Popular/availableProductSlice.ts
@@ -10,7 +10,7 @@ interface ProductsState {
 const URL = import.meta.env.VITE_BASE_URL;
 
 export const fetchAvailableProducts = createAsyncThunk<Product[]>(
-  'products/fetchProducts',
+  '/AvailableProducts',
   async (_, thunkAPI) => {
     try {
       const response = await axios.get(`${URL}/product/getAvailableProducts`);
diff --git a/src/layout/DashbordLayout.tsx b/src/layout/DashbordLayout.tsx
index db88d255..74ecff2e 100644
--- a/src/layout/DashbordLayout.tsx
+++ b/src/layout/DashbordLayout.tsx
@@ -5,14 +5,16 @@ import Navbar from '@/components/Navbar';
 function DashboardLayout() {
   return (
     <div className="bg-[#F5F6F6] flex-1 flex flex-col w-full min-h-screen">
-      <div className="bg-white">
+      <div className="bg-white w-full">
         <Navbar />
       </div>
-      <div className="flex flex-1">
-        <DashboardSideNav />
-      </div>
-      <div className="flex-1 p-5">
-        <Outlet />
+      <div className="flex flex-1 w-full">
+        <div className=" w-[195px] h-full">
+          <DashboardSideNav />
+        </div>
+        <div className="flex-1 p-5">
+          <Outlet />
+        </div>
       </div>
     </div>
   );
diff --git a/src/pages/DesplayProductPage.tsx b/src/pages/DesplayProductPage.tsx
new file mode 100644
index 00000000..dfbfd719
--- /dev/null
+++ b/src/pages/DesplayProductPage.tsx
@@ -0,0 +1,11 @@
+import Table from '@/components/dashBoard/Table';
+
+function DesplayProductPage() {
+  return (
+    <div className="bg-white w-full h-full">
+      <Table />
+    </div>
+  );
+}
+
+export default DesplayProductPage;
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index 6584d44f..0b8cd562 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -6,6 +6,7 @@ import SignUp from '@/pages/SignUp';
 import SignIn from '@/pages/SignIn';
 import TwoFactorAuthForm from '@/pages/TwoFactorAuthForm';
 import DashboardLayout from '@/layout/DashbordLayout';
+import DesplayProductPage from '@/pages/DesplayProductPage';
 
 function AppRoutes() {
   return (
@@ -16,7 +17,13 @@ function AppRoutes() {
       <Route path="/signup" element={<SignUp />} />
       <Route path="/signIn" element={<SignIn />} />
       <Route path="/verify-2fa/:id/:email" element={<TwoFactorAuthForm />} />
-      <Route path="/adminDashboard" element={<DashboardLayout />} />
+      <Route path="/adminDashboard" element={<DashboardLayout />}>
+        <Route
+          index
+          path="/adminDashboard/products"
+          element={<DesplayProductPage />}
+        />
+      </Route>
       <Route path="*" element={<ErrorPage />} />
     </Routes>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index 19b1d7dd..b7c6dafe 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,7 @@ export default {
       xs: '320px',
       sm: '640px',
       md: '768px',
+      mdx:'920px',
       lg: '1024px',
     },
     extend: {