diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js b/GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js
new file mode 100644
index 0000000..13ad008
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js
@@ -0,0 +1,15 @@
+import { Button } from "react-bootstrap";
+import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const CartButton = () =>{
+
+    return(
+        <Button id="cart-button">
+            <FontAwesomeIcon icon={faCartShopping}/>
+            <div id="cart-count">3</div>
+        </Button>
+    )
+}
+
+export default CartButton;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
index 7e6167e..1eadd19 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
@@ -9,8 +9,8 @@ const ItemList = ({ items }) => {
                 {items.length <= 0 && <p>Aucun morceaux à montrer...</p>}
                 {items.map((item) =>
                     <Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
-                        <Item  
-                        productId={item.id}
+                        <Item
+                            productId={item.id}
                             name={item.title}
                             price={item.price}
                             status={item.status}
@@ -19,7 +19,7 @@ const ItemList = ({ items }) => {
                     </Link>
                 )}
             </div>
-            
+
         </>
 
     )
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
index aa4c67a..40d3cef 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
@@ -6,6 +6,7 @@ import Button from 'react-bootstrap/Button';
 import { Link } from "react-router-dom";
 import Dropdown from "react-bootstrap/Dropdown";
 import { useCookies } from "react-cookie";
+import CartButton from "./CartButton";
 
 const Topbar = () => {
     const [cookies, setCookie, removeCookie] = useCookies(['name']);
@@ -15,14 +16,14 @@ const Topbar = () => {
         async function reset() {
             await setLogin(await cookies.GMGM ?? null);
         }
-       reset();
+        reset();
     });
 
     async function logOut() {
         const response = fetch(`https://localhost:7292/api/Logout`, {
             method: 'POST',
             credentials: 'include'
-    })  
+        })
         await removeCookie("GMGM");
         await setLogin(null); // Y U NO WORK?!?
     }
@@ -52,73 +53,74 @@ const Topbar = () => {
                             Vie privée
                         </Link>
                         {(user === null || user.LoggedIn === false) &&
-                        <Link className="nav-link" to="/login" >
-                            Connexion
-                        </Link>
+                            <Link className="nav-link" to="/login" >
+                                Connexion
+                            </Link>
                         }
                         {(user === null || user.LoggedIn === false) &&
-                        <Link className="nav-link" to="/register">
-                            S'inscrire
-                        </Link>
+                            <Link className="nav-link" to="/register">
+                                S'inscrire
+                            </Link>
                         }
                         {user !== null && user.LoggedIn &&
-                        <Dropdown className="dropdown-gestion-container">
-                        <Dropdown.Toggle className="dropdown-gestion" >
-                            Bonjour, {user.firstName} {user.lastName}!
-                        </Dropdown.Toggle>
-                        <Dropdown.Menu className="dropdown-gestion-menu">
-                            <Dropdown.Item>
-                                <Link className="nav-link" to="/myaccount" >
-                                    Mon Compte
-                                </Link>
-                            </Dropdown.Item>
-                            <Dropdown.Item>
-                                <Link className="nav-link" to="/myaddresses" >
-                                    Mes Addresses
-                                </Link>
-                            </Dropdown.Item>
-                            <Dropdown.Item>
-                                <Link className="nav-link" to="/myinvoices" >
-                                    Mes Commandes
-                                </Link>
-                            </Dropdown.Item>
-                            <Dropdown.Item>
-                                <Button className="nav-link" onClick={() => logOut()}>
-                                    Déconnexion
-                                </Button>
-                            </Dropdown.Item>
-                            {user.role === "Administrateur" &&
-                            <Container>
-                            <Dropdown.Divider/>
-                            <Dropdown.ItemText>
-                                Gestion
-                            </Dropdown.ItemText>
-                            <Dropdown.Item>
-                                    <Link className="nav-link" to="/inventaire" >
-                                        Inventaire
-                                    </Link>
-                                </Dropdown.Item>
-                                <Dropdown.Item>
-                                    <Link className="nav-link" to="/invoices" >
-                                        Commandes
-                                    </Link>
-                                </Dropdown.Item>
-                                <Dropdown.Item>
-                                    <Link className="nav-link" to="/clients" >
-                                        Clients
-                                    </Link>
-                                </Dropdown.Item>
-                                <Dropdown.Item>
-                                    <Link className="nav-link" to="/addresses" >
-                                        Adresses
-                                    </Link>
-                                </Dropdown.Item>
-                            </Container>
-                            }
-                        </Dropdown.Menu>
-                    </Dropdown>
+                            <Dropdown className="dropdown-gestion-container">
+                                <Dropdown.Toggle className="dropdown-gestion" >
+                                    Bonjour, {user.firstName} {user.lastName}!
+                                </Dropdown.Toggle>
+                                <Dropdown.Menu className="dropdown-gestion-menu">
+                                    <Dropdown.Item>
+                                        <Link className="nav-link" to="/myaccount" >
+                                            Mon Compte
+                                        </Link>
+                                    </Dropdown.Item>
+                                    <Dropdown.Item>
+                                        <Link className="nav-link" to="/myaddresses" >
+                                            Mes Addresses
+                                        </Link>
+                                    </Dropdown.Item>
+                                    <Dropdown.Item>
+                                        <Link className="nav-link" to="/myinvoices" >
+                                            Mes Commandes
+                                        </Link>
+                                    </Dropdown.Item>
+                                    <Dropdown.Item>
+                                        <Button className="nav-link" onClick={() => logOut()}>
+                                            Déconnexion
+                                        </Button>
+                                    </Dropdown.Item>
+                                    {user.role === "Administrateur" &&
+                                        <Container>
+                                            <Dropdown.Divider />
+                                            <Dropdown.ItemText>
+                                                Gestion
+                                            </Dropdown.ItemText>
+                                            <Dropdown.Item>
+                                                <Link className="nav-link" to="/inventaire" >
+                                                    Inventaire
+                                                </Link>
+                                            </Dropdown.Item>
+                                            <Dropdown.Item>
+                                                <Link className="nav-link" to="/invoices" >
+                                                    Commandes
+                                                </Link>
+                                            </Dropdown.Item>
+                                            <Dropdown.Item>
+                                                <Link className="nav-link" to="/clients" >
+                                                    Clients
+                                                </Link>
+                                            </Dropdown.Item>
+                                            <Dropdown.Item>
+                                                <Link className="nav-link" to="/addresses" >
+                                                    Adresses
+                                                </Link>
+                                            </Dropdown.Item>
+                                        </Container>
+                                    }
+                                </Dropdown.Menu>
+                            </Dropdown>
                         }
                     </Nav>
+                    <CartButton />
                 </Navbar.Collapse>
             </Container>
         </Navbar>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index df6696e..1933ebc 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -17,7 +17,7 @@ html {
 
 a {
     color: white;
-    text-decoration: none; 
+    text-decoration: none;
 }
 
 .Contact {
@@ -243,14 +243,13 @@ a {
     margin-bottom: 10px;
     background-color: rgba(245, 245, 220, 0.75);
     display: inline-block;
-    height: 300px;
+    height: 375px;
     width: 30%;
 }
 
 .item-img {
-    /* box-shadow: 2px 5px rgba(0, 0, 0, 0.608); */
     border-radius: 2px;
-    margin-top: 5px;
+    margin-top: 15px;
     display: block;
     margin-right: auto;
     margin-left: auto;
@@ -485,28 +484,28 @@ a {
 }
 
 
- /* width */
- ::-webkit-scrollbar {
+/* width */
+::-webkit-scrollbar {
     width: 10px;
-  }
-  
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: beige;
-  }
-  
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: plum;
-  }
-  
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: purple;
-  } 
+}
 
-.morceaux-container{
-    padding-top:10px;
+/* Track */
+::-webkit-scrollbar-track {
+    background: beige;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: plum;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: purple;
+}
+
+.morceaux-container {
+    padding-top: 10px;
     height: 620px;
     overflow-y: scroll;
     border: purple 2px solid;
@@ -514,24 +513,24 @@ a {
     background-color: rgba(245, 245, 220, 0.25);
 }
 
-.filters-btn-container{
-    width:100%;
-    display:flex;
+.filters-btn-container {
+    width: 100%;
+    display: flex;
 }
 
-.filters-btn{
-    margin:auto;
-    width:90% !important;
+.filters-btn {
+    margin: auto;
+    width: 90% !important;
 }
 
-.filters-dropdown button{
+.filters-dropdown button {
     width: 100%;
 }
 
-.filters-menu{
-    width:fit-content;
-    display:flex;
-    margin:5px 15px 10px 15px;
+.filters-menu {
+    width: fit-content;
+    display: flex;
+    margin: 5px 15px 10px 15px;
 }
 
 .filters-container {
@@ -539,32 +538,32 @@ a {
     margin-left: 25px;
 }
 
-.filters-price-container{
+.filters-price-container {
     white-space: nowrap;
-    padding:0px 10px 0px 10px;
+    padding: 0px 10px 0px 10px;
 }
 
-.filters-state-container{
+.filters-state-container {
     white-space: nowrap;
-    padding:0px 10px 0px 10px;
+    padding: 0px 10px 0px 10px;
 }
 
-.filters-info{
-    width:fit-content;
-    height:fit-content;
+.filters-info {
+    width: fit-content;
+    height: fit-content;
     background-color: beige;
     margin-top: 5px;
     padding: 5px 10px 5px 10px;
     border-radius: 5px;
 }
 
-.img-preview-container{
+.img-preview-container {
     margin-top: 15px;
-    display:flex;
+    display: flex;
 }
 
-.img-preview{
-    margin:auto;
+.img-preview {
+    margin: auto;
     max-width: 90%;
     max-height: 200px;
 }
@@ -572,7 +571,7 @@ a {
 .sorting-container {
     width: 20%;
     height: fit-content;
-    margin:auto;
+    margin: auto;
     margin-right: 25px;
 }
 
@@ -656,6 +655,17 @@ a {
 }
 
 
+#cart-button {
+    background-color: transparent;
+    border: none;
+    color: purple;
+}
+
+#cart-count {
+   color:green;
+}
+
+
 /* -------------------------------------------------------- */
 /* specification pour les moyennes écrans
 /* -------------------------------------------------------- */
@@ -720,7 +730,7 @@ a {
     }
 
     .sorting-container {
-        margin:auto;
+        margin: auto;
         width: 90%;
         float: none;
     }
@@ -736,43 +746,43 @@ a {
         border: 2px white solid;
     }
 
-    .filters-dropdown button{
-        height:60px;
+    .filters-dropdown button {
+        height: 60px;
     }
 
-    .filters-container{
-        width:90%;
-        margin:auto;
+    .filters-container {
+        width: 90%;
+        margin: auto;
         margin-bottom: 16px;
         background-color: rgba(0, 0, 0, 0.25);
         border-radius: 10px;
         padding-bottom: 16px;
     }
 
-    .filters-info{
-        margin:auto;
-        margin-top:16px;
+    .filters-info {
+        margin: auto;
+        margin-top: 16px;
     }
 
-    .filters-menu{
-        padding:0px;
-        margin:10px;
+    .filters-menu {
+        padding: 0px;
+        margin: 10px;
     }
 
-    .filters-menu .form-check-label{
-        margin-left:5px;
+    .filters-menu .form-check-label {
+        margin-left: 5px;
     }
 
-    .filters-menu .form-check{
-        margin-bottom:20px;
+    .filters-menu .form-check {
+        margin-bottom: 20px;
     }
 
-    .filters-menu input[type='radio']{
+    .filters-menu input[type='radio'] {
         transform: scale(2);
     }
 
-    .morceaux-options-container{
-        display:block;
+    .morceaux-options-container {
+        display: block;
     }
 }
 
@@ -783,7 +793,7 @@ a {
 
 @media (max-width:450px) {
 
-    .morceaux-container{
+    .morceaux-container {
         height: 450px;
     }