diff --git a/web/src/components/ui/pagination.tsx b/web/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..e239643
--- /dev/null
+++ b/web/src/components/ui/pagination.tsx
@@ -0,0 +1,64 @@
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import React, { useCallback } from "react";
+import { Button } from "./button";
+
+type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+};
+
+const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}) => {
+  const getPageNumbers = useCallback(() => {
+    const delta = 2;
+    const pages = [];
+
+    for (
+      let i = Math.max(1, currentPage - delta);
+      i <= Math.min(totalPages, currentPage + delta);
+      i++
+    ) {
+      pages.push(i);
+    }
+
+    return pages;
+  }, [currentPage, totalPages]);
+
+  if (totalPages <= 1) return null;
+
+  return (
+    <nav className="flex justify-center items-center gap-2 mt-4">
+      <Button
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        variant="outlined"
+      >
+        <ArrowLeft size={17} />
+      </Button>
+
+      {getPageNumbers().map((page) => (
+        <Button
+          key={page}
+          onClick={() => onPageChange(page)}
+          variant={page === currentPage ? "contained" : "outlined"}
+        >
+          <p className="text-sm">{page}</p>
+        </Button>
+      ))}
+
+      <Button
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        variant="outlined"
+      >
+        <ArrowRight size={17} />
+      </Button>
+    </nav>
+  );
+};
+
+export default Pagination;