diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 398decc..2d625d4 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -3,21 +3,26 @@
 	import { page } from '$app/state';
 
 	export let routes: App.Route[];
-	export let isVertical: boolean = false;
+
+	function isActive(route: string): boolean {
+		if (route === '/') return page.url.pathname === route;
+
+		return page.url.pathname.split('/')[1] === route.split('/')[1];
+	}
 </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"
 >
 	{#each routes as route (route.href)}
-		<a class="nav-button {page.url.pathname === route.href ? 'active' : ''}" href={route.href}>
+		<a class="nav-button {isActive(route.href) ? 'active' : ''}" href={route.href}>
 			<div class="p-1">
 				<HoverIcon
 					src={route.icon}
 					class="text-sm uppercase"
 					text={route.href}
 					size={32}
-					black={page.url.pathname !== route.href}
+					black={!isActive(route.href)}
 				/>
 			</div>
 			<div class="contour">
@@ -34,11 +39,15 @@
 		@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;
 
 		> .contour {
-			@apply rounded-full bg-slate-50 px-1.5 py-0.5 text-center;
+			@apply rounded-full px-1.5 py-0.5 text-center;
 		}
 
 		&.active {
 			@apply bg-emerald-600;
+
+			> .contour {
+				@apply bg-slate-50;
+			}
 		}
 	}
 </style>