diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index 58e93c9..3127037 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -1,12 +1,14 @@
 <template>
   <header class="z-30 sticky top-0 left-0 flex justify-center w-full">
-    <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between items-center bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
+    <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 grid grid-cols-2 lg:grid-cols-3 md:grid-cols-3 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
       <Logo />
-      <NavBar />
-      <ClientOnly fallback-tag="div" class="flex gap-2 items-center">
+      <div class="grow flex justify-center">
+        <NavBar />
+      </div>
+      <div class="flex justify-end gap-2 items-center">
         <ThemePicker />
         <MobileNavBar />
-      </ClientOnly>
+      </div>
     </div>
   </header>
 </template>
diff --git a/src/components/header/Logo.vue b/src/components/header/Logo.vue
index afe896f..a68d02a 100644
--- a/src/components/header/Logo.vue
+++ b/src/components/header/Logo.vue
@@ -8,7 +8,7 @@ function getGroupColor() {
 </script>
 
 <template>
-  <NuxtLink to="/" class="flex gap-1 items-center p-2 rounded-xl group text-xl !bg-transparent !dark:bg-transparent">
+  <NuxtLink to="/" class="flex gap-1 items-center rounded-xl group text-xl !bg-transparent !dark:bg-transparent">
     <span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Arthur</span>
     <span :class="getGroupColor()" class="font-bold text-gray-300 dark:text-neutral-600 duration-300">/</span>
     <span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Danjou</span>