diff --git a/GrossesMitaines/grosses-mitaines-ui/package-lock.json b/GrossesMitaines/grosses-mitaines-ui/package-lock.json
index 25c4431..5aab806 100644
--- a/GrossesMitaines/grosses-mitaines-ui/package-lock.json
+++ b/GrossesMitaines/grosses-mitaines-ui/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.1.3",
         "bootstrap": "^5.2.1",
+        "fa": "^1.0.1",
         "font-awesome": "^4.7.0",
         "react": "^18.2.0",
         "react-bootstrap": "^2.5.0",
@@ -8427,6 +8428,14 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/fa": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/fa/-/fa-1.0.1.tgz",
+      "integrity": "sha512-9uU7yoeKcoXvONbZuoRAEzIz/v80RlS6QfN4sWWyrpy5rScGrDPxpeZ3AV6y+jssjFJUEQoZiR5lgXBLrtAHKQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -24554,6 +24563,11 @@
         }
       }
     },
+    "fa": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/fa/-/fa-1.0.1.tgz",
+      "integrity": "sha512-9uU7yoeKcoXvONbZuoRAEzIz/v80RlS6QfN4sWWyrpy5rScGrDPxpeZ3AV6y+jssjFJUEQoZiR5lgXBLrtAHKQ=="
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
diff --git a/GrossesMitaines/grosses-mitaines-ui/package.json b/GrossesMitaines/grosses-mitaines-ui/package.json
index a3c66b9..7e28d27 100644
--- a/GrossesMitaines/grosses-mitaines-ui/package.json
+++ b/GrossesMitaines/grosses-mitaines-ui/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.1.3",
     "bootstrap": "^5.2.1",
+    "fa": "^1.0.1",
     "font-awesome": "^4.7.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
index 590a6ab..ed1217a 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
@@ -9,98 +9,110 @@ import { Card } from "react-bootstrap";
 //     Discontinued
 // }
 function renderStatus(statusCode) {
-    switch (statusCode) {
-        case 0:
-            return (
-                <Card.Text className="item-status item-status-available">
-                    Disponible
-                </Card.Text>
-            );
+    if (statusCode !== undefined) {
 
-        case 1:
-            return (
-                <Card.Text className="item-status item-status-backorder">
-                    En commande
-                </Card.Text>
-            );
-        case 2:
-            return (
-                <Card.Text className="item-status item-status-unavailable">
-                    Indisponible
-                </Card.Text>
-            );
-        case 3:
-            return (
-                <Card.Text className="item-status item-status-clearence">
-                    Liquidation
-                </Card.Text>
-            );
-        case 4:
-            return (
-                <Card.Text className="item-status item-status-promotion">
-                    Promotion
-                </Card.Text>
-            );
-        case 5:
-            return (
-                <Card.Text className="item-status item-status-discontinued">
-                    Discontinué
-                </Card.Text>
-            );
-        default:
-            return (
-                <></>
-            );
+        switch (statusCode) {
+            case 0:
+                return (
+                    <Card.Text className="item-status item-status-available">
+                        Disponible
+                    </Card.Text>
+                );
+
+            case 1:
+                return (
+                    <Card.Text className="item-status item-status-backorder">
+                        En commande
+                    </Card.Text>
+                );
+            case 2:
+                return (
+                    <Card.Text className="item-status item-status-unavailable">
+                        Indisponible
+                    </Card.Text>
+                );
+            case 3:
+                return (
+                    <Card.Text className="item-status item-status-clearence">
+                        Liquidation
+                    </Card.Text>
+                );
+            case 4:
+                return (
+                    <Card.Text className="item-status item-status-promotion">
+                        Promotion
+                    </Card.Text>
+                );
+            case 5:
+                return (
+                    <Card.Text className="item-status item-status-discontinued">
+                        Discontinué
+                    </Card.Text>
+                );
+            default:
+                return (
+                    <></>
+                );
+        }
     }
+
 }
 
 function renderPrice(price, newPrice, status) {
+    if (price !== undefined) {
 
-    if (status != 3 && status != 4) {
-        return (
-            <Card.Text className="item-price-container">
-                <span className="item-price">
-                    {price.toFixed(2).toString().replace(".", ",")} $ CA
-                </span>
-            </Card.Text>
-        );
-    }
-    else {
-        return (
-            <Card.Text className="item-price-container">
-                <span className="item-old-price">
-                    {price.toFixed(2).toString().replace(".", ",")} $ CA
-                </span>
-                <span className="item-new-price">
-                    {newPrice.toFixed(2).toString().replace(".", ",")} $ CA
-                </span>
-            </Card.Text>
-        );
+
+        if (status != 3 && status != 4) {
+            return (
+                <Card.Text className="item-price-container">
+                    <span className="item-price">
+                        {price.toFixed(2).toString().replace(".", ",")} $ CA
+                    </span>
+                </Card.Text>
+            );
+        }
+        else {
+            return (
+                <Card.Text className="item-price-container">
+                    <span className="item-old-price">
+                        {price.toFixed(2).toString().replace(".", ",")} $ CA
+                    </span>
+                    <span className="item-new-price">
+                        {newPrice.toFixed(2).toString().replace(".", ",")} $ CA
+                    </span>
+                </Card.Text>
+            );
+        }
     }
 
 }
 
 const Item = ({ imageUrl, name, price, newPrice, status }) => {
-    return (
+    if (name !== undefined) {
+        return (
 
-        <Card className="item">
-            <Card.Img className="item-img" variant="top" src={`/images/${imageUrl}_thumbnail.jpg`} />
-            <Card.Body className="item-info">
-                <div className="item-name-container">
-                    <Card.Title className="item-name">
-                        {name}
-                    </Card.Title>
-                </div>
-                <div className="item-status-container">
-                    {renderStatus(status)}
-                </div>
-                <div>
-                    {renderPrice(price, newPrice, status)}
-                </div>
+            <Card className="item">
+                <Card.Img className="item-img" variant="top" src={`/images/${imageUrl}_thumbnail.jpg`} />
+                <Card.Body className="item-info">
+                    <div className="item-name-container">
+                        <Card.Title className="item-name">
+                            {name}
+                        </Card.Title>
+                    </div>
+                    <div className="item-status-container">
+                        {renderStatus(status)}
+                    </div>
+                    <div>
+                        {renderPrice(price, newPrice, status)}
+                    </div>
 
-            </Card.Body>
-        </Card>
-    );
+                </Card.Body>
+            </Card>
+        );
+    }
+    else {
+        return (<></>);
+    }
 }
 
 export default Item;
\ 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 d538193..b79a18e 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
@@ -18,7 +18,7 @@ const MorceauDetail = () => {
         }
         fetchData();
         setIsLoading(false);
-    });
+    },[]);
 
     function renderPrice(price, newPrice, status) {
         if (price !== undefined) {
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
index 5a523cd..f5e3e85 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
@@ -6,11 +6,6 @@ import Sorting from "../components/Sorting"
 
 const Morceaux = (startingProducts) => {
 
-
-    useEffect(() => {
-        document.title = 'Morceaux';
-    });
-
     const [products, setProducts] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
 
@@ -18,6 +13,19 @@ const Morceaux = (startingProducts) => {
     var filterPrice = "";
     var filterState = "";
 
+    useEffect(() => {
+        document.title = 'Morceaux';
+        setIsLoading(true);
+        async function fetchData() {
+            const response = await fetch(`https://localhost:7292/api/Inventory`);
+            const json = await response.json();
+            if (json.length > 0)
+                setProducts([...json]);
+        }
+        fetchData();
+        setIsLoading(false);
+    },[]);
+
     const handleNextItems = async () => {
 
         var url;
@@ -29,9 +37,9 @@ const Morceaux = (startingProducts) => {
         setIsLoading(true);
         const response = await fetch(url);
         const json = await response.json();
-        
+
         //TODO: regler bug qui permet d'avoir des duplicats (trouver une façon de skipper les duplicats)
-        if (json.length > 0) 
+        if (json.length > 0)
             setProducts([...products, ...json]);
 
         setIsLoading(false);
@@ -57,7 +65,7 @@ const Morceaux = (startingProducts) => {
     }
 
     return (
-        <div className="morceaux"div>
+        <div className="morceaux">
             <div className="sorting-container">
                 <Sorting onChange={handleOrder} />
             </div>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index ffc71c7..aca5587 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -1,5 +1,5 @@
 #root {
-    height: 100vh;
+    min-height: 100vh;
 }
 
 body {