diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 528e909..56916cf 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -96,12 +96,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, defineAsyncComponent } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useThemeStore } from '@/stores/theme'
-import ReportModal from './ReportModal.vue'
+const ReportModal = defineAsyncComponent(() => import('./ReportModal.vue'))
 
 const { t, locale } = useI18n()
 const authStore = useAuthStore()
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index db32927..30f9e03 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, nextTick, onUnmounted, computed } from "vue";
+import { onMounted, ref, watch, nextTick, onUnmounted, computed, defineAsyncComponent } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useRouteStore } from "@/stores/route";
@@ -11,7 +11,7 @@ import { analyticsService } from "@/services/analyticsService";
 import { getImageUrl } from "@/utils/imageUrl";
 
 import { useDirectionsRoute } from "@/composables/useDirectionsRoute";
-import BusStopInfoModal from "@/components/BusStopInfoModal.vue";
+const BusStopInfoModal = defineAsyncComponent(() => import("@/components/BusStopInfoModal.vue"));
 import type { BusStop } from '@/types'
 
 const router = useRouter();