diff --git a/src/assets/layout.css b/src/assets/layout.css
index f0c5990..082efbf 100644
--- a/src/assets/layout.css
+++ b/src/assets/layout.css
@@ -1,6 +1,9 @@
 /* Navbar */
 nav ul>li {
-  @apply px-2 py-3.5 duration-300 hover:bg-neutral-900 hover:text-neutral-10 active:bg-neutral-900 active:text-neutral-10;
+  @apply px-2 py-3.5 duration-300 hover:bg-neutral-900 hover:text-neutral-10 ;
+}
+nav ul>li.active {
+  @apply bg-neutral-900 text-neutral-10 duration-300;
 }
 
 /* Header */
diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue
index 5ece75b..2439e52 100644
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -400,7 +400,6 @@ export default {
     // 打開 rule 檔要顯示儲存的選項、規則、時間
     conformanceTempReportData: {
       handler: function(newValue) {
-        this.isLoading = true;
         setTimeout(() => {
           if(newValue !== null) {
             const rule = newValue.rule;
@@ -418,7 +417,6 @@ export default {
                   {category: 'Start', task: rule.starts_with},
                   {category: 'End', task: rule.ends_with},
                 ];
-                // this.isSubmitShowDataSeq = this.setSubmitShowData(rule.start, rule.end);
                 break;
               case 'directly-follows': // Activity Sequence 選 Sequence 的行為
                 this.selectedRuleType = 'Sequence';
@@ -476,7 +474,6 @@ export default {
                   {category: 'End', task: rule.end}
                 ];
                 this.isSubmitTimeCfmPtEteSE = { min: rule.min, max: rule.max};
-                // this.isSubmitShowDataPtEte = this.setSubmitShowData(rule.start, rule.end);
                 break;
               case 'processing-time-partial-starts-with':
                 this.selectedRuleType = 'Processing time';
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 55f2566..e61be1e 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,15 +1,6 @@
 <template>
   <nav class="bg-neutral-700">
     <div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
-      <p class="text-neutral-10">logId: {{ logId }}</p>
-      <p class="text-neutral-10">tempFilterId: {{ tempFilterId }}</p>
-      <p class="text-neutral-10">createFilterId: {{ createFilterId }}</p>
-      <p class="text-neutral-10">conformanceLogId: {{ conformanceLogId }}</p>
-      <p class="text-neutral-10">conformanceFilterId: {{ conformanceFilterId }}</p>
-      <p class="text-neutral-10">conformanceLogTempCheckId: {{ conformanceLogTempCheckId }}</p>
-      <p class="text-neutral-10">conformanceFilterTempCheckId: {{ conformanceFilterTempCheckId }}</p>
-      <p class="text-neutral-10">conformanceLogCreateCheckId: {{ conformanceLogCreateCheckId }}</p>
-      <p class="text-neutral-10">conformanceFilterCreateCheckId: {{ conformanceFilterCreateCheckId }}</p>
       <div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
         <div class="flex flex-1 items-center">
           <!-- 回 Files 頁 -->
@@ -20,7 +11,7 @@
           </router-link>
           <h2 class="mr-14 py-3 text-2xl font-black text-neutral-10">{{ navViewName }}</h2>
           <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
-            <li @click="switchNavItem($event, index)" v-for="(item, index) in navViewData[navViewName]" :key="index">{{ item }}</li>
+            <li @click="switchNavItem($event, item)" v-for="(item, index) in navViewData[navViewName]" :key="index" :class="{'active': isActive === item}">{{ item }}</li>
           </ul>
         </div>
         <!-- Files Page: Search and Upload -->
@@ -39,7 +30,7 @@
           </form>
           <label class="btn btn-sm btn-neutral cursor-pointer">
             <input id="uploadFiles" class="hidden" type="file">
-            upload
+            Upload
           </label> -->
         </div>
         <!-- Other Page: Save and Download -->
@@ -75,8 +66,6 @@ export default {
   components: {
     IconSearch,
     IconSetting,
-    saveFilter,
-    savedSuccessfully
   },
   data() {
     return {
@@ -89,6 +78,7 @@ export default {
         DISCOVER: ['MAP', 'CONFORMANCE']
       },
       navViewName: 'FILES',
+      isActive: null,
     };
   },
   computed: {
@@ -123,6 +113,7 @@ export default {
       let type;
       let fileId;
 
+      this.isActive = event.target.innerText;
       switch (this.navViewName) {
         case 'FILES':
           this.store.filesTag = event.target.innerText;
@@ -141,7 +132,30 @@ export default {
       }
     },
     getNavViewName() {
+      let name = this.$route.name;
       this.navViewName = this.$route.matched[1].name.toUpperCase();
+      this.store.filesTag = 'ALL';
+      switch (this.navViewName) {
+        case 'FILES':
+          this.isActive = this.store.filesTag;
+          break;
+        case 'DISCOVER':
+          switch (name) {
+            case 'Map':
+            case 'CheckMap':
+              this.isActive = 'MAP'
+              break;
+            case 'Conformance':
+            case 'CheckConformance':
+              this.isActive = 'CONFORMANCE'
+              break;
+          }
+          break;
+      }
+      // if(this.navViewName === 'DISCOVER') {
+      //   if(name === 'Map' || name === 'CheckMap') this.isActive = 'MAP';
+      //   else if(name === 'Conformance' || name === 'CheckConformance') this.isActive = 'CONFORMANCE';
+      // }
     },
     /**
      * Save button' modal
diff --git a/src/stores/files.js b/src/stores/files.js
index b1adfc9..b04f4cd 100644
--- a/src/stores/files.js
+++ b/src/stores/files.js
@@ -87,7 +87,6 @@ export default defineStore('filesStore', {
           o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null;
           return this.allEventLog
         })
-        if(this.httpStatus < 300) loading.isLoading = false;
       } catch(error) {
         apiError(error, 'Failed to load the logs.');
       };
@@ -112,7 +111,6 @@ export default defineStore('filesStore', {
           o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm');
           o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null;
         });
-        if(this.httpStatus < 300) loading.isLoading = false;
       } catch(error) {
         apiError(error, 'Failed to load the filters.');
       };
@@ -137,7 +135,6 @@ export default defineStore('filesStore', {
           o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm');
           o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null;
         });
-        if(this.httpStatus < 300) loading.isLoading = false;
       } catch(error) {
         apiError(error, 'Failed to load the filters.');
       };
@@ -162,7 +159,6 @@ export default defineStore('filesStore', {
           o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm');
           o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null;
         });
-        if(this.httpStatus < 300) loading.isLoading = false;
       } catch(error) {
         apiError(error, 'Failed to load the filters.');
       };
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index d1dbff9..1e6c033 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -74,6 +74,7 @@
   import { storeToRefs } from 'pinia';
   import filesStore from '@/stores/files.js';
   import AllMapDataStore from '@/stores/allMapData.js';
+  import LoadingStore from '@/stores/loading.js';
   import IconDataFormat from '@/components/icons/IconDataFormat.vue';
   import IconRule from '@/components/icons/IconRule.vue';
   import IconsFilter from '@/components/icons/IconsFilter.vue';
@@ -91,9 +92,11 @@
     setup() {
       const store = filesStore();
       const allMapDataStore = AllMapDataStore();
+      const loadingStore = LoadingStore();
       const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
+      const { isLoading } = storeToRefs(loadingStore);
 
-      return { store, allMapDataStore, createFilterId, baseLogId }
+      return { store, allMapDataStore, createFilterId, baseLogId, isLoading }
     },
     components: {
       IconDataFormat,
@@ -170,10 +173,12 @@
       }
     },
     mounted() {
+      this.isLoading = true;
       this.store.fetchEventLog();
       this.store.fetchFilter();
       this.store.fetchConformanceLog();
       this.store.fetchConformanceFilter();
+      this.isLoading = false;
     }
   }
 </script>
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index af8fe8f..b188487 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -15,10 +15,11 @@ import { storeToRefs } from 'pinia';
 import LoginStore from '@/stores/login.js';
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
+import ConformanceStore from '@/stores/conformance.js';
 import Header from "@/components/Header.vue";
 import Navbar from "@/components/Navbar.vue";
 import Loading from '@/components/Loading.vue';
-import { saveFilter, leaveFilter } from '@/module/alertModal.js';
+import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
 
 export default {
   name: 'MainContainer',
@@ -26,17 +27,17 @@ export default {
     const loginStore = LoginStore();
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
+    const conformanceStore = ConformanceStore();
     const { checkLogin } = loginStore;
     const { tempFilterId, createFilterId,  temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
+    const {  conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
 
-    return { checkLogin, loadingStore, temporaryData, tempFilterId, createFilterId, postRuleData, ruleData, allMapDataStore };
+    return { checkLogin, loadingStore, temporaryData, tempFilterId, createFilterId, postRuleData, ruleData, conformanceLogTempCheckId, conformanceFilterTempCheckId, allMapDataStore, conformanceStore };
   },
   components: {
     Header,
     Navbar,
-    Loading,
-    saveFilter,
-    leaveFilter
+    Loading
   },
   created() {
     // Save token in Headers.
@@ -53,7 +54,7 @@ export default {
       this.$emitter.emit('leaveFilter', false);
       leaveFilter(next, this.allMapDataStore.addFilterId, to.path)
     } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance') && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
-      leaveFilter(false, this.conformanceStore.addConformanceCreateCheckId, false, this.logOut)
+      leaveConformance(next, this.conformanceStore.addConformanceCreateCheckId, to.path)
     } else next();
   },
 };