diff --git a/src/lib/components/ComponentIndex/CardList.svelte b/src/lib/components/ComponentIndex/CardList.svelte
index 39053e3f1..3835f0c82 100644
--- a/src/lib/components/ComponentIndex/CardList.svelte
+++ b/src/lib/components/ComponentIndex/CardList.svelte
@@ -1,9 +1,10 @@
 <script>
 	export let title;
+	export let id = `category-${encodeURI(title)}`;
 </script>
 
 <div class="list">
-	<h1 id="category-{encodeURI(title)}">{title} <a href="#category-{encodeURI(title)}">#</a></h1>
+	<h1 {id}>{title} <a href="#{id}">#</a></h1>
 	<div class="grid">
 		<slot />
 	</div>
diff --git a/src/routes/components/index.svelte b/src/routes/components/index.svelte
index 63323deb1..8e4cf4286 100644
--- a/src/routes/components/index.svelte
+++ b/src/routes/components/index.svelte
@@ -46,6 +46,23 @@
 		.sort(compare(sorting));
 	$: categories = extractUnique(dataToDisplay, 'category');
 	$: filterTag = selectedTags?.map((obj) => obj.value) || [];
+
+	const categoryId = {
+		Animations: 'animations',
+		'Data Visualisation': 'data-vis',
+		'Design Pattern': 'design-patterns',
+		'Design System': 'design-systems',
+		'Developer Experience': 'dx',
+		'Forms & User Input': 'input',
+		Integration: 'integrations',
+		'Rich Text Editor': 'text-editors',
+		Routers: 'routers',
+		Stores: 'stores',
+		'SvelteKit Adapters': 'adapters',
+		Testing: 'testing',
+		Unclassified: 'unclassified',
+		'User Interaction': 'ui'
+	};
 </script>
 
 <svelte:head>
@@ -100,7 +117,10 @@
 	</section>
 	<section slot="items">
 		{#each categories as category}
-			<List title={category.label || 'Unclassified'}>
+			<List
+				title={category.label || 'Unclassified'}
+				id={categoryId[category.label || 'Unclassified'] || category.label}
+			>
 				{#each dataToDisplay.filter((d) => d.category === category.value) as data}
 					<ComponentCard {...data} manager={$packageManager} />
 				{/each}