diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx
index 07608d5..ac3f62a 100644
--- a/src/components/UserHeader.tsx
+++ b/src/components/UserHeader.tsx
@@ -219,8 +219,14 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
         backdropFilter: 'blur(16px)',
         borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.05)' : '1px solid rgba(255,255,255,0.08)'
       }}>
-        {/* Cloudy/Foggy effect overlay - removed mix-blend-overlay for visibility */}
-        <div className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-all duration-300">
+        {/* Cloudy/Foggy effect overlay with feathered edges */}
+        <div
+          className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-all duration-300"
+          style={{
+            maskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)',
+            WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)'
+          }}
+        >
           <div className="absolute inset-0 fog-layer-1 opacity-35 dark:opacity-25" />
           <div className="absolute inset-0 fog-layer-2 opacity-25 dark:opacity-15" />
         </div>