diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index e77427d..85bd857 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,14 +1,14 @@
 <template>
   <header
-    class="relative overflow-hidden"
+    class="relative"
     :style="{ height: `${height}px` }"
   >
-    <!-- Single row: Logo + Search + Icons -->
-    <div
-      class="relative z-10 flex px-3 lg:px-4 gap-2"
-      :class="isHeroLayout ? 'items-start pt-2' : 'items-center'"
-      :style="rowStyle"
-    >
+    <div class="relative mx-auto max-w-[2200px] px-3 py-2 md:px-4">
+      <div
+        class="flex items-center gap-2"
+        :class="isHeroLayout ? 'items-start' : ''"
+        :style="rowStyle"
+      >
       <!-- Left: Logo + AI button + Nav links (top aligned) -->
       <div class="flex items-center flex-shrink-0 rounded-full pill-glass">
         <div class="flex items-center gap-2 px-4 py-2">
@@ -355,6 +355,7 @@
         </div>
       </div>
     </div>
+    </div>
 
   </header>
 </template>
@@ -523,13 +524,6 @@ const rowStyle = computed(() => {
   return { height: `${props.height}px` }
 })
 
-const glassStyle = computed(() => {
-  if (isHeroLayout.value) {
-    return { height: `${topRowHeight}px` }
-  }
-  return { height: '100%' }
-})
-
 const centerStyle = computed(() => {
   if (!isHeroLayout.value) return {}
   const heroHeight = props.height || topRowHeight
@@ -540,9 +534,6 @@ const centerStyle = computed(() => {
   return { marginTop: `${top}px` }
 })
 
-// Header background classes — two-layer glass is handled by .header-glass + .header-glass-backdrop
-const headerClasses = computed(() => '')
-
 // Use white text on dark backgrounds (collapsed or home page with animation)
 const useWhiteText = computed(() => props.isCollapsed || props.isHomePage)
 </script>