diff --git a/package-lock.json b/package-lock.json
index 1158d42..ed85df8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "frontend",
-  "version": "0.2.0",
+  "version": "0.99.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "0.2.0",
+      "version": "0.99.0",
       "dependencies": {
         "autoprefixer": "^10.4.13",
         "axios": "^1.2.2",
@@ -25,6 +25,7 @@
         "vue": "^3.2.45",
         "vue-axios": "^3.5.2",
         "vue-router": "^4.1.6",
+        "vue-sweetalert2": "^5.0.5",
         "vue-toast-notification": "^3.0.4",
         "vuedraggable": "^4.1.0"
       },
@@ -5474,6 +5475,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.7.3",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.3.tgz",
+      "integrity": "sha512-fUN/fyVSBZNtY4Rr/Qtxn7tNNnlRAbUhQxTQ9uOo0xVMIHBmqq4/9pau5N9dB2pvkB353XL/ywRAycscLoYU3w==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -6006,6 +6016,17 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-sweetalert2": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.5.tgz",
+      "integrity": "sha512-Q7+TjQxNwGruT2jfPaSKMz18HHWs81r4umEwlrrtOf/QL5Iwl1T+tUaNkcvKB7Rf9rYftubt7NnOMjfDMnDH3A==",
+      "dependencies": {
+        "sweetalert2": "11.x"
+      },
+      "peerDependencies": {
+        "vue": "*"
+      }
+    },
     "node_modules/vue-toast-notification": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-3.0.4.tgz",
@@ -10292,6 +10313,11 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "sweetalert2": {
+      "version": "11.7.3",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.7.3.tgz",
+      "integrity": "sha512-fUN/fyVSBZNtY4Rr/Qtxn7tNNnlRAbUhQxTQ9uOo0xVMIHBmqq4/9pau5N9dB2pvkB353XL/ywRAycscLoYU3w=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -10638,6 +10664,14 @@
         "@vue/devtools-api": "^6.4.5"
       }
     },
+    "vue-sweetalert2": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.5.tgz",
+      "integrity": "sha512-Q7+TjQxNwGruT2jfPaSKMz18HHWs81r4umEwlrrtOf/QL5Iwl1T+tUaNkcvKB7Rf9rYftubt7NnOMjfDMnDH3A==",
+      "requires": {
+        "sweetalert2": "11.x"
+      }
+    },
     "vue-toast-notification": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-3.0.4.tgz",
diff --git a/package.json b/package.json
index 77f0d64..fc87394 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "vue": "^3.2.45",
     "vue-axios": "^3.5.2",
     "vue-router": "^4.1.6",
+    "vue-sweetalert2": "^5.0.5",
     "vue-toast-notification": "^3.0.4",
     "vuedraggable": "^4.1.0"
   },
diff --git a/src/assets/vendors.css b/src/assets/vendors.css
index d722307..6fd6f3c 100644
--- a/src/assets/vendors.css
+++ b/src/assets/vendors.css
@@ -12,7 +12,7 @@
 
 /* vue-toast-notification */
 .v-toast__item {
-  @apply min-h-[48px]
+  @apply min-h-[48px] rounded-full
 }
 .v-toast__item .v-toast__text {
   @apply py-3
diff --git a/src/components/Discover/Filter/Funnel.vue b/src/components/Discover/Filter/Funnel.vue
index 5d4fd13..704739c 100644
--- a/src/components/Discover/Filter/Funnel.vue
+++ b/src/components/Discover/Filter/Funnel.vue
@@ -1,10 +1,6 @@
 <template>
   <div class=" w-full h-full">
       <div class="h-[calc(100%_-_58px)] border-b border-neutral-400 mb-2 overflow-y-auto overflow-x-auto scrollbar">
-        temporaryData:{{ temporaryData }}<br/>
-        postRuleData:{{ postRuleData }}<br/>
-        isRuleData:{{ isRuleData }}<br/>
-        ruleData:{{ ruleData }}<br/>
         <div v-if="this.temporaryData.length === 0" class="h-full flex justify-center items-center">
           <span class="text-neutral-500">No Filter.</span>
         </div>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index ab1d483..2aae7c7 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -34,9 +34,9 @@
           </label>
         </div>
         <!-- Other Page: Save and Download -->
-        <!-- Save 有 data 跳重新命名，沒有 data 跳要不要儲存，沒有跳動都不跳 -->
+        <!-- Save 有 data 跳重新命名，沒有 data 跳要不要儲存，沒有動都不跳 -->
         <div v-else class="space-x-4">
-          <button class="btn btn-sm btn-neutral">Save</button>
+          <button class="btn btn-sm btn-neutral" @click="showAlert">Save</button>
           <button class="btn btn-sm btn-neutral">Download</button>
         </div>
       </div>
@@ -48,6 +48,7 @@
 import filesStore from '@/stores/files.js';
 import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
+import AllMapDataStore from '@/stores/allMapData.js';
 
 export default {
   data() {
@@ -59,16 +60,17 @@ export default {
         DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
       },
       navViewName: 'FILES',
+      sweetVal: '',
     };
   },
   watch: {
-    '$route':'getnavViewName',
+    '$route':'getNavViewName',
   },
   setup() {
     const store = filesStore();
-    return {
-      store,
-    }
+    const allMapDataStore = AllMapDataStore();
+
+    return { store, allMapDataStore}
   },
   components: {
     IconSearch,
@@ -76,15 +78,105 @@ export default {
   },
   mounted() {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
-    this.getnavViewName();
+    this.getNavViewName();
   },
   methods: {
     switchNavItem(event) {
       this.store.filesTag = event.target.innerText;
     },
-    getnavViewName() {
+    getNavViewName() {
       this.navViewName = this.$route.name.toUpperCase();
     },
+    async showAlert() {
+      const customClass = {
+        htmlContainer: '!w-[564px]',
+        title: '!text-xl !font-semibold !mb-2',
+        htmlContainer: '!text-sm !font-normal !h-full !mb-4 !leading-5',
+        inputLabel: '!text-sm !font-normal',
+        input: '!h-8 !text-sm !font-normal !shadow-inner !shadow-black !border-neutral-200',
+        validationMessage: '!bg-neutral-10 !text-danger',
+        confirmButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px]',
+        cancelButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] ',
+      };
+
+      // 先判斷有沒有 filter Id，有就儲存 return，沒有就往下走
+
+      // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔
+      if(!this.allMapDataStore.tempFilterId) return this.$toast.error('Unable to overwrite original file.');
+
+     // 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
+      const { value, isConfirmed } = await this.$swal({
+        title: 'SAVE NEW FILTER',
+        input: 'text',
+        inputPlaceholder: 'Enter Filter Name.',
+        inputValue: this.sweetVal,
+        inputValidator: (value) => {
+          if (!value) return 'You need to write something!';
+          this.sweetVal = value;
+        },
+        icon: 'info',
+        iconHtml: '<span class="material-symbols-outlined text-[58px]">cloud_upload</span>',
+        iconColor: '#0099FF',
+        reverseButtons:true,
+        confirmButtonColor: '#0099FF',
+        showCancelButton: true,
+        cancelButtonColor: '#94a3b8',
+        customClass: customClass,
+      });
+      // 存檔成功
+      if(isConfirmed){
+        // 打API
+        let logId = this.$route.params.logId;
+        const api = `/api/filters?log_id=${logId}`;
+        let createFilterObj = {
+          name: value,
+          rules: this.allMapDataStore.postRuleData
+        };
+
+        try {
+          const response = await this.axios.post(api, createFilterObj)
+          let createFilterId = response.data.id;
+
+        }catch(error) {
+          console.dir(error);
+        }
+      }
+      if (value) {
+        await this.$swal({
+          title: 'SAVE COMPLETE',
+          html: `<span class="text-primary">${value}</span> has been saved in Lucia.`,
+          showConfirmButton: false,
+          icon: 'success',
+          iconColor: '#0099FF',
+          customClass: customClass
+        })
+      };
+      // 有 aplly all 的話，是否存檔? 是:另存新檔或存檔 不是:離開
+      const result = await this.$swal({
+        title: 'ARE YOU SURE TO LEAVE MAP?',
+        html: 'Filter settings have not been saved.</br>Click “Save as” to save filtered results, “OK” to leave map.',
+        icon: 'warning',
+        iconColor: '#FF3366',
+        reverseButtons:true,
+        confirmButtonText: 'Save as',
+        confirmButtonColor: '#FF3366',
+        showCancelButton: true,
+        cancelButtonText: 'OK',
+        cancelButtonColor: '#94a3b8',
+        customClass: customClass
+      })
+      if(result.isConfirmed){
+        // 有 createFilterId 直接存檔
+        // 跳存檔成功 model
+        console.log('存檔');
+      }else if(result.dismiss === 'cancel'){
+        console.log('離開 discover');
+      }else if(result.dismiss === 'backdrop'){
+        console.log('停留在原本的頁面');
+      };
+      // 最後清空
+      this.sweetVal = '';
+    }
   },
 }
 </script>
diff --git a/src/main.js b/src/main.js
index b05d3cf..bb10b85 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,10 +12,12 @@ import cytoscape from 'cytoscape';
 import dagre from 'cytoscape-dagre';
 import popper from 'cytoscape-popper';
 import draggable from 'vuedraggable';
+import VueSweetalert2 from 'vue-sweetalert2';
 
 // import CSS
 import "./assets/main.css";
 import 'vue-toast-notification/dist/theme-sugar.css';
+import 'sweetalert2/dist/sweetalert2.min.css';
 
 // import PrimeVue
 import PrimeVue from 'primevue/config';
@@ -61,6 +63,7 @@ cytoscape.use( popper );
 app.use(pinia);
 app.use(router);
 app.use(VueAxios, axios);
+app.use(VueSweetalert2);
 app.use(ToastPlugin, { // use `this.$toast` in Vue.js
   position: 'bottom',
   duration: 3000,
diff --git a/src/stores/files.js b/src/stores/files.js
index 3f65303..39a7d5c 100644
--- a/src/stores/files.js
+++ b/src/stores/files.js
@@ -71,7 +71,7 @@ export default defineStore('filesStore', {
           o.fileType = "Log";
           o.ownerName = o.owner.name;
           o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:MM');
-          o.accessed_at = moment(o.accessed_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;
           return this.allEventLog
         })
         if(this.httpStatus < 300) loading.isLoading = false;
@@ -102,7 +102,7 @@ export default defineStore('filesStore', {
           o.fileType = "Filter";
           o.ownerName = o.owner.name;
           o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:MM');
-          o.accessed_at = moment(o.accessed_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) {
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index 3615a33..553679f 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -120,7 +120,7 @@
        */
       recentlyUsedFiles: function() {
         let recentlyUsedFiles = Array.from(this.store.allFiles);
-        recentlyUsedFiles.filter(item => item.accessed_at !== null);
+        recentlyUsedFiles = recentlyUsedFiles.filter(item => item.accessed_at !== null);
         recentlyUsedFiles.sort((x, y) => new Date(y.accessed_at) - new Date(x.accessed_at));
         return recentlyUsedFiles;
       },
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index 9110766..e475d25 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -31,12 +31,27 @@ export default {
     return { checkLogin, loadingStore, temporaryData, tempFilterId, postRuleData };
   },
   watch: {
-    $route: function(route) {
-      if(route.name !== 'Discover') {
+    $route: function(to, from) {
+      if(to.name !== 'Discover') {
         this.tempFilterId = null;
         this.temporaryData = []
         this.postRuleData = []
       }
+      // console.log(to, from);
+      // if(to.name === 'Discover'){
+      //   this.$swal({
+      //       title: '請問是否要離開頁面?',
+      //       showCancelButton: true,
+      //       confirmButtonText: '是',
+      //       cancelButtonText: '否',
+      //     }).then((result) => {
+      //       if (result.isConfirmed) {
+      //         window.history.back() // 或 window.close()
+      //       } else {
+      //         console.log('no')
+      //       }
+      //     })
+      // }
     }
   },
   components: {
@@ -55,5 +70,28 @@ export default {
      */
     this.checkLogin();
   },
+  beforeRouteUpdate(to, from, next) {
+    if (from.name === 'Discover') {
+      this.$swal({
+        title: '請問是否要離開頁面?',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: '是',
+        cancelButtonText: '否',
+      }).then((result) => {
+        if (result.isConfirmed) {
+          console.log('yes')
+          next()
+        } else {
+          console.log('no')
+          next(false)
+        }
+      })
+    } else {
+      next()
+    }
+  },
 };
 </script>
diff --git a/tailwind.config.js b/tailwind.config.js
index 991ca4f..6bdc6cd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,8 @@ module.exports = {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx,vue}",
-    "./src/**/**/*.{js,ts,jsx,tsx,vue}"],
+    "./src/**/**/*.{js,ts,jsx,tsx,vue}",
+    "./src/**/**/**/*.{js,ts,jsx,tsx,vue}"],
   theme: {
     colors: {
       transparent: 'transparent',