diff --git a/backend/src/controllers/userControllers.js b/backend/src/controllers/userControllers.js
index 2a0b35c..52cc8e2 100644
--- a/backend/src/controllers/userControllers.js
+++ b/backend/src/controllers/userControllers.js
@@ -40,7 +40,7 @@ const edit = async (req, res, next) => {
   const wantedId = parseInt(req.params.id, 10);
   // Extract the user data from the request body
   const item = req.body;
-  item.ID = wantedId;
+  item.id = wantedId;
   const avatar = req.file;
   fs.renameSync(
     `${avatar.destination}/${avatar.filename}`,
@@ -48,7 +48,6 @@ const edit = async (req, res, next) => {
   );
   const newpath = `${avatar.destination}/${avatar.filename}-${avatar.originalname}`;
 
-  console.info({ item, avatar });
   try {
     // Insert the recipe into the database
     const user = await tables.user.update(item, newpath);
diff --git a/backend/src/models/UserManager.js b/backend/src/models/UserManager.js
index 256a275..d6a9d30 100644
--- a/backend/src/models/UserManager.js
+++ b/backend/src/models/UserManager.js
@@ -68,8 +68,15 @@ class UserManager extends AbstractManager {
     // Execute the SQL SELECT query to retrieve a specific user by its Username
     const [result] = await this.database.query(
       `UPDATE ${this.table} SET firstname = ?, lastname = ?, birthdate = ?, description = ?, avatar = ?
-WHERE username = ?`,
-      [user.firstname, user.lastname, user.birthdate, user.description, avatar]
+WHERE user.id = ?`,
+      [
+        user.firstname,
+        user.lastname,
+        user.birthdate,
+        user.description,
+        avatar,
+        user.id,
+      ]
     );
 
     // Return the first row of the result, which represents the user
diff --git a/backend/src/router.js b/backend/src/router.js
index 6c56897..bbc50a4 100644
--- a/backend/src/router.js
+++ b/backend/src/router.js
@@ -30,14 +30,13 @@ router.get("/verify-token", AuthControllers.verifyToken);
 
 router.use(AuthMiddleware.verifyToken);
 
-router.get("/users", UserControllers.browse); // Route to get a list of items
-router.get("/users/:id", UserControllers.read); // Route to get a specific item by ID
-
 router.put(
   "/users/:id",
   uploadUsersAvatars.single("avatar"),
   UserControllers.edit
 );
+router.get("/users", UserControllers.browse); // Route to get a list of items
+router.get("/users/:id", UserControllers.read); // Route to get a specific item by ID
 
 // Route to update user
 router.post(
diff --git a/frontend/src/components/Step1.jsx b/frontend/src/components/Step1.jsx
index ec11233..9eed819 100644
--- a/frontend/src/components/Step1.jsx
+++ b/frontend/src/components/Step1.jsx
@@ -15,15 +15,15 @@ function Step1({ tag }) {
 
   const difficulties = [
     {
-      value: "easy",
+      value: "Facile",
       label: "Facile",
     },
     {
-      value: "medium",
+      value: "Moyen",
       label: "Moyen",
     },
     {
-      value: "hard",
+      value: "Difficile",
       label: "Difficile",
     },
   ];
diff --git a/frontend/src/components/Step2.jsx b/frontend/src/components/Step2.jsx
index 1ae46fa..498f608 100644
--- a/frontend/src/components/Step2.jsx
+++ b/frontend/src/components/Step2.jsx
@@ -3,59 +3,98 @@ import PropTypes from "prop-types";
 import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
 import Button from "@mui/material/Button";
-import { useRecipeCreation } from "../contexts/RecipeCreationContext";
 import { useIngredientCreation } from "../contexts/IngredientCreationContext";
 
-function Step2({ ingredient }) {
-  const { recipeCreation } = useRecipeCreation();
-  console.info(recipeCreation);
+export default function Step2({ ingredient }) {
+  const { setIngredientList, ingredientList } = useIngredientCreation();
 
-  const { ingredientCreation, handleChangeCreation } = useIngredientCreation();
-  console.info(ingredientCreation);
-
-  const [ingredientsFields, setIngredientsFields] = React.useState([]);
+  // eslint-disable-next-line no-unused-vars
+  const [addIngredient, setAddIngredient] = React.useState([]);
+  const [ingredientName, setIngredientName] = React.useState("");
+  const [quantity, setQuantity] = React.useState("");
+  const [unit, setUnit] = React.useState("");
   const handleAddIngredient = () => {
-    const ingredientsArray = [...ingredientsFields, []];
-    setIngredientsFields(ingredientsArray);
+    const ingredientToAdd = {
+      id: ingredientList.length,
+      name: ingredientName,
+      quantity,
+      unit,
+    };
+    setAddIngredient((prev) => [...prev, ingredientToAdd]);
+    setIngredientList((prev) => [...prev, ingredientToAdd]);
+  };
+  const handleReset = () => {
+    setIngredientName("");
+    setQuantity("");
+    setUnit("");
+  };
+
+  const handleDeleteIngredient = (id) => {
+    setIngredientList(ingredientList.filter((object) => object.id !== id));
+  };
+
+  console.info(ingredientList);
+  const combineHandler = async () => {
+    handleReset();
+    await handleAddIngredient();
   };
 
   return (
     <div>
       <h1>Step 2</h1>
-      <Button onClick={() => handleAddIngredient()}>
-        {" "}
-        Ajouter un ingrédient
-      </Button>
-      {ingredientsFields.map((ingredientField, index) => (
-        <>
-          <TextField
-            id={index}
-            label="Ingrédient"
-            select
-            helperText="Choisissez un ingrédient"
-            variant="filled"
-            value={ingredientCreation.ingredientName}
-            onChange={handleChangeCreation}
-            name="ingredientName"
-          >
-            {ingredient.map((option) => (
-              <MenuItem key={option.id} value={option.name}>
-                {option.name}
-              </MenuItem>
-            ))}
-          </TextField>
-          <TextField
-            id="Quantité"
-            label="Quantité"
-            helperText="Quantité requise pour la recette"
-            variant="filled"
-            value={ingredientCreation.quantity}
-            onChange={handleChangeCreation}
-            name="quantity"
-          />
-          <p> {ingredient.unit}</p>
-        </>
-      ))}
+      <TextField
+        className="quantity"
+        id="Quantité"
+        label="Quantité"
+        helperText="Quantité requise pour la recette"
+        variant="filled"
+        value={quantity}
+        onChange={(e) => setQuantity(e.target.value)}
+        name="quantity"
+      />
+      <TextField
+        className="unit"
+        id="Unité"
+        label="Unité"
+        helperText="L'unité de mesure de l'ingrédient"
+        variant="filled"
+        value={unit}
+        onChange={(e) => setUnit(e.target.value)}
+        name=" unit"
+      />
+      <TextField
+        className="Ingredient"
+        id="ingrédient"
+        label="Ingrédient"
+        select
+        helperText="Choisissez un ingrédient"
+        variant="filled"
+        value={ingredientName}
+        onChange={(e) => setIngredientName(e.target.value)}
+        name="ingredient"
+      >
+        {ingredient.map((option) => (
+          <MenuItem key={option.id} value={option.name}>
+            {option.name}
+          </MenuItem>
+        ))}
+      </TextField>
+      <Button onClick={() => combineHandler()}> Ajouter l'ingrédient</Button>
+      <div className="ingredient-list">
+        {ingredientList.map((item) => (
+          <div key={item.id}>
+            <span>{item.name}</span>
+            <span style={{ margin: "0 10px" }}>{item.quantity}</span>
+            <span>{item.unit}</span>
+            <button
+              type="button"
+              onClick={() => handleDeleteIngredient(item.id)}
+            >
+              ❌
+            </button>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
@@ -68,5 +107,3 @@ Step2.propTypes = {
     })
   ).isRequired,
 };
-
-export default Step2;
diff --git a/frontend/src/components/Step3.jsx b/frontend/src/components/Step3.jsx
index f47c6ce..ada91e0 100644
--- a/frontend/src/components/Step3.jsx
+++ b/frontend/src/components/Step3.jsx
@@ -1,25 +1,71 @@
+import React from "react";
+import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
 import { useInstructionCreation } from "../contexts/InstructionCreationContext";
 
-function Step3() {
-  const { instructionCreation, handleChangeCreation } =
-    useInstructionCreation();
-  console.info(instructionCreation);
+export default function Step3() {
+  const { setInstructionList, instructionList } = useInstructionCreation();
+
+  // eslint-disable-next-line no-unused-vars
+  const [addInstruction, setAddInstruction] = React.useState([]);
+  const [description, setDescription] = React.useState("");
+  const handleAddingInstruction = () => {
+    const instructionToAdd = {
+      id: instructionList.length,
+      name: description,
+    };
+    setAddInstruction((prev) => [...prev, instructionToAdd]);
+    setInstructionList((prev) => [...prev, instructionToAdd]);
+  };
+  const handleReset = () => {
+    setDescription("");
+  };
+
+  const handleDeleteInstruction = (id) => {
+    setInstructionList(
+      instructionList.filter((instruction) => instruction.id !== id)
+    );
+  };
+
+  const combineHandler = async () => {
+    handleReset();
+    await handleAddingInstruction();
+  };
+
   return (
     <div>
       <h1>Step 3</h1>
-      <h2>Instructions</h2>
-      <form>
-        <input
-          id="instructtionInput"
-          type="text"
-          name="description"
-          placeholder="instructions"
-          value={instructionCreation.description}
-          onChange={handleChangeCreation}
-        />
-      </form>
+      <TextField
+        className="instruction"
+        id="instruction"
+        maxRows={4}
+        label="instruction"
+        helperText="Instruction"
+        variant="filled"
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        name="quantity"
+      />
+      <Button
+        onClick={() => {
+          combineHandler();
+        }}
+      >
+        Ajouter une instruction
+      </Button>
+      <div className="instruction-list">
+        {instructionList.map((item) => (
+          <div key={item.id}>
+            <span>{item.name}</span>
+            <button
+              type="button"
+              onClick={() => handleDeleteInstruction(item.id)}
+            >
+              ❌
+            </button>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
-
-export default Step3;
diff --git a/frontend/src/components/Step4.jsx b/frontend/src/components/Step4.jsx
index 666c2a1..a985218 100644
--- a/frontend/src/components/Step4.jsx
+++ b/frontend/src/components/Step4.jsx
@@ -1,26 +1,82 @@
-import PropTypes from "prop-types";
+import axios from "axios";
+import React from "react";
 import { useIngredientCreation } from "../contexts/IngredientCreationContext";
 import { useInstructionCreation } from "../contexts/InstructionCreationContext";
 import { useRecipeCreation } from "../contexts/RecipeCreationContext";
 
-function Step4({ post }) {
-  const { ingredientCreation } = useIngredientCreation();
-  const { instructionCreation } = useInstructionCreation();
+function Step4() {
+  const { ingredientList } = useIngredientCreation();
+  const { instructionList } = useInstructionCreation();
   const { recipeCreation } = useRecipeCreation();
-  console.info(ingredientCreation);
-  console.info(instructionCreation);
+  console.info(ingredientList);
+  console.info(instructionList);
   console.info(recipeCreation);
+  const {
+    recipeName,
+    recipeDesc,
+    prepTime,
+    nbPeople,
+    tag1,
+    tag2,
+    tag3,
+    difficulty,
+  } = recipeCreation;
+
+  const handlePost = async () => {
+    try {
+      const response = await axios
+        .post(
+          `${import.meta.env.VITE_BACKEND_URL}/api/recipes`,
+          {
+            name: recipeCreation.recipeName,
+            title: recipeCreation.recipeDesc,
+            prep_time: recipeCreation.prepTime,
+            nb_people: recipeCreation.nbPeople,
+            difficulty: recipeCreation.difficulty,
+            tag1: recipeCreation.tag1,
+            tag2: recipeCreation.tag2,
+            tag3: recipeCreation.tag3,
+          },
+          {
+            withCredentials: true,
+          }
+        )
+        .then(() => console.info(response));
+    } catch (error) {
+      console.error(error);
+    }
+  };
   return (
     <div>
       <h1>Step 4</h1>
-      <button type="submit" onClick={post}>
+      <div className="recipe-name">
+        {recipeName} {recipeDesc}
+        {prepTime}
+        {nbPeople}
+        {tag1}
+        {tag2}
+        {tag3}
+        {difficulty}
+      </div>
+      <div className="ingredient-list">
+        {ingredientList.map((item) => (
+          <div key={item.id} value={item.name}>
+            {item.name}, {item.quantity} {item.unit}
+          </div>
+        ))}
+      </div>
+      <div className="instruction-list">
+        {instructionList.map((item) => (
+          <div key={item.id}>
+            <span>{item.name}</span>
+          </div>
+        ))}
+      </div>
+      <button type="submit" onClick={() => handlePost()}>
         Poster la recette
       </button>
     </div>
   );
 }
-Step4.propTypes = {
-  post: PropTypes.func.isRequired,
-};
 
 export default Step4;
diff --git a/frontend/src/contexts/IngredientCreationContext.jsx b/frontend/src/contexts/IngredientCreationContext.jsx
index 6bf3dcf..b616bdb 100644
--- a/frontend/src/contexts/IngredientCreationContext.jsx
+++ b/frontend/src/contexts/IngredientCreationContext.jsx
@@ -6,23 +6,14 @@ export const useIngredientCreation = () =>
   useContext(IngredientCreationContext);
 
 export function IngredientProvider({ children }) {
-  const [ingredientCreation, setIngredientCreation] = useState({
-    ingredientName: "",
-    kcal: "",
-    unit: "",
-    quantity: "",
-  });
-
-  const handleChangeCreation = (e) => {
-    setIngredientCreation({
-      ...ingredientCreation,
-      [e.target.name]: e.target.value,
-    });
-  };
+  const [ingredientList, setIngredientList] = useState([]);
 
   const value = useMemo(() => {
-    return { ingredientCreation, handleChangeCreation };
-  }, [ingredientCreation, handleChangeCreation]);
+    return {
+      ingredientList,
+      setIngredientList,
+    };
+  }, [ingredientList, setIngredientList]);
 
   return (
     <IngredientCreationContext.Provider value={value}>
diff --git a/frontend/src/contexts/InstructionCreationContext.jsx b/frontend/src/contexts/InstructionCreationContext.jsx
index afc1760..3ed5a28 100644
--- a/frontend/src/contexts/InstructionCreationContext.jsx
+++ b/frontend/src/contexts/InstructionCreationContext.jsx
@@ -6,21 +6,14 @@ export const useInstructionCreation = () =>
   useContext(InstructionCreationContext);
 
 export function InstructionProvider({ children }) {
-  const [instructionCreation, setInstructionCreation] = useState({
-    description: "",
-  });
-
-  const handleChangeCreation = (e) => {
-    setInstructionCreation({
-      ...instructionCreation,
-      [e.target.name]: e.target.value,
-    });
-  };
+  const [instructionList, setInstructionList] = useState([]);
 
   const value = useMemo(() => {
-    return { instructionCreation, handleChangeCreation };
-  }, [instructionCreation, handleChangeCreation]);
-
+    return {
+      instructionList,
+      setInstructionList,
+    };
+  }, [instructionList, setInstructionList]);
   return (
     <InstructionCreationContext.Provider value={value}>
       {children}
diff --git a/frontend/src/pages/CreateRecipe.jsx b/frontend/src/pages/CreateRecipe.jsx
index 16c4205..9cb7b41 100644
--- a/frontend/src/pages/CreateRecipe.jsx
+++ b/frontend/src/pages/CreateRecipe.jsx
@@ -15,7 +15,7 @@ import Step4 from "../components/Step4";
 
 const steps = [
   "Nom, photo et description",
-  "Ingrédients et matériel",
+  "Ingrédients",
   "Instructions",
   "Confirmation",
 ];
@@ -83,32 +83,30 @@ export default function CreateRecipe() {
             </Box>
           </>
         ) : (
-          <>
-            <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
-            <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
-              <Button
-                color="inherit"
-                disabled={activeStep === 0}
-                onClick={handleBack}
-                sx={{ mr: 1 }}
-              >
-                RETOUR
-              </Button>
-              <Box sx={{ flex: "1 1 auto" }} />
-              {activeStep === steps.length - 1 ? (
-                <Button onClick={handleNext}>GO NAM NAM !</Button>
-              ) : (
-                <Button onClick={handleNext}>SUIVANT</Button>
-              )}
-            </Box>
-          </>
+          <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+        )}
+      </Box>
+      <div className="steps">
+        {activeStep === 0 && <Step1 tag={allTags} />}
+        {activeStep === 1 && <Step2 ingredient={allIngredients} />}
+        {activeStep === 2 && <Step3 />}
+        {activeStep === 3 && <Step4 />}
+      </div>
+      <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
+        <Button
+          color="inherit"
+          disabled={activeStep === 0}
+          onClick={handleBack}
+          sx={{ mr: 1 }}
+        >
+          RETOUR
+        </Button>
+        <Box sx={{ flex: "1 1 auto" }} />
+        {activeStep === steps.length - 1 ? (
+          ""
+        ) : (
+          <Button onClick={handleNext}>SUIVANT</Button>
         )}
-        <div className="steps">
-          {activeStep === 0 && <Step1 tag={allTags} />}
-          {activeStep === 1 && <Step2 ingredient={allIngredients} />}
-          {activeStep === 2 && <Step3 />}
-          {activeStep === 3 && <Step4 />}
-        </div>
       </Box>
     </div>
   );