diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index fb4ef89..a5da291 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -69,7 +69,7 @@ const navLinks = [
 					navLinks.map(({ href, label }) => (
 						<HeaderLink
 							href={href}
-							class="block w-full rounded-lg px-4 py-2 text-center font-sans text-sm font-medium leading-normal text-zinc-900 antialiased transition-all hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-950 md:text-xl">
+							class="block w-full rounded-lg px-4 py-2 text-center font-sans text-sm leading-normal text-zinc-900 antialiased transition-all hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-950 md:text-xl">
 							{label}
 						</HeaderLink>
 					))
diff --git a/src/components/layout/HeaderLink.astro b/src/components/layout/HeaderLink.astro
index e4aea43..08e6490 100644
--- a/src/components/layout/HeaderLink.astro
+++ b/src/components/layout/HeaderLink.astro
@@ -1,20 +1,13 @@
 ---
 const { pathname } = Astro.url;
-const { class: className, href, ...props } = Astro.props;
-const isActive = href === pathname || href === pathname.replace(/\/$/, '');
+const { class: className = '', href, ...props } = Astro.props;
+const isActive =
+	href === pathname || href === (pathname.endsWith('/') ? pathname.slice(0, -1) : pathname);
 ---
 
-<a href={href} class:list={[className, { active: isActive }]} {...props}>
+<a
+	href={href}
+	class={`inline-block ${className} ${isActive ? 'font-bold underline' : 'font-medium no-underline'}`}
+	{...props}>
 	<slot />
 </a>
-
-<style>
-	a {
-		display: inline-block;
-		text-decoration: none;
-	}
-	a.active {
-		font-weight: bolder;
-		text-decoration: underline;
-	}
-</style>