diff --git a/src/lib/img/logo.webp b/src/lib/img/logo.webp
index a5383d4..cb07a9a 100644
Binary files a/src/lib/img/logo.webp and b/src/lib/img/logo.webp differ
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2e47fc0..9311c06 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,18 +2,28 @@
 	import '../app.css';
 </script>
 
-<header class="fixed inset-x-0 top-0 z-10 border-b border-[#694E41]/25 shadow-sm">
-	<nav class="mx-auto flex h-28 items-center justify-between bg-[#faeee5] px-48">
+<!-- START: Header (displayed on every single screen) -->
+<header class="fixed inset-x-0 top-0 z-10">
+	<!-- START: Navigation Bar -->
+	<nav
+		class="mx-auto flex h-28 items-center justify-between border-b border-[#694E41]/25 bg-[#faeee5] px-56 shadow-sm"
+	>
+		<!-- START: Logo -->
 		<a href="./" class="select-none">
-			<img src="src/lib/img/logo.webp" alt="logo" class="h-36" />
+			<img src="src/lib/img/logo.webp" alt="logo" class="h-[5.25rem]" />
 		</a>
-		<!-- about and blog buttons on right side -->
-		<div class="mr-4 font-cormorant text-3xl">
-			<a href="/about" class="mr-4 text-[#694E41]">about</a>
-			<a href="/blog" class="mr-4 text-[#694E41]">blog</a>
-			<a href="/subscribe" class="text-[#694E41]">subscribe</a>
+		<!-- END: Logo -->
+
+		<!-- START: Nav Buttons -->
+		<div class="flex flex-row space-x-10 font-cormorant text-3xl text-[#694E41]">
+			<a href="/about" class="hover:text-[#9e7a69]">about</a>
+			<a href="/blog" class="hover:text-[#9e7a69]">blog</a>
+			<a href="/subscribe" class="hover:text-[#9e7a69]">subscribe</a>
 		</div>
+		<!-- END: Nav Buttons -->
 	</nav>
+	<!-- END: Navigation Bar -->
 </header>
+<!-- END: Header -->
 
 <slot></slot>