diff --git a/.algolia/docsearch.config.json b/.algolia/docsearch.config.json
index 6b018b2477..6eb543d468 100644
--- a/.algolia/docsearch.config.json
+++ b/.algolia/docsearch.config.json
@@ -1,34 +1,38 @@
 {
   "index_name": "documentation",
   "start_urls": [
-    "https://docs.strapi.io"
+    {
+      "url": "https://docs.strapi.io"
+    }
   ],
   "selectors": {
-    "lvl0": {
-      "selector": "(//*[contains(@class, 'sidebar-heading open')])[1]",
-      "type": "xpath",
-      "global": true
-    },
-    "lvl1": {
-      "selector": "//h1/text()",
-      "type": "xpath",
-      "global": true
-    },
-    "lvl2": {
-      "selector": "/html/head/meta[@name='description']/@content",
-      "type": "xpath",
-      "global": true
-    },
-    "lvl4": {
-      "selector": "//h2/text()",
-      "type": "xpath",
-      "global": true
-    },
-    "text": ".content__default p",
-    "lang": {
-      "selector": "/html/@lang",
-      "type": "xpath",
-      "global": true
+    "default": {
+      "lvl0": {
+        "selector": "(//*[contains(@class, 'sidebar-heading open')])[1]",
+        "type": "xpath",
+        "global": true
+      },
+      "lvl1": {
+        "selector": "//h1/text()",
+        "type": "xpath",
+        "global": true
+      },
+      "lvl2": {
+        "selector": "/html/head/meta[@name='description']/@content",
+        "type": "xpath",
+        "global": true
+      },
+      "lvl3": {
+        "selector": "//h2/text()",
+        "type": "xpath",
+        "global": true
+      },
+      "text": ".content__default p, .content__default ul>li a, .content__default ul>li code",
+      "lang": {
+        "selector": "/html/@lang",
+        "type": "xpath",
+        "global": true
+      }
     }
   },
   "strip_chars": " .,;:#",
@@ -40,4 +44,4 @@
       "lang"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/docs/.vuepress/public/assets/SearchIcon.png b/docs/.vuepress/public/assets/SearchIcon.png
new file mode 100644
index 0000000000..7e2bc1b114
Binary files /dev/null and b/docs/.vuepress/public/assets/SearchIcon.png differ
diff --git a/docs/.vuepress/styles/branding.styl b/docs/.vuepress/styles/branding.styl
index df88bc12cd..54eb0b1d04 100644
--- a/docs/.vuepress/styles/branding.styl
+++ b/docs/.vuepress/styles/branding.styl
@@ -1,4 +1,132 @@
 body
+// TODO: system fonts
+  font-family: system-ui
+
+.install-link
+  // text-decoration: none
+  background-color: #4945FF
+  border-radius: 6px
+  padding: 20px
+  color: $primary100
+  justify-content: space-between
+
+  .text
+    flex-grow: 1
+
+  .title
+    color: $neutral0
+
+  .description
+    color: $primary100
+
+  .arrow
+    width: 24px
+    height: 24px
+
+  &:hover
+    .title
+      color: $neutral0
+      text-decoration: underline
+    .description
+      color: $neutral0
+      // text-decoration: none
+    .arrow
+      // TODO:
+
+#algolia-autocomplete-listbox-0
+#algolia-autocomplete-listbox-1
+#algolia-autocomplete-listbox-2
+  left: 24px !important
+
+.search-box
+  display: inline-block
+  width: 20rem
+  margin: 0 !important
+  padding: 22px 0 20px 0 !important
+  text-align: center
+
+  >span
+    display: inline-block
+    width: 100%
+
+  .search-query
+    display: none
+
+  #algolia-search-input
+    display: inline-block
+    width: calc(20rem - 90px) !important
+    height: 40px !important;
+    padding: 0 0 0 40px !important;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 13px !important;
+    color: $neutral600 !important
+    border-radius: 6px !important
+    border: 1px solid $neutral200 !important
+    background: #fff url(/assets/SearchIcon.png) 12px 12px no-repeat !important;
+    background-size: 16px 16px !important;
+
+    &::-webkit-input-placeholder
+       color $neutral600 !important
+    &:-moz-placeholder  /* Firefox 18- */
+       color $neutral600 !important
+    &::-moz-placeholder  /* Firefox 19+ */
+       color $neutral600 !important
+    &:-ms-input-placeholder
+       color $neutral600 !important
+
+.theme-container
+  display: flex
+  flex-direction: column
+  height: 100%
+
+.algolia-autocomplete
+  &.algolia-autocomplete-left
+    &.ds-dropdown-menu
+      left: 24px !important
+
+.al
+.algolia-search-wrapper
+  .algolia-autocomplete
+    .ds-dropdown-menu [class^=ds-dataset-]
+      padding: 0
+      border: 1px solid $neutral150
+      .ds-suggestions
+        margin-top: 0
+    .ds-dropdown-menu
+      overflow: initial
+      margin: 10px 0 0
+      box-shadow 0 1px 3px 1px rgba(0,0,0,.15)
+      &:before
+        background $neutral100
+        border: 1px solid $neutral150
+        box-shadow 0 1px 3px 1px $neutral150
+      .ds-suggestion.ds-cursor
+        .algolia-docsearch-suggestion:not(.suggestion-layout-simple)
+          .algolia-docsearch-suggestion--content
+            background-color: $primary100
+    .algolia-docsearch-suggestion
+      padding: 0
+      .algolia-docsearch-suggestion--wrapper
+        padding: 0 0 0 16px
+      .algolia-docsearch-suggestion--category-header
+        margin: 0
+        padding: 10px 16px 10px
+        color: $neutral900 !important
+        border-bottom: 1px solid $neutral150 !important
+        background: $neutral100
+      .algolia-docsearch-suggestion--subcategory-column
+        color: $neutral600 !important
+        &:before
+          background $neutral150
+      .algolia-docsearch-suggestion--title
+        padding-right: 16px
+        color $neutral900 !important
+        line-height 22px !important
+      .algolia-docsearch-suggestion--text
+        padding-right: 16px
+        color $neutral400 !important
+    .algolia-docsearch-footer
+      display: none !important
   font-family system-ui
   color $neutral800
 
@@ -38,6 +166,15 @@ h2
 .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
   border-left-color $primary600 !important
 
+// Fix search bar and nav-links positioning on mobile
+@media screen and (max-width: $MQMobile)
+  .nav-links
+    margin-top: 124px
+    background-color: white
+
+  .nav-links+.sidebar-links
+    padding-top: 244px
+
 .nav-links a
 .nav-links a.router-link-active
   font-weight 600
diff --git a/docs/.vuepress/theme/components/AlgoliaSearchBox.vue b/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
index c1f46b2246..25de21ce1e 100644
--- a/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
+++ b/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
@@ -7,7 +7,7 @@
     <input
       id="algolia-search-input"
       class="search-query"
-      :placeholder="placeholder"
+      placeholder="Quick search..."
     >
   </form>
 </template>
@@ -17,7 +17,7 @@ export default {
   props: ['options'],
   data () {
     return {
-      placeholder: undefined
+      placeholder: 'undefined'
     }
   },
   mounted () {
@@ -26,27 +26,51 @@ export default {
   },
   methods: {
     initialize (userOptions, config, lang) {
+      const self = this;
+
       Promise.all([
         import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
         import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
       ]).then(([docsearch]) => {
-        docsearch = docsearch.default
-        const { algoliaOptions = {}} = userOptions
+        const sidebar = document.querySelector('.sidebar');
+        const input = document.getElementById('algolia-search-input');
+
+        docsearch = docsearch.default;
+
+        const { algoliaOptions = {}} = userOptions;
+
         docsearch(Object.assign(
           {},
+          {
+            autocompleteOptions: {
+              debug: false
+            }
+          },
           userOptions,
           {
             inputSelector: '#algolia-search-input',
             // #697 Make docsearch work well at i18n mode.
             algoliaOptions: Object.assign({
-              'facetFilters': [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
+              'facetFilters': [`lang:${lang}`].concat(algoliaOptions.facetFilters || []),
             }, algoliaOptions),
             handleSelected: (input, event, suggestion) => {
-              const { pathname, hash } = new URL(suggestion.url)
+              const { pathname, hash } = new URL(suggestion.url);
               const removedBase = config.base ? '/' + pathname.replace(config.base, '') : pathname;
-              this.$router.push(`${removedBase}${hash}`)
-            }
-          }
+
+              // Redirect to the resource
+              this.$router.push(`${removedBase}${hash}`);
+
+
+              console.log(input, self.placeholder)
+              // Reset parameters for better UX
+              sidebar.style.width = '20rem';
+              input.setVal(self.placeholder);
+
+            },
+            queryHook: function(query) {
+              sidebar.style.width = '40rem';
+            },
+          },
         ))
       })
     },
@@ -67,12 +91,12 @@ export default {
 </script>
 
 <style lang="stylus">
-
 .al
 .algolia-search-wrapper
   .algolia-autocomplete
     .ds-dropdown-menu
-      width: 500px
+      width: 40rem
+      overflow: auto
     .algolia-docsearch-suggestion
       .algolia-docsearch-suggestion--category-header
         color: black
@@ -120,6 +144,9 @@ export default {
         .ds-dropdown-menu
           min-width 515px !important
 @media (max-width: $MQMobile)
+  .search-box input
+    left: 0 !important
+
   .algolia-search-wrapper
     .ds-dropdown-menu
       min-width calc(100vw - 4rem) !important
@@ -137,4 +164,4 @@ export default {
       width 5px
       margin -3px 3px 0
       vertical-align middle
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue
index 04f5883067..7470168443 100644
--- a/docs/.vuepress/theme/components/Navbar.vue
+++ b/docs/.vuepress/theme/components/Navbar.vue
@@ -38,21 +38,16 @@
         'max-width': linksWrapMaxWidth + 'px'
       } : {}"
     >
-      <AlgoliaSearchBox
-        :options="algolia"
-      />
       <NavLinks class="can-hide"/>
     </div>
   </header>
 </template>
 
 <script>
-import AlgoliaSearchBox from '@theme/components/AlgoliaSearchBox'
-import SearchBox from '@SearchBox'
 import SidebarButton from '@parent-theme/components/SidebarButton.vue'
 import NavLinks from '@parent-theme/components/NavLinks.vue'
 export default {
-  components: { SidebarButton, NavLinks, AlgoliaSearchBox, SearchBox},
+  components: { SidebarButton, NavLinks },
   data () {
     return {
       linksWrapMaxWidth: null,
@@ -74,11 +69,6 @@ export default {
     window.addEventListener('resize', handleLinksWrapWidth, false)
     this.isBeta = /documentation\/3.0.0-beta.x/.test(window.location.href)
   },
-  computed: {
-    algolia () {
-      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
-    }
-  }
 }
 function css (el, property) {
   // NOTE: Known bug, will return 'auto' if style value is 'auto'
diff --git a/docs/.vuepress/theme/components/Sidebar.vue b/docs/.vuepress/theme/components/Sidebar.vue
new file mode 100644
index 0000000000..a8ce22cbf7
--- /dev/null
+++ b/docs/.vuepress/theme/components/Sidebar.vue
@@ -0,0 +1,91 @@
+<template>
+  <aside class="sidebar">
+    <div class="sidebar-box">
+      <AlgoliaSearchBox
+        :options="algolia"
+      />
+
+      <NavLinks />
+
+      <slot name="top" />
+
+      <SidebarLinks
+        :depth="0"
+        :items="items"
+      />
+      <slot name="bottom" />
+    </div>
+  </aside>
+</template>
+
+<script>
+import AlgoliaSearchBox from '@theme/components/AlgoliaSearchBox'
+import SearchBox from '@SearchBox'
+import SidebarLinks from '@theme/components/SidebarLinks.vue'
+import NavLinks from '@theme/components/NavLinks.vue'
+export default {
+  name: 'Sidebar',
+  components: { SidebarLinks, NavLinks, AlgoliaSearchBox, SearchBox },
+  props: ['items'],
+  computed: {
+    algolia () {
+      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+
+.sidebar
+  overflow: scroll
+  width: 20rem
+  background-color: transparent
+  border: none
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .sidebar-box
+    width: calc(20rem - 1px)
+    background: #fff
+    border-right: 1px solid #eee
+
+  ul
+    padding 0
+    margin 0
+    list-style-type none
+  a
+    display inline-block
+  .nav-links
+    position: absolute
+    left: 0
+    top: 0
+    display none
+    border-bottom 1px solid $borderColor
+    padding 0.5rem 0 0.75rem 0
+    a
+      font-weight 600
+    .nav-item, .repo-link
+      display block
+      line-height 1.25rem
+      font-size 1.1em
+      padding 0.5rem 0 0.5rem 1.5rem
+  & > .sidebar-links
+    padding 1.5rem 0
+    & > li > a.sidebar-link
+      font-size 1.1em
+      line-height 1.7
+      font-weight bold
+    & > li:not(:first-child)
+      margin-top .75rem
+@media (max-width: $MQMobile)
+  .sidebar
+    .nav-links
+      display block
+      .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
+        top calc(1rem - 2px)
+    & > .sidebar-links
+      padding 1rem 0
+</style>