diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index f9e356c..3818dfd 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -8,8 +8,8 @@
 
     <div class="flex-1 flex flex-col" :style="contentStyle">
       <!-- Fixed Header Container -->
-      <div class="liquid-header fixed top-0 left-0 right-0 z-40" :style="headerContainerStyle">
-      <div class="liquid-header-backdrop" aria-hidden="true" />
+      <div class="header-glass fixed inset-x-0 top-0 z-50 border-0" :style="headerContainerStyle">
+      <div class="header-glass-backdrop" aria-hidden="true" />
       <!-- Animated background for home page -->
       <HeroBackground v-if="isHomePage" :collapse-progress="collapseProgress" />
 
@@ -359,21 +359,3 @@ const onSearch = () => {
 }
 </script>
 
-<style scoped>
-.liquid-header {
-  background: transparent;
-}
-
-.liquid-header-backdrop {
-  position: absolute;
-  inset: 0;
-  height: 350%;
-  background: rgba(255, 255, 255, 0.22);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-  backdrop-filter: blur(16px) saturate(180%);
-  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 65%, transparent 100%);
-  mask-image: linear-gradient(to bottom, black 0%, black 20%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 65%, transparent 100%);
-  pointer-events: none;
-  z-index: 0;
-}
-</style>