diff --git a/web/config/router.config.js b/web/config/router.config.js
index 192177df..542bcea3 100644
--- a/web/config/router.config.js
+++ b/web/config/router.config.js
@@ -268,9 +268,33 @@ export default [
                 },
             ]
           }, {
-            path: '/settings/audit',
-            name: 'audit',
-            component: './Settings/Security/Audit',
+            path: '/settings/logs',
+            name: 'logs',
+            component: './Settings/Logs/Base',
+            hideChildrenInMenu: true,
+            routes: [
+            {
+                path: '/settings/logs',
+                redirect: '/settings/logs/overview',
+            },
+            {
+                path: '/settings/logs/overview',
+                name: 'overview',
+                component: './Settings/Logs/Overview',
+            }, {
+                path: '/settings/logs/audit',
+                name: 'audit',
+                component: './Settings/Logs/Audit',
+            }, {
+                path: '/settings/logs/query',
+                name: 'query',
+                component: './Settings/Logs/Audit',
+            }, {
+                path: '/settings/logs/slow',
+                name: 'slow',
+                component: './Settings/Logs/Audit',
+            },
+            ]
           },
         ]
       },
diff --git a/web/src/locales/en-US.js b/web/src/locales/en-US.js
index 31fb5a03..9d7e8ac3 100644
--- a/web/src/locales/en-US.js
+++ b/web/src/locales/en-US.js
@@ -100,7 +100,11 @@ export default {
   'menu.settings': 'SETTINGS',
   'menu.settings.global': 'GLOBAL',
   'menu.settings.security': 'SECURITY',
-  'menu.settings.audit': 'AUDIT',
+  'menu.settings.logs': 'LOGS',
+  'menu.settings.logs.overview': 'OVERVIEW',
+  'menu.settings.logs.audit': 'AUDIT',
+  'menu.settings.logs.query': 'QUERY',
+  'menu.settings.logs.slow': 'SLOW',
 
 
   'menu.form': 'Form',
diff --git a/web/src/locales/zh-CN.js b/web/src/locales/zh-CN.js
index f36f37ac..9c164870 100644
--- a/web/src/locales/zh-CN.js
+++ b/web/src/locales/zh-CN.js
@@ -108,7 +108,11 @@ export default {
   'menu.settings.global': '全局设置',
   'menu.settings.security': '安全设置',
   'menu.settings.authorization': '授权管理',
-  'menu.settings.audit': '审计日志',
+  'menu.settings.logs': '系统日志',
+  'menu.settings.logs.overview': '日志概要',
+  'menu.settings.logs.audit': '审计日志',
+  'menu.settings.logs.query': '查询日志',
+  'menu.settings.logs.slow': '慢日志',
 
 
   'menu.form': '表单页',
diff --git a/web/src/pages/Settings/Logs/Audit.js b/web/src/pages/Settings/Logs/Audit.js
new file mode 100644
index 00000000..2202238d
--- /dev/null
+++ b/web/src/pages/Settings/Logs/Audit.js
@@ -0,0 +1,74 @@
+import router from 'umi/router';
+import { connect } from 'dva';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import React, {Component, Fragment} from 'react';
+
+import {Col, Divider,Card, Form, Icon, Input, Row, Select, Table} from 'antd';
+import {formatMessage} from 'umi/locale';
+
+const {Option} = Select;
+
+const FormItem = Form.Item;
+const {TextArea} = Input;
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'key',
+        key: 'key',
+        render: text => <a>{text}</a>,
+    },
+    {
+        title: '用户名',
+        dataIndex: 'username',
+        key: 'username',
+    },
+    {
+        title: '消息日志',
+        dataIndex: 'message',
+        key: 'message',
+    }, {
+        title: '时间',
+        key: 'time',
+        dataIndex: 'time',
+    },
+    {
+        title: '操作',
+        key: 'action',
+        render: (text, record) => (
+            <span>
+                        <a>详情</a>
+                    </span>
+        ),
+    },
+];
+
+const data = [
+    {
+        key: '1',
+        username: 'admin',
+        enabled: true,
+        message: "User Login Success",
+        time: "Oct 19, 2019",
+
+    }, {
+        key: '2',
+        username: 'user',
+        enabled: true,
+        message: "User Login Failed",
+        time: "Oct 19, 2019",
+    },
+];
+
+@connect()
+class Audit extends Component {
+
+    render() {
+        return (
+            <Card><Table columns={columns} dataSource={data} /></Card>
+        );
+    }
+}
+
+export default Audit;
diff --git a/web/src/pages/Settings/Logs/Base.js b/web/src/pages/Settings/Logs/Base.js
new file mode 100644
index 00000000..04bb98e3
--- /dev/null
+++ b/web/src/pages/Settings/Logs/Base.js
@@ -0,0 +1,73 @@
+import router from 'umi/router';
+import { connect } from 'dva';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import React, {Component, Fragment} from 'react';
+
+import {Col, Divider,Card, Form, Icon, Input, Row, Select, Table} from 'antd';
+import {formatMessage} from 'umi/locale';
+
+const {Option} = Select;
+
+const FormItem = Form.Item;
+const {TextArea} = Input;
+
+
+
+@connect()
+class Overview extends Component {
+    handleTabChange = key => {
+        const { match,children } = this.props;
+        switch (key) {
+            case 'overview':
+                router.push(`${match.url}/overview`);
+                break;
+            case 'audit':
+                router.push(`${match.url}/audit`);
+                break;
+            case 'query':
+                router.push(`${match.url}/query`);
+                break;
+            case 'slow':
+                router.push(`${match.url}/slow`);
+                break;
+            default:
+                break;
+        }
+    }
+
+    render() {
+        const tabList = [
+            {
+                key: 'overview',
+                tab: '日志概要',
+            },
+            {
+                key: 'audit',
+                tab: '审计日志',
+            },
+            {
+                key: 'query',
+                tab: '查询日志',
+            },
+            {
+                key: 'slow',
+                tab: '慢日志',
+            }
+        ];
+
+        const { match, children, location } = this.props;
+
+        return (
+            <PageHeaderWrapper
+                tabList={tabList}
+                tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
+                onTabChange={this.handleTabChange}
+            >
+                {children}
+            </PageHeaderWrapper>
+        );
+    }
+}
+
+export default Overview;
diff --git a/web/src/pages/Settings/Logs/Overview.js b/web/src/pages/Settings/Logs/Overview.js
new file mode 100644
index 00000000..3e4f2960
--- /dev/null
+++ b/web/src/pages/Settings/Logs/Overview.js
@@ -0,0 +1,26 @@
+import router from 'umi/router';
+import { connect } from 'dva';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import React, {Component, Fragment} from 'react';
+
+import {Col, Divider,Card, Form, Icon, Input, Row, Select, Table} from 'antd';
+import {formatMessage} from 'umi/locale';
+
+const {Option} = Select;
+
+const FormItem = Form.Item;
+const {TextArea} = Input;
+
+
+@connect()
+class Overview extends Component {
+
+    render() {
+        return (
+            <Card>Overview</Card>
+        );
+    }
+}
+
+export default Overview;
diff --git a/web/src/pages/Settings/Security/Audit.js b/web/src/pages/Settings/Security/Audit.js
deleted file mode 100644
index 230c8f6f..00000000
--- a/web/src/pages/Settings/Security/Audit.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, {Component, Fragment} from 'react';
-
-import {Col, Divider,Card, Form, Icon, Input, Row, Select, Table} from 'antd';
-import {formatMessage} from 'umi/locale';
-
-const {Option} = Select;
-
-const FormItem = Form.Item;
-const {TextArea} = Input;
-
-
-@Form.create()
-class Audit extends Component {
-
-    componentDidMount() {
-    }
-
-    auditTable() {
-        const columns = [
-            {
-                title: 'ID',
-                dataIndex: 'key',
-                key: 'key',
-                render: text => <a>{text}</a>,
-            },
-            {
-                title: '用户名',
-                dataIndex: 'username',
-                key: 'username',
-            },
-            {
-                title: '消息日志',
-                dataIndex: 'message',
-                key: 'message',
-            }, {
-                title: '时间',
-                key: 'time',
-                dataIndex: 'time',
-            },
-            {
-                title: '操作',
-                key: 'action',
-                render: (text, record) => (
-                    <span>
-                        <a>详情</a>
-                    </span>
-                ),
-            },
-        ];
-
-        const data = [
-            {
-                key: '1',
-                username: 'admin',
-                enabled: true,
-                message: "User Login Success",
-                time: "Oct 19, 2019",
-
-            }, {
-                key: '2',
-                username: 'user',
-                enabled: true,
-                message: "User Login Failed",
-                time: "Oct 19, 2019",
-            },
-        ];
-        return (<Table columns={columns} dataSource={data} />);
-    }
-
-    render() {
-        return (
-            < Fragment >
-                < Card>{ this.auditTable() }</Card>
-            </Fragment>
-        );
-    }
-}
-
-export default Audit;