diff --git a/GrossesMitaines/grosses-mitaines-ui/package-lock.json b/GrossesMitaines/grosses-mitaines-ui/package-lock.json
index 3cce8b9..8cc8053 100644
--- a/GrossesMitaines/grosses-mitaines-ui/package-lock.json
+++ b/GrossesMitaines/grosses-mitaines-ui/package-lock.json
@@ -33,6 +33,7 @@
         "react-transition-group": "^4.4.5",
         "sweetalert2": "^11.6.6",
         "sweetalert2-react-content": "^5.0.7",
+        "universal-cookie": "^4.0.4",
         "web-vitals": "^2.1.4"
       }
     },
diff --git a/GrossesMitaines/grosses-mitaines-ui/package.json b/GrossesMitaines/grosses-mitaines-ui/package.json
index 5ee9f1e..22107dd 100644
--- a/GrossesMitaines/grosses-mitaines-ui/package.json
+++ b/GrossesMitaines/grosses-mitaines-ui/package.json
@@ -28,6 +28,7 @@
     "react-transition-group": "^4.4.5",
     "sweetalert2": "^11.6.6",
     "sweetalert2-react-content": "^5.0.7",
+    "universal-cookie": "^4.0.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
index 582b520..c99136f 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/App.js
@@ -14,46 +14,46 @@ import Formulaire from "../pages/Formulaire";
 import MyInvoices from "../pages/MyInvoices";
 import { useState, useEffect } from "react";
 import React from 'react';
-import { useCookies } from 'react-cookie';
 import Invoices from "../pages/Invoices";
+import Cookies from "universal-cookie";
 
 const App = () => {
-  const [cookies, setCookie] = useCookies(['name']);
+  const cookies = new Cookies();
 
   useEffect(() => {
     async function FetchUser() {
-        const response = await fetch(`https://localhost:7292/api/WhoAmI`, { credentials: 'include' });
-        if (response.status === 200) {
-          var user = await response.json();
-          setCookie('GMGM', {...user, LoggedIn:true},  { path: '/', SameSite:'strict', secure:true })
-        }
-        else setCookie('GMGM', {LoggedIn:false},  { path: '/', SameSite:'strict', secure:true })
+      const response = await fetch(`https://localhost:7292/api/WhoAmI`, { credentials: 'include' });
+      if (response.status === 200) {
+        var user = await response.json();
+        cookies.set('GMGM', { ...user, LoggedIn: true }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
+      }
+      else cookies.set('GMGM', { LoggedIn: false }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
     }
     if (cookies.GMGM === null) {
       FetchUser();
     }
-});
+  });
 
   return (
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Layout />}>
-            <Route index element={<Home />} />
-            <Route path="morceaux" element={<Morceaux/>} />
-            <Route path="aboutUs" element={<AboutUs/>} />
-            <Route path="contactUs" element={<ContactUs/>}/>
-            <Route path="privacy" element={<Privacy/>}/>
-            <Route path="morceaux/:id" element={<MorceauDetail/>}/>
-            <Route path="inventaire" element={<Inventaire/>}/>
-            <Route path="login" element={<Login/>}/>
-            <Route path="logout" element={<Logout/>}/>
-            <Route path="register" element={<Register/>}/>
-            <Route path="formulaire" element={<Formulaire/>}/>
-            <Route path="myinvoices" element={<MyInvoices/>}/>
-            <Route path="invoices" element={<Invoices/>}/>
-          </Route>
-        </Routes>
-      </BrowserRouter>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="morceaux" element={<Morceaux />} />
+          <Route path="aboutUs" element={<AboutUs />} />
+          <Route path="contactUs" element={<ContactUs />} />
+          <Route path="privacy" element={<Privacy />} />
+          <Route path="morceaux/:id" element={<MorceauDetail />} />
+          <Route path="inventaire" element={<Inventaire />} />
+          <Route path="login" element={<Login />} />
+          <Route path="logout" element={<Logout />} />
+          <Route path="register" element={<Register />} />
+          <Route path="formulaire" element={<Formulaire />} />
+          <Route path="myinvoices" element={<MyInvoices />} />
+          <Route path="invoices" element={<Invoices />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 };
 
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Cart.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Cart.js
index d4bde38..9b1bb2d 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Cart.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Cart.js
@@ -1,5 +1,5 @@
+import { useEffect } from "react";
 import { createContext, useState } from "react";
-import { useCookies } from "react-cookie";
 
 export const CartContext = createContext({
     items: [],
@@ -14,9 +14,12 @@ export const CartContext = createContext({
 
 export function CartProvider({ children }) {
 
-    const [cartCookie, setCartCookie] = useCookies(['cart'])
     const [cartProducts, setCartProducts] = useState([]);
 
+    useEffect(() => {
+        
+    }, []);
+
     function addToCart(product, qty) {
 
         setCartProducts([...cartProducts, { ...product, quantity: parseFloat(qty), remaining: parseFloat(product.quantity) }]);
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
index 894a5d1..4268bc8 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
@@ -57,7 +57,7 @@ const Topbar = () => {
                             </Link>
                             {(user === null || user.LoggedIn === false) &&
                                 <Link className="nav-link" to="/login" >
-                                    Connexion
+                                    <b>Connexion</b>
                                 </Link>
                             }
                             {(user === null || user.LoggedIn === false) &&
@@ -87,9 +87,9 @@ const Topbar = () => {
                                             </Link>
                                         </Dropdown.Item>
                                         <Dropdown.Item>
-                                            <Button className="nav-link" onClick={() => logOut()}>
-                                                Déconnexion
-                                            </Button>
+                                            <Link className="nav-link" to="/logout">
+                                                <b>Déconnexion</b>
+                                            </Link>
                                         </Dropdown.Item>
                                         {user.role === "Administrateur" &&
                                             <Container>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Login.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Login.js
index 2862497..c48dd24 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Login.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Login.js
@@ -1,16 +1,18 @@
 import { useState } from "react";
 import { Button } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
-import { useCookies } from "react-cookie";
+import Cookies from "universal-cookie";
 
 const Login = () => {
-    const [cookies, setCookie] = useCookies(['name']);
+
     const [rememberme, setPersistence] = useState(true);
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     const [returnmess, returnMessage] = useState("");
     const [isLoading, setLoading] = useState(false);
 
+    const cookies = new Cookies();
+
     const navigate = useNavigate();
 
     const handleLogin = async (e) => {
@@ -21,8 +23,8 @@ const Login = () => {
             method: 'POST',
             credentials: 'include',
             headers: {
-               'Accept': 'text/json',
-               'Content-Type': 'text/json'
+                'Accept': 'text/json',
+                'Content-Type': 'text/json'
             },
             body: JSON.stringify({ email, password })
         });
@@ -34,32 +36,32 @@ const Login = () => {
                     method: 'GET',
                     credentials: 'include',
                     headers: {
-                       'Accept': 'text/json',
-                       'Content-Type': 'text/json'
+                        'Accept': 'text/json',
+                        'Content-Type': 'text/json'
                     }
                 });
                 const user = await confirm.json();
-                setCookie('GMGM', {...user, LoggedIn:true},  { path: '/', SameSite:'strict', secure:true })
-                navigate("/");
+                cookies.set('GMGM', { ...user, LoggedIn: true }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
+                window.location.href = "/";
             }
             else {
                 returnMessage("L'adresse courriel ou le mot de passe est incorrect.");
-                setCookie('GMGM', {LoggedIn:false},  { path: '/', SameSite:'strict', secure:true })      
-            } 
+                cookies.set('GMGM', { LoggedIn: false }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
+            }
         }
         else {
             returnMessage("Erreur d'API, veuillez réessayer plus tard.")
-            setCookie('GMGM', {LoggedIn:false},  { path: '/', SameSite:'strict', secure:true })      
-        } 
+            cookies.set('GMGM', { LoggedIn: false }, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
+        }
         setPassword("");
         setLoading(false);
     }
 
-    if (isLoading) return (<div className="cat-load"/>)
+    if (isLoading) return (<div className="cat-load" />)
 
     return (
         <div className="inventaire-form-container">
-          
+
             <form className="form-horizontal" onSubmit={handleLogin}>
                 <h4 className="text-center">Connexion</h4>
                 <div>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Logout.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Logout.js
index 8acb813..332ef2b 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Logout.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Logout.js
@@ -1,30 +1,31 @@
 import { useCookies } from "react-cookie";
-import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 
 const Logout = () => {
-    const navigate = useNavigate();
     const [cookies, setCookie, removeCookie] = useCookies(['name']);
 
 
     const response = fetch(`https://localhost:7292/api/Logout`, {
-            method: 'POST',
-            credentials: 'include'
-    })  
+        method: 'POST',
+        credentials: 'include'
+    })
 
     async function clear() {
         await removeCookie("GMGM");
     }
 
-    useEffect(()=>{
-       clear();
-        navigate("/");
-    });
+    useEffect(() => {
+        if (cookies.GMGM != null) {
+            clear();
+
+            window.location.reload();
+        }
+    }, []);
 
     return (
         <div className="inventaire-form-container">
-                <h3 className="text-center">Vous n'êtes plus connecté!</h3>
-                <h5 className="text-center">Faites le party ou quelque-chose...</h5>
+            <h3 className="text-center">Vous n'êtes plus connecté!</h3>
+            <h5 className="text-center">Faites le party ou quelque-chose...</h5>
         </div>
     )
 }