diff --git a/app/components/ui/adminProductTable/AdminProductListTable.tsx b/app/components/ui/adminProductTable/AdminProductListTable.tsx
new file mode 100644
index 00000000..d6407ac1
--- /dev/null
+++ b/app/components/ui/adminProductTable/AdminProductListTable.tsx
@@ -0,0 +1,258 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "app/components/ui/pagination";
+import React, { useState } from "react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/adminProductTable/table";
+import { Button } from "../button";
+import { Badge } from "./badge";
+
+interface Product {
+  name: string;
+  price: string;
+  totalSold: string;
+  status: string;
+  createdAt: string;
+  action: JSX.Element;
+}
+
+const products: Product[] = [
+  {
+    name: "Hypernova Headphones",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Draft",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+  {
+    name: "Hypernova Headphones",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Active",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+  {
+    name: "AeroGlow Desk Lamp",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Active",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+  {
+    name: "TechTonic Energy Drink",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Draft",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+  {
+    name: "TechTonic Energy Drink",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Draft",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+  {
+    name: "TechTonic Energy Drink",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Draft",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+  {
+    name: "TechTonic Energy Drink",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Draft",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+  {
+    name: "TechTonic Energy Drink",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Draft",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+  {
+    name: "TechTonic Energy Drink",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Draft",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+  {
+    name: "TechTonic Energy Drink",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Draft",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+  {
+    name: "TechTonic Energy Drink",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Draft",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+  {
+    name: "TechTonic Energy Drink",
+    price: "$129.99",
+    totalSold: "25",
+    status: "Draft",
+    createdAt: "2024-07-16 10:36AM",
+    action: <img src="/icons/option-icon2.svg" alt="option" />,
+  },
+];
+
+const AdminProductListTable: React.FC = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 4;
+
+  const totalPages = Math.ceil(products.length / itemsPerPage);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const paginatedProducts = products.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage,
+  );
+
+  return (
+    <div className="">
+      <section className="text-14 max-h-[447px] max-w-[1039px] flex-col gap-6">
+        <header className="flex items-center justify-between gap-10 py-10 max-sm:flex-col">
+          <div className="">
+            <h2 className="font-inter text-[18px] font-semibold leading-[23.4px] text-black sm:text-[28px] sm:leading-[33.89px]">
+              Products
+            </h2>
+            <p className="font-inter mt-2 text-[12px] font-normal leading-[14.52px] sm:mt-4">
+              Manage your products and view their sales performance.
+            </p>
+          </div>
+
+          <div className="flex gap-2">
+            <Button className="gap-2 border bg-white text-[#525252] hover:bg-slate-100">
+              <img src="/icons/filterIcon2.svg" alt="filter" />
+              <p>Filter</p>
+            </Button>
+            <Button className="gap-2 bg-[#F97316] hover:bg-[#F97316]/80">
+              <img src="/icons/addicon2.svg" alt="add" />
+              <p>Add Product</p>
+            </Button>
+          </div>
+        </header>
+        <Table className="max-w-[1039px]">
+          <TableHeader className="bg-[#FFF7F2]">
+            <TableRow className="">
+              <TableHead className="font-inter pr-5 text-base font-normal leading-5 text-black">
+                Name
+              </TableHead>
+              <TableHead className="font-inter pr-5 text-base font-normal leading-5 text-black">
+                Price
+              </TableHead>
+              <TableHead className="font-inter pr-5 text-base font-normal leading-5 text-black">
+                Total Sold
+              </TableHead>
+              <TableHead className="font-inter pr-5 text-base font-normal leading-5 text-black">
+                Status
+              </TableHead>
+              <TableHead className="font-inter pr-5 text-base font-normal leading-5 text-black max-md:hidden">
+                Created At
+              </TableHead>
+              <TableHead className="font-inter pr-11 text-base font-normal leading-5 text-black max-md:hidden">
+                Action
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedProducts.map((product, index) => (
+              <TableRow key={index} className="border-b">
+                <TableCell className="flex items-center gap-2 font-medium">
+                  <img
+                    src="/icons/Rectangle2.png"
+                    alt=""
+                    className="h-[67px] w-[67px]"
+                  />
+                  <div className="bg-custom-gradient h-[40px] w-[40px] sm:h-[67px] sm:w-[67px]" />
+                  <p className="font-inter text-sm leading-4">{product.name}</p>
+                </TableCell>
+                <TableCell className="font-inter text-sm font-medium leading-4">
+                  {product.price}
+                </TableCell>
+                <TableCell>{product.totalSold}</TableCell>
+                <TableCell className="">
+                  <Badge
+                    variant={"outline"}
+                    className={`text-center font-medium ${
+                      product.status === "Active"
+                        ? "border-green-500 text-green-500"
+                        : "border-primary text-primary"
+                    }`}
+                  >
+                    {product.status}
+                  </Badge>
+                </TableCell>
+                <TableCell className="">{product.createdAt}</TableCell>
+                <TableCell className="">{product.action}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <Pagination className="mt-4">
+          {currentPage > 1 && (
+            <PaginationPrevious
+              onClick={() => handlePageChange(currentPage - 1)}
+              size="default"
+            />
+          )}
+          <PaginationContent>
+            {Array.from({ length: totalPages }, (_, index) => (
+              <PaginationItem key={index}>
+                <PaginationLink
+                  isActive={index + 1 === currentPage}
+                  onClick={() => handlePageChange(index + 1)}
+                  size="default" // Adding default size
+                >
+                  {index + 1}
+                </PaginationLink>
+              </PaginationItem>
+            ))}
+          </PaginationContent>
+          {currentPage < totalPages && (
+            <PaginationNext
+              onClick={() => handlePageChange(currentPage + 1)}
+              size="default"
+            />
+          )}
+        </Pagination>
+      </section>
+    </div>
+  );
+};
+
+export default AdminProductListTable;
diff --git a/app/components/ui/adminProductTable/badge.tsx b/app/components/ui/adminProductTable/badge.tsx
new file mode 100644
index 00000000..9dda3bc6
--- /dev/null
+++ b/app/components/ui/adminProductTable/badge.tsx
@@ -0,0 +1,38 @@
+import { cn } from "app/lib/utils/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProperties
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...properties }: BadgeProperties) {
+  return (
+    <div
+      className={cn(badgeVariants({ variant }), className)}
+      {...properties}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/app/components/ui/adminProductTable/table.tsx b/app/components/ui/adminProductTable/table.tsx
new file mode 100644
index 00000000..0182363e
--- /dev/null
+++ b/app/components/ui/adminProductTable/table.tsx
@@ -0,0 +1,120 @@
+import { cn } from "app/lib/utils/cn";
+import * as React from "react";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...properties }, reference) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={reference}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...properties}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...properties }, reference) => (
+  <thead
+    ref={reference}
+    className={cn("[&_tr]:border-b", className)}
+    {...properties}
+  />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...properties }, reference) => (
+  <tbody
+    ref={reference}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...properties}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...properties }, reference) => (
+  <tfoot
+    ref={reference}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...properties}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...properties }, reference) => (
+  <tr
+    ref={reference}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className,
+    )}
+    {...properties}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...properties }, reference) => (
+  <th
+    ref={reference}
+    className={cn(
+      "h-[51px] align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...properties}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...properties }, reference) => (
+  <td
+    ref={reference}
+    className={cn("p-4 [&:has([role=checkbox])]:pr-0", className)}
+    {...properties}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...properties }, reference) => (
+  <caption
+    ref={reference}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...properties}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/app/components/ui/revenueCard/RevenueCard.tsx b/app/components/ui/revenueCard/RevenueCard.tsx
index 81ac677e..e9a7fc5e 100644
--- a/app/components/ui/revenueCard/RevenueCard.tsx
+++ b/app/components/ui/revenueCard/RevenueCard.tsx
@@ -10,7 +10,7 @@ const RevenueCard: React.FC<RevenueCardProperties> = ({ revenue, change }) => {
     <Card className="h-[134px] w-full max-w-[337.33px] px-[24px] pb-[28px] pt-[23px] sm:w-1/2 md:w-1/3 lg:w-1/4">
       <CardContent className=" ">
         <div className="flex items-center justify-between pb-1">
-          <h1 className="text-[14px] font-medium leading-[16.94px]">
+          <h1 className="font-inter text-[14px] font-medium leading-[16.94px]">
             Total Revenue
           </h1>
           <img
@@ -20,7 +20,7 @@ const RevenueCard: React.FC<RevenueCardProperties> = ({ revenue, change }) => {
           />
         </div>
 
-        <h4 className="mb-1 text-[24px] font-semibold leading-[29.05px] text-[#0A0A0A]">
+        <h4 className="font-inter mb-1 text-[24px] font-semibold leading-[29.05px] text-[#0A0A0A]">
           ${revenue}
         </h4>
         <CardDescription className="text-[12px] font-normal leading-[14.52px] text-[#525252]">
diff --git a/app/components/ui/revenueCard/cardComponent.tsx b/app/components/ui/revenueCard/cardComponent.tsx
index 86f3d128..a94e9d8f 100644
--- a/app/components/ui/revenueCard/cardComponent.tsx
+++ b/app/components/ui/revenueCard/cardComponent.tsx
@@ -1,6 +1,8 @@
+import { FC, HTMLAttributes } from "react";
+
 import { cn } from "~/lib/utils/cn";
 
-export const Card: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+export const Card: FC<HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...properties
 }) => (
@@ -13,23 +15,22 @@ export const Card: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   />
 );
 
-export const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+export const CardContent: FC<HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...properties
 }) => <div className={cn("", className)} {...properties} />;
 
-export const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+export const CardHeader: FC<HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...properties
 }) => <div className={cn("border", className)} {...properties} />;
 
-export const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
+export const CardTitle: FC<HTMLAttributes<HTMLHeadingElement>> = ({
   className,
   ...properties
 }) => <h2 className={cn("text-lg font-bold", className)} {...properties} />;
 
-export const CardDescription: React.FC<
-  React.HTMLAttributes<HTMLParagraphElement>
-> = ({ className, ...properties }) => (
-  <p className={cn("text-sm text-gray-500", className)} {...properties} />
-);
+export const CardDescription: FC<HTMLAttributes<HTMLParagraphElement>> = ({
+  className,
+  ...properties
+}) => <p className={cn("text-sm text-gray-500", className)} {...properties} />;
diff --git a/app/routes/product-list.tsx b/app/routes/product-list.tsx
index dd76ee8b..07fc80fa 100644
--- a/app/routes/product-list.tsx
+++ b/app/routes/product-list.tsx
@@ -1,11 +1,15 @@
+import AdminProductListTable from "~/components/ui/adminProductTable/AdminProductListTable";
 import RevenueCard from "~/components/ui/revenueCard/RevenueCard";
 
 const App: React.FC = () => {
   return (
-    <div className="flex flex-wrap justify-center gap-[20px] py-[30px]">
-      <RevenueCard revenue="45,000.00" change="+20% from last month" />
-      <RevenueCard revenue="45,000.00" change="+20% from last month" />
-      <RevenueCard revenue="45,000.00" change="+20% from last month" />
+    <div className="px-12">
+      <div className="flex flex-wrap gap-[20px] py-[30px]">
+        <RevenueCard revenue="45,000.00" change="+20% from last month" />
+        <RevenueCard revenue="45,000.00" change="+20% from last month" />
+        <RevenueCard revenue="45,000.00" change="+20% from last month" />
+      </div>
+      <AdminProductListTable />
     </div>
   );
 };
diff --git a/public/icons/Rectangle2.png b/public/icons/Rectangle2.png
new file mode 100644
index 00000000..f9de8423
Binary files /dev/null and b/public/icons/Rectangle2.png differ
diff --git a/public/icons/addicon2.svg b/public/icons/addicon2.svg
new file mode 100644
index 00000000..31387d2f
--- /dev/null
+++ b/public/icons/addicon2.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9170_1339)">
+<path d="M7.99967 15.1666C11.6816 15.1666 14.6663 12.1818 14.6663 8.49992C14.6663 4.81802 11.6816 1.83325 7.99967 1.83325C4.31778 1.83325 1.33301 4.81802 1.33301 8.49992C1.33301 12.1818 4.31778 15.1666 7.99967 15.1666Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 5.83325V11.1666" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.33301 8.5H10.6663" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_9170_1339">
+<rect width="16" height="16" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icons/filterIcon2.svg b/public/icons/filterIcon2.svg
new file mode 100644
index 00000000..2be939d1
--- /dev/null
+++ b/public/icons/filterIcon2.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3337 3H1.66699L8.33366 10.8833V16.3333L11.667 18V10.8833L18.3337 3Z" stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/icons/option-icon2.svg b/public/icons/option-icon2.svg
new file mode 100644
index 00000000..faa75361
--- /dev/null
+++ b/public/icons/option-icon2.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.375 13.5C12.9273 13.5 13.375 13.0523 13.375 12.5C13.375 11.9477 12.9273 11.5 12.375 11.5C11.8227 11.5 11.375 11.9477 11.375 12.5C11.375 13.0523 11.8227 13.5 12.375 13.5Z" stroke="#141414" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.375 6.5C12.9273 6.5 13.375 6.05228 13.375 5.5C13.375 4.94772 12.9273 4.5 12.375 4.5C11.8227 4.5 11.375 4.94772 11.375 5.5C11.375 6.05228 11.8227 6.5 12.375 6.5Z" stroke="#141414" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.375 20.5C12.9273 20.5 13.375 20.0523 13.375 19.5C13.375 18.9477 12.9273 18.5 12.375 18.5C11.8227 18.5 11.375 18.9477 11.375 19.5C11.375 20.0523 11.8227 20.5 12.375 20.5Z" stroke="#141414" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>