diff --git a/web/config/router.config.js b/web/config/router.config.js
index cf86246a..b7ec9cc5 100644
--- a/web/config/router.config.js
+++ b/web/config/router.config.js
@@ -247,73 +247,89 @@ export default [
 
       //settings
       {
-        path: '/settings',
-        name: 'settings',
+        path: '/system',
+        name: 'system',
         icon: 'setting',
-        // component: './List/TableList',
         routes: [
           {
-            path: '/settings/global',
-            name: 'global',
-            component: './Settings/Global/Global',
-          }, {
-            path: '/settings/security',
+            path: '/system/settings',
+            name: 'settings',
+            component: './System/Settings/Base',
+              hideChildrenInMenu: true,
+              routes: [
+                  {
+                      path: '/system/settings',
+                      redirect: '/system/settings/global',
+                  },
+                  {
+                      path: '/system/settings/global',
+                      name: 'global',
+                      component: './System/Settings/Global',
+                  }, {
+                      path: '/system/settings/gateway',
+                      name: 'gateway',
+                      component: './System/Settings/Gateway',
+                  },
+              ]
+          },
+            {
+            path: '/system/security',
             name: 'security',
-            component: './Settings/Security/Base',
+            component: './System/Security/Base',
             hideChildrenInMenu: true,
             routes: [
                 {
-                    path: '/settings/security',
-                    redirect: '/settings/security/general',
+                    path: '/system/security',
+                    redirect: '/system/security/general',
                 },
                 {
-                    path: '/settings/security/general',
+                    path: '/system/security/general',
                     name: 'general',
-                    component: './Settings/Security/General',
+                    component: './System/Security/General',
                 }, {
-                    path: '/settings/security/sso',
+                    path: '/system/security/sso',
                     name: 'sso',
-                    component: './Settings/Security/SSO',
+                    component: './System/Security/SSO',
                 }, {
-                    path: '/settings/security/roles',
+                    path: '/system/security/roles',
                     name: 'roles',
-                    component: './Settings/Security/Roles',
+                    component: './System/Security/Roles',
                 }, {
-                    path: '/settings/security/users',
+                    path: '/system/security/users',
                     name: 'users',
-                    component: './Settings/Security/Users',
+                    component: './System/Security/Users',
                 }, {
-                    path: '/settings/security/certs',
+                    path: '/system/security/certs',
                     name: 'certs',
-                    component: './Settings/Security/Certs',
+                    component: './System/Security/Certs',
                 },
             ]
           }, {
-            path: '/settings/logs',
+            path: '/system/logs',
             name: 'logs',
-            component: './Settings/Logs/Base',
+            component: './System/Logs/Base',
             hideChildrenInMenu: true,
             routes: [
             {
-                path: '/settings/logs',
-                redirect: '/settings/logs/overview',
+                path: '/system/logs',
+                redirect: '/system/logs/overview',
             },
             {
-                path: '/settings/logs/overview',
+                path: '/system/logs/overview',
                 name: 'overview',
-                component: './Settings/Logs/Overview',
+                component: './System/Logs/Overview',
             }, {
-                path: '/settings/logs/audit',
+                path: '/system/logs/audit',
                 name: 'audit',
-                component: './Settings/Logs/Audit',
+                component: './System/Logs/Audit',
             }, {
-                path: '/settings/logs/query',
+                path: '/system/logs/query',
                 name: 'query',
-                component: './Settings/Logs/Audit',
+                component: './System/Logs/Audit',
             }, {
-                path: '/settings/logs/slow',
+                path: '/system/logs/slow',
                 name: 'slow',
-                component: './Settings/Logs/Audit',
+                component: './System/Logs/Audit',
             },
             ]
           },
diff --git a/web/src/locales/zh-CN.js b/web/src/locales/zh-CN.js
index b73b27a8..8b02cc24 100644
--- a/web/src/locales/zh-CN.js
+++ b/web/src/locales/zh-CN.js
@@ -104,20 +104,23 @@ export default {
   'menu.search.analyzer': '分词管理',
   'menu.search.nlp': '自然语言处理',
 
-  'menu.settings': '系统设置',
-  'menu.settings.global': '全局设置',
-  'menu.settings.security': '安全设置',
-  'menu.settings.security.general': '基础设置',
-  'menu.settings.security.sso': '单点登录',
-  'menu.settings.security.roles': '角色管理',
-  'menu.settings.security.users': '用户管理',
-  'menu.settings.security.certs': '证书管理',
+  'menu.system': '系统管理',
+  'menu.system.settings': '系统设置',
+  'menu.system.settings.global': '全局设置',
+  'menu.system.settings.gateway': '网关设置',
 
-  'menu.settings.logs': '系统日志',
-  'menu.settings.logs.overview': '日志概要',
-  'menu.settings.logs.audit': '审计日志',
-  'menu.settings.logs.query': '查询日志',
-  'menu.settings.logs.slow': '慢日志',
+  'menu.system.security': '安全设置',
+  'menu.system.security.general': '基础设置',
+  'menu.system.security.sso': '单点登录',
+  'menu.system.security.roles': '角色管理',
+  'menu.system.security.users': '用户管理',
+  'menu.system.security.certs': '证书管理',
+
+  'menu.system.logs': '系统日志',
+  'menu.system.logs.overview': '日志概要',
+  'menu.system.logs.audit': '审计日志',
+  'menu.system.logs.query': '查询日志',
+  'menu.system.logs.slow': '慢日志',
 
 
   'menu.form': '表单页',
diff --git a/web/src/pages/Settings/Global/Global.js b/web/src/pages/Settings/Global/Global.js
deleted file mode 100644
index 0a831963..00000000
--- a/web/src/pages/Settings/Global/Global.js
+++ /dev/null
@@ -1,175 +0,0 @@
-import React, {Component, Fragment} from 'react';
-import {connect} from 'dva';
-import {Card, Form, Input,Switch, Select, Button, message, Divider, Drawer, Descriptions} from 'antd';
-
-const {Option} = Select;
-import {formatMessage, FormattedMessage} from 'umi/locale';
-
-const FormItem = Form.Item;
-const {TextArea} = Input;
-import {Row, Col} from 'antd';
-
-const operationTabList = [
-    {
-        key: 'tab1',
-        tab: '全局设置',
-    },
-];
-
-@Form.create()
-class Global extends Component {
-    state = {
-        operationkey: 'tab1',
-    };
-
-    componentDidMount() {
-    }
-
-    onOperationTabChange = key => {
-        this.setState({operationkey: key});
-    };
-
-    globalSettings = () => {
-        const {
-            form: {getFieldDecorator},
-        } = this.props;
-        return (
-            < div >
-            < Row
-        type = "flex"
-        justify = "end" >
-            < Col
-        span = {16} >
-            < div > < Form
-        layout = "vertical"
-        hideRequiredMark >
-
-        < FormItem
-            label = {formatMessage({id: 'app.settings.global.site_name'})} >
-            {getFieldDecorator('site_name',
-                {
-                    rules: [
-                        {
-                            required: true,
-                            message: formatMessage({id: 'app.settings.global.site_name-message'}, {}),
-                        },
-                    ],
-                }
-            )
-            ( < Input / >)
-            }
-        </FormItem>
-
-        < FormItem
-        label = {formatMessage({id: 'app.settings.global.domain'})} >
-            {getFieldDecorator('domain',
-            {
-                rules: [
-                    {
-                        required: true,
-                        message: formatMessage({id: 'app.settings.global.domain-message'}, {}),
-                    },
-                ],
-            }
-        )
-            ( < Input / >)
-        }
-        </FormItem>
-                < FormItem
-                label = {formatMessage({id: 'app.settings.global.listen_addr'})} >
-                {getFieldDecorator('listen_addr',
-                {
-                rules: [
-                {
-                required: true,
-                message: formatMessage({id: 'app.settings.global.listen_addr-message'}, {}),
-                },
-                ],
-                }
-                )
-                ( < Input / >)
-                }
-        </FormItem>
-                <Form.Item label = {formatMessage({id: 'app.settings.global.is_tls'})}>
-                {getFieldDecorator('isTLS', {
-                initialValue: true,
-                rules: [
-                {
-                required: true,
-                message: formatMessage({id: 'app.settings.global.is_tls-message'}, {}),
-                },
-                ],
-                })(
-                <Switch defaultChecked onChange={()=>{}} />
-                )}
-                </Form.Item>
-
-
-        < FormItem
-        label = {formatMessage({id: 'app.settings.global.data_path'})} >
-        {getFieldDecorator('work_dir',
-        {
-        rules: [
-        {
-        required: true,
-        message: formatMessage({id: 'app.settings.global.data_path-message'}, {}),
-        },
-        ],
-        }
-        )
-        ( < Input / >)
-        }
-        </FormItem>
-
-        < FormItem
-        label = {formatMessage({id: 'app.settings.global.log_path'})} >
-        {getFieldDecorator('work_dir',
-        {
-        rules: [
-        {
-        required: true,
-        message: formatMessage({id: 'app.settings.global.log_path-message'}, {}),
-        },
-        ],
-        }
-        )
-        ( < Input / >)
-        }
-        </FormItem>
-
-
-        < Button type = "primary" >
-            < FormattedMessage
-        id = "app.settings.global.update"
-        defaultMessage = "Update Setting" /> </Button>
-            < /Form> </div>
-        < /Col>
-        < Col span = {8} >< /Col>
-            < /Row>
-            < /div>
-    )
-        ;
-    };
-
-    render() {
-        const {operationkey} = this.state;
-        const contentList = {
-            tab1: ( < div > {this.globalSettings()} < /div>),
-    }
-        ;
-        return (
-            < Fragment >
-            < Card
-        bordered = {false}
-        tabList = {operationTabList}
-        onTabChange = {this.onOperationTabChange}
-            >
-            {contentList[operationkey]}
-            < /Card>
-            < /Fragment>
-    )
-        ;
-    }
-}
-
-export default Global;
diff --git a/web/src/pages/Settings/Logs/Audit.js b/web/src/pages/System/Logs/Audit.js
similarity index 100%
rename from web/src/pages/Settings/Logs/Audit.js
rename to web/src/pages/System/Logs/Audit.js
diff --git a/web/src/pages/Settings/Logs/Base.js b/web/src/pages/System/Logs/Base.js
similarity index 100%
rename from web/src/pages/Settings/Logs/Base.js
rename to web/src/pages/System/Logs/Base.js
diff --git a/web/src/pages/Settings/Logs/Overview.js b/web/src/pages/System/Logs/Overview.js
similarity index 100%
rename from web/src/pages/Settings/Logs/Overview.js
rename to web/src/pages/System/Logs/Overview.js
diff --git a/web/src/pages/Settings/Security/Base.js b/web/src/pages/System/Security/Base.js
similarity index 100%
rename from web/src/pages/Settings/Security/Base.js
rename to web/src/pages/System/Security/Base.js
diff --git a/web/src/pages/Settings/Security/Certs.js b/web/src/pages/System/Security/Certs.js
similarity index 100%
rename from web/src/pages/Settings/Security/Certs.js
rename to web/src/pages/System/Security/Certs.js
diff --git a/web/src/pages/Settings/Security/General.js b/web/src/pages/System/Security/General.js
similarity index 100%
rename from web/src/pages/Settings/Security/General.js
rename to web/src/pages/System/Security/General.js
diff --git a/web/src/pages/Settings/Security/General.less b/web/src/pages/System/Security/General.less
similarity index 100%
rename from web/src/pages/Settings/Security/General.less
rename to web/src/pages/System/Security/General.less
diff --git a/web/src/pages/Settings/Security/Roles.js b/web/src/pages/System/Security/Roles.js
similarity index 100%
rename from web/src/pages/Settings/Security/Roles.js
rename to web/src/pages/System/Security/Roles.js
diff --git a/web/src/pages/Settings/Security/SSO.js b/web/src/pages/System/Security/SSO.js
similarity index 100%
rename from web/src/pages/Settings/Security/SSO.js
rename to web/src/pages/System/Security/SSO.js
diff --git a/web/src/pages/Settings/Security/Users.js b/web/src/pages/System/Security/Users.js
similarity index 100%
rename from web/src/pages/Settings/Security/Users.js
rename to web/src/pages/System/Security/Users.js
diff --git a/web/src/pages/System/Settings/Base.js b/web/src/pages/System/Settings/Base.js
new file mode 100644
index 00000000..9f18b2a5
--- /dev/null
+++ b/web/src/pages/System/Settings/Base.js
@@ -0,0 +1,59 @@
+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 Base extends Component {
+    handleTabChange = key => {
+        const { match,children } = this.props;
+        switch (key) {
+            case 'global':
+                router.push(`${match.url}/global`);
+                break;
+            case 'gateway':
+                router.push(`${match.url}/gateway`);
+                break;
+            default:
+                break;
+        }
+    }
+
+    render() {
+        const tabList = [
+            {
+                key: 'global',
+                tab: '全局设置',
+            },
+            {
+                key: 'gateway',
+                tab: '网关设置',
+            },
+        ];
+
+        const { match, children, location } = this.props;
+
+        return (
+            <PageHeaderWrapper
+                tabList={tabList}
+                tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
+                onTabChange={this.handleTabChange}
+            >
+                {children}
+            </PageHeaderWrapper>
+        );
+    }
+}
+
+export default Base;
diff --git a/web/src/pages/System/Settings/Gateway.js b/web/src/pages/System/Settings/Gateway.js
new file mode 100644
index 00000000..f0098f3b
--- /dev/null
+++ b/web/src/pages/System/Settings/Gateway.js
@@ -0,0 +1,25 @@
+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 Gateway extends Component {
+
+    render() {
+        return (
+            <Card>Gateway</Card>
+        );
+    }
+}
+
+export default Gateway;
diff --git a/web/src/pages/System/Settings/Global.js b/web/src/pages/System/Settings/Global.js
new file mode 100644
index 00000000..ef593758
--- /dev/null
+++ b/web/src/pages/System/Settings/Global.js
@@ -0,0 +1,139 @@
+import React, {Component, Fragment} from 'react';
+import {Button, Card, Col, Form, Input, Row, Select, Switch} from 'antd';
+import {formatMessage, FormattedMessage} from 'umi/locale';
+
+const {Option} = Select;
+
+const FormItem = Form.Item;
+const {TextArea} = Input;
+
+@Form.create()
+class Global extends Component {
+
+    componentDidMount() {
+    }
+
+    render() {
+        const {
+            form: {getFieldDecorator},
+        } = this.props;
+        return (
+            <Card>
+                <Row
+                    type="flex"
+                    justify="end">
+                    <Col
+                        span={16}>
+                        <div><Form
+                            layout="vertical"
+                            hideRequiredMark>
+
+                            <FormItem
+                                label={formatMessage({id: 'app.settings.global.site_name'})}>
+                                {getFieldDecorator('site_name',
+                                    {
+                                        rules: [
+                                            {
+                                                required: true,
+                                                message: formatMessage({id: 'app.settings.global.site_name-message'}, {}),
+                                            },
+                                        ],
+                                    }
+                                )
+                                (<Input/>)
+                                }
+                            </FormItem>
+
+                            <FormItem
+                                label={formatMessage({id: 'app.settings.global.domain'})}>
+                                {getFieldDecorator('domain',
+                                    {
+                                        rules: [
+                                            {
+                                                required: true,
+                                                message: formatMessage({id: 'app.settings.global.domain-message'}, {}),
+                                            },
+                                        ],
+                                    }
+                                )
+                                (<Input/>)
+                                }
+                            </FormItem>
+                            <FormItem
+                                label={formatMessage({id: 'app.settings.global.listen_addr'})}>
+                                {getFieldDecorator('listen_addr',
+                                    {
+                                        rules: [
+                                            {
+                                                required: true,
+                                                message: formatMessage({id: 'app.settings.global.listen_addr-message'}, {}),
+                                            },
+                                        ],
+                                    }
+                                )
+                                (<Input/>)
+                                }
+                            </FormItem>
+                            <Form.Item label={formatMessage({id: 'app.settings.global.is_tls'})}>
+                                {getFieldDecorator('isTLS', {
+                                    initialValue: true,
+                                    rules: [
+                                        {
+                                            required: true,
+                                            message: formatMessage({id: 'app.settings.global.is_tls-message'}, {}),
+                                        },
+                                    ],
+                                })(
+                                    <Switch defaultChecked onChange={() => {
+                                    }}/>
+                                )}
+                            </Form.Item>
+
+
+                            <FormItem
+                                label={formatMessage({id: 'app.settings.global.data_path'})}>
+                                {getFieldDecorator('work_dir',
+                                    {
+                                        rules: [
+                                            {
+                                                required: true,
+                                                message: formatMessage({id: 'app.settings.global.data_path-message'}, {}),
+                                            },
+                                        ],
+                                    }
+                                )
+                                (<Input/>)
+                                }
+                            </FormItem>
+
+                            <FormItem
+                                label={formatMessage({id: 'app.settings.global.log_path'})}>
+                                {getFieldDecorator('work_dir',
+                                    {
+                                        rules: [
+                                            {
+                                                required: true,
+                                                message: formatMessage({id: 'app.settings.global.log_path-message'}, {}),
+                                            },
+                                        ],
+                                    }
+                                )
+                                (<Input/>)
+                                }
+                            </FormItem>
+
+
+                            <Button type="primary">
+                                <FormattedMessage
+                                    id="app.settings.global.update"
+                                    defaultMessage="Update Setting"/> </Button>
+                        </Form></div>
+                    </Col>
+                    <Col span={8}></Col>
+                </Row>
+            </Card>
+        );
+    }
+}
+
+export default Global;