diff --git a/demo/src/main/resources/templates/create-recipe.html b/demo/src/main/resources/templates/create-recipe.html
index 4609977..4105d91 100644
--- a/demo/src/main/resources/templates/create-recipe.html
+++ b/demo/src/main/resources/templates/create-recipe.html
@@ -152,11 +152,12 @@ function renumberSteps() {
 // Call this wherever you build your POST payload:
 function getIngredients() {
   return [...ingredientContainer.querySelectorAll('.dynamic-row')].map(row => {
+	qtyValue = row.querySelector('.ing-qty').value.trim(); // quantity should be a number NOT A STRING
     return {
       ingredient: {
         name: row.querySelector('.ing-name').value.trim()
       },
-      quantity: row.querySelector('.ing-qty').value.trim(),
+      quantity: Number(qtyValue),
       unit: row.querySelector('.ing-unit').value.trim(),
       notes: row.querySelector('.ing-notes').value.trim()
     };