diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 2ef18ba..18e9d58 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -13,7 +13,7 @@
     <!-- Content -->
     <template v-else>
       <!-- Search bar slot (sticky third bar - like navigation) -->
-      <div v-if="$slots.searchBar" class="sticky z-20 -mx-3 lg:-mx-6 px-3 lg:px-6 pt-4 pb-2 bg-base-100 border-b border-base-300" :class="searchBarTopClass">
+      <div v-if="$slots.searchBar" class="sticky z-20 -mx-3 lg:-mx-6 px-3 lg:px-6 pt-4 pb-2 bg-base-100 border-b border-base-300" :style="searchBarStyle">
         <slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
       </div>
 
@@ -52,7 +52,7 @@
 
           <!-- Right: Map (fixed position) -->
           <div class="w-3/5 relative">
-            <div class="fixed right-6 w-[calc(60%-3rem)] rounded-lg overflow-hidden" :class="[mapTopClass, mapHeightClass]">
+            <div class="fixed right-6 w-[calc(60%-3rem)] rounded-lg overflow-hidden" :style="mapStyle">
               <!-- Search with map checkbox -->
               <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
                 <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
@@ -213,37 +213,25 @@ const props = withDefaults(defineProps<{
   totalCount: 0
 })
 
-// Inject header collapsed state from layout
-const headerCollapsed = inject<Ref<boolean>>('headerCollapsed', ref(false))
+// Smooth scroll collapse - pixel values for smooth animation
+// MainNav: 64px, SubNav: 54px, Header total: 118px, SearchBar: 56px
+const { searchBarTop, mapTop } = useScrollCollapse(118, 56)
 
-// Map positioning - dynamic based on search bar presence and header collapsed state
-// Expanded: MainNav (4rem) + SubNav (3rem) = 7rem, with SearchBar = 10rem
-// Collapsed: CollapsedBar (2rem), with SearchBar = 5rem
 const slots = useSlots()
 const hasSearchBar = computed(() => !!slots.searchBar)
 
-// SearchBar position: below header (sticky)
-const searchBarTopClass = computed(() => {
-  if (headerCollapsed.value) {
-    return 'top-8' // 2rem collapsed bar
-  }
-  return 'top-[7rem]' // 4rem MainNav + 3rem SubNav
-})
+// SearchBar style - smooth pixel positioning
+const searchBarStyle = computed(() => ({
+  top: `${searchBarTop.value}px`
+}))
 
-// Map position: below header + searchbar (fixed)
-const mapTopClass = computed(() => {
-  if (headerCollapsed.value) {
-    return hasSearchBar.value ? 'top-[5rem]' : 'top-8' // collapsed bar + searchbar
-  }
-  return hasSearchBar.value ? 'top-[10rem]' : 'top-[7rem]' // full header + searchbar
-})
-
-const mapHeightClass = computed(() => {
-  if (headerCollapsed.value) {
-    return hasSearchBar.value ? 'h-[calc(100vh-6rem)]' : 'h-[calc(100vh-3rem)]'
-  }
-  return hasSearchBar.value ? 'h-[calc(100vh-11rem)]' : 'h-[calc(100vh-8rem)]'
-})
+// Map style - smooth pixel positioning
+const mapStyle = computed(() => ({
+  top: hasSearchBar.value ? `${mapTop.value}px` : `${searchBarTop.value}px`,
+  height: hasSearchBar.value
+    ? `calc(100vh - ${mapTop.value}px - 1rem)`
+    : `calc(100vh - ${searchBarTop.value}px - 1rem)`
+}))
 
 const emit = defineEmits<{
   'select': [item: MapItem]