diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx
index abe449d..58cc282 100644
--- a/src/components/ModeToggle.tsx
+++ b/src/components/ModeToggle.tsx
@@ -22,7 +22,6 @@ export function ModeToggle() {
 			theme === 'dark' ||
 			(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
 		document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
-		// add data-theme="dark" to the html tag
 		document.documentElement.setAttribute('data-theme', isDark ? 'dracula' : 'github-light');
 	}, [theme]);
 
diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
index dec416a..dbb6dbe 100644
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -4,15 +4,16 @@ import { Icon } from 'astro-icon/components';
 
 <div class="mx-auto w-full max-w-7xl px-8">
 	<div
-		class="flex w-full flex-col items-center justify-center border-t border-zinc-50 py-4 dark:border-zinc-900 md:flex-row md:justify-between">
+		class="flex flex-col items-center justify-center border-t border-zinc-50 py-4 dark:border-zinc-900 md:flex-row md:justify-between">
 		<p
-			class="mb-4 block text-center font-sans text-sm font-normal leading-normal text-zinc-900 antialiased dark:text-zinc-100 md:mb-0">
+			class="mb-4 text-center text-sm font-normal text-zinc-900 antialiased dark:text-zinc-100 md:mb-0">
 			© 2024
-			<a href="/">Astro Deploy</a>. All Rights Reserved.
-		</p><div class="flex gap-4 text-zinc-900 dark:text-zinc-100 sm:justify-center">
+			<a href="/" class="hover:text-blue-500">Astro Deploy</a>. All Rights Reserved.
+		</p>
+		<div class="flex gap-4 text-zinc-900 dark:text-zinc-100 sm:justify-center">
 			<a
 				href="https://github.com/deployn/astro-deploy"
-				class="block font-sans text-base font-light leading-relaxed text-inherit antialiased opacity-80 transition-opacity hover:opacity-100"
+				class="block text-base font-light leading-relaxed text-inherit antialiased opacity-80 transition-opacity hover:opacity-100"
 				aria-label="GitHub Repository">
 				<Icon name="line-md:github" class="size-5" fill="currentColor" aria-hidden="true" />
 			</a>
diff --git a/src/components/layout/HeaderLink.astro b/src/components/layout/HeaderLink.astro
index 08e6490..2be5fc9 100644
--- a/src/components/layout/HeaderLink.astro
+++ b/src/components/layout/HeaderLink.astro
@@ -1,8 +1,15 @@
 ---
 const { pathname } = Astro.url;
 const { class: className = '', href, ...props } = Astro.props;
-const isActive =
-	href === pathname || href === (pathname.endsWith('/') ? pathname.slice(0, -1) : pathname);
+
+function isActiveLink(linkPath: string, currentPath: string) {
+	return (
+		linkPath === currentPath ||
+		linkPath === (currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath)
+	);
+}
+
+const isActive = isActiveLink(href, pathname);
 ---
 
 <a