diff --git a/app/components/catalog/CatalogMap.vue b/app/components/catalog/CatalogMap.vue
index 548be35..02f5421 100644
--- a/app/components/catalog/CatalogMap.vue
+++ b/app/components/catalog/CatalogMap.vue
@@ -42,6 +42,7 @@ const emit = defineEmits<{
 }>()
 
 const mapRef = useMapboxRef(props.mapId)
+const { flyThroughSpace } = useMapboxFlyAnimation()
 
 const mapOptions = computed(() => ({
   style: 'mapbox://styles/mapbox/satellite-streets-v12',
@@ -177,14 +178,14 @@ watch(geoJsonData, (newData) => {
   }
 }, { deep: true })
 
-// Expose flyTo method for external use
-const flyTo = (lat: number, lng: number, zoom = 8) => {
+// Expose flyTo method for external use (with space fly animation)
+const flyTo = async (lat: number, lng: number, zoom = 8) => {
   if (!mapRef.value) return
-  mapRef.value.easeTo({
-    center: [lng, lat],
-    zoom,
-    duration: 2000,
-    easing: (t) => t * (2 - t)
+  await flyThroughSpace(mapRef.value, {
+    targetCenter: [lng, lat],
+    targetZoom: zoom,
+    totalDuration: 5000,
+    minZoom: 3
   })
 }
 
diff --git a/app/pages/select-location/index.vue b/app/pages/select-location/index.vue
index 48ae5d6..67eaa09 100644
--- a/app/pages/select-location/index.vue
+++ b/app/pages/select-location/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto px-4 py-8 max-w-4xl">
+  <div class="container mx-auto px-4 py-8">
     <PageHeader :title="t('common.selectLocation')">
       <template #actions>
         <button class="btn btn-ghost" @click="router.back()">