diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 8114946..f17ccda 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -8,14 +8,10 @@
       >
       <div
         class="q-mx-md q-mt-lg q-py-sm q-px-md"
-        :class="isHeroScroll ? 'text-white' : 'text-white shadow-6'"
+        :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);
-          background-color: rgba(255, 255, 255, 0.45) !important;
-          backdrop-filter: blur(12px) saturate(180%);
-          -webkit-backdrop-filter: blur(12px) saturate(180%);
-          border: 1px solid rgba(255, 255, 255, 0.3);
+          border-radius: var(--base-radius)
         "
         >
         <div
@@ -268,4 +264,10 @@
     opacity: 0;
     pointer-events: none;
   }
+  .glass {
+    background-color: rgba(255, 255, 255, 0.45) !important;
+    backdrop-filter: blur(12px) saturate(180%) !important;
+    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  }
 </style>
\ No newline at end of file