diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 2d625d4..3316ee0 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <nav
-	class="flex flex-row gap-2 bg-slate-100 not-landscape:justify-around not-landscape:px-2 landscape:flex-col landscape:py-2"
+	class="flex shrink-0 flex-row gap-2 bg-slate-100 not-landscape:justify-around not-landscape:overflow-x-auto not-landscape:px-2 landscape:flex-col landscape:overflow-y-auto landscape:py-2"
 >
 	{#each routes as route (route.href)}
 		<a class="nav-button {isActive(route.href) ? 'active' : ''}" href={route.href}>
@@ -36,7 +36,7 @@
 	@import '$src/app.css';
 
 	.nav-button {
-		@apply flex aspect-square flex-col items-center justify-center gap-0.5 p-2 text-slate-950 not-landscape:h-24 hover:bg-emerald-400 landscape:w-24;
+		@apply flex aspect-square shrink-0 flex-col items-center justify-center gap-0.5 p-2 text-slate-950 not-landscape:h-24 hover:bg-emerald-400 landscape:w-24;
 
 		> .contour {
 			@apply rounded-full px-1.5 py-0.5 text-center;