diff --git a/.gitignore b/.gitignore
index decca83..6cad1a4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-*.cache
\ No newline at end of file
+*.cache
+
+# Bundle Analyzer
+stats.html
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 280179d..f04dd8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "0.0.0",
       "dependencies": {
         "browser-image-compression": "^2.0.2",
-        "dompurify": "^3.1.3",
         "dotenv": "^16.4.5",
         "firebase": "^10.12.0",
         "marked": "^12.0.2",
@@ -25,6 +24,7 @@
         "@types/node": "^20.12.12",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/tsconfig": "^0.5.1",
+        "rollup-plugin-visualizer": "^5.12.0",
         "sass": "^1.77.1",
         "typescript": "^5.4.5",
         "vite": "^5.2.0"
@@ -2156,10 +2156,14 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
-    "node_modules/dompurify": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.3.tgz",
-      "integrity": "sha512-5sOWYSNPaxz6o2MUPvtyxTTqR4D3L77pr5rUQoWgD5ROQtVIZQgJkXbo1DLlK3vj11YGw5+LnF4SYti4gZmwng=="
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
     },
     "node_modules/dotenv": {
       "version": "16.4.5",
@@ -2358,6 +2362,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2396,6 +2415,18 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/linkify-it": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
@@ -2736,6 +2767,58 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup-plugin-visualizer": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.12.0.tgz",
+      "integrity": "sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==",
+      "dev": true,
+      "dependencies": {
+        "open": "^8.4.0",
+        "picomatch": "^2.3.1",
+        "source-map": "^0.7.4",
+        "yargs": "^17.5.1"
+      },
+      "bin": {
+        "rollup-plugin-visualizer": "dist/bin/cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "rollup": "2.x || 3.x || 4.x"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
diff --git a/package.json b/package.json
index 56a1ab1..b3aa2d6 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "browser-image-compression": "^2.0.2",
-    "dompurify": "^3.1.3",
     "dotenv": "^16.4.5",
     "firebase": "^10.12.0",
     "marked": "^12.0.2",
@@ -26,6 +25,7 @@
     "@types/node": "^20.12.12",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/tsconfig": "^0.5.1",
+    "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.77.1",
     "typescript": "^5.4.5",
     "vite": "^5.2.0"
diff --git a/src/app.vue b/src/app.vue
index 38f9072..54c3791 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -1,73 +1,16 @@
 <template>
   <div class="app-wrapper">
-    <div class="app" v-if="postLoaded">
-      <navigation :user_login="user_login" :admin="admin" />
+    <div class="app">
       <router-view />
-      <footer-vue v-if="!user_login" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import Navigation from "./shared/components/navigation/navigation.vue";
-import Footer from "./shared/components/footer/footer.vue";
-import { usePostStore } from "./stores/posts";
-import { useUserStore } from "./stores/users";
-import { ref, computed, defineComponent, onBeforeMount } from "vue";
-import { auth } from "./shared/firebase/firebaseInit";
+import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "app",
-  components: {
-    navigation: Navigation,
-    "footer-vue": Footer,
-  },
-  setup() {
-    const postStore = usePostStore();
-    const userStore = useUserStore();
-    const user_login = ref(false);
-    const admin = ref(false);
-
-    async function checkUserState() {
-      auth.onAuthStateChanged((currentUser) => {
-        if (currentUser) {
-          let email = currentUser.email;
-          //@ts-ignore
-          email === import.meta.env.VITE_APP_ADMINEMAIL
-            ? (admin.value = true)
-            : (admin.value = false);
-          admin.value = true;
-          userStore.setUser(currentUser);
-          user_login.value = true;
-        } else {
-          user_login.value = false;
-        }
-      });
-    }
-
-    onBeforeMount(async () => {
-      await checkUserState();
-      await postStore.getPost();
-    });
-
-    return {
-      profileEmail: computed(() => userStore.profileEmail),
-      postLoaded: computed(() => postStore.postLoaded),
-      user_login,
-      admin,
-    };
-  },
-  watch: {
-    user_login(val) {
-      // console.log(`The user_login value is changed to ${val}`);
-      this.user_login = val;
-    },
-    admin(val) {
-      // console.log(`The admin value is changed to ${val}`);
-      this.admin = val;
-    },
-  },
 });
 </script>
-
 <style lang="scss" src="./app.scss"></style>
diff --git a/src/main.ts b/src/main.ts
index cb604dd..564cfcf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,17 +1,24 @@
 import { createApp } from "vue";
 import App from "./app.vue";
 import router from "./routes";
-import { VueShowdownPlugin } from "vue-showdown";
 import { createPinia } from "pinia";
-import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 
+const app = createApp(App);
 const pinia = createPinia();
-pinia.use(piniaPluginPersistedstate);
 
-createApp(App)
-  .use(pinia)
-  .use(router)
-  .use(VueShowdownPlugin, {
+async function loadPlugins() {
+  // Dynamically import the VueShowdownPlugin
+  const { VueShowdownPlugin } = await import("vue-showdown");
+
+  // Dynamically import the piniaPluginPersistedstate
+  const { default: piniaPluginPersistedstate } = await import(
+    "pinia-plugin-persistedstate"
+  );
+
+  // Use the plugins
+  pinia.use(piniaPluginPersistedstate);
+
+  app.use(VueShowdownPlugin, {
     flavor: "github",
     options: {
       emoji: true,
@@ -28,5 +35,12 @@ createApp(App)
       requireSpaceBeforeHeadingText: true,
       ghMentions: true,
     },
-  })
-  .mount("#app");
+  });
+}
+
+// Load plugins conditionally or based on some user interaction
+loadPlugins().then(() => {
+  app.use(pinia);
+  app.use(router);
+  app.mount("#app");
+});
diff --git a/src/shared/components/navigation/navigation.vue b/src/shared/components/navigation/navigation.vue
index b29277e..9cc7f34 100644
--- a/src/shared/components/navigation/navigation.vue
+++ b/src/shared/components/navigation/navigation.vue
@@ -11,12 +11,12 @@
           <router-link class="link" :to="{ name: 'home' }">Home</router-link>
           <router-link class="link" :to="{ name: 'blogs' }">Blogs</router-link>
           <router-link
-            v-if="user_login && admin"
+            v-if="isUserLogin && isAdmin"
             class="link"
             :to="{ name: 'create-post' }"
             >Create Post
           </router-link>
-          <router-link v-if="!user_login" class="link" :to="{ name: 'login' }"
+          <router-link v-if="!isUserLogin" class="link" :to="{ name: 'login' }"
             >Login/Register
           </router-link>
         </ul>
@@ -75,12 +75,12 @@
         <router-link class="link" :to="{ name: 'home' }">Home</router-link>
         <router-link class="link" :to="{ name: 'blogs' }">Blogs</router-link>
         <router-link
-          v-if="user_login && admin"
+          v-if="isUserLogin && isAdmin"
           class="link"
           :to="{ name: 'create-post' }"
           >Create Post</router-link
         >
-        <router-link v-if="!user_login" class="link" :to="{ name: 'login' }"
+        <router-link v-if="!isUserLogin" class="link" :to="{ name: 'login' }"
           >Login/Register</router-link
         >
       </ul>
@@ -93,15 +93,15 @@ import { ref, computed, defineComponent, onMounted, onBeforeMount } from "vue";
 import { AuthService } from "../../services/auth.service";
 import { useUserStore } from "../../../stores/users";
 import { useRouter } from "vue-router";
-import { auth } from "../../firebase/firebaseInit";
+import { auth } from "../../firebase/firebase-auth";
 
 export default defineComponent({
   name: "navigation",
   props: {
-    user_login: {
+    isUserLogin: {
       type: Boolean,
     },
-    admin: {
+    isAdmin: {
       type: Boolean,
     },
   },
diff --git a/src/shared/firebase/firebase-app.ts b/src/shared/firebase/firebase-app.ts
new file mode 100644
index 0000000..b37696a
--- /dev/null
+++ b/src/shared/firebase/firebase-app.ts
@@ -0,0 +1,5 @@
+import { initializeApp } from "firebase/app";
+import { firebaseConfig } from "./firebase-config";
+
+const firebaseApp = initializeApp(firebaseConfig);
+export { firebaseApp };
diff --git a/src/shared/firebase/firebase-auth.ts b/src/shared/firebase/firebase-auth.ts
new file mode 100644
index 0000000..6065569
--- /dev/null
+++ b/src/shared/firebase/firebase-auth.ts
@@ -0,0 +1,4 @@
+import { getAuth } from "firebase/auth";
+import { firebaseApp } from "./firebase-app";
+const auth = getAuth(firebaseApp);
+export { auth };
diff --git a/src/shared/firebase/firebase-bucket.ts b/src/shared/firebase/firebase-bucket.ts
new file mode 100644
index 0000000..c149e39
--- /dev/null
+++ b/src/shared/firebase/firebase-bucket.ts
@@ -0,0 +1,4 @@
+import { getStorage } from "firebase/storage";
+import { firebaseApp } from "./firebase-app";
+const bucket = getStorage(firebaseApp);
+export { bucket };
diff --git a/src/shared/firebase/firebase-config.ts b/src/shared/firebase/firebase-config.ts
new file mode 100644
index 0000000..0f5417a
--- /dev/null
+++ b/src/shared/firebase/firebase-config.ts
@@ -0,0 +1,8 @@
+export const firebaseConfig = {
+  apiKey: "AIzaSyB9D51M_e4XkvBSoyFZPc8hTaKCTbgqBjk",
+  authDomain: "vuejs3-fireblog.firebaseapp.com",
+  projectId: "vuejs3-fireblog",
+  storageBucket: "vuejs3-fireblog.appspot.com",
+  messagingSenderId: "954680780309",
+  appId: "1:954680780309:web:147f187f86f99dc590901c",
+};
diff --git a/src/shared/firebase/firebase-firestore.ts b/src/shared/firebase/firebase-firestore.ts
new file mode 100644
index 0000000..a1c1ea2
--- /dev/null
+++ b/src/shared/firebase/firebase-firestore.ts
@@ -0,0 +1,5 @@
+import { firebaseApp } from "./firebase-app";
+import { getFirestore } from "firebase/firestore";
+
+const firestore = getFirestore(firebaseApp);
+export { firestore };
diff --git a/src/shared/firebase/firebaseInit.ts b/src/shared/firebase/firebaseInit.ts
deleted file mode 100644
index 032a311..0000000
--- a/src/shared/firebase/firebaseInit.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { initializeApp } from "firebase/app";
-import { getAuth } from "firebase/auth";
-import { getFirestore } from "firebase/firestore";
-import { getStorage } from "firebase/storage";
-
-const firebaseConfig = {
-  apiKey: "AIzaSyB9D51M_e4XkvBSoyFZPc8hTaKCTbgqBjk",
-  authDomain: "vuejs3-fireblog.firebaseapp.com",
-  projectId: "vuejs3-fireblog",
-  storageBucket: "vuejs3-fireblog.appspot.com",
-  messagingSenderId: "954680780309",
-  appId: "1:954680780309:web:147f187f86f99dc590901c",
-};
-
-const firebaseApp = initializeApp(firebaseConfig);
-const firestore = getFirestore(firebaseApp);
-const bucket = getStorage(firebaseApp);
-const auth = getAuth(firebaseApp);
-
-export { firebaseApp, firestore, bucket, auth };
diff --git a/src/shared/services/auth.service.ts b/src/shared/services/auth.service.ts
index 82f13de..3b0bacf 100644
--- a/src/shared/services/auth.service.ts
+++ b/src/shared/services/auth.service.ts
@@ -4,7 +4,7 @@ import {
   signInWithEmailAndPassword,
   signOut,
 } from "firebase/auth";
-import { auth } from "../firebase/firebaseInit";
+import { auth } from "../firebase/firebase-auth";
 
 export class AuthService {
   constructor() {}
diff --git a/src/shared/services/post.service.ts b/src/shared/services/post.service.ts
index a6829c0..7f7e671 100644
--- a/src/shared/services/post.service.ts
+++ b/src/shared/services/post.service.ts
@@ -1,6 +1,7 @@
 import imageCompression from "browser-image-compression";
-import { collection, doc, getDoc, setDoc, updateDoc } from "firebase/firestore";
-import { bucket, firestore } from "../firebase/firebaseInit";
+import { collection, doc, getDoc, setDoc } from "firebase/firestore";
+import { bucket } from "../firebase/firebase-bucket";
+import { firestore } from "../firebase/firebase-firestore";
 import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
 import { Post } from "../interfaces/post.interface";
 
diff --git a/src/stores/posts.ts b/src/stores/posts.ts
index 36a714d..14ec34f 100644
--- a/src/stores/posts.ts
+++ b/src/stores/posts.ts
@@ -1,4 +1,4 @@
-import { firestore } from "../shared/firebase/firebaseInit";
+import { firestore } from "../shared/firebase/firebase-firestore";
 import { defineStore } from "pinia";
 import { Ref, ref } from "vue";
 import {
diff --git a/src/stores/users.ts b/src/stores/users.ts
index bb79a7f..ef798a7 100644
--- a/src/stores/users.ts
+++ b/src/stores/users.ts
@@ -1,7 +1,7 @@
 import { doc, getDoc } from "firebase/firestore";
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { firestore } from "../shared/firebase/firebaseInit";
+import { firestore } from "../shared/firebase/firebase-firestore";
 
 export const useUserStore = defineStore(
   "users",
@@ -14,6 +14,8 @@ export const useUserStore = defineStore(
     const profileUsername = ref("");
     const profileId = ref("");
     const profileInitials = ref("");
+    const isUserLogin = ref(false);
+    const isAdmin = ref(false);
 
     // actions
     async function getProfileInfo(userUid: string) {
@@ -28,6 +30,7 @@ export const useUserStore = defineStore(
       setFirstName(document.data().firstName);
       setLastName(document.data().lastName);
       setUsername(document.data().username);
+      setUserLogin(true);
     }
 
     // mutations
@@ -60,6 +63,14 @@ export const useUserStore = defineStore(
       profileUsername.value = payload;
     }
 
+    function setUserLogin(payload: boolean) {
+      isUserLogin.value = payload;
+    }
+
+    function setIsAdmin(payload: boolean) {
+      isAdmin.value = payload;
+    }
+
     return {
       user,
       profileEmail,
@@ -68,12 +79,16 @@ export const useUserStore = defineStore(
       profileUsername,
       profileId,
       profileInitials,
+      isUserLogin,
+      isAdmin,
       getProfileInfo,
       setProfileInitials,
       setUser,
       setFirstName,
       setLastName,
       setUsername,
+      setUserLogin,
+      setIsAdmin,
     };
   },
   {
diff --git a/src/views/blogs/blogs.vue b/src/views/blogs/blogs.vue
index add9fb2..0621f57 100644
--- a/src/views/blogs/blogs.vue
+++ b/src/views/blogs/blogs.vue
@@ -1,4 +1,5 @@
 <template>
+  <navigation :isUserLogin="isUserLogin" :isAdmin="isAdmin" />
   <div class="blog-card-wrap">
     <div class="blog-cards container">
       <div class="toggle-edit" v-if="isAdmin">
@@ -22,66 +23,48 @@
       <button @click="loadMorePosts">Load More Posts</button>
     </div>
   </div>
+  <footer-vue v-if="!isUserLogin" />
 </template>
 
 <script lang="ts">
+import Navigation from "../../shared/components/navigation/navigation.vue";
+import Footer from "../../shared/components/footer/footer.vue";
 import BlogCards from "../../shared/components/blog-cards/blog-cards.vue";
-import {
-  onBeforeUnmount,
-  computed,
-  ref,
-  onBeforeMount,
-  defineComponent,
-} from "vue";
+
+import { onBeforeUnmount, computed, ref, defineComponent } from "vue";
 import { usePostStore } from "../../stores/posts";
-import { auth } from "../../shared/firebase/firebaseInit";
+import { useUserStore } from "../../stores/users";
 
 export default defineComponent({
   name: "blogs",
   components: {
     "blog-cards": BlogCards,
+    navigation: Navigation,
+    "footer-vue": Footer,
   },
   setup() {
-    const store = usePostStore();
+    const postStore = usePostStore();
+    const userStore = useUserStore();
     const isEdit = ref(false);
-    const isAdmin = ref(false);
-
-    function checkUserState() {
-      auth.onAuthStateChanged((currentUser) => {
-        if (currentUser) {
-          let email = currentUser.email;
-          //@ts-ignore
-          email === import.meta.env.VITE_APP_ADMINEMAIL
-            ? (isAdmin.value = true)
-            : (isAdmin.value = false);
-          isAdmin.value = true;
-        } else {
-          isAdmin.value = false;
-        }
-      });
-    }
 
     async function loadMorePosts() {
-      await store.loadMorePosts();
+      await postStore.loadMorePosts();
     }
 
-    onBeforeMount(() => {
-      checkUserState();
-    });
-
     onBeforeUnmount(() => {
-      store.toggleEditPost(false);
+      postStore.toggleEditPost(false);
     });
 
     return {
-      blogPosts: computed(() => store.blogPosts),
-      editPost: computed(() => store.editPost),
+      blogPosts: computed(() => postStore.blogPosts),
+      editPost: computed(() => postStore.editPost),
       isEdit,
       updateEditPost: (editState: boolean) => {
         isEdit.value = !editState;
-        store.toggleEditPost(isEdit.value);
+        postStore.toggleEditPost(isEdit.value);
       },
-      isAdmin,
+      isAdmin: computed(() => userStore.isAdmin),
+      isUserLogin: computed(() => userStore.isUserLogin),
       loadMorePosts,
     };
   },
diff --git a/src/views/create-post/create-post.vue b/src/views/create-post/create-post.vue
index 45b7943..d0ba909 100644
--- a/src/views/create-post/create-post.vue
+++ b/src/views/create-post/create-post.vue
@@ -1,4 +1,5 @@
 <template>
+  <navigation :isUserLogin="isUserLogin" :isAdmin="isAdmin" />
   <div class="create-post">
     <blog-cover-preview v-show="blogPhotoPreview" />
     <loading v-show="loading" />
@@ -45,22 +46,35 @@
 // components
 import BlogCoverPreview from "../../shared/components/blog-cover-preview/blog-cover-preview.vue";
 import Loading from "../../shared/components/loading/loading.vue";
+import Navigation from "../../shared/components/navigation/navigation.vue";
+import Footer from "../../shared/components/footer/footer.vue";
 // vue
-import { ref, defineComponent, Ref, computed } from "vue";
+import { ref, defineComponent, Ref, computed, defineAsyncComponent } from "vue";
 import { useRouter } from "vue-router";
 import { usePostStore } from "../../stores/posts";
 import { useUserStore } from "../../stores/users";
 // services
 import { PostService } from "../../shared/services/post.service";
-import { MdEditor } from "md-editor-v3";
-import "md-editor-v3/lib/style.css";
+
+const AsyncMdEditor = defineAsyncComponent(async () => {
+  // Dynamically import the component and the CSS
+  const [component] = await Promise.all([
+    import("md-editor-v3"),
+    import("md-editor-v3/lib/style.css").catch(() => {
+      console.error("Failed to import the CSS file.");
+    }),
+  ]);
+  return component.MdEditor;
+});
 
 export default defineComponent({
   name: "create-post",
   components: {
     "blog-cover-preview": BlogCoverPreview,
     loading: Loading,
-    "md-editor": MdEditor,
+    "md-editor": AsyncMdEditor,
+    navigation: Navigation,
+    "footer-vue": Footer,
   },
   setup() {
     const postStore = usePostStore();
@@ -151,6 +165,8 @@ export default defineComponent({
       blogCoverPhotoName: computed(() => postStore.blogCoverPhotoName),
       blogPhotoFileURL: computed(() => postStore.blogPhotoFileURL),
       blogPhotoPreview: computed(() => postStore.blogPhotoPreview),
+      isUserLogin: computed(() => userStore.isUserLogin),
+      isAdmin: computed(() => userStore.isAdmin),
       updateBlogTitle: (title: string) => postStore.updBlogTitle(title),
       togglePreview: () => postStore.togglePreview(),
       observeFile,
diff --git a/src/views/edit-blog/edit-blog.vue b/src/views/edit-blog/edit-blog.vue
index 721aa33..32af12f 100644
--- a/src/views/edit-blog/edit-blog.vue
+++ b/src/views/edit-blog/edit-blog.vue
@@ -1,4 +1,5 @@
 <template>
+  <navigation :isUserLogin="isUserLogin" :isAdmin="isAdmin" />
   <div class="create-post">
     <blog-cover-preview v-show="blogPhotoPreview" />
     <loading v-show="loading" />
@@ -39,24 +40,43 @@
 
 <script lang="ts">
 // components
+import Navigation from "../../shared/components/navigation/navigation.vue";
 import BlogCoverPreview from "../../shared/components/blog-cover-preview/blog-cover-preview.vue";
 import Loading from "../../shared/components/loading/loading.vue";
 // vue
 import { useUserStore } from "../../stores/users";
 import { usePostStore } from "../../stores/posts";
 import { useRoute, useRouter } from "vue-router";
-import { ref, computed, onMounted, defineComponent, Ref } from "vue";
+import {
+  ref,
+  computed,
+  onMounted,
+  defineComponent,
+  Ref,
+  defineAsyncComponent,
+} from "vue";
 // services
 import { DocumentData } from "firebase/firestore";
 import { PostService } from "../../shared/services/post.service";
-import { MdEditor } from "md-editor-v3";
-import "md-editor-v3/lib/style.css";
+
+const AsyncMdEditor = defineAsyncComponent(async () => {
+  // Dynamically import the component and the CSS
+  const [component] = await Promise.all([
+    import("md-editor-v3"),
+    import("md-editor-v3/lib/style.css").catch(() => {
+      console.error("Failed to import the CSS file.");
+    }),
+  ]);
+  return component.MdEditor;
+});
+
 export default defineComponent({
   name: "edit-blog",
   components: {
     "blog-cover-preview": BlogCoverPreview,
     loading: Loading,
-    "md-editor": MdEditor,
+    "md-editor": AsyncMdEditor,
+    navigation: Navigation,
   },
   setup() {
     const userStore = useUserStore();
@@ -163,6 +183,8 @@ export default defineComponent({
       blogPhotoFileURL: computed(() => postStore.blogPhotoFileURL),
       blogPhotoPreview: computed(() => postStore.blogPhotoPreview),
       blogPosts: computed(() => postStore.blogPosts),
+      isUserLogin: computed(() => userStore.isUserLogin),
+      isAdmin: computed(() => userStore.isAdmin),
       error,
       errorMsg,
       blogPhoto,
diff --git a/src/views/forgot-password/forgot-password.vue b/src/views/forgot-password/forgot-password.vue
index c35fd5b..4d3c5f0 100644
--- a/src/views/forgot-password/forgot-password.vue
+++ b/src/views/forgot-password/forgot-password.vue
@@ -1,4 +1,5 @@
 <template>
+  <navigation :isUserLogin="false" />
   <div class="reset-password">
     <modal
       v-if="modalActive"
@@ -32,9 +33,12 @@
       <div class="background"></div>
     </div>
   </div>
+  <footer-vue />
 </template>
 
 <script lang="ts">
+import Navigation from "../../shared/components/navigation/navigation.vue";
+import Footer from "../../shared/components/footer/footer.vue";
 import Modal from "../../shared/components/modal/modal.vue";
 import Loading from "../../shared/components/loading/loading.vue";
 import { defineComponent, ref } from "vue";
@@ -45,13 +49,15 @@ export default defineComponent({
   components: {
     modal: Modal,
     loading: Loading,
+    navigation: Navigation,
+    "footer-vue": Footer,
   },
   setup() {
+    const authService = new AuthService();
     const email = ref("");
     const modalActive = ref(false);
     const modalMessage = ref("");
     const loading = ref(false);
-    const authService = new AuthService();
 
     async function resetPassword() {
       try {
diff --git a/src/views/home/home.vue b/src/views/home/home.vue
index a651f1d..4edf8f5 100644
--- a/src/views/home/home.vue
+++ b/src/views/home/home.vue
@@ -1,4 +1,5 @@
 <template>
+  <navigation :isUserLogin="isUserLogin" :isAdmin="isAdmin" />
   <div class="home">
     <blog-post v-if="!user" :post="welcomeScreen" />
     <!-- the post props binding the post used in v-for loop -->
@@ -32,20 +33,26 @@
       </div>
     </div>
   </div>
+  <footer-vue v-if="!isUserLogin" />
 </template>
 
 <script lang="ts">
+import Navigation from "../../shared/components/navigation/navigation.vue";
+import Footer from "../../shared/components/footer/footer.vue";
 import BlogPost from "./components/blog-post.vue";
 import BlogCards from "../../shared/components/blog-cards/blog-cards.vue";
 import { useUserStore } from "../../stores/users";
 import { usePostStore } from "../../stores/posts";
-import { ref, computed, defineComponent } from "vue";
+import { ref, computed, defineComponent, onBeforeMount } from "vue";
+import { auth } from "../../shared/firebase/firebase-auth";
 
 export default defineComponent({
   name: "home",
   components: {
     "blog-post": BlogPost,
     "blog-cards": BlogCards,
+    navigation: Navigation,
+    "footer-vue": Footer,
   },
   setup() {
     const userStore = useUserStore();
@@ -61,10 +68,35 @@ export default defineComponent({
       welcomeScreen: true,
     });
 
+    async function checkUserState() {
+      auth.onAuthStateChanged((currentUser) => {
+        if (currentUser) {
+          let email = currentUser.email;
+          //@ts-ignore
+          email === import.meta.env.VITE_APP_ADMINEMAIL
+            ? userStore.setIsAdmin(true)
+            : userStore.setIsAdmin(false);
+          userStore.setUser(currentUser);
+          userStore.setUserLogin(true);
+          userStore.setIsAdmin(true);
+        } else {
+          userStore.setUserLogin(false);
+        }
+      });
+    }
+
+    onBeforeMount(async () => {
+      // once the user state is fetched, use the store to manage the user state
+      await checkUserState();
+      await postStore.getPost();
+    });
+
     return {
       user: computed(() => userStore.user),
       blogPostsFeed: computed(() => postStore.blogPostsFeed()),
       blogPostsCards: computed(() => postStore.blogPostsCards()),
+      isUserLogin: computed(() => userStore.isUserLogin),
+      isAdmin: computed(() => userStore.isAdmin),
       welcomeScreen,
     };
   },
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index 0b86989..52ac579 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -1,4 +1,5 @@
 <template>
+  <navigation />
   <div class="form-wrap">
     <form class="login">
       <p class="login-register">
@@ -35,15 +36,22 @@
     </form>
     <div class="background"></div>
   </div>
+  <footer-vue />
 </template>
 
 <script lang="ts">
+import Navigation from "../../shared/components/navigation/navigation.vue";
+import Footer from "../../shared/components/footer/footer.vue";
 import { defineComponent, ref } from "vue";
 import { AuthService } from "../../shared/services/auth.service";
 import { useRouter } from "vue-router";
 
 export default defineComponent({
   name: "login",
+  components: {
+    navigation: Navigation,
+    "footer-vue": Footer,
+  },
   setup() {
     const email = ref("");
     const password = ref("");
diff --git a/src/views/profile/profile.vue b/src/views/profile/profile.vue
index 8eab3d0..b83aa54 100644
--- a/src/views/profile/profile.vue
+++ b/src/views/profile/profile.vue
@@ -1,4 +1,6 @@
 <template>
+  <!-- if user can navigate on the profile page, he/she must be logged in -->
+  <navigation :isUserLogin="true" />
   <div class="profile">
     <modal
       v-if="modalActive"
@@ -37,19 +39,25 @@
       </div>
     </div>
   </div>
+  <footer-vue />
 </template>
 
 <script lang="ts">
+import Navigation from "../../shared/components/navigation/navigation.vue";
+import Footer from "../../shared/components/footer/footer.vue";
+import Modal from "../../shared/components/modal/modal.vue";
 import { useUserStore } from "../../stores/users";
 import { ref, defineComponent, onBeforeMount } from "vue";
-import Modal from "../../shared/components/modal/modal.vue";
-import { auth, firestore } from "../../shared/firebase/firebaseInit";
+import { auth } from "../../shared/firebase/firebase-auth";
+import { firestore } from "../../shared/firebase/firebase-firestore";
 import { doc, updateDoc } from "firebase/firestore";
 
 export default defineComponent({
   name: "profile",
   components: {
     modal: Modal,
+    navigation: Navigation,
+    "footer-vue": Footer,
   },
   setup() {
     const store = useUserStore();
diff --git a/src/views/register/register.vue b/src/views/register/register.vue
index 48b03f5..0ef52c4 100644
--- a/src/views/register/register.vue
+++ b/src/views/register/register.vue
@@ -1,4 +1,5 @@
 <template>
+  <navigation />
   <div class="form-wrap">
     <form class="register">
       <p class="login-register">
@@ -56,10 +57,13 @@
     </form>
     <div class="background"></div>
   </div>
+  <footer-vue />
 </template>
 
 <script lang="ts">
-import { firestore } from "../../shared/firebase/firebaseInit";
+import Navigation from "../../shared/components/navigation/navigation.vue";
+import Footer from "../../shared/components/footer/footer.vue";
+import { firestore } from "../../shared/firebase/firebase-firestore";
 import { doc, setDoc } from "firebase/firestore";
 import { defineComponent, ref } from "vue";
 import { useRouter } from "vue-router";
@@ -67,6 +71,10 @@ import { AuthService } from "../../shared/services/auth.service";
 
 export default defineComponent({
   name: "register",
+  components: {
+    navigation: Navigation,
+    "footer-vue": Footer,
+  },
   setup() {
     const firstName = ref("");
     const lastName = ref("");
diff --git a/src/views/view-blog/view-blog.vue b/src/views/view-blog/view-blog.vue
index d278f13..95c5c35 100644
--- a/src/views/view-blog/view-blog.vue
+++ b/src/views/view-blog/view-blog.vue
@@ -1,4 +1,5 @@
 <template>
+  <navigation :isUserLogin="isUserLogin" :isAdmin="isAdmin" />
   <div class="post-view" v-if="currentBlog">
     <div class="container quillWrapper">
       <h2>{{ currentBlog.blogTitle }}</h2>
@@ -14,18 +15,27 @@
       <VueShowdown :markdown="markdownSrc" />
     </div>
   </div>
+  <footer-vue />
 </template>
 
 <script lang="ts">
+import Navigation from "../../shared/components/navigation/navigation.vue";
+import Footer from "../../shared/components/footer/footer.vue";
 import { usePostStore } from "../../stores/posts";
-import { ref, onMounted, defineComponent } from "vue";
+import { ref, onMounted, defineComponent, computed } from "vue";
 import { useRoute } from "vue-router";
 import { PostService } from "../../shared/services/post.service";
+import { useUserStore } from "../../stores/users";
 
 export default defineComponent({
   name: "view-blog",
+  components: {
+    navigation: Navigation,
+    "footer-vue": Footer,
+  },
   setup() {
     const postStore = usePostStore();
+    const userStore = useUserStore();
     const route = useRoute();
     const postService = new PostService();
     const currentBlog = ref();
@@ -51,6 +61,8 @@ export default defineComponent({
       reload,
       currentBlog,
       markdownSrc,
+      isUserLogin: computed(() => userStore.isUserLogin),
+      isAdmin: computed(() => userStore.isAdmin),
     };
   },
 });
diff --git a/vite.config.ts b/vite.config.ts
index 0a8bd80..fb0483e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,24 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import { visualizer } from "rollup-plugin-visualizer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    visualizer({
+      filename: "stats.html", // The name of the output file
+      open: true, // Automatically open the visualization in your browser
+      gzipSize: true, // Show gzip size
+      brotliSize: true, // Show brotli size
+    }),
+  ],
+  optimizeDeps: {
+    holdUntilCrawlEnd: true,
+    force: true,
+  },
+  build: {
+    cssCodeSplit: true,
+    cssMinify: true,
+  },
 });