diff --git a/src/main.js b/src/main.js
index 187a6de..53d80e4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,4 @@
-import { createApp } from 'vue';
+import { createApp, defineAsyncComponent } from 'vue';
 
 import router from './router';
 import store from './store';
@@ -6,9 +6,12 @@ import App from './App';
 import BaseBadge from './components/ui/BaseBadge';
 import BaseButton from './components/ui/BaseButton';
 import BaseCard from './components/ui/BaseCard';
-import BaseDialog from './components/ui/BaseDialog';
 import BaseSpinner from './components/ui/BaseSpinner';
 
+const BaseDialog = defineAsyncComponent(() =>
+  import('./components/ui/BaseDialog')
+);
+
 const app = createApp(App);
 
 app.use(router);
diff --git a/src/router/index.js b/src/router/index.js
index ee53081..cf6223a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,14 +1,15 @@
 import { createRouter, createWebHistory } from 'vue-router';
 
-import UserAuth from '../pages/auth/UserAuth';
-import CoachDetails from '../pages/coaches/CoachDetails';
 import CoachesList from '../pages/coaches/CoachesList';
-import CoachRegistration from '../pages/coaches/CoachRegistration';
-import ContactCoach from '../pages/requests/ContactCoach';
-import RequestsRecieved from '../pages/requests/RequestsRecieved';
-import NotFound from '../pages/NotFound';
 import store from '../store/index.js';
 
+const UserAuth = () => import('../pages/auth/UserAuth');
+const CoachDetails = () => import('../pages/coaches/CoachDetails');
+const CoachRegistration = () => import('../pages/coaches/CoachRegistration');
+const ContactCoach = () => import('../pages/requests/ContactCoach');
+const RequestsRecieved = () => import('../pages/requests/RequestsRecieved');
+const NotFound = () => import('../pages/NotFound');
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [