diff --git a/web/config/router.config.js b/web/config/router.config.js
index 542bcea3..cf86246a 100644
--- a/web/config/router.config.js
+++ b/web/config/router.config.js
@@ -259,12 +259,33 @@ export default [
           }, {
             path: '/settings/security',
             name: 'security',
+            component: './Settings/Security/Base',
             hideChildrenInMenu: true,
             routes: [
                 {
-                  path: '/settings/security',
-                  name: 'security',
-                  component: './Settings/Security/General',
+                    path: '/settings/security',
+                    redirect: '/settings/security/general',
+                },
+                {
+                    path: '/settings/security/general',
+                    name: 'general',
+                    component: './Settings/Security/General',
+                }, {
+                    path: '/settings/security/sso',
+                    name: 'sso',
+                    component: './Settings/Security/SSO',
+                }, {
+                    path: '/settings/security/roles',
+                    name: 'roles',
+                    component: './Settings/Security/Roles',
+                }, {
+                    path: '/settings/security/users',
+                    name: 'users',
+                    component: './Settings/Security/Users',
+                }, {
+                    path: '/settings/security/certs',
+                    name: 'certs',
+                    component: './Settings/Security/Certs',
                 },
             ]
           }, {
diff --git a/web/src/pages/Settings/Logs/Base.js b/web/src/pages/Settings/Logs/Base.js
index 04bb98e3..95634eda 100644
--- a/web/src/pages/Settings/Logs/Base.js
+++ b/web/src/pages/Settings/Logs/Base.js
@@ -15,7 +15,7 @@ const {TextArea} = Input;
 
 
 @connect()
-class Overview extends Component {
+class Base extends Component {
     handleTabChange = key => {
         const { match,children } = this.props;
         switch (key) {
@@ -70,4 +70,4 @@ class Overview extends Component {
     }
 }
 
-export default Overview;
+export default Base;
diff --git a/web/src/pages/Settings/Security/Base.js b/web/src/pages/Settings/Security/Base.js
new file mode 100644
index 00000000..b324a3af
--- /dev/null
+++ b/web/src/pages/Settings/Security/Base.js
@@ -0,0 +1,80 @@
+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 'general':
+                router.push(`${match.url}/general`);
+                break;
+            case 'sso':
+                router.push(`${match.url}/sso`);
+                break;
+            case 'roles':
+                router.push(`${match.url}/roles`);
+                break;
+            case 'users':
+                router.push(`${match.url}/users`);
+                break;
+            case 'certs':
+                router.push(`${match.url}/certs`);
+                break;
+            default:
+                break;
+        }
+    }
+
+    render() {
+        const tabList = [
+            {
+                key: 'general',
+                tab: '基础设置',
+            },
+            {
+                key: 'sso',
+                tab: '单点登录',
+            },
+            {
+                key: 'roles',
+                tab: '角色管理',
+            },
+            {
+                key: 'users',
+                tab: '用户管理',
+            },
+            {
+                key: 'certs',
+                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/Settings/Security/Certs.js b/web/src/pages/Settings/Security/Certs.js
new file mode 100644
index 00000000..1684430d
--- /dev/null
+++ b/web/src/pages/Settings/Security/Certs.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 Certs extends Component {
+
+    render() {
+        return (
+            <Card>Certs</Card>
+        );
+    }
+}
+
+export default Certs;
diff --git a/web/src/pages/Settings/Security/General.js b/web/src/pages/Settings/Security/General.js
index 5840d66e..c197db46 100644
--- a/web/src/pages/Settings/Security/General.js
+++ b/web/src/pages/Settings/Security/General.js
@@ -1,305 +1,88 @@
+import {formatMessage, FormattedMessage} from 'umi/locale';
+
 import React, {Component, Fragment} from 'react';
 import {connect} from 'dva';
-import {Card, Form, Input, Select,Switch, Button, message, Divider, Drawer, Descriptions} from 'antd';
+import {Card, Form, Input, Select,Switch, Button,Row, message,Col, Divider, Drawer, Descriptions} from 'antd';
 import { Table, Tag } from 'antd';
 import { Icon } from 'antd';
 
-const {Option} = Select;
-import {formatMessage, FormattedMessage} from 'umi/locale';
+import router from 'umi/router';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import styles from './General.less';
-import PhoneView from "../../Account/Settings/PhoneView";
+
+
+const {Option} = Select;
 
 const FormItem = Form.Item;
 const {TextArea} = Input;
-import {Row, Col} from 'antd';
 
-const operationTabList = [
-    {
-        key: 'tab1',
-        tab: '基本设置',
-    },
-    {
-        key: 'tab2',
-        tab: 'SSO 集成',
-    },
-    {
-        key: 'tab3',
-        tab: '角色管理',
-    },
-    {
-        key: 'tab4',
-        tab: '用户管理',
-    },
-    {
-        key: 'tab5',
-        tab: '证书管理',
-    }
-];
-
-// @connect(({logstash,loading }) => ({
-//     data: logstash.logstash,
-//     loading: loading.models.logstash,
-//     submitting: loading.effects['logstash/submitLogstashConfig'],
-// }))
-
-@Form.create()
+@connect()
 class General extends Component {
-    state = {
-        operationkey: 'tab1',
-        snapshotVisible: false,
-        repVisible: false,
-    };
 
-    componentDidMount() {
-        // message.loading('数据加载中..', 'initdata');
-        // const { dispatch } = this.props;
-        // dispatch({
-        //   type: 'logstash/queryInitialLogstashConfig',
-        // });
-    }
-
-    onOperationTabChange = key => {
-        this.setState({operationkey: key});
-    };
-
-    ssoSettings() {
-        const columns = [
-            {
-                title: 'ID',
-                dataIndex: 'key',
-                key: 'key',
-                render: text => <a>{text}</a>,
-            },
-            {
-                title: '名称',
-                dataIndex: 'name',
-                key: 'name',
-            },
-            {
-                title: '类型',
-                dataIndex: 'type',
-                key: 'type',
-            },
-            {
-                title: '启用',
-                key: 'enabled',
-                dataIndex: 'enabled',
-                render: text => <Icon type="check-square" />,
-            }, {
-                title: '最后更新时间',
-                key: 'modify_time',
-                dataIndex: 'modify_time',
-            }, {
-                title: '创建时间',
-                key: 'create_time',
-                dataIndex: 'create_time',
-            },
-            {
-                title: '操作',
-                key: 'action',
-                render: (text, record) => (
-                    <span>
-        <a>修改</a>
-        <Divider type="vertical" />
-        <a>删除</a>
-      </span>
-                ),
-            },
-        ];
-
-        const data = [
-            {
-                key: '1',
-                name: 'github',
-                type: "OAuth2",
-                enabled: true,
-                modify_time: "Mar 01, 2020",
-                create_time: "Oct 19, 2019",
-            },{
-                key: '2',
-                name: 'okta',
-                type: "OAuth2",
-                enabled: true,
-                modify_time: "Mar 02, 2020",
-                create_time: "Oct 29, 2019",
-            },
-        ];
-        return (<Table columns={columns} dataSource={data} />);
-    }
-
-    userSettings() {
-        const columns = [
-            {
-                title: 'ID',
-                dataIndex: 'key',
-                key: 'key',
-                render: text => <a>{text}</a>,
-            },
-            {
-                title: '用户名',
-                dataIndex: 'user_name',
-                key: 'user_name',
-            },
-            {
-                title: '电子邮件地址',
-                dataIndex: 'email',
-                key: 'email',
-            },
-            {
-                title: '已激活',
-                key: 'enabled',
-                dataIndex: 'enabled',
-                render: text => <Icon type="check-square" />,
-            }, {
-                title: '管理员',
-                key: 'is_admin',
-                dataIndex: 'is_admin',
-                render: (text, record) => {
-                    if (record.is_admin){
-                        return <Icon type="check-square" />
-                    }else{
-                        return <Icon type="border" />
-                    }
-                },
-            }, {
-                title: '创建时间',
-                key: 'create_time',
-                dataIndex: 'create_time',
-            },{
-                title: '上次登录',
-                key: 'last_login_time',
-                dataIndex: 'last_login_time',
-            },
-            {
-                title: '操作',
-                key: 'action',
-                render: (text, record) => (
-                    <span>
-        <a>修改</a>
-        <Divider type="vertical" />
-        <a>删除</a>
-      </span>
-                ),
-            },
-        ];
-
-        const data = [
-            {
-                key: '1',
-                user_name: 'admin',
-                email: "admin@infini.ltd",
-                enabled: true,
-                is_admin: true,
-                create_time: "Oct 19, 2019",
-                last_login_time: "Mar 01, 2020",
-
-            }, {
-                key: '2',
-                user_name: 'user',
-                email: "user@infini.ltd",
-                enabled: true,
-                is_admin: false,
-                create_time: "Oct 19, 2019",
-                last_login_time: "Mar 01, 2020",
-
-            },
-        ];
-        return (<Table columns={columns} dataSource={data} />);
-    }
-
-    generalSettings = () => {
+    render() {
         const {
             form: {getFieldDecorator},
         } = this.props;
+
         return (
-            < div >
-            < Row
-        type = "flex"
-        justify = "end" >
-            < Col
-        span = {16} >
-            < div > < Form
-        layout = "vertical"
-        hideRequiredMark >
+            <Card>
+                <div>
+                <Row
+                    type = "flex"
+                    justify = "end" >
+                    <Col
+                        span = {16} >
+                        <div>
+                            <Form layout = "vertical"
+                                  hideRequiredMark >
 
 
-        <Form.Item label = {formatMessage({id: 'app.settings.security.auth2factor_enabled'})}>
-            {getFieldDecorator('auth2factor_enabled', {
-                initialValue: true,
-                rules: [
-                    {
-                        required: true,
-                        message: formatMessage({id: 'app.settings.security.auth2factor_enabled-message'}, {}),
-                    },
-                ],
-            })(
-                <Switch defaultChecked onChange={()=>{}} />
-            )}
-        </Form.Item>
+                                <Form.Item label = {formatMessage({id: 'app.settings.security.auth2factor_enabled'})}>
+                                    {getFieldDecorator('auth2factor_enabled', {
+                                        initialValue: true,
+                                        rules: [
+                                            {
+                                                required: true,
+                                                message: formatMessage({id: 'app.settings.security.auth2factor_enabled-message'}, {}),
+                                            },
+                                        ],
+                                    })(
+                                        <Switch defaultChecked onChange={()=>{}} />
+                                    )}
+                                </Form.Item>
 
-        < FormItem
-        label = {formatMessage({id: 'app.settings.security.audit_enabled'})} >
-            {getFieldDecorator('audit_enabled',
-        {
-            rules: [
-                {
-                    required: true,
-                    message: formatMessage({id: 'app.settings.security.audit_enabled-message'}, {}),
-                },
-            ],
-        }
-    )
-            (
-                <Switch defaultChecked onChange={()=>{}} />
-            )
-    }
-    </FormItem>
+                                <FormItem label = {formatMessage({id: 'app.settings.security.audit_enabled'})} >
+                                    {getFieldDecorator('audit_enabled',
+                                        {
+                                            rules: [
+                                                {
+                                                    required: true,
+                                                    message: formatMessage({id: 'app.settings.security.audit_enabled-message'}, {}),
+                                                },
+                                            ],
+                                        }
+                                    )
+                                    (
+                                        <Switch defaultChecked onChange={()=>{}} />
+                                    )
+                                    }
+                                </FormItem>
 
 
-        < Button
-        type = "primary" >
-            < FormattedMessage
-        id = "app.settings.security.update"
-        defaultMessage = "Update Setting"
-            / >
-            < /Button>
-            < /Form></
-        div >
-        < /Col>
-        < Col
-        span = {8} >
-
-            < /Col>
-            < /Row>
-            < /div>
-    )
-        ;
-    };
-
-    render() {
-        const {operationkey} = this.state;
-        const contentList = {
-            tab1: ( < div > {this.generalSettings()} < /div>),
-            tab2: ( < div > {this.ssoSettings()}< /div>),
-        tab3: ( < div > 角色管理 < /div>),
-        tab4: ( < div > {this.userSettings()} < /div>),
-        tab5: ( < div > 证书管理 < /div>),
-    }
-        ;
-        return (
-            < Fragment >
-            < Card
-        className = {styles.tabsCard}
-        bordered = {false}
-        tabList = {operationTabList}
-        onTabChange = {this.onOperationTabChange}
-            >
-            {contentList[operationkey]}
-            < /Card>
-            < /Fragment>
-    )
-        ;
+                                <Button
+                                    type = "primary" >
+                                    <FormattedMessage
+                                        id = "app.settings.security.update"
+                                        defaultMessage = "Update Setting" />
+                                </Button>
+                            </Form>
+                        </div>
+                    </Col>
+                    <Col span = {8} ></Col>
+                </Row>
+            </div></Card>
+        );
     }
 }
 
-export default General;
+export default Form.create()(General);
diff --git a/web/src/pages/Settings/Security/Roles.js b/web/src/pages/Settings/Security/Roles.js
new file mode 100644
index 00000000..77a287e4
--- /dev/null
+++ b/web/src/pages/Settings/Security/Roles.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 Roles extends Component {
+
+    render() {
+        return (
+            <Card>Roles</Card>
+        );
+    }
+}
+
+export default Roles;
diff --git a/web/src/pages/Settings/Security/SSO.js b/web/src/pages/Settings/Security/SSO.js
new file mode 100644
index 00000000..08102f2e
--- /dev/null
+++ b/web/src/pages/Settings/Security/SSO.js
@@ -0,0 +1,87 @@
+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: 'name',
+        key: 'name',
+    },
+    {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+    },
+    {
+        title: '启用',
+        key: 'enabled',
+        dataIndex: 'enabled',
+        render: text => <Icon type="check-square" />,
+    }, {
+        title: '最后更新时间',
+        key: 'modify_time',
+        dataIndex: 'modify_time',
+    }, {
+        title: '创建时间',
+        key: 'create_time',
+        dataIndex: 'create_time',
+    },
+    {
+        title: '操作',
+        key: 'action',
+        render: (text, record) => (
+            <span>
+        <a>修改</a>
+        <Divider type="vertical" />
+        <a>删除</a>
+      </span>
+        ),
+    },
+];
+
+const data = [
+    {
+        key: '1',
+        name: 'github',
+        type: "OAuth2",
+        enabled: true,
+        modify_time: "Mar 01, 2020",
+        create_time: "Oct 19, 2019",
+    },{
+        key: '2',
+        name: 'okta',
+        type: "OAuth2",
+        enabled: true,
+        modify_time: "Mar 02, 2020",
+        create_time: "Oct 29, 2019",
+    },
+];
+
+@connect()
+class SSO extends Component {
+
+    render() {
+        return (
+            <Card><Table columns={columns} dataSource={data} /></Card>
+        );
+    }
+}
+
+export default SSO;
diff --git a/web/src/pages/Settings/Security/Users.js b/web/src/pages/Settings/Security/Users.js
new file mode 100644
index 00000000..a4951bfd
--- /dev/null
+++ b/web/src/pages/Settings/Security/Users.js
@@ -0,0 +1,102 @@
+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: 'user_name',
+        key: 'user_name',
+    },
+    {
+        title: '电子邮件地址',
+        dataIndex: 'email',
+        key: 'email',
+    },
+    {
+        title: '已激活',
+        key: 'enabled',
+        dataIndex: 'enabled',
+        render: text => <Icon type="check-square" />,
+    }, {
+        title: '管理员',
+        key: 'is_admin',
+        dataIndex: 'is_admin',
+        render: (text, record) => {
+            if (record.is_admin){
+                return <Icon type="check-square" />
+            }else{
+                return <Icon type="border" />
+            }
+        },
+    }, {
+        title: '创建时间',
+        key: 'create_time',
+        dataIndex: 'create_time',
+    },{
+        title: '上次登录',
+        key: 'last_login_time',
+        dataIndex: 'last_login_time',
+    },
+    {
+        title: '操作',
+        key: 'action',
+        render: (text, record) => (
+            <span>
+        <a>修改</a>
+        <Divider type="vertical" />
+        <a>删除</a>
+      </span>
+        ),
+    },
+];
+
+const data = [
+    {
+        key: '1',
+        user_name: 'admin',
+        email: "admin@infini.ltd",
+        enabled: true,
+        is_admin: true,
+        create_time: "Oct 19, 2019",
+        last_login_time: "Mar 01, 2020",
+
+    }, {
+        key: '2',
+        user_name: 'user',
+        email: "user@infini.ltd",
+        enabled: true,
+        is_admin: false,
+        create_time: "Oct 19, 2019",
+        last_login_time: "Mar 01, 2020",
+
+    },
+];
+
+@connect()
+class Users extends Component {
+
+    render() {
+        return (
+            <Card><Table columns={columns} dataSource={data} /></Card>
+        );
+    }
+}
+
+export default Users;