diff --git a/src/app/app.css b/src/app/app.css
index 2c96a5f..a10b710 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -6,60 +6,83 @@
     height: 100vh;
 }
 
-.top-nav {
-    line-height: 64px;
-}
-
-.logo {
-    float: left;
-    height: 64px;
-    padding-right: 24px;
-    line-height: 64px;
-}
-
-.logo img {
-    display: inline-block;
-    height: 32px;
-    width: 32px;
-    vertical-align: middle;
-}
-
-.logo h1 {
-    display: inline-block;
-    margin: 0 0 0 15px;
-    color: #fff;
-    font-weight: 600;
-    font-size: 20px;
-    font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
-    vertical-align: middle;
-}
-
-nz-content {
-    padding: 24px 50px;
-}
-
-.inner-content {
-    padding: 24px;
-    background: #fff;
-    height: 100%;
+nz-header {
+    display: flex;
+    align-items: center;
+    background: #001529;
+    padding: 0 24px;
 }
 
 .header-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
 }
 
+/* --- LOGO + TITRE --- */
 .logo {
     display: flex;
     align-items: center;
 }
 
-.top-nav {
-    flex: 1;
-    margin-left: 40px;
+.logo a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
 }
 
+.logo img {
+    height: 40px;
+    width: auto;
+}
+
+.logo h1 {
+    margin: 0 0 0 10px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 20px;
+    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+}
+
+/* --- MENU PRINCIPAL --- */
+.top-nav {
+    flex: 1;
+    margin: 0 40px;
+    line-height: 64px;
+    background: #001529;
+    border: none;
+}
+
+/* Couleur grise par défaut + effet blanc et zoom au survol */
+.top-nav li {
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.top-nav li a {
+    color: #bfbfbf !important; /* gris clair par défaut */
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+/* Au survol → zoom + blanc pur */
+.top-nav li:hover {
+    transform: scale(1.08);
+    background: transparent !important;
+    color: #fff !important;
+}
+
+.top-nav li:hover a {
+    color: #ffffff !important;
+}
+
+/* Supprime toute coloration bleue ou fond par défaut NG-ZORRO */
+.top-nav li.ant-menu-item-active,
+.top-nav li.ant-menu-item-selected {
+    background: transparent !important;
+    color: #fff !important;
+}
+
+/* --- ICONES DROITES --- */
 .right-icons {
     display: flex;
     align-items: center;
@@ -69,6 +92,22 @@ nz-content {
     cursor: pointer;
 }
 
-.right-icons nz-icon:hover {
-    color: #40a9ff;
-}
\ No newline at end of file
+.right-icons app-modal-nav {
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.right-icons app-modal-nav:hover {
+    color: #40a9ff; /* survol bleu clair uniquement pour les icônes */
+    transform: scale(1.2);
+}
+
+/* --- CONTENU --- */
+nz-content {
+    padding: 24px 50px;
+}
+
+.inner-content {
+    padding: 24px;
+    background: #fff;
+    height: 100%;
+}
diff --git a/src/app/app.html b/src/app/app.html
index 8c565bd..2136269 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1,73 +1,81 @@
 <nz-layout class="app-layout">
     <nz-header>
-        <div class="logo">
-            <a routerLink="/welcome">
-                <img src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png" alt="logo" style="width: 100px; height: auto">
-                <h1>PYRO FÊTES</h1>
-            </a>
+        <div class="header-container">
+            <!-- LOGO -->
+            <div class="logo">
+                <a routerLink="/welcome">
+                    <img
+                            src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
+                            alt="logo"
+                            style="width: 100px; height: auto"
+                    />
+                    <h1>PYRO FÊTES</h1>
+                </a>
+            </div>
+
+            <!-- MENU PRINCIPAL -->
+            <ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
+                <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                    <a routerLink="/stock">
+                        <nz-icon nzType="stock"></nz-icon>
+                        <span>Stock</span>
+                    </a>
+                </li>
+                <li nz-submenu nzTitle="Partenaires" nzIcon="team">
+                    <ul>
+                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                            <a routerLink="/supplier">
+                                <nz-icon nzType="shop"></nz-icon>
+                                <span>Fournisseurs</span>
+                            </a>
+                        </li>
+                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                            <a routerLink="/deliverer">
+                                <nz-icon nzType="car"></nz-icon>
+                                <span>Livreurs</span>
+                            </a>
+                        </li>
+                    </ul>
+                </li>
+                <li nz-submenu nzTitle="Recettes" nzIcon="euro-circle">
+                    <ul>
+                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                            <a routerLink="/quotation">
+                                <nz-icon nzType="file"></nz-icon>
+                                <span>Devis</span>
+                            </a>
+                        </li>
+                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                            <a routerLink="/purchase-order">
+                                <nz-icon nzType="file"></nz-icon>
+                                <span>Bon de commande</span>
+                            </a>
+                        </li>
+                        <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                            <a routerLink="/delivery-note">
+                                <nz-icon nzType="file"></nz-icon>
+                                <span>Bon de livraison</span>
+                            </a>
+                        </li>
+                    </ul>
+                </li>
+                <li nz-menu-item routerLinkActive="ant-menu-item-selected">
+                    <a routerLink="/user">
+                        <nz-icon nzType="user"></nz-icon>
+                        <span>Utilisateur</span>
+                    </a>
+                </li>
+            </ul>
+
+            <!-- ICONES À DROITE -->
+            <div class="right-icons">
+                <app-modal-nav nameIcon="bell" name="Notification"></app-modal-nav>
+                <app-modal-nav nameIcon="user" name="Profil"></app-modal-nav>
+                <app-modal-nav nameIcon="setting" name="Paramètres"></app-modal-nav>
+            </div>
         </div>
-        <ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
-            <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                <a routerLink="/stock">
-                    <nz-icon nzType="stock"></nz-icon>
-                    <span>Stock</span>
-                </a>
-            </li>
-            <li nz-submenu nzTitle="Partenaires" nzIcon="team">
-                <ul>
-                    <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                        <a routerLink="/supplier">
-                            <nz-icon nzType="shop"></nz-icon>
-                            <span>Fournisseurs</span>
-                        </a>
-                    </li>
-                    <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                        <a routerLink="/deliverer">
-                            <nz-icon nzType="car"></nz-icon>
-                            <span>Livreurs</span>
-                        </a>
-                    </li>
-                </ul>
-            </li>
-            <li nz-submenu nzTitle="Recettes" nzIcon="euro-circle">
-                <ul>
-                    <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                        <a routerLink="/quotation">
-                            <nz-icon nzType="file"></nz-icon>
-                            <span>Devis</span>
-                        </a>
-                    </li>
-                    <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                        <a routerLink="/purchase-order">
-                            <nz-icon nzType="file"></nz-icon>
-                            <span>Bon de commande</span>
-                        </a>
-                    </li>
-                    <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                        <a routerLink="/delivery-note">
-                            <nz-icon nzType="file"></nz-icon>
-                            <span>Bon de livraison</span>
-                        </a>
-                    </li>
-                </ul>
-            </li>
-            <li nz-menu-item routerLinkActive="ant-menu-item-selected">
-                <a routerLink="/user">
-                    <nz-icon nzType="user"></nz-icon>
-                    <span>Utilisateur</span>
-                </a>
-            </li>
-            <li nz-menu-item>
-                <app-modalNav nameIcon="bell" name="Notification"></app-modalNav>
-            </li>
-            <li nz-menu-item>
-                <app-modalNav nameIcon="user" name="Profil"></app-modalNav>
-            </li>
-            <li nz-menu-item>
-                <app-modalNav nameIcon="setting" name="Paramètres"></app-modalNav>
-            </li>
-        </ul>
     </nz-header>
+
     <nz-content>
         <div class="inner-content">
             <router-outlet></router-outlet>