diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js
index 3b940da..fed4e44 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js
@@ -1,10 +1,45 @@
-const InvoiceItem = (invoice) => {
+const InvoiceItem = ({ invoice }) => {
+
+    const productTotal = (p) => {
+        return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price)).toFixed(2)
+    }
+
+    const totals = () => {
+        var price = 0;
+        var tax = 0;
+
+        invoice.products.map((p)=>{
+            price += productTotal(p)
+        })
+    }
+
 
     return (
-        <>
-            <div>
+
+        <div className="invoice-item-container">
+            <div className="invoice-item-info">
+                <div>
+                    #{invoice.id}
+                </div>
+                <div className="invoice-item-expedition">
+                    <b>Adresse d'expédition:</b><br />
+                    {invoice.firstName} {invoice.lastName}<br />
+                    {invoice.shippingAddress.civicNumber} {invoice.shippingAddress.street}<br />
+                    {invoice.shippingAddress.city}, {invoice.shippingAddress.province} {invoice.shippingAddress.postalCode}<br />
+                    {invoice.shippingAddress.country}<br />
+                </div>
             </div>
-        </>
+            <div className="invoice-item-products">
+                <ul className="invoice-item-product-list">
+                    {invoice.products.map((p) => (
+                        <li>{p.quantity} x {p.product.title} -{'>'} {productTotal(p)}</li>
+                    ))}
+                </ul>
+                <div>
+                    {totals()}
+                </div>
+            </div>
+        </div>
     );
 
 }
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceList.js
index f4e2ec8..636d947 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceList.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceList.js
@@ -2,13 +2,14 @@ import InvoiceItem from "./InvoiceItem";
 
 const InvoiceList = ({ invoices }) => {
     return (
-        <>
-            {invoices.map((invoice) => {
+        <div className="invoice-list-container">
+            {invoices.map((invoice) => (
                 <InvoiceItem
+                    key={invoice.id}
                     invoice={invoice}
                 />
-            })}
-        </>
+            ))}
+        </div>
     );
 }
 
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index 551e596..0e96b11 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -726,6 +726,15 @@ a {
 }
 
 
+.invoice-list-container{
+    border: beige 2px double;
+}
+
+.invoice-item-container{
+    border: black 1px solid;
+}
+
+
 /* -------------------------------------------------------- */
 /* specification pour les moyennes écrans
 /* -------------------------------------------------------- */