diff --git a/docusaurus.config.js b/docusaurus.config.js
index fe6e9e68..542153cc 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -143,6 +143,10 @@ module.exports = {
               label: 'Videos',
               to: 'videos/best-practice/jenkins',
             },
+            {
+              to: '/micro',
+              label: 'Microservice',
+            },
           ],
         },
       ],
@@ -300,5 +304,13 @@ module.exports = {
       src: '/custom.js',
       async: true,
     },
+    {
+      src: '//g.alicdn.com/mamba/assets/0.0.15/mse-arc-ui.min.js',
+    },
+  ],
+  stylesheets: [
+    {
+      href: '//g.alicdn.com/mamba/assets/0.0.15/mse-arc-ui.min.css',
+    },
   ],
 };
diff --git a/i18n/zh/code.json b/i18n/zh/code.json
index da3cbdf3..59802f17 100644
--- a/i18n/zh/code.json
+++ b/i18n/zh/code.json
@@ -280,5 +280,8 @@
   "theme.SearchBar.label": {
     "message": "搜索",
     "description": "The ARIA label and placeholder for search button"
+  },
+  "Microservice Ecosystem Landscape": {
+    "message": "微服务生态全景图"
   }
 }
\ No newline at end of file
diff --git a/i18n/zh/docusaurus-theme-classic/footer.json b/i18n/zh/docusaurus-theme-classic/footer.json
index 31cedb6e..ee5aa2bf 100644
--- a/i18n/zh/docusaurus-theme-classic/footer.json
+++ b/i18n/zh/docusaurus-theme-classic/footer.json
@@ -47,6 +47,10 @@
     "message": "视频资料",
     "description": "The label of footer link with label=Video linking to video resources"
   },
+  "link.item.label.Microservice": {
+    "message": "微服务",
+    "description": "Microservice Ecosystem Landscape"
+  },
   "copyright": {
     "message": "\n        <br />\n        <strong>© KubeVela Authors 2022 | Documentation Distributed under <a herf=\"https://creativecommons.org/licenses/by/4.0\">CC-BY-4.0</a> </strong> \n        <br />\n      ",
     "description": "The footer copyright"
diff --git a/src/pages/micro.js b/src/pages/micro.js
new file mode 100644
index 00000000..0596dcd3
--- /dev/null
+++ b/src/pages/micro.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import Translate from '@docusaurus/Translate';
+
+export default function Home() {
+  return (
+    <Layout
+      title={'Microservice Ecosystem Landscape'}
+      description={'Microservice Ecosystem Landscape'}
+    >
+      <div className="msemap-container">
+        <h3
+          style={{
+            fontSize: '2rem',
+            fontWeight: 700,
+            textAlign: 'center',
+            margin: '32px 0',
+          }}
+        >
+          <Translate>Microservice Ecosystem Landscape</Translate>
+        </h3>
+        <div id="mse-arc-container"></div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/static/custom.js b/static/custom.js
index 37044958..fe76de6f 100644
--- a/static/custom.js
+++ b/static/custom.js
@@ -7,10 +7,10 @@ function appendVersionList() {
     link.innerText = version + '(Archived)';
     link.classList = ['dropdown__link'];
     versionItem.appendChild(link);
-    document
-      .getElementsByClassName('dropdown__menu')
-      .item(0)
-      .appendChild(versionItem);
+    const element = document.getElementsByClassName('dropdown__menu').item(0);
+    if (element) {
+      element.appendChild(versionItem);
+    }
   });
 }