diff --git a/sites/next.skeleton.dev/src/components/docs/NavGrid.astro b/sites/next.skeleton.dev/src/components/docs/NavGrid.astro
index be1e6df94..2727ce596 100644
--- a/sites/next.skeleton.dev/src/components/docs/NavGrid.astro
+++ b/sites/next.skeleton.dev/src/components/docs/NavGrid.astro
@@ -25,7 +25,7 @@ const sortByOrder = (a: CollectionEntry<'docs'>, b: CollectionEntry<'docs'>) =>
 		collectionItems.sort(sortByOrder).map((item) => (
 			<>
 				<a
-					href={`/${collection}/${item.slug}`}
+					href={`/${collection}/${item.id}`}
 					class="card bg-surface-50-950 border-[1px] border-surface-200-800 hover:preset-tonal space-y-2 p-4 md:p-8"
 				>
 					<h3 class="h5">{item.data.title}</h3>
diff --git a/sites/next.skeleton.dev/src/components/docs/TableCookbook.astro b/sites/next.skeleton.dev/src/components/docs/TableCookbook.astro
index 649cb999f..e69884c1a 100644
--- a/sites/next.skeleton.dev/src/components/docs/TableCookbook.astro
+++ b/sites/next.skeleton.dev/src/components/docs/TableCookbook.astro
@@ -26,7 +26,7 @@ const tableData = await getCollection(collection, (item) => {
 						</td>
 						{/* <td class="text-right text-xs opacity-60">{row.data.pubDate?.toLocaleDateString()}</td> */}
 						<td class="text-right">
-							<a href={`/${collection}/${row.slug}`} class="btn preset-tonal hover:preset-filled">
+							<a href={`/${collection}/${row.id}`} class="btn preset-tonal hover:preset-filled">
 								Explore &rarr;
 							</a>
 						</td>
diff --git a/sites/next.skeleton.dev/src/pages/docs/[...slug]/index.astro b/sites/next.skeleton.dev/src/pages/docs/[...slug]/index.astro
index 64e1dbe05..007430477 100644
--- a/sites/next.skeleton.dev/src/pages/docs/[...slug]/index.astro
+++ b/sites/next.skeleton.dev/src/pages/docs/[...slug]/index.astro
@@ -19,14 +19,15 @@ export const getStaticPaths = (async () => {
 const { page } = Astro.props;
 const { Content, remarkPluginFrontmatter } = await render(page);
 
+let meta: Awaited<ReturnType<typeof getEntry>>;
 if (page.id.startsWith('components/')) {
-	const meta = await getEntry('docs', page.id.replace(/\/[^\/]*$/, '/meta'));
+	meta = await getEntry('docs', page.id.replace(/\/[^\/]*$/, '/meta'));
 	if (meta !== undefined) {
 		Object.assign(remarkPluginFrontmatter, meta.data);
 	}
 }
 ---
 
-<LayoutRoot title={meta ? meta.data.title : entry.data.title} description={meta ? meta.data.title : entry.data.description}>
+<LayoutRoot title={meta ? meta.data.title : page.data.title} description={meta ? meta.data.title : page.data.description}>
 	<Content />
 </LayoutRoot>