diff --git a/package.json b/package.json
index 7857124..76bc0c8 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tanstack/react-query": "^5.28.4",
     "@tanstack/react-router": "^1.20.4",
+    "@tanstack/react-table": "^8.15.3",
     "@tanstack/router-devtools": "^1.20.4",
     "@tanstack/router-vite-plugin": "^1.20.2",
     "@types/react-lazy-load-image-component": "^1.6.3",
diff --git a/src/components/data-table.tsx b/src/components/data-table.tsx
new file mode 100644
index 0000000..8328f6e
--- /dev/null
+++ b/src/components/data-table.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface DataTableProps<TData> {
+  data: TData[]
+}
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "id",
+    header: "ID",
+    cell: ({ row }) => (
+      <div className="font-medium">{row.getValue("id")}</div>
+    ),
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
+  },
+  {
+    accessorKey: "role",
+    header: () => <div className="text-right">Role</div>,
+    cell: ({ row }) => {
+      return (
+        <div className="font-bold">{row.getValue("role")}</div>
+      );
+    },
+  },
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: (/* { row } */ ) => {
+      // const users = row.original;
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Role</DropdownMenuLabel>
+            <DropdownMenuItem>ADMIN</DropdownMenuItem>
+            <DropdownMenuItem>CUSTOMER</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem><span className="text-red-600">Delete</span></DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export function DataTable({ data }: DataTableProps<any>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  });
+
+  return (
+    <div className="mx-auto max-w-4xl">
+      <div className="flex items-center py-4">
+        <Input
+          placeholder="Filter emails..."
+          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Columns <ChevronDown className="ml-2 h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                );
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <div className="space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..7f3502f
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index ea97e66..7c75d6d 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -26,6 +26,7 @@ import { Route as AuthLoginImport } from './routes/_auth/login'
 import { Route as AdminDashboardIndexImport } from './routes/_admin/dashboard/index'
 import { Route as AuthenticatedProductProductIdImport } from './routes/_authenticated/product.$productId'
 import { Route as AuthenticatedCategoryCategoryNameImport } from './routes/_authenticated/category.$categoryName'
+import { Route as AdminDashboardUsersImport } from './routes/_admin/dashboard/users'
 import { Route as AdminDashboardUploadImport } from './routes/_admin/dashboard/upload'
 import { Route as AdminDashboardProductsImport } from './routes/_admin/dashboard/products'
 import { Route as AdminDashboardUpdateProductIdImport } from './routes/_admin/dashboard/update.$productId'
@@ -111,6 +112,11 @@ const AuthenticatedCategoryCategoryNameRoute =
     getParentRoute: () => AuthenticatedRoute,
   } as any)
 
+const AdminDashboardUsersRoute = AdminDashboardUsersImport.update({
+  path: '/dashboard/users',
+  getParentRoute: () => AdminRoute,
+} as any)
+
 const AdminDashboardUploadRoute = AdminDashboardUploadImport.update({
   path: '/dashboard/upload',
   getParentRoute: () => AdminRoute,
@@ -193,6 +199,10 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminDashboardUploadImport
       parentRoute: typeof AdminImport
     }
+    '/_admin/dashboard/users': {
+      preLoaderRoute: typeof AdminDashboardUsersImport
+      parentRoute: typeof AdminImport
+    }
     '/_authenticated/category/$categoryName': {
       preLoaderRoute: typeof AuthenticatedCategoryCategoryNameImport
       parentRoute: typeof AuthenticatedImport
@@ -222,6 +232,7 @@ export const routeTree = rootRoute.addChildren([
   AdminRoute.addChildren([
     AdminDashboardProductsRoute,
     AdminDashboardUploadRoute,
+    AdminDashboardUsersRoute,
     AdminDashboardIndexRoute,
     AdminDashboardProductProductIdRoute,
     AdminDashboardUpdateProductIdRoute,
diff --git a/src/routes/_admin/dashboard/index.tsx b/src/routes/_admin/dashboard/index.tsx
index 14a32be..29446f8 100644
--- a/src/routes/_admin/dashboard/index.tsx
+++ b/src/routes/_admin/dashboard/index.tsx
@@ -32,17 +32,19 @@ function Dashboard() {
           </Card>
         </Link>
         <div>
-          <Card className="cursor-not-allowed hover:scale-105 transition-transform duration-200">
-            <CardHeader>
-              <div className="flex items-center space-x-4">
-                <User strokeWidth={1} size={54} className="text-gray-500" />
-                <div>
-                  <CardTitle>Users</CardTitle>
-                  <CardDescription className="truncate">Manage user roles and access</CardDescription>
+         <Link to="/dashboard/users">
+            <Card className="hover:scale-105 transition-transform duration-200">
+              <CardHeader>
+                <div className="flex items-center space-x-4">
+                  <User strokeWidth={1} size={54} className="text-gray-500" />
+                  <div>
+                    <CardTitle>Users</CardTitle>
+                    <CardDescription className="truncate">Manage user roles and access</CardDescription>
+                  </div>
                 </div>
-              </div>
-            </CardHeader>
-          </Card>
+              </CardHeader>
+            </Card>
+         </Link>
         </div>
       </div>
     </div>
diff --git a/src/routes/_admin/dashboard/users.tsx b/src/routes/_admin/dashboard/users.tsx
new file mode 100644
index 0000000..85c90c9
--- /dev/null
+++ b/src/routes/_admin/dashboard/users.tsx
@@ -0,0 +1,34 @@
+import { DataTable } from "@/components/data-table";
+import Loading from "@/components/loading";
+import { config } from "@/lib/config";
+import { createFileRoute } from "@tanstack/react-router";
+import axios from "axios";
+import useSWR from "swr";
+
+export const Route = createFileRoute("/_admin/dashboard/users")({
+  component: Users,
+});
+
+async function getUsers(url: string, session: string) {
+  const { data } = await axios.get(`${config.SERVER_API_URL}/v1/${url}`, {
+    headers: {
+      Authorization: `Bearer ${session}`,
+    },
+  });
+  return data.users;
+}
+
+function Users() {
+  const { session } = Route.useRouteContext();
+  const { data, isLoading } = useSWR(["user/all", session], ([url, session]) =>
+    getUsers(url, session)
+  );
+
+  if (isLoading) return <Loading />;
+
+  return (
+    <div className="my-12 container mx-auto">
+      <DataTable data={data} />
+    </div>
+  );
+}