diff --git a/src/CraftSharp/Shared/CraftLayout.razor b/src/CraftSharp/Shared/CraftLayout.razor
index c12c6f4..eba1769 100644
--- a/src/CraftSharp/Shared/CraftLayout.razor
+++ b/src/CraftSharp/Shared/CraftLayout.razor
@@ -3,9 +3,7 @@
 <PageTitle>CraftSharp</PageTitle>
 
 <div>
-    <div class="sidebar" >
-       <HeaderLayout />
-    </div>
+    <HeaderLayout/>
     <article class="content px-4">
         @Body
     </article>
diff --git a/src/CraftSharp/Shared/CraftLayout.razor.css b/src/CraftSharp/Shared/CraftLayout.razor.css
index 04f249a..5f28270 100644
--- a/src/CraftSharp/Shared/CraftLayout.razor.css
+++ b/src/CraftSharp/Shared/CraftLayout.razor.css
@@ -1,3 +1 @@
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(120,51,174) 0%, #411186 90%);
-}
+
\ No newline at end of file
diff --git a/src/CraftSharp/Shared/HeaderLayout.razor b/src/CraftSharp/Shared/HeaderLayout.razor
index bbd69d8..847a025 100644
--- a/src/CraftSharp/Shared/HeaderLayout.razor
+++ b/src/CraftSharp/Shared/HeaderLayout.razor
@@ -1,49 +1,50 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
-    <div class="container-fluid bar">
-        <button class="navbar-toggler @NavButtonCssClass" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
-                aria-controls="navbarCollapse" aria-label="Toggle navigation" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse @NavBarCssClass" id="navbarCollapse" @onclick="ToggleNavMenu">
-            <ul class="navbar-nav me-auto mb-0 mb-md-0">
-                <li class="nav-item">
-                </li>
-                <li class="nav-item">
-                    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                        <span class="oi oi-home"></span> Home
-                    </NavLink>
-                </li>
-                <li class="nav-item">
-                    <NavLink class="nav-link" href="List">
-                        <span class="oi oi-box"></span> List
-                    </NavLink>
-                </li>
+<div class="topbar">
+    <nav class="navbar navbar-expand-md mb-4">
+        <div class="container-fluid bar">
+            <button class="navbar-toggler @NavButtonCssClass" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
+                    aria-controls="navbarCollapse" aria-label="Toggle navigation" @onclick="ToggleNavMenu">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse @NavBarCssClass" id="navbarCollapse" @onclick="ToggleNavMenu">
+                <ul class="navbar-nav me-auto mb-0 mb-md-0 topbar_content" >
+                    <li class="nav-item">
+                        <NavLink class="nav-link" href="List">
+                            <span class="topbar_item">
+                                <img src="/Images/inventory_icon.png" class="topbar_itemimg"/> Inventaire
+                            </span>
+                        </NavLink>
+                    </li>
 
+                     
+                    <li class="nav-item">
+                        <NavLink class="nav-link" href="counter">
+                            <span class="topbar_item">
+                                <img src="/Images/shop_icon.png" class="topbar_itemimg"/> Magasin
+                            </span>
+                        </NavLink>
+                    </li>
+                    <span>
+                        <img class="nav-image" src="Images/CraftSharp-Logo.png" alt="Logo Application"/>
+                     </span>
 
-                <li class="nav-item">
-                    <NavLink class="nav-link" href="counter">
-                        <span class="oi oi-plus"></span> @Localizer["Shop"]
-                    </NavLink>
-                </li>
-                <li class="nav-item">
-                    <NavLink class="nav-link" href="fetchdata">
-                        <span class="oi oi-list-rich"></span> Inventaire
-                    </NavLink>
-                </li>
-            </ul>
-            <div>
-                <div >
-                    <CultureSelector/>
-                </div>
-                <div class="button"> Se connecter
-            </div>
-                <div class="button"> S'inscrire
-            </div>
+                    <li class="nav-item">
+                        <NavLink class="nav-link" href="fetchdata">
+                            <span class="topbar_item">
+                                <img src="/Images/opening_icon.png" class="topbar_itemimg"/> Ouverture
+                            </span>
+                        </NavLink>
+                    </li>
+                     <span class="btn_wrap">
+                        <div class="button"> Se connecter</div>
+                        <div class="button"> S'inscrire</div>
+                     </span>
+                </ul>
             </div>
         </div>
-         <img class="nav-image" src="Images/CraftSharp-Logo.png" alt="Logo Application"/>
-    </div>
-</nav>
+    </nav>
+</div>
+
+
 
 @code {
     private bool collapseNavMenu = true;
diff --git a/src/CraftSharp/Shared/HeaderLayout.razor.css b/src/CraftSharp/Shared/HeaderLayout.razor.css
index 30a180b..46bc43c 100644
--- a/src/CraftSharp/Shared/HeaderLayout.razor.css
+++ b/src/CraftSharp/Shared/HeaderLayout.razor.css
@@ -1,44 +1,89 @@
 
+.topbar {
+    background: url("../Images/nav_back.jpg") top center/cover no-repeat fixed;
+    align-content: center;
+}
+
 .oi {
     width: 3rem;
     font-size: 1.7rem;
     top: -2px;
 }
 
+.btn_wrap {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    height: 150px;
+}
+
 .bar{
     display: flex;
 }
 
+.nav-item {
+    height: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.topbar_itemimg {
+    height: 3rem;
+}
+
 .nav-image {
     width: 18rem;
     color: #ffffff;
     margin-top: 100px;
-    width: 50%;
+    width: 20%;
     position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+
+.topbar_item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 .navbar {
+    background-color: transparent;
     overflow: visible;
     position: static;
     height: 150px;
 }
 
+nav-link {
+    height: 100%;
+}
+
+.topbar_content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
 .button {
-    height: 5rem;
     width: 11rem;
     text-decoration: none;
     text-align: center;
     color: white;
     cursor: pointer;
-    background: url('Images/btn1.png') no-repeat;
+    background: url('Images/btn1.png') center center/contain no-repeat;
+    background-size: 100% 100%;
     font-family: SilkscreenNormal;
     line-height: 26px;
     padding-top: 6px;
 }
 
-.button:hover {
-    background: url('Images/btn2.png') no-repeat;
-}
+    .button:hover {
+        background: url('Images/btn2.png')center center/contain no-repeat;
+        background-size: 100% 100%;
+    }
 
 .nav-item {
     font-size: 1.1rem;
diff --git a/src/CraftSharp/wwwroot/Images/nav_back.jpg b/src/CraftSharp/wwwroot/Images/nav_back.jpg
new file mode 100644
index 0000000..e086428
Binary files /dev/null and b/src/CraftSharp/wwwroot/Images/nav_back.jpg differ