diff --git a/api/pb_migrations/1755041844_created_ingredients.js b/api/pb_migrations/1755041844_created_ingredients.js
new file mode 100644
index 0000000..cd01b49
--- /dev/null
+++ b/api/pb_migrations/1755041844_created_ingredients.js
@@ -0,0 +1,97 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "number2683508278",
+        "max": null,
+        "min": null,
+        "name": "quantity",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text3703245907",
+        "max": 0,
+        "min": 0,
+        "name": "unit",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_3146854971",
+    "indexes": [],
+    "listRule": null,
+    "name": "ingredients",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3146854971");
+
+  return app.delete(collection);
+})
diff --git a/api/pb_migrations/1755041886_updated_recipes.js b/api/pb_migrations/1755041886_updated_recipes.js
new file mode 100644
index 0000000..bd0603b
--- /dev/null
+++ b/api/pb_migrations/1755041886_updated_recipes.js
@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // add field
+  collection.fields.addAt(8, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_3146854971",
+    "hidden": false,
+    "id": "relation1264587087",
+    "maxSelect": 999,
+    "minSelect": 0,
+    "name": "ingredients",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_842702175")
+
+  // remove field
+  collection.fields.removeById("relation1264587087")
+
+  return app.save(collection)
+})
diff --git a/api/pb_migrations/1755042306_updated_ingredients.js b/api/pb_migrations/1755042306_updated_ingredients.js
new file mode 100644
index 0000000..547ebf9
--- /dev/null
+++ b/api/pb_migrations/1755042306_updated_ingredients.js
@@ -0,0 +1,28 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3146854971")
+
+  // update collection data
+  unmarshal({
+    "createRule": "",
+    "deleteRule": "",
+    "listRule": "",
+    "updateRule": "",
+    "viewRule": ""
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3146854971")
+
+  // update collection data
+  unmarshal({
+    "createRule": null,
+    "deleteRule": null,
+    "listRule": null,
+    "updateRule": null,
+    "viewRule": null
+  }, collection)
+
+  return app.save(collection)
+})
diff --git a/src/components/Detail/ImageCarousel.astro b/src/components/Detail/ImageCarousel.astro
index e7f09d2..4f23d3c 100644
--- a/src/components/Detail/ImageCarousel.astro
+++ b/src/components/Detail/ImageCarousel.astro
@@ -49,9 +49,9 @@ const links = await Promise.all(
     <!-- Hidden element to pass server data to client -->
     <div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
     
-    <div class="relative flex items-center w-70 h-60">
+    <div class="relative flex items-center w-full md:w-80 h-60">
         <button id="dec-button" class="absolute left-2" onclick="dec()">PREV</button>
-        <img id="carousel-img" class="w-full h-full object-contain" src={links[0]} />
+        <img id="carousel-img" class="w-full h-full object-cover" src={links[0]} />
         <!-- <div class="w-70 h-60 bg-green-600" /> -->
         <button id="inc-button" class="absolute right-2" onclick="inc()">NEXT</button>
     </div>
diff --git a/src/pages/recipe/[recipeid].astro b/src/pages/recipe/[recipeid].astro
index 4b0c6fc..0158bd1 100644
--- a/src/pages/recipe/[recipeid].astro
+++ b/src/pages/recipe/[recipeid].astro
@@ -15,16 +15,36 @@ const steps = await Promise.all(
     )
 )
 
+const ingredients = await Promise.all(
+    re.ingredients.map(async s =>
+        await client.collection("ingredients").getOne(s)
+    )
+)
 ---
 
 <SiteLayout>
-    <div class="flex">
-        <ImageCarousel recipe={re} />
-
-        <div class="flex flex-col pl-4">
-            <p class=" text-[28pt] font-bold">{re.name}</p>
-            
-            {steps.map(a => (<p>{a.instruction}</p>))}
+    <div class="flex flex-col">
+        <div class="flex flex-col md:flex-row">
+            <ImageCarousel recipe={re} />
+            <!-- Title -->
+            <p class=" text-[28pt] font-bold md:pl-5">{re.name}</p>
         </div>
+
+        <!-- Ingredients -->
+        <div class="bg-[#2a2b2c] rounded-lg md:w-80 md:mt-4 grid grid-cols-3 px-4 text-center">
+            <span class="font-bold">Quantity</span>
+            <span class="font-bold">Unit</span>
+            <span class="font-bold">Food</span>
+
+            {
+                ingredients.map(ing => (
+                    <span>{ing.quantity}</span>
+                    <span>{ing.unit}</span>
+                    <span>{ing.name}</span>
+                ))
+            }
+
+        </div>
+
     </div>
 </SiteLayout>
\ No newline at end of file