diff --git a/web/astro.config.mjs b/web/astro.config.mjs
index a3294cb..7630e26 100644
--- a/web/astro.config.mjs
+++ b/web/astro.config.mjs
@@ -7,6 +7,8 @@ import tailwindcss from '@tailwindcss/vite';
 
 // https://astro.build/config
 export default defineConfig({
+  output: 'server',
+
   adapter: node({
     mode: 'standalone'
   }),
diff --git a/web/src/components/index/card.astro b/web/src/components/index/card.astro
new file mode 100644
index 0000000..92a5465
--- /dev/null
+++ b/web/src/components/index/card.astro
@@ -0,0 +1,13 @@
+---
+
+const { title, description, tags } = Astro.props
+
+---
+
+<div>
+    {title}<br>
+
+    {description}<br>
+
+    {tags.join(", ")}<br>
+</div>
\ No newline at end of file
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 1aa593f..b638b5d 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -1,6 +1,23 @@
 ---
+import { Recipe } from "@tmlmt/cooklang-parser"
 import { authPB } from "@data/pb";
+import RecipeCard from "@component/index/card"
+import Base from "@layout/Base";
 
 const pb = await authPB()
+const records = await pb.collection('recipes').getFullList()
+
+const recipes = records.map(r => new Recipe(r.cooklang))
 ---
 
+<Base>
+	{
+		recipes.map(r => (
+			<RecipeCard
+				title={r.metadata.title ?? "Untitled Recipe"}
+				description={r.metadata.description ?? "No Description"}
+				tags={r.metadata.tags ?? []}
+			/>
+		))
+	}
+</Base>
\ No newline at end of file