diff --git a/demo/src/main/resources/templates/create-recipe.html b/demo/src/main/resources/templates/create-recipe.html
index d1321f4..4609977 100644
--- a/demo/src/main/resources/templates/create-recipe.html
+++ b/demo/src/main/resources/templates/create-recipe.html
@@ -110,7 +110,10 @@ function addIngredient() {
   const row = document.createElement('div');
   row.className = 'dynamic-row';
   row.innerHTML = `
-    <input type="text" placeholder="e.g. 3 tbsp of sugar">
+	  <input type="text" class="ing-name" placeholder="Ingredient (e.g. Sugar)">
+	  <input type="text" class="ing-qty" placeholder="Qty (e.g. 3)">
+	  <input type="text" class="ing-unit" placeholder="Unit (e.g. tbsp)">
+	  <input type="text" class="ing-notes" placeholder="Notes (optional)">
     <button class="btn-remove" title="Remove">✕</button>`;
   row.querySelector('.btn-remove').addEventListener('click', () => {
     row.remove();
@@ -148,11 +151,19 @@ function renumberSteps() {
 // ---- Collecting on submit ----
 // Call this wherever you build your POST payload:
 function getIngredients() {
-  return [...ingredientContainer.querySelectorAll('input')]
-    .map((el, i) => ({ order: i + 1, name: el.value.trim() }))
-    .filter(item => item.name);
+  return [...ingredientContainer.querySelectorAll('.dynamic-row')].map(row => {
+    return {
+      ingredient: {
+        name: row.querySelector('.ing-name').value.trim()
+      },
+      quantity: row.querySelector('.ing-qty').value.trim(),
+      unit: row.querySelector('.ing-unit').value.trim(),
+      notes: row.querySelector('.ing-notes').value.trim()
+    };
+  }).filter(item => item.ingredient.name);
 }
 
+
 function getSteps() {
   return [...stepsContainer.querySelectorAll('textarea')]
     .map((el, i) => ({ step_number: i + 1, instruction: el.value.trim() }))