diff --git a/web/src/lib/components/kit/ToolCard.svelte b/web/src/lib/components/kit/ToolCard.svelte
index 44821eb..0858635 100644
--- a/web/src/lib/components/kit/ToolCard.svelte
+++ b/web/src/lib/components/kit/ToolCard.svelte
@@ -6,17 +6,15 @@
 
 	interface Props {
 		title: string;
-		href: string;
+		id: string;
 		description?: string;
 		index?: number;
 		icon?: Component<{ size?: number; class?: string }>;
 	}
-	let { title, href, description, index, icon }: Props = $props();
-
-	let normalizedHref = $derived(href === "#" ? "/" : href);
+	let { title, id, description, index, icon }: Props = $props();
 </script>
 
-<a class="tool-card" href={resolve(normalizedHref)}>
+<a class="tool-card" href={resolve("/preview/tools/[id]", { id })}>
 	{#if icon}<span class="tool-icon"><Icon {icon} size={19} /></span>{/if}
 	<span class="tool-copy">
 		<strong>{title}</strong>
diff --git a/web/src/routes/preview/+page.svelte b/web/src/routes/preview/+page.svelte
index 092e6c1..32328ea 100644
--- a/web/src/routes/preview/+page.svelte
+++ b/web/src/routes/preview/+page.svelte
@@ -47,7 +47,7 @@
 			{#each results as tool (tool.id)}
 				<ToolCard
 					title={tool.title}
-					href="/preview/tools/{tool.id}"
+					id={tool.id}
 					description={tool.description}
 				/>
 			{/each}
diff --git a/web/src/routes/preview/kit/+page.svelte b/web/src/routes/preview/kit/+page.svelte
index 086dd1b..522ec3d 100644
--- a/web/src/routes/preview/kit/+page.svelte
+++ b/web/src/routes/preview/kit/+page.svelte
@@ -22,7 +22,10 @@
 	import IconButton from "$lib/components/kit/ui/IconButton.svelte";
 	import Segmented from "$lib/components/kit/ui/Segmented.svelte";
 	import Toggle from "$lib/components/kit/ui/Toggle.svelte";
-	import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
+	import { Download, ImageOff, Plus, Trash2 } from "@lucide/svelte";
+
+	import { TOOLS } from "$lib/registry-new";
+	import { TOOL_ICONS } from "$lib/preview/tool-icons";
 
 	let mode = $state("preview");
 	let radius = $state(8);
@@ -32,23 +35,9 @@
 	let lossless = $state(true);
 	let animated = $state(false);
 
-	const tools = [
-		{
-			title: "Gradient",
-			href: "#",
-			description: "Linear & radial gradients",
-		},
-		{
-			title: "Resize",
-			href: "#",
-			description: "Pixel-perfect scaling",
-		},
-		{
-			title: "Quantize",
-			href: "#",
-			description: "Reduce color depth",
-		},
-	];
+	const showcaseTools = TOOLS.filter((tool) =>
+		["linear-gradient-png", "resize-png", "quantize-png"].includes(tool.id),
+	);
 </script>
 
 <div class="showcase">
@@ -152,13 +141,13 @@
 
 	<Panel title="Tools" eyebrow="catalog">
 		<div class="tool-grid">
-			{#each tools as tool, i (tool.title)}
+			{#each showcaseTools as tool, i (tool.id)}
 				<ToolCard
 					title={tool.title}
-					href={tool.href}
+					id={tool.id}
 					description={tool.description}
 					index={i + 1}
-					icon={Palette}
+					icon={TOOL_ICONS[tool.id]}
 				/>
 			{/each}
 		</div>
diff --git a/web/src/routes/preview/list-tools/+page.svelte b/web/src/routes/preview/list-tools/+page.svelte
index 2415530..62aa97a 100644
--- a/web/src/routes/preview/list-tools/+page.svelte
+++ b/web/src/routes/preview/list-tools/+page.svelte
@@ -33,7 +33,7 @@
 				{#each group.tools as tool, i (tool.id)}
 					<ToolCard
 						title={tool.title}
-						href={`/preview/tools/${tool.id}`}
+						id={tool.id}
 						description={tool.description}
 						index={i + 1}
 						icon={TOOL_ICONS[tool.id]}