diff --git a/src/components/Header/DesktopNav.tsx b/src/components/Header/DesktopNav.tsx
index 3033924dd..bea4b1cd9 100644
--- a/src/components/Header/DesktopNav.tsx
+++ b/src/components/Header/DesktopNav.tsx
@@ -14,16 +14,16 @@ interface Props {
 
 const DesktopNav = ({ fixed, posts }: Props): JSX.Element => (
   <Menu
+    mode="horizontal"
     className={classNames(
       'fixed z-100 w-full font-extrabold bg-transparent border-transparent transition transform-gpu hidden md:visible md:flex',
       {
         'bg-gradient-primary': !fixed,
         'bg-white/30': fixed,
         'shadow-lg': fixed,
-        'backdrop-blur-sm': fixed,
+        'backdrop-blur-primary': fixed,
       }
     )}
-    mode="horizontal"
   >
     <Menu.Item
       key="home"
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 8f5eeeeee..fa38457c6 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -30,4 +30,8 @@
   .flex-container {
     @apply flex flex-row flex-wrap justify-center items-center content-center !important;
   }
+
+  .backdrop-blur-primary {
+    backdrop-filter: blur(4px) !important;
+  }
 }