diff --git a/GrossesMitaines/grosses-mitaines-ui/package-lock.json b/GrossesMitaines/grosses-mitaines-ui/package-lock.json
index 00c5061..25c4431 100644
--- a/GrossesMitaines/grosses-mitaines-ui/package-lock.json
+++ b/GrossesMitaines/grosses-mitaines-ui/package-lock.json
@@ -11,12 +11,14 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.1.3",
         "bootstrap": "^5.2.1",
         "font-awesome": "^4.7.0",
         "react": "^18.2.0",
         "react-bootstrap": "^2.5.0",
         "react-devtools": "^4.26.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.6.0",
         "react-router-dom": "^6.4.1",
         "react-scripts": "^5.0.1",
         "react-transition-group": "^4.4.5",
@@ -5128,6 +5130,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
+      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -14824,6 +14849,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -15230,6 +15260,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
+      "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -22101,6 +22139,28 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
       "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
     },
+    "axios": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
+      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -28964,6 +29024,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -29270,6 +29335,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-icons": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
+      "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/GrossesMitaines/grosses-mitaines-ui/package.json b/GrossesMitaines/grosses-mitaines-ui/package.json
index c55bcea..a3c66b9 100644
--- a/GrossesMitaines/grosses-mitaines-ui/package.json
+++ b/GrossesMitaines/grosses-mitaines-ui/package.json
@@ -6,12 +6,14 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.1.3",
     "bootstrap": "^5.2.1",
     "font-awesome": "^4.7.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
     "react-devtools": "^4.26.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.6.0",
     "react-router-dom": "^6.4.1",
     "react-scripts": "^5.0.1",
     "react-transition-group": "^4.4.5",
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js
new file mode 100644
index 0000000..91ad91a
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js
@@ -0,0 +1,81 @@
+import { useState } from "react"
+
+const Ajouter = ({ onCreation }) => {
+
+    const [title, setTitle] = useState("");
+    const [description, setDescription] = useState("");
+    const [category, setCategory] = useState("");
+    const [price, setPrice] = useState("");
+    const [quantity, setQuantity] = useState("");
+    const [imageName, setImageName] = useState("sqdc.jpg");
+
+    const handleSubmit = (e) => {
+        e.preventDefault(); // Empêcher de reloader la page au submit.
+
+        // Appeler le comportement onCreation
+        onCreation({ title, description, category, price, quantity, imageName })
+
+        // Reset les états du formulaire.
+        setTitle("")
+        setDescription("")
+        setCategory("")
+        setPrice("")
+        setQuantity("")
+        setImageName("sqdc.jpg")
+    }
+
+
+    return (
+        <div className="inventaire-form-container">
+            <form className="form-horizontal" onSubmit={handleSubmit}>
+                <h4 className="text-center">Ajouter un morceau</h4>
+                <div className="form-group">
+                    <label>Morceau: </label>
+                    <input className="form-control form-input" type='text'
+                        placeholder="Ajouter Morceau"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)} />
+                </div>
+                <div className="form-group">
+                    <label>Description: </label>
+                    <input type='text' className="form-control form-input"
+                        placeholder="description"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)} />
+                </div>
+                <div className="form-group">
+                    <label>Categorie: </label>
+                    <input type='text' className="form-control form-input"
+                        placeholder="categorie"
+                        value={category}
+                        onChange={(e) => setCategory(e.target.value)} />
+                </div>
+                <div className="form-group">
+                    <label>Prix: </label>
+                    <input type='text' className="form-control form-input"
+                        placeholder="prix"
+                        value={price}
+                        onChange={(e) => setPrice(e.target.value)} />
+                </div>
+                <div className="form-group">
+                    <label>Quantité: </label>
+                    <input type='text' className="form-control form-input"
+                        placeholder="Quantité"
+                        value={quantity}
+                        onChange={(e) => setQuantity(e.target.value)} />
+                </div>
+                <div className="form-group">
+                    <label>Nom Image: </label>
+                    <input type='text' className="form-control form-input"
+                        placeholder="nom image"
+                        value={imageName}
+                        onChange={(e) => setImageName(e.target.value)} />
+                </div>
+
+                <input className="btn-primary ajouter" type="submit" value="Ajouter Morceau"></input>
+            </form>
+        </div>
+    )
+}
+
+export default Ajouter
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
index 74b4be8..c6b05d1 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
@@ -6,6 +6,7 @@ import Privacy from "../pages/Privacy";
 import ContactUs from "../pages/ContactUs";
 import Morceaux from "../pages/Morceaux";
 import MorceauDetail from "../pages/MorceauDetail";
+import Inventaire from "../pages/Inventaire";
 
 const App = () => {
 
@@ -19,6 +20,7 @@ const App = () => {
           <Route path="contactUs" element={<ContactUs/>}/>
           <Route path="privacy" element={<Privacy/>}/>
           <Route path="morceaux/:id" element={<MorceauDetail/>}/>
+          <Route path="inventaire" element={<Inventaire/>}/>
         </Route>
       </Routes>
     </BrowserRouter>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Button.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Button.js
new file mode 100644
index 0000000..73def42
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Button.js
@@ -0,0 +1,9 @@
+const Button = ({text, color, onClick}) => {
+    return (
+        <button className="btn" style={{backgroundColor : color}} onClick={onClick}>
+            {text}
+        </button>
+    )
+};
+
+export default Button;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ContactForm.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ContactForm.js
index 870a2f7..e10af1c 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ContactForm.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ContactForm.js
@@ -7,28 +7,28 @@ const ContactForm = () =>{
                 <div className="form-group">
                     <div className="col-md-12">
                         <label >Nom*</label>
-                        <input className="form-control contact-form-input"  />
+                        <input className="form-control form-input"  />
                         {/* <span asp-validation-for="Name" className="text-danger"></span> */}
                     </div>
                 </div>
                 <div className="form-group">
                     <div className="col-md-12">
                         <label >Email*</label>
-                        <input className="form-control contact-form-input" />
+                        <input className="form-control form-input" />
                         {/* <span asp-validation-for="Email" className="text-danger"></span> */}
                     </div> 
                 </div>
                 <div className="form-group">
                     <div className="col-md-12">
                         <label >Téléphone*</label>
-                        <input className="form-control contact-form-input" />
+                        <input className="form-control form-input" />
                         {/* <span asp-validation-for="Phone" className="text-danger"></span> */}
                     </div>
                 </div>
                 <div className="form-group">
                     <div className="col-md-12">
                         <label >Message</label>
-                        <textarea className="form-control contact-form-input" rows="3"/>
+                        <textarea className="form-control form-input" rows="3"/>
                         {/* <span asp-validation-for="Message" className="text-danger"></span> */}
                     </div>
                 </div>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js b/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js
new file mode 100644
index 0000000..5dd1ece
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js
@@ -0,0 +1,22 @@
+import { FaTimes } from 'react-icons/fa'
+import { FaTools } from 'react-icons/fa'
+
+const SimpleItem = ({ item, onDelete, onModify }) => {
+    return (
+        <div className="inventaire-item">
+            <h3>
+                {item.title}
+                <div>
+                    <FaTools style={{ color: "gray", cursor: 'pointer' }}
+                        onClick={() => onModify(item.id)} />
+                    <FaTimes style={{ color: "red", cursor: 'pointer' }}
+                        onClick={() => onDelete(item.id)} />
+                </div>
+            </h3>
+            <p> Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}</p>
+            <p> Description: {item.description}</p>
+        </div>
+    )
+}
+
+export default SimpleItem
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItemList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItemList.js
new file mode 100644
index 0000000..0fa776d
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItemList.js
@@ -0,0 +1,18 @@
+import SimpleItem from "./SimpleItem";
+
+const SimpleItemList = ({simpleItems, onDelete, onModify}) => {
+    return(
+        <>
+            {simpleItems.map((simpleItem) => (
+                simpleItem &&
+                <SimpleItem key={simpleItem.id}
+                            item={simpleItem}
+                            onDelete={onDelete}
+                            onModify={onModify}
+                />
+            ))}
+        </>
+    )
+}
+
+export default SimpleItemList
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
index 5bcebdb..b0a6bbd 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
@@ -3,6 +3,7 @@ import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import { Link } from "react-router-dom";
+import Dropdown from "react-bootstrap/Dropdown";
 
 
 const Topbar = () => {
@@ -10,7 +11,7 @@ const Topbar = () => {
         <Navbar expand="sm" className="topbar-container">
             <Container>
                 <Link className="navbar-brand" to="/">
-                    <img src="/images/LesGrossesMitaines.png" alt="" height="45"/>
+                    <img src="/images/LesGrossesMitaines.png" alt="" height="45" />
                 </Link>
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav">
@@ -30,6 +31,19 @@ const Topbar = () => {
                         <Link className="nav-link" to="/privacy" >
                             Vie privée
                         </Link>
+                        <Dropdown>
+                            <Dropdown.Toggle className="dropdown-gestion">
+                                Gestion
+                            </Dropdown.Toggle>
+
+                            <Dropdown.Menu className="dropdown-gestion-menu">
+                                <Dropdown.Item>
+                                    <Link className="nav-link" to="/inventaire" >
+                                        Inventaire
+                                    </Link>
+                                </Dropdown.Item>
+                            </Dropdown.Menu>
+                        </Dropdown>
                     </Nav>
                 </Navbar.Collapse>
             </Container>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js
new file mode 100644
index 0000000..d4ae3c7
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js
@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+import Button from '../components/Button'
+import SimpleItemList from "../components/SimpleItemList";
+import Ajouter from "../components/Ajouter";
+
+const API_URL = 'https://localhost:7292/'
+const INVENTAIRE_URL = API_URL + 'api/Inventory'
+const PRODUIT_URL = API_URL + 'api/Product'
+
+const Inventaire = () => {
+
+    const [morceaux, setMorceaux] = useState([]);
+    const [isFormvisible, setFormVisibility] = useState(false);
+
+    useEffect(() => {
+        async function fetchData() {
+            const res = await axios.get(INVENTAIRE_URL);
+            setMorceaux(res.data);
+        }
+        fetchData();
+        document.title = 'Inventaire';
+    }, []);
+
+    const handleAddItem = async (morceau) => {
+        const res = await axios.post(PRODUIT_URL, morceau)
+
+        setMorceaux([...morceaux, { ...morceau, id: res.data.id }]);
+    };
+
+    const handleDeleteItem = async (id) => {
+        const res = await axios.delete(`${INVENTAIRE_URL}/${id}`)
+
+        setMorceaux(morceaux.filter((morceau) => morceau.id !== id))
+    };
+
+    const handleModifyItem = async (id) => {
+
+    };
+
+    return (
+        <div className="inventaire">
+            <header className='header'>
+                <h1>Inventaire</h1>
+                <Button
+                    text={isFormvisible ? 'Fermer' : 'Ajouter'}
+                    color={isFormvisible ? 'red' : 'purple'}
+                    onClick={() => setFormVisibility(!isFormvisible)}
+                />
+            </header>
+            {isFormvisible && <Ajouter onCreation={handleAddItem}></Ajouter>}
+            {morceaux.length > 0 ?
+                (<SimpleItemList simpleItems={morceaux}
+                    onDelete={handleDeleteItem}
+                    onModify={handleModifyItem}
+                ></SimpleItemList>) :
+                ('Il n\'y a pas de morceaux!')}
+        </div>
+    );
+}
+
+export default Inventaire
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
index 4efb083..5a523cd 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js
@@ -57,7 +57,7 @@ const Morceaux = (startingProducts) => {
     }
 
     return (
-        <div>
+        <div className="morceaux"div>
             <div className="sorting-container">
                 <Sorting onChange={handleOrder} />
             </div>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Privacy.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Privacy.js
index 4f00d51..2f883cc 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Privacy.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Privacy.js
@@ -8,11 +8,11 @@ const Privacy = () => {
     });
 
     return (
-        <>
+        <div className="privacy">
             <h1 className="text-primary">Police de vie privée</h1>
 
-<p className="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        </>
+            <p className="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
     );
 }
 
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index b771b1e..ffc71c7 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -1,3 +1,7 @@
+#root {
+    height: 100vh;
+}
+
 body {
     background-image: url('/public/images/blured_wool_carpet.png');
     background-color: gray;
@@ -117,7 +121,7 @@ html {
     background-color: beige;
 }
 
-.contact-form-input {
+.form-input {
     border: 3px solid rgba(0, 0, 0, .25);
     /* box-shadow: 1px 2px rgba(0, 0, 0, .25); */
 }
@@ -351,6 +355,19 @@ html {
     text-decoration: none;
 }
 
+.btn {
+    display: inline-block;
+    background: #000;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    margin: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 15px;
+    font-family: inherit;
+}
 
 .btn-primary {
     background-color: purple;
@@ -377,6 +394,67 @@ html {
     width: fit-content;
     margin: auto;
     float: right;
+    width: 85%;
+}
+
+.privacy {
+    height: 100%;
+}
+
+.morceaux {
+    height: 100%;
+}
+
+.inventaire {
+    height: 100%;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1.25%;
+    padding: 1.25%;
+    color:purple;
+    background-color: beige;
+    border: purple solid 3px;;
+}
+
+.inventaire-form-container {
+    padding: 3% 5% 3% 5%;
+    color: black;
+    background-color: beige;
+    margin: 1.25%;
+}
+
+.inventaire-item {
+    border: purple double 3px;
+    margin-left: 1.25%;
+    margin-right: 1.25%;
+    margin-bottom: 10px;
+    background-color: rgba(245, 245, 220, 0.75);
+    display: inline-block;
+    height: auto;
+    width: 97.5%;
+}
+
+
+.inventaire-item>h3 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.dropdown-gestion,
+.dropdown-gestion:hover {
+    color: black;
+    background-color: beige !important;
+    border-color: transparent !important;
+}
+
+.dropdown-gestion-menu {
+    border: purple solid 2px;
+    background-color: beige;
 }
 
 .sorting-container {
@@ -388,10 +466,16 @@ html {
     margin-bottom: 15px;
 }
 
-.cat-load {
-    display: block;
-    margin: auto;
-    width: auto;
+.sorting-dropdown{
+    width:fit-content;
+    margin:auto;
+    float:right;
+}
+
+.cat-load{
+    display:block;
+    margin:auto;
+    width:auto;
     background-image: url("/public/images/cat-yarn.gif");
     background-repeat: no-repeat;
     background-color: white;
@@ -526,7 +610,6 @@ html {
         width: 80%;
     }
 
-
     .contact-info-container {
         padding-top: 5%;
     }
@@ -535,5 +618,4 @@ html {
         margin: 5px;
         padding: 10px;
     }
-
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..ff1cd52
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,288 @@
+{
+  "name": "420-5DW-HY-TP",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "react-axios": "^2.0.6"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "peer": true
+    },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "peer": true,
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "peer": true,
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "peer": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "peer": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-axios": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.6.tgz",
+      "integrity": "sha512-srQnLZXaW9LDJyC4/qvQ7aPi/rUpsggd3RIM5Q/vFLlQZ4l5bvPtqP/2+UeRXhJH75NfxbcPD3FkjiKONn5V8Q==",
+      "peerDependencies": {
+        "axios": "^0.27.2",
+        "prop-types": "^15.8.1",
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "peer": true
+    }
+  },
+  "dependencies": {
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "peer": true
+    },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "peer": true,
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "peer": true,
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "peer": true
+    },
+    "follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "peer": true
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "peer": true,
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "peer": true
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "peer": true,
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "peer": true
+    },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "react-axios": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.6.tgz",
+      "integrity": "sha512-srQnLZXaW9LDJyC4/qvQ7aPi/rUpsggd3RIM5Q/vFLlQZ4l5bvPtqP/2+UeRXhJH75NfxbcPD3FkjiKONn5V8Q==",
+      "requires": {}
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "peer": true
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..16ea804
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-axios": "^2.0.6"
+  }
+}