diff --git a/src/app/globals.css b/src/app/globals.css
index 709c8567..da45a431 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -200,22 +200,23 @@ summary,
 /* ── Atom theme components ────────────────────────────────── */
 @layer components {
 	.nav-item {
-		@apply flex h-auto md:h-[54px] items-center text-[13px] font-bold transition-all duration-150 ease-in-out px-3 md:px-4 relative;
+		@apply flex h-auto md:h-[54px] items-center text-[13px] font-bold px-3 md:px-4 relative;
 		color: var(--color-navbar-text-readable, var(--color-navbar-text, #64748b));
 		letter-spacing: 0.03em;
 		text-transform: uppercase;
 		white-space: nowrap;
+		transition: color 0.15s ease-in-out;
 	}
 	.nav-item::after {
 		content: "";
 		position: absolute;
 		bottom: 0;
 		left: 50%;
-		transform: translateX(-50%) scaleX(0);
 		width: 60%;
 		height: 3px;
 		border-radius: 3px 3px 0 0;
 		background-color: var(--color-primary);
+		transform: translateX(-50%) scaleX(0);
 		transition: transform 0.2s ease-in-out;
 	}
 	.nav-item:hover::after {
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index f696593d..84aad3f4 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -15,8 +15,8 @@ export async function Navigation() {
 
 	return (
 		<nav
-			className="sticky top-0 z-40 shadow-sm"
-			style={{ backgroundColor: "var(--color-navbar)", willChange: "transform" }}
+			className="sticky top-0 z-40"
+			style={{ backgroundColor: "var(--color-navbar)" }}
 		>
 			<div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-1">
 				<div