diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index cb8b984b2..101ae9e74 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -130,6 +130,9 @@
         <el-menu-item index="5-7">
           <div @click="jumpTo('/operationlog')" :class="{'menu-item-active' :(route == '/operationlog' )}">{{$t('config.operationlog.operationlog')}}</div>
         </el-menu-item>
+        <el-menu-item index="5-8">
+          <div @click="jumpTo('/about')" :class="{'menu-item-active' :(route == '/about' )}">{{$t('overall.about')}}</div>
+        </el-menu-item>
       </el-submenu>
       <el-submenu index="6" popper-class="nz-submenu">
         <template slot="title">
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 9148f6e4d..ee20328cc 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -12,6 +12,7 @@ export const staticMenus = {
       {route: '/system', name: i18n.t('config.system.system')},
       {route: '/terminallog', name: i18n.t('config.terminallog.terminallog')},
       {route: '/operationlog', name: i18n.t('config.operationlog.operationlog')},
+      {route: '/about', name: i18n.t('overall.about')},
     ],
   },
   alerts: {
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 61db523e4..42a3ce487 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -13,7 +13,7 @@ const cn = {
     esc: "取消",
     cancel: "取消",
     save: "保存",
-    preivew: "预览",
+    preview: "预览",
     download: "下载",
     upload: "上传",
     search: "搜索",
@@ -26,6 +26,8 @@ const cn = {
     clearAll: "清空",
     clear: "清除",
     name: "名称",
+    version: "版本",
+    components: "组件",
     cover: "覆盖",
     signOut: "登出",
     select: "选择",
@@ -34,6 +36,7 @@ const cn = {
     all: "全选",
     value: "值",
     other: "其他",
+    about: '关于',
     query: "查询",
     back: "返回",
     unavailable: "不可用",
@@ -48,7 +51,6 @@ const cn = {
     createDatacenter: "新增数据中心",
     active: "活跃",
     type: "类别",
-    preview: "预览",
     detail: "详细信息",
     changePwd: "修改密码",
     createCabinet: "创建机柜",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 7f91f7c28..4dde1c7c7 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -31,6 +31,8 @@ const en = {
     remark: "Description",
     clear: 'Clear', //"清除"
     name: 'Name', //'名称'
+    version: "Version", //版本
+    components: "Components", //组件
     cover: 'Override', //'覆盖'
     signOut: 'Logout',//'登出'
     select: 'Select',//'选择'
@@ -39,6 +41,7 @@ const en = {
     all: 'All',//'全选'
     value: 'Value',
     other: 'Others',//"其他"
+    about: 'About',//关于
     detail: 'Detail', //详情
     query: 'Query', //查询
     back: 'Back', //返回
diff --git a/nezha-fronted/src/components/page/config/about.vue b/nezha-fronted/src/components/page/config/about.vue
new file mode 100644
index 000000000..c0f3373e4
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/about.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="about">
+    <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>
+    </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>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: "about",
+    data() {
+      return {
+        version: {
+          main: "1.2.1",
+          mariadb: "10.5.5-log",
+          redis: "4.1.2",
+          prometheus: "2.21.1"
+        }
+      }
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .about {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    .about-label {
+      color: #999;
+    }
+
+    .app-header {
+      display: flex;
+
+      .header-logo {
+        font-size: 0;
+        background-color: rgba(0, 0, 0, 0.9);
+        border-radius: 2px;
+      }
+
+      .header-title {
+        padding-left: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .app-name {
+          font-weight: bold;
+          font-size: 18px;
+          line-height: 50px;
+        }
+
+        .app-version {
+          font-size: 12px;
+        }
+      }
+    }
+
+    .app-component {
+      width: 325px;
+      margin-top: 35px;
+
+      .component-title {
+        color: #999;
+        height: 30px;
+        font-size: 12px;
+        line-height: 30px;
+        border-bottom: 1px solid #999;
+      }
+
+      .component-content {
+        padding-top: 8px;
+      }
+
+      .app-component-row {
+        line-height: 28px;
+        display: flex;
+        color: #333;
+        font-size: 14px;
+        justify-content: space-between;
+      }
+    }
+  }
+</style>
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 15f1422a8..3456bb864 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -84,6 +84,10 @@ export default new Router({
           path: '/operationlog',
           component: resolve => require(['../components/page/config/operationlog.vue'], resolve),
         },
+        {
+          path: '/about',
+          component: resolve => require(['../components/page/config/about.vue'], resolve),
+        },
         {
           path: '/mib',
           component: resolve => require(['../components/page/config/mib.vue'], resolve),