diff --git a/components/Layout.tsx b/components/Layout.tsx
index bebc80f..8aa7f38 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -42,7 +42,9 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
     <div className="min-h-screen flex flex-col font-sans">
       <header
         className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 flex items-center py-1 ${
-          isScrolled ? 'bg-white/80 backdrop-blur-lg border-b border-slate-200' : 'bg-transparent'
+          isScrolled
+            ? 'bg-white/80 backdrop-blur-lg border-b border-slate-200'
+            : 'bg-gradient-to-b from-white/50 to-transparent'
         }`}
       >
         <div className="container-custom flex justify-between items-center w-full">
@@ -67,8 +69,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                 href={link.href} 
                 className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
                   isActive(link.href) 
-                    ? 'text-accent bg-accent/5' 
-                    : 'text-slate-600 hover:text-primary hover:bg-slate-50'
+                    ? 'text-accent bg-accent/5'
+                    : `${isScrolled ? 'text-slate-600' : 'text-slate-900'} hover:text-primary hover:bg-slate-50`
                 }`}
               >
                 {link.label}