diff --git a/VeraxShield/VeraxShield/composants/affichages/navBar/NavBarPrincipale.razor b/VeraxShield/VeraxShield/composants/affichages/navBar/NavBarPrincipale.razor
index 86f4136..4ce2c62 100644
--- a/VeraxShield/VeraxShield/composants/affichages/navBar/NavBarPrincipale.razor
+++ b/VeraxShield/VeraxShield/composants/affichages/navBar/NavBarPrincipale.razor
@@ -25,7 +25,7 @@
             @DonneurEtat.getUtilisateurCourant().Pseudo
         </BarItem>
         <BarItem>
-            <Button Color="Color.Primary">Deconnexion</Button>
+            <Button Color="Color.Primary" @onclick="@Deconnecter">Deconnexion</Button>
         </BarItem>
     </BarEnd>
 </Bar>
diff --git a/VeraxShield/VeraxShield/composants/affichages/navBar/NavBarPrincipale.razor.cs b/VeraxShield/VeraxShield/composants/affichages/navBar/NavBarPrincipale.razor.cs
index 8302532..cc1b02e 100644
--- a/VeraxShield/VeraxShield/composants/affichages/navBar/NavBarPrincipale.razor.cs
+++ b/VeraxShield/VeraxShield/composants/affichages/navBar/NavBarPrincipale.razor.cs
@@ -24,5 +24,11 @@ namespace VeraxShield.composants.affichages.navBar
         {
             NavigationManager.NavigateTo("/utilisateurs/liste");
         }
+
+        private async Task Deconnecter()
+        {
+            await DonneurEtat.Deconnexion();
+            NavigationManager.NavigateTo("/connexion");
+        }
     }
 }
diff --git a/VeraxShield/VeraxShield/pages/Index.razor b/VeraxShield/VeraxShield/pages/Index.razor
index 7a1d538..c2b5d8e 100644
--- a/VeraxShield/VeraxShield/pages/Index.razor
+++ b/VeraxShield/VeraxShield/pages/Index.razor
@@ -53,16 +53,8 @@
     <Authorized>
 
         <body>
-            <header>
-                <h1>VeraxShield</h1>
-            </header>
-
-            <nav class="navbar">
-                <div class="container">
-                    <NavLink class="btn-navbar" href="/utilisateurs/liste">Liste des utilisateurs</NavLink>
-                    <button type="button" class="btn btn-navbar ml-md-auto" @onclick="@SeDeconnecter">Deconnexion</button>
-                </div>
-            </nav>
+            
+            <NavBarPrincipale/>
 
             <main>
                 <div class="home-center-box">
diff --git a/VeraxShield/VeraxShield/wwwroot/css/composants/navBar/NavBarPrincipale.css b/VeraxShield/VeraxShield/wwwroot/css/composants/navBar/NavBarPrincipale.css
index 226a1e4..8bf00cf 100644
--- a/VeraxShield/VeraxShield/wwwroot/css/composants/navBar/NavBarPrincipale.css
+++ b/VeraxShield/VeraxShield/wwwroot/css/composants/navBar/NavBarPrincipale.css
@@ -6,7 +6,6 @@
     color : white;
     margin : 0;
 }
-/* NavBarPrincipale.css */
 
 .bar-container {
     display : flex;
@@ -19,7 +18,7 @@
     display : flex;
     justify-content : space-around;
     align-items : center;
-    flex-grow : 1; /* Permet à la bar-menu de prendre tout l'espace disponible */
+    flex-grow : 1; 
 }
 
 
