diff --git a/backend/backendServer.js b/backend/backendServer.js
index ec80b1e..55f0d1d 100644
--- a/backend/backendServer.js
+++ b/backend/backendServer.js
@@ -70,10 +70,10 @@ app.post("/add-recipe", async (req, res) => {
       const existingIngredient = existingIngredients.find(ing => ing.name === ingredient.name);
       if (!existingIngredient) {
         // create the ingredient if there is no entry
-        const [ingredientId] = await db('ingredients').insert({
+        const [newIngredient] = await db('ingredients').insert({
           name: ingredient.name
         }, ['id']);
-        ingredientData.push({ id: ingredientId, quantity: ingredient.quantity, unit: ingredient.unit });
+        ingredientData.push({ id: newIngredient.id, quantity: ingredient.quantity, unit: ingredient.unit });
       } else {
         // if the ingredient exists use existing entry
         ingredientData.push({ id: existingIngredient.id, quantity: ingredient.quantity, unit: ingredient.unit });
diff --git a/frontend/src/components/AddBulkIngredients.tsx b/frontend/src/components/AddBulkIngredients.tsx
index 13c83f0..1447803 100644
--- a/frontend/src/components/AddBulkIngredients.tsx
+++ b/frontend/src/components/AddBulkIngredients.tsx
@@ -1,55 +1,49 @@
 import React, { useState } from 'react';
-import { type Ingredient } from "../types/Recipe"
+import { type Ingredient } from "../types/Recipe";
 
+interface AddBulkIngredientsProps {
+  onChange?: (ingredients: { quantity: number; unit: string; name: string }[]) => void;
+}
 
-const BulkIngredientsForm: React.FC = () => {
-  const [ingredients, setIngredients] = useState<Ingredient[]>([]);
+const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ onChange }) => {
+  const [ingredients, setIngredients] = useState<{ quantity: number; unit: string; name: string }[]>([]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    // Split the input by newline to get individual ingredients
     const lines = e.target.value.split('\n').filter(line => line.trim() !== '');
     const pattern = /^([0-9/.]+)?\s*(\S+)\s*((\w+\s*)*)$/;
-    const parsedIngredients: Ingredient[] = lines.map(line => {
-      const parts = line.match(pattern); // Updated regex pattern for fractions
-      let quantity;
+    const parsedIngredients = lines.map(line => {
+      const parts = line.match(pattern);
+      let quantity = 0;
       if (parts?.[1]) {
-        // Try to parse the quantity as a fraction first
         const [num, denom] = parts[1].split('/');
         if (denom) {
           quantity = parseFloat(num) / parseFloat(denom);
         } else {
           quantity = parseFloat(parts[1]);
         }
-      } else {
-        quantity = 0; // Default to zero if no quantity is found
       }
       return {
         quantity: +quantity.toFixed(2),
-        name: parts?.[3]?.trim() || '',
-        unit: parts?.[2]?.trim() || ''
+        unit: parts?.[2]?.trim() || '',
+        name: parts?.[3]?.trim() || ''
       };
     });
     setIngredients(parsedIngredients);
+    if (onChange) onChange(parsedIngredients); // Notify parent of change
   };
 
   return (
     <div>
       <p>Please enter ingredients in the following order: Quantity, Unit, Name</p> {/* Prompt for correct input format */}
-      <textarea
-        rows={4} // Adjust the number of rows based on your input size expectations
-        cols={50} // Adjust the number of columns based on your input width expectations
-        onChange={handleInputChange}
-        placeholder="Enter ingredients separated by newline..."
-      />
+      <textarea rows={4} cols={50} onChange={handleInputChange} placeholder="Enter ingredients separated by newline..." />
       <div>
         <ul>
           {ingredients.map((ing, index) => (
-            <li key={index}>{`${ing.quantity} ${ing.unit} ${ing.name}`}</li> // Changed order to quantity, unit, name
+            <li key={index}>{`${ing.quantity} ${ing.unit} ${ing.name}`}</li>
           ))}
         </ul>
       </div>
     </div>
   );
 };
-
-export default BulkIngredientsForm;
+export default AddBulkIngredients;
diff --git a/frontend/src/components/RecipeCard.tsx b/frontend/src/components/RecipeCard.tsx
index 33b858f..9ecf166 100644
--- a/frontend/src/components/RecipeCard.tsx
+++ b/frontend/src/components/RecipeCard.tsx
@@ -9,7 +9,7 @@ function RecipeCard({ recipe }: { recipe: Recipe }) {
         <h4>Ingredients:</h4>
         <ul>
           {recipe.ingredients.map((ingredient: Ingredient, index) => (
-            <li key={index}>{ingredient.name} {ingredient.quantity} {ingredient.unit}</li>
+            <li key={index}>{ingredient.quantity} {ingredient.unit} {ingredient.name}</li>
           ))}
         </ul>
         <h4>Steps:</h4>
diff --git a/frontend/src/pages/AddRecipe.tsx b/frontend/src/pages/AddRecipe.tsx
index ed39842..a437766 100644
--- a/frontend/src/pages/AddRecipe.tsx
+++ b/frontend/src/pages/AddRecipe.tsx
@@ -1,29 +1,30 @@
 import React, { useState } from 'react';
 import { addRecipe } from "../services/frontendApi.js";
 import { useNavigate } from "react-router-dom";
-import AddIngredientsForm from "../components/AddIngredientsForm.tsx"
 import AddBulkIngredients from "../components/AddBulkIngredients.tsx"
 
 function AddRecipe() {
   const [newRecipeId, setNewRecipeId] = useState<number | null>(null);
   const navigate = useNavigate();
+  const [ingredients, setIngredients] = useState<{ quantity: number; unit: string; name: string }[]>([]);
 
   const addRecipeForm = async (event: React.FormEvent) => {
     event.preventDefault();
     const nameElement = document.getElementById('ar-name') as HTMLInputElement | null;
     const cuisineElement = document.getElementById('ar-cuisine') as HTMLInputElement | null;
-
     if (nameElement && cuisineElement) {
       const recipeData = {
         name: nameElement.value,
-        cuisine: cuisineElement.value
+        cuisine: cuisineElement.value,
+        ingredients: ingredients,
+        steps: { 1: 'step 1', 2: 'step 2' }
       }
-
+      console.log(recipeData)
       const data = await addRecipe(recipeData);
       setNewRecipeId(data.id);
     }
-
   };
+
   React.useEffect(() => {
     if (newRecipeId !== null) {
       navigate(`/recipe/${newRecipeId}`);
@@ -50,8 +51,7 @@ function AddRecipe() {
         </button>
       </form>
       <div>
-        <AddIngredientsForm />
-        <AddBulkIngredients />
+        <AddBulkIngredients onChange={setIngredients} />
       </div>
     </div>
   )
diff --git a/frontend/src/pages/Cookbook.tsx b/frontend/src/pages/Cookbook.tsx
index 38ae022..af48a40 100644
--- a/frontend/src/pages/Cookbook.tsx
+++ b/frontend/src/pages/Cookbook.tsx
@@ -46,7 +46,7 @@ function Cookbook() {
       ) : (
         <div className="recipes-grid">
           {recipes.map((recipe: Recipe) => (
-            <CookbookRecipeTile recipe={recipe} key={recipe.details.id} handleDelete={handleDelete} />
+            <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
           ))}
         </div>
       )}
diff --git a/frontend/src/services/frontendApi.js b/frontend/src/services/frontendApi.js
index 949edec..934dc11 100644
--- a/frontend/src/services/frontendApi.js
+++ b/frontend/src/services/frontendApi.js
@@ -11,6 +11,8 @@ export const getRecipeById = async (id) => {
 };
 
 export const addRecipe = async (recipeData) => {
+  console.log(JSON.stringify(recipeData))
+  // return
   const response = await fetch("http://localhost:6063/add-recipe", {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },