diff --git a/src/components/Detail/InfoView.astro b/src/components/Detail/InfoView.astro
new file mode 100644
index 0000000..1a0d36f
--- /dev/null
+++ b/src/components/Detail/InfoView.astro
@@ -0,0 +1,26 @@
+---
+
+const { re } = Astro.props
+
+function formatTime(seconds) {
+    if (seconds === 0) return null
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    let result = "";
+    if (h > 0) result += `${h}h`;
+    if (m > 0) result += `${m}m`;
+    if (result === "") result = "0m";
+    return result;
+}
+
+const workTime = formatTime(re.worktime)
+const waitTime = formatTime(re.waittime)
+---
+
+<p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
+<div class="flex pt-1 items-center">
+    {re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
+    {workTime && (<p class="border-r px-2">{workTime} Work</p>)}
+    {waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
+    {re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
+</div>
\ No newline at end of file
diff --git a/src/components/Detail/StepView.astro b/src/components/Detail/StepView.astro
new file mode 100644
index 0000000..d725388
--- /dev/null
+++ b/src/components/Detail/StepView.astro
@@ -0,0 +1,13 @@
+---
+const { steps } = Astro.props
+---
+
+<div class="md:ml-5 mt-2 md:mt-0">
+    <p class="text-[22pt] font-bold md:hidden">Steps</p>
+    { steps.map(s => (
+        <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3 md:">
+            <p class="text-bold text-[10pt]">Step {s.index + 1}</p>
+            <p>{s.instruction}</p>
+        </div>
+    )) }
+</div>
\ No newline at end of file
diff --git a/src/pages/recipe/[recipeid].astro b/src/pages/recipe/[recipeid].astro
index 1dedf6d..052862f 100644
--- a/src/pages/recipe/[recipeid].astro
+++ b/src/pages/recipe/[recipeid].astro
@@ -3,6 +3,8 @@ import client from "@/data/pocketbase";
 import SiteLayout from "@/layouts/base";
 import ImageCarousel from "@/components/Detail/ImageCarousel";
 import IngredientTableView from "@/components/Detail/IngredientTableView";
+import StepView from "@/components/Detail/StepView";
+import InfoView from "@/components/Detail/InfoView";
 
 const { recipeid } = Astro.params;
 
@@ -23,20 +25,6 @@ const ingredients = await Promise.all(
         await client.collection("ingredients").getOne(s)
     )
 )
-
-function formatTime(seconds) {
-    if (seconds === 0) return null
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    let result = "";
-    if (h > 0) result += `${h}h`;
-    if (m > 0) result += `${m}m`;
-    if (result === "") result = "0m";
-    return result;
-}
-
-const workTime = formatTime(re.worktime)
-const waitTime = formatTime(re.waittime)
 ---
 
 <SiteLayout>
@@ -46,13 +34,7 @@ const waitTime = formatTime(re.waittime)
             <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
 
             <!-- Details -->
-            <p class="text-white/60 text-sm mt-1 italic">{re.description}</p>
-            <div class="flex pt-1 items-center">
-                {re.servings !== 0 && (<p class="border-r pr-2">Serves: {re.servings}</p>)}
-                {workTime && (<p class="border-r px-2">{workTime} Work</p>)}
-                {waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
-                {re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
-            </div>
+            <InfoView re={re} />
 
             <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
             <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
@@ -62,17 +44,7 @@ const waitTime = formatTime(re.waittime)
             <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
 
             <!-- Steps -->
-            <div class="md:ml-5 mt-2 md:mt-0">
-                <p class="text-[22pt] font-bold md:hidden">Steps</p>
-                { steps.map(s => (
-                    <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3 md:">
-                        <p class="text-bold text-[10pt]">Step {s.index + 1}</p>
-                        <p>{s.instruction}</p>
-                    </div>
-                )) }
-            </div>
-
-            
+            <StepView steps={steps} />
         </div>
 
     </div>