diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
new file mode 100644
index 000000000..bb620c26b
--- /dev/null
+++ b/docs/.vuepress/styles/index.styl
@@ -0,0 +1,75 @@
+.img-ctr {
+  margin: 0 auto;
+  display: block;
+}
+
+.navbar {
+  background-color: rgb(111, 41, 67);
+  background-image: linear-gradient(120deg, rgb(217, 131, 166), rgb(77, 17, 79));
+  color: $navBarColor;
+  border: none;
+
+  .logo {
+    min-width: auto;
+  }
+
+  .site-name {
+    color: $navBarColor !important;
+  }
+
+  .links {
+    background-color: transparent !important;
+  }
+}
+
+.token.string {
+  color: $accentColor;
+}
+
+@media (min-width: 719px) {
+  .nav-links a:hover,
+  .nav-links a.router-link-active {
+      color: #ffeff2 !important;
+  }
+}
+
+.search-box input {
+  border: 1px solid transparent;
+  transition: border 0.25s;
+}
+
+.page-nav,
+.page-edit,
+.content:not(.custom) {
+  max-width: $pageWidth;
+}
+
+.page__getting-started {
+  .language-js .language-js {
+    max-height: 300px;
+  }
+}
+
+
+// Scrollbars
+* {
+  ::-webkit-scrollbar-track {}
+
+  ::-webkit-scrollbar-thumb {
+    background-color: alpha(black, 0.1);
+  }
+
+  ::-webkit-scrollbar {
+    width: $scrollBarSize;
+  }
+}
+
+.language-js {
+  ::-webkit-scrollbar {
+    height: $scrollBarSize;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: alpha(white, 0.3);
+  }
+}
diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl
new file mode 100644
index 000000000..3f11f5816
--- /dev/null
+++ b/docs/.vuepress/styles/palette.styl
@@ -0,0 +1,5 @@
+$accentColor = #e2627f
+$accentColor = #e67891
+$navBarColor = white
+$scrollBarSize = 8px
+$pageWidth = 900px
\ No newline at end of file
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/theme/index.js
new file mode 100644
index 000000000..5baed348c
--- /dev/null
+++ b/docs/.vuepress/theme/index.js
@@ -0,0 +1,3 @@
+module.exports = {
+    extend: '@vuepress/theme-default'
+}
\ No newline at end of file
diff --git a/docs/.vuepress/theme/layouts/CarbonAds.vue b/docs/.vuepress/theme/layouts/CarbonAds.vue
new file mode 100644
index 000000000..2aab6fd82
--- /dev/null
+++ b/docs/.vuepress/theme/layouts/CarbonAds.vue
@@ -0,0 +1,79 @@
+<script>
+export default {
+  render (h) {
+    return h('div', { class: 'carbon-ads', attrs: { id: 'native-carbon' }})
+  },
+  mounted () {
+    window.BSANativeCallback = (a) => {
+      const total = a.ads.length;
+
+      if (!total) {
+        const src = document.createElement('script');
+        src.src = `//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=grapesjscom`;
+        src.setAttribute('id', '_carbonads_js');
+        const adCont = document.getElementById('native-carbon');
+        adCont && adCont.appendChild(src);
+      }
+    };
+    this.load();
+  },
+  watch: {
+    '$route' (to, from) {
+      if (
+        to.path !== from.path &&
+        this.$el.querySelector('#carbonads')
+      ) {
+        this.$el.innerHTML = '';
+        this.load();
+      }
+    }
+  },
+  methods: {
+    initCarbon() {
+      const { _bsa } = window;
+      if(typeof _bsa !== 'undefined' && _bsa) {
+        _bsa.init('default', 'CK7I62QJ', 'placement:grapesjscomdocs', {
+          target: '#native-carbon',
+        });
+      }
+    },
+    load () {
+      const s = document.createElement('script');
+      // s.id = '_carbonads_js';
+      // s.src = `//cdn.carbonads.com/carbon.js?serve=CKYI5KJU&placement=grapesjscom`;
+      s.src = `//m.servedby-buysellads.com/monetization.js`;
+      s.onload = () => this.initCarbon();
+      this.$el.appendChild(s);
+    }
+  }
+}
+// @import "~@default-theme/styles/config.styl"
+</script>
+
+<style lang="stylus">
+.carbon-ads
+  min-height 102px
+  padding 1.5rem 1.5rem 0
+  margin-bottom -0.5rem
+  font-size 0.75rem
+  a
+    color #444
+    font-weight normal
+    display inline
+  .carbon-img
+    float left
+    margin-right 1rem
+    border 1px solid $borderColor
+    img
+      display block
+  .carbon-poweredby
+    color #999
+    display block
+    margin-top 0.5em
+
+@media (max-width: $MQMobile)
+  .carbon-ads
+    .carbon-img img
+      width 100px
+      height 77px
+</style>
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
new file mode 100644
index 000000000..df24756c4
--- /dev/null
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -0,0 +1,21 @@
+<template>
+  <Layout>
+    <CarbonAds slot="sidebar-top"/>
+  </Layout>
+</template>
+
+<script>
+// var Layout = require('@vuepress/theme-vue/layouts/Layout.vue').default;
+// var CarbonAds = require('./CarbonAds.vue').default;
+// import Layout from '@vuepress/theme-default/layouts/Layout.vue';
+// import CarbonAds from './CarbonAds.vue';
+import Layout from '@parent-theme/layouts/Layout.vue'
+import CarbonAds from './CarbonAds.vue';
+
+export default {
+  components: {
+    Layout,
+    CarbonAds,
+  }
+}
+</script>