diff --git a/antdv-demo/components/api.vue b/antdv-demo/components/api.vue
index 62e8ec56c..1e6df8ef5 100644
--- a/antdv-demo/components/api.vue
+++ b/antdv-demo/components/api.vue
@@ -9,7 +9,7 @@
 import { isZhCN } from '../utils/util';
 import GoogleAds from './GoogleAds';
 
-const showAd = location.host.indexOf('antdv.com') > -1;
+const showAd = false; // location.host.indexOf('antdv.com') > -1;
 export default {
   name: 'Api',
   components: {
diff --git a/antdv-demo/components/header.vue b/antdv-demo/components/header.vue
index d4fb670f6..eacbbffb4 100644
--- a/antdv-demo/components/header.vue
+++ b/antdv-demo/components/header.vue
@@ -173,6 +173,19 @@ export default {
               <a-menu-item key="components">
                 <router-link to="/docs/vue/introduce">{isCN ? '组件' : 'Components'}</router-link>
               </a-menu-item>
+              {isCN ? (
+                <a-menu-item key="surely-vue">
+                  <a
+                    href="https://www.surely.cool"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style="position: relative"
+                  >
+                    高级组件
+                    <a-badge color="red" style="position: absolute;top: -10px;right: -10px;" />
+                  </a>
+                </a-menu-item>
+              ) : null}
               {isCN ? (
                 <a-menu-item key="store">
                   <a
@@ -180,7 +193,7 @@ export default {
                     target="_blank"
                     style="position: relative;"
                   >
-                    商店 <a-badge color="red" style="position: absolute;top: -10px;right: -10px;" />
+                    商店
                   </a>
                 </a-menu-item>
               ) : (
@@ -191,7 +204,6 @@ export default {
                     style="position: relative;"
                   >
                     Store{' '}
-                    <a-badge color="red" style="position: absolute;top: -10px;right: -10px;" />
                   </a>
                 </a-menu-item>
               )}
@@ -203,7 +215,6 @@ export default {
                     style="position: relative;"
                   >
                     Vue 实战教程
-                    <a-badge color="red" style="position: absolute;top: -10px;right: -10px;" />
                   </a>
                 </a-menu-item>
               ) : null}
diff --git a/antdv-demo/components/layout.vue b/antdv-demo/components/layout.vue
index 2a73869fb..465178673 100644
--- a/antdv-demo/components/layout.vue
+++ b/antdv-demo/components/layout.vue
@@ -6,7 +6,7 @@ import Footer from './footer';
 // import Geektime from './geektime';
 import GeektimeAds from './geektime_ads';
 import RightBottomAd from './right_bottom_ad';
-import Sponsors from './sponsors';
+// import Sponsors from './sponsors';
 import zhCN from 'ant-design-vue/es/locale-provider/zh_CN';
 import enUS from 'ant-design-vue/es/locale-provider/default';
 import sortBy from 'lodash/sortBy';
@@ -14,8 +14,9 @@ import { isZhCN } from '../utils/util';
 import { Provider, create } from '../../components/_util/store';
 import NProgress from 'nprogress';
 import MobileMenu from '../../components/vc-drawer/src';
-import TopAd from './top_ad';
+// import TopAd from './top_ad';
 import GoogleAds from './GoogleAds';
+import SurelyVue from './surelyVue';
 
 const docsList = [
   { key: 'introduce', enTitle: 'Ant Design of Vue', title: 'Ant Design of Vue' },
@@ -255,6 +256,7 @@ export default {
             <a-row>
               {isMobile ? (
                 <MobileMenu ref="sidebar" wrapperClassName="drawer-wrapper">
+                  <SurelyVue />
                   <a-menu
                     class="aside-container menu-site"
                     selectedKeys={[name]}
@@ -281,7 +283,7 @@ export default {
                 >
                   <a-affix>
                     <section class="main-menu-inner">
-                      <Sponsors isCN={isCN} />
+                      <SurelyVue />
                       <a-menu
                         class="aside-container menu-site"
                         selectedKeys={[name]}
@@ -300,7 +302,6 @@ export default {
               )}
               <a-col xxl={20} xl={19} lg={19} md={18} sm={24} xs={24}>
                 <section class="main-container main-container-component">
-                  <TopAd isCN={isCN} />
                   {showAd ? <GeektimeAds isMobile={isMobile} /> : null}
                   {!isMobile ? (
                     <div class={['toc-affix', isCN ? 'toc-affix-cn' : '']} style="width: 150px;">
diff --git a/antdv-demo/components/right_bottom_ad.vue b/antdv-demo/components/right_bottom_ad.vue
index 9fa3c7733..faff1f33b 100644
--- a/antdv-demo/components/right_bottom_ad.vue
+++ b/antdv-demo/components/right_bottom_ad.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="right-bottom">
+  <div v-if="isCN" id="right-bottom">
     <img width="150" :src="`https://next.antdv.com/common_rice.png?v=${v}`" />
     <div v-if="isMobile" class="close" @click="visible = false">
       <a-icon type="close" />
diff --git a/antdv-demo/components/surelyVue.vue b/antdv-demo/components/surelyVue.vue
new file mode 100644
index 000000000..44cf1c376
--- /dev/null
+++ b/antdv-demo/components/surelyVue.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <a href="https://www.surely.cool/" target="_blank">
+      <div :class="cls">
+        <div class="logo">
+          <img height="80" src="https://www.surely.cool/surely-vue-logo.png" alt="" />
+        </div>
+        <div class="desc">
+          <div class="title">高性能 Surely Vue</div>
+          <div class="sub-title">
+            构建更快的网站
+            <br />
+            更快的构建网站
+          </div>
+        </div>
+      </div>
+    </a>
+    <div class="placeholder" />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    type: String,
+  },
+  data() {
+    return {
+      cls: {
+        wrap: true,
+        [`wrap-${this.type}`]: true,
+      },
+    };
+  },
+};
+</script>
+<style scoped>
+.wrap {
+  display: flex;
+  background-color: #f4f8fa;
+  padding: 10px 30px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  width: 100%;
+  height: 100px;
+  overflow: hidden;
+}
+.placeholder {
+  height: 100px;
+}
+.desc {
+  margin-left: 20px;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.85);
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji', sans-serif;
+}
+.title {
+  font-size: 18px;
+}
+.sub-title {
+  opacity: 0.7;
+  margin-top: 5px;
+}
+</style>
diff --git a/antdv-demo/components/top_ad.vue b/antdv-demo/components/top_ad.vue
index 88b774c5b..b16d215ac 100644
--- a/antdv-demo/components/top_ad.vue
+++ b/antdv-demo/components/top_ad.vue
@@ -40,14 +40,14 @@ export default {
           href: 'https://yidengfe.com/launches/01/yd.html',
           visible: isEffective('2020-09-11 17:00:00', '2021-03-11 17:00:00'),
         },
-      ].filter((ad) => ad.visible),
+      ].filter(ad => ad.visible),
       enAds: [
         {
           img: 'https://qn.antdv.com/TheBigRichGroup.png',
           href: 'https://thebigrichgroup.com/',
           visible: isEffective('2020-09-18 17:00:00', '2021-07-11 17:00:00'),
         },
-      ].filter((ad) => ad.visible),
+      ].filter(ad => ad.visible),
     };
   },
   computed: {