diff --git a/docs/.vuepress/public/images/vueschool/close.svg b/docs/.vuepress/public/images/vueschool/close.svg
new file mode 100644
index 000000000..a9d51d1d8
--- /dev/null
+++ b/docs/.vuepress/public/images/vueschool/close.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <g fill="none" fill-rule="evenodd">
+        <g fill="#FFF" fill-rule="nonzero">
+            <path d="M1569.69 33.321c-.415-.414-1.084-.414-1.498 0L1563 38.503l-5.192-5.192c-.414-.415-1.083-.415-1.497 0-.415.414-.415 1.083 0 1.497l5.192 5.192-5.192 5.192c-.415.414-.415 1.083 0 1.497.414.415 1.083.415 1.497 0l5.192-5.192 5.192 5.192c.414.415 1.083.415 1.497 0 .415-.414.415-1.083 0-1.497L1564.497 40l5.192-5.192c.404-.404.404-1.083 0-1.487z" transform="translate(-1556.000000, -33.000000)"/>
+        </g>
+    </g>
+</svg>
diff --git a/docs/.vuepress/public/images/vueschool/vs-backpack.png b/docs/.vuepress/public/images/vueschool/vs-backpack.png
new file mode 100644
index 000000000..43807ff60
Binary files /dev/null and b/docs/.vuepress/public/images/vueschool/vs-backpack.png differ
diff --git a/docs/.vuepress/public/images/vueschool/vs-iso.svg b/docs/.vuepress/public/images/vueschool/vs-iso.svg
new file mode 100644
index 000000000..873f0bcdc
--- /dev/null
+++ b/docs/.vuepress/public/images/vueschool/vs-iso.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="42" viewBox="0 0 37 42">
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g>
+                    <path fill="#364FDE" d="M10.648 25.558C7.883 11.884 10.503 2.91 10.503 2.91s-.701 5.463 4.81 14.267c-.07 10.915 2.078 16.609 2.078 16.609l.442-.325-.442.385s-3.267-2.667-6.743-8.288zM23.674 23.622c1.322 1.332 2.555 2.254 3.447 2.692l-.016-.008s1 .36 1.177.12c1.22-1.292 1.519-3.699.705-8.223-4.65-2.656-5.238-6.796-5.238-6.796s-.838 5.748-.075 12.215z" transform="translate(-20 -19) translate(20 19)"/>
+                    <path fill="#56D8FF" d="M10.503 2.91s-3.827 13.104 2.65 31.773c.176.539 0 1.137-.472 1.496l-6.829 4.787c-.648.479-1.59.18-1.884-.598C2.143 35.4-2.86 18.946 2.202.935c.235-.718 1-1.137 1.707-.837l6.594 2.812z" transform="translate(-20 -19) translate(20 19)"/>
+                    <path fill="#667DFF" d="M23.573 29.238l-6.182 4.548s-3.297-8.736-1.59-25.311c.118-.958 1.119-1.436 1.943-.958l6.005 3.89s-1.177 8.078.53 15.857c.177.777-.118 1.555-.706 1.974zM34.994 19.126l-5.711-3.77c-.353-.24-.883.12-.765.539 1.354 6.043 1.177 9.035-.236 10.53-.176.24-1.177-.119-1.177-.119.942.479 1.177.24 1.177.24.942-.719 4.474-3.292 6.712-4.847.883-.658.883-1.975 0-2.573z" transform="translate(-20 -19) translate(20 19)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/docs/.vuepress/public/images/vueschool/vs-logo.svg b/docs/.vuepress/public/images/vueschool/vs-logo.svg
new file mode 100644
index 000000000..01f7ae050
--- /dev/null
+++ b/docs/.vuepress/public/images/vueschool/vs-logo.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40">
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g opacity=".9">
+                    <g>
+                        <path fill="#364FDE" d="M9.936 24.365C7.355 11.329 9.8 2.775 9.8 2.775s-.654 5.207 4.488 13.6c-.066 10.405 1.939 15.833 1.939 15.833l.412-.31-.412.367s-3.049-2.543-6.291-7.9zM22.09 22.519c1.233 1.27 2.384 2.148 3.215 2.566l-.014-.007s.933.342 1.098.114c1.139-1.232 1.417-3.526.658-7.84-4.34-2.531-4.887-6.478-4.887-6.478s-.782 5.48-.07 11.645z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                        <path fill="#56D8FF" d="M9.8 2.774s-3.57 12.492 2.472 30.29c.165.513 0 1.083-.44 1.426L5.46 39.053c-.604.456-1.483.171-1.757-.57C2 33.748-2.67 18.06 2.055.892c.22-.685.933-1.084 1.593-.799L9.8 2.774z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                        <path fill="#667DFF" d="M21.995 27.873l-5.768 4.335S13.15 23.88 14.744 8.079c.11-.913 1.043-1.369 1.813-.913l5.602 3.708s-1.098 7.7.495 15.116c.165.742-.11 1.483-.66 1.883zM32.651 18.233l-5.328-3.594c-.33-.228-.824.114-.714.513 1.263 5.762 1.099 8.614-.22 10.04-.165.228-1.098-.114-1.098-.114.878.456 1.098.228 1.098.228.88-.685 4.175-3.138 6.262-4.62.824-.628.824-1.883 0-2.453z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+                    </g>
+                </g>
+                <path fill="#FFF" d="M54.753 13.93l-3.028-8.623h-2.47l4.287 11.602h2.323L60.17 5.307H57.78l-3.027 8.624zm11.29 2.98h2.079l-.016-.148c-.028-.276-.06-.697-.065-1.167l-.001-6.737h-2.176v4.68c0 .933-.557 1.587-1.522 1.587-1.015 0-1.473-.72-1.473-1.62V8.858h-2.176v5.09c0 1.75 1.112 3.174 3.06 3.174.85 0 1.783-.327 2.225-1.08 0 .327.033.703.066.867zm5.875-4.943c.05-.736.671-1.587 1.8-1.587 1.244 0 1.767.785 1.8 1.587h-3.6zm3.813 2.095c-.262.72-.818 1.227-1.833 1.227-1.08 0-1.98-.769-2.029-1.833h5.76l.024-.366c.005-.095.009-.2.009-.305 0-2.585-1.49-4.172-3.977-4.172-2.061 0-3.96 1.669-3.96 4.238 0 2.716 1.948 4.304 4.157 4.304 1.98 0 3.256-1.162 3.665-2.553l-1.816-.54zM58.22 25.255c-.261-1.31-1.341-3.011-4.156-3.011-2.192 0-4.041 1.57-4.041 3.632 0 1.751 1.194 2.946 3.043 3.322l1.62.327c.9.18 1.408.704 1.408 1.375 0 .818-.671 1.424-1.882 1.424-1.637 0-2.438-1.031-2.537-2.177l-2.094.557c.18 1.652 1.538 3.632 4.614 3.632 2.7 0 4.19-1.8 4.19-3.583 0-1.637-1.13-3.011-3.24-3.42l-1.62-.311c-.851-.164-1.26-.671-1.26-1.31 0-.768.72-1.472 1.816-1.472 1.473 0 1.996.998 2.11 1.636l2.03-.621zm5.466 2.552c1.08 0 1.588.688 1.784 1.358l1.947-.654c-.343-1.358-1.587-2.716-3.78-2.716-2.34 0-4.173 1.783-4.173 4.27 0 2.471 1.866 4.271 4.239 4.271 2.143 0 3.403-1.374 3.763-2.716l-1.914-.638c-.18.622-.737 1.358-1.85 1.358-1.112 0-2.061-.818-2.061-2.275 0-1.456.933-2.258 2.045-2.258zm7.56 1.555c.05-.884.59-1.571 1.506-1.571 1.047 0 1.489.704 1.489 1.604v4.696h2.176v-5.073c0-1.767-.949-3.19-2.994-3.19-.77 0-1.653.261-2.177.883v-4.467h-2.176V34.09h2.176v-4.73zm10.997 2.994c-1.064 0-2.046-.785-2.046-2.29 0-1.522.982-2.291 2.046-2.291 1.063 0 2.045.769 2.045 2.29 0 1.522-.982 2.291-2.045 2.291zm0-6.561c-2.406 0-4.222 1.783-4.222 4.27 0 2.471 1.816 4.271 4.222 4.271 2.405 0 4.221-1.8 4.221-4.27 0-2.488-1.816-4.271-4.221-4.271zm9.556 6.561c-1.064 0-2.045-.785-2.045-2.29 0-1.522.981-2.291 2.045-2.291s2.045.769 2.045 2.29c0 1.522-.981 2.291-2.045 2.291zm0-6.561c-2.405 0-4.222 1.783-4.222 4.27 0 2.471 1.817 4.271 4.222 4.271 2.405 0 4.222-1.8 4.222-4.27 0-2.488-1.817-4.271-4.222-4.271zm8.116 8.296V22.244H97.74V34.09h2.176zm15.339-1.735c-1.064 0-2.046-.785-2.046-2.29 0-1.522.982-2.291 2.046-2.291 1.063 0 2.045.769 2.045 2.29 0 1.522-.982 2.291-2.045 2.291zm0-6.561c-2.406 0-4.222 1.783-4.222 4.27 0 2.471 1.816 4.271 4.222 4.271 2.405 0 4.221-1.8 4.221-4.27 0-2.488-1.816-4.271-4.221-4.271zm-6.066 8.296v-8.182h-2.176v8.182h2.176zm-2.28-10.386c0-.599.489-1.09 1.085-1.09.608 0 1.097.491 1.097 1.09 0 .6-.489 1.091-1.097 1.091-.596 0-1.085-.491-1.085-1.09zm-4.882 9.011c0-.818.671-1.489 1.49-1.489.834 0 1.505.671 1.505 1.49 0 .818-.671 1.488-1.506 1.488-.818 0-1.489-.67-1.489-1.489z" transform="translate(-30.000000, -19.000000) translate(30.000000, 19.000000)"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/docs/.vuepress/theme/Layout.vue b/docs/.vuepress/theme/Layout.vue
index 705dde874..7b6932fc2 100644
--- a/docs/.vuepress/theme/Layout.vue
+++ b/docs/.vuepress/theme/Layout.vue
@@ -3,6 +3,10 @@
     class="main-container"
     :class="{ 'has-top-banner': showTopBanner }"
   >
+    <BannerTop
+      v-if="showTopBanner"
+      @close="closeBannerTop"
+    />
     <ParentLayout>
       <template #page-top>
         <CarbonAds
@@ -55,13 +59,23 @@ export default {
   components: {
     ParentLayout,
     CarbonAds,
-    BuySellAds
+    BuySellAds,
+    BannerTop: () => import('./components/BannerTop.vue')
   },
   data () {
     return {
       sponsors,
       showTopBanner: false
     }
+  },
+  mounted () {
+    this.showTopBanner = !localStorage.getItem('VS_BTS_BANNER_CLOSED')
+  },
+  methods: {
+    closeBannerTop () {
+      this.showTopBanner = false
+      localStorage.setItem('VS_BTS_BANNER_CLOSED', 1)
+    }
   }
 }
 </script>
diff --git a/docs/.vuepress/theme/components/BannerTop.vue b/docs/.vuepress/theme/components/BannerTop.vue
index 167f5376f..f1a2c3967 100644
--- a/docs/.vuepress/theme/components/BannerTop.vue
+++ b/docs/.vuepress/theme/components/BannerTop.vue
@@ -11,7 +11,10 @@
         <img src="/images/vueschool/vs-backpack.png" alt="Backpack">
       </div>
       <div class="vs-slogan">
-        Extended! <span class="vs-slogan-light">Last few hours</span> for the Vue School offer
+        3-months Vue School for only $49 <span style="text-decoration: line-through; opacity: 0.5;">$75</span>!
+        <span class="vs-slogan-light">
+          Limited Time Offer
+        </span>
       </div>
       <div class="vs-button">
         GET ACCESS
@@ -90,7 +93,9 @@ $contentClass = '.theme-default-content'
     .vs-backpack
       margin-right: 6px
       @media (min-width: 680px)
-        margin-right: 2px
+        display: none
+      @media (min-width: 900px)
+        display: inline-block
       img
         height: 50px
         @media (min-width: 680px)
@@ -101,12 +106,10 @@ $contentClass = '.theme-default-content'
       font-weight: bold
       font-size: 14px
       text-align: center
-      padding: 0 60px
       @media (min-width: 680px)
         padding: 0
         text-align: left
-        margin-right: 26px
-        margin-right: 0
+        margin-left: 12px
         font-size: 18px
       > .vs-slogan-light
         color: #ff5338
@@ -124,6 +127,7 @@ $contentClass = '.theme-default-content'
       background: #ff5338
       font-weight: bold
       @media (min-width: 680px)
+        margin-left: 18px
         display: inline-block
 
   .vs-close