diff --git a/src/dashboard/config/router.config.js b/src/dashboard/config/router.config.js
index 9096e3ea4..50687602e 100755
--- a/src/dashboard/config/router.config.js
+++ b/src/dashboard/config/router.config.js
@@ -29,7 +29,7 @@ export default [
             path: '/overview',
             name: 'overview',
             icon: 'eye',
-            component: './Overview/Overview',
+            component: './Overview/index',
           },
           {
             path: '/operator',
@@ -99,7 +99,7 @@ export default [
               },
             ],
           },
-        ]
+        ],
       },
       {
         component: '404',
diff --git a/src/dashboard/config/theme.js b/src/dashboard/config/theme.js
index 0d1be37be..bb835503d 100644
--- a/src/dashboard/config/theme.js
+++ b/src/dashboard/config/theme.js
@@ -16,8 +16,6 @@ module.exports = {
   'border-color-split': '#152935',
   'text-color ': 'fade(#fff, 80%)',
   'text-color-secondary ': 'fade(#dfe6eb, 80%)',
-  'text-color-warning': '#efc100',
-  'text-color-danger': '#ff5050',
   'success-color': '#8cd211',
   'error-color': '#ff5050',
   'warning-color': '#efc100',
diff --git a/src/dashboard/package.json b/src/dashboard/package.json
index 0274af85f..0a6dcb214 100755
--- a/src/dashboard/package.json
+++ b/src/dashboard/package.json
@@ -52,7 +52,8 @@
   ],
   "dependencies": {
     "@antv/data-set": "^0.10.1",
-    "antd": "3.16.1",
+    "antd": "^4.2.5",
+    "@ant-design/icons": "^4.1.0",
     "bizcharts": "3.5.2-beta.1",
     "bizcharts-plugin-slider": "^2.1.1-beta.1",
     "classnames": "^2.2.6",
@@ -82,6 +83,8 @@
     "cello-paginator": "^1.0.1",
     "umi-request": "^1.2.19",
     "@ant-design/pro-layout": "^5.0.0",
+    "umi": "^3.1.4",
+    "redux": "^4.0.5",
     "validator": "^11.0.0"
   },
   "devDependencies": {
@@ -126,7 +129,6 @@
     "tslint-config-prettier": "^1.17.0",
     "tslint-react": "^3.6.0",
     "faker": "^4.1.0",
-    "umi": "^3.1.4",
     "@umijs/preset-react": "^1.2.2"
   },
   "engines": {
diff --git a/src/dashboard/src/components/GlobalHeader/RightContent.js b/src/dashboard/src/components/GlobalHeader/RightContent.js
index 1e9ed0f34..cde1acd56 100644
--- a/src/dashboard/src/components/GlobalHeader/RightContent.js
+++ b/src/dashboard/src/components/GlobalHeader/RightContent.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { injectIntl } from 'umi';
-import { Spin, Menu, Icon, Avatar } from 'antd';
+import { Spin, Menu, Avatar } from 'antd';
+import { LogoutOutlined } from '@ant-design/icons';
 import HeaderDropdown from '../HeaderDropdown';
 import SelectLang from '../SelectLang';
 import styles from './index.less';
@@ -11,10 +12,10 @@ class GlobalHeaderRight extends PureComponent {
     const menu = (
       <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
         <Menu.Item key="logout">
-          <Icon type="logout" />
+          <LogoutOutlined />
           {intl.formatMessage({
             id: 'menu.account.logout',
-            defaultMessage: 'logout'
+            defaultMessage: 'logout',
           })}
         </Menu.Item>
       </Menu>
@@ -41,4 +42,4 @@ class GlobalHeaderRight extends PureComponent {
   }
 }
 
-export default injectIntl(GlobalHeaderRight)
+export default injectIntl(GlobalHeaderRight);
diff --git a/src/dashboard/src/components/GlobalHeader/index.js b/src/dashboard/src/components/GlobalHeader/index.js
index 35bff3bd4..3853e81c1 100644
--- a/src/dashboard/src/components/GlobalHeader/index.js
+++ b/src/dashboard/src/components/GlobalHeader/index.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Icon } from 'antd';
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import { Link } from 'umi';
 import Debounce from 'lodash-decorators/debounce';
 import styles from './index.less';
@@ -32,7 +32,7 @@ export default class GlobalHeader extends PureComponent {
           </Link>
         )}
         <span className={styles.trigger} onClick={this.toggle}>
-          <Icon type={collapsed ? 'menu-unfold' : 'menu-fold'} />
+          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
         </span>
         <RightContent {...this.props} />
       </div>
diff --git a/src/dashboard/src/components/IconFont/index.js b/src/dashboard/src/components/IconFont/index.js
index 0b99dec3a..a497033cf 100644
--- a/src/dashboard/src/components/IconFont/index.js
+++ b/src/dashboard/src/components/IconFont/index.js
@@ -1,4 +1,4 @@
-import { Icon } from 'antd';
+import Icon from '@ant-design/icons';
 import { iconfontUrl as scriptUrl } from '../../defaultSettings';
 
 // 使用：
diff --git a/src/dashboard/src/components/Login/LoginItem.js b/src/dashboard/src/components/Login/LoginItem.js
index b3cc4d48a..fa449a5c6 100644
--- a/src/dashboard/src/components/Login/LoginItem.js
+++ b/src/dashboard/src/components/Login/LoginItem.js
@@ -73,10 +73,6 @@ class WrapFormItem extends Component {
   render() {
     const { count } = this.state;
 
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
-
     // 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props
     const {
       onChange,
@@ -98,10 +94,10 @@ class WrapFormItem extends Component {
     if (type === 'Captcha') {
       const inputProps = omit(otherProps, ['onGetCaptcha', 'countDown']);
       return (
-        <FormItem>
+        <FormItem name={name} {...options}>
           <Row gutter={8}>
             <Col span={16}>
-              {getFieldDecorator(name, options)(<Input {...customprops} {...inputProps} />)}
+              <Input {...customprops} {...inputProps} />
             </Col>
             <Col span={8}>
               <Button
@@ -118,8 +114,8 @@ class WrapFormItem extends Component {
       );
     }
     return (
-      <FormItem>
-        {getFieldDecorator(name, options)(<Input {...customprops} {...otherProps} />)}
+      <FormItem name={name} {...options}>
+        <Input {...customprops} {...otherProps} />
       </FormItem>
     );
   }
diff --git a/src/dashboard/src/components/Login/index.js b/src/dashboard/src/components/Login/index.js
index 79cc56deb..88d8ee86b 100644
--- a/src/dashboard/src/components/Login/index.js
+++ b/src/dashboard/src/components/Login/index.js
@@ -71,18 +71,18 @@ class Login extends Component {
     };
   };
 
-  handleSubmit = e => {
-    e.preventDefault();
-    const { active, type } = this.state;
-    const { form, onSubmit } = this.props;
-    const activeFileds = active[type];
-    form.validateFields(activeFileds, { force: true }, (err, values) => {
-      onSubmit(err, values);
-    });
+  handleSubmit = values => {
+    const { onSubmit } = this.props;
+    onSubmit(null, values);
+  };
+
+  onFinishFailed = errInfo => {
+    const { onSubmit } = this.props;
+    onSubmit(errInfo, null);
   };
 
   render() {
-    const { className, children } = this.props;
+    const { className, children, form } = this.props;
     const { type, tabs } = this.state;
     const TabChildren = [];
     const otherChildren = [];
@@ -100,7 +100,7 @@ class Login extends Component {
     return (
       <LoginContext.Provider value={this.getContext()}>
         <div className={classNames(className, styles.login)}>
-          <Form onSubmit={this.handleSubmit}>
+          <Form form={form} onFinish={this.handleSubmit} onFinishFailed={this.onFinishFailed}>
             {tabs.length ? (
               <React.Fragment>
                 <Tabs
@@ -129,4 +129,4 @@ Object.keys(LoginItem).forEach(item => {
   Login[item] = LoginItem[item];
 });
 
-export default Form.create()(Login);
+export default Login;
diff --git a/src/dashboard/src/components/Login/map.js b/src/dashboard/src/components/Login/map.js
index dfa881998..95a226a4a 100644
--- a/src/dashboard/src/components/Login/map.js
+++ b/src/dashboard/src/components/Login/map.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from 'antd';
+import { UserOutlined, LockOutlined, MobileOutlined, MailOutlined } from '@ant-design/icons';
 import styles from './index.less';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     props: {
       size: 'large',
       id: 'userName',
-      prefix: <Icon type="user" className={styles.prefixIcon} />,
+      prefix: <UserOutlined className={styles.prefixIcon} />,
       placeholder: 'admin',
     },
     rules: [
@@ -20,7 +20,7 @@ export default {
   Password: {
     props: {
       size: 'large',
-      prefix: <Icon type="lock" className={styles.prefixIcon} />,
+      prefix: <LockOutlined className={styles.prefixIcon} />,
       type: 'password',
       id: 'password',
       placeholder: '888888',
@@ -35,7 +35,7 @@ export default {
   Mobile: {
     props: {
       size: 'large',
-      prefix: <Icon type="mobile" className={styles.prefixIcon} />,
+      prefix: <MobileOutlined className={styles.prefixIcon} />,
       placeholder: 'mobile number',
     },
     rules: [
@@ -52,7 +52,7 @@ export default {
   Captcha: {
     props: {
       size: 'large',
-      prefix: <Icon type="mail" className={styles.prefixIcon} />,
+      prefix: <MailOutlined className={styles.prefixIcon} />,
       placeholder: 'captcha',
     },
     rules: [
diff --git a/src/dashboard/src/components/PageHeaderWrapper/GridContent.js b/src/dashboard/src/components/PageHeaderWrapper/GridContent.js
index 931ea20c9..65136c2e4 100644
--- a/src/dashboard/src/components/PageHeaderWrapper/GridContent.js
+++ b/src/dashboard/src/components/PageHeaderWrapper/GridContent.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'dva';
+import { connect } from 'umi';
 import styles from './GridContent.less';
 
 class GridContent extends PureComponent {
diff --git a/src/dashboard/src/components/SelectLang/index.js b/src/dashboard/src/components/SelectLang/index.js
index ee137dbfd..d499093cd 100644
--- a/src/dashboard/src/components/SelectLang/index.js
+++ b/src/dashboard/src/components/SelectLang/index.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { injectIntl, setLocale, getLocale } from 'umi';
-import { Menu, Icon } from 'antd';
+import { Menu } from 'antd';
+import { GlobalOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
@@ -37,11 +38,11 @@ class SelectLang extends PureComponent {
     return (
       <HeaderDropdown overlay={langMenu} placement="bottomRight">
         <span className={classNames(styles.dropDown, className)}>
-          <Icon type="global" title={intl.formatMessage({ id: 'navBar.lang' })} />
+          <GlobalOutlined title={intl.formatMessage({ id: 'navBar.lang' })} />
         </span>
       </HeaderDropdown>
     );
   }
 }
 
-export default injectIntl(SelectLang)
+export default injectIntl(SelectLang);
diff --git a/src/dashboard/src/components/SettingDrawer/BlockCheckbox.js b/src/dashboard/src/components/SettingDrawer/BlockCheckbox.js
index 49af42c73..37bccc53c 100644
--- a/src/dashboard/src/components/SettingDrawer/BlockCheckbox.js
+++ b/src/dashboard/src/components/SettingDrawer/BlockCheckbox.js
@@ -1,9 +1,10 @@
 import React from 'react';
-import { Tooltip, Icon } from 'antd';
+import { Tooltip } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
 import style from './index.less';
 
 const BlockChecbox = ({ value, onChange, list }) => (
-  <div className={style.blockChecbox} key={value}>
+  <div className={style.blockCheckbox} key={value}>
     {list.map(item => (
       <Tooltip title={item.title} key={item.key}>
         <div className={style.item} onClick={() => onChange(item.key)}>
@@ -14,7 +15,7 @@ const BlockChecbox = ({ value, onChange, list }) => (
               display: value === item.key ? 'block' : 'none',
             }}
           >
-            <Icon type="check" />
+            <CheckOutlined />
           </div>
         </div>
       </Tooltip>
diff --git a/src/dashboard/src/components/SettingDrawer/ThemeColor.js b/src/dashboard/src/components/SettingDrawer/ThemeColor.js
index c40e05590..06cc3ba3a 100644
--- a/src/dashboard/src/components/SettingDrawer/ThemeColor.js
+++ b/src/dashboard/src/components/SettingDrawer/ThemeColor.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Tooltip, Icon } from 'antd';
-import { formatMessage } from 'umi';
+import { Tooltip } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
+import { useIntl } from 'umi';
 import styles from './ThemeColor.less';
 
 const Tag = ({ color, check, ...rest }) => (
@@ -10,7 +11,7 @@ const Tag = ({ color, check, ...rest }) => (
       backgroundColor: color,
     }}
   >
-    {check ? <Icon type="check" /> : ''}
+    {check ? <CheckOutlined /> : ''}
   </div>
 );
 
@@ -52,12 +53,13 @@ const ThemeColor = ({ colors, title, value, onChange }) => {
       },
     ];
   }
+  const intl = useIntl();
   return (
     <div className={styles.themeColor}>
       <h3 className={styles.title}>{title}</h3>
       <div className={styles.content}>
         {colorList.map(({ key, color }) => (
-          <Tooltip key={color} title={formatMessage({ id: `app.setting.themecolor.${key}` })}>
+          <Tooltip key={color} title={intl.formatMessage({ id: `app.setting.themecolor.${key}` })}>
             <Tag
               className={styles.colorBlock}
               color={color}
diff --git a/src/dashboard/src/components/SettingDrawer/index.js b/src/dashboard/src/components/SettingDrawer/index.js
index 88a92e132..d1e9502fa 100644
--- a/src/dashboard/src/components/SettingDrawer/index.js
+++ b/src/dashboard/src/components/SettingDrawer/index.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import { Select, message, Drawer, List, Switch, Divider, Icon, Button, Alert, Tooltip } from 'antd';
+import { Select, message, Drawer, List, Switch, Divider, Button, Alert, Tooltip } from 'antd';
+import { CloseOutlined, SettingOutlined } from '@ant-design/icons';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { connect, formatMessage } from 'umi';
+import { connect, injectIntl } from 'umi';
 import omit from 'omit.js';
 import styles from './index.less';
 import ThemeColor from './ThemeColor';
@@ -30,10 +31,11 @@ class SettingDrawer extends Component {
   getLayoutSetting = () => {
     const {
       setting: { contentWidth, fixedHeader, layout, autoHideHeader, fixSiderbar },
+      intl,
     } = this.props;
     return [
       {
-        title: formatMessage({ id: 'app.setting.content-width' }),
+        title: intl.formatMessage({ id: 'app.setting.content-width' }),
         action: (
           <Select
             value={contentWidth}
@@ -43,17 +45,17 @@ class SettingDrawer extends Component {
           >
             {layout === 'sidemenu' ? null : (
               <Option value="Fixed">
-                {formatMessage({ id: 'app.setting.content-width.fixed' })}
+                {intl.formatMessage({ id: 'app.setting.content-width.fixed' })}
               </Option>
             )}
             <Option value="Fluid">
-              {formatMessage({ id: 'app.setting.content-width.fluid' })}
+              {intl.formatMessage({ id: 'app.setting.content-width.fluid' })}
             </Option>
           </Select>
         ),
       },
       {
-        title: formatMessage({ id: 'app.setting.fixedheader' }),
+        title: intl.formatMessage({ id: 'app.setting.fixedheader' }),
         action: (
           <Switch
             size="small"
@@ -63,9 +65,9 @@ class SettingDrawer extends Component {
         ),
       },
       {
-        title: formatMessage({ id: 'app.setting.hideheader' }),
+        title: intl.formatMessage({ id: 'app.setting.hideheader' }),
         disabled: !fixedHeader,
-        disabledReason: formatMessage({ id: 'app.setting.hideheader.hint' }),
+        disabledReason: intl.formatMessage({ id: 'app.setting.hideheader.hint' }),
         action: (
           <Switch
             size="small"
@@ -75,9 +77,9 @@ class SettingDrawer extends Component {
         ),
       },
       {
-        title: formatMessage({ id: 'app.setting.fixedsidebar' }),
+        title: intl.formatMessage({ id: 'app.setting.fixedsidebar' }),
         disabled: layout === 'topmenu',
-        disabledReason: formatMessage({ id: 'app.setting.fixedsidebar.hint' }),
+        disabledReason: intl.formatMessage({ id: 'app.setting.fixedsidebar.hint' }),
         action: (
           <Switch
             size="small"
@@ -126,7 +128,7 @@ class SettingDrawer extends Component {
   };
 
   render() {
-    const { setting } = this.props;
+    const { setting, intl } = this.props;
     const { navTheme, primaryColor, layout, colorWeak } = setting;
     const { collapse } = this.state;
     return (
@@ -137,13 +139,21 @@ class SettingDrawer extends Component {
         placement="right"
         handler={
           <div className={styles.handle} onClick={this.togglerContent}>
-            <Icon
-              type={collapse ? 'close' : 'setting'}
-              style={{
-                color: '#fff',
-                fontSize: 20,
-              }}
-            />
+            {collapse ? (
+              <CloseOutlined
+                style={{
+                  color: '#fff',
+                  fontSize: 20,
+                }}
+              />
+            ) : (
+              <SettingOutlined
+                style={{
+                  color: '#fff',
+                  fontSize: 20,
+                }}
+              />
+            )}
           </div>
         }
         style={{
@@ -151,18 +161,18 @@ class SettingDrawer extends Component {
         }}
       >
         <div className={styles.content}>
-          <Body title={formatMessage({ id: 'app.setting.pagestyle' })}>
+          <Body title={intl.formatMessage({ id: 'app.setting.pagestyle' })}>
             <BlockCheckbox
               list={[
                 {
                   key: 'dark',
                   url: 'https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg',
-                  title: formatMessage({ id: 'app.setting.pagestyle.dark' }),
+                  title: intl.formatMessage({ id: 'app.setting.pagestyle.dark' }),
                 },
                 {
                   key: 'light',
                   url: 'https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg',
-                  title: formatMessage({ id: 'app.setting.pagestyle.light' }),
+                  title: intl.formatMessage({ id: 'app.setting.pagestyle.light' }),
                 },
               ]}
               value={navTheme}
@@ -171,25 +181,25 @@ class SettingDrawer extends Component {
           </Body>
 
           <ThemeColor
-            title={formatMessage({ id: 'app.setting.themecolor' })}
+            title={intl.formatMessage({ id: 'app.setting.themecolor' })}
             value={primaryColor}
             onChange={color => this.changeSetting('primaryColor', color)}
           />
 
           <Divider />
 
-          <Body title={formatMessage({ id: 'app.setting.navigationmode' })}>
+          <Body title={intl.formatMessage({ id: 'app.setting.navigationmode' })}>
             <BlockCheckbox
               list={[
                 {
                   key: 'sidemenu',
                   url: 'https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg',
-                  title: formatMessage({ id: 'app.setting.sidemenu' }),
+                  title: intl.formatMessage({ id: 'app.setting.sidemenu' }),
                 },
                 {
                   key: 'topmenu',
                   url: 'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg',
-                  title: formatMessage({ id: 'app.setting.topmenu' }),
+                  title: intl.formatMessage({ id: 'app.setting.topmenu' }),
                 },
               ]}
               value={layout}
@@ -205,13 +215,13 @@ class SettingDrawer extends Component {
 
           <Divider />
 
-          <Body title={formatMessage({ id: 'app.setting.othersettings' })}>
+          <Body title={intl.formatMessage({ id: 'app.setting.othersettings' })}>
             <List
               split={false}
               renderItem={this.renderLayoutSettingItem}
               dataSource={[
                 {
-                  title: formatMessage({ id: 'app.setting.weakmode' }),
+                  title: intl.formatMessage({ id: 'app.setting.weakmode' }),
                   action: (
                     <Switch
                       size="small"
@@ -226,10 +236,10 @@ class SettingDrawer extends Component {
           <Divider />
           <CopyToClipboard
             text={JSON.stringify(omit(setting, ['colorWeak']), null, 2)}
-            onCopy={() => message.success(formatMessage({ id: 'app.setting.copyinfo' }))}
+            onCopy={() => message.success(intl.formatMessage({ id: 'app.setting.copyinfo' }))}
           >
             <Button block icon="copy">
-              {formatMessage({ id: 'app.setting.copy' })}
+              {intl.formatMessage({ id: 'app.setting.copy' })}
             </Button>
           </CopyToClipboard>
           <Alert
@@ -237,7 +247,7 @@ class SettingDrawer extends Component {
             className={styles.productionHint}
             message={
               <div>
-                {formatMessage({ id: 'app.setting.production.hint' })}{' '}
+                {intl.formatMessage({ id: 'app.setting.production.hint' })}{' '}
                 <a
                   href="https://u.ant.design/pro-v2-default-settings"
                   target="_blank"
@@ -254,4 +264,4 @@ class SettingDrawer extends Component {
   }
 }
 
-export default SettingDrawer;
+export default injectIntl(SettingDrawer);
diff --git a/src/dashboard/src/components/SettingDrawer/index.less b/src/dashboard/src/components/SettingDrawer/index.less
index 065487886..eb42e2eaa 100644
--- a/src/dashboard/src/components/SettingDrawer/index.less
+++ b/src/dashboard/src/components/SettingDrawer/index.less
@@ -13,7 +13,7 @@
   }
 }
 
-.blockChecbox {
+.blockCheckbox {
   display: flex;
   .item {
     position: relative;
diff --git a/src/dashboard/src/components/SiderMenu/BaseMenu.js b/src/dashboard/src/components/SiderMenu/BaseMenu.js
index 07eedc710..a4e3fce11 100644
--- a/src/dashboard/src/components/SiderMenu/BaseMenu.js
+++ b/src/dashboard/src/components/SiderMenu/BaseMenu.js
@@ -1,14 +1,19 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
-import { Menu, Icon } from 'antd';
+import { Menu } from 'antd';
+import { EyeFilled, DashboardFilled } from '@ant-design/icons';
 import { Link } from 'umi';
 import { urlToList } from '../_utils/pathTools';
 import { getMenuMatches } from './SiderMenuUtils';
-import { isUrl } from '@/utils/utils';
-import styles from './index.less';
-import IconFont from '@/components/IconFont';
+// import { isUrl } from '@/utils/utils';
+// import styles from './index.less';
+// import IconFont from '@/components/IconFont';
 
 const { SubMenu } = Menu;
+const menus = {
+  eye: <EyeFilled />,
+  dashboard: <DashboardFilled />,
+};
 
 // Allow menu.js config icon as string or ReactNode
 //   icon: 'setting',
@@ -17,13 +22,13 @@ const { SubMenu } = Menu;
 //   icon: <Icon type="setting" />,
 const getIcon = icon => {
   if (typeof icon === 'string') {
-    if (isUrl(icon)) {
-      return <Icon component={() => <img src={icon} alt="icon" className={styles.icon} />} />;
-    }
-    if (icon.startsWith('icon-')) {
-      return <IconFont type={icon} />;
-    }
-    return <Icon type={icon} />;
+    // if (isUrl(icon)) {
+    //   return <Icon component={() => <img src={icon} alt="icon" className={styles.icon} />} />;
+    // }
+    // if (icon.startsWith('icon-')) {
+    //   return <IconFont type={icon} />;
+    // }
+    return menus[icon];
   }
   return icon;
 };
diff --git a/src/dashboard/src/layouts/BasicLayout.js b/src/dashboard/src/layouts/BasicLayout.js
index da23b8d20..a043b75c4 100644
--- a/src/dashboard/src/layouts/BasicLayout.js
+++ b/src/dashboard/src/layouts/BasicLayout.js
@@ -4,16 +4,16 @@
 import React from 'react';
 import { Layout } from 'antd';
 import DocumentTitle from 'react-document-title';
-import { connect } from 'dva';
+import { connect } from 'umi';
 import { ContainerQuery } from 'react-container-query';
 import classNames from 'classnames';
 import Media from 'react-media';
+import SiderMenu from '@/components/SiderMenu';
+import getPageTitle from '@/utils/getPageTitle';
 import logo from '../assets/logo.svg';
 import Footer from './Footer';
 import Header from './Header';
 import Context from './MenuContext';
-import SiderMenu from '@/components/SiderMenu';
-import getPageTitle from '@/utils/getPageTitle';
 import styles from './BasicLayout.less';
 
 // lazy load SettingDrawer
diff --git a/src/dashboard/src/layouts/Footer.js b/src/dashboard/src/layouts/Footer.js
index bdccfd403..6bc1d9691 100644
--- a/src/dashboard/src/layouts/Footer.js
+++ b/src/dashboard/src/layouts/Footer.js
@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
-import { Layout, Icon } from 'antd';
+import { Layout } from 'antd';
+import { CopyrightOutlined } from '@ant-design/icons';
 import GlobalFooter from '@/components/GlobalFooter';
 
 const { Footer } = Layout;
@@ -8,7 +9,7 @@ const FooterView = () => (
     <GlobalFooter
       copyright={
         <Fragment>
-          Copyright <Icon type="copyright" /> Cello
+          Copyright <CopyrightOutlined /> Cello
         </Fragment>
       }
     />
diff --git a/src/dashboard/src/layouts/UserLayout.js b/src/dashboard/src/layouts/UserLayout.js
index df15a956f..c51c17f0a 100644
--- a/src/dashboard/src/layouts/UserLayout.js
+++ b/src/dashboard/src/layouts/UserLayout.js
@@ -1,11 +1,10 @@
 import React, { Component, Fragment } from 'react';
-import { connect } from 'dva';
-import { Link } from 'umi';
+import { Link, connect } from 'umi';
 import GlobalFooter from '@/components/GlobalFooter';
 import DocumentTitle from 'react-document-title';
 import SelectLang from '@/components/SelectLang';
-import styles from './UserLayout.less';
 import getPageTitle from '@/utils/getPageTitle';
+import styles from './UserLayout.less';
 
 const links = [];
 
diff --git a/src/dashboard/src/models/user.js b/src/dashboard/src/models/user.js
index dac2c85c3..33ec11f99 100644
--- a/src/dashboard/src/models/user.js
+++ b/src/dashboard/src/models/user.js
@@ -40,7 +40,6 @@ export default {
     },
     *fetchCurrent(_, { call, put }) {
       const response = yield call(queryCurrent);
-      console.log(response);
       yield put({
         type: 'saveCurrentUser',
         payload: response.user,
diff --git a/src/dashboard/src/pages/Authorized.js b/src/dashboard/src/pages/Authorized.js
index 5889812b6..c6b85c1a7 100644
--- a/src/dashboard/src/pages/Authorized.js
+++ b/src/dashboard/src/pages/Authorized.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import Redirect from 'umi/redirect';
 import pathToRegexp from 'path-to-regexp';
-import { connect } from 'dva';
+import { connect, Redirect } from 'umi';
 import Authorized from '@/utils/Authorized';
 import { getAuthority } from '@/utils/authority';
 import Exception403 from '@/pages/Exception/403';
diff --git a/src/dashboard/src/pages/Exception/TriggerException.js b/src/dashboard/src/pages/Exception/TriggerException.js
index 15ace510f..12a9be704 100644
--- a/src/dashboard/src/pages/Exception/TriggerException.js
+++ b/src/dashboard/src/pages/Exception/TriggerException.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Button, Spin, Card } from 'antd';
-import { connect } from 'dva';
+import { connect } from 'umi';
 import styles from './style.less';
 
 @connect(state => ({
diff --git a/src/dashboard/src/pages/Operator/Agent.js b/src/dashboard/src/pages/Operator/Agent.js
index 62a1aec6b..640043ad1 100644
--- a/src/dashboard/src/pages/Operator/Agent.js
+++ b/src/dashboard/src/pages/Operator/Agent.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'dva';
+import { connect } from 'umi';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 
 @connect(() => ({}))
diff --git a/src/dashboard/src/pages/Operator/Agent/Agent.js b/src/dashboard/src/pages/Operator/Agent/Agent.js
index ea1a41736..13b793e4c 100755
--- a/src/dashboard/src/pages/Operator/Agent/Agent.js
+++ b/src/dashboard/src/pages/Operator/Agent/Agent.js
@@ -13,22 +13,24 @@ import {
   InputNumber,
   Select,
 } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-import styles from '../styles.less';
 import { getAuthority } from '@/utils/authority';
+import styles from '../styles.less';
 
 const FormItem = Form.Item;
 const { Option } = Select;
 
-const ApplyAgentForm = Form.create()(props => {
-  const { visible, form, handleSubmit, handleModalVisible, confirmLoading } = props;
+const ApplyAgentForm = props => {
+  const [form] = Form.useForm();
+  const { visible, handleSubmit, handleModalVisible, confirmLoading } = props;
   const intl = useIntl();
   const onSubmit = () => {
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      handleSubmit(fieldsValue);
-    });
+    form.submit();
+  };
+  const onFinish = values => {
+    handleSubmit(values);
   };
   const agentTypeValues = ['docker', 'kubernetes'];
   const agentTypeOptions = agentTypeValues.map(item => (
@@ -52,33 +54,40 @@ const ApplyAgentForm = Form.create()(props => {
   return (
     <Modal
       destroyOnClose
-      title={
-        intl.formatMessage({ id: 'app.operator.applyAgent.title', defaultMessage: 'Apply for agent' })
-      }
+      title={intl.formatMessage({
+        id: 'app.operator.applyAgent.title',
+        defaultMessage: 'Apply for agent',
+      })}
       visible={visible}
       confirmLoading={confirmLoading}
       width="30%"
       onOk={onSubmit}
       onCancel={() => handleModalVisible()}
     >
-      <FormItem
-        {...formItemLayout}
-        label={intl.formatMessage({
-          id: 'app.operator.newAgent.label.agentCapacity',
-          defaultMessage: 'Capacity of agent',
-        })}
+      <Form
+        onFinish={onFinish}
+        form={form}
+        initialValues={{
+          type: agentTypeValues[0],
+        }}
       >
-        {form.getFieldDecorator('capacity', {
-          initialValue: '',
-          rules: [
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.operator.newAgent.label.agentCapacity',
+            defaultMessage: 'Capacity of agent',
+          })}
+          name="capacity"
+          rules={[
             {
               required: true,
-              message: (
-                intl.formatMessage({ id: 'app.operator.newAgent.required.agentCapacity', defaultMessage: 'Please input the capacity of the agent.' })
-              ),
+              message: intl.formatMessage({
+                id: 'app.operator.newAgent.required.agentCapacity',
+                defaultMessage: 'Please input the capacity of the agent.',
+              }),
             },
-          ],
-        })(
+          ]}
+        >
           <InputNumber
             placeholder={intl.formatMessage({
               id: 'app.operator.newAgent.label.agentCapacity',
@@ -88,30 +97,30 @@ const ApplyAgentForm = Form.create()(props => {
             max={100}
             style={width}
           />
-        )}
-      </FormItem>
-      <FormItem
-        {...formItemLayout}
-        label={intl.formatMessage({
-          id: 'app.operator.newAgent.label.type',
-          defaultMessage: 'Type',
-        })}
-      >
-        {form.getFieldDecorator('type', {
-          initialValue: agentTypeValues[0],
-          rules: [
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.operator.newAgent.label.type',
+            defaultMessage: 'Type',
+          })}
+          name="type"
+          rules={[
             {
               required: true,
-              message: (
-                intl.formatMessage({ id: 'app.operator.newAgent.required.type', defaultMessage: 'Please select a type.' })
-              ),
+              message: intl.formatMessage({
+                id: 'app.operator.newAgent.required.type',
+                defaultMessage: 'Please select a type.',
+              }),
             },
-          ],
-        })(<Select style={width}>{agentTypeOptions}</Select>)}
-      </FormItem>
+          ]}
+        >
+          <Select style={width}>{agentTypeOptions}</Select>
+        </FormItem>
+      </Form>
     </Modal>
   );
-});
+};
 
 @connect(({ agent, organization, user, loading }) => ({
   agent,
@@ -343,14 +352,15 @@ class Agent extends PureComponent {
       <div>
         <Row gutter={15} className={styles.ListContentRow}>
           <Col span={8}>
-            <p>
-              {intl.formatMessage({ id: 'app.operator.agent.type', defaultMessage: 'Type' })}
-            </p>
+            <p>{intl.formatMessage({ id: 'app.operator.agent.type', defaultMessage: 'Type' })}</p>
             <p>{type}</p>
           </Col>
           <Col span={10}>
             <p>
-              {intl.formatMessage({ id: 'app.operator.agent.table.header.creationTime', defaultMessage: 'Creation Time' })}
+              {intl.formatMessage({
+                id: 'app.operator.agent.table.header.creationTime',
+                defaultMessage: 'Creation Time',
+              })}
             </p>
             <p>{moment(createdAt).format('YYYY-MM-DD HH:mm:ss')}</p>
           </Col>
@@ -370,19 +380,20 @@ class Agent extends PureComponent {
 
     return (
       <PageHeaderWrapper
-        title={
-          intl.formatMessage({ id: 'app.operator.agent.title', defaultMessage: 'Agent Management' })
-        }
+        title={intl.formatMessage({
+          id: 'app.operator.agent.title',
+          defaultMessage: 'Agent Management',
+        })}
       >
         <Card bordered={false}>
           <div className={styles.tableList}>
             <div className={styles.tableListOperator}>
               <Button
                 className={styles.newAgentButton}
-                icon="plus"
                 type="dashed"
                 onClick={() => this.onAddAgent()}
               >
+                <PlusOutlined />{' '}
                 {intl.formatMessage({ id: 'form.button.new', defaultMessage: 'New' })}
               </Button>
             </div>
@@ -396,13 +407,19 @@ class Agent extends PureComponent {
                 <List.Item
                   actions={[
                     <a onClick={() => this.editAgent(item)}>
-                      {intl.formatMessage({ id: 'iform.menu.item.update', defaultMessage: 'Update' })}
+                      {intl.formatMessage({
+                        id: 'iform.menu.item.update',
+                        defaultMessage: 'Update',
+                      })}
                     </a>,
                     <a onClick={() => this.nodeList(item)}>
                       {intl.formatMessage({ id: 'menu.operator.node', defaultMessage: 'Node' })}
                     </a>,
                     <a onClick={() => this.handleDelete(item)}>
-                      {intl.formatMessage({ id: 'form.menu.item.delete', defaultMessage: 'Delete' })}
+                      {intl.formatMessage({
+                        id: 'form.menu.item.delete',
+                        defaultMessage: 'Delete',
+                      })}
                     </a>,
                   ]}
                 >
@@ -412,7 +429,10 @@ class Agent extends PureComponent {
                       <div>
                         <p>{item.ip}</p>
                         <p>
-                          {intl.formatMessage({ id: 'app.operator.agent.listItem.organization', defaultMessage: 'Organization' })}
+                          {intl.formatMessage({
+                            id: 'app.operator.agent.listItem.organization',
+                            defaultMessage: 'Organization',
+                          })}
                           {' : '}
                           {userRole === 'operator'
                             ? filterOrgName(item.organization_id)
diff --git a/src/dashboard/src/pages/Operator/Agent/newAgent.js b/src/dashboard/src/pages/Operator/Agent/newAgent.js
index 065ede30a..3a2da8b61 100755
--- a/src/dashboard/src/pages/Operator/Agent/newAgent.js
+++ b/src/dashboard/src/pages/Operator/Agent/newAgent.js
@@ -1,18 +1,9 @@
-import React, { PureComponent } from 'react';
-import {
-  Card,
-  Form,
-  Input,
-  Button,
-  Select,
-  Switch,
-  Icon,
-  InputNumber,
-  Upload,
-  message,
-} from 'antd';
+import React from 'react';
+import { Card, Form, Input, Button, Select, Switch, InputNumber, Upload, message } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { compose } from 'redux';
 import isIP from 'validator/lib/isIP';
-import { connect, withRouter, useIntl, history } from 'umi';
+import { connect, withRouter, useIntl, history, injectIntl } from 'umi';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import { getAuthority } from '@/utils/authority';
 
@@ -25,8 +16,7 @@ const { Option } = Select;
   updating: loading.effects['agent/updateAgent'],
   loadingAgent: loading.effects['agent/getAgent'],
 }))
-@Form.create()
-class CreateAgent extends PureComponent {
+class CreateAgent extends React.Component {
   componentDidMount() {
     const { location } = this.props;
     const { query = {} } = location;
@@ -55,18 +45,15 @@ class CreateAgent extends PureComponent {
     history.push('/operator/agent');
   };
 
-  validateIp = (rule, value, callback) => {
-    const intl = useIntl();
-    if (value !== '') {
-      if (!isIP(value)) {
-        callback(
-          intl.formatMessage({ id: 'app.operator.newAgent.error.ip', defaultMessage: 'Please enter a valid IP address.For example:192.168.0.10.' })
-        );
-      } else {
-        callback();
-      }
-    } else {
-      callback();
+  validateIp = async (rule, value) => {
+    const { intl } = this.props;
+    if (!isIP(value)) {
+      throw new Error(
+        intl.formatMessage({
+          id: 'app.operator.newAgent.error.ip',
+          defaultMessage: 'Please enter a valid IP address.For example:192.168.0.10.',
+        })
+      );
     }
   };
 
@@ -87,8 +74,9 @@ class CreateAgent extends PureComponent {
   };
 
   validateUpdateResponse = () => {
+    const { intl } = this.props;
     message.success(
-      formatMessage({
+      intl.formatMessage({
         id: 'app.operator.updateAgent.success',
         defaultMessage: 'Update agent success',
       })
@@ -113,57 +101,49 @@ class CreateAgent extends PureComponent {
     }
   };
 
-  handleSubmit = e => {
-    e.preventDefault();
+  handleSubmit = values => {
     const { location } = this.props;
     const { query = {} } = location;
     const action = query.action || 'create';
-    const {
-      form: { validateFieldsAndScroll },
-      dispatch,
-    } = this.props;
-    validateFieldsAndScroll((err, values) => {
-      if (!err) {
-        if (action === 'edit') {
-          const formData = new FormData();
-          const userRole = getAuthority()[0];
-          const id = query.id;
-          const requestMethod = userRole === 'operator' ? 'PUT' : 'PATCH';
+    const { dispatch } = this.props;
+    if (action === 'edit') {
+      const formData = new FormData();
+      const userRole = getAuthority()[0];
+      const id = query.id;
+      const requestMethod = userRole === 'operator' ? 'PUT' : 'PATCH';
 
-          formData.append('name', values.name);
-          formData.append('capacity', values.capacity);
-          formData.append('log_level', values.log_level);
+      formData.append('name', values.name);
+      formData.append('capacity', values.capacity);
+      formData.append('log_level', values.log_level);
 
-          if (userRole === 'operator') {
-            formData.append('schedulable', values.schedulable);
-          }
+      if (userRole === 'operator') {
+        formData.append('schedulable', values.schedulable);
+      }
 
-          dispatch({
-            type: 'agent/updateAgent',
-            payload: {
-              data: formData,
-              id,
-              requestMethod,
-            },
-            callback: this.submitCallback,
-          });
-        } else {
-          const formData = new FormData();
+      dispatch({
+        type: 'agent/updateAgent',
+        payload: {
+          data: formData,
+          id,
+          requestMethod,
+        },
+        callback: this.submitCallback,
+      });
+    } else {
+      const formData = new FormData();
 
-          Object.keys(values).forEach(key => {
-            formData.append(key, values[key]);
-          });
+      Object.keys(values).forEach(key => {
+        formData.append(key, values[key]);
+      });
 
-          dispatch({
-            type: 'agent/createAgent',
-            payload: {
-              formData,
-            },
-            callback: this.submitCallback,
-          });
-        }
-      }
-    });
+      dispatch({
+        type: 'agent/createAgent',
+        payload: {
+          formData,
+        },
+        callback: this.submitCallback,
+      });
+    }
   };
 
   normFile = e => {
@@ -174,19 +154,17 @@ class CreateAgent extends PureComponent {
   };
 
   render() {
-    const { location } = this.props;
+    const { location, intl } = this.props;
     const { query = {} } = location;
     const action = query.action || 'create';
     const userRole = getAuthority()[0];
-    const intl = useIntl();
     const {
-      form: { getFieldDecorator, getFieldValue },
       agent: { agent },
       submitting,
       updating,
       loadingAgent,
     } = this.props;
-    const configFile = agent.config_file ? agent.config_file : '';
+    // const configFile = agent.config_file ? agent.config_file : '';
     const schedulable = action === 'edit' ? agent.schedulable : true;
     const formItemLayout = {
       labelCol: {
@@ -231,231 +209,238 @@ class CreateAgent extends PureComponent {
     return (
       <PageHeaderWrapper
         title={
-          action === 'create' ? (
-            intl.formatMessage({ id: 'app.operator.newAgent.title', defaultMessage: 'Create Agent' })
-          ) : (
-            intl.formatMessage({ id: 'app.operator.editAgent.title', defaultMessage: 'Edit Agent' })
-          )
+          action === 'create'
+            ? intl.formatMessage({
+                id: 'app.operator.newAgent.title',
+                defaultMessage: 'Create Agent',
+              })
+            : intl.formatMessage({
+                id: 'app.operator.editAgent.title',
+                defaultMessage: 'Edit Agent',
+              })
         }
       >
         <Card bordered={false} loading={action === 'edit' ? loadingAgent : false}>
-          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
+          <Form
+            onFinish={this.handleSubmit}
+            onFinishFailed={this.onFinishFailed}
+            hideRequiredMark
+            style={{ marginTop: 8 }}
+            initialValues={{
+              name: action === 'create' ? '' : agent.name,
+              ip: action === 'create' ? '' : agent.ip,
+              image: action === 'create' ? '' : agent.image,
+              capacity: action === 'create' ? 1 : agent.capacity,
+              node_capacity: action === 'create' ? 10 : agent.node_capacity,
+              type: action === 'create' ? agentTypeValues[0] : agent.type,
+              log_level: action === 'create' ? logLevelValues[0] : agent.log_level,
+              schedulable,
+            }}
+          >
             <FormItem
               {...formItemLayout}
-              label={
-                intl.formatMessage({ id: 'app.operator.newAgent.label.name', defaultMessage: 'Name' })
-              }
+              label={intl.formatMessage({
+                id: 'app.operator.newAgent.label.name',
+                defaultMessage: 'Name',
+              })}
+              name="name"
+              rules={[
+                {
+                  required: false,
+                  message: intl.formatMessage({
+                    id: 'app.operator.newAgent.required.Name',
+                    defaultMessage: 'Please input name.',
+                  }),
+                },
+              ]}
             >
-              {getFieldDecorator('name', {
-                initialValue: action === 'create' ? '' : agent.name,
-                rules: [
-                  {
-                    required: false,
-                    message: (
-                      intl.formatMessage({ id: 'app.operator.newAgent.required.Name', defaultMessage: 'Please input name.' })
-                    ),
-                  },
-                ],
-              })(
-                <Input
-                  placeholder={intl.formatMessage({
-                    id: 'app.operator.newAgent.label.name',
-                    defaultMessage: 'Name',
-                  })}
-                />
-              )}
+              <Input
+                placeholder={intl.formatMessage({
+                  id: 'app.operator.newAgent.label.name',
+                  defaultMessage: 'Name',
+                })}
+              />
             </FormItem>
             <FormItem
               {...formItemLayout}
-              label={
-                intl.formatMessage({ id: 'app.operator.newAgent.label.ip', defaultMessage: 'Agent IP Address' })
-              }
+              label={intl.formatMessage({
+                id: 'app.operator.newAgent.label.ip',
+                defaultMessage: 'Agent IP Address',
+              })}
+              name="ip"
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({
+                    id: 'app.operator.newAgent.required.ip',
+                    defaultMessage: 'Please input the ip address of the agent.',
+                  }),
+                },
+                {
+                  validator: this.validateIp,
+                },
+              ]}
             >
-              {getFieldDecorator('ip', {
-                initialValue: action === 'create' ? '' : agent.ip,
-                rules: [
-                  {
-                    required: true,
-                    message: (
-                      intl.formatMessage({ id: 'app.operator.newAgent.required.ip', defaultMessage: 'Please input the ip address of the agent.' })
-                    ),
-                  },
-                  {
-                    validator: this.validateIp,
-                  },
-                ],
-              })(
-                <Input
-                  disabled={action === 'edit'}
-                  style={action === 'edit' ? disabledFontColor : {}}
-                  placeholder="192.168.0.10"
-                />
-              )}
+              <Input
+                disabled={action === 'edit'}
+                style={action === 'edit' ? disabledFontColor : {}}
+                placeholder="192.168.0.10"
+              />
             </FormItem>
             <FormItem
               {...formItemLayout}
-              label={
-                intl.formatMessage({ id: 'app.operator.newAgent.label.image', defaultMessage: 'Image name of deploy agent' })
-              }
+              label={intl.formatMessage({
+                id: 'app.operator.newAgent.label.image',
+                defaultMessage: 'Image name of deploy agent',
+              })}
+              name="image"
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({
+                    id: 'app.operator.newAgent.required.image',
+                    defaultMessage: "Please input the name of the agent's image.",
+                  }),
+                },
+              ]}
             >
-              {getFieldDecorator('image', {
-                initialValue: action === 'create' ? '' : agent.image,
-                rules: [
-                  {
-                    required: true,
-                    message: (
-                      intl.formatMessage({ id: 'app.operator.newAgent.required.image', defaultMessage: 'Please input the name of the agent\'s image.' })
-                    ),
-                  },
-                ],
-              })(
-                <Input
-                  placeholder={intl.formatMessage({
-                    id: 'app.operator.newAgent.label.image',
-                    defaultMessage: 'Image name of deploy agent',
-                  })}
-                  disabled={action === 'edit'}
-                  style={action === 'edit' ? disabledFontColor : {}}
-                />
-              )}
+              <Input
+                placeholder={intl.formatMessage({
+                  id: 'app.operator.newAgent.label.image',
+                  defaultMessage: 'Image name of deploy agent',
+                })}
+                disabled={action === 'edit'}
+                style={action === 'edit' ? disabledFontColor : {}}
+              />
             </FormItem>
             <FormItem
               {...formItemLayout}
-              label={
-                intl.formatMessage({ id: 'app.operator.newAgent.label.agentCapacity', defaultMessage: 'Capacity of agent' })
-              }
+              label={intl.formatMessage({
+                id: 'app.operator.newAgent.label.agentCapacity',
+                defaultMessage: 'Capacity of agent',
+              })}
+              name="capacity"
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({
+                    id: 'app.operator.newAgent.required.agentCapacity',
+                    defaultMessage: 'Please input the capacity of the agent.',
+                  }),
+                },
+              ]}
             >
-              {getFieldDecorator('capacity', {
-                initialValue: action === 'create' ? 1 : agent.capacity,
-                rules: [
-                  {
-                    required: true,
-                    message: (
-                      intl.formatMessage({ id: 'app.operator.newAgent.required.agentCapacity', defaultMessage: 'Please input the capacity of the agent.' })
-                    ),
-                  },
-                ],
-              })(
-                <InputNumber
-                  placeholder={intl.formatMessage({
-                    id: 'app.operator.newAgent.label.agentCapacity',
-                    defaultMessage: 'Capacity of agent',
-                  })}
-                  min={1}
-                  max={100}
-                />
-              )}
+              <InputNumber
+                placeholder={intl.formatMessage({
+                  id: 'app.operator.newAgent.label.agentCapacity',
+                  defaultMessage: 'Capacity of agent',
+                })}
+                min={1}
+                max={100}
+              />
             </FormItem>
             <FormItem
               {...formItemLayout}
-              label={
-                intl.formatMessage({ id: 'app.operator.newAgent.label.nodeCapacity', defaultMessage: 'Capacity of nodes' })
-              }
+              label={intl.formatMessage({
+                id: 'app.operator.newAgent.label.nodeCapacity',
+                defaultMessage: 'Capacity of nodes',
+              })}
+              name="node_capacity"
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({
+                    id: 'app.operator.newAgent.required.nodeCapacity',
+                    defaultMessage: 'Please input the capacity of nodes.',
+                  }),
+                },
+              ]}
             >
-              {getFieldDecorator('node_capacity', {
-                initialValue: action === 'create' ? 10 : agent.node_capacity,
-                rules: [
-                  {
-                    required: true,
-                    message: (
-                      intl.formatMessage({ id: 'app.operator.newAgent.required.nodeCapacity', defaultMessage: 'Please input the capacity of nodes.' })
-                    ),
-                  },
-                ],
-              })(
-                <InputNumber
-                  disabled={action !== 'create'}
-                  placeholder={intl.formatMessage({
-                    id: 'app.operator.newAgent.label.nodeCapacity',
-                    defaultMessage: 'Capacity of nodes',
-                  })}
-                  min={1}
-                  max={600}
-                  style={action === 'edit' ? disabledFontColor : {}}
-                />
-              )}
+              <InputNumber
+                disabled={action !== 'create'}
+                placeholder={intl.formatMessage({
+                  id: 'app.operator.newAgent.label.nodeCapacity',
+                  defaultMessage: 'Capacity of nodes',
+                })}
+                min={1}
+                max={600}
+                style={action === 'edit' ? disabledFontColor : {}}
+              />
             </FormItem>
             <FormItem
               {...formItemLayout}
-              label={
-                intl.formatMessage({ id: 'app.operator.newAgent.label.type', defaultMessage: 'Type' })
-              }
+              label={intl.formatMessage({
+                id: 'app.operator.newAgent.label.type',
+                defaultMessage: 'Type',
+              })}
+              name="type"
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({
+                    id: 'app.operator.newAgent.required.type',
+                    defaultMessage: 'Please select a type.',
+                  }),
+                },
+              ]}
             >
-              {getFieldDecorator('type', {
-                initialValue: action === 'create' ? agentTypeValues[0] : agent.type,
-                rules: [
-                  {
-                    required: true,
-                    message: (
-                      intl.formatMessage({ id: 'app.operator.newAgent.required.type', defaultMessage: 'Please select a type.' })
-                    ),
-                  },
-                ],
-              })(
-                <Select
-                  style={action === 'edit' ? disabledFontColor : {}}
-                  disabled={action !== 'create'}
-                >
-                  {agentTypeOptions}
-                </Select>
-              )}
+              <Select
+                style={action === 'edit' ? disabledFontColor : {}}
+                disabled={action !== 'create'}
+              >
+                {agentTypeOptions}
+              </Select>
             </FormItem>
             <FormItem
               {...formItemLayout}
-              label={
-                intl.formatMessage({ id: 'app.operator.newAgent.label.configFile', defaultMessage: 'Config file' })
-              }
+              label={intl.formatMessage({
+                id: 'app.operator.newAgent.label.configFile',
+                defaultMessage: 'Config file',
+              })}
+              name="config_file"
+              getValueFromEvent={this.normFile}
             >
-              {getFieldDecorator('config_file', {
-                getValueFromEvent: this.normFile,
-                initialValue: null,
-              })(
-                action === 'edit' ? (
-                  <a href={configFile}>{configFile.substring(configFile.lastIndexOf('/') + 1)}</a>
-                ) : (
-                  <Upload {...uploadProps}>
-                    <Button disabled={getFieldValue('config_file')}>
-                      <Icon type="upload" />
-                      {
-                        intl.formatMessage({ id: 'app.operator.newAgent.label.configFileSelect', defaultMessage: 'Please select the config file.' })
-                      }
-                    </Button>
-                  </Upload>
-                )
-              )}
+              <Upload {...uploadProps}>
+                <Button>
+                  <UploadOutlined />
+                  {intl.formatMessage({
+                    id: 'app.operator.newAgent.label.configFileSelect',
+                    defaultMessage: 'Please select the config file.',
+                  })}
+                </Button>
+              </Upload>
             </FormItem>
             <FormItem
               {...formItemLayout}
-              label={
-                intl.formatMessage({ id: 'app.operator.newAgent.label.logLevel', defaultMessage: 'Log level' })
-              }
+              label={intl.formatMessage({
+                id: 'app.operator.newAgent.label.logLevel',
+                defaultMessage: 'Log level',
+              })}
+              name="log_level"
+              rules={[
+                {
+                  required: false,
+                  message: intl.formatMessage({
+                    id: 'app.operator.newAgent.required.LogLevel',
+                    defaultMessage: 'Please select a log level.',
+                  }),
+                },
+              ]}
             >
-              {getFieldDecorator('log_level', {
-                initialValue: action === 'create' ? logLevelValues[0] : agent.log_level,
-                rules: [
-                  {
-                    required: false,
-                    message: (
-                      intl.formatMessage({ id: 'app.operator.newAgent.required.LogLevel', defaultMessage: 'Please select a log level.' })
-                    ),
-                  },
-                ],
-              })(<Select>{logLevelOptions}</Select>)}
+              <Select>{logLevelOptions}</Select>
             </FormItem>
             <FormItem
               {...formItemLayout}
-              label={
-                intl.formatMessage({ id: 'app.operator.newAgent.label.schedulable', defaultMessage: 'Schedulable' })
-              }
+              label={intl.formatMessage({
+                id: 'app.operator.newAgent.label.schedulable',
+                defaultMessage: 'Schedulable',
+              })}
+              name="schedulable"
             >
-              {getFieldDecorator('schedulable', {
-                initialValue: schedulable,
-              })(
-                <Switch
-                  disabled={action === 'edit' && userRole !== 'operator'}
-                  defaultChecked={schedulable}
-                />
-              )}
+              <Switch
+                disabled={action === 'edit' && userRole !== 'operator'}
+                defaultChecked={schedulable}
+              />
             </FormItem>
             <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
               <Button onClick={this.clickCancel}>
@@ -477,4 +462,4 @@ class CreateAgent extends PureComponent {
   }
 }
 
-export default withRouter(CreateAgent);
+export default compose(withRouter, injectIntl)(CreateAgent);
diff --git a/src/dashboard/src/pages/Operator/Node/New/nodeInfo.js b/src/dashboard/src/pages/Operator/Node/New/nodeInfo.js
index fb4aeb144..d4c698030 100644
--- a/src/dashboard/src/pages/Operator/Node/New/nodeInfo.js
+++ b/src/dashboard/src/pages/Operator/Node/New/nodeInfo.js
@@ -1,8 +1,7 @@
 import React, { Fragment, Suspense } from 'react';
-import { connect } from 'dva';
 import querystring from 'querystring';
 import { Form, Button, message } from 'antd';
-import { injectIntl, history } from 'umi';
+import { injectIntl, history, connect } from 'umi';
 
 const FabricCa = React.lazy(() => import('./Fabric/ca'));
 const FabricPeer = React.lazy(() => import('./Fabric/peer'));
diff --git a/src/dashboard/src/pages/Operator/Node/Node.js b/src/dashboard/src/pages/Operator/Node/Node.js
index 89b689e79..7fb9f5170 100644
--- a/src/dashboard/src/pages/Operator/Node/Node.js
+++ b/src/dashboard/src/pages/Operator/Node/Node.js
@@ -11,43 +11,43 @@ import {
   Divider,
   Menu,
   Dropdown,
-  Icon,
   Form,
   Input,
   Select,
   Badge,
 } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import StandardTable from '@/components/StandardTable';
-import styles from '../styles.less';
 import { getAuthority } from '@/utils/authority';
+import styles from '../styles.less';
 
 const FormItem = Form.Item;
 const { Option } = Select;
 
-const RegisterUserForm = Form.create()(props => {
+const RegisterUserForm = props => {
   const {
     registerUserFormVisible,
-    form,
     handleSubmit,
     handleModalVisible,
     registeringUser,
     targetNodeId,
   } = props;
+  const [form] = Form.useForm();
+  const onFinish = values => {
+    if (values.attrs === '') {
+      // eslint-disable-next-line no-param-reassign
+      delete values.attrs;
+    }
+    const body = {
+      id: targetNodeId,
+      message: values,
+    };
+    handleSubmit(body);
+  };
   const onSubmit = () => {
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      const values = { ...fieldsValue };
-      if (values.attrs === '') {
-        delete values.attrs;
-      }
-      const body = {
-        id: targetNodeId,
-        message: values,
-      };
-      handleSubmit(body);
-    });
+    form.submit();
   };
   const userTypeValues = ['peer', 'orderer', 'user'];
   const userTypeOptions = userTypeValues.map(item => (
@@ -71,114 +71,115 @@ const RegisterUserForm = Form.create()(props => {
   return (
     <Modal
       destroyOnClose
-      title={
-        intl.formatMessage({ id: 'app.operator.node.table.operation.registerUser', defaultMessage: 'Register User' })
-      }
+      title={intl.formatMessage({
+        id: 'app.operator.node.table.operation.registerUser',
+        defaultMessage: 'Register User',
+      })}
       visible={registerUserFormVisible}
       confirmLoading={registeringUser}
       width="30%"
       onOk={onSubmit}
       onCancel={() => handleModalVisible()}
     >
-      <FormItem
-        {...formItemLayout}
-        label={intl.formatMessage({
-          id: 'app.operator.node.modal.label.name',
-          defaultMessage: 'User name',
-        })}
+      <Form
+        form={form}
+        onFinish={onFinish}
+        initialValues={{
+          name: '',
+        }}
       >
-        {form.getFieldDecorator('name', {
-          initialValue: '',
-          rules: [
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.operator.node.modal.label.name',
+            defaultMessage: 'User name',
+          })}
+          name="name"
+          rules={[
             {
               required: true,
-              message: (
-                intl.formatMessage({ id: 'app.operator.node.modal.required.name', defaultMessage: 'Please input user name.' })
-              ),
+              message: intl.formatMessage({
+                id: 'app.operator.node.modal.required.name',
+                defaultMessage: 'Please input user name.',
+              }),
             },
-          ],
-        })(
+          ]}
+        >
           <Input
             placeholder={intl.formatMessage({
               id: 'app.operator.node.modal.label.name',
               defaultMessage: 'User name',
             })}
           />
-        )}
-      </FormItem>
-      <FormItem
-        {...formItemLayout}
-        label={intl.formatMessage({
-          id: 'app.operator.node.modal.label.secret',
-          defaultMessage: 'Password',
-        })}
-      >
-        {form.getFieldDecorator('secret', {
-          initialValue: '',
-          rules: [
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.operator.node.modal.label.secret',
+            defaultMessage: 'Password',
+          })}
+          name="secret"
+          rules={[
             {
               required: true,
-              message: (
-                intl.formatMessage({ id: 'app.operator.node.modal.required.secret', defaultMessage: 'Please input password.' })
-              ),
+              message: intl.formatMessage({
+                id: 'app.operator.node.modal.required.secret',
+                defaultMessage: 'Please input password.',
+              }),
             },
-          ],
-        })(
+          ]}
+        >
           <Input
             placeholder={intl.formatMessage({
               id: 'app.operator.node.modal.label.secret',
               defaultMessage: 'Password',
             })}
           />
-        )}
-      </FormItem>
-      <FormItem
-        {...formItemLayout}
-        label={intl.formatMessage({
-          id: 'app.operator.node.modal.label.type',
-          defaultMessage: 'Type',
-        })}
-      >
-        {form.getFieldDecorator('user_type', {
-          initialValue: userTypeValues[0],
-          rules: [
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.operator.node.modal.label.type',
+            defaultMessage: 'Type',
+          })}
+          name="user_type"
+          rules={[
             {
               required: true,
-              message: (
-                intl.formatMessage({ id: 'app.operator.node.modal.required.type', defaultMessage: 'Please select a type.' })
-              ),
+              message: intl.formatMessage({
+                id: 'app.operator.node.modal.required.type',
+                defaultMessage: 'Please select a type.',
+              }),
             },
-          ],
-        })(<Select style={{ width: '100%' }}>{userTypeOptions}</Select>)}
-      </FormItem>
-      <FormItem
-        {...formItemLayout}
-        label={intl.formatMessage({
-          id: 'app.operator.node.modal.label.attributes',
-          defaultMessage: 'Attributes',
-        })}
-      >
-        {form.getFieldDecorator('attrs', {
-          initialValue: '',
-        })(
+          ]}
+        >
+          <Select style={{ width: '100%' }}>{userTypeOptions}</Select>
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.operator.node.modal.label.attributes',
+            defaultMessage: 'Attributes',
+          })}
+          name="attr"
+        >
           <Input
             placeholder={intl.formatMessage({
               id: 'app.operator.node.modal.label.attributes',
               defaultMessage: 'Attributes',
             })}
           />
-        )}
-      </FormItem>
+        </FormItem>
+      </Form>
     </Modal>
   );
-});
+};
 
 @connect(({ node, loading }) => ({
   node,
   loadingNodes: loading.effects['node/listNode'],
   registeringUser: loading.effects['node/registerUserToNode'],
 }))
-@Form.create()
 class Node extends PureComponent {
   state = {
     selectedRows: [],
@@ -388,23 +389,35 @@ class Node extends PureComponent {
         {record.type === 'ca' && (
           <Menu.Item>
             <a onClick={() => this.handleRegisterUser(record)}>
-              {intl.formatMessage({ id: 'app.operator.node.table.operation.registerUser', defaultMessage: 'Register User' })}
+              {intl.formatMessage({
+                id: 'app.operator.node.table.operation.registerUser',
+                defaultMessage: 'Register User',
+              })}
             </a>
           </Menu.Item>
         )}
         <Menu.Item>
           <a onClick={() => this.operationForNode('start', record)}>
-            {intl.formatMessage({ id: 'app.operator.node.table.operation.start', defaultMessage: 'Start' })}
+            {intl.formatMessage({
+              id: 'app.operator.node.table.operation.start',
+              defaultMessage: 'Start',
+            })}
           </a>
         </Menu.Item>
         <Menu.Item>
           <a onClick={() => this.operationForNode('stop', record)}>
-            {intl.formatMessage({ id: 'app.operator.node.table.operation.stop', defaultMessage: 'Stop' })}
+            {intl.formatMessage({
+              id: 'app.operator.node.table.operation.stop',
+              defaultMessage: 'Stop',
+            })}
           </a>
         </Menu.Item>
         <Menu.Item>
           <a onClick={() => this.operationForNode('restart', record)}>
-            {intl.formatMessage({ id: 'app.operator.node.table.operation.restart', defaultMessage: 'Restart' })}
+            {intl.formatMessage({
+              id: 'app.operator.node.table.operation.restart',
+              defaultMessage: 'Restart',
+            })}
           </a>
         </Menu.Item>
       </Menu>
@@ -413,32 +426,43 @@ class Node extends PureComponent {
     const MoreBtn = record => (
       <Dropdown overlay={menu(record)}>
         <a>
-          {intl.formatMessage({ id: 'app.operator.node.table.operation.more', defaultMessage: 'More' })}{' '}
-          <Icon type="down" />
+          {intl.formatMessage({
+            id: 'app.operator.node.table.operation.more',
+            defaultMessage: 'More',
+          })}{' '}
+          <DownOutlined />
         </a>
       </Dropdown>
     );
 
     const columns = [
       {
-        title: intl.formatMessage({ id: 'app.operator.node.table.header.name', defaultMessage: 'Name' }),
+        title: intl.formatMessage({
+          id: 'app.operator.node.table.header.name',
+          defaultMessage: 'Name',
+        }),
         dataIndex: 'name',
       },
       {
-        title: intl.formatMessage({ id: 'app.operator.node.table.header.type', defaultMessage: 'Type' }),
+        title: intl.formatMessage({
+          id: 'app.operator.node.table.header.type',
+          defaultMessage: 'Type',
+        }),
         dataIndex: 'type',
       },
       {
-        title: (
-          intl.formatMessage({ id: 'app.operator.node.table.header.creationTime', defaultMessage: 'Creation Time' })
-        ),
+        title: intl.formatMessage({
+          id: 'app.operator.node.table.header.creationTime',
+          defaultMessage: 'Creation Time',
+        }),
         dataIndex: 'created_at',
         render: text => <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
       },
       {
-        title: (
-          intl.formatMessage({ id: 'app.operator.node.table.header.status', defaultMessage: 'Status' })
-        ),
+        title: intl.formatMessage({
+          id: 'app.operator.node.table.header.status',
+          defaultMessage: 'Status',
+        }),
         render: text => (
           <Badge
             status={badgeStatus(text)}
@@ -450,7 +474,10 @@ class Node extends PureComponent {
         dataIndex: 'status',
       },
       {
-        title: intl.formatMessage({ id: 'form.table.header.operation', defaultMessage: 'Operation' }),
+        title: intl.formatMessage({
+          id: 'form.table.header.operation',
+          defaultMessage: 'Operation',
+        }),
         render: (text, record) => (
           <Fragment>
             <a className={styles.danger} onClick={() => this.handleDeleteNode(record)}>
@@ -465,9 +492,10 @@ class Node extends PureComponent {
 
     return (
       <PageHeaderWrapper
-        title={
-          intl.formatMessage({ id: 'app.operator.node.title', defaultMessage: 'Node Management' })
-        }
+        title={intl.formatMessage({
+          id: 'app.operator.node.title',
+          defaultMessage: 'Node Management',
+        })}
       >
         <Card bordered={false}>
           <div className={styles.tableList}>
diff --git a/src/dashboard/src/pages/Operator/Organization.js b/src/dashboard/src/pages/Operator/Organization.js
index da677e6f1..9fa60ad22 100644
--- a/src/dashboard/src/pages/Operator/Organization.js
+++ b/src/dashboard/src/pages/Operator/Organization.js
@@ -2,8 +2,9 @@
  SPDX-License-Identifier: Apache-2.0
 */
 import React, { PureComponent, Fragment } from 'react';
-import { connect, useIntl, injectIntl } from 'umi';
+import { connect, injectIntl } from 'umi';
 import { Card, Button, Form, Modal, Input, message, Divider } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import StandardTable from '@/components/StandardTable';
@@ -11,47 +12,54 @@ import styles from './styles.less';
 
 const FormItem = Form.Item;
 
-const CreateUpdateForm = Form.create()(props => {
+const CreateUpdateForm = props => {
   const {
     visible,
-    form,
     method,
     handleSubmit,
     handleModalVisible,
     confirmLoading,
     organization,
+    intl,
   } = props;
-  const intl = useIntl();
+  const [form] = Form.useForm();
   const onSubmit = () => {
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      handleSubmit(method, fieldsValue, organization);
-    });
+    form.submit();
+  };
+
+  const onFinish = values => {
+    handleSubmit(method, values, organization);
   };
 
   return (
     <Modal
       destroyOnClose
-      title={
-        intl.formatMessage({ id: `app.operator.organization.form.${method === 'create' ? 'new' : 'update'}.title`, defaultMessage: 'New Organization' })
-      }
+      title={intl.formatMessage({
+        id: `app.operator.organization.form.${method === 'create' ? 'new' : 'update'}.title`,
+        defaultMessage: 'New Organization',
+      })}
       visible={visible}
       confirmLoading={confirmLoading}
       width="50%"
       onOk={onSubmit}
       onCancel={() => handleModalVisible()}
     >
-      <FormItem
-        labelCol={{ span: 5 }}
-        wrapperCol={{ span: 15 }}
-        label={intl.formatMessage({
-          id: 'app.operator.organization.form.name.label',
-          defaultMessage: 'Organization Name',
-        })}
+      <Form
+        form={form}
+        onFinish={onFinish}
+        initialValues={{
+          name: method === 'create' ? '' : organization.name,
+        }}
       >
-        {form.getFieldDecorator('name', {
-          initialValue: method === 'create' ? '' : organization.name,
-          rules: [
+        <FormItem
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 15 }}
+          label={intl.formatMessage({
+            id: 'app.operator.organization.form.name.label',
+            defaultMessage: 'Organization Name',
+          })}
+          name="name"
+          rules={[
             {
               required: true,
               message: intl.formatMessage({
@@ -60,19 +68,19 @@ const CreateUpdateForm = Form.create()(props => {
               }),
               min: 1,
             },
-          ],
-        })(
+          ]}
+        >
           <Input
             placeholder={intl.formatMessage({
               id: 'form.input.placeholder',
               defaultMessage: 'Please input',
             })}
           />
-        )}
-      </FormItem>
+        </FormItem>
+      </Form>
     </Modal>
   );
-});
+};
 
 @connect(({ organization, loading }) => ({
   organization,
@@ -326,20 +334,25 @@ class Organization extends PureComponent {
     } = this.props;
     const columns = [
       {
-        title: (
-          intl.formatMessage({ id: 'app.operator.organization.table.header.name', defaultMessage: 'Organization Name' })
-        ),
+        title: intl.formatMessage({
+          id: 'app.operator.organization.table.header.name',
+          defaultMessage: 'Organization Name',
+        }),
         dataIndex: 'name',
       },
       {
-        title: (
-          intl.formatMessage({ id: 'app.operator.organization.table.header.createTime', defaultMessage: 'Create Time' })
-        ),
+        title: intl.formatMessage({
+          id: 'app.operator.organization.table.header.createTime',
+          defaultMessage: 'Create Time',
+        }),
         dataIndex: 'created_at',
         render: text => <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
       },
       {
-        title: intl.formatMessage({ id: 'form.table.header.operation', defaultMessage: 'Operation' }),
+        title: intl.formatMessage({
+          id: 'form.table.header.operation',
+          defaultMessage: 'Operation',
+        }),
         render: (text, record) => (
           <Fragment>
             <a onClick={() => this.showUpdate(record)}>
@@ -360,20 +373,21 @@ class Organization extends PureComponent {
       handleSubmit: this.handleSubmit,
       handleModalVisible: this.handleModalVisible,
       confirmLoading: creatingOrganization,
+      intl,
     };
     return (
       <PageHeaderWrapper
-        title={
-          intl.formatMessage({ id: 'app.operator.organization.title', defaultMessage: 'Organization Management' })
-        }
+        title={intl.formatMessage({
+          id: 'app.operator.organization.title',
+          defaultMessage: 'Organization Management',
+        })}
       >
         <Card bordered={false}>
           <div className={styles.tableList}>
             <div className={styles.tableListOperator}>
-              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
-                {
-                  intl.formatMessage({ id: 'form.button.new', defaultMessage: 'New' })
-                }
+              <Button type="primary" onClick={() => this.handleModalVisible(true)}>
+                <PlusOutlined />
+                {intl.formatMessage({ id: 'form.button.new', defaultMessage: 'New' })}
               </Button>
             </div>
             <StandardTable
diff --git a/src/dashboard/src/pages/Operator/Overview.js b/src/dashboard/src/pages/Operator/Overview.js
index caf692448..e58107025 100644
--- a/src/dashboard/src/pages/Operator/Overview.js
+++ b/src/dashboard/src/pages/Operator/Overview.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'dva';
+import { connect } from 'umi';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 
 @connect(() => ({}))
diff --git a/src/dashboard/src/pages/Operator/UserManagement.js b/src/dashboard/src/pages/Operator/UserManagement.js
index c9450f61a..bb24b0794 100644
--- a/src/dashboard/src/pages/Operator/UserManagement.js
+++ b/src/dashboard/src/pages/Operator/UserManagement.js
@@ -2,7 +2,7 @@
  SPDX-License-Identifier: Apache-2.0
 */
 import React, { PureComponent, Fragment } from 'react';
-import { connect, useIntl, injectIntl } from 'umi';
+import { connect, injectIntl } from 'umi';
 import {
   Card,
   Button,
@@ -12,10 +12,10 @@ import {
   Select,
   message,
   Dropdown,
-  Icon,
   Menu,
   AutoComplete,
 } from 'antd';
+import { DownOutlined, PlusOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import isEmail from 'validator/lib/isEmail';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
@@ -27,10 +27,9 @@ const FormItem = Form.Item;
 const Option = Select.Option;
 const AutoCompleteOption = AutoComplete.Option;
 
-const CreateUpdateForm = Form.create()(props => {
+const CreateUpdateForm = props => {
   const {
     visible,
-    form,
     method,
     handleSubmit,
     handleModalVisible,
@@ -38,75 +37,88 @@ const CreateUpdateForm = Form.create()(props => {
     user,
     organizations,
     onSearchOrganization,
+    intl,
   } = props;
-  const { getFieldValue } = form;
+  const [form] = Form.useForm();
   const userRole = getAuthority()[0];
-  const intl = useIntl();
+  let orgID = '';
   const onSubmit = () => {
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      handleSubmit(method, fieldsValue, user);
-    });
+    form.submit();
   };
 
-  const validateEmail = (rule, value, callback) => {
+  const onFinish = values => {
+    handleSubmit(
+      method,
+      {
+        ...values,
+        organization: orgID,
+      },
+      user
+    );
+  };
+  const validateEmail = async (rule, value) => {
     if (value && !isEmail(value)) {
-      callback(
+      throw new Error(
         intl.formatMessage({
           id: 'app.operator.user.form.email.noValid',
           defaultMessage: 'Please input valid email',
         })
       );
     }
-    callback();
   };
   const organizationOptions = organizations.map(org => (
-    <AutoCompleteOption key={org.id}>{org.name}</AutoCompleteOption>
+    <AutoCompleteOption key={org.id} value={org.name}>
+      {org.name}
+    </AutoCompleteOption>
   ));
-  const onSelectOrganization = value => {
+  const onSelectOrganization = (value, option) => {
     form.setFieldsValue({
       organization: value,
     });
+    orgID = option.key;
   };
 
-  const validatePasswordConfirm = (rule, value, callback) => {
-    if (value && getFieldValue('password') !== value) {
-      callback(
+  const validatePasswordConfirm = async (rule, value) => {
+    if (value && form.getFieldValue('password') !== value) {
+      throw new Error(
         intl.formatMessage({
           id: 'app.operator.user.form.passwordConfirm.noValid',
           defaultMessage: 'Inconsistent password input twice',
         })
       );
     }
-    callback();
   };
 
   return (
     <Modal
       destroyOnClose
-      title={
-        intl.formatMessage({
-          id: `app.operator.user.form.${method === 'create' ? 'new' : 'update'}.title`,
-          defaultMessage: 'New User',
-        })
-      }
+      title={intl.formatMessage({
+        id: `app.operator.user.form.${method === 'create' ? 'new' : 'update'}.title`,
+        defaultMessage: 'New User',
+      })}
       visible={visible}
       confirmLoading={confirmLoading}
       width="50%"
       onOk={onSubmit}
       onCancel={() => handleModalVisible()}
     >
-      <FormItem
-        labelCol={{ span: 5 }}
-        wrapperCol={{ span: 15 }}
-        label={intl.formatMessage({
-          id: 'app.operator.user.form.name.label',
-          defaultMessage: 'User Name',
-        })}
+      <Form
+        form={form}
+        onFinish={onFinish}
+        initialValues={{
+          role: method === 'create' ? 'user' : user.role,
+          email: method === 'create' ? '' : user.email,
+        }}
       >
-        {form.getFieldDecorator('username', {
-          initialValue: method === 'create' ? '' : user.username,
-          rules: [
+        <FormItem
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 15 }}
+          label={intl.formatMessage({
+            id: 'app.operator.user.form.name.label',
+            defaultMessage: 'User Name',
+          })}
+          name="username"
+          rules={[
             {
               required: true,
               message: intl.formatMessage({
@@ -115,58 +127,48 @@ const CreateUpdateForm = Form.create()(props => {
               }),
               min: 1,
             },
-          ],
-        })(
+          ]}
+        >
           <Input
             placeholder={intl.formatMessage({
               id: 'form.input.placeholder',
               defaultMessage: 'Please input',
             })}
           />
-        )}
-      </FormItem>
-      <FormItem
-        labelCol={{ span: 5 }}
-        wrapperCol={{ span: 15 }}
-        label={intl.formatMessage({
-          id: 'app.operator.user.form.role.label',
-          defaultMessage: 'User Role',
-        })}
-      >
-        {form.getFieldDecorator('role', {
-          initialValue: method === 'create' ? 'user' : user.role,
-        })(
+        </FormItem>
+        <FormItem
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 15 }}
+          label={intl.formatMessage({
+            id: 'app.operator.user.form.role.label',
+            defaultMessage: 'User Role',
+          })}
+          name="role"
+        >
           <Select>
             <Option value="user">
-              {
-                intl.formatMessage({
-                  id: 'app.operator.user.role.user',
-                  defaultMessage: 'User',
-                })
-              }
+              {intl.formatMessage({
+                id: 'app.operator.user.role.user',
+                defaultMessage: 'User',
+              })}
             </Option>
             <Option value="administrator">
-              {
-                intl.formatMessage({
-                  id: 'app.operator.user.role.administrator',
-                  defaultMessage: 'Administrator',
-                })
-              }
+              {intl.formatMessage({
+                id: 'app.operator.user.role.administrator',
+                defaultMessage: 'Administrator',
+              })}
             </Option>
           </Select>
-        )}
-      </FormItem>
-      <FormItem
-        labelCol={{ span: 5 }}
-        wrapperCol={{ span: 15 }}
-        label={intl.formatMessage({
-          id: 'app.operator.user.form.email.label',
-          defaultMessage: 'Email',
-        })}
-      >
-        {form.getFieldDecorator('email', {
-          initialValue: method === 'create' ? '' : user.email,
-          rules: [
+        </FormItem>
+        <FormItem
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 15 }}
+          label={intl.formatMessage({
+            id: 'app.operator.user.form.email.label',
+            defaultMessage: 'Email',
+          })}
+          name="email"
+          rules={[
             {
               required: true,
               message: intl.formatMessage({
@@ -177,27 +179,24 @@ const CreateUpdateForm = Form.create()(props => {
             {
               validator: validateEmail,
             },
-          ],
-        })(
+          ]}
+        >
           <Input
             placeholder={intl.formatMessage({
               id: 'form.input.placeholder',
               defaultMessage: 'Please input',
             })}
           />
-        )}
-      </FormItem>
-      <FormItem
-        labelCol={{ span: 5 }}
-        wrapperCol={{ span: 15 }}
-        label={intl.formatMessage({
-          id: 'app.operator.user.form.password.label',
-          defaultMessage: 'Password',
-        })}
-      >
-        {form.getFieldDecorator('password', {
-          initialValue: method === 'create' ? '' : user.username,
-          rules: [
+        </FormItem>
+        <FormItem
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 15 }}
+          label={intl.formatMessage({
+            id: 'app.operator.user.form.password.label',
+            defaultMessage: 'Password',
+          })}
+          name="password"
+          rules={[
             {
               required: true,
               message: intl.formatMessage({
@@ -205,27 +204,24 @@ const CreateUpdateForm = Form.create()(props => {
                 defaultMessage: 'Please input password',
               }),
             },
-          ],
-        })(
+          ]}
+        >
           <Input.Password
             placeholder={intl.formatMessage({
               id: 'form.input.placeholder',
               defaultMessage: 'Please input',
             })}
           />
-        )}
-      </FormItem>
-      <FormItem
-        labelCol={{ span: 5 }}
-        wrapperCol={{ span: 15 }}
-        label={intl.formatMessage({
-          id: 'app.operator.user.form.passwordConfirm.label',
-          defaultMessage: 'Password Confirm',
-        })}
-      >
-        {form.getFieldDecorator('passwordConfirm', {
-          initialValue: method === 'create' ? '' : user.usernamep,
-          rules: [
+        </FormItem>
+        <FormItem
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 15 }}
+          label={intl.formatMessage({
+            id: 'app.operator.user.form.passwordConfirm.label',
+            defaultMessage: 'Password Confirm',
+          })}
+          name="passwordConfirm"
+          rules={[
             {
               required: true,
               message: intl.formatMessage({
@@ -236,29 +232,25 @@ const CreateUpdateForm = Form.create()(props => {
             {
               validator: validatePasswordConfirm,
             },
-          ],
-        })(
+          ]}
+        >
           <Input.Password
             placeholder={intl.formatMessage({
               id: 'form.input.placeholder',
               defaultMessage: 'Please input',
             })}
           />
-        )}
-      </FormItem>
-      {userRole === 'operator' && (
-        <Form.Item
-          labelCol={{ span: 5 }}
-          wrapperCol={{ span: 15 }}
-          label={intl.formatMessage({
-            id: 'app.operator.user.form.organization.label',
-            defaultMessage: 'Organization',
-          })}
-        >
-          {form.getFieldDecorator(
-            'organization',
-            {}
-          )(
+        </FormItem>
+        {userRole === 'operator' && (
+          <Form.Item
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 15 }}
+            label={intl.formatMessage({
+              id: 'app.operator.user.form.organization.label',
+              defaultMessage: 'Organization',
+            })}
+            name="organization"
+          >
             <AutoComplete
               onSearch={onSearchOrganization}
               onSelect={onSelectOrganization}
@@ -269,12 +261,12 @@ const CreateUpdateForm = Form.create()(props => {
             >
               {organizationOptions}
             </AutoComplete>
-          )}
-        </Form.Item>
-      )}
+          </Form.Item>
+        )}
+      </Form>
     </Modal>
   );
-});
+};
 
 @connect(({ user, organization, loading }) => ({
   user,
@@ -498,43 +490,37 @@ class UserManagement extends PureComponent {
     }));
     const columns = [
       {
-        title: (
-          intl.formatMessage({
-            id: 'app.operator.user.table.header.name',
-            defaultMessage: 'User Name',
-          })
-        ),
-    dataIndex: 'username',
-  },
+        title: intl.formatMessage({
+          id: 'app.operator.user.table.header.name',
+          defaultMessage: 'User Name',
+        }),
+        dataIndex: 'username',
+      },
       {
-        title: (
-          intl.formatMessage({
-            id: 'app.operator.user.table.header.role',
-            defaultMessage: 'User Role',
-          })
-        ),
+        title: intl.formatMessage({
+          id: 'app.operator.user.table.header.role',
+          defaultMessage: 'User Role',
+        }),
         dataIndex: 'role',
-        render: text => (
+        render: text =>
           intl.formatMessage({
             id: `app.operator.user.role.${text}`,
             defaultMessage: 'User',
-          })
-        ),
+          }),
       },
       {
-        title: (
-          intl.formatMessage({
-            id: 'app.operator.user.table.header.organization',
-            defaultMessage: 'Organization',
-          })
-        ),
+        title: intl.formatMessage({
+          id: 'app.operator.user.table.header.organization',
+          defaultMessage: 'Organization',
+        }),
         dataIndex: 'organization',
         render: text => (text ? text.name : ''),
       },
       {
-        title: (
-          intl.formatMessage({ id: 'app.operator.organization.table.header.createTime', defaultMessage: 'Create Time' })
-        ),
+        title: intl.formatMessage({
+          id: 'app.operator.organization.table.header.createTime',
+          defaultMessage: 'Create Time',
+        }),
         dataIndex: 'created_at',
         render: text => <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
       },
@@ -546,12 +532,10 @@ class UserManagement extends PureComponent {
         render: (text, record) => (
           <Fragment>
             <a className={styles.danger} onClick={() => this.handleDelete(record)}>
-              {
-                intl.formatMessage({
-                  id: 'form.menu.item.delete',
-                  defaultMessage: 'Delete',
-                })
-              }
+              {intl.formatMessage({
+                id: 'form.menu.item.delete',
+                defaultMessage: 'Delete',
+              })}
             </a>
           </Fragment>
         ),
@@ -559,6 +543,7 @@ class UserManagement extends PureComponent {
     ];
 
     const formProps = {
+      intl,
       visible: modalVisible,
       method: modalMethod,
       handleModalVisible: this.handleModalVisible,
@@ -577,47 +562,39 @@ class UserManagement extends PureComponent {
     const menu = (
       <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
         <Menu.Item key="remove">
-          {
-            intl.formatMessage({
-              id: 'form.menu.item.delete',
-              defaultMessage: 'Delete',
-            })
-          }
+          {intl.formatMessage({
+            id: 'form.menu.item.delete',
+            defaultMessage: 'Delete',
+          })}
         </Menu.Item>
       </Menu>
     );
     return (
       <PageHeaderWrapper
-        title={
-          intl.formatMessage({
-            id: 'app.operator.user.title',
-            defaultMessage: 'User Management',
-          })
-        }
+        title={intl.formatMessage({
+          id: 'app.operator.user.title',
+          defaultMessage: 'User Management',
+        })}
       >
         <Card bordered={false}>
           <div className={styles.tableList}>
             <div className={styles.tableListOperator}>
-              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
-                {
-                  intl.formatMessage({
-                    id: 'form.button.new',
-                    defaultMessage: 'New',
-                  })
-                }
+              <Button type="primary" onClick={() => this.handleModalVisible(true)}>
+                <PlusOutlined />
+                {intl.formatMessage({
+                  id: 'form.button.new',
+                  defaultMessage: 'New',
+                })}
               </Button>
               {selectedRows.length > 0 && (
                 <span>
                   <Dropdown overlay={menu}>
                     <Button>
-                {
-                  intl.formatMessage({
-                    id: 'form.button.moreActions',
-                    defaultMessage: 'More Actions',
-                  })
-                }
-                      {' '}
-                      <Icon type="down" />
+                      {intl.formatMessage({
+                        id: 'form.button.moreActions',
+                        defaultMessage: 'More Actions',
+                      })}{' '}
+                      <DownOutlined />
                     </Button>
                   </Dropdown>
                 </span>
diff --git a/src/dashboard/src/pages/Operator/styles.less b/src/dashboard/src/pages/Operator/styles.less
index 2ea129e49..d8af7dbdb 100755
--- a/src/dashboard/src/pages/Operator/styles.less
+++ b/src/dashboard/src/pages/Operator/styles.less
@@ -69,7 +69,7 @@
 }
 
 .danger {
-  color: @text-color-danger;
+  color: @error-color;
 }
 
 .disabled {
diff --git a/src/dashboard/src/pages/Overview/Overview.js b/src/dashboard/src/pages/Overview/index.js
similarity index 62%
rename from src/dashboard/src/pages/Overview/Overview.js
rename to src/dashboard/src/pages/Overview/index.js
index 5804fb5a8..bb8cb5b58 100644
--- a/src/dashboard/src/pages/Overview/Overview.js
+++ b/src/dashboard/src/pages/Overview/index.js
@@ -1,12 +1,10 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'dva';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 
-@connect(() => ({}))
-class Overview extends PureComponent {
+class Index extends PureComponent {
   render() {
     return <PageHeaderWrapper>User Overview</PageHeaderWrapper>;
   }
 }
 
-export default Overview;
+export default Index;
diff --git a/src/dashboard/src/pages/User/Login.js b/src/dashboard/src/pages/User/Login.js
index 10275bda1..948fc32a7 100644
--- a/src/dashboard/src/pages/User/Login.js
+++ b/src/dashboard/src/pages/User/Login.js
@@ -54,13 +54,7 @@ class LoginPage extends Component {
     const { type, autoLogin } = this.state;
     return (
       <div className={styles.main}>
-        <Login
-          defaultActiveKey={type}
-          onSubmit={this.handleSubmit}
-          ref={form => {
-            this.loginForm = form;
-          }}
-        >
+        <Login defaultActiveKey={type} onSubmit={this.handleSubmit}>
           {login.status === 'error' &&
             login.type === 'account' &&
             !submitting &&
@@ -84,21 +78,17 @@ class LoginPage extends Component {
                 message: intl.formatMessage({ id: 'validation.password.required' }),
               },
             ]}
-            onPressEnter={e => {
-              e.preventDefault();
-              this.loginForm.validateFields(this.handleSubmit);
-            }}
           />
           <div>
             <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
               {intl.formatMessage({
-                id: 'app.login.remember-me'
+                id: 'app.login.remember-me',
               })}
             </Checkbox>
           </div>
           <Submit loading={submitting}>
             {intl.formatMessage({
-              id: 'app.login.login'
+              id: 'app.login.login',
             })}
           </Submit>
         </Login>