diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index 3642ed9..a8e0234 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -1,6 +1,7 @@
 ---
 import { Image } from 'astro:assets';
 import { ModeToggle } from '@/components/ModeToggle';
+import HeaderLink from './HeaderLink.astro';
 
 import logoImage from '@/assets/images/logo.png';
 
@@ -65,7 +66,7 @@ const navLinks = [
 				class="mb-6 mt-4 flex min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:flex-row sm:p-1">
 				{
 					navLinks.map(({ href, label }) => (
-						<a
+						<HeaderLink
 							href={href}
 							class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
 							<div
@@ -73,7 +74,7 @@ const navLinks = [
 								class="text- w-full gap-2 rounded-lg px-4 leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
 								{label}
 							</div>
-						</a>
+						</HeaderLink>
 					))
 				}
 			</nav>
@@ -120,7 +121,7 @@ const navLinks = [
 			class="mb-6 mt-4 hidden min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:block sm:flex-row sm:p-1">
 			{
 				navLinks.map(({ href, label }) => (
-					<a
+					<HeaderLink
 						href={href}
 						class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
 						<div
@@ -129,7 +130,7 @@ const navLinks = [
 							class="flex w-full items-center gap-2 rounded-lg p-3 py-2 pr-4 text-start leading-tight outline-none transition-all hover:bg-zinc-50 hover:bg-opacity-80 hover:text-zinc-900 focus:bg-zinc-50 focus:bg-opacity-80 focus:text-zinc-900 active:bg-zinc-50 active:bg-opacity-80 active:text-zinc-900">
 							{label}
 						</div>
-					</a>
+					</HeaderLink>
 				))
 			}
 		</nav>
diff --git a/src/components/layout/HeaderLink.astro b/src/components/layout/HeaderLink.astro
new file mode 100644
index 0000000..eafe49a
--- /dev/null
+++ b/src/components/layout/HeaderLink.astro
@@ -0,0 +1,21 @@
+---
+const { pathname } = Astro.url;
+const { class: className, ...props } = Astro.props;
+const href = props.href;
+const isActive = href === pathname || href === pathname.replace(/\/$/, '');
+---
+
+<a href={href} class:list={[className, { active: isActive }]} {...props}>
+	<slot />
+</a>
+
+<style>
+	a {
+		display: inline-block;
+		text-decoration: none;
+	}
+	a.active {
+		font-weight: bolder;
+		text-decoration: underline;
+	}
+</style>