diff --git a/web/src/components/detail/InfoView.astro b/web/src/components/detail/InfoView.astro
new file mode 100644
index 0000000..0ef9e3e
--- /dev/null
+++ b/web/src/components/detail/InfoView.astro
@@ -0,0 +1,29 @@
+---
+import TagRow from "@component/tagRow";
+
+
+const { cookTime, prepTime, description, servings, rating, tags } = Astro.props
+
+function formatTimeMin(minutes: number) {
+    if (minutes === 0) return null
+    const h = Math.floor(minutes / 60);
+    const m = minutes % 60;
+    let result = "";
+    if (h > 0) result += `${h}h`;
+    if (m > 0) result += `${m}m`;
+    if (result === "") result = "0m";
+    return result;
+}
+
+// const workTime = formatTimeMin(re.worktime)
+// const waitTime = formatTimeMin(re.waittime)
+---
+
+<p class="text-white/60 text-sm mt-1 italic">{description}</p>
+<div class="flex pt-1 items-center">
+    {servings !== 0 && (<p class="border-r pr-2">Serves: {servings}</p>)}
+    {prepTime && (<p class="border-r px-2">{prepTime} Prep</p>)}
+    {cookTime && (<p class=" px-2">{cookTime} Cook</p>)}
+    <!-- {rating !== 0 && (<p class="pl-2">{rating}</p><p class="text-white/40 text-xs">/10</p>)} -->
+</div>
+<TagRow tags={tags}/>
\ No newline at end of file
diff --git a/web/src/pages/recipe/[id].astro b/web/src/pages/recipe/[id].astro
index 739a04b..fadcc70 100644
--- a/web/src/pages/recipe/[id].astro
+++ b/web/src/pages/recipe/[id].astro
@@ -1,12 +1,16 @@
 ---
 import Base from "@layout/Base";
 import ImageCarousel from "@component/detail/ImageCarousel";
+import InfoView from "@component/detail/InfoView";
+import { Recipe } from "@tmlmt/cooklang-parser";
 import { authPB } from "@data/pb";
 
 const { id } = Astro.params
-
 const pb = await authPB()
+
 const re = await pb.collection('recipes').getOne(id as string)
+const recipe = new Recipe(re.cooklang)
+
 const images = await Promise.all(
     re.images.map(r => pb.files.getURL(re, r))
 )
@@ -16,10 +20,16 @@ const images = await Promise.all(
     <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>
+            <p class="text-[28pt] font-bold leading-11 mt-2">{recipe.metadata.title ?? "Untitled Recipe"}</p>
 
             <!-- Details -->
-            <!-- <InfoView re={re} /> -->
+            <InfoView 
+                prepTime={recipe.metadata["prep time"]}
+                cookTime={recipe.metadata["cook time"]}
+                description={recipe.metadata.description}
+                servings={recipe.metadata.servings}
+                tags={recipe.metadata.tags}
+            />
 
             <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
             <!-- <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={re.expand.ingredients ?? []}  /> -->