diff --git a/.umirc.js b/.umirc.js
index 32d7d26..b0565dd 100644
--- a/.umirc.js
+++ b/.umirc.js
@@ -5,6 +5,12 @@ const path = require('path')
 const lessToJs = require('less-vars-to-js')
 const isDevelopment = process.env.NODE_ENV === 'development'
 
+const { theme } = require('antd/lib')
+const { convertLegacyToken } = require('@ant-design/compatible/lib')
+
+const mapToken = theme.defaultAlgorithm(theme.defaultSeed)
+const v4Token = convertLegacyToken(mapToken)
+
 // how to speed compile: https://umijs.org/guide/boost-compile-speed
 export default {
   // IMPORTANT! change next line to yours or delete. And hide in dev
@@ -63,9 +69,12 @@ export default {
   },
   // Theme for antd
   // https://ant.design/docs/react/customize-theme
-  theme: lessToJs(
+  theme: {
+    ...v4Token,
+    ...lessToJs(
     fs.readFileSync(path.join(__dirname, './src/themes/default.less'), 'utf8')
-  ),
+    )
+  },
   webpack5: {},
   mfsu: {},
   chainWebpack: function (config, { webpack }) {
diff --git a/package.json b/package.json
index 4b1c72b..0cb5bb9 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "@lingui/react": "^3.8.0",
-    "antd": "^4.0.0",
+    "antd": "^5.0.0",
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
     "d3-shape": "^2.1.0",
@@ -38,6 +38,7 @@
     "store": "^2.0.0"
   },
   "devDependencies": {
+    "@ant-design/compatible": "^5.1.0",
     "@babel/preset-react": "^7.12.13",
     "@lingui/cli": "^3.8.0",
     "@lingui/macro": "^3.8.0",
diff --git a/src/components/GlobalFooter/index.less b/src/components/GlobalFooter/index.less
index e4b3dfd..ac43595 100644
--- a/src/components/GlobalFooter/index.less
+++ b/src/components/GlobalFooter/index.less
@@ -1,4 +1,4 @@
-@import '~antd/lib/style/themes/default.less';
+/* @import '~antd/lib/style/themes/default.less'; */
 
 .globalFooter {
   margin: 48px 0 24px 0;
diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index 3b37540..2ee6af9 100644
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -141,6 +141,7 @@ class Header extends PureComponent {
           [styles.fixed]: fixed,
           [styles.collapsed]: collapsed,
         })}
+        style={{height: 72, backgroundColor: 'white', paddingInline: 0}}
         id="layoutHeader"
       >
         <div
diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less
index 1709b6d..0635d57 100644
--- a/src/components/Layout/Header.less
+++ b/src/components/Layout/Header.less
@@ -27,6 +27,8 @@
   :global {
     .ant-menu-submenu-title {
       height: 72px;
+      display: flex;
+      align-items: center;
     }
 
     .ant-menu-horizontal {
diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js
index b054705..a249715 100644
--- a/src/layouts/PrimaryLayout.js
+++ b/src/layouts/PrimaryLayout.js
@@ -112,17 +112,17 @@ class PrimaryLayout extends PureComponent {
     }
 
     return (
-      <Fragment>
+      (<Fragment>
         <Layout>
           {isMobile ? (
             <Drawer
               maskClosable
               closable={false}
               onClose={onCollapseChange.bind(this, !collapsed)}
-              visible={!collapsed}
+              open={!collapsed}
               placement="left"
               width={200}
-              style={{
+              rootStyle={{
                 padding: 0,
                 height: '100vh',
               }}
@@ -152,8 +152,8 @@ class PrimaryLayout extends PureComponent {
             />
           </div>
         </Layout>
-      </Fragment>
-    )
+      </Fragment>)
+    );
   }
 }
 
diff --git a/src/pages/user/components/Modal.js b/src/pages/user/components/Modal.js
index cae9d7f..4173fad 100644
--- a/src/pages/user/components/Modal.js
+++ b/src/pages/user/components/Modal.js
@@ -40,7 +40,7 @@ class UserModal extends PureComponent {
     const { item = {}, onOk, form, ...modalProps } = this.props
 
     return (
-      <Modal {...modalProps} onOk={this.handleOk}>
+      (<Modal {...modalProps} onOk={this.handleOk}>
         <Form ref={this.formRef} name="control-ref" initialValues={{ ...item, address: item.address && item.address.split(' ') }} layout="horizontal">
           <FormItem name='name' rules={[{ required: true }]}
             label={t`Name`} hasFeedback {...formItemLayout}>
@@ -81,8 +81,8 @@ class UserModal extends PureComponent {
             />
           </FormItem>
         </Form>
-      </Modal>
-    )
+      </Modal>)
+    );
   }
 }
 
diff --git a/src/themes/default.less b/src/themes/default.less
index 8fabcc1..7d2603d 100644
--- a/src/themes/default.less
+++ b/src/themes/default.less
@@ -1,16 +1,16 @@
-// 本文件是对 ant-design:
-// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
-// 相应变量值的覆盖
-// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
-
-@import '../../node_modules/antd/lib/style/themes/default.less';
-
-@border-radius-base: 3px;
-@border-radius-sm: 2px;
-@shadow-color: rgba(0, 0, 0, 0.05);
-@shadow-1-down: 4px 4px 40px @shadow-color;
-@border-color-split: #f4f4f4;
-@border-color-base: #e5e5e5;
-@font-size-base: 13px;
-@text-color: #666;
-@hover-color: #f9f9fc;
+// 本文件是对 ant-design:
+// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
+// 相应变量值的覆盖
+// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
+
+/* @import '../../node_modules/antd/lib/style/themes/default.less';*/
+
+@border-radius-base: 3px;
+@border-radius-sm: 2px;
+@shadow-color: rgba(0, 0, 0, 0.05);
+@shadow-1-down: 4px 4px 40px @shadow-color;
+@border-color-split: #f4f4f4;
+@border-color-base: #e5e5e5;
+@font-size-base: 13px;
+@text-color: #666;
+@hover-color: #f9f9fc;
diff --git a/src/themes/index.less b/src/themes/index.less
index fc5d498..2418b17 100644
--- a/src/themes/index.less
+++ b/src/themes/index.less
@@ -1,3 +1,4 @@
+@import '~antd/dist/reset.css';
 @import '~themes/vars.less';
 
 body {