diff --git a/GrossesMitaines/GrossesMitainesAPI/Models/InvoiceModel.cs b/GrossesMitaines/GrossesMitainesAPI/Models/InvoiceModel.cs
index 0624b98..6457e46 100644
--- a/GrossesMitaines/GrossesMitainesAPI/Models/InvoiceModel.cs
+++ b/GrossesMitaines/GrossesMitainesAPI/Models/InvoiceModel.cs
@@ -11,7 +11,8 @@ public class InvoiceModel {
         Preparing,
         Shipping,
         Shipped,
-        Returned
+        Returned,
+        Pending
     }
     public class ProductInvoice {
         [Key]
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
index c99136f..5618883 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
@@ -16,6 +16,7 @@ import { useState, useEffect } from "react";
 import React from 'react';
 import Invoices from "../pages/Invoices";
 import Cookies from "universal-cookie";
+import ReviewInvoice from "../pages/ReviewInvoice";
 
 const App = () => {
   const cookies = new Cookies();
@@ -51,6 +52,7 @@ const App = () => {
           <Route path="formulaire" element={<Formulaire />} />
           <Route path="myinvoices" element={<MyInvoices />} />
           <Route path="invoices" element={<Invoices />} />
+          <Route path="reviewinvoice/:id" element={<ReviewInvoice />} />
         </Route>
       </Routes>
     </BrowserRouter>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Formulaire.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Formulaire.js
index 7bc1efb..c3cd565 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Formulaire.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Formulaire.js
@@ -4,13 +4,13 @@ import { Button } from "react-bootstrap";
 import { useForm } from "react-hook-form";
 import Cookies from "universal-cookie";
 import { Form } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
 
 export default function App() {
     const { register, handleSubmit, setValue, watch, formState: { errors } } = useForm();
-    const onSubmit = data => console.log(data);
     const cookies = new Cookies();
-
     const [userAddresses, setUserAddresses] = useState([]);
+    const navigate = useNavigate();
 
     useEffect(() => {
 
@@ -33,20 +33,15 @@ export default function App() {
                 if (response.ok) {
                     const json = await response.json();
                     setUserAddresses(json);
-                    // if (json.length >= 1)
-                    //     setFormAddress(json[0]);
+                    if (json.length >= 1)
+                        setFormAddress(json[0]);
                 }
             });
         }
-
-
     }, []);
 
-    const setFormAddress = (addressId) => {
+    const setFormAddress = (address) => {
 
-        const address = userAddresses.filter(a => a.id == addressId);
-
-        console.log(address);
         setValue("civicNumber", address.civicNumber);
         setValue("appartment", address.appartment);
         setValue("street", address.street);
@@ -56,6 +51,34 @@ export default function App() {
         setValue("postalCode", address.postalCode);
     }
 
+    const onSubmit = async (data) => {
+
+        const cart = cookies.get('cart');
+        if (cart == null || cart.length < 1) {
+            console.log("Your cart is empty!!!");
+        }
+        else {
+            data.prodQuant ={};
+            cart.map((p) => {
+                data.prodQuant[p.id] = p.quantity;
+            });
+
+            console.log(data);
+
+            const jsonData = JSON.stringify(data);
+
+            fetch("https://localhost:7292/api/Invoice", {
+                mode: "cors",
+                method: "POST",
+                credentials: "include",
+                body: jsonData
+            }).then((response) => {
+                console.log(response);
+            });
+        }
+    }
+
+
     return (
         <div className="form-container">
             <form onSubmit={handleSubmit(onSubmit)}>
@@ -66,41 +89,41 @@ export default function App() {
                         <input {...register("emailAddress", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
                     </div>
                     <div>
-                        {errors.Email && errors.Email.type === 'required' && <span>Vous devez entrer une adresse courriel!</span>}
-                        {errors.Email && errors.Email.type === 'pattern' && <span>Adresse courriel non valide!</span>}
+                        {errors.emailAddress && errors.emailAddress.type === 'required' && <span>Vous devez entrer une adresse courriel!</span>}
+                        {errors.emailAddress && errors.emailAddress.type === 'pattern' && <span>Adresse courriel non valide!</span>}
                     </div>
                     <div className="form-group">
                         <label>Prénom*: </label>
                         <input {...register("firstName", { required: true, minLength: 2 })} />
                     </div>
                     <div>
-                        {errors.Prénom && errors.Prénom.type === 'required' && <span>Vous devez entrer votre prénom!</span>}
-                        {errors.Prénom && errors.Prénom.type === 'minLength' && <span>Votre prénom doit avoir au moins 2 lettres!</span>}
+                        {errors.firstName && errors.firstName.type === 'required' && <span>Vous devez entrer votre prénom!</span>}
+                        {errors.firstName && errors.firstName.type === 'minLength' && <span>Votre prénom doit avoir au moins 2 lettres!</span>}
                     </div>
                     <div className="form-group">
                         <label>Nom*: </label>
                         <input {...register("lastName", { required: true, minLength: 2 })} />
                     </div>
                     <div>
-                        {errors.Nom && errors.Nom.type === 'required' && <span>Vous devez entrer votre nom!</span>}
-                        {errors.Nom && errors.Nom.type === 'minLength' && <span>Votre nom doit avoir au moins 2 lettres!</span>}
+                        {errors.lastName && errors.lastName.type === 'required' && <span>Vous devez entrer votre nom!</span>}
+                        {errors.lastName && errors.lastName.type === 'minLength' && <span>Votre nom doit avoir au moins 2 lettres!</span>}
                     </div>
                     <div className="form-group">
                         <label>Numéro de téléphone*: </label>
                         <input placeholder="Exemple: 111-111-1111" {...register("phoneNumber", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
                     </div>
                     <div>
-                        {errors.Téléphone && errors.Téléphone.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
-                        {errors.Téléphone && errors.Téléphone.type === 'pattern' && <span>Téléphone non valide!</span>}
+                        {errors.phoneNumber && errors.phoneNumber.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
+                        {errors.phoneNumber && errors.phoneNumber.type === 'pattern' && <span>Téléphone non valide!</span>}
                     </div>
                     <div className="formulaire-address">
                         <h5>
                             Adresse
-                            <Form.Select onSelect={(e) => { setFormAddress(e.target.value); }}>
+                            {/* <Form.Select onSelect={(e) => { setFormAddress(e.target.value); }}>
                                 {userAddresses.map((a) => (
                                     <option key={a.id} value={a.id}>{a.civicNumber} {a.street}</option>
                                 ))}
-                            </Form.Select>
+                            </Form.Select> */}
                         </h5>
                         <div className="form-group">
                             <label>Numéro civique*: </label>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
new file mode 100644
index 0000000..20f11bc
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
@@ -0,0 +1,5 @@
+const ReviewInvoice = () =>{
+
+}
+
+export default ReviewInvoice;
\ No newline at end of file