diff --git a/public/icon/C.png b/public/icon/C.png
deleted file mode 100644
index aa07fec..0000000
Binary files a/public/icon/C.png and /dev/null differ
diff --git a/public/icon/E1.png b/public/icon/E1.png
deleted file mode 100644
index d434aa5..0000000
Binary files a/public/icon/E1.png and /dev/null differ
diff --git a/public/icon/E2.png b/public/icon/E2.png
deleted file mode 100644
index edf9ee6..0000000
Binary files a/public/icon/E2.png and /dev/null differ
diff --git a/public/icon/E3.png b/public/icon/E3.png
deleted file mode 100644
index 70dcf6d..0000000
Binary files a/public/icon/E3.png and /dev/null differ
diff --git a/public/icon/E4-1.png b/public/icon/E4-1.png
deleted file mode 100644
index d5d452f..0000000
Binary files a/public/icon/E4-1.png and /dev/null differ
diff --git a/public/icon/EL.png b/public/icon/EL.png
deleted file mode 100644
index accba6c..0000000
Binary files a/public/icon/EL.png and /dev/null differ
diff --git a/public/icon/F1.png b/public/icon/F1.png
deleted file mode 100644
index fa1da1a..0000000
Binary files a/public/icon/F1.png and /dev/null differ
diff --git a/public/icon/L1.png b/public/icon/L1.png
deleted file mode 100644
index c94f5ab..0000000
Binary files a/public/icon/L1.png and /dev/null differ
diff --git a/public/icon/L2.png b/public/icon/L2.png
deleted file mode 100644
index 82884af..0000000
Binary files a/public/icon/L2.png and /dev/null differ
diff --git a/public/icon/M1.png b/public/icon/M1.png
deleted file mode 100644
index 4f6cf25..0000000
Binary files a/public/icon/M1.png and /dev/null differ
diff --git a/public/icon/M10.png b/public/icon/M10.png
deleted file mode 100644
index 4c5c799..0000000
Binary files a/public/icon/M10.png and /dev/null differ
diff --git a/public/icon/M12.png b/public/icon/M12.png
deleted file mode 100644
index fb9cd38..0000000
Binary files a/public/icon/M12.png and /dev/null differ
diff --git a/public/icon/M5-2.png b/public/icon/M5-2.png
deleted file mode 100644
index 736489d..0000000
Binary files a/public/icon/M5-2.png and /dev/null differ
diff --git a/public/icon/M8.png b/public/icon/M8.png
deleted file mode 100644
index f509702..0000000
Binary files a/public/icon/M8.png and /dev/null differ
diff --git a/public/icon/P.png b/public/icon/P.png
deleted file mode 100644
index 7905866..0000000
Binary files a/public/icon/P.png and /dev/null differ
diff --git a/public/icon/P1.png b/public/icon/P1.png
deleted file mode 100644
index b56f53d..0000000
Binary files a/public/icon/P1.png and /dev/null differ
diff --git a/public/icon/PSC.png b/public/icon/PSC.png
deleted file mode 100644
index 85d0c31..0000000
Binary files a/public/icon/PSC.png and /dev/null differ
diff --git a/public/icon/R.png b/public/icon/R.png
deleted file mode 100644
index 91c66e5..0000000
Binary files a/public/icon/R.png and /dev/null differ
diff --git a/public/icon/W1.png b/public/icon/W1.png
deleted file mode 100644
index 390fc40..0000000
Binary files a/public/icon/W1.png and /dev/null differ
diff --git a/public/icon/W2.png b/public/icon/W2.png
deleted file mode 100644
index 66930ba..0000000
Binary files a/public/icon/W2.png and /dev/null differ
diff --git a/public/icon/W3.png b/public/icon/W3.png
deleted file mode 100644
index c10f720..0000000
Binary files a/public/icon/W3.png and /dev/null differ
diff --git a/src/components/alarm/AlarmDrawer.vue b/src/components/alarm/AlarmDrawer.vue
index a1993d1..9f6266a 100644
--- a/src/components/alarm/AlarmDrawer.vue
+++ b/src/components/alarm/AlarmDrawer.vue
@@ -38,7 +38,7 @@ const toggleErrIcon = () => {
     <div
       :class="
         twMerge(
-          'drawer-side translate-y-16 max-h-[95vh] overflow-x-hidden',
+          'drawer-side translate-y-20 max-h-[90vh] overflow-x-hidden',
           showErr ? 'overflow-y-scroll' : ''
         )
       "
diff --git a/src/components/customUI/Table.vue b/src/components/customUI/Table.vue
index ad84308..2b1335c 100644
--- a/src/components/customUI/Table.vue
+++ b/src/components/customUI/Table.vue
@@ -357,17 +357,17 @@ watch(
   @apply bg-normal px-8 py-4;
 }
 
-.content-box .content-decoration::before {
+/* .content-box .content-decoration::before {
   @apply absolute -top-3 -right-[10px] h-8 w-8 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background02.svg')] bg-center;
   content: "";
-}
+} */
 
 .content-box .content-decoration2::before {
   @apply absolute -bottom-1 -left-8 h-14 w-14 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background03.svg')] bg-center;
   content: "";
 }
 
-.content-box .content-decoration2::after {
+/* .content-box .content-decoration2::after {
   content: "";
   background: url(../../assets/img/table/content-box-background04.svg) center
     center;
@@ -378,5 +378,5 @@ watch(
   width: 50px;
   background-repeat: no-repeat;
   z-index: 2;
-}
+} */
 </style>
diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
index 5eb539b..8753ae6 100644
--- a/src/components/navbar/Navbar.vue
+++ b/src/components/navbar/Navbar.vue
@@ -92,12 +92,11 @@ const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;
               class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-32 bg-[#4c625e] border text-center"
             >
               <li class="text-white">
-                <router-link
-                  to="logout"
-                  type="link"
+                <a
+                  href="/logout"
                   class="flex flex-col justify-center items-center"
-                  >{{ $t("sign_out") }}</router-link
-                >
+                  >{{ $t("sign_out") }}
+                </a>
               </li>
             </ul>
           </div>
diff --git a/src/components/navbar/NavbarLang.vue b/src/components/navbar/NavbarLang.vue
index 7de7648..7595e8b 100644
--- a/src/components/navbar/NavbarLang.vue
+++ b/src/components/navbar/NavbarLang.vue
@@ -17,23 +17,25 @@ const toggleLanguage = (lang) => {
       type="button"
       class="flex flex-col justify-center items-center btn-group"
     >
-      <span
-        :class="`fi fi-${locale} fis text-3xl rounded-full border-1 border-white`"
-      ></span>
+      <font-awesome-icon
+        :icon="['fas', 'globe']"
+        size="2x"
+        class="text-white w-10 m-auto"
+      />
       <span class="text-white">{{ $t("language") }}</span>
     </button>
     <ul
       tabindex="0"
-      class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-36 bg-[#4c625e] border text-center"
+      class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-28 bg-[#4c625e] border text-center"
     >
       <li class="text-white" @click="toggleLanguage('tw')">
-        <span><span class="fi fi-tw"></span>繁體中文</span>
+        <span> 繁體中文</span>
       </li>
       <li class="text-white" @click="toggleLanguage('cn')">
-        <span><span class="fi fi-cn"></span>简体中文</span>
+        <span> 简体中文</span>
       </li>
       <li class="text-white" @click="toggleLanguage('us')">
-        <span><span class="fi fi-us"></span>English</span>
+        <span> English</span>
       </li>
     </ul>
   </div>
diff --git a/src/fontawsomeIconRegister.js b/src/fontawsomeIconRegister.js
index 2e75f12..4d6b408 100644
--- a/src/fontawsomeIconRegister.js
+++ b/src/fontawsomeIconRegister.js
@@ -56,6 +56,7 @@ import {
   faWind,
   faEye,
   faEyeSlash,
+  faGlobe
 } from "@fortawesome/free-solid-svg-icons";
 
 /* add icons to the library */
@@ -112,7 +113,8 @@ library.add(
   faCar,
   faWind,
   faEye,
-  faEyeSlash
+  faEyeSlash,
+  faGlobe
 );
 
 export default library;
diff --git a/src/router/index.js b/src/router/index.js
index cdd85f8..9ba9b6d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -94,16 +94,6 @@ const router = createRouter({
       name: "mytestfile",
       component: Test,
     },
-    {
-      path: "/logout",
-      name: "logout",
-      beforeEnter: (to, from, next) => {
-        const auth = useUserInfoStore();
-        document.cookie = "JWT-Authorization="; 
-        auth.user.token = ""; 
-        next({ path: "/login", replace: true });
-      },
-    },
   ],
 });
 
@@ -115,6 +105,12 @@ router.beforeEach(async (to, from, next) => {
   const auth = useUserInfoStore();
   const token = useGetCookie("JWT-Authorization");
 
+  if (to.path === "/logout") {
+    document.cookie = "JWT-Authorization=";
+    auth.user.token = "";
+    next({ path: "/login" });
+  }
+
   if ((authRequired && !token) || to.path === "/") {
     auth.user.token = "";
     next({ path: "/login" });
diff --git a/src/views/alert/AlertManagement.vue b/src/views/alert/AlertManagement.vue
index 55d9e63..5db1aaa 100644
--- a/src/views/alert/AlertManagement.vue
+++ b/src/views/alert/AlertManagement.vue
@@ -40,9 +40,14 @@ watch(locale, () => {
 const activeTab = computed(() => {
   return items.value.find(({ active }) => active);
 });
+
+const activeTitle = computed(() => {
+  return activeTab.value ? activeTab.value.title : '';
+});
 </script>
 
 <template>
+  <h1 class="text-2xl font-extrabold mb-2">{{ activeTitle }}</h1>
   <ButtonGroup
     :items="items"
     :withLine="true"
diff --git a/src/views/alert/components/AlertQuery/AlertQuery.vue b/src/views/alert/components/AlertQuery/AlertQuery.vue
index d9596d9..a40f39d 100644
--- a/src/views/alert/components/AlertQuery/AlertQuery.vue
+++ b/src/views/alert/components/AlertQuery/AlertQuery.vue
@@ -162,7 +162,6 @@ provide("alert_table", {
 </script>
 
 <template>
-  <h1 class="text-2xl font-extrabold mb-2">{{ $t("alert.query_title") }}</h1>
   <AlertTableModal :editRecord="editRecord" />
   <div>
     <AlertSearch />
diff --git a/src/views/alert/components/AlertSetting/AlertSetting.vue b/src/views/alert/components/AlertSetting/AlertSetting.vue
index b1b1d66..34136fe 100644
--- a/src/views/alert/components/AlertSetting/AlertSetting.vue
+++ b/src/views/alert/components/AlertSetting/AlertSetting.vue
@@ -26,7 +26,6 @@ provide("notify_table", { noticeList });
 </script>
 
 <template>
-  <h1 class="text-2xl font-extrabold mb-2">{{ $t("alert.setting_title") }}</h1>
   <div>
     <AlertSubList />
     <AlertOutliersTable />
diff --git a/src/views/dashboard/components/DashboardSysCard.vue b/src/views/dashboard/components/DashboardSysCard.vue
index 39fb30e..5c0a7a0 100644
--- a/src/views/dashboard/components/DashboardSysCard.vue
+++ b/src/views/dashboard/components/DashboardSysCard.vue
@@ -1,25 +1,132 @@
 <script setup>
 import { ref } from "vue";
-
+import { useRouter } from "vue-router";
+const router = useRouter();
 // 假資料
 const mockData = ref([
-  { title: "Elevator system", icon: "building", isError: false },
-  { title: "Air Conditioning System", icon: "fan", isError: false },
-  { title: "Environmental sensing equipment", icon: "temperature-high", isError: false },
-  { title: "Lighting system", icon: "lightbulb", isError: false },
-  { title: "Meter system", icon: "bolt", isError: false },
-  { title: "High voltage switchboard", icon: "charging-station", isError: false },
-  { title: "Low voltage switchboard", icon: "charging-station", isError: false },
-  { title: "Water supply system", icon: "tint", isError: false },
-  { title: "Sewage and wastewater equipment", icon: "water", isError: false },
-  { title: "Emergency generator", icon: "car-battery", isError: false },
-  { title: "Fire Equipment", icon: "fire-extinguisher", isError: false },
-  { title: "CCTV system", icon: "video", isError: true },
-  { title: "Access control system", icon: "door-open", isError: false },
-  { title: "Shutdown system", icon: "car", isError: false },
-  { title: "Emergency rescue system", icon: "exclamation-triangle", isError: true },
-  { title: "Air supply and exhaust system", icon: "wind", isError: false },
+  {
+    title: "Air Detection System",
+    icon: "temperature-high",
+    isError: false,
+    main_system_tag: "Dust",
+    sub_system_tag: "EM",
+  },
+  {
+    title: "Lighting System",
+    icon: "lightbulb",
+    isError: false,
+    main_system_tag: "LS",
+    sub_system_tag: "ECLS",
+  },
+  {
+    title: "Air Condition System",
+    icon: "fan",
+    isError: false,
+    main_system_tag: "ME",
+    sub_system_tag: "TH",
+  },
+  {
+    title: "Electricity System",
+    icon: "bolt",
+    isError: false,
+    main_system_tag: "EE",
+    sub_system_tag: "ECP3",
+  },
+  {
+    title: "Elevator system",
+    icon: "building",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
+  {
+    title: "High voltage switchboard",
+    icon: "charging-station",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
+  {
+    title: "Low voltage switchboard",
+    icon: "charging-station",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
+  {
+    title: "Water supply system",
+    icon: "tint",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
+  {
+    title: "Sewage and wastewater equipment",
+    icon: "water",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
+  {
+    title: "Emergency generator",
+    icon: "car-battery",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
+  {
+    title: "Fire Equipment",
+    icon: "fire-extinguisher",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
+  {
+    title: "CCTV system",
+    icon: "video",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
+  {
+    title: "Access control system",
+    icon: "door-open",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
+  {
+    title: "Shutdown system",
+    icon: "car",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
+  {
+    title: "Emergency rescue system",
+    icon: "exclamation-triangle",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
+  {
+    title: "Air supply and exhaust system",
+    icon: "wind",
+    isError: false,
+    main_system_tag: null,
+    sub_system_tag: null,
+  },
 ]);
+
+const navigateToSubSystem = (mainSystemId, subSystemId) => {
+  router.push({
+    name: "sub_system",
+    params: {
+      main_system_id: mainSystemId,
+      sub_system_id: subSystemId,
+    },
+  });
+};
 </script>
 
 <template>
@@ -27,7 +134,11 @@ const mockData = ref([
     <div
       v-for="(item, index) in mockData"
       :key="index"
-      class="w-full sm:w-1/2 lg:w-1/4 relative my-2"
+      :class="[
+    'w-full sm:w-1/2 lg:w-1/4 relative my-2 cursor-pointer',
+    item.sub_system_tag ? '' : 'grayscale opacity-70 cursor-not-allowed'
+  ]"
+      @click="navigateToSubSystem(item.main_system_tag, item.sub_system_tag)"
     >
       <img
         v-if="item.isError"
@@ -37,7 +148,10 @@ const mockData = ref([
 
       <div class="equipment-item">
         <div class="w-16">
-          <FontAwesomeIcon  class="text-2xl mt-1 m-auto" :icon="['fas', item.icon]"></FontAwesomeIcon>
+          <FontAwesomeIcon
+            class="text-2xl mt-1 m-auto"
+            :icon="['fas', item.icon]"
+          ></FontAwesomeIcon>
         </div>
         <div class="icon-text">
           <div class="text-slate-300 text-sm">{{ item.title }}</div>
diff --git a/src/views/graphManagement/components/GraphSidebar.vue b/src/views/graphManagement/components/GraphSidebar.vue
index 3c96135..864a2ff 100644
--- a/src/views/graphManagement/components/GraphSidebar.vue
+++ b/src/views/graphManagement/components/GraphSidebar.vue
@@ -211,7 +211,7 @@ onUnmounted(() => {
 <template>
   <div
     ref="sidebar"
-    class="border-2 border-info rounded-md py-2 px-4 sidebar"
+    class="custom-border py-2 px-4 sidebar"
     @contextmenu.prevent.stop="onAddRightClick"
   >
     <Collapse