diff --git a/web/src/components/detail/ImageCarousel.astro b/web/src/components/detail/ImageCarousel.astro
new file mode 100644
index 0000000..784bf16
--- /dev/null
+++ b/web/src/components/detail/ImageCarousel.astro
@@ -0,0 +1,47 @@
+---
+import { authPB } from "@data/pb"
+const { class: className, images } = Astro.props
+
+---
+
+<script>
+    let pos = 0;
+    const dataElement = document.getElementById('carousel-data');
+    const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
+    const cap = links.length - 1;
+    const img = document.getElementById('carousel-img') as HTMLImageElement;
+
+    if (cap == 0) {
+        const b0 = document.getElementById('dec-button')
+        const b1 = document.getElementById('inc-button')
+
+        b0!.hidden = true
+        b1!.hidden = true
+    }
+    
+    function inc() { 
+        pos = pos === cap ? 0 : pos + 1;
+        if (img) img.src = links[pos];
+    }
+    
+    function dec() { 
+        pos = pos === 0 ? cap : pos - 1;
+        if (img) img.src = links[pos];
+    }
+    
+    // make functions globally accessible
+    (window as any).inc = inc;
+    (window as any).dec = dec;
+</script>
+
+<div class={className}>
+    <!-- Hidden element to pass server data to client -->
+    <div class="hidden" id="carousel-data">{JSON.stringify(images)}</div>
+    
+    <div class="relative flex items-center w-full h-60">
+        <button id="dec-button" class="absolute left-2" onclick="dec()">&lt;</button>
+        <img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={images[0]} />
+        <!-- <div class="w-70 h-60 bg-green-600" /> -->
+        <button id="inc-button" class="absolute right-2" onclick="inc()">&gt;</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro
index 5686540..4fe5f1c 100644
--- a/web/src/layouts/Base.astro
+++ b/web/src/layouts/Base.astro
@@ -1,6 +1,7 @@
 ---
 import BaseHead from '@component/BaseHead'
 import Header from '@component/Header'
+import "../styles/global.css";
 ---
 
 <html lang=en>
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index c7c551f..4dcad1f 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -16,7 +16,8 @@ const images = await Promise.all(
 ---
 
 <Base>
-	{
+	<div class="grid gap-3 grid-cols-1 py-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
+		{
 		recipes.map((r, i) => (
 			<RecipeCard
 				id={ids[i]}
@@ -27,4 +28,5 @@ const images = await Promise.all(
 			/>
 		))
 	}
+	</div>
 </Base>
\ No newline at end of file
diff --git a/web/src/pages/recipe/[id].astro b/web/src/pages/recipe/[id].astro
new file mode 100644
index 0000000..739a04b
--- /dev/null
+++ b/web/src/pages/recipe/[id].astro
@@ -0,0 +1,34 @@
+---
+import Base from "@layout/Base";
+import ImageCarousel from "@component/detail/ImageCarousel";
+import { authPB } from "@data/pb";
+
+const { id } = Astro.params
+
+const pb = await authPB()
+const re = await pb.collection('recipes').getOne(id as string)
+const images = await Promise.all(
+    re.images.map(r => pb.files.getURL(re, r))
+)
+---
+
+<Base>
+    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
+        <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
+            <ImageCarousel class="w-full" images={images} />
+            <p class="text-[28pt] font-bold leading-11 mt-2">{re.name}</p>
+
+            <!-- Details -->
+            <!-- <InfoView re={re} /> -->
+
+            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
+            <!-- <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={re.expand.ingredients ?? []}  /> -->
+        </div>
+        
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
+            <!-- Steps -->
+            <!-- <StepView class="md:ml-3" steps={re.expand.steps ?? []} /> -->
+        </div>
+
+    </div>
+</Base>
\ No newline at end of file
