diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdItem.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdItem.js
new file mode 100644
index 0000000..7d5d624
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdItem.js
@@ -0,0 +1,9 @@
+const ReviewProdItem = ({ pq, onAddOne, onRemoveOne, onRemoveProduct }) => {
+    return (
+        <div className="review-prod-item-container">
+           
+        </div>
+    )
+}
+
+export default ReviewProdItem
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdList.js
new file mode 100644
index 0000000..506cffa
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ReviewProdList.js
@@ -0,0 +1,20 @@
+import ReviewProdItem from "./ReviewProdItem";
+
+const ReviewProdList = ({ products, onAddOne, onRemoveOne, onRemoveProduct }) => {
+    return (
+        <div>
+            {products.map((p) => (
+                <ReviewProdItem
+                    key={p.product.id}
+                    pq={p}
+                    onAddOne={onAddOne}
+                    onRemoveOne={onRemoveOne}
+                    onRemoveProduct={onRemoveProduct}
+                />
+            ))}
+        </div>
+
+    )
+}
+
+export default ReviewProdList;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/TotalProductsPrice.js b/GrossesMitaines/grosses-mitaines-ui/src/components/TotalProductsPrice.js
new file mode 100644
index 0000000..983cfce
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/TotalProductsPrice.js
@@ -0,0 +1,40 @@
+const TotalProductsPrice = ({ products }) => {
+
+    const productTotal = (p) => {
+        return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price))
+    }
+
+    const getPriceHTML = (prods) => {
+
+        const tpsRate = 5;
+        const tvqRate = 9.975;
+
+        var price = 0;
+        var tps = 0;
+        var tvq = 0;
+
+        prods.map((p) => {
+            price += productTotal(p);
+        });
+
+        tps = price * (tpsRate / 100);
+        tvq = price * (tvqRate / 100);
+
+        return (
+            <div className="invoice-item-price">
+                Sous-total = {price.toFixed(2)} $ CA<br />
+                + TPS ({tpsRate}%) = {tps.toFixed(2)} $ CA<br />
+                + TVQ ({tvqRate}%) = {tvq.toFixed(2)} $ CA<br />
+                <b>Total = {(price + tps + tvq).toFixed(2)} $ CA</b>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            {getPriceHTML(products)}
+        </div>
+    )
+}
+
+export default TotalProductsPrice;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
index 20f11bc..0e9f48e 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js
@@ -1,5 +1,157 @@
-const ReviewInvoice = () =>{
+import { useState } from "react";
+import { useEffect } from "react";
+import Cookies from "universal-cookie";
+import ReviewProdList from "../components/ReviewProdList";
+import TotalProductsPrice from "../components/TotalProductsPrice";
+const ReviewInvoice = () => {
 
+    const cookies = new Cookies();
+
+    const [products, setProducts] = useState([]);
+
+    const [firstName, setFirstName] = useState("");
+    const [lastName, setLastName] = useState("");
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [emailAddress, setEmailAddress] = useState("");
+    const [civicNumber, setCivicNumber] = useState(0);
+    const [appartment, setAppartment] = useState("");
+    const [street, setStreet] = useState("");
+    const [city, setCity] = useState("");
+    const [province, setProvince] = useState("");
+    const [country, setCountry] = useState("");
+    const [postalCode, setPostalCode] = useState("");
+    const [prodQuant, setProdQuant] = useState({});
+
+    useEffect(() => {
+        const thisInvoice = cookies.get('invoice');
+        if (thisInvoice != null) {
+            setFirstName(thisInvoice.firstName);
+            setLastName(thisInvoice.lastName);
+            setPhoneNumber(thisInvoice.phoneNumber);
+            setEmailAddress(thisInvoice.emailAddress);
+            setCivicNumber(thisInvoice.civicNumber);
+            setAppartment(thisInvoice.appartment);
+            setStreet(thisInvoice.street);
+            setCity(thisInvoice.city);
+            setProvince(thisInvoice.province);
+            setCountry(thisInvoice.country);
+            setPostalCode(thisInvoice.postalCode);
+            setProdQuant(thisInvoice.prodQuant);
+
+            var prods = [];
+
+            Object.keys(thisInvoice.prodQuant).map((k) => {
+                fetch(`https://localhost:7292/api/Product?id=${k}`)
+                    .then(async (response) => {
+                        prods.push({ product: await response.json(), quantity: thisInvoice.prodQuant[k] });
+                    }).then(() => {
+                        setProducts(prods.sort((a, b) => a.product.id - b.product.id));
+                    })
+            });
+
+
+        }
+        else {
+            console.log("No invoice to review!");
+        }
+    }, []);
+
+
+    const handleAddOne = (id) => {
+
+
+
+    }
+
+    const handleRemoveOne = (id) => {
+        var modifiedPQ = prodQuant.filter((pq) => pq.id == id);
+        var modifiedProd = prodQuant.filter((pq) => pq.product.id == id);
+
+        if (modifiedPQ.quantity - 1 <= 0) {
+            setProdQuant([...(prodQuant.filter((pq) => pq.id !== id))].sort((a, b) => a.id - b.id));
+            setProducts([...(products.filter((pq) => pq.product.id !== id))].sort((a, b) => a.product.id - b.product.id));
+        }
+        else {
+            modifiedPQ.quantity--;
+            setProdQuant([...(prodQuant.filter((pq) => pq.id !== id)), { ...modifiedPQ }].sort((a, b) => a.id - b.id));
+            setProducts([...(products.filter((pq) => pq.product.id !== id)), { ...modifiedProd }].sort((a, b) => a.product.id - b.product.id));
+        }
+    }
+
+    const handleRemoveProduct = (id) => {
+
+        setProdQuant([...(prodQuant.filter((pq) => pq.id !== id))].sort((a, b) => a.id - b.id));
+        setProducts([...(products.filter((pq) => pq.product.id !== id))].sort((a, b) => a.product.id - b.product.id));
+    }
+
+
+    return (
+        <div className="review-invoice-container">
+
+            <div className="review-invoice-info">
+                <div>
+                    <label>Prénom: </label>
+                    <input value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+                </div>
+                <div>
+                    <label>Nom: </label>
+                    <input value={lastName} onChange={(e) => setLastName(e.target.value)} />
+                </div>
+                <div>
+                    <label>Téléphone: </label>
+                    <input value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} />
+                </div>
+                <div>
+                    <label>Courriel: </label>
+                    <input value={emailAddress} onChange={(e) => setEmailAddress(e.target.value)} />
+                </div>
+            </div>
+
+            <div className="review-invoice-address-container">
+                <div>
+                    <label>Numéro civique: </label>
+                    <input type="number" min="0" value={civicNumber} onChange={(e) => setCivicNumber(e.target.value)} />
+                </div>
+                <div>
+                    <label>Numéro d'appartement: </label>
+                    <input value={appartment} onChange={(e) => setAppartment(e.target.value)} />
+                </div>
+                <div>
+                    <label>Rue: </label>
+                    <input value={street} onChange={(e) => setStreet(e.target.value)} />
+                </div>
+                <div>
+                    <label>Ville: </label>
+                    <input value={city} onChange={(e) => setCity(e.target.value)} />
+                </div>
+                <div>
+                    <label>Province (abréviation): </label>
+                    <input value={province} onChange={(e) => setProvince(e.target.value)} />
+                </div>
+                <div>
+                    <label>Pays: </label>
+                    <input value={country} onChange={(e) => setCountry(e.target.value)} />
+                </div>
+                <div>
+                    <label>Code postal: </label>
+                    <input value={postalCode} onChange={(e) => setPostalCode(e.target.value)} />
+                </div>
+            </div>
+
+            <div>
+                <ReviewProdList
+                    products={products}
+                    onAddOne={handleAddOne}
+                    onRemoveOne={handleRemoveOne}
+                    onRemoveProduct={handleRemoveProduct}
+                />
+                <TotalProductsPrice
+                    products={products}
+                />
+            </div>
+
+        </div>
+    );
 }
 
 export default ReviewInvoice;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index 9b6d0a8..1199c36 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -787,6 +787,10 @@ a {
     border-radius: 2px;
 }
 
+.review-invoice-address-container{
+    border:black 1px solid;
+}
+
 /* -------------------------------------------------------- */
 /* specification pour les moyennes écrans
 /* -------------------------------------------------------- */