diff --git a/app/components/NavItem.tsx b/app/components/NavItem.tsx
index 807e3da..cd85040 100644
--- a/app/components/NavItem.tsx
+++ b/app/components/NavItem.tsx
@@ -10,7 +10,16 @@ export default function NavItem({
     href: string;
 }>) {
     const highlighted = usePathname() == href;
-    return <Link href={href} className={`text-lg mx-4 flex font-semibold ${highlighted ? 'underline underline-offset-8':""} hover:scale-110 active:rotate-4`}>
-        {children}
-    </Link>
+    return (
+        <Link
+            href={href}
+            className={`group relative text-lg mx-4 flex font-semibold hover:scale-110 active:rotate-4`}
+        >
+            <span>{children}</span>
+            <span
+                className={`absolute left-0 bottom-0 h-[2px] w-full bg-current transform transition-transform duration-200 origin-left group-hover:scale-x-100 ${highlighted ? 'scale-x-100 scale-y-100' : 'scale-x-0 scale-y-50'}`}
+                aria-hidden="true"
+            />
+        </Link>
+    );
 }
\ No newline at end of file