diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 101ae9e74..32e9f4bc6 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -104,7 +104,7 @@
       </el-submenu>
       <el-submenu index="5" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('/account')" :class ="route == '/account' || route == '/promServer' || route == '/dc' || route == '/model' || route == '/mib' || route == '/system' || route == '/terminallog' || route == '/operationlog' ? 'menu-active' : ''">{{$t('overall.config')}}</div>
+          <div @click="jumpTo('/account')" :class ="route == '/account' || route == '/promServer' || route == '/dc' || route == '/model' || route == '/mib' || route == '/system' || route == '/terminallog' || route == '/operationlog' || route == '/about' ? 'menu-active' : ''">{{$t('overall.config')}}</div>
         </template>
         <el-menu-item index="5-0">
           <div @click="jumpTo('/account')" :class="{'menu-item-active' :(route == '/account' )}">{{$t('config.account.account')}}</div>
diff --git a/nezha-fronted/src/components/page/config/about.vue b/nezha-fronted/src/components/page/config/about.vue
index c0f3373e4..1370ffca5 100644
--- a/nezha-fronted/src/components/page/config/about.vue
+++ b/nezha-fronted/src/components/page/config/about.vue
@@ -3,24 +3,16 @@
     <div class="app-header">
       <div class="header-logo"><img width="70" height="70" src="../../../assets/img/logo1-2.png"></div>
       <div class="header-title">
-        <div class="app-name">Nezha monitoring System</div>
-        <div class="app-version"><span class="about-label">{{$t("overall.version")}}&nbsp;&nbsp;&nbsp;</span><span>1.2.1</span></div>
+        <div class="app-name">{{version.nezha.name}}</div>
+        <div class="app-version"><span class="about-label">{{$t("overall.version")}}&nbsp;&nbsp;&nbsp;</span><span>{{version.nezha.version}}</span></div>
       </div>
     </div>
     <div class="app-component">
       <div class="component-title">{{$t("overall.components")}}</div>
       <div class="component-content">
-        <div class="app-component-row">
-          <div class="component-name">Maria DB</div>
-          <div class="component-version">{{version.mariadb}}</div>
-        </div>
-        <div class="app-component-row">
-          <div class="component-name">Redis</div>
-          <div class="component-version">{{version.redis}}</div>
-        </div>
-        <div class="app-component-row">
-          <div class="component-name">Prometheus</div>
-          <div class="component-version">{{version.prometheus}}</div>
+        <div class="app-component-row" v-for="(item, index) in version.components" :key="index">
+          <div class="component-name">{{item.name}}</div>
+          <div class="component-version">{{item.version}}</div>
         </div>
       </div>
     </div>
@@ -31,14 +23,19 @@
     name: "about",
     data() {
       return {
-        version: {
-          main: "1.2.1",
-          mariadb: "10.5.5-log",
-          redis: "4.1.2",
-          prometheus: "2.21.1"
-        }
+        version: {}
       }
     },
+    methods: {
+      getVersion() {
+        this.$get("/about").then(response => {
+          this.version = response.data;
+        });
+      }
+    },
+    mounted() {
+      this.getVersion();
+    },
   }
 </script>
 <style scoped lang="scss">
@@ -55,6 +52,7 @@
 
     .app-header {
       display: flex;
+      width: 325px;
 
       .header-logo {
         font-size: 0;