diff --git a/resources/css/app.css b/resources/css/app.css
index 4ce88f7..9256192 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -27,10 +27,13 @@
 
 /* ########### LAYOUT ############ */
 @import './layout/nav.css';
+@import './layout/nav/header.css';
+@import './layout/nav/secondary-menu.css';
+@import './layout/nav/primary-menu.css';
+
 @import './layout/footer.css';
 @import './layout/section.css';
 @import './layout/gutenberg.css';
-
 /* ########### PAGES ############ */
 @import './pages/archive-dbmob.css';
 
diff --git a/resources/css/layout/nav/primary-menu.css b/resources/css/layout/nav/primary-menu.css
new file mode 100644
index 0000000..0fc69a9
--- /dev/null
+++ b/resources/css/layout/nav/primary-menu.css
@@ -0,0 +1,224 @@
+.primary-menu-container {
+  @apply mx-auto  
+	bg-primary 
+	text-white
+	relative
+	h-fit
+	py-0
+	lg:py-8
+	px-8
+	2xl:px-20
+ 	my-0;
+
+  .website_logo {
+    @apply hidden lg:block;
+  }
+
+  .tools-container {
+    @apply hidden lg:flex;
+  }
+
+  a {
+    @apply text-white;
+  }
+
+  nav#primary-menu-nav {
+    @apply max-w-screen-2xl  lg:w-full mx-auto;
+  }
+  .logo {
+    @apply mr-12 
+		w-[190px]
+		xl:w-[222px];
+  }
+  #primary-menu {
+    @apply flex 
+		flex-col 
+		lg:flex-row 
+		items-center 
+		justify-around
+		lg:justify-between;
+
+    ul {
+      @apply lg:flex 
+			gap-x-2 
+			lg:gap-x-4 
+			xl:gap-x-8
+			pr-0;
+    }
+
+    /* Highlight using list element */
+    li.current-page-parent > a,
+    li.current_page_item > a {
+      @apply font-medium
+		text-white
+		decoration-secondary
+		underline
+				underline-offset-8;
+    }
+
+    li.menu-item {
+      @apply font-medium 
+			text-lg
+			text-center;
+
+      &:hover > a,
+      a:focus {
+        @apply cursor-pointer
+				underline
+				underline-offset-8
+				decoration-1
+				text-white;
+      }
+      a:focus {
+        text-decoration: none;
+      }
+
+      /* IF SUBMENU CHILD */
+      .menu-item-submenu-toggle {
+        &:hover,
+        &:focus {
+          @apply text-secondary;
+        }
+        @apply relative pr-4;
+        &:after {
+          @apply absolute right-0;
+          content: '▼';
+          position: absolute;
+          display: inline-block;
+          line-height: 0.5;
+          height: 10px;
+          top: calc(50% - 4px);
+          width: 10px;
+          margin-left: 20px;
+          transform-origin: center;
+          background-repeat: no-repeat;
+          background-size: contain;
+          transition: all 0.3s ease-out;
+        }
+      }
+      .menu-item-submenu-toggle[aria-expanded='false']:after {
+        transform: rotate(0deg);
+      }
+      .menu-item-submenu-toggle[aria-expanded='true']:after {
+        transform: rotate(180deg);
+      }
+    }
+
+    li.menu-item.has-page-icon {
+      @apply flex flex-row lg:flex-col items-center justify-start lg:justify-end gap-4 font-normal tracking-wide;
+      .page_icon {
+        @apply w-7 h-7 object-contain object-center;
+      }
+    }
+    li.menu-item.menu-item-has-children:hover {
+      @screen lg {
+        .menu-item-submenu-toggle:after {
+          transform: rotate(180deg);
+        }
+        .sub-menu {
+          display: block;
+        }
+      }
+    }
+    /* submenus */
+    li .sub-menu {
+      @apply bg-primary 
+			p-6
+			mx-auto
+			lg:mx-0
+			static
+			lg:absolute;
+      z-index: 999;
+      display: none;
+
+      &.sub-menu-open {
+        display: block;
+      }
+
+      li {
+        @apply py-2 lg:text-left;
+      }
+
+      > a::after {
+        transform: translateY(-2px) rotate(-90deg);
+        content: '';
+        display: inline-block;
+        height: 10px;
+        width: 10px;
+        margin-left: 20px;
+        background-image: url('../resources/img/arrow_down_white.svg');
+        background-repeat: no-repeat;
+        background-size: contain;
+        transition: all 0.3s ease-out;
+      }
+    }
+  }
+}
+
+/* RESPONSIVE */
+@media (max-width: 960px) {
+  .primary-menu-container {
+    @apply w-fit mx-0;
+    #primary-menu {
+      @apply mt-0
+			left-0
+			z-40
+			hidden;
+
+      /* min-height: 100vh; */
+      height: fit-content;
+      top: 0;
+      width: fit-content;
+
+      > ul {
+        @apply max-w-xs
+				mx-auto;
+        /* min-height: 96vh; */
+        padding-top: 5vh;
+      }
+      li.menu-item {
+        @apply mt-0
+				text-center
+				text-white
+				font-medium
+				py-8
+				text-lg
+			
+				pb-0;
+
+        .sub-menu li {
+          @apply text-sm;
+        }
+      }
+    }
+  }
+
+  /* BURGER MENU */
+  body:has(.nav-open) {
+    @apply max-h-screen
+		overflow-hidden;
+
+    /* #content,
+		footer,
+		.wpml-ls-statics-footer {
+			@apply !hidden;
+		} */
+  }
+
+  .cta_plain_secondary,
+  .switch_language {
+    /* @apply self-end; */
+  }
+}
+
+@media (max-width: 960px) and (hover: none) {
+  /* ul {
+		@apply w-max mx-auto;
+	} */
+  .primary-menu-container {
+    li.menu-item {
+      @apply mx-auto 
+			/* !text-left */;
+    }
+  }
+}
diff --git a/resources/css/layout/nav/secondary-menu.css b/resources/css/layout/nav/secondary-menu.css
new file mode 100644
index 0000000..d6809c3
--- /dev/null
+++ b/resources/css/layout/nav/secondary-menu.css
@@ -0,0 +1,57 @@
+.secondary-menu-container {
+  @apply bg-primary  items-center px-8 py-4 
+	2xl:px-32;
+
+  a {
+    @apply text-white;
+  }
+
+  .secondary-menu-nav {
+    @apply max-w-screen-2xl w-full mx-auto flex justify-between items-center;
+
+    ul {
+      @apply block  lg:flex justify-between gap-4;
+    }
+    a {
+      @apply font-normal text-xl;
+    }
+    li.menu-item > a:hover {
+      @apply underline underline-offset-8 decoration-1;
+    }
+    .network-redirector {
+      @apply lg:block hidden;
+      a {
+        @apply flex items-center gap-4;
+        &:after {
+          transition: all 0.3s ease-out;
+          @apply w-8 h-8 bg-no-repeat bg-contain bg-center text-xl;
+          filter: invert(1);
+          content: '';
+          background-image: url('../resources/img/carhop-fleche-lien-externe-full.svg');
+          display: inline-block;
+        }
+        &:hover {
+          &:after {
+            @apply translate-x-2 rotate-45;
+          }
+        }
+      }
+    }
+  }
+}
+
+.secondary-menu-container {
+  @apply hidden lg:block;
+}
+
+/* @media (max-width: 1024px) {
+  header[nav-open='true'] .secondary-menu-container {
+    @apply block;
+  }
+} */
+
+@media (max-width: 960px) {
+  .secondary-menu-container {
+    @apply w-fit mx-0;
+  }
+}