diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index fe40307..5e240f9 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -9,10 +9,12 @@
       <div
         class="q-mx-md q-mt-lg q-py-sm q-px-md"
         :class="isHeroScroll ? 'text-white' : 'text-white glass shadow-6'"
-        style="
-          transition: background-color 0.5s ease, color 0.5s ease;
-          border-radius: var(--base-radius)
-        "
+        :style="{
+          'backdrop-filter': isHeroScroll ? 'none' : 'blur(12px) saturate(180%)',
+          '-webkit-backdrop-filter': isHeroScroll ? 'none' : 'blur(12px) saturate(180%)',
+          'border-radius': 'var(--base-radius)',
+          'transition': 'all 0.5s ease'
+        }"
         >
         <div
           ref="headerContainer"
@@ -265,10 +267,7 @@
     pointer-events: none;
   }
   .glass {
-    --glass-filter: blur(12px) saturate(180%);
     background-color: rgba(255, 255, 255, 0.451) !important;
-    backdrop-filter: var(--glass-filter);
-    -webkit-backdrop-filter: var(--glass-filter);
     border: 1px solid rgba(255, 255, 255, 0.3);
   }
 </style>
\ No newline at end of file