✨ Closes #86

frontend/src/lib/navbar.svelte

@@ -43,13 +43,19 @@
 <nav
 	class="w-screen px-4 lg:px-10 py-2 flex flex-col lg:flex-row lg:items-center fixed backdrop-blur-2xl bg-white/70 shadow-md z-30 top-0"
 >
-	<section class="w-full lg:w-max flex justify-between">
+	<section class="w-full lg:w-max grid grid-cols-3 lg:grid-cols-2">
 		<a href="/" class="font-black tracking-tight text-xl text-black marck-script link-hover"
 			>ClassQuiz</a
 		>
-
+		<div class="flex justify-center">
+			<a
+				class="lg:pl-6 text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
+				href="/play">{$t('words.play')}</a
+			>
+		</div>
+		<div class="flex justify-end">
 			<button
-			class="lg:hidden"
+				class="lg:hidden dark:text-black"
 				id="open-menu"
 				on:click={toggleMenu}
 				class:hidden={!openMenu}
@@ -74,7 +80,7 @@
 
 			<!-- Close menu -->
 			<button
-			class="hidden"
+				class="hidden dark:text-black"
 				id="close-menu"
 				class:hidden={openMenu}
 				on:click={toggleMenu}
@@ -96,16 +102,11 @@
 					<path d="M20 20L4 4m16 0L4 20" />
 				</svg>
 			</button>
+		</div>
 	</section>
 
-	<ul id="menu-items" class="lg:flex w-full flex-col lg:flex-row lg:pl-6" class:hidden={openMenu}>
+	<ul id="menu-items" class="lg:flex w-full flex-col lg:flex-row" class:hidden={openMenu}>
 		{#if $signedIn}
-			<li class="py-2">
-				<a
-					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-					href="/play">{$t('words.play')}</a
-				>
-			</li>
 			<li class="py-2">
 				<a
 					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
@@ -131,12 +132,6 @@
 				>
 			</li>
 		{:else}
-			<li class="py-2">
-				<a
-					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-					href="/play">{$t('words.play')}</a
-				>
-			</li>
 			<li class="py-2">
 				<a
 					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"