diff --git a/components/styles/navbar/mobile.tsx b/components/styles/navbar/mobile.tsx
index 19567e7..73059b0 100644
--- a/components/styles/navbar/mobile.tsx
+++ b/components/styles/navbar/mobile.tsx
@@ -54,12 +54,13 @@ export const NavSideMenu = styled.div <ActivePropType>`
     }
     return ret;
   }};
+  backdrop-filter: ${props => props.active ? "blur(5px)" : ""};
 
   overflow-x: hidden;
-  transition-property: max-width, max-height, border-right, background-color;
+  transition-property: max-width, max-height, border-right, background-color, backdrop-filter;
   transition-timing-function: ease-in-out;
-  transition-duration: 0.15s, 0s, 0s, 0s;
-  transition-delay: ${props => props.active ? "0s, 0s, 0s, 0s" : "0s, 0.15s, 0.15s, 0.15s"};
+  transition-duration: 0.15s, 0s;
+  transition-delay: ${props => props.active ? "0s" : "0s, 0.15s"};
 `
 
 export const NavSideMenuPanel = styled.div <ActivePropType>`