diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index a7243278..bc8c5567 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -10,7 +10,7 @@
         "@clack/prompts": "^0.11.0",
         "@heroicons/react": "^2.2.0",
         "@node-core/rehype-shiki": "1.3.0",
-        "@node-core/ui-components": "1.5.3",
+        "@node-core/ui-components": "1.5.6",
         "@orama/orama": "^3.1.18",
         "@orama/ui": "^1.5.4",
         "@rollup/plugin-virtual": "^3.0.2",
@@ -1046,9 +1046,9 @@
       }
     },
     "node_modules/@node-core/ui-components": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@node-core/ui-components/-/ui-components-1.5.3.tgz",
-      "integrity": "sha512-ww9cC/RmmonsDOP5eFy/Qzg8ftnOK0AyDl5lsqybeVoVs52++yqL/fBMcFAdssXF1bd04XUCFIil/HhDgL8SSw==",
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@node-core/ui-components/-/ui-components-1.5.6.tgz",
+      "integrity": "sha512-f6N+UQAFKqRjUP4VoybkuFG0Nmm7/Yox7RhdDxEdT19WtfuvGDRQPxB1SHclHvr3sZ0QjeY3x00F6gB2lnEoEw==",
       "dependencies": {
         "@heroicons/react": "^2.2.0",
         "@orama/ui": "^1.5.4",
diff --git a/package.json b/package.json
index 4c55d7c3..bda8052a 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@clack/prompts": "^0.11.0",
     "@heroicons/react": "^2.2.0",
     "@node-core/rehype-shiki": "1.3.0",
-    "@node-core/ui-components": "1.5.3",
+    "@node-core/ui-components": "1.5.6",
     "@orama/orama": "^3.1.18",
     "@orama/ui": "^1.5.4",
     "@rollup/plugin-virtual": "^3.0.2",
diff --git a/src/generators/jsx-ast/utils/buildBarProps.mjs b/src/generators/jsx-ast/utils/buildBarProps.mjs
index cd42bfdd..047bf2b3 100644
--- a/src/generators/jsx-ast/utils/buildBarProps.mjs
+++ b/src/generators/jsx-ast/utils/buildBarProps.mjs
@@ -68,6 +68,7 @@ const extractHeading = entry => {
     value: heading,
     stability: parseInt(entry.stability?.children[0]?.data.index ?? 2),
     slug: data.slug,
+    data: { id: data.slug },
   };
 };
 
diff --git a/src/generators/jsx-ast/utils/buildContent.mjs b/src/generators/jsx-ast/utils/buildContent.mjs
index 0fcffa19..030bfd6b 100644
--- a/src/generators/jsx-ast/utils/buildContent.mjs
+++ b/src/generators/jsx-ast/utils/buildContent.mjs
@@ -258,8 +258,8 @@ export const processEntry = (entry, remark) => {
 /**
  * Builds the overall document layout tree
  * @param {Array<ApiDocMetadataEntry>} entries - API documentation metadata entries
- * @param {Record<string, any>} sideBarProps - Props for the sidebar component
- * @param {Record<string, any>} metaBarProps - Props for the meta bar component
+ * @param {ReturnType<import('./buildBarProps.mjs').buildSideBarProps>} sideBarProps - Props for the sidebar component
+ * @param {ReturnType<buildMetaBarProps>} metaBarProps - Props for the meta bar component
  * @param {import('unified').Processor} remark - The remark processor
  */
 export const createDocumentLayout = (
@@ -274,10 +274,17 @@ export const createDocumentLayout = (
       children: [
         createJSXElement(JSX_IMPORTS.SideBar.name, sideBarProps),
         createElement('div', [
-          createElement(
-            'main',
-            entries.map(entry => processEntry(entry, remark))
-          ),
+          createElement('div', [
+            createJSXElement(JSX_IMPORTS.TableOfContents.name, {
+              headings: metaBarProps.headings,
+              summaryTitle: 'On this page',
+            }),
+            createElement('br'),
+            createElement(
+              'main',
+              entries.map(entry => processEntry(entry, remark))
+            ),
+          ]),
           createJSXElement(JSX_IMPORTS.MetaBar.name, metaBarProps),
         ]),
       ],
diff --git a/src/generators/web/constants.mjs b/src/generators/web/constants.mjs
index 27bcf0be..8a18f8d9 100644
--- a/src/generators/web/constants.mjs
+++ b/src/generators/web/constants.mjs
@@ -11,7 +11,6 @@ export const ROOT = dirname(fileURLToPath(import.meta.url));
  */
 
 /**
- * @type {Record<string, JSXImportConfig>}
  * An object containing mappings for various JSX components to their import paths.
  */
 export const JSX_IMPORTS = {
@@ -50,6 +49,10 @@ export const JSX_IMPORTS = {
     isDefaultExport: false,
     source: '@node-core/ui-components/MDX/Tooltip',
   },
+  TableOfContents: {
+    name: 'TableOfContents',
+    source: '@node-core/ui-components/Common/TableOfContents',
+  },
   ChangeHistory: {
     name: 'ChangeHistory',
     source: '@node-core/ui-components/Common/ChangeHistory',
diff --git a/src/generators/web/ui/components/MetaBar/index.jsx b/src/generators/web/ui/components/MetaBar/index.jsx
index 129b8554..b5d8d5e4 100644
--- a/src/generators/web/ui/components/MetaBar/index.jsx
+++ b/src/generators/web/ui/components/MetaBar/index.jsx
@@ -36,7 +36,7 @@ export default ({
   <MetaBar
     heading="Table of Contents"
     headings={{
-      items: headings.map(({ slug, value, stability, ...heading }) => ({
+      items: headings.map(({ value, stability, ...heading }) => ({
         ...heading,
         value:
           stability !== 2 ? (
@@ -53,7 +53,6 @@ export default ({
           ) : (
             value
           ),
-        data: { id: slug },
       })),
     }}
     items={{