diff --git a/src/shared/Pagination.tsx b/src/shared/Pagination.tsx
new file mode 100644
index 0000000..4c8f9a3
--- /dev/null
+++ b/src/shared/Pagination.tsx
@@ -0,0 +1,64 @@
+import { CustomLink } from "@/data/types";
+import React, { FC } from "react";
+import twFocusClass from "@/utils/twFocusClass";
+import Link from "next/link";
+import { Route } from "@/routers/types";
+
+const DEMO_PAGINATION: CustomLink[] = [
+  {
+    label: "1",
+    href: "#",
+  },
+  {
+    label: "2",
+    href: "#",
+  },
+  {
+    label: "3",
+    href: "#",
+  },
+  {
+    label: "4",
+    href: "#",
+  },
+];
+
+export interface PaginationProps {
+  className?: string;
+}
+
+const Pagination: FC<PaginationProps> = ({ className = "" }) => {
+  const renderItem = (pag: CustomLink, index: number) => {
+    if (index === 0) {
+      // RETURN ACTIVE PAGINATION
+      return (
+        <span
+          key={index}
+          className={`inline-flex w-11 h-11 items-center justify-center rounded-full bg-primary-6000 text-white ${twFocusClass()}`}
+        >
+          {pag.label}
+        </span>
+      );
+    }
+    // RETURN UNACTIVE PAGINATION
+    return (
+      <Link
+        key={index}
+        className={`inline-flex w-11 h-11 items-center justify-center rounded-full bg-white hover:bg-neutral-100 border border-neutral-200 text-neutral-6000 dark:text-neutral-400 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:border-neutral-700 ${twFocusClass()}`}
+        href={pag.href as Route}
+      >
+        {pag.label}
+      </Link>
+    );
+  };
+
+  return (
+    <nav
+      className={`nc-Pagination inline-flex space-x-1 text-base font-medium ${className}`}
+    >
+      {DEMO_PAGINATION.map(renderItem)}
+    </nav>
+  );
+};
+
+export default Pagination;