diff --git a/src/pages/index.astro b/src/pages/index.astro
index 906caf3..dfe985d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -13,7 +13,9 @@ const recipies = await client.collection("recipes").getFullList()
 		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
 			{
 				recipies.map(r => (
-					<OverviewCard recipe={r} />
+					<a href={`/recipe/${r.id}`}>
+						<OverviewCard recipe={r} />
+					</a>
 				))
 			}
 		</div>
diff --git a/src/pages/recipe/[slug].astro b/src/pages/recipe/[slug].astro
new file mode 100644
index 0000000..c37584b
--- /dev/null
+++ b/src/pages/recipe/[slug].astro
@@ -0,0 +1,9 @@
+---
+import client from "@/data/pocketbase";
+const { slug } = Astro.params;
+
+const re = await client.collection("recipes").getOne(slug ?? "0");
+
+---
+
+{re.name}
\ No newline at end of file