diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js
index ee2f5db..5a909e1 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js
@@ -133,15 +133,15 @@ const Ajouter = ({ onCreation }) => {
                             }}>
                                 Disponible {/*Le nom de l'option*/}
                             </Dropdown.Item>
-                            <Dropdown.Item key="1" onClick={() => {
+                            <Dropdown.Item key="2" onClick={() => {
                                 setStatus("Indisponible");
-                                setStatusValue(1);
+                                setStatusValue(2);
                             }}>
                                 Indisponible
                             </Dropdown.Item>
-                            <Dropdown.Item key="2" onClick={() => {
+                            <Dropdown.Item key="1" onClick={() => {
                                 setStatus("En Commande");
-                                setStatusValue(2);
+                                setStatusValue(1);
                             }}>
                                 En Commande
                             </Dropdown.Item>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js
index 95e173e..fd783b2 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js
@@ -157,15 +157,15 @@ const Modify = ({ morceau, onModify }) => {
                             }}>
                                 Disponible {/*Le nom de l'option*/}
                             </Dropdown.Item>
-                            <Dropdown.Item key="1" onClick={() => {
+                            <Dropdown.Item key="2" onClick={() => {
                                 setStatus("Indisponible");
-                                setStatusValue(1);
+                                setStatusValue(2);
                             }}>
                                 Indisponible
                             </Dropdown.Item>
-                            <Dropdown.Item key="2" onClick={() => {
+                            <Dropdown.Item key="1" onClick={() => {
                                 setStatus("En Commande");
-                                setStatusValue(2);
+                                setStatusValue(1);
                             }}>
                                 En Commande
                             </Dropdown.Item>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/QtySelect.js b/GrossesMitaines/grosses-mitaines-ui/src/components/QtySelect.js
new file mode 100644
index 0000000..bc2cfa1
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/QtySelect.js
@@ -0,0 +1,16 @@
+import { Form } from "react-bootstrap";
+
+const QtySelect = ({ qty }) => {
+    return (
+        <Form.Select className="qty-select">
+            {Array.from(Array(qty), (e, i) => {
+                return (
+                    <option value={i+1} key={i+1}>{i+1}</option>
+                )
+            })}
+        </Form.Select>
+    );
+
+}
+
+export default QtySelect;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
index 400cbbd..25cea8a 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
@@ -1,6 +1,8 @@
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { useState } from "react";
+import { Button } from "react-bootstrap";
+import QtySelect from "../components/QtySelect";
 
 const MorceauDetail = () => {
 
@@ -8,6 +10,25 @@ const MorceauDetail = () => {
     const [item, setItem] = useState({});
     const [isLoading, setIsLoading] = useState(false);
     const [imageSrc, setImageSrc] = useState(null);
+    const [itemQty, setItemQty] = useState(0);
+
+
+    const updateQty = () => {
+        window.setTimeout(() => {
+            fetch(`https://localhost:7292/api/Product/Quantity?id=${id}`)
+                .then(async (response) => {
+                    if (response.ok) {
+                        const qty = await response.json();
+                        setItemQty(qty);
+                    }
+                    else {
+                        console.log("Un erreur est survenu lors de l'appelle de: "
+                            + `https://localhost:7292/api/Product/Quantity?id=${id}`);
+                    }
+                    updateQty();
+                })
+        }, 10000);
+    }
 
     useEffect(() => {
         document.title = 'Morceaux';
@@ -16,6 +37,7 @@ const MorceauDetail = () => {
             const response = await fetch(`https://localhost:7292/api/Product?id=${id}`);
             const json = await response.json();
             setItem(json);
+            setItemQty(json.quantity);
         }
 
 
@@ -48,12 +70,12 @@ const MorceauDetail = () => {
             else {
                 return (
                     <>
-                        <h3 className="detail-old-price">
-                            {price.toFixed(2).toString().replace(".", ",")} $ CA
-                        </h3>
                         <h3 className="detail-new-price">
                             {newPrice.toFixed(2).toString().replace(".", ",")} $ CA
                         </h3>
+                        <h5 className="detail-old-price">
+                            {price.toFixed(2).toString().replace(".", ",")} $ CA
+                        </h5>
                     </>
                 );
             }
@@ -112,23 +134,34 @@ const MorceauDetail = () => {
     return (
         <>
             <div className="detail-container">
-                <div className="detail-container-left">
+                <div className="detail-container-image">
                     <div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
                     <img className="detail-image" alt="" src={imageSrc} />
-                    <p className="detail-description">{item.description}</p>
                 </div>
-                <div className="detail-container-right">
+                <div className="detail-container-info">
                     <h1 className="detail-title">{item.title}</h1>
-                    <h2 className="detail-category">Catégorie: {item.category}</h2>
-                    <div className="detail-price-container">
-                        {renderPrice(item.price, item.promoPrice, item.status)}
-                    </div>
+                    <h3 className="detail-category">({item.category})</h3>
+
                     <div className="detail-status-container">
                         {renderStatus(item.status)}
                     </div>
+                    <div className="detail-price-container">
+                        {renderPrice(item.price, item.promoPrice, item.status)}
+                    </div>
+
                     <h5>
-                        Quantité: {item.quantity}
+                        Qté. restante: {item.status == 1 || item.status == 2 || item.status == 5 ? "Aucun" : itemQty}
                     </h5>
+                    <p className="detail-description">{item.description}</p>
+                </div>
+                <div className="detail-container-controls">
+                    <QtySelect
+                        qty={itemQty}
+                    />
+                    <Button className="add-to-cart">
+                        Ajouter au panier
+                    </Button>
+
                 </div>
             </div>
         </>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index 1933ebc..20ccf9d 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -592,34 +592,86 @@ a {
     height: 200px;
 }
 
+
+
+.detail-status-container {
+    margin-top: 25px;
+}
+
+.detail-status-available {
+
+}
+
+.detail-status-backorder {}
+
+.detail-status-unavailable {}
+
+.detail-status-clearence {}
+
+.detail-status-promotion {}
+
+.detail-status-discontinued {}
+
+
 .detail-container {
     display: flex;
-    background-color: plum;
+    background-color: white;
     padding: 16px;
 }
 
-.detail-container-left {
-    margin: auto;
-    width: 48%;
+.detail-container-image {
+    margin:auto;
+    margin-top:25px;
+    width: 35%;
     height: 100%;
 }
 
-.detail-container-right {
-    margin: auto;
-    width: 48%;
+
+.detail-container-info {
+    margin:auto;
+    width: 35%;
     height: 100%;
 }
 
+.detail-container-controls {
+    margin:auto;
+    display:inline-flex;
+    width:20%;
+    height:100%;
+}
+
+.qty-select {
+    width: fit-content;
+    height:fit-content;
+    margin:auto;
+}
+
+.add-to-cart{
+    width:auto;
+    margin-left: 10px;
+}
+
 .detail-image {
     width: 100%;
     height: auto;
 }
 
+.detail-price{
+    font-weight: bold;
+}
+
+.detail-new-price {
+    font-weight: bold;
+}
+
 .detail-old-price {
+    font-weight: lighter;
     text-decoration: line-through;
 }
 
 
+
+
 .btn-fermer {
     background-color: red !important;
     color: white !important;
@@ -662,7 +714,7 @@ a {
 }
 
 #cart-count {
-   color:green;
+    color: green;
 }
 
 
@@ -689,11 +741,11 @@ a {
         display: inline-block;
     }
 
-    .detail-container-left {
+    .detail-container-image {
         width: 95%;
     }
 
-    .detail-container-right {
+    .detail-container-info {
         width: 95%;
     }