diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js
index ca8d04d14ab4..741bd1f19f60 100644
--- a/src/sections/Projects/Sistent/components/content.js
+++ b/src/sections/Projects/Sistent/components/content.js
@@ -103,6 +103,14 @@ const componentsData = [
     url: "/projects/sistent/components/toggle-button",
     src: "/toggle-button",
   },
+  {
+    id: 14,
+    name: "Pagination",
+    description:
+        "Pagination enables users to navigate through multiple pages of content, providing an intuitive interface for browsing large datasets or segmented information.",
+    url: "/projects/sistent/components/pagination",
+    src: "/pagination",
+  },
 ];
 
 module.exports = { componentsData };
diff --git a/src/sections/Projects/Sistent/components/pagination/code.js b/src/sections/Projects/Sistent/components/pagination/code.js
new file mode 100644
index 000000000000..4729eff956d2
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/pagination/code.js
@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { Pagination, SistentThemeProvider } from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+import { CodeBlock } from "../button/code-block";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+  // Basic pagination
+  `
+    <Pagination 
+      count={10} 
+      page={1} 
+      onChange={(event, page) => handleChange(page)} 
+    />
+  `,
+  // Pagination with size variants
+  `
+    <Pagination size="small" count={10} />
+    <Pagination size="medium" count={10} />
+    <Pagination size="large" count={10} />
+  `,
+  // Pagination with custom styling
+  `
+    <Pagination
+      count={10}
+      color="primary"
+      variant="outlined"
+      shape="rounded"
+    />
+  `,
+  // Pagination with an outline
+  `
+    <Pagination
+      count={10}
+      variant="outlined"
+      color="secondary"
+    />
+  `,
+];
+
+const PaginationCode = () => {
+  const { isDark } = useStyledDarkMode();
+  const location = useLocation();
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const handlePageChange = (event, value) => {
+    setCurrentPage(value);
+  };
+
+  return (
+    <SistentLayout title="Pagination">
+      <div className="content">
+        <a id="Identity">
+          <h2>Pagination</h2>
+        </a>
+        <p>
+        The Pagination component helps users navigate through multiple pages
+          of content. It provides a clear interface for moving between pages and
+          understanding the current position within a larger dataset.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/pagination"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/pagination")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/pagination/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/pagination/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/pagination/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/pagination/code")
+            }
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          {/* Basic Pagination */}
+          <a id="Basic Pagination">
+            <h3>Basic Pagination</h3>
+          </a>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Pagination
+                  count={10}
+                  page={currentPage}
+                  onChange={handlePageChange}
+                />
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="basic-pagination" code={codes[0]} />
+          </div>
+
+          {/* Pagination Sizes */}
+          <a id="Sizes">
+            <h3>Pagination Sizes</h3>
+          </a>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "1rem",
+                  }}
+                >
+                  <Pagination size="small" count={10} />
+                  <Pagination size="medium" count={10} />
+                  <Pagination size="large" count={10} />
+                </div>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="pagination-sizes" code={codes[1]} />
+          </div>
+
+          {/* Custom Styling */}
+          <a id="Styling">
+            <h3>Custom Styling</h3>
+          </a>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Pagination
+                  count={10}
+                  color="primary"
+                  variant="outlined"
+                  shape="rounded"
+                />
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="styled-pagination" code={codes[2]} />
+          </div>
+
+          {/* Pagination with Outline */}
+          <a id="Outline">
+            <h3>Pagination with Outline</h3>
+          </a>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Pagination
+                  count={10}
+                  variant="outlined"
+                  color="secondary"
+                />
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="pagination-outline" code={codes[3]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default PaginationCode;
\ No newline at end of file
diff --git a/src/sections/Projects/Sistent/components/pagination/guidance.js b/src/sections/Projects/Sistent/components/pagination/guidance.js
new file mode 100644
index 000000000000..e37d297611f3
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/pagination/guidance.js
@@ -0,0 +1,111 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { Row } from "../../../../../reusecore/Layout";
+import { SistentThemeProvider, Pagination } from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const PaginationGuidance = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Pagination">
+      <div className="content">
+        <a id="Identity">
+          <h2>Pagination</h2>
+        </a>
+        <p>
+          The Pagination component helps users navigate through multiple pages
+          of content. It provides a clear interface for moving between pages and
+          understanding the current position within a larger dataset.
+        </p>
+
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/pagination"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/pagination")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/pagination/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/pagination/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/pagination/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/pagination/code")
+            }
+            title="Code"
+          />
+        </div>
+
+        <div className="main-content">
+          <a id="Usage Guidelines">
+            <h2>Usage Guidelines</h2>
+          </a>
+
+          <h3>When to Use</h3>
+          <p>
+            Pagination should be used when displaying large datasets that need
+            to be broken into manageable chunks. It helps users navigate through
+            multiple pages of content and is beneficial when content needs to be
+            loaded incrementally to improve performance.
+          </p>
+
+          <h3>Best Practices</h3>
+          <p>
+            To ensure a smooth user experience, it’s important to keep page
+            sizes consistent throughout the interface. The current page number
+            and total pages should be displayed clearly. Adequate spacing
+            between page numbers should be ensured to improve readability. It’s
+            also crucial to provide clear visual feedback for the current page.
+            For large page ranges, consider using ellipsis (...) to represent
+            skipped pages.
+          </p>
+
+          <h3>Accessibility</h3>
+          <p>
+            To make pagination more accessible, ensure that ARIA labels are used
+            to identify the pagination controls. Keyboard navigation should be
+            properly supported to allow users to navigate through the pages
+            easily. It’s important to provide clear visual indicators for focus
+            states and maintain adequate color contrast for all states to ensure
+            readability.
+          </p>
+
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Pagination
+                count={10}
+                defaultPage={1}
+                aria-label="Pagination navigation"
+              />
+            </SistentThemeProvider>
+          </Row>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default PaginationGuidance;
\ No newline at end of file
diff --git a/src/sections/Projects/Sistent/components/pagination/index.js b/src/sections/Projects/Sistent/components/pagination/index.js
new file mode 100644
index 000000000000..0c2e2e1a9430
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/pagination/index.js
@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { SistentThemeProvider, Pagination, Box } from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const SistentPagination = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+  const [page, setPage] = useState(1);
+
+  const handleChange = (event, value) => {
+    setPage(value);
+  };
+
+  return (
+    <SistentLayout title="Pagination">
+      <div className="content">
+        <a id="Identity">
+          <h2>Pagination</h2>
+        </a>
+        <p>
+          The Pagination component helps users navigate through multiple pages
+          of content. It provides a clear interface for moving between pages and
+          understanding the current position within a larger dataset.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/pagination"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/pagination")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/pagination/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/pagination/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/pagination/code"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/pagination/code")
+            }
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <p>
+            Pagination is an essential element for navigating large datasets or
+            multiple pages of information. It enables users to move between
+            pages in a user-friendly and intuitive manner. Pagination helps to
+            split large content into smaller sections to improve the overall
+            user experience.
+          </p>
+
+          <a id="Basic Usage">
+            <h2>Basic Usage</h2>
+          </a>
+          <p>
+            Basic pagination allows users to navigate through numbered pages.
+            The current page is highlighted, and users can click on page numbers
+            or arrows to move between pages.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Pagination count={10} page={page} onChange={handleChange} />
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="Variants">
+            <h2>Variants</h2>
+          </a>
+          <p>
+            The Pagination component supports multiple variants to match your
+            design needs, including outlined, text, and contained styles. These
+            variants provide flexibility in integrating the component into your
+            layout while maintaining a consistent visual appearance.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+                <Pagination count={10} variant="outlined" />
+                <Pagination count={10} variant="text" />
+              </Box>
+            </SistentThemeProvider>
+          </Row>
+
+          <a id="Sizes">
+            <h2>Sizes</h2>
+          </a>
+          <p>
+            The Pagination component can also be customized in terms of size to
+            suit different use cases. For smaller screens, compact pagination
+            may be preferred, while larger pagination can be used for better
+            visibility on larger screens.
+          </p>
+          <h3>Large</h3>
+          <p>
+            A larger pagination component that enhances visibility and
+            interaction on larger displays.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Pagination
+                count={10}
+                size="large"
+                page={page}
+                onChange={handleChange}
+              />
+            </SistentThemeProvider>
+          </Row>
+
+          <h3>Medium</h3>
+          <p>
+            A medium-sized pagination component that balances compactness and
+            visibility.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Pagination
+                count={10}
+                size="medium"
+                page={page}
+                onChange={handleChange}
+              />
+            </SistentThemeProvider>
+          </Row>
+
+          <h3>Small</h3>
+          <p>
+            A smaller pagination component suitable for compact designs or when
+            screen real estate is limited.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Pagination
+                count={10}
+                size="small"
+                page={page}
+                onChange={handleChange}
+              />
+            </SistentThemeProvider>
+          </Row>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default SistentPagination;
\ No newline at end of file