diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js
deleted file mode 100644
index 5b6acd280869f..0000000000000
--- a/src/components/SistentNavigation/content.js
+++ /dev/null
@@ -1,163 +0,0 @@
-export const content = [
-  // Getting Started
-  { id: 0, link: "/projects/sistent/getting-started/about", text: "About" },
-  { id: 1, link: "/projects/sistent/getting-started/installation", text: "Installation" },
-  { id: 2, link: "/projects/sistent/getting-started/usage", text: "Usage" },
-  { id: 3, link: "/projects/sistent/getting-started/tokens", text: "Tokens" },
-
-  // Identity
-  { id: 4, link: "/projects/sistent/identity/color", text: "Colors" },
-  { id: 5, link: "/projects/sistent/identity/color/guidance", text: "Colors" },
-  { id: 6, link: "/projects/sistent/identity/color/code", text: "Colors" },
-  { id: 7, link: "/projects/sistent/identity/spacing", text: "Spacing" },
-  { id: 8, link: "/projects/sistent/identity/spacing/guidance", text: "Spacing" },
-  { id: 9, link: "/projects/sistent/identity/spacing/code", text: "Spacing" },
-  { id: 10, link: "/projects/sistent/identity/typography", text: "Typography" },
-  { id: 11, link: "/projects/sistent/identity/typography/guidance", text: "Typography" },
-  { id: 12, link: "/projects/sistent/identity/typography/code", text: "Typography" },
-
-  // Components
-  { id: 13, link: "/projects/sistent/components/accordion", text: "Accordion" },
-  { id: 14, link: "/projects/sistent/components/accordion/guidance", text: "Accordion" },
-  { id: 15, link: "/projects/sistent/components/accordion/code", text: "Accordion" },
-
-  { id: 16, link: "/projects/sistent/components/avatar", text: "Avatar" },
-  { id: 17, link: "/projects/sistent/components/avatar/guidance", text: "Avatar" },
-  { id: 18, link: "/projects/sistent/components/avatar/code", text: "Avatar" },
-  { id: 19, link: "/projects/sistent/components/avatar-group", text: "Avatar Group" },
-  { id: 20, link: "/projects/sistent/components/avatar-group/guidance", text: "Avatar Group" },
-  { id: 21, link: "/projects/sistent/components/avatar-group/code", text: "Avatar Group" },
-
-
-  { id: 22, link: "/projects/sistent/components/backdrop", text: "Backdrop" },
-  { id: 23, link: "/projects/sistent/components/backdrop/guidance", text: "Backdrop" },
-  { id: 24, link: "/projects/sistent/components/backdrop/code", text: "Backdrop" },
-
-  { id: 25, link: "/projects/sistent/components/badge", text: "Badge" },
-  { id: 26, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
-  { id: 27, link: "/projects/sistent/components/badge/code", text: "Badge" },
-
-  { id: 28, link: "/projects/sistent/components/box", text: "Box" },
-  { id: 29, link: "/projects/sistent/components/box/guidance", text: "Box" },
-  { id: 30, link: "/projects/sistent/components/box/code", text: "Box" },
-
-  { id: 31, link: "/projects/sistent/components/button", text: "Button" },
-  { id: 32, link: "/projects/sistent/components/button/guidance", text: "Button" },
-  { id: 33, link: "/projects/sistent/components/button/code", text: "Button" },
-
-  { id: 34, link: "/projects/sistent/components/button-group", text: "Button Group" },
-  { id: 35, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
-  { id: 36, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
-
-  { id: 37, link: "/projects/sistent/components/chip", text: "Chip" },
-  { id: 38, link: "/projects/sistent/components/chip/guidance", text: "Chip" },
-  { id: 39, link: "/projects/sistent/components/chip/code", text: "Chip" },
-
-  { id: 40, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
-  { id: 41, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
-  { id: 42, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
-
-  { id: 43, link: "/projects/sistent/components/collapse", text: "Collapse" },
-  { id: 44, link: "/projects/sistent/components/collapse/guidance", text: "Collapse" },
-  { id: 45, link: "/projects/sistent/components/collapse/code", text: "Collapse" },
-
-  { id: 46, link: "/projects/sistent/components/container", text: "Container" },
-  { id: 47, link: "/projects/sistent/components/container/guidance", text: "Container" },
-  { id: 48, link: "/projects/sistent/components/container/code", text: "Container" },
-
-  { id: 49, link: "/projects/sistent/components/dialog", text: "Dialog" },
-  { id: 50, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
-  { id: 51, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
-
-  { id: 52, link: "/projects/sistent/components/divider", text: "Divider" },
-  { id: 53, link: "/projects/sistent/components/divider/guidance", text: "Divider" },
-  { id: 54, link: "/projects/sistent/components/divider/code", text: "Divider" },
-
-  { id: 55, link: "/projects/sistent/components/drawer", text: "Drawer" },
-  { id: 56, link: "/projects/sistent/components/drawer/guidance", text: "Drawer" },
-  { id: 57, link: "/projects/sistent/components/drawer/code", text: "Drawer" },
-
-  { id: 58, link: "/projects/sistent/components/formcontrollabel", text: "FormControlLabel" },
-  { id: 59, link: "/projects/sistent/components/formcontrollabel/guidance", text: "FormControlLabel" },
-  { id: 60, link: "/projects/sistent/components/formcontrollabel/code", text: "FormControlLabel" },
-
-  { id: 61, link: "/projects/sistent/components/grid", text: "Grid" },
-  { id: 62, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
-  { id: 63, link: "/projects/sistent/components/grid/code", text: "Grid" },
-
-  { id: 64, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
-  { id: 65, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
-  { id: 66, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
-
-  { id: 67, link: "/projects/sistent/components/icons", text: "Icons" },
-  { id: 68, link: "/projects/sistent/components/icons/guidance", text: "Icons" },
-  { id: 69, link: "/projects/sistent/components/icons/code", text: "Icons" },
-
-  { id: 70, link: "/projects/sistent/components/link", text: "Link" },
-  { id: 71, link: "/projects/sistent/components/link/guidance", text: "Link" },
-  { id: 72, link: "/projects/sistent/components/link/code", text: "Link" },
-
-  { id: 73, link: "/projects/sistent/components/list", text: "List" },
-  { id: 74, link: "/projects/sistent/components/list/guidance", text: "List" },
-  { id: 75, link: "/projects/sistent/components/list/code", text: "List" },
-
-  { id: 76, link: "/projects/sistent/components/modal", text: "Modal" },
-  { id: 77, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
-  { id: 78, link: "/projects/sistent/components/modal/code", text: "Modal" },
-
-  { id: 79, link: "/projects/sistent/components/pagination", text: "Pagination" },
-  { id: 80, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
-  { id: 81, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
-
-  { id: 82, link: "/projects/sistent/components/paper", text: "Paper" },
-  { id: 83, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
-  { id: 84, link: "/projects/sistent/components/paper/code", text: "Paper" },
-
-  { id: 85, link: "/projects/sistent/components/popper", text: "Popper" },
-  { id: 86, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
-  { id: 87, link: "/projects/sistent/components/popper/code", text: "Popper" },
-
-  { id: 88, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
-  { id: 89, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
-  { id: 90, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
-
-  { id: 91, link: "/projects/sistent/components/select", text: "Select" },
-  { id: 92, link: "/projects/sistent/components/select/guidance", text: "Select" },
-  { id: 93, link: "/projects/sistent/components/select/code", text: "Select" },
-
-  { id: 94, link: "/projects/sistent/components/stack", text: "Stack" },
-  { id: 95, link: "/projects/sistent/components/stack/guidance", text: "Stack" },
-  { id: 96, link: "/projects/sistent/components/stack/code", text: "Stack" },
-
-  { id: 97, link: "/projects/sistent/components/stepper", text: "Stepper" },
-  { id: 98, link: "/projects/sistent/components/stepper/guidance", text: "Stepper" },
-  { id: 99, link: "/projects/sistent/components/stepper/code", text: "Stepper" },
-
-  { id: 100, link: "/projects/sistent/components/switch", text: "Switch" },
-  { id: 101, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
-  { id: 102, link: "/projects/sistent/components/switch/code", text: "Switch" },
-
-  { id: 103, link: "/projects/sistent/components/tabs", text: "Tabs" },
-  { id: 104, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
-  { id: 105, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
-
-  { id: 106, link: "/projects/sistent/components/text-field", text: "Text Field" },
-  { id: 107, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
-  { id: 108, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
-
-  { id: 109, link: "/projects/sistent/components/text-input", text: "Text Input" },
-  { id: 110, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
-  { id: 111, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
-
-  { id: 112, link: "/projects/sistent/components/toggle-button", text: "Toggle Button" },
-  { id: 113, link: "/projects/sistent/components/toggle-button/guidance", text: "Toggle Button" },
-  { id: 114, link: "/projects/sistent/components/toggle-button/code", text: "Toggle Button" },
-
-  { id: 115, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
-  { id: 116, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
-  { id: 117, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
-
-  { id: 118, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
-  { id: 119, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
-  { id: 120, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
-];
diff --git a/src/components/SistentNavigation/pagination.js b/src/components/SistentNavigation/pagination.js
index 00099891402eb..ea855f50854d6 100644
--- a/src/components/SistentNavigation/pagination.js
+++ b/src/components/SistentNavigation/pagination.js
@@ -1,31 +1,108 @@
 import React, { useEffect, useState } from "react";
+import { graphql, useStaticQuery } from "gatsby";
 
-import { content } from "./content";
 import Button from "../../reusecore/Button";
 import PaginationWrapper from "./pagination.style";
 
+const STABLE_ROUTES = [
+  // Getting Started
+  { link: "/projects/sistent/getting-started/about", text: "About" },
+  { link: "/projects/sistent/getting-started/installation", text: "Installation" },
+  { link: "/projects/sistent/getting-started/usage", text: "Usage" },
+  { link: "/projects/sistent/getting-started/tokens", text: "Tokens" },
+
+  // Identity
+  { link: "/projects/sistent/identity/color", text: "Colors" },
+  { link: "/projects/sistent/identity/color/guidance", text: "Colors" },
+  { link: "/projects/sistent/identity/color/code", text: "Colors" },
+  { link: "/projects/sistent/identity/spacing", text: "Spacing" },
+  { link: "/projects/sistent/identity/spacing/guidance", text: "Spacing" },
+  { link: "/projects/sistent/identity/spacing/code", text: "Spacing" },
+  { link: "/projects/sistent/identity/typography", text: "Typography" },
+  { link: "/projects/sistent/identity/typography/guidance", text: "Typography" },
+  { link: "/projects/sistent/identity/typography/code", text: "Typography" },
+];
+
+const PAGE_TYPE_ORDER = {
+  overview: 1,
+  guidance: 2,
+  code: 3,
+};
+
 const SistentPagination = () => {
   const [currentPage, setCurrentPage] = useState(0);
 
+  const data = useStaticQuery(graphql`
+    query SistentPaginationNav {
+      allMdx(
+        filter: {
+          fields: { collection: { eq: "sistent" } }
+        }
+      ) {
+        nodes {
+          frontmatter {
+            name
+            component
+            published
+          }
+          fields {
+            slug
+            pageType
+          }
+        }
+      }
+    }
+  `);
+
+  // Compile set of published components based on overview pages
+  const publishedComponents = new Set();
+  data.allMdx.nodes.forEach((node) => {
+    if (node.fields.pageType === "overview" && node.frontmatter.published === true) {
+      publishedComponents.add(node.frontmatter.component);
+    }
+  });
+
+  // Map, filter out drafts, and group by tab order: overview -> guidance -> code
+  const dynamicRoutes = data.allMdx.nodes
+    .map((node) => ({
+      componentSlug: node.frontmatter.component,
+      name: node.frontmatter.name || node.frontmatter.component,
+      link: node.fields.slug,
+      pageType: node.fields.pageType,
+    }))
+    .filter((node) => publishedComponents.has(node.componentSlug))
+    .sort((a, b) => {
+      if (a.componentSlug !== b.componentSlug) {
+        return (a.componentSlug || "").localeCompare(b.componentSlug || "");
+      }
+      return (
+        (PAGE_TYPE_ORDER[a.pageType] || 99) - (PAGE_TYPE_ORDER[b.pageType] || 99)
+      );
+    });
+
+  const fullContentArray = [...STABLE_ROUTES, ...dynamicRoutes];
+
   useEffect(() => {
     const path = window.location.pathname;
-    const index = content.findIndex((x) => x.link === path);
+    // Handle trajectory slashes
+    const cleanPath = path.endsWith("/") && path.length > 1 ? path.slice(0, -1) : path;
+    const index = fullContentArray.findIndex((x) => x.link === cleanPath);
     setCurrentPage(index);
-  }, []);
+  }, [fullContentArray]);
 
   return (
     <PaginationWrapper>
       {currentPage > 0 ? (
-        <Button $secondary $url={content[currentPage - 1]?.link}>
+        <Button $secondary $url={fullContentArray[currentPage - 1]?.link}>
           &larr; Previous
         </Button>
-      ) : null}
+      ) : <div />}
 
-      {currentPage < content.length - 1 ? (
-        <Button $primary $url={content[currentPage + 1]?.link}>
+      {currentPage !== -1 && currentPage < fullContentArray.length - 1 ? (
+        <Button $primary $url={fullContentArray[currentPage + 1]?.link}>
           Next &rarr;
         </Button>
-      ) : null}
+      ) : <div />}
     </PaginationWrapper>
   );
 };