diff --git a/package.json b/package.json
index 4cad7fde62e8..723bc59e3d93 100644
--- a/package.json
+++ b/package.json
@@ -141,7 +141,7 @@
     "warning": "~4.0.3"
   },
   "devDependencies": {
-    "@ant-design/colors": "^3.1.0",
+    "@ant-design/colors": "^3.2.2",
     "@ant-design/tools": "^8.0.4",
     "@packtracker/webpack-plugin": "^2.0.1",
     "@sentry/browser": "^5.4.0",
@@ -201,7 +201,7 @@
     "prettier": "^1.17.1",
     "pretty-quick": "^1.11.0",
     "querystring": "^0.2.0",
-    "rc-footer": "^0.2.3",
+    "rc-footer": "^0.3.2",
     "rc-queue-anim": "^1.6.12",
     "rc-scroll-anim": "^2.5.8",
     "rc-tween-one": "^2.4.1",
diff --git a/site/theme/static/footer.less b/site/theme/static/footer.less
index d68893a57894..25a6ee2c14a6 100644
--- a/site/theme/static/footer.less
+++ b/site/theme/static/footer.less
@@ -1,2 +1,17 @@
 @import '~rc-footer/assets/index.css';
 @import './colors';
+
+.rc-footer {
+  &-container {
+    max-width: unset;
+    padding: 60px;
+  }
+
+  &-bottom-container {
+    max-width: calc(100% - 120px);
+  }
+
+  &-columns {
+    justify-content: space-between;
+  }
+}
diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx
index 114f5c126f7b..147fdfc0dc08 100644
--- a/site/theme/template/Home/index.jsx
+++ b/site/theme/template/Home/index.jsx
@@ -41,19 +41,17 @@ function getStyle() {
     #header .ant-row > div:last-child .header-lang-button {
       margin-right: 0;
     }
-    footer .footer-wrap {
-      width: 100%;
+    .rc-footer-container {
       max-width: 1200px;
-      padding: 86px 24px 93px 24px;
-      margin: auto;
+      padding: 80px 0;
     }
-    @media only screen and (max-width: 767.99px) {
-      #footer .footer-wrap {
-        padding: 40px 24px;
-      }
-      footer .footer-wrap .ant-row {
-        padding: 0;
-      }
+
+    .rc-footer-bottom-container {
+      max-width: 1200px;
+    }
+
+    .rc-footer-columns {
+      justify-content: space-around;
     }
   `;
 }
diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.jsx
index 297e7d86e6fd..4cbbd18e8387 100644
--- a/site/theme/template/Layout/Footer.jsx
+++ b/site/theme/template/Layout/Footer.jsx
@@ -97,6 +97,7 @@ class Footer extends React.Component {
           {
             title: <FormattedMessage id="app.footer.design-resources" />,
             url: getLocalizedPathname('/docs/spec/download', isZhCN),
+            LinkComponent: Link,
           },
           {
             title: <FormattedMessage id="app.footer.chinamirror" />,
@@ -148,6 +149,7 @@ class Footer extends React.Component {
             icon: <Icon type="usergroup-add" />,
             title: <FormattedMessage id="app.footer.work_with_us" />,
             url: getLocalizedPathname('/docs/spec/work-with-us', isZhCN),
+            LinkComponent: Link,
           },
         ],
       },
@@ -164,11 +166,13 @@ class Footer extends React.Component {
             icon: <Icon type="history" />,
             title: <FormattedMessage id="app.footer.change-log" />,
             url: getLocalizedPathname('/changelog', isZhCN),
+            LinkComponent: Link,
           },
           {
             icon: <Icon type="profile" />,
             title: <FormattedMessage id="app.footer.faq" />,
             url: getLocalizedPathname('/docs/react/faq', isZhCN),
+            LinkComponent: Link,
           },
           {
             icon: <Icon type="bug" />,
@@ -296,6 +300,9 @@ class Footer extends React.Component {
           },
           {
             title: this.renderThemeChanger(),
+            style: {
+              marginTop: 20,
+            },
           },
         ],
       },
@@ -320,7 +327,7 @@ class Footer extends React.Component {
         });
     };
 
-    const lessUrl = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
+    const lessUrl = 'https://gw.alipayobjects.com/os/lib/less/3.10.3/dist/less.min.js';
 
     if (this.lessLoaded) {
       changeColor();
@@ -373,20 +380,18 @@ class Footer extends React.Component {
     const { color } = this.state;
     const colors = Object.keys(presetPalettes).filter(item => item !== 'grey');
     return (
-      <div style={{ marginTop: 20 }}>
-        <ColorPicker
-          type="sketch"
-          small
-          color={color}
-          position="top"
-          presetColors={[
-            ...colors.map(c => presetPalettes[c][5]),
-            ...colors.map(c => presetPalettes[c][4]),
-            ...colors.map(c => presetPalettes[c][6]),
-          ]}
-          onChangeComplete={this.handleColorChange}
-        />
-      </div>
+      <ColorPicker
+        type="sketch"
+        small
+        color={color}
+        position="top"
+        presetColors={[
+          ...colors.map(c => presetPalettes[c][5]),
+          ...colors.map(c => presetPalettes[c][4]),
+          ...colors.map(c => presetPalettes[c][6]),
+        ]}
+        onChangeComplete={this.handleColorChange}
+      />
     );
   }