diff --git a/src/components/index.ts b/src/components/index.ts
index f4c61579b54be..f26d2e90315c6 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,10 +8,10 @@ import Chart from './chart/Chart.vue';
 import Metric from './chart/Metric.vue';
 import ContextMenu from './context-menu/ContextMenu.vue';
 import ContextMenuList from './context-menu/ContextMenuList.vue';
+import * as date from './date/date';
 import DateRangePicker from './date/DateRangePicker.vue';
 import DateTimeRangePicker from './date/DateTimeRangePicker.vue';
 import RangePicker from './date/RangePicker.vue';
-import * as date from './date/date';
 import ConfirmDialog from './dialog/ConfirmDialog.vue';
 import CreateEditDialog from './dialog/CreateEditDialog.vue';
 import Dialog from './dialog/Dialog.vue';
@@ -34,6 +34,7 @@ import FileActions from './file/FileActions.vue';
 import FileDiff from './file/FileDiff.vue';
 import FileEditor from './file/FileEditor.vue';
 import FileEditorCreateWithAiDialog from './file/FileEditorCreateWithAiDialog.vue';
+import * as fileEditorDropZone from './file/fileEditorDropZone';
 import FileEditorNavMenu from './file/FileEditorNavMenu.vue';
 import FileEditorNavMenuContextMenu from './file/FileEditorNavMenuContextMenu.vue';
 import FileEditorNavTabs from './file/FileEditorNavTabs.vue';
@@ -43,16 +44,15 @@ import FileEditorSettingsDialog from './file/FileEditorSettingsDialog.vue';
 import FileTab from './file/FileTab.vue';
 import FileUpload from './file/FileUpload.vue';
 import UploadFilesDialog from './file/UploadFilesDialog.vue';
-import * as fileEditorDropZone from './file/fileEditorDropZone';
+import * as filter from './filter/filter';
 import FilterCondition from './filter/FilterCondition.vue';
 import FilterConditionList from './filter/FilterConditionList.vue';
 import FilterInput from './filter/FilterInput.vue';
 import FilterSelect from './filter/FilterSelect.vue';
-import * as filter from './filter/filter';
 import Form from './form/Form.vue';
 import FormItem from './form/FormItem.vue';
-import FormTableField from './form/FormTableField.vue';
 import * as formTable from './form/formTable';
+import FormTableField from './form/FormTableField.vue';
 import useForm from './form/useForm';
 import CreateEditGitDialog from './git/CreateEditGitDialog.vue';
 import CreateGitBranchDialog from './git/CreateGitBranchDialog.vue';
@@ -69,11 +69,10 @@ import GitStatus from './git/GitStatus.vue';
 import UploadGitFilesDialog from './git/UploadGitFilesDialog.vue';
 import useGit from './git/useGit';
 import AtomMaterialIcon from './icon/AtomMaterialIcon.vue';
+import * as icon from './icon/icon';
 import Icon from './icon/Icon.vue';
 import MenuItemIcon from './icon/MenuItemIcon.vue';
-import * as icon from './icon/icon';
 import InputList from './input/InputList.vue';
-import LexicalEditor from './lexical/LexicalEditor.vue';
 import BlockOptionsDropdownList from './lexical/components/BlockOptionsDropdownList.vue';
 import DropdownButton from './lexical/components/DropdownButton.vue';
 import FloatLinkEditor from './lexical/components/FloatLinkEditor.vue';
@@ -89,6 +88,7 @@ import useLexicalList from './lexical/composables/useLexicalList';
 import useLexicalMounted from './lexical/composables/useLexicalMounted';
 import useRichTextSetup from './lexical/composables/useRichTextSetup';
 import useVariableSetup from './lexical/composables/useVariableSetup';
+import LexicalEditor from './lexical/LexicalEditor.vue';
 import * as ImageNode from './lexical/nodes/ImageNode';
 import * as VariableNode from './lexical/nodes/VariableNode';
 import LexicalAutoFocusPlugin from './lexical/plugins/LexicalAutoFocusPlugin.vue';
@@ -152,6 +152,12 @@ import useSpider from './spider/useSpider';
 import Switch from './switch/Switch.vue';
 import ActionTab from './tab/ActionTab.vue';
 import Tab from './tab/Tab.vue';
+import * as action from './table/action';
+import * as column from './table/column';
+import * as data from './table/data';
+import * as header from './table/header';
+import * as pagination from './table/pagination';
+import * as store from './table/store';
 import Table from './table/Table.vue';
 import TableActions from './table/TableActions.vue';
 import TableCell from './table/TableCell.vue';
@@ -161,12 +167,6 @@ import TableHeaderAction from './table/TableHeaderAction.vue';
 import TableHeaderDialog from './table/TableHeaderDialog.vue';
 import TableHeaderDialogFilter from './table/TableHeaderDialogFilter.vue';
 import TableHeaderDialogSort from './table/TableHeaderDialogSort.vue';
-import * as action from './table/action';
-import * as column from './table/column';
-import * as data from './table/data';
-import * as header from './table/header';
-import * as pagination from './table/pagination';
-import * as store from './table/store';
 import CheckTag from './tag/CheckTag.vue';
 import CheckTagGroup from './tag/CheckTagGroup.vue';
 import LinkTag from './tag/LinkTag.vue';
@@ -199,10 +199,10 @@ export {
   Metric as ClMetric,
   ContextMenu as ClContextMenu,
   ContextMenuList as ClContextMenuList,
+  date as date,
   DateRangePicker as ClDateRangePicker,
   DateTimeRangePicker as ClDateTimeRangePicker,
   RangePicker as ClRangePicker,
-  date as date,
   ConfirmDialog as ClConfirmDialog,
   CreateEditDialog as ClCreateEditDialog,
   Dialog as ClDialog,
@@ -225,6 +225,7 @@ export {
   FileDiff as ClFileDiff,
   FileEditor as ClFileEditor,
   FileEditorCreateWithAiDialog as ClFileEditorCreateWithAiDialog,
+  fileEditorDropZone as fileEditorDropZone,
   FileEditorNavMenu as ClFileEditorNavMenu,
   FileEditorNavMenuContextMenu as ClFileEditorNavMenuContextMenu,
   FileEditorNavTabs as ClFileEditorNavTabs,
@@ -234,16 +235,15 @@ export {
   FileTab as ClFileTab,
   FileUpload as ClFileUpload,
   UploadFilesDialog as ClUploadFilesDialog,
-  fileEditorDropZone as fileEditorDropZone,
+  filter as filter,
   FilterCondition as ClFilterCondition,
   FilterConditionList as ClFilterConditionList,
   FilterInput as ClFilterInput,
   FilterSelect as ClFilterSelect,
-  filter as filter,
   Form as ClForm,
   FormItem as ClFormItem,
-  FormTableField as ClFormTableField,
   formTable as formTable,
+  FormTableField as ClFormTableField,
   useForm as useForm,
   CreateEditGitDialog as ClCreateEditGitDialog,
   CreateGitBranchDialog as ClCreateGitBranchDialog,
@@ -260,11 +260,10 @@ export {
   UploadGitFilesDialog as ClUploadGitFilesDialog,
   useGit as useGit,
   AtomMaterialIcon as ClAtomMaterialIcon,
+  icon as icon,
   Icon as ClIcon,
   MenuItemIcon as ClMenuItemIcon,
-  icon as icon,
   InputList as ClInputList,
-  LexicalEditor as ClLexicalEditor,
   BlockOptionsDropdownList as ClBlockOptionsDropdownList,
   DropdownButton as ClDropdownButton,
   FloatLinkEditor as ClFloatLinkEditor,
@@ -280,6 +279,7 @@ export {
   useLexicalMounted as useLexicalMounted,
   useRichTextSetup as useRichTextSetup,
   useVariableSetup as useVariableSetup,
+  LexicalEditor as ClLexicalEditor,
   ImageNode as ImageNode,
   VariableNode as VariableNode,
   LexicalAutoFocusPlugin as ClLexicalAutoFocusPlugin,
@@ -343,6 +343,12 @@ export {
   Switch as ClSwitch,
   ActionTab as ClActionTab,
   Tab as ClTab,
+  action as action,
+  column as column,
+  data as data,
+  header as header,
+  pagination as pagination,
+  store as store,
   Table as ClTable,
   TableActions as ClTableActions,
   TableCell as ClTableCell,
@@ -352,12 +358,6 @@ export {
   TableHeaderDialog as ClTableHeaderDialog,
   TableHeaderDialogFilter as ClTableHeaderDialogFilter,
   TableHeaderDialogSort as ClTableHeaderDialogSort,
-  action as action,
-  column as column,
-  data as data,
-  header as header,
-  pagination as pagination,
-  store as store,
   CheckTag as ClCheckTag,
   CheckTagGroup as ClCheckTagGroup,
   LinkTag as ClLinkTag,
diff --git a/src/components/nav/NavTabs.vue b/src/components/nav/NavTabs.vue
index 14dd995a73562..3d3b9eabd22d7 100644
--- a/src/components/nav/NavTabs.vue
+++ b/src/components/nav/NavTabs.vue
@@ -1,21 +1,5 @@
 <script setup lang="ts">
-import {
-  TAB_NAME_OVERVIEW,
-  TAB_NAME_FILES,
-  TAB_NAME_GIT,
-  TAB_NAME_TASKS,
-  TAB_NAME_SETTINGS,
-  TAB_NAME_SPIDERS,
-  TAB_NAME_DATA,
-  TAB_NAME_SCHEDULES,
-  TAB_NAME_LOGS,
-  TAB_NAME_DEPENDENCIES,
-  TAB_NAME_TRIGGERS,
-  TAB_NAME_TEMPLATE,
-  TAB_NAME_CHANGES,
-  TAB_NAME_MONITORING,
-} from '@/constants';
-import { translate } from '@/utils';
+import { getIconByNavItem, translate } from '@/utils';
 
 const t = translate;
 
@@ -45,42 +29,6 @@ const getClassName = (item: NavItem): string => {
   if (item.id) cls.push(item.id);
   return cls.join(' ');
 };
-
-const getIcon = (item: NavItem): Icon => {
-  if (item.icon) return item.icon;
-  switch (item.id) {
-    case TAB_NAME_OVERVIEW:
-      return ['fa', 'tachometer-alt'];
-    case TAB_NAME_FILES:
-      return ['fa', 'file-code'];
-    case TAB_NAME_GIT:
-      return ['fa', 'code-branch'];
-    case TAB_NAME_TASKS:
-      return ['fa', 'tasks'];
-    case TAB_NAME_SETTINGS:
-      return ['fa', 'cog'];
-    case TAB_NAME_SPIDERS:
-      return ['fa', 'spider'];
-    case TAB_NAME_DATA:
-      return ['fa', 'database'];
-    case TAB_NAME_SCHEDULES:
-      return ['fa', 'calendar-alt'];
-    case TAB_NAME_LOGS:
-      return ['fa', 'file-alt'];
-    case TAB_NAME_DEPENDENCIES:
-      return ['fa', 'cubes'];
-    case TAB_NAME_TRIGGERS:
-      return ['fa', 'bolt'];
-    case TAB_NAME_TEMPLATE:
-      return ['fa', 'file-code'];
-    case TAB_NAME_CHANGES:
-      return ['fa', 'code-commit'];
-    case TAB_NAME_MONITORING:
-      return ['fa', 'tachometer-alt'];
-    default:
-      return ['fa', 'circle'];
-  }
-};
 defineOptions({ name: 'ClNavTabs' });
 </script>
 
@@ -114,7 +62,7 @@ defineOptions({ name: 'ClNavTabs' });
             :offset="[10, 10]"
           >
             <div class="item-wrapper">
-              <cl-icon :icon="getIcon(item)" />
+              <cl-icon :icon="getIconByNavItem(item)" />
               <span class="label">{{ item.title }}</span>
             </div>
           </el-badge>
diff --git a/src/components/tab/Tab.vue b/src/components/tab/Tab.vue
index 765f06a1cb57c..0b30bb75829dd 100644
--- a/src/components/tab/Tab.vue
+++ b/src/components/tab/Tab.vue
@@ -3,8 +3,7 @@ import { computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { Close } from '@element-plus/icons-vue';
-import { translate } from '@/utils';
-import { getPrimaryPath } from '@/utils/path';
+import { getPrimaryPath, translate } from '@/utils';
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/i18n/lang/en/layouts.ts b/src/i18n/lang/en/layouts.ts
index 9236e68ba4dd8..79337766def2e 100644
--- a/src/i18n/lang/en/layouts.ts
+++ b/src/i18n/lang/en/layouts.ts
@@ -6,8 +6,8 @@ const layouts: LLayouts = {
       disclaimer: 'Disclaimer',
     },
     sidebar: {
-      collapse: 'Collapse',
-      expand: 'Expand',
+      collapse: 'Collapse Sidebar',
+      expand: 'Expand Sidebar',
     },
   },
   detailLayout: {
@@ -20,6 +20,101 @@ const layouts: LLayouts = {
       },
     },
   },
+  routes: {
+    home: 'Home',
+    nodes: {
+      title: 'Nodes',
+      tabs: {
+        overview: 'Overview',
+        tasks: 'Tasks',
+        monitoring: 'Monitoring',
+      },
+    },
+    projects: {
+      title: 'Projects',
+      tabs: {
+        overview: 'Overview',
+        spiders: 'Spiders',
+      },
+    },
+    spiders: {
+      title: 'Spiders',
+      tabs: {
+        overview: 'Overview',
+        files: 'Files',
+        tasks: 'Tasks',
+        schedules: 'Schedules',
+        data: 'Data',
+        settings: 'Settings',
+        dependencies: 'Dependencies',
+      },
+    },
+    tasks: {
+      title: 'Tasks',
+      tabs: {
+        overview: 'Overview',
+        logs: 'Logs',
+        data: 'Data',
+      },
+    },
+    schedules: {
+      title: 'Schedules',
+      tabs: {
+        overview: 'Overview',
+        tasks: 'Tasks',
+      },
+    },
+    users: {
+      title: 'Users',
+      tabs: {
+        overview: 'Overview',
+      },
+    },
+    tokens: {
+      title: 'Tokens',
+    },
+    dependencies: {
+      title: 'Dependencies',
+      settings: 'Settings',
+      lang: {
+        python: 'Python',
+        node: 'Node',
+      },
+    },
+    notifications: {
+      title: 'Notifications',
+      tabs: {
+        settings: 'Settings',
+        templates: 'Templates',
+      },
+    },
+    gits: {
+      title: 'Git Repo',
+      tabs: {
+        overview: 'Overview',
+        files: 'Files',
+        logs: 'Logs',
+        changes: 'Changes',
+        spiders: 'Spiders',
+      },
+    },
+    dataSources: {
+      title: 'Data Sources',
+      tabs: {
+        overview: 'Overview',
+      },
+    },
+    environments: {
+      title: 'Environments',
+    },
+    system: {
+      title: 'System',
+    },
+    misc: {
+      disclaimer: 'Disclaimer',
+      mySettings: 'My Settings',
+    },
+  },
 };
 
 export default layouts;
diff --git a/src/i18n/lang/zh/layouts.ts b/src/i18n/lang/zh/layouts.ts
index 9a03003379a92..9c3b90e081109 100644
--- a/src/i18n/lang/zh/layouts.ts
+++ b/src/i18n/lang/zh/layouts.ts
@@ -6,8 +6,8 @@ const layouts: LLayouts = {
       disclaimer: '免责声明',
     },
     sidebar: {
-      collapse: '折叠',
-      expand: '展开',
+      collapse: '折叠导航栏',
+      expand: '展开导航栏',
     },
   },
   detailLayout: {
@@ -20,6 +20,101 @@ const layouts: LLayouts = {
       },
     },
   },
+  routes: {
+    home: '首页',
+    nodes: {
+      title: '节点',
+      tabs: {
+        overview: '概览',
+        tasks: '任务',
+        monitoring: '监控',
+      },
+    },
+    projects: {
+      title: '项目',
+      tabs: {
+        overview: '概览',
+        spiders: '爬虫',
+      },
+    },
+    spiders: {
+      title: '爬虫',
+      tabs: {
+        overview: '概览',
+        files: '文件',
+        tasks: '任务',
+        schedules: '计划',
+        data: '数据',
+        settings: '设置',
+        dependencies: '依赖',
+      },
+    },
+    tasks: {
+      title: '任务',
+      tabs: {
+        overview: '概览',
+        logs: '日志',
+        data: '数据',
+      },
+    },
+    schedules: {
+      title: '计划',
+      tabs: {
+        overview: '概览',
+        tasks: '任务',
+      },
+    },
+    users: {
+      title: '用户',
+      tabs: {
+        overview: '概览',
+      },
+    },
+    tokens: {
+      title: '令牌',
+    },
+    dependencies: {
+      title: '依赖',
+      settings: '设置',
+      lang: {
+        python: 'Python',
+        node: 'Node',
+      },
+    },
+    notifications: {
+      title: '通知',
+      tabs: {
+        settings: '设置',
+        templates: '模板',
+      },
+    },
+    gits: {
+      title: 'Git 仓库',
+      tabs: {
+        overview: '概览',
+        files: '文件',
+        logs: '日志',
+        changes: '变更',
+        spiders: '爬虫',
+      },
+    },
+    dataSources: {
+      title: '数据源',
+      tabs: {
+        overview: '概览',
+      },
+    },
+    environments: {
+      title: '环境',
+    },
+    system: {
+      title: '系统',
+    },
+    misc: {
+      disclaimer: '免责声明',
+      mySettings: '我的设置',
+    },
+  },
 };
 
 export default layouts;
diff --git a/src/interfaces/i18n/layouts.d.ts b/src/interfaces/i18n/layouts.d.ts
index db91ebff323e3..d90ff3dd9a529 100644
--- a/src/interfaces/i18n/layouts.d.ts
+++ b/src/interfaces/i18n/layouts.d.ts
@@ -21,5 +21,100 @@ export declare global {
         };
       };
     };
+    routes: {
+      home: string;
+      nodes: {
+        title: string;
+        tabs: {
+          overview: string;
+          tasks: string;
+          monitoring: string;
+        };
+      };
+      projects: {
+        title: string;
+        tabs: {
+          overview: string;
+          spiders: string;
+        };
+      };
+      spiders: {
+        title: string;
+        tabs: {
+          overview: string;
+          files: string;
+          tasks: string;
+          schedules: string;
+          data: string;
+          settings: string;
+          dependencies: string;
+        };
+      };
+      tasks: {
+        title: string;
+        tabs: {
+          overview: string;
+          logs: string;
+          data: string;
+        };
+      };
+      schedules: {
+        title: string;
+        tabs: {
+          overview: string;
+          tasks: string;
+        };
+      };
+      users: {
+        title: string;
+        tabs: {
+          overview: string;
+        };
+      };
+      tokens: {
+        title: string;
+      };
+      dependencies: {
+        title: string;
+        settings: string;
+        lang: {
+          python: string;
+          node: string;
+        };
+      };
+      notification: {
+        title: string;
+        tabs: {
+          settings: string;
+          templates: string;
+        };
+      };
+      gits: {
+        title: string;
+        tabs: {
+          overview: string;
+          files: string;
+          logs: string;
+          changes: string;
+          spiders: string;
+        };
+      };
+      dataSources: {
+        title: string;
+        tabs: {
+          overview: string;
+        };
+      };
+      environments: {
+        title: string;
+      };
+      system: {
+        title: string;
+      };
+      misc: {
+        disclaimer: string;
+        mySettings: string;
+      };
+    };
   }
 }
diff --git a/src/interfaces/models/nav.d.ts b/src/interfaces/models/nav.d.ts
index 23bf7eb78d5c1..ad47a8483ec4d 100644
--- a/src/interfaces/models/nav.d.ts
+++ b/src/interfaces/models/nav.d.ts
@@ -1,5 +1,3 @@
-import { Component } from 'vue';
-
 export declare global {
   interface NavItem<T = any> extends TreeNode<NavItem<T>> {
     id: string;
diff --git a/src/interfaces/package/create-app.d.ts b/src/interfaces/package/create-app.d.ts
index 879db26deba61..69ae4c0b29892 100644
--- a/src/interfaces/package/create-app.d.ts
+++ b/src/interfaces/package/create-app.d.ts
@@ -16,9 +16,9 @@ export declare global {
     loadExport?: boolean;
     mount?: boolean | string;
     store?: Store;
-    rootRoutes?: Array<RouteRecordRaw>;
-    routes?: Array<RouteRecordRaw>;
-    allRoutes?: Array<RouteRecordRaw>;
+    rootRoutes?: Array<ExtendedRouterRecord>;
+    routes?: Array<ExtendedRouterRecord>;
+    allRoutes?: Array<ExtendedRouterRecord>;
     createRouterOptions?: CreateRouterOptions;
   }
 }
diff --git a/src/interfaces/router/index.d.ts b/src/interfaces/router/index.d.ts
index 5769bc6340d1e..84710c6e3a9e1 100644
--- a/src/interfaces/router/index.d.ts
+++ b/src/interfaces/router/index.d.ts
@@ -1,8 +1,16 @@
+import { RouteRecordRaw } from 'vue-router';
+
 export declare global {
   interface CreateRouterOptions {
     routerAuth?: RouterAuthOptions;
     routerStats?: RouterStatsOptions;
   }
+
+  interface ExtendedRouterRecord extends RouteRecordRaw {
+    title: string;
+    icon?: Icon;
+    children?: Array<ExtendedRouterRecord>;
+  }
 }
 
 export * from './auth';
diff --git a/src/layouts/NormalLayout.vue b/src/layouts/NormalLayout.vue
index 2e77dc0f9df0d..bedc2ebabb672 100644
--- a/src/layouts/NormalLayout.vue
+++ b/src/layouts/NormalLayout.vue
@@ -17,7 +17,6 @@ defineOptions({ name: 'ClNormalLayout' });
       class="container"
     >
       <cl-header />
-      <cl-tabs-view />
       <div class="container-body">
         <router-view />
       </div>
@@ -46,9 +45,7 @@ defineOptions({ name: 'ClNormalLayout' });
 
     .container-body {
       background-color: var(--cl-container-bg);
-      height: calc(
-        100vh - var(--cl-header-height) - var(--cl-tabs-view-height)
-      );
+      height: calc(100vh - var(--cl-header-height));
       overflow: auto;
     }
   }
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index ef2bc4836fac8..1a8d4b5f473bc 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ArrowDown } from '@element-plus/icons-vue';
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
 import { setGlobalLang } from '@/utils/i18n';
-import { isPro } from '@/utils';
+import { getNavMenuItems, isPro } from '@/utils';
 
 // i18n
 const { t, locale } = useI18n();
@@ -13,6 +13,8 @@ const { t, locale } = useI18n();
 // router
 const router = useRouter();
 
+const route = useRoute();
+
 // store
 const store = useStore();
 
@@ -70,13 +72,33 @@ const onClickMySettings = () => {
   router.push('/misc/my-settings');
 };
 
+const navMenuItems = computed<MenuItem[]>(() => getNavMenuItems(route.path));
+
 defineOptions({ name: 'ClHeader' });
 </script>
 
 <template>
   <div :class="sidebarCollapsed ? 'collapsed' : ''" class="header-container">
     <el-header height="var(--cl-header-height)" class="header">
-      <div class="left"></div>
+      <div class="left">
+        <el-breadcrumb :separator-icon="ArrowRight">
+          <el-breadcrumb-item to="/">
+            <cl-icon :icon="['fa', 'home']" />
+          </el-breadcrumb-item>
+          <el-breadcrumb-item
+            v-for="item in navMenuItems"
+            :key="item.path"
+            v-if="item?.path !== '/home'"
+          >
+            <router-link :to="item.path">
+              <cl-icon :icon="item.icon" />
+              {{ t(item.title) }}
+            </router-link>
+          </el-breadcrumb-item>
+        </el-breadcrumb>
+
+        <cl-tabs-view v-if="false" />
+      </div>
       <div class="right">
         <template v-if="!isPro()">
           <div class="item">
diff --git a/src/layouts/components/Sidebar.vue b/src/layouts/components/Sidebar.vue
index 1bc2fda81bd72..2091e1f0d625b 100644
--- a/src/layouts/components/Sidebar.vue
+++ b/src/layouts/components/Sidebar.vue
@@ -4,11 +4,8 @@ import { useStore } from 'vuex';
 import { useRoute, useRouter } from 'vue-router';
 import logo from '@/assets/svg/logo-white.svg';
 import logoIcon from '@/assets/svg/logo-icon-white.svg';
-import { getPrimaryPath } from '@/utils/path';
 import { useI18n } from 'vue-i18n';
-import urljoin from 'url-join';
-import { isPro } from '@/utils';
-import ClMenuItemIcon from '@/components/icon/MenuItemIcon.vue';
+import { getAllMenuItemPathMap, getPrimaryPath, isPro } from '@/utils';
 
 const router = useRouter();
 
@@ -32,34 +29,9 @@ const menuItems = computed<MenuItem[]>(
   () => store.getters['layout/sidebarMenuItems']
 );
 
-const getMenuItemPathMap = (
-  rootPath: string,
-  item: MenuItem
-): Map<string, string> => {
-  const paths = new Map<string, string>();
-  const itemPath = item.path?.startsWith('/')
-    ? item.path
-    : urljoin(rootPath, item.path || '');
-  paths.set(itemPath, rootPath);
-  if (item.children && item.children.length > 0) {
-    for (const subItem of item.children) {
-      getMenuItemPathMap(itemPath, subItem).forEach((parentPath, path) => {
-        paths.set(path, parentPath);
-      });
-    }
-  }
-  return paths;
-};
-
-const allMenuItemPathMap = computed<Map<string, string>>(() => {
-  const paths = new Map<string, string>();
-  for (const item of menuItems.value) {
-    getMenuItemPathMap('/', item).forEach((parentPath, path) => {
-      paths.set(path, parentPath);
-    });
-  }
-  return paths;
-});
+const allMenuItemPathMap = computed<Map<string, string>>(() =>
+  getAllMenuItemPathMap()
+);
 
 const activePath = computed<string>(() => {
   if (allMenuItemPathMap.value.has(route.path)) {
@@ -92,14 +64,6 @@ defineOptions({ name: 'ClSidebar' });
 </script>
 
 <template>
-  <!--  <span-->
-  <!--    :class="sidebarCollapsed ? 'collapsed' : ''"-->
-  <!--    class="sidebar-toggle"-->
-  <!--    @click="toggleSidebar"-->
-  <!--  >-->
-  <!--    <font-awesome-icon v-if="!sidebarCollapsed" :icon="['fas', 'outdent']" />-->
-  <!--    <font-awesome-icon v-else :icon="['fas', 'indent']" />-->
-  <!--  </span>-->
   <el-aside
     :class="sidebarCollapsed ? 'collapsed' : ''"
     class="sidebar"
@@ -155,16 +119,6 @@ defineOptions({ name: 'ClSidebar' });
     <!-- Footer -->
     <div class="sidebar-footer">
       <div class="el-menu-item" @click="toggleSidebar">
-        <cl-menu-item-icon
-          :item="{
-            title: sidebarCollapsed
-              ? t('layouts.components.sidebar.expand')
-              : t('layouts.components.sidebar.collapse'),
-            icon: sidebarCollapsed
-              ? ['fa', 'angles-right']
-              : ['fa', 'angles-left'],
-          }"
-        />
         <el-tooltip
           :content="
             sidebarCollapsed
@@ -173,13 +127,25 @@ defineOptions({ name: 'ClSidebar' });
           "
           :disabled="!sidebarCollapsed"
         >
-          <span v-if="!sidebarCollapsed" class="menu-item-title">
-            {{
-              sidebarCollapsed
-                ? t('layouts.components.sidebar.expand')
-                : t('layouts.components.sidebar.collapse')
-            }}
-          </span>
+          <div class="toggle-wrapper">
+            <cl-menu-item-icon
+              :item="{
+                title: sidebarCollapsed
+                  ? t('layouts.components.sidebar.expand')
+                  : t('layouts.components.sidebar.collapse'),
+                icon: sidebarCollapsed
+                  ? ['fa', 'angles-right']
+                  : ['fa', 'angles-left'],
+              }"
+            />
+            <span v-if="!sidebarCollapsed" class="menu-item-title">
+              {{
+                sidebarCollapsed
+                  ? t('layouts.components.sidebar.expand')
+                  : t('layouts.components.sidebar.collapse')
+              }}
+            </span>
+          </div>
         </el-tooltip>
       </div>
     </div>
@@ -190,7 +156,7 @@ defineOptions({ name: 'ClSidebar' });
 .sidebar {
   position: relative;
   width: var(--cl-sidebar-width);
-  overflow-x: hidden;
+  overflow: hidden;
   user-select: none;
   background-color: var(--cl-menu-bg);
 
@@ -335,14 +301,22 @@ defineOptions({ name: 'ClSidebar' });
     border-top: 1px solid rgba(0, 0, 0, 0.2);
 
     .el-menu-item {
+      width: var(--cl-sidebar-width);
       color: var(--cl-menu-text);
 
       &:hover {
         background-color: var(--cl-menu-hover);
       }
 
-      .menu-item-title {
-        margin-left: 6px;
+      .toggle-wrapper {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+
+        .menu-item-title {
+          margin-left: 6px;
+        }
       }
     }
   }
diff --git a/src/layouts/components/TabsView.vue b/src/layouts/components/TabsView.vue
index b39714fc08cbe..99f269b85d4c9 100644
--- a/src/layouts/components/TabsView.vue
+++ b/src/layouts/components/TabsView.vue
@@ -98,8 +98,6 @@ defineOptions({ name: 'ClTabsView' });
 
 <style lang="scss" scoped>
 .tabs-view {
-  padding: 10px 0;
-  border-bottom: 1px solid var(--cl-tabs-view-border-color);
   background-color: var(--cl-tabs-view-bg);
   display: flex;
 }
@@ -108,8 +106,4 @@ defineOptions({ name: 'ClTabsView' });
 .tabs-view:deep(.draggable-item) {
   margin: 0 5px;
 }
-
-.tabs-view:deep(.draggable-item:first-child) {
-  margin-left: 10px;
-}
 </style>
diff --git a/src/layouts/content/detail/DetailLayout.vue b/src/layouts/content/detail/DetailLayout.vue
index 1510533a39f74..3e0c7b410e456 100644
--- a/src/layouts/content/detail/DetailLayout.vue
+++ b/src/layouts/content/detail/DetailLayout.vue
@@ -46,7 +46,6 @@ const {
   getForm,
   sidebarCollapsed,
   actionsCollapsed,
-  showActionsToggleTooltip,
   tabs: defaultTabs,
   contentContainerStyle,
   navActions,
@@ -54,7 +53,6 @@ const {
   onNavSidebarToggle,
   onNavTabsSelect,
   onNavTabsToggle,
-  onActionsToggle,
   onBack,
   onSave,
 } = useDetail(ns.value);
@@ -110,26 +108,7 @@ defineOptions({ name: 'ClDetailLayout' });
         class="nav-tabs"
         @select="onNavTabsSelect"
         @toggle="onNavTabsToggle"
-      >
-        <template #extra>
-          <el-tooltip
-            v-model="showActionsToggleTooltip"
-            :content="
-              actionsCollapsed
-                ? t('layouts.detailLayout.navTabs.toggle.tooltip.expand')
-                : t('layouts.detailLayout.navTabs.toggle.tooltip.collapse')
-            "
-          >
-            <div
-              :class="actionsCollapsed ? 'collapsed' : ''"
-              class="actions-toggle"
-              @click="onActionsToggle"
-            >
-              <font-awesome-icon :icon="['fa', 'angle-up']" class="icon" />
-            </div>
-          </el-tooltip>
-        </template>
-      </cl-nav-tabs>
+      />
       <cl-nav-actions
         ref="navActions"
         :collapsed="actionsCollapsed"
diff --git a/src/layouts/content/detail/useDetail.ts b/src/layouts/content/detail/useDetail.ts
index 16681c9b65653..49f8c10accf26 100644
--- a/src/layouts/content/detail/useDetail.ts
+++ b/src/layouts/content/detail/useDetail.ts
@@ -1,7 +1,7 @@
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { computed, watch, provide, ref } from 'vue';
-import { getRoutePathByDepth, getTabName } from '@/utils/route';
+import { getRoutePath, getTabName } from '@/utils/route';
 import { ElMessage } from 'element-plus';
 import { translate } from '@/utils/i18n';
 import { debounce } from '@/utils';
@@ -63,9 +63,7 @@ const useDetail = <T = BaseModel>(ns: ListStoreNamespace) => {
     };
   });
 
-  const primaryRoutePath = computed<string>(() =>
-    getRoutePathByDepth(route.path)
-  );
+  const primaryRoutePath = computed<string>(() => getRoutePath(route.path));
 
   const afterSave = computed<Function[]>(() => state.afterSave);
 
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
index 98e315c5d9ebc..31f4c535ff783 100644
--- a/src/layouts/index.ts
+++ b/src/layouts/index.ts
@@ -1,5 +1,4 @@
 import BlankLayout from './BlankLayout.vue';
-import NormalLayout from './NormalLayout.vue';
 import Header from './components/Header.vue';
 import Sidebar from './components/Sidebar.vue';
 import SidebarItem from './components/SidebarItem.vue';
@@ -9,10 +8,10 @@ import useDetail from './content/detail/useDetail';
 import ListLayout from './content/list/ListLayout.vue';
 import useList from './content/list/useList';
 import SimpleLayout from './content/simple/SimpleLayout.vue';
+import NormalLayout from './NormalLayout.vue';
 
 export {
   BlankLayout as ClBlankLayout,
-  NormalLayout as ClNormalLayout,
   Header as ClHeader,
   Sidebar as ClSidebar,
   SidebarItem as ClSidebarItem,
@@ -22,4 +21,5 @@ export {
   ListLayout as ClListLayout,
   useList as useList,
   SimpleLayout as ClSimpleLayout,
+  NormalLayout as ClNormalLayout,
 };
diff --git a/src/router/deps.ts b/src/router/deps.ts
index 0cf6c01398011..06742b4f55063 100644
--- a/src/router/deps.ts
+++ b/src/router/deps.ts
@@ -1,33 +1,45 @@
-import { RouteRecordRaw } from 'vue-router';
 import {
   ClDependencyNode,
   ClDependencyPython,
   ClDependencySettings,
 } from '@/views';
+import { translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'deps';
 
 export default [
   {
     name: 'Deps',
-    path: `${endpoint}`,
+    path: endpoint,
+    title: t('layouts.routes.dependencies.title'),
+    icon: ['fa', 'puzzle-piece'],
     redirect: to => {
       return { path: to.path + '/settings' };
     },
+    children: [
+      {
+        name: 'DepsSettings',
+        path: 'settings',
+        title: t('layouts.routes.dependencies.settings'),
+        icon: ['fa', 'cog'],
+        component: async () => ClDependencySettings,
+      },
+      {
+        name: 'DepsPython',
+        path: 'python',
+        title: t('layouts.routes.dependencies.lang.python'),
+        icon: ['fab', 'python'],
+        component: async () => ClDependencyPython,
+      },
+      {
+        name: 'DepsNode',
+        path: 'node',
+        title: t('layouts.routes.dependencies.lang.node'),
+        icon: ['fab', 'node'],
+        component: async () => ClDependencyNode,
+      },
+    ],
   },
-  {
-    name: 'DepsSettings',
-    path: `${endpoint}/settings`,
-    component: async () => ClDependencySettings,
-  },
-  {
-    name: 'DepsPython',
-    path: `${endpoint}/python`,
-    component: async () => ClDependencyPython,
-  },
-  {
-    name: 'DepsNode',
-    path: `${endpoint}/node`,
-    component: async () => ClDependencyNode,
-  },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/ds.ts b/src/router/ds.ts
index b4dc4a50678d3..f32b810813cf4 100644
--- a/src/router/ds.ts
+++ b/src/router/ds.ts
@@ -1,10 +1,12 @@
-import { RouteRecordRaw } from 'vue-router';
 import { TAB_NAME_OVERVIEW } from '@/constants';
 import {
   ClDataSourceDetail,
   ClDataSourceDetailTabOverview,
   ClDataSourceList,
 } from '@/views';
+import { getIconByTabName, translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'data-sources';
 
@@ -12,6 +14,8 @@ export default [
   {
     name: 'DataSourceList',
     path: endpoint,
+    title: t('layouts.routes.dataSources.title'),
+    icon: ['fa', 'database'],
     component: async () => ClDataSourceList,
   },
   {
@@ -24,8 +28,10 @@ export default [
     children: [
       {
         path: TAB_NAME_OVERVIEW,
+        title: t('layouts.routes.dataSources.tabs.overview'),
+        icon: getIconByTabName(TAB_NAME_OVERVIEW),
         component: async () => ClDataSourceDetailTabOverview,
       },
     ],
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/environment.ts b/src/router/environment.ts
index 044980097de9c..4bc68e3eee734 100644
--- a/src/router/environment.ts
+++ b/src/router/environment.ts
@@ -1,5 +1,7 @@
-import { RouteRecordRaw } from 'vue-router';
 import { ClEnvironmentList } from '@/views';
+import { translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'environments';
 
@@ -7,6 +9,8 @@ export default [
   {
     name: 'EnvironmentList',
     path: endpoint,
+    title: t('layouts.routes.environments.title'),
+    icon: ['fa', 'percent'],
     component: async () => ClEnvironmentList,
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/git.ts b/src/router/git.ts
index 901f09cb3733b..46fba19ef9442 100644
--- a/src/router/git.ts
+++ b/src/router/git.ts
@@ -1,4 +1,3 @@
-import { RouteRecordRaw } from 'vue-router';
 import {
   TAB_NAME_OVERVIEW,
   TAB_NAME_FILES,
@@ -15,6 +14,9 @@ import {
   ClGitDetailTabSpiders,
   ClGitList,
 } from '@/views';
+import { getIconByTabName, translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'gits';
 
@@ -22,6 +24,8 @@ export default [
   {
     name: 'GitList',
     path: endpoint,
+    title: t('layouts.routes.gits.title'),
+    icon: ['fab', 'git'],
     component: async () => ClGitList,
   },
   {
@@ -34,24 +38,34 @@ export default [
     children: [
       {
         path: TAB_NAME_OVERVIEW,
+        title: t('layouts.routes.gits.tabs.overview'),
+        icon: getIconByTabName(TAB_NAME_OVERVIEW),
         component: async () => ClGitDetailTabOverview,
       },
       {
         path: TAB_NAME_FILES,
+        title: t('layouts.routes.gits.tabs.files'),
+        icon: getIconByTabName(TAB_NAME_FILES),
         component: async () => ClGitDetailTabFiles,
       },
       {
         path: TAB_NAME_LOGS,
+        title: t('layouts.routes.gits.tabs.logs'),
+        icon: getIconByTabName(TAB_NAME_LOGS),
         component: async () => ClGitDetailTabLogs,
       },
       {
         path: TAB_NAME_CHANGES,
+        title: t('layouts.routes.gits.tabs.changes'),
+        icon: getIconByTabName(TAB_NAME_CHANGES),
         component: async () => ClGitDetailTabChanges,
       },
       {
         path: TAB_NAME_SPIDERS,
+        title: t('layouts.routes.gits.tabs.spiders'),
+        icon: getIconByTabName(TAB_NAME_SPIDERS),
         component: async () => ClGitDetailTabSpiders,
       },
     ],
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/home.ts b/src/router/home.ts
index ae5aad1c02173..b3c935892c84f 100644
--- a/src/router/home.ts
+++ b/src/router/home.ts
@@ -1,5 +1,7 @@
-import { RouteRecordRaw } from 'vue-router';
 import { ClHome } from '@/views';
+import { translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'home';
 
@@ -7,6 +9,8 @@ export default [
   {
     name: 'Home',
     path: endpoint,
+    title: t('layouts.routes.home'),
+    icon: ['fa', 'home'],
     component: async () => ClHome,
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/index.ts b/src/router/index.ts
index 75f515db2ef80..6ec6b018a89e9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -24,7 +24,7 @@ import { initRouterAuth } from '@/router/hooks/auth';
 import { ROUTER_ROOT_NAME_ROOT } from '@/constants/router';
 import { ClNormalLayout } from '@/layouts';
 
-export function getDefaultRoutes(): Array<RouteRecordRaw> {
+export function getDefaultRoutes(): Array<ExtendedRouterRecord> {
   return [
     ...login,
     {
@@ -43,11 +43,11 @@ export function getDefaultRoutes(): Array<RouteRecordRaw> {
         ...token,
         ...deps,
         ...notification,
-        ...misc,
         ...git,
         ...ds,
         ...environment,
         ...system,
+        ...misc,
       ],
     },
   ];
@@ -153,13 +153,13 @@ export function getDefaultMenuItems(): MenuItem[] {
 }
 
 export function getRootRoute(
-  routes: Array<RouteRecordRaw>
+  routes: Array<ExtendedRouterRecord>
 ): RouteRecordRaw | undefined {
   return routes.find(r => r.name === ROUTER_ROOT_NAME_ROOT);
 }
 
 export function getRouteByName(
-  routes: Array<RouteRecordRaw>,
+  routes: Array<ExtendedRouterRecord>,
   name: string
 ): RouteRecordRaw | undefined {
   for (const route of routes) {
@@ -177,7 +177,7 @@ export function getRouteByName(
 }
 
 export function replaceRouteByName(
-  routes: Array<RouteRecordRaw>,
+  routes: Array<ExtendedRouterRecord>,
   name: string,
   component: any
 ) {
@@ -189,7 +189,7 @@ export function replaceRouteByName(
 
 export function addRoutes(
   route: RouteRecordRaw,
-  routes: Array<RouteRecordRaw>
+  routes: Array<ExtendedRouterRecord>
 ): void {
   if (!route.children) {
     route.children = [];
@@ -198,9 +198,9 @@ export function addRoutes(
 }
 
 export function createRouter(
-  rootRoutes?: Array<RouteRecordRaw>,
-  routes?: Array<RouteRecordRaw>,
-  allRoutes?: Array<RouteRecordRaw>,
+  rootRoutes?: Array<ExtendedRouterRecord>,
+  routes?: Array<ExtendedRouterRecord>,
+  allRoutes?: Array<ExtendedRouterRecord>,
   options?: CreateRouterOptions
 ): Router {
   // all routes
@@ -239,9 +239,9 @@ export function createRouter(
 let _router: Router;
 
 export function getRouter(
-  rootRoutes?: Array<RouteRecordRaw>,
-  routes?: Array<RouteRecordRaw>,
-  allRoutes?: Array<RouteRecordRaw>,
+  rootRoutes?: Array<ExtendedRouterRecord>,
+  routes?: Array<ExtendedRouterRecord>,
+  allRoutes?: Array<ExtendedRouterRecord>,
   options?: CreateRouterOptions
 ): Router {
   if (!_router) {
diff --git a/src/router/login.ts b/src/router/login.ts
index d54a3c9159ee6..9bb94a1b7df57 100644
--- a/src/router/login.ts
+++ b/src/router/login.ts
@@ -9,4 +9,4 @@ export default [
     path: endpoint,
     component: async () => ClLogin,
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/misc.ts b/src/router/misc.ts
index 4488bcb1d511f..d33d131775b3c 100644
--- a/src/router/misc.ts
+++ b/src/router/misc.ts
@@ -1,5 +1,7 @@
-import { RouteRecordRaw } from 'vue-router';
 import { ClDisclaimer, ClMySettings } from '@/views';
+import { translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'misc';
 
@@ -7,11 +9,15 @@ export default [
   {
     name: 'Disclaimer',
     path: `${endpoint}/disclaimer`,
+    title: t('layouts.routes.misc.disclaimer'),
+    icon: ['fa', 'file-signature'],
     component: async () => ClDisclaimer,
   },
   {
     name: 'MySettings',
     path: `${endpoint}/my-settings`,
+    title: t('layouts.routes.misc.mySettings'),
+    icon: ['fa', 'user-cog'],
     component: async () => ClMySettings,
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/node.ts b/src/router/node.ts
index fea8df2a8e4c7..b383c503dfe54 100644
--- a/src/router/node.ts
+++ b/src/router/node.ts
@@ -1,4 +1,3 @@
-import { RouteRecordRaw } from 'vue-router';
 import {
   TAB_NAME_MONITORING,
   TAB_NAME_OVERVIEW,
@@ -11,6 +10,9 @@ import {
   ClNodeDetailTabTasks,
   ClNodeList,
 } from '@/views';
+import { getIconByTabName, translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'nodes';
 
@@ -18,6 +20,8 @@ export default [
   {
     name: 'NodeList',
     path: endpoint,
+    title: t('layouts.routes.nodes.title'),
+    icon: ['fa', 'server'],
     component: async () => ClNodeList,
   },
   {
@@ -30,16 +34,22 @@ export default [
     children: [
       {
         path: TAB_NAME_OVERVIEW,
+        title: t('layouts.routes.nodes.tabs.overview'),
+        icon: getIconByTabName(TAB_NAME_OVERVIEW),
         component: async () => ClNodeDetailTabOverview,
       },
       {
         path: TAB_NAME_TASKS,
+        title: t('layouts.routes.nodes.tabs.tasks'),
+        icon: getIconByTabName(TAB_NAME_TASKS),
         component: async () => ClNodeDetailTabTasks,
       },
       {
         path: TAB_NAME_MONITORING,
+        title: t('layouts.routes.nodes.tabs.monitoring'),
+        icon: getIconByTabName(TAB_NAME_MONITORING),
         component: async () => ClNodeDetailTabMonitoring,
       },
     ],
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/notification.ts b/src/router/notification.ts
index 01241a15195d1..8de951cab0a6d 100644
--- a/src/router/notification.ts
+++ b/src/router/notification.ts
@@ -1,4 +1,3 @@
-import { RouteRecordRaw } from 'vue-router';
 import { TAB_NAME_OVERVIEW, TAB_NAME_TEMPLATE } from '@/constants';
 import {
   ClNotificationSettingDetail,
@@ -6,6 +5,9 @@ import {
   ClNotificationSettingDetailTabTemplate,
   ClNotificationSettingList,
 } from '@/views';
+import { getIconByTabName, translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'notifications';
 
@@ -13,11 +15,15 @@ export default [
   {
     name: 'NotificationSettingList',
     path: `${endpoint}/settings`,
+    title: t('layouts.routes.notifications.settings.title'),
+    icon: ['fa', 'envelope'],
     component: async () => ClNotificationSettingList,
   },
   {
     name: 'NotificationSettingDetail',
     path: `${endpoint}/settings/:id`,
+    title: t('layouts.routes.notifications.settings.title'),
+    icon: ['fa', 'envelope'],
     redirect: to => {
       return { path: to.path + '/' + TAB_NAME_OVERVIEW };
     },
@@ -25,12 +31,16 @@ export default [
     children: [
       {
         path: TAB_NAME_OVERVIEW,
+        title: t('layouts.routes.notifications.settings.tabs.overview'),
+        icon: getIconByTabName(TAB_NAME_OVERVIEW),
         component: async () => ClNotificationSettingDetailTabOverview,
       },
       {
         path: TAB_NAME_TEMPLATE,
+        title: t('layouts.routes.notifications.settings.tabs.template'),
+        icon: getIconByTabName(TAB_NAME_TEMPLATE),
         component: async () => ClNotificationSettingDetailTabTemplate,
       },
     ],
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/project.ts b/src/router/project.ts
index 87ac304fdd49d..54d448dff41d2 100644
--- a/src/router/project.ts
+++ b/src/router/project.ts
@@ -1,4 +1,3 @@
-import { RouteRecordRaw } from 'vue-router';
 import { TAB_NAME_OVERVIEW, TAB_NAME_SPIDERS } from '@/constants/tab';
 import {
   ClProjectDetail,
@@ -6,6 +5,9 @@ import {
   ClProjectDetailTabSpiders,
   ClProjectList,
 } from '@/views';
+import { getIconByTabName, translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'projects';
 
@@ -13,6 +15,8 @@ export default [
   {
     name: 'ProjectList',
     path: endpoint,
+    title: t('layouts.routes.projects.title'),
+    icon: ['fa', 'project-diagram'],
     component: async () => ClProjectList,
   },
   {
@@ -25,12 +29,16 @@ export default [
     children: [
       {
         path: TAB_NAME_OVERVIEW,
+        title: t('layouts.routes.projects.tabs.overview'),
+        icon: getIconByTabName(TAB_NAME_OVERVIEW),
         component: async () => ClProjectDetailTabOverview,
       },
       {
         path: TAB_NAME_SPIDERS,
+        title: t('layouts.routes.projects.tabs.spiders'),
+        icon: getIconByTabName(TAB_NAME_SPIDERS),
         component: async () => ClProjectDetailTabSpiders,
       },
     ],
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/schedule.ts b/src/router/schedule.ts
index b90f0c8d1b871..5cd2f1b661876 100644
--- a/src/router/schedule.ts
+++ b/src/router/schedule.ts
@@ -1,4 +1,3 @@
-import { RouteRecordRaw } from 'vue-router';
 import { TAB_NAME_OVERVIEW, TAB_NAME_TASKS } from '@/constants/tab';
 import {
   ClScheduleDetail,
@@ -6,16 +5,23 @@ import {
   ClScheduleDetailTabTasks,
   ClScheduleList,
 } from '@/views';
+import { getIconByTabName, translate } from '@/utils';
+
+const t = translate;
+
+const endpoint = 'schedules';
 
 export default [
   {
     name: 'ScheduleList',
-    path: 'schedules',
+    path: endpoint,
+    title: t('layouts.routes.schedules.title'),
+    icon: ['fa', 'clock'],
     component: async () => ClScheduleList,
   },
   {
     name: 'ScheduleDetail',
-    path: 'schedules/:id',
+    path: `${endpoint}/:id`,
     redirect: to => {
       return { path: to.path + '/' + TAB_NAME_OVERVIEW };
     },
@@ -23,12 +29,16 @@ export default [
     children: [
       {
         path: TAB_NAME_OVERVIEW,
+        title: t('layouts.routes.schedules.tabs.overview'),
+        icon: getIconByTabName(TAB_NAME_OVERVIEW),
         component: async () => ClScheduleDetailTabOverview,
       },
       {
         path: TAB_NAME_TASKS,
+        title: t('layouts.routes.schedules.tabs.tasks'),
+        icon: getIconByTabName(TAB_NAME_TASKS),
         component: async () => ClScheduleDetailTabTasks,
       },
     ],
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/spider.ts b/src/router/spider.ts
index ad6893d41357e..fa0bd3c0d7bb1 100644
--- a/src/router/spider.ts
+++ b/src/router/spider.ts
@@ -1,4 +1,3 @@
-import { RouteRecordRaw } from 'vue-router';
 import {
   TAB_NAME_DATA,
   TAB_NAME_DEPENDENCIES,
@@ -19,16 +18,23 @@ import {
   ClSpiderDetailTabTasks,
   ClSpiderList,
 } from '@/views';
+import { getIconByTabName, translate } from '@/utils';
+
+const t = translate;
 
 export default [
   {
     name: 'SpiderList',
     path: 'spiders',
+    title: t('layouts.routes.spiders.title'),
+    icon: ['fa', 'spider'],
     component: async () => ClSpiderList,
   },
   {
     name: 'SpiderDetail',
     path: 'spiders/:id',
+    title: t('layouts.routes.spiders.title'),
+    icon: ['fa', 'spider'],
     redirect: to => {
       return { path: to.path + '/' + TAB_NAME_OVERVIEW };
     },
@@ -36,32 +42,46 @@ export default [
     children: [
       {
         path: TAB_NAME_OVERVIEW,
+        title: t('layouts.routes.spiders.tabs.overview'),
+        icon: getIconByTabName(TAB_NAME_OVERVIEW),
         component: async () => ClSpiderDetailTabOverview,
       },
       {
         path: TAB_NAME_FILES,
+        title: t('layouts.routes.spiders.tabs.files'),
+        icon: getIconByTabName(TAB_NAME_FILES),
         component: async () => ClSpiderDetailTabFiles,
       },
       {
         path: TAB_NAME_TASKS,
+        title: t('layouts.routes.spiders.tabs.tasks'),
+        icon: getIconByTabName(TAB_NAME_TASKS),
         component: async () => ClSpiderDetailTabTasks,
       },
       {
         path: TAB_NAME_SCHEDULES,
+        title: t('layouts.routes.spiders.tabs.schedules'),
+        icon: getIconByTabName(TAB_NAME_SCHEDULES),
         component: async () => ClSpiderDetailTabSchedules,
       },
       {
         path: TAB_NAME_DATA,
+        title: t('layouts.routes.spiders.tabs.data'),
+        icon: getIconByTabName(TAB_NAME_DATA),
         component: async () => ClSpiderDetailTabData,
       },
       {
         path: TAB_NAME_SETTINGS,
+        title: t('layouts.routes.spiders.tabs.settings'),
+        icon: getIconByTabName(TAB_NAME_SETTINGS),
         component: async () => ClSpiderDetailTabSettings,
       },
       {
         path: TAB_NAME_DEPENDENCIES,
+        title: t('layouts.routes.spiders.tabs.dependencies'),
+        icon: getIconByTabName(TAB_NAME_DEPENDENCIES),
         component: async () => ClDependencySpiderTab,
       },
     ],
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/system.ts b/src/router/system.ts
index 9ba4a99b26fe6..eee29fe88fe53 100644
--- a/src/router/system.ts
+++ b/src/router/system.ts
@@ -1,5 +1,7 @@
-import { RouteRecordRaw } from 'vue-router';
 import { ClSystemDetail } from '@/views';
+import { translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'system';
 
@@ -7,6 +9,8 @@ export default [
   {
     name: 'SystemDetail',
     path: endpoint,
+    title: t('layouts.routes.system.title'),
+    icon: ['fa', 'cogs'],
     component: async () => ClSystemDetail,
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/task.ts b/src/router/task.ts
index 7853e08616415..e9ebde5c6b1c3 100644
--- a/src/router/task.ts
+++ b/src/router/task.ts
@@ -1,4 +1,3 @@
-import { RouteRecordRaw } from 'vue-router';
 import {
   TAB_NAME_DATA,
   TAB_NAME_LOGS,
@@ -11,6 +10,9 @@ import {
   ClTaskDetailTabOverview,
   ClTaskList,
 } from '@/views';
+import { getIconByTabName, translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'tasks';
 
@@ -18,6 +20,8 @@ export default [
   {
     name: 'TaskList',
     path: endpoint,
+    title: t('layouts.routes.tasks.title'),
+    icon: ['fa', 'tasks'],
     component: async () => ClTaskList,
   },
   {
@@ -30,16 +34,22 @@ export default [
     children: [
       {
         path: TAB_NAME_OVERVIEW,
+        title: t('layouts.routes.tasks.tabs.overview'),
+        icon: getIconByTabName(TAB_NAME_OVERVIEW),
         component: async () => ClTaskDetailTabOverview,
       },
       {
         path: TAB_NAME_LOGS,
+        title: t('layouts.routes.tasks.tabs.logs'),
+        icon: getIconByTabName(TAB_NAME_LOGS),
         component: async () => ClTaskDetailTabLogs,
       },
       {
         path: TAB_NAME_DATA,
+        title: t('layouts.routes.tasks.tabs.data'),
+        icon: getIconByTabName(TAB_NAME_DATA),
         component: async () => ClTaskDetailTabData,
       },
     ],
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/token.ts b/src/router/token.ts
index b7f11d9008d16..f059ff98fea11 100644
--- a/src/router/token.ts
+++ b/src/router/token.ts
@@ -1,5 +1,7 @@
-import { RouteRecordRaw } from 'vue-router';
 import { ClTokenList } from '@/views';
+import { translate } from '@/utils';
+
+const t = translate;
 
 const endpoint = 'tokens';
 
@@ -7,6 +9,8 @@ export default [
   {
     name: 'TokenList',
     path: endpoint,
+    title: t('layouts.routes.tokens.title'),
+    icon: ['fa', 'key'],
     component: async () => ClTokenList,
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/router/user.ts b/src/router/user.ts
index d174413f7b2b4..72133388a1b04 100644
--- a/src/router/user.ts
+++ b/src/router/user.ts
@@ -1,16 +1,22 @@
-import { RouteRecordRaw } from 'vue-router';
 import { TAB_NAME_OVERVIEW } from '@/constants/tab';
 import { ClUserDetail, ClUserDetailTabOverview, ClUserList } from '@/views';
+import { getIconByTabName, translate } from '@/utils';
+
+const t = translate;
+
+const endpoint = 'users';
 
 export default [
   {
     name: 'UserList',
-    path: 'users',
+    path: endpoint,
+    title: t('layouts.routes.users.title'),
+    icon: ['fa', 'users'],
     component: async () => ClUserList,
   },
   {
     name: 'UserDetail',
-    path: 'users/:id',
+    path: `${endpoint}/:id`,
     redirect: to => {
       return { path: to.path + '/' + TAB_NAME_OVERVIEW };
     },
@@ -18,8 +24,10 @@ export default [
     children: [
       {
         path: TAB_NAME_OVERVIEW,
+        title: t('layouts.routes.users.tabs.overview'),
+        icon: getIconByTabName(TAB_NAME_OVERVIEW),
         component: async () => ClUserDetailTabOverview,
       },
     ],
   },
-] as Array<RouteRecordRaw>;
+] as Array<ExtendedRouterRecord>;
diff --git a/src/store/modules/layout.ts b/src/store/modules/layout.ts
index fade9e7a0abea..e6530773f42a1 100644
--- a/src/store/modules/layout.ts
+++ b/src/store/modules/layout.ts
@@ -44,7 +44,7 @@ export default {
       if (activeTabId === undefined) return;
       return tabs.find(d => d.id === activeTabId);
     },
-    sidebarMenuItems: state => {
+    sidebarMenuItems: (state: LayoutStoreState) => {
       return state.menuItems
         .filter(d => !d.hidden)
         .filter(d => {
@@ -61,7 +61,8 @@ export default {
           return state.navVisibleFn(d.path);
         });
     },
-    normalizedMenuItems: state => normalizeTree<MenuItem>(state.menuItems),
+    normalizedMenuItems: (state: LayoutStoreState) =>
+      normalizeTree<MenuItem>(state.menuItems),
   },
   mutations: {
     setMenuItems(state: LayoutStoreState, items: MenuItem[]) {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 23fc887b88aef..b1ab12f2a28cb 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -56,7 +56,7 @@
   --cl-tabs-view-tab-border-color: var(--cl-info-light-color);
   --cl-tabs-view-border-color: var(--cl-header-border-color);
   --cl-tabs-view-active-tab-color: var(--cl-primary-color);
-  --cl-tabs-view-bg: var(--cl-info-plain-color);
+  --cl-tabs-view-bg: #ffffff;
   --cl-menu-text: #bfcbd9;
   --cl-menu-active-text: var(--cl-primary-color);
   --cl-sub-menu-active-text: #f4f4f5;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index cf29f5244a03f..3c9e992214f92 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -14,7 +14,6 @@ export * from './mongo';
 export * from './object';
 export * from './os';
 export * from './pagination';
-export * from './path';
 export * from './request';
 export * from './result';
 export * from './route';
diff --git a/src/utils/path.ts b/src/utils/path.ts
deleted file mode 100644
index b701111878975..0000000000000
--- a/src/utils/path.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const getPrimaryPath = (path: string): string => {
-  const arr = path.split('/');
-  if (arr.length <= 1) {
-    return path;
-  } else {
-    return `/${arr[1]}`;
-  }
-};
diff --git a/src/utils/route.ts b/src/utils/route.ts
index f028789e725ff..1d027e3d8e434 100644
--- a/src/utils/route.ts
+++ b/src/utils/route.ts
@@ -1,15 +1,167 @@
 import { Router } from 'vue-router';
+import { getStore } from '@/store';
+import urljoin from 'url-join';
+import {
+  TAB_NAME_CHANGES,
+  TAB_NAME_DATA,
+  TAB_NAME_DEPENDENCIES,
+  TAB_NAME_FILES,
+  TAB_NAME_GIT,
+  TAB_NAME_LOGS,
+  TAB_NAME_MONITORING,
+  TAB_NAME_OVERVIEW,
+  TAB_NAME_SCHEDULES,
+  TAB_NAME_SETTINGS,
+  TAB_NAME_SPIDERS,
+  TAB_NAME_TASKS,
+  TAB_NAME_TEMPLATE,
+  TAB_NAME_TRIGGERS,
+} from '@/constants';
+import { getDefaultRoutes } from '@/router';
+import { normalizeTree } from '@/utils/tree';
 
-export const getRoutePathByDepth = (path: string, depth?: number) => {
-  if (!depth) depth = 1;
+const routePathRegex = /(\/[\w\/-]+)\/([0-9a-f]{24})\/([\w-]+)/i;
+
+export const getRoutePath = (path: string) => {
+  if (routePathRegex.test(path)) {
+    return path.match(routePathRegex)![1];
+  }
   const arr = path.split('/');
-  if (!arr[0]) depth += 1;
-  return arr.slice(0, depth).join('/');
+  if (arr.length < 3) return '';
+  return arr.slice(0, 3).join('/');
 };
 
 export const getTabName = (router?: Router) => {
   if (!router) return '';
+  if (routePathRegex.test(router.currentRoute.value.path)) {
+    return router.currentRoute.value.path.match(routePathRegex)![3];
+  }
   const arr = router.currentRoute.value.path.split('/');
   if (arr.length < 3) return '';
   return arr[3];
 };
+
+export const getPrimaryPath = (path: string): string => {
+  if (routePathRegex.test(path)) {
+    return path.match(routePathRegex)![1];
+  }
+  const arr = path.split('/');
+  if (arr.length <= 1) {
+    return path;
+  } else {
+    return `/${arr[1]}`;
+  }
+};
+
+export const getRouteMenuItems = (): MenuItem[] => {
+  const routes = getDefaultRoutes();
+  const normalizedRoutes = normalizeTree<ExtendedRouterRecord>(
+    routes,
+    (parentNode, node) => {
+      return {
+        ...node,
+        path: urljoin(parentNode.path, node.path),
+      };
+    }
+  );
+  return normalizedRoutes.map(r => {
+    return {
+      title: r.title || '',
+      icon: r.icon,
+      path: r.path,
+    } as MenuItem;
+  });
+};
+
+export const getRouteMenuItemsMap = () => {
+  const menuItems = getRouteMenuItems();
+  const map = new Map<string, MenuItem>();
+  for (const item of menuItems) {
+    map.set(item.path || '', item);
+  }
+  return map;
+};
+
+export const getNavMenuItems = (path: string): MenuItem[] => {
+  const menuItemsMap = getRouteMenuItemsMap();
+  const normalizedPath = path.replace(/[0-9a-f]{24}/, ':id');
+  const pathParts = normalizedPath.split('/');
+  const menuItems: MenuItem[] = [];
+  for (let i = 1; i <= pathParts.length; i++) {
+    const subPath = pathParts.slice(0, i).join('/');
+    const menuItem = menuItemsMap.get(subPath);
+    if (menuItem?.title) {
+      menuItems.push(menuItemsMap.get(subPath)!);
+    }
+  }
+  return menuItems;
+};
+
+export const getMenuItemPathMap = (
+  rootPath: string,
+  item: MenuItem
+): Map<string, string> => {
+  const paths = new Map<string, string>();
+  const itemPath = item.path?.startsWith('/')
+    ? item.path
+    : urljoin(rootPath, item.path || '');
+  paths.set(itemPath, rootPath);
+  if (item.children && item.children.length > 0) {
+    for (const subItem of item.children) {
+      getMenuItemPathMap(itemPath, subItem).forEach((parentPath, path) => {
+        paths.set(path, parentPath);
+      });
+    }
+  }
+  return paths;
+};
+
+export const getAllMenuItemPathMap = () => {
+  const store = getStore();
+  const paths = new Map<string, string>();
+  for (const item of store.getters['layout/sidebarMenuItems'] as MenuItem[]) {
+    getMenuItemPathMap('/', item).forEach((parentPath, path) => {
+      paths.set(path, parentPath);
+    });
+  }
+  return paths;
+};
+
+export const getIconByTabName = (tabName: string): Icon => {
+  switch (tabName) {
+    case TAB_NAME_OVERVIEW:
+      return ['fa', 'tachometer-alt'];
+    case TAB_NAME_FILES:
+      return ['fa', 'file-code'];
+    case TAB_NAME_GIT:
+      return ['fa', 'code-branch'];
+    case TAB_NAME_TASKS:
+      return ['fa', 'tasks'];
+    case TAB_NAME_SETTINGS:
+      return ['fa', 'cog'];
+    case TAB_NAME_SPIDERS:
+      return ['fa', 'spider'];
+    case TAB_NAME_DATA:
+      return ['fa', 'database'];
+    case TAB_NAME_SCHEDULES:
+      return ['fa', 'calendar-alt'];
+    case TAB_NAME_LOGS:
+      return ['fa', 'file-alt'];
+    case TAB_NAME_DEPENDENCIES:
+      return ['fa', 'cubes'];
+    case TAB_NAME_TRIGGERS:
+      return ['fa', 'bolt'];
+    case TAB_NAME_TEMPLATE:
+      return ['fa', 'file-code'];
+    case TAB_NAME_CHANGES:
+      return ['fa', 'code-commit'];
+    case TAB_NAME_MONITORING:
+      return ['fa', 'tachometer-alt'];
+    default:
+      return ['fa', 'circle'];
+  }
+};
+
+export const getIconByNavItem = (item: NavItem): Icon => {
+  return getIconByTabName(item.id);
+};
diff --git a/src/utils/tree.ts b/src/utils/tree.ts
index cd0f7a463a48c..f2cf939c954b0 100644
--- a/src/utils/tree.ts
+++ b/src/utils/tree.ts
@@ -1,16 +1,30 @@
-const getNormalizedNodes = <T = any>(node: TreeNode<T>): T[] => {
+type HandleNodeFn<T> = (
+  parentNode: TreeNode<T>,
+  node: TreeNode<T>
+) => TreeNode<T>;
+
+const getNormalizedNodes = <T = any>(
+  node: TreeNode<T>,
+  handleNodeFn?: HandleNodeFn<T>
+): T[] => {
   let nodes = [] as T[];
   nodes.push(node as T);
-  node.children?.forEach((subNode: any) => {
-    nodes = nodes.concat(getNormalizedNodes(subNode));
+  node.children?.forEach((subNode: TreeNode<T>) => {
+    if (handleNodeFn) {
+      subNode = handleNodeFn(node, subNode);
+    }
+    nodes = nodes.concat(getNormalizedNodes(subNode, handleNodeFn));
   });
   return nodes;
 };
 
-export const normalizeTree = <T = any>(nodes: TreeNode<T>[]): T[] => {
+export const normalizeTree = <T = any>(
+  nodes: TreeNode<T>[],
+  handleNodeFn?: HandleNodeFn<T>
+): T[] => {
   let results = [] as T[];
   nodes.forEach(node => {
-    results = results.concat(getNormalizedNodes(node));
+    results = results.concat(getNormalizedNodes<T>(node, handleNodeFn));
   });
   return results;
 };
diff --git a/src/views/index.ts b/src/views/index.ts
index d57f34785f2b3..c8f8b411b04ac 100644
--- a/src/views/index.ts
+++ b/src/views/index.ts
@@ -17,11 +17,11 @@ import DataSourceList from './ds/list/DataSourceList.vue';
 import useDataSourceList from './ds/list/useDataSourceList';
 import EnvironmentList from './environment/list/EnvironmentList.vue';
 import useEnvironmentList from './environment/list/useEnvironmentList';
-import GitDetail from './git/detail/GitDetail.vue';
 import GitDetailActionsChanges from './git/detail/actions/GitDetailActionsChanges.vue';
 import GitDetailActionsCommon from './git/detail/actions/GitDetailActionsCommon.vue';
 import GitDetailActionsFiles from './git/detail/actions/GitDetailActionsFiles.vue';
 import GitDetailActionsSpiders from './git/detail/actions/GitDetailActionsSpiders.vue';
+import GitDetail from './git/detail/GitDetail.vue';
 import GitDetailTabChanges from './git/detail/tabs/GitDetailTabChanges.vue';
 import GitDetailTabFiles from './git/detail/tabs/GitDetailTabFiles.vue';
 import GitDetailTabLogs from './git/detail/tabs/GitDetailTabLogs.vue';
@@ -34,16 +34,16 @@ import Home from './home/Home.vue';
 import Login from './login/Login.vue';
 import Disclaimer from './misc/Disclaimer.vue';
 import MySettings from './misc/MySettings.vue';
-import NodeDetail from './node/detail/NodeDetail.vue';
 import NodeDetailActionsCommon from './node/detail/actions/NodeDetailActionsCommon.vue';
+import NodeDetail from './node/detail/NodeDetail.vue';
 import NodeDetailTabMonitoring from './node/detail/tabs/NodeDetailTabMonitoring.vue';
 import NodeDetailTabOverview from './node/detail/tabs/NodeDetailTabOverview.vue';
 import NodeDetailTabTasks from './node/detail/tabs/NodeDetailTabTasks.vue';
 import NodeList from './node/list/NodeList.vue';
 import useNodeList from './node/list/useNodeList';
-import NotificationSettingDetail from './notification/setting/detail/NotificationSettingDetail.vue';
 import NotificationSettingDetailActionsCommon from './notification/setting/detail/actions/NotificationSettingDetailActionsCommon.vue';
 import NotificationSettingDetailActionsTemplate from './notification/setting/detail/actions/NotificationSettingDetailActionsTemplate.vue';
+import NotificationSettingDetail from './notification/setting/detail/NotificationSettingDetail.vue';
 import NotificationSettingDetailTabOverview from './notification/setting/detail/tabs/NotificationSettingDetailTabOverview.vue';
 import NotificationSettingDetailTabTemplate from './notification/setting/detail/tabs/NotificationSettingDetailTabTemplate.vue';
 import useNotificationSettingDetail from './notification/setting/detail/useNotificationSettingDetail';
@@ -60,11 +60,11 @@ import ScheduleDetailTabTasks from './schedule/detail/tabs/ScheduleDetailTabTask
 import useScheduleDetail from './schedule/detail/useScheduleDetail';
 import ScheduleList from './schedule/list/ScheduleList.vue';
 import useScheduleList from './schedule/list/useScheduleList';
-import SpiderDetail from './spider/detail/SpiderDetail.vue';
 import SpiderDetailActionsCommon from './spider/detail/actions/SpiderDetailActionsCommon.vue';
 import SpiderDetailActionsData from './spider/detail/actions/SpiderDetailActionsData.vue';
 import SpiderDetailActionsDataSource from './spider/detail/actions/SpiderDetailActionsDataSource.vue';
 import SpiderDetailActionsFiles from './spider/detail/actions/SpiderDetailActionsFiles.vue';
+import SpiderDetail from './spider/detail/SpiderDetail.vue';
 import SpiderDetailTabData from './spider/detail/tabs/SpiderDetailTabData.vue';
 import SpiderDetailTabFiles from './spider/detail/tabs/SpiderDetailTabFiles.vue';
 import SpiderDetailTabOverview from './spider/detail/tabs/SpiderDetailTabOverview.vue';
@@ -75,20 +75,20 @@ import useSpiderDetail from './spider/detail/useSpiderDetail';
 import SpiderList from './spider/list/SpiderList.vue';
 import useSpiderList from './spider/list/useSpiderList';
 import SystemDetail from './system/detail/SystemDetail.vue';
-import TaskDetail from './task/detail/TaskDetail.vue';
 import TaskDetailActionsCommon from './task/detail/actions/TaskDetailActionsCommon.vue';
 import TaskDetailActionsData from './task/detail/actions/TaskDetailActionsData.vue';
 import TaskDetailActionsLogs from './task/detail/actions/TaskDetailActionsLogs.vue';
 import TaskDetailTabData from './task/detail/tabs/TaskDetailTabData.vue';
 import TaskDetailTabLogs from './task/detail/tabs/TaskDetailTabLogs.vue';
 import TaskDetailTabOverview from './task/detail/tabs/TaskDetailTabOverview.vue';
+import TaskDetail from './task/detail/TaskDetail.vue';
 import useTaskDetail from './task/detail/useTaskDetail';
 import TaskList from './task/list/TaskList.vue';
 import useTaskList from './task/list/useTaskList';
 import TokenList from './token/list/TokenList.vue';
 import useTokenList from './token/list/useTokenList';
-import UserDetail from './user/detail/UserDetail.vue';
 import UserDetailTabOverview from './user/detail/tabs/UserDetailTabOverview.vue';
+import UserDetail from './user/detail/UserDetail.vue';
 import useUserDetail from './user/detail/useUserDetail';
 import UserList from './user/list/UserList.vue';
 import useUserList from './user/list/useUserList';
@@ -113,11 +113,11 @@ export {
   useDataSourceList as useDataSourceList,
   EnvironmentList as ClEnvironmentList,
   useEnvironmentList as useEnvironmentList,
-  GitDetail as ClGitDetail,
   GitDetailActionsChanges as ClGitDetailActionsChanges,
   GitDetailActionsCommon as ClGitDetailActionsCommon,
   GitDetailActionsFiles as ClGitDetailActionsFiles,
   GitDetailActionsSpiders as ClGitDetailActionsSpiders,
+  GitDetail as ClGitDetail,
   GitDetailTabChanges as ClGitDetailTabChanges,
   GitDetailTabFiles as ClGitDetailTabFiles,
   GitDetailTabLogs as ClGitDetailTabLogs,
@@ -130,16 +130,16 @@ export {
   Login as ClLogin,
   Disclaimer as ClDisclaimer,
   MySettings as ClMySettings,
-  NodeDetail as ClNodeDetail,
   NodeDetailActionsCommon as ClNodeDetailActionsCommon,
+  NodeDetail as ClNodeDetail,
   NodeDetailTabMonitoring as ClNodeDetailTabMonitoring,
   NodeDetailTabOverview as ClNodeDetailTabOverview,
   NodeDetailTabTasks as ClNodeDetailTabTasks,
   NodeList as ClNodeList,
   useNodeList as useNodeList,
-  NotificationSettingDetail as ClNotificationSettingDetail,
   NotificationSettingDetailActionsCommon as ClNotificationSettingDetailActionsCommon,
   NotificationSettingDetailActionsTemplate as ClNotificationSettingDetailActionsTemplate,
+  NotificationSettingDetail as ClNotificationSettingDetail,
   NotificationSettingDetailTabOverview as ClNotificationSettingDetailTabOverview,
   NotificationSettingDetailTabTemplate as ClNotificationSettingDetailTabTemplate,
   useNotificationSettingDetail as useNotificationSettingDetail,
@@ -156,11 +156,11 @@ export {
   useScheduleDetail as useScheduleDetail,
   ScheduleList as ClScheduleList,
   useScheduleList as useScheduleList,
-  SpiderDetail as ClSpiderDetail,
   SpiderDetailActionsCommon as ClSpiderDetailActionsCommon,
   SpiderDetailActionsData as ClSpiderDetailActionsData,
   SpiderDetailActionsDataSource as ClSpiderDetailActionsDataSource,
   SpiderDetailActionsFiles as ClSpiderDetailActionsFiles,
+  SpiderDetail as ClSpiderDetail,
   SpiderDetailTabData as ClSpiderDetailTabData,
   SpiderDetailTabFiles as ClSpiderDetailTabFiles,
   SpiderDetailTabOverview as ClSpiderDetailTabOverview,
@@ -171,20 +171,20 @@ export {
   SpiderList as ClSpiderList,
   useSpiderList as useSpiderList,
   SystemDetail as ClSystemDetail,
-  TaskDetail as ClTaskDetail,
   TaskDetailActionsCommon as ClTaskDetailActionsCommon,
   TaskDetailActionsData as ClTaskDetailActionsData,
   TaskDetailActionsLogs as ClTaskDetailActionsLogs,
   TaskDetailTabData as ClTaskDetailTabData,
   TaskDetailTabLogs as ClTaskDetailTabLogs,
   TaskDetailTabOverview as ClTaskDetailTabOverview,
+  TaskDetail as ClTaskDetail,
   useTaskDetail as useTaskDetail,
   TaskList as ClTaskList,
   useTaskList as useTaskList,
   TokenList as ClTokenList,
   useTokenList as useTokenList,
-  UserDetail as ClUserDetail,
   UserDetailTabOverview as ClUserDetailTabOverview,
+  UserDetail as ClUserDetail,
   useUserDetail as useUserDetail,
   UserList as ClUserList,
   useUserList as useUserList,
diff --git a/src/views/notification/setting/detail/actions/NotificationSettingDetailActionsCommon.vue b/src/views/notification/setting/detail/actions/NotificationSettingDetailActionsCommon.vue
index 24d01286345df..cdc6a8f60133f 100644
--- a/src/views/notification/setting/detail/actions/NotificationSettingDetailActionsCommon.vue
+++ b/src/views/notification/setting/detail/actions/NotificationSettingDetailActionsCommon.vue
@@ -6,9 +6,9 @@ import { translate } from '@/utils';
 
 const t = translate;
 
-const ns = 'notification';
+const ns: ListStoreNamespace = 'notificationSetting';
 const store = useStore();
-const { notification: state } = store.state as RootStoreState;
+const { notificationSetting: state } = store.state as RootStoreState;
 
 const getTriggerTarget = (
   trigger?: NotificationTrigger
diff --git a/src/views/notification/setting/detail/actions/NotificationSettingDetailActionsTemplate.vue b/src/views/notification/setting/detail/actions/NotificationSettingDetailActionsTemplate.vue
index 0e69bbb5bfd8b..2def2fda33199 100644
--- a/src/views/notification/setting/detail/actions/NotificationSettingDetailActionsTemplate.vue
+++ b/src/views/notification/setting/detail/actions/NotificationSettingDetailActionsTemplate.vue
@@ -7,9 +7,9 @@ import { publish } from '@/utils/eventBus';
 
 const t = translate;
 
-const ns = 'notification';
+const ns: ListStoreNamespace = 'notificationSetting';
 const store = useStore();
-const { notification: state } = store.state as RootStoreState;
+const { notificationSetting: state } = store.state as RootStoreState;
 
 const templateMode = ref<NotificationTemplateMode | undefined>(
   state.form.template_mode
diff --git a/src/views/notification/setting/detail/tabs/NotificationSettingDetailTabOverview.vue b/src/views/notification/setting/detail/tabs/NotificationSettingDetailTabOverview.vue
index 85b3cda37fd98..460a119d7df8b 100644
--- a/src/views/notification/setting/detail/tabs/NotificationSettingDetailTabOverview.vue
+++ b/src/views/notification/setting/detail/tabs/NotificationSettingDetailTabOverview.vue
@@ -1,12 +1,5 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'NotificationDetailTabOverview',
-  setup() {
-    return {};
-  },
-});
+<script setup lang="ts">
+defineOptions({ name: 'ClNotificationSettingDetailTabOverview' });
 </script>
 
 <template>
diff --git a/src/views/notification/setting/detail/tabs/NotificationSettingDetailTabTemplate.vue b/src/views/notification/setting/detail/tabs/NotificationSettingDetailTabTemplate.vue
index 311095fbca22a..1cf75e012f52a 100644
--- a/src/views/notification/setting/detail/tabs/NotificationSettingDetailTabTemplate.vue
+++ b/src/views/notification/setting/detail/tabs/NotificationSettingDetailTabTemplate.vue
@@ -8,7 +8,7 @@ import useNotificationSettingDetail from '@/views/notification/setting/detail/us
 const t = translate;
 
 // store
-const ns = 'notification';
+const ns: ListStoreNamespace = 'notificationSetting';
 const store = useStore();
 const { notificationSetting: state } = store.state as RootStoreState;
 
diff --git a/src/views/notification/setting/list/useNotificationSettingList.tsx b/src/views/notification/setting/list/useNotificationSettingList.tsx
index e1ec150e0b1f1..49d26da9fac51 100644
--- a/src/views/notification/setting/list/useNotificationSettingList.tsx
+++ b/src/views/notification/setting/list/useNotificationSettingList.tsx
@@ -143,7 +143,7 @@ const useNotificationSettingList = () => {
               icon: ['fa', 'search'],
               tooltip: t('common.actions.view'),
               onClick: async (row: NotificationSetting) => {
-                await router.push(`/notifications/${row._id}`);
+                await router.push(`/notifications/settings/${row._id}`);
               },
             },
             {