diff --git a/web/src/components/index/card.astro b/web/src/components/index/card.astro
index 92a5465..d9c80db 100644
--- a/web/src/components/index/card.astro
+++ b/web/src/components/index/card.astro
@@ -1,13 +1,27 @@
 ---
+import TagRow from "@component/tagRow"
 
-const { title, description, tags } = Astro.props
+const { id, title, description, tags, image } = Astro.props
 
 ---
 
-<div>
-    {title}<br>
+<div class="relative z-0 flex h-50">
+<img
+        class="w-full h-full object-cover rounded-xl"
+        src={ image }
+    />
 
-    {description}<br>
+    <div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-20 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
+        <p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold line-clamp-1" >{title}</p>
+        <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
 
-    {tags.join(", ")}<br>
+        <div id="tag-row" class="">
+            <TagRow tags={tags}/>
+        </div>
+    </div>
+
+    <a id="link" href={`/recipe/${id}`} class="absolute inset-0 z-0">
+        <span class="block w-full h-full hover:bg-black/10 transition-colors">
+        </span>
+    </a>
 </div>
\ No newline at end of file
diff --git a/web/src/components/tagRow.astro b/web/src/components/tagRow.astro
new file mode 100644
index 0000000..fd66f82
--- /dev/null
+++ b/web/src/components/tagRow.astro
@@ -0,0 +1,16 @@
+---
+const { tags } = Astro.props
+---
+
+<div class="">
+    {
+        (tags ?? []).map(tag => (
+            <a 
+                href={`/tags/${tag}`}
+                class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30" 
+            >
+                {tag}
+            </a>
+        ))
+    }
+</div>
\ No newline at end of file
diff --git a/web/src/data/pb.ts b/web/src/data/pb.ts
index 6b8fb43..31b2f76 100644
--- a/web/src/data/pb.ts
+++ b/web/src/data/pb.ts
@@ -1,7 +1,5 @@
 import PocketBase from "pocketbase";
 
-console.log("STUFF", import.meta.env.PUBLIC_PB_URL)
-
 const pb = new PocketBase(import.meta.env.PUBLIC_PB_URL);
 pb.autoCancellation(false)
 
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index b638b5d..c7c551f 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -3,20 +3,27 @@ import { Recipe } from "@tmlmt/cooklang-parser"
 import { authPB } from "@data/pb";
 import RecipeCard from "@component/index/card"
 import Base from "@layout/Base";
+import { record } from "astro:schema";
 
 const pb = await authPB()
 const records = await pb.collection('recipes').getFullList()
 
 const recipes = records.map(r => new Recipe(r.cooklang))
+const ids = records.map(r => r.id)
+const images = await Promise.all(
+	records.map(r => pb.files.getURL(r, r.images[0])) // get first image from each recipe as a cover image
+)
 ---
 
 <Base>
 	{
-		recipes.map(r => (
+		recipes.map((r, i) => (
 			<RecipeCard
+				id={ids[i]}
 				title={r.metadata.title ?? "Untitled Recipe"}
 				description={r.metadata.description ?? "No Description"}
 				tags={r.metadata.tags ?? []}
+				image={images[i]}
 			/>
 		))
 	}