diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 971ebc75..7ca76b93 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -33,13 +33,17 @@ limitations under the License. -->
       <template v-for="(menu, index) in routes" :key="index">
         <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
           <template #title>
-            <router-link :to="menu.path" :exact="menu.meta.exact || false">
+            <router-link
+              class="items"
+              :to="menu.path"
+              :exact="menu.meta.exact || false"
+            >
               <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
                 <Icon size="lg" :iconName="menu.meta.icon" />
               </el-icon>
-              <span :class="isCollapse ? 'collapse' : ''">{{
-                t(menu.meta.title)
-              }}</span>
+              <span :class="isCollapse ? 'collapse' : ''">
+                {{ t(menu.meta.title) }}
+              </span>
             </router-link>
           </template>
           <el-menu-item-group>
@@ -48,7 +52,11 @@ limitations under the License. -->
               :index="m.name"
               :key="idx"
             >
-              <router-link :to="m.path" :exact="m.meta.exact || false">
+              <router-link
+                class="items"
+                :to="m.path"
+                :exact="m.meta.exact || false"
+              >
                 <span>{{ t(m.meta.title) }}</span>
               </router-link>
             </el-menu-item>
@@ -60,12 +68,20 @@ limitations under the License. -->
           v-else
         >
           <el-icon class="menu-icons" :style="{ margin: '-10px 12px 0 0' }">
-            <router-link :to="menu.children[0].path" :exact="menu.meta.exact">
+            <router-link
+              class="items"
+              :to="menu.children[0].path"
+              :exact="menu.meta.exact"
+            >
               <Icon size="lg" :iconName="menu.meta.icon" />
             </router-link>
           </el-icon>
           <template #title>
-            <router-link :to="menu.children[0].path" :exact="menu.meta.exact">
+            <router-link
+              class="items"
+              :to="menu.children[0].path"
+              :exact="menu.meta.exact"
+            >
               <span>{{ t(menu.meta.title) }}</span>
             </router-link>
           </template>
@@ -172,4 +188,9 @@ span.collapse {
 .el-icon.el-sub-menu__icon-arrow {
   height: 12px;
 }
+
+.items {
+  display: inline-block;
+  width: 100%;
+}
 </style>
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 56a8dc20..47d668cb 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -113,6 +113,11 @@ const msg = {
   noRoot: "Please set a root dashboard for",
   noWidget: "Please add widgets.",
   rename: "Rename",
+  selfObservability: "Self Observability",
+  satellite: "Satellite",
+  skyWalkingServer: "SkyWalking Server",
+  functions: "Functions",
+  browser: "Browser",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 3cec3c16..fccf9bdf 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -113,6 +113,11 @@ const msg = {
   showGroup: "显示分组",
   noWidget: "请添加组件",
   rename: "重命名",
+  selfObservability: "自观性",
+  satellite: "Satellite",
+  skyWalkingServer: "SkyWalking服务",
+  functions: "Functions",
+  browser: "浏览器",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/router/browser.ts b/src/router/browser.ts
new file mode 100644
index 00000000..35746491
--- /dev/null
+++ b/src/router/browser.ts
@@ -0,0 +1,43 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { RouteRecordRaw } from "vue-router";
+import Layout from "@/layout/Index.vue";
+
+export const routesBrowser: Array<RouteRecordRaw> = [
+  {
+    path: "",
+    name: "Browser",
+    meta: {
+      title: "browser",
+      icon: "epic",
+    },
+    redirect: "/browser",
+    component: Layout,
+    children: [
+      {
+        path: "/browser",
+        name: "Browser",
+        meta: {
+          title: "browser",
+          headPath: "/browser",
+          exact: true,
+        },
+        component: () => import("@/views/Layer.vue"),
+      },
+    ],
+  },
+];
diff --git a/src/router/functions.ts b/src/router/functions.ts
new file mode 100644
index 00000000..a6b56edd
--- /dev/null
+++ b/src/router/functions.ts
@@ -0,0 +1,43 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { RouteRecordRaw } from "vue-router";
+import Layout from "@/layout/Index.vue";
+
+export const routesFunctions: Array<RouteRecordRaw> = [
+  {
+    path: "",
+    name: "Functions",
+    meta: {
+      title: "functions",
+      icon: "epic",
+    },
+    redirect: "/functions",
+    component: Layout,
+    children: [
+      {
+        path: "/functions",
+        name: "Functions",
+        meta: {
+          title: "functions",
+          headPath: "/functions",
+          exact: true,
+        },
+        component: () => import("@/views/Layer.vue"),
+      },
+    ],
+  },
+];
diff --git a/src/router/index.ts b/src/router/index.ts
index 4d4c2fce..2102c00e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,12 +23,18 @@ import { routesDashboard } from "./dashboard";
 import { routesEvent } from "./event";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
+import { routesSelf } from "./selfObservability";
+import { routesFunctions } from "./functions";
+import { routesBrowser } from "./browser";
 
 const routes: Array<RouteRecordRaw> = [
   ...routesGen,
   ...routesMesh,
-  ...routesDatabase,
+  ...routesFunctions,
   ...routesInfra,
+  ...routesBrowser,
+  ...routesDatabase,
+  ...routesSelf,
   ...routesDashboard,
   ...routesAlarm,
   ...routesEvent,
diff --git a/src/router/infrastructure.ts b/src/router/infrastructure.ts
index 6ec33f27..db6304f2 100644
--- a/src/router/infrastructure.ts
+++ b/src/router/infrastructure.ts
@@ -25,26 +25,36 @@ export const routesInfra: Array<RouteRecordRaw> = [
       title: "infrastructure",
       icon: "scatter_plot",
       exact: true,
-      hasGroup: true,
+      hasGroup: false,
     },
+    redirect: "/infrastructure",
     component: Layout,
     children: [
       {
-        path: "/infrastructure/vm",
-        name: "VirtualMachine",
+        path: "/infrastructure",
+        name: "Linux",
         meta: {
-          title: "virtualMachine",
+          title: "linux",
         },
-        component: () => import("@/views/infrastructure/Infrastructure.vue"),
-      },
-      {
-        path: "/infrastructure/k8s",
-        name: "Kubernetes",
-        meta: {
-          title: "kubernetes",
-        },
-        component: () => import("@/views/infrastructure/Infrastructure.vue"),
+        component: () => import("@/views/Layer.vue"),
+        // component: () => import("@/views/infrastructure/Infrastructure.vue"),
       },
+      // {
+      //   path: "/infrastructure/vm",
+      //   name: "VirtualMachine",
+      //   meta: {
+      //     title: "virtualMachine",
+      //   },
+      //   component: () => import("@/views/infrastructure/Infrastructure.vue"),
+      // },
+      // {
+      //   path: "/infrastructure/k8s",
+      //   name: "Kubernetes",
+      //   meta: {
+      //     title: "kubernetes",
+      //   },
+      //   component: () => import("@/views/infrastructure/Infrastructure.vue"),
+      // },
     ],
   },
 ];
diff --git a/src/router/selfObservability.ts b/src/router/selfObservability.ts
new file mode 100644
index 00000000..98a8be8a
--- /dev/null
+++ b/src/router/selfObservability.ts
@@ -0,0 +1,52 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { RouteRecordRaw } from "vue-router";
+import Layout from "@/layout/Index.vue";
+
+export const routesSelf: Array<RouteRecordRaw> = [
+  {
+    path: "",
+    name: "SelfObservability",
+    redirect: "/self/skyWalkingServer",
+    meta: {
+      title: "selfObservability",
+      icon: "bar_chart",
+      hasGroup: true,
+    },
+    component: Layout,
+    children: [
+      {
+        path: "/self/skyWalkingServer",
+        name: "SkyWalkingServer",
+        meta: {
+          title: "skyWalkingServer",
+          headPath: "/mesh/services",
+        },
+        component: () => import("@/views/Layer.vue"),
+      },
+      {
+        path: "/self/satellite",
+        name: "Satellite",
+        meta: {
+          title: "satellite",
+          headPath: "/mesh/controlPanel",
+        },
+        component: () => import("@/views/Layer.vue"),
+      },
+    ],
+  },
+];
diff --git a/src/views/Layer.vue b/src/views/Layer.vue
index 7e43f14b..ed1f418e 100644
--- a/src/views/Layer.vue
+++ b/src/views/Layer.vue
@@ -34,6 +34,11 @@ const routeNames = [
   "MeshServices",
   "ControlPanel",
   "DataPanel",
+  "Linux",
+  "SkyWalkingServer",
+  "Satellite",
+  "Functions",
+  "Browser",
 ];
 const layer = ref<string>("GENERAL");
 getDashboard();
@@ -69,6 +74,21 @@ function setLayer(n: string) {
     case routeNames[4]:
       layer.value = "MESH_DP";
       break;
+    case routeNames[5]:
+      layer.value = "OS_LINUX";
+      break;
+    case routeNames[6]:
+      layer.value = "SO11Y_OAP";
+      break;
+    case routeNames[7]:
+      layer.value = "SO11Y_SATELLITE";
+      break;
+    case routeNames[8]:
+      layer.value = "FAAS";
+      break;
+    case routeNames[9]:
+      layer.value = "BROWSER";
+      break;
     default:
       layer.value = "GENERAL";
       break;
diff --git a/src/views/dashboard/configuration/widget/MetricOptions.vue b/src/views/dashboard/configuration/widget/MetricOptions.vue
index 89c4664e..e542dd40 100644
--- a/src/views/dashboard/configuration/widget/MetricOptions.vue
+++ b/src/views/dashboard/configuration/widget/MetricOptions.vue
@@ -150,16 +150,11 @@ async function setMetricType(catalog?: string) {
   states.metricList = (json.data.metrics || []).filter(
     (d: { catalog: string; type: string }) => {
       if (states.isList || graph.type === "Table") {
-        if (
-          d.type === MetricsType.REGULAR_VALUE &&
-          catalog === (MetricCatalog as any)[d.catalog]
-        ) {
+        if (d.type === MetricsType.REGULAR_VALUE) {
           return d;
         }
       } else {
-        if (catalog === (MetricCatalog as any)[d.catalog]) {
-          return d;
-        }
+        return d;
       }
     }
   );