diff --git a/packages/frontend/src/lib/components/girls/girls.svelte b/packages/frontend/src/lib/components/girls/girls.svelte
deleted file mode 100644
index 3a23019..0000000
--- a/packages/frontend/src/lib/components/girls/girls.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<div class="w-full h-auto">
-  <svg
-    version="1.0"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1280.000000 904.000000"
-    stroke-width="5"
-    stroke="#ce47eb"
-    preserveAspectRatio="xMidYMid meet"
-  >
-    <metadata> Created by potrace 1.15, written by Peter Selinger 2001-2017 </metadata>
-    <g transform="translate(0.000000,904.000000) scale(0.100000,-0.100000)">
-      <path
-        d="M7930 7043 c-73 -10 -95 -18 -134 -51 -25 -20 -66 -53 -91 -72 -26
--19 -69 -66 -96 -104 -116 -164 -130 -314 -59 -664 32 -164 36 -217 18 -256
--13 -30 -14 -30 -140 -52 -75 -12 -105 -13 -129 -5 -18 6 -59 11 -93 11 -123
--1 -213 -66 -379 -275 -245 -308 -501 -567 -686 -693 l-92 -64 -82 7 c-53 5
--88 13 -100 23 -21 18 -66 20 -167 7 -73 -9 -124 -31 -159 -69 -22 -23 -23
--31 -18 -94 6 -58 4 -71 -11 -84 -44 -40 -203 -119 -295 -149 -56 -18 -144
--50 -195 -71 -50 -21 -138 -51 -195 -67 -232 -65 -369 -131 -595 -284 -182
--124 -172 -123 -208 -27 -23 60 -39 81 -189 245 -279 305 -319 354 -368 458
--46 94 -47 98 -32 127 8 16 15 36 15 43 0 8 14 41 30 72 17 31 30 63 30 70 0
-7 7 18 15 25 8 7 15 26 15 42 0 42 15 65 49 71 17 4 37 17 46 30 14 23 14 30
--9 101 -28 88 -21 130 22 141 20 5 23 10 18 31 -4 13 -1 34 5 46 13 25 33 239
-31 336 0 42 -8 78 -23 108 -31 65 -121 158 -209 217 -41 28 -77 55 -79 60 -2
-5 -17 24 -33 43 -23 26 -48 39 -111 58 -183 55 -239 61 -361 36 -156 -33 -333
--185 -425 -368 -72 -143 -93 -280 -96 -622 -2 -240 -5 -288 -24 -379 -12 -57
--30 -120 -40 -140 -11 -20 -61 -84 -113 -142 -52 -58 -105 -121 -118 -140 -13
--19 -45 -58 -72 -88 -93 -106 -127 -193 -237 -616 -33 -127 -67 -251 -76 -275
--9 -25 -48 -153 -86 -285 -78 -264 -163 -502 -334 -935 -135 -340 -194 -526
--290 -910 -20 -80 -47 -180 -61 -223 -13 -43 -24 -92 -24 -109 0 -42 -43 -79
--132 -112 -56 -20 -108 -52 -213 -132 -77 -58 -162 -117 -190 -131 -85 -43
--107 -75 -62 -89 12 -3 30 -15 40 -25 10 -11 30 -19 45 -19 29 0 146 52 175
-77 9 9 19 14 22 12 2 -3 -21 -24 -51 -47 -55 -43 -63 -59 -42 -80 30 -30 130
-5 198 69 54 52 127 109 139 109 20 0 11 -27 -25 -80 -38 -56 -38 -74 0 -91 33
--16 67 7 135 89 31 37 70 71 95 84 l42 20 82 -21 c45 -11 95 -21 111 -21 17 0
-50 -11 75 -25 58 -32 136 -35 166 -5 35 35 26 57 -40 90 -59 30 -156 132 -186
-195 -30 63 -31 124 -3 258 43 213 95 336 279 657 126 219 231 423 267 520 14
-36 40 128 58 205 19 77 50 185 69 240 55 159 182 450 195 447 7 -1 9 7 5 23
--10 38 0 30 37 -30 42 -69 60 -53 28 27 -36 92 -39 98 -34 98 3 0 14 -18 25
--41 14 -26 26 -39 35 -35 9 3 28 -22 59 -81 65 -121 162 -266 237 -353 35 -41
-174 -196 309 -345 359 -394 379 -421 409 -549 25 -103 90 -214 169 -287 74
--67 203 -135 332 -173 110 -33 472 -112 575 -125 325 -44 688 -30 1453 54 172
-19 352 35 400 35 112 1 156 11 272 66 139 66 171 103 171 197 0 64 -11 95 -52
-141 -17 20 -30 38 -28 39 2 1 13 7 24 13 11 6 21 23 23 38 2 14 12 31 23 36
-12 7 19 21 19 38 0 19 7 30 23 37 14 6 23 21 25 39 2 16 10 36 18 44 10 9 13
-24 9 41 -4 20 -1 28 16 36 58 26 47 86 -21 106 -38 12 -40 14 -40 51 0 51 -18
-82 -82 145 -73 70 -132 105 -358 213 -547 260 -919 419 -1210 517 -13 5 -13 6
-0 10 8 3 22 13 30 22 23 26 363 124 434 125 l60 1 21 -85 c29 -118 59 -175
-129 -245 118 -117 234 -156 461 -158 171 -1 271 17 445 80 268 96 361 157 602
-396 93 92 171 159 246 209 155 105 513 381 595 458 131 122 189 224 277 485
-109 325 149 342 163 70 9 -163 30 -242 143 -531 53 -137 98 -258 101 -270 3
--14 -5 -28 -29 -46 -18 -14 -94 -80 -168 -147 -137 -123 -261 -216 -306 -227
--17 -4 -46 4 -92 27 -60 29 -80 34 -192 41 -69 4 -144 11 -166 14 -103 15
--115 -61 -15 -95 19 -6 46 -11 61 -11 44 0 91 -20 88 -38 -2 -8 -15 -24 -30
--35 -22 -17 -30 -18 -42 -7 -21 16 -46 6 -46 -19 0 -25 -29 -35 -110 -35 -57
--1 -65 -3 -68 -21 -4 -29 44 -54 120 -62 35 -3 66 -12 71 -19 4 -7 31 -25 59
--39 41 -21 60 -24 93 -19 25 3 45 2 49 -4 3 -5 34 -9 69 -7 52 1 72 7 108 32
-58 40 97 59 135 66 32 6 462 230 516 269 18 12 33 17 35 12 2 -6 30 -62 62
--126 l58 -116 -3 -112 c-2 -61 -6 -115 -9 -119 -2 -5 -100 -8 -217 -8 -221 0
--452 -23 -868 -88 -85 -13 -225 -33 -310 -45 -189 -26 -314 -52 -440 -92 -203
--65 -284 -132 -304 -254 -15 -90 30 -173 137 -251 28 -20 113 -85 187 -142 74
--58 171 -129 215 -158 105 -71 324 -181 563 -283 106 -45 194 -86 197 -90 9
--14 -260 -265 -361 -337 -100 -71 -130 -102 -188 -193 -16 -24 -53 -73 -82
--107 -30 -35 -67 -89 -83 -121 -20 -41 -63 -92 -135 -163 -86 -87 -106 -112
--112 -144 -4 -22 -15 -53 -26 -70 -23 -38 -23 -73 -1 -105 39 -56 94 -81 132
--60 18 9 21 8 21 -9 0 -33 11 -51 41 -67 20 -10 35 -12 46 -5 13 7 21 3 36
--15 11 -14 29 -24 44 -24 15 0 34 -7 44 -16 9 -8 27 -16 40 -16 13 -1 33 -8
-44 -15 11 -7 29 -13 40 -13 50 0 129 132 140 232 21 203 78 389 136 444 17 16
-51 56 74 89 89 124 200 212 433 343 l142 81 14 -27 c16 -32 36 -151 36 -220 0
--35 6 -54 21 -71 43 -46 143 -68 168 -37 6 8 14 37 18 65 5 46 11 56 47 85 23
-18 61 44 86 58 91 53 151 145 153 234 0 38 -5 50 -33 79 -19 19 -53 42 -77 51
--24 9 -43 19 -43 23 0 3 28 24 62 46 81 52 213 178 298 284 63 79 75 89 148
-122 l80 37 32 -49 c79 -122 233 -192 370 -170 222 37 395 196 428 396 18 107
-35 427 30 560 -9 217 -63 344 -223 514 -52 56 -95 106 -95 111 0 5 4 12 10 15
-55 34 235 523 290 785 10 52 28 118 39 145 10 28 29 103 41 169 27 142 24 271
--7 352 -28 72 -115 215 -185 303 -65 82 -118 184 -125 241 -11 82 59 182 93
-135 9 -12 17 -14 31 -7 10 6 25 7 33 2 8 -4 27 -6 41 -3 28 5 44 45 33 80 -5
-15 -4 15 4 4 12 -17 17 -6 76 144 39 99 43 100 22 10 -8 -33 -13 -62 -10 -64
-10 -10 65 154 83 249 6 30 16 80 22 110 19 85 16 216 -5 278 -11 32 -22 50
--29 45 -7 -4 -8 0 -3 13 4 10 4 15 0 12 -6 -7 -89 109 -89 124 0 4 -6 13 -14
-20 -10 10 -12 10 -7 1 14 -24 -10 -13 -40 19 -16 17 -23 27 -15 23 9 -5 12 -4
-8 2 -11 18 -131 71 -188 82 -50 11 -127 14 -259 12 -25 -1 -57 -7 -72 -15 -17
--9 -28 -11 -28 -4 0 6 -9 8 -22 3 -13 -4 -31 -7 -41 -6 -9 0 -15 -4 -12 -9 3
--6 0 -7 -8 -4 -20 7 -127 -84 -176 -149 -43 -57 -111 -185 -111 -208 0 -19
--55 -135 -69 -143 -6 -4 -11 -12 -11 -18 0 -19 29 13 66 73 19 33 37 59 40 59
-10 0 -65 -126 -103 -173 -30 -36 -39 -53 -30 -59 9 -6 9 -8 0 -8 -9 0 -10 -7
--2 -27 6 -16 10 -29 10 -30 -1 -11 23 -63 29 -63 4 0 20 10 36 22 30 24 26 14
--13 -39 -13 -18 -20 -33 -14 -33 19 0 74 65 97 115 13 27 24 43 24 34 0 -25
--21 -81 -42 -111 -23 -34 -23 -46 0 -25 18 16 19 14 21 -70 3 -183 25 -289 76
--381 26 -46 33 -96 15 -107 -6 -3 -86 -17 -178 -30 -240 -35 -301 -61 -360
--152 -62 -96 -73 -147 -83 -378 -9 -214 -20 -312 -32 -285 -20 45 -77 356 -91
-492 -18 174 -34 243 -72 325 -58 121 -120 163 -243 163 -63 0 -80 3 -85 16
--11 29 -6 103 13 196 43 209 51 282 51 479 -1 301 -22 464 -76 571 -32 64
--132 168 -191 200 -79 43 -224 72 -303 61z m2438 -421 c18 -14 38 -35 44 -46
-9 -16 -39 22 -102 82 -11 11 27 -13 58 -36z m142 -188 c17 -52 7 -51 -11 1 -9
-25 -13 42 -8 40 4 -3 13 -21 19 -41z m-1000 -42 c0 -5 -7 -17 -15 -28 -14 -18
--14 -17 -4 9 12 27 19 34 19 19z m1037 -14 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13
-3 -3 4 -12 1 -19z m10 -40 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1
--19z m-53 -327 c-4 -23 -9 -40 -11 -37 -3 3 -2 23 2 46 4 23 9 39 11 37 3 -2
-2 -23 -2 -46z m-17 -73 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z
-m-3487 -790 c-17 -35 -55 -110 -84 -168 -29 -58 -72 -163 -96 -235 -45 -134
--64 -175 -84 -175 -6 1 -23 18 -38 40 -31 44 -71 60 -155 60 -29 0 -53 3 -52
-8 0 4 63 59 141 122 182 149 293 258 347 343 24 37 45 67 47 67 3 0 -10 -28
--26 -62z m-4768 -415 c-37 -46 -160 -176 -140 -148 21 29 160 185 165 185 3 0
--9 -17 -25 -37z m38 -52 c-11 -21 -30 -37 -30 -25 0 8 30 44 37 44 2 0 -1 -9
--7 -19z m1692 -588 c22 -30 39 -56 36 -58 -5 -5 -107 115 -122 143 -15 28 42
--29 86 -85z m-100 -108 c6 -11 -13 3 -42 30 -28 28 -56 59 -62 70 -6 11 13 -2
-42 -30 28 -27 56 -59 62 -70z m1587 -1 c29 -6 22 -10 -71 -40 -57 -19 -128
--41 -158 -49 -58 -15 -288 -41 -296 -33 -2 3 23 19 56 37 45 24 98 40 208 61
-153 29 208 34 261 24z m-860 -1488 c150 -59 299 -94 495 -114 l68 -7 -42 -27
--42 -28 -111 20 c-62 11 -196 28 -300 38 -103 10 -189 21 -192 23 -2 3 -1 21
-4 40 5 19 12 46 15 62 4 15 9 27 13 27 3 0 45 -15 92 -34z m3893 -371 l37 -6
--55 -72 c-31 -40 -59 -72 -62 -73 -4 -1 -51 44 -104 100 l-97 101 122 -22 c67
--13 139 -25 159 -28z"
-      />
-    </g>
-  </svg>
-</div>
diff --git a/packages/frontend/src/lib/components/header/header.svelte b/packages/frontend/src/lib/components/header/header.svelte
index cd48950..e8d869b 100644
--- a/packages/frontend/src/lib/components/header/header.svelte
+++ b/packages/frontend/src/lib/components/header/header.svelte
@@ -11,7 +11,6 @@
   import { Avatar, AvatarFallback, AvatarImage } from "$lib/components/ui/avatar";
   import { getUserInitials } from "$lib/utils";
   import BurgerMenuButton from "../burger-menu-button/burger-menu-button.svelte";
-  import Girls from "../girls/girls.svelte";
   import Logo from "../logo/logo.svelte";
 
   interface Props {
@@ -78,24 +77,14 @@
         {/each}
       </nav>
 
-      <!-- Desktop Login Button -->
+      <!-- Desktop Auth Actions -->
       {#if authStatus.authenticated}
-        <div class="w-full flex items-center justify-end">
+        <div class="w-full hidden lg:flex items-center justify-end">
           <div class="flex items-center gap-2 rounded-full bg-muted/30 p-1">
-            <!-- Notifications -->
-            <!-- <Button variant="ghost" size="sm" class="relative h-9 w-9 rounded-full p-0 hover:bg-background/80">
-						<BellIcon class="h-4 w-4" />
-						<Badge class="absolute -right-1 -top-1 h-5 w-5 rounded-full bg-gradient-to-r from-primary to-accent p-0 text-xs text-primary-foreground">3</Badge>
-						<span class="sr-only">Notifications</span>
-					</Button> -->
-
-            <!-- <Separator orientation="vertical" class="mx-1 h-6 bg-border/50" /> -->
-
-            <!-- User Actions -->
             <Button
               variant="link"
               size="icon"
-              class={`hidden sm:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/me" }) ? "text-foreground" : "hover:text-foreground"}`}
+              class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/me" }) ? "text-foreground" : "hover:text-foreground"}`}
               href="/me"
               title={$_("header.dashboard")}
             >
@@ -109,7 +98,7 @@
             <Button
               variant="link"
               size="icon"
-              class={`hidden sm:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
+              class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
               href="/play"
               title={$_("header.play")}
             >
@@ -120,9 +109,7 @@
               <span class="sr-only">{$_("header.play")}</span>
             </Button>
 
-            <Separator orientation="vertical" class="hidden md:flex mx-1 h-6 bg-border/50" />
-
-            <!-- Slide Logout Button -->
+            <Separator orientation="vertical" class="mx-1 h-6 bg-border/50" />
 
             <LogoutButton
               user={{
@@ -136,7 +123,7 @@
           </div>
         </div>
       {:else}
-        <div class="flex w-full items-center justify-end gap-4">
+        <div class="hidden lg:flex w-full items-center justify-end gap-4">
           <Button variant="outline" class="font-medium" href="/login">{$_("header.login")}</Button>
           <Button
             href="/signup"
@@ -145,219 +132,202 @@
           >
         </div>
       {/if}
-      <BurgerMenuButton
-        label={$_("header.navigation")}
-        bind:isMobileMenuOpen
-        onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
-      />
+
+      <!-- Burger button — mobile/tablet only -->
+      <div class="lg:hidden ml-auto">
+        <BurgerMenuButton
+          label={$_("header.navigation")}
+          bind:isMobileMenuOpen
+          onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
+        />
+      </div>
     </div>
   </div>
-  <!-- Mobile Navigation -->
-  <div
-    class={`border-t border-border/20 bg-background/95 bg-gradient-to-br from-primary to-accent backdrop-blur-xl max-h-[calc(100vh-4rem)] overflow-y-auto shadow-xl/30 transition-all duration-250 ${isMobileMenuOpen ? "opacity-100" : "opacity-0"}`}
-  >
-    {#if isMobileMenuOpen}
-      <div class="container mx-auto grid grid-cols-1 lg:grid-cols-3">
-        <div class="hidden lg:flex col-span-2">
-          <Girls />
-        </div>
-        <div class="py-6 px-4 space-y-6 lg:col-start-3 border-t border-border/20 bg-background/95">
-          <!-- User Profile Card -->
-          {#if authStatus.authenticated}
-            <div
-              class="relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-br from-card to-card/50 p-4 backdrop-blur-sm"
+</header>
+
+<!-- Backdrop -->
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions a11y_no_noninteractive_element_interactions -->
+<div
+  role="presentation"
+  class={`fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-opacity duration-300 lg:hidden ${isMobileMenuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`}
+  onclick={closeMenu}
+></div>
+
+<!-- Flyout panel -->
+<div
+  class={`fixed inset-y-0 right-0 z-50 w-80 max-w-[85vw] bg-card/95 backdrop-blur-xl shadow-2xl shadow-primary/20 border-l border-border/30 transform transition-transform duration-300 ease-in-out lg:hidden overflow-y-auto flex flex-col ${isMobileMenuOpen ? "translate-x-0" : "translate-x-full"}`}
+  aria-hidden={!isMobileMenuOpen}
+>
+  <!-- Panel header -->
+  <div class="flex items-center justify-end px-5 py-4 border-b border-border/30">
+    <button
+      class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-full hover:bg-muted/60 transition-colors text-muted-foreground hover:text-foreground"
+      onclick={closeMenu}
+      aria-label="Close menu"
+    >
+      <span class="icon-[ri--close-line] w-5 h-5"></span>
+    </button>
+  </div>
+
+  <div class="flex-1 py-6 px-5 space-y-6">
+    <!-- User Profile Card -->
+    {#if authStatus.authenticated}
+      <div
+        class="relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-br from-card to-card/50 p-4"
+      >
+        <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5"></div>
+        <div class="relative flex items-center gap-3">
+          <Avatar class="h-12 w-12 ring-2 ring-primary/30">
+            <AvatarImage
+              src={getAssetUrl(authStatus.user!.avatar, "mini")}
+              alt={authStatus.user!.artist_name}
+            />
+            <AvatarFallback
+              class="bg-gradient-to-br from-primary to-accent text-primary-foreground font-semibold"
             >
-              <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5"></div>
-              <div class="relative flex items-center gap-4">
-                <Avatar class="h-14 w-14 ring-2 ring-primary/30">
-                  <AvatarImage
-                    src={getAssetUrl(authStatus.user!.avatar, "mini")}
-                    alt={authStatus.user!.artist_name}
-                  />
-                  <AvatarFallback
-                    class="bg-gradient-to-br from-primary to-accent text-primary-foreground font-semibold"
-                  >
-                    {getUserInitials(authStatus.user!.artist_name)}
-                  </AvatarFallback>
-                </Avatar>
-                <div class="flex flex-1 flex-col gap-1">
-                  <p class="text-base font-semibold text-foreground">
-                    {authStatus.user!.artist_name}
-                  </p>
-                  <p class="text-sm text-muted-foreground">
-                    {authStatus.user!.email}
-                  </p>
-                  <div class="flex items-center gap-2 mt-1">
-                    <div class="h-2 w-2 rounded-full bg-green-500"></div>
-                    <span class="text-xs text-muted-foreground">Online</span>
-                  </div>
-                </div>
-                <!-- Notifications Badge -->
-                <!-- <Button
-                  variant="ghost"
-                  size="sm"
-                  class="relative h-10 w-10 rounded-full p-0"
-                >
-                  <BellIcon class="h-4 w-4" />
-                  <Badge
-                    class="absolute -right-1 -top-1 h-5 w-5 rounded-full bg-gradient-to-r from-primary to-accent p-0 text-xs text-primary-foreground"
-                    >3</Badge
-                  >
-                </Button> -->
-              </div>
-            </div>
-          {/if}
-          <!-- Navigation Cards -->
-          <div class="space-y-3">
-            <h3 class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-              {$_("header.navigation")}
-            </h3>
-            <div class="grid gap-2">
-              {#each navLinks as link (link.href)}
-                <a
-                  href={link.href}
-                  class="flex items-center justify-between rounded-xl border border-border/50 bg-card/50 p-4 backdrop-blur-sm transition-all hover:bg-card hover:border-primary/20 {isActiveLink(
-                    link,
-                  )
-                    ? 'border-primary/30 bg-primary/5'
-                    : ''}"
-                  onclick={() => (isMobileMenuOpen = false)}
-                >
-                  <span class="font-medium text-foreground">{link.name}</span>
-                  <div class="flex items-center gap-2">
-                    <!-- {#if isActiveLink(link)}
-                      <div class="h-2 w-2 rounded-full bg-primary"></div>
-                    {/if} -->
-                    <span class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground"
-                    ></span>
-                  </div>
-                </a>
-              {/each}
+              {getUserInitials(authStatus.user!.artist_name)}
+            </AvatarFallback>
+          </Avatar>
+          <div class="flex flex-1 flex-col gap-0.5 min-w-0">
+            <p class="text-sm font-semibold text-foreground truncate">
+              {authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
+            </p>
+            <p class="text-xs text-muted-foreground truncate">
+              {authStatus.user!.email}
+            </p>
+            <div class="flex items-center gap-1.5 mt-0.5">
+              <div class="h-1.5 w-1.5 rounded-full bg-green-500"></div>
+              <span class="text-xs text-muted-foreground">Online</span>
             </div>
           </div>
-
-          <!-- Account Actions -->
-          <div class="space-y-3">
-            <h3 class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-              {$_("header.account")}
-            </h3>
-
-            <div class="grid gap-2">
-              {#if authStatus.authenticated}
-                <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/me" }) ? "border-primary/30 bg-primary/5" : ""}`}
-                  href="/me"
-                  onclick={closeMenu}
-                >
-                  <div
-                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10"
-                  >
-                    <span
-                      class="icon-[ri--dashboard-2-line] h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors"
-                    ></span>
-                  </div>
-                  <div class="flex flex-1 flex-col gap-1">
-                    <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground">{$_("header.dashboard")}</span>
-                    </div>
-                    <span class="text-sm text-muted-foreground">{$_("header.dashboard_hint")}</span>
-                  </div>
-                  <span
-                    class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
-                  ></span>
-                </a>
-
-                <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/play" }) ? "border-primary/30 bg-primary/5" : ""}`}
-                  href="/play"
-                  onclick={closeMenu}
-                >
-                  <div
-                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10"
-                  >
-                    <span
-                      class="icon-[ri--rocket-line] h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors"
-                    ></span>
-                  </div>
-                  <div class="flex flex-1 flex-col gap-1">
-                    <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground">{$_("header.play")}</span>
-                    </div>
-                    <span class="text-sm text-muted-foreground">{$_("header.play_hint")}</span>
-                  </div>
-                  <span
-                    class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
-                  ></span>
-                </a>
-              {:else}
-                <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/login" }) ? "border-primary/30 bg-primary/5" : ""}`}
-                  href="/login"
-                  onclick={closeMenu}
-                >
-                  <div
-                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10"
-                  >
-                    <span
-                      class="icon-[ri--login-circle-line] h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors"
-                    ></span>
-                  </div>
-                  <div class="flex flex-1 flex-col gap-1">
-                    <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground">{$_("header.login")}</span>
-                    </div>
-                    <span class="text-sm text-muted-foreground">{$_("header.login_hint")}</span>
-                  </div>
-                  <span
-                    class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
-                  ></span>
-                </a>
-
-                <a
-                  class={`flex items-center gap-4 rounded-xl border border-border/50 bg-card/50 p-4 text-left backdrop-blur-sm transition-all group hover:bg-card hover:border-primary/20 ${isActiveLink({ href: "/signup" }) ? "border-primary/30 bg-primary/5" : ""}`}
-                  href="/signup"
-                  onclick={closeMenu}
-                >
-                  <div
-                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-muted to-muted/50 transition-all group-hover:bg-card group-hover:from-primary/10 group-hover:to-accent/10"
-                  >
-                    <span
-                      class="icon-[ri--heart-add-2-line] h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors"
-                    ></span>
-                  </div>
-                  <div class="flex flex-1 flex-col gap-1">
-                    <div class="flex items-center gap-2">
-                      <span class="font-medium text-foreground">{$_("header.signup")}</span>
-                    </div>
-                    <span class="text-sm text-muted-foreground">{$_("header.signup_hint")}</span>
-                  </div>
-                  <span
-                    class="icon-[ri--arrow-drop-right-line] h-6 w-6 text-muted-foreground transition-all"
-                  ></span>
-                </a>
-              {/if}
-            </div>
-          </div>
-
-          {#if authStatus.authenticated}
-            <!-- Logout Button -->
-            <button
-              class="cursor-pointer flex w-full items-center gap-4 rounded-xl border border-destructive/20 bg-destructive/5 p-4 text-left backdrop-blur-sm transition-all hover:bg-destructive/10 hover:border-destructive/30 group"
-              onclick={handleLogout}
-            >
-              <div
-                class="flex h-10 w-10 items-center justify-center rounded-xl bg-destructive/10 group-hover:bg-destructive/20 transition-all"
-              >
-                <span class="icon-[ri--logout-circle-r-line] h-4 w-4 text-destructive"></span>
-              </div>
-              <div class="flex flex-1 flex-col gap-1">
-                <span class="font-medium text-foreground">{$_("header.logout")}</span>
-                <span class="text-sm text-muted-foreground">{$_("header.logout_hint")}</span>
-              </div>
-            </button>
-          {/if}
         </div>
       </div>
     {/if}
+
+    <!-- Navigation -->
+    <div class="space-y-2">
+      <h3 class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+        {$_("header.navigation")}
+      </h3>
+      <div class="grid gap-1.5">
+        {#each navLinks as link (link.href)}
+          <a
+            href={link.href}
+            class={`flex items-center justify-between rounded-xl border px-4 py-3 transition-all duration-200 hover:border-primary/30 hover:bg-primary/5 ${
+              isActiveLink(link)
+                ? "border-primary/40 bg-primary/8 text-foreground"
+                : "border-border/40 bg-card/50 text-foreground/85"
+            }`}
+            onclick={closeMenu}
+          >
+            <span class="font-medium text-sm">{link.name}</span>
+            <span class="icon-[ri--arrow-right-s-line] h-4 w-4 text-muted-foreground"></span>
+          </a>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Account -->
+    <div class="space-y-2">
+      <h3 class="px-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+        {$_("header.account")}
+      </h3>
+      <div class="grid gap-1.5">
+        {#if authStatus.authenticated}
+          <a
+            class={`flex items-center gap-3 rounded-xl border px-4 py-3 transition-all duration-200 group hover:border-primary/30 hover:bg-primary/5 ${isActiveLink({ href: "/me" }) ? "border-primary/40 bg-primary/8" : "border-border/40 bg-card/50"}`}
+            href="/me"
+            onclick={closeMenu}
+          >
+            <div
+              class="flex h-8 w-8 items-center justify-center rounded-lg bg-muted/60 group-hover:bg-primary/10 transition-colors"
+            >
+              <span
+                class="icon-[ri--dashboard-2-line] h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors"
+              ></span>
+            </div>
+            <div class="flex flex-1 flex-col gap-0.5">
+              <span class="text-sm font-medium text-foreground">{$_("header.dashboard")}</span>
+              <span class="text-xs text-muted-foreground">{$_("header.dashboard_hint")}</span>
+            </div>
+            <span class="icon-[ri--arrow-right-s-line] h-4 w-4 text-muted-foreground"></span>
+          </a>
+
+          <a
+            class={`flex items-center gap-3 rounded-xl border px-4 py-3 transition-all duration-200 group hover:border-primary/30 hover:bg-primary/5 ${isActiveLink({ href: "/play" }) ? "border-primary/40 bg-primary/8" : "border-border/40 bg-card/50"}`}
+            href="/play"
+            onclick={closeMenu}
+          >
+            <div
+              class="flex h-8 w-8 items-center justify-center rounded-lg bg-muted/60 group-hover:bg-primary/10 transition-colors"
+            >
+              <span
+                class="icon-[ri--rocket-line] h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors"
+              ></span>
+            </div>
+            <div class="flex flex-1 flex-col gap-0.5">
+              <span class="text-sm font-medium text-foreground">{$_("header.play")}</span>
+              <span class="text-xs text-muted-foreground">{$_("header.play_hint")}</span>
+            </div>
+            <span class="icon-[ri--arrow-right-s-line] h-4 w-4 text-muted-foreground"></span>
+          </a>
+        {:else}
+          <a
+            class={`flex items-center gap-3 rounded-xl border px-4 py-3 transition-all duration-200 group hover:border-primary/30 hover:bg-primary/5 ${isActiveLink({ href: "/login" }) ? "border-primary/40 bg-primary/8" : "border-border/40 bg-card/50"}`}
+            href="/login"
+            onclick={closeMenu}
+          >
+            <div
+              class="flex h-8 w-8 items-center justify-center rounded-lg bg-muted/60 group-hover:bg-primary/10 transition-colors"
+            >
+              <span
+                class="icon-[ri--login-circle-line] h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors"
+              ></span>
+            </div>
+            <div class="flex flex-1 flex-col gap-0.5">
+              <span class="text-sm font-medium text-foreground">{$_("header.login")}</span>
+              <span class="text-xs text-muted-foreground">{$_("header.login_hint")}</span>
+            </div>
+            <span class="icon-[ri--arrow-right-s-line] h-4 w-4 text-muted-foreground"></span>
+          </a>
+
+          <a
+            class={`flex items-center gap-3 rounded-xl border px-4 py-3 transition-all duration-200 group hover:border-primary/30 hover:bg-primary/5 ${isActiveLink({ href: "/signup" }) ? "border-primary/40 bg-primary/8" : "border-border/40 bg-card/50"}`}
+            href="/signup"
+            onclick={closeMenu}
+          >
+            <div
+              class="flex h-8 w-8 items-center justify-center rounded-lg bg-muted/60 group-hover:bg-accent/10 transition-colors"
+            >
+              <span
+                class="icon-[ri--heart-add-2-line] h-4 w-4 text-muted-foreground group-hover:text-accent transition-colors"
+              ></span>
+            </div>
+            <div class="flex flex-1 flex-col gap-0.5">
+              <span class="text-sm font-medium text-foreground">{$_("header.signup")}</span>
+              <span class="text-xs text-muted-foreground">{$_("header.signup_hint")}</span>
+            </div>
+            <span class="icon-[ri--arrow-right-s-line] h-4 w-4 text-muted-foreground"></span>
+          </a>
+        {/if}
+      </div>
+    </div>
+
+    {#if authStatus.authenticated}
+      <button
+        class="cursor-pointer flex w-full items-center gap-3 rounded-xl border border-destructive/20 bg-destructive/5 px-4 py-3 transition-all duration-200 hover:bg-destructive/10 hover:border-destructive/30 group"
+        onclick={handleLogout}
+      >
+        <div
+          class="flex h-8 w-8 items-center justify-center rounded-lg bg-destructive/10 group-hover:bg-destructive/20 transition-colors"
+        >
+          <span class="icon-[ri--logout-circle-r-line] h-4 w-4 text-destructive"></span>
+        </div>
+        <div class="flex flex-1 flex-col gap-0.5 text-left">
+          <span class="text-sm font-medium text-foreground">{$_("header.logout")}</span>
+          <span class="text-xs text-muted-foreground">{$_("header.logout_hint")}</span>
+        </div>
+      </button>
+    {/if}
   </div>
-</header>
+</div>