diff --git a/src/app.css b/src/app.css
index b5773d1..d9d7dd8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -29,7 +29,10 @@
 	}
 
 	.button {
-		@apply px-3 py-1.5 text-black bg-white;
+		@apply px-3 py-1.5 text-black bg-white border border-black;
+	}
+	.button:hover {
+		@apply text-white bg-black border border-white;
 	}
 	.section-header {
 		@apply text-3xl md:text-5xl mb-8 md:mb-16 font-bold pt-10;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 430e294..12f4984 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -26,7 +26,7 @@
 				<div class="flex items-center gap-6 uppercase text-xl">
           <button class="md:hidden text-3xl" on:click={() => navbar = !navbar}>☰</button>
 					{#each menu as mi}
-						<div class="{mi.class} hidden md:block"><a href={mi.url}>{mi.title}</a></div>
+						<div class="hidden md:block"><a class={mi.class ? mi.class : 'hover:underline'} href={mi.url}>{mi.title}</a></div>
 					{/each}
 				</div>
 			</div>