diff --git a/docs-site/content/.vuepress/components/Tabs.vue b/docs-site/content/.vuepress/components/Tabs.vue
index e64f5ed2..7a1b259e 100644
--- a/docs-site/content/.vuepress/components/Tabs.vue
+++ b/docs-site/content/.vuepress/components/Tabs.vue
@@ -101,11 +101,13 @@ export default {
 
 .nav-container
   display flex
+  flex-wrap nowrap
   justify-content flex-start
   list-style none
   padding-left: 1.25rem
   padding-top: 1.25rem
   padding-bottom: 0.5rem
+  padding-right: 1.25rem
   border-bottom none
   border-top-left-radius 6px
   border-top-right-radius 6px
@@ -114,10 +116,14 @@ export default {
   color $white
   font-size 0.70rem
   margin-left 0
+  overflow-x auto
+  -webkit-overflow-scrolling touch
 
   .nav
     margin-right 1rem
     cursor pointer
+    flex-shrink 0
+    white-space nowrap
 
     .nav-title
       display inline-block
diff --git a/docs-site/content/.vuepress/components/TypesenseSearchBox.vue b/docs-site/content/.vuepress/components/TypesenseSearchBox.vue
index b1c7fefb..5e29b5a4 100644
--- a/docs-site/content/.vuepress/components/TypesenseSearchBox.vue
+++ b/docs-site/content/.vuepress/components/TypesenseSearchBox.vue
@@ -124,9 +124,6 @@ export default {
     align-items center
     width 100%
 
-  .search-query
-    padding-right 40px 
-
   .shortcut-indicator
     position absolute
     right 8px
@@ -134,11 +131,11 @@ export default {
     transform translateY(-50%)
     display inline-flex
     align-items center
-    gap 1px
     height 14px
     border 1px solid rgba(0, 0, 0, 0.1)
     border-radius 7px
     padding 0 4px
+    z-index 99
     font-size 9px
     font-family monospace
     font-weight 500
@@ -199,7 +196,7 @@ export default {
         padding 0
       .typesense-docsearch-suggestion--title
         font-weight 600
-        margin-bottom 0.8rem
+        margin-bottom 0.35rem
         color $textColor
       .typesense-docsearch-suggestion--subcategory-column
         vertical-align top
@@ -213,7 +210,7 @@ export default {
     .typesense-docsearch-footer
       border-color $borderColor
     .typesense-docsearch-suggestion--content
-      padding 0.8rem
+      padding 0.6rem 0.8rem
     .ds-cursor .typesense-docsearch-suggestion--content
       background-color #e7edf3 !important
       color $textColor
@@ -237,14 +234,22 @@ export default {
 
 @media (max-width: $MQMobile)
   .typesense-search-wrapper
+    .search-container
+      width auto
+      justify-content flex-end
+    .shortcut-indicator
+      display none
     .ds-dropdown-menu
       min-width calc(100vw - 4rem) !important
       max-width calc(100vw - 4rem) !important
+    .typesense-docsearch-suggestion--category-header
+      padding 5px 10px
+    .typesense-docsearch-suggestion--title
+      padding 0 !important
     .typesense-docsearch-suggestion--wrapper
-      padding 5px 7px 5px 5px !important
-    .typesense-docsearch-suggestion--subcategory-column
       padding 0 !important
-      background white !important
+    .typesense-docsearch-suggestion--subcategory-column
+      padding 5px 10px !important
     .typesense-docsearch-suggestion--subcategory-column-text:after
       content " > "
       font-size 10px
@@ -253,4 +258,32 @@ export default {
       width 5px
       margin -3px 3px 0
       vertical-align middle
+    .typesense-docsearch-suggestion--subcategory-inline
+      padding 0 10px !important
+    .typesense-docsearch-suggestion--content
+      display block !important
+      width 100% !important
+      box-sizing border-box
+      padding 5px 10px !important
+
+@media (max-width: $MQNarrow)
+  .typesense-search-wrapper.search-box
+    .search-container
+      &:not(:focus-within) .shortcut-indicator
+        display none
+      &:focus-within .shortcut-indicator
+        display inline-flex
+
+    .search-query
+      width 0 !important
+      border-color transparent !important
+      cursor pointer !important
+
+    .search-query:not(:focus)
+      margin-left 0 !important
+
+    .search-query:focus
+      width 7rem !important
+      cursor text !important
+      border-color $accentColor !important
 </style>
diff --git a/docs-site/content/.vuepress/components/VersionDropdown.vue b/docs-site/content/.vuepress/components/VersionDropdown.vue
index 92fb1ca3..7dc3ac09 100644
--- a/docs-site/content/.vuepress/components/VersionDropdown.vue
+++ b/docs-site/content/.vuepress/components/VersionDropdown.vue
@@ -124,6 +124,7 @@ export default {
 
 <style lang="stylus" scoped>
 .version-switcher
+  display inline-block
   @media (min-width: $MQMobile)
     display: inline-block;
 
@@ -132,20 +133,24 @@ export default {
 
     select
       display: inline-block;
-      box-sizing: border-box;
-      padding: 0 1.6rem 0 1rem;
-      border: 1px solid $white;
-      background-color $lightGrayColor;
+      padding: 0.2rem 1.6rem 0.2rem 0.6rem;
+      align-text center
+      border: 1px solid #e1e1e1;
+      border-radius 3px
+      background-color #f8f8f8;
+      color #2c3e50
+      font-size 0.8rem
+      font-weight 500
       font: inherit;
       line-height: inherit;
       -webkit-appearance: none;
       -moz-appearance: none;
       -ms-appearance: none;
       appearance: none;
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
       background-repeat: no-repeat;
-      background-image: linear-gradient(45deg, transparent 50%, $accentColor 50%), linear-gradient(135deg, $accentColor 50%, transparent 50%);
-      background-position: right 15px top 1.2em, right 10px top 1.2em;
-      background-size: 5px 5px, 5px 5px;
+      background-position: right 0.8rem center;
+      background-size: 12px 8px;
 
   &.show-on-mobile-only
     display none
@@ -164,9 +169,8 @@ export default {
     padding 0.5em
     line-height 1.6
 
-    @media (max-width: $MQMobile)
-      margin-top 1em
-      margin-right 2em
+    margin-top 1em
+    margin-right 2em
 
     a:hover
       text-decoration underline
diff --git a/docs-site/content/.vuepress/config.js b/docs-site/content/.vuepress/config.js
index 5aea6b72..3eee1b31 100644
--- a/docs-site/content/.vuepress/config.js
+++ b/docs-site/content/.vuepress/config.js
@@ -161,6 +161,8 @@ let config = {
     logo: '/images/typesense_logo.svg',
     logoHeight: 42,
     logoWidth: 150,
+    logoHeightMobile: 28,
+    logoWidthMobile: 100,
     typesenseVersions: typesenseVersions,
     typesenseLatestVersion: typesenseLatestVersion,
     typesenseDocsearch: {
diff --git a/docs-site/content/.vuepress/styles/index.styl b/docs-site/content/.vuepress/styles/index.styl
index a26bf143..3b78c49d 100755
--- a/docs-site/content/.vuepress/styles/index.styl
+++ b/docs-site/content/.vuepress/styles/index.styl
@@ -8,10 +8,38 @@
 body
   font-family 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
+// prevent horizontal overflow from content (code blocks, tables) affecting the page layout
+html, body
+  overflow-x hidden
+
+.theme-container
+  overflow-x hidden
+  max-width 100vw
+
+@media (min-width: ($MQMobile + 1px))
+  .sidebar
+    .nav-links
+      display block !important
+      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
+
 // https://github.com/vuejs/vuepress/issues/703#issuecomment-484790660
 .theme-default-content pre[class*=language-]
   overflow-y hidden
 
+// ensure tables scroll horizontally within their container
+.theme-default-content table
+  display block
+  overflow-x auto
+  max-width 100%
+
 
 ul, ol
   margin-left 1em
@@ -44,4 +72,3 @@ figure
 
   figcaption
     text-align center
-
diff --git a/docs-site/content/.vuepress/theme/components/NavLinks.vue b/docs-site/content/.vuepress/theme/components/NavLinks.vue
index c96dd84f..9efc3d0a 100644
--- a/docs-site/content/.vuepress/theme/components/NavLinks.vue
+++ b/docs-site/content/.vuepress/theme/components/NavLinks.vue
@@ -1,6 +1,6 @@
 <template>
   <nav class="nav-links">
-    <VersionDropdown class="nav-item" show-on-mobile-only />
+    <VersionDropdown class="nav-item" />
     <!-- user links -->
     <div v-for="item in userLinks" :key="item.link" class="nav-item">
       <DropdownLink v-if="item.type === 'links'" :item="item" />
@@ -17,6 +17,7 @@
 
 <script>
 import DropdownLink from '@theme/components/DropdownLink.vue'
+import VersionDropdown from '../../components/VersionDropdown'
 import { resolveNavLinkItem } from '@parent-theme/util'
 import NavLink from '@theme/components/NavLink.vue'
 
@@ -26,6 +27,7 @@ export default {
   components: {
     NavLink,
     DropdownLink,
+    VersionDropdown,
   },
 
   computed: {
@@ -113,12 +115,9 @@ export default {
   .nav-item
     position relative
     display inline-block
-    margin-left 1.5rem
     line-height 2rem
     &:first-child
       margin-left 0
-  .repo-link
-    margin-left 1.5rem
 
 @media (max-width: $MQMobile)
   .nav-links
diff --git a/docs-site/content/.vuepress/theme/components/Navbar.vue b/docs-site/content/.vuepress/theme/components/Navbar.vue
index be542e72..37df0df4 100644
--- a/docs-site/content/.vuepress/theme/components/Navbar.vue
+++ b/docs-site/content/.vuepress/theme/components/Navbar.vue
@@ -8,29 +8,14 @@
           class="logo"
           :src="$withBase($site.themeConfig.logo)"
           :alt="$siteTitle"
-          :width="$site.themeConfig.logoWidth"
-          :height="$site.themeConfig.logoHeight"
+          :style="logoStyles"
         />
         <span v-if="$siteTitle" ref="siteName" class="site-name" :class="{ 'can-hide': $site.themeConfig.logo }">{{
           $siteTitle
         }}</span>
       </a>
-
-      <div
-        class="links"
-        :style="
-          linksWrapMaxWidth
-            ? {
-                'max-width': linksWrapMaxWidth + 'px',
-              }
-            : {}
-        "
-      >
-        <NavLinks class="can-hide" />
-      </div>
     </div>
     <div class="navbar-search-container">
-      <VersionDropdown show-on-desktop-only v-if="showVersionDropdown" />
       <TypesenseSearchBox v-if="isTypesenseSearch" :options="typesense" />
       <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
     </div>
@@ -40,8 +25,6 @@
 <script>
 import SearchBox from '@SearchBox'
 import SidebarButton from '@theme/components/SidebarButton.vue'
-import NavLinks from '@theme/components/NavLinks.vue'
-import VersionDropdown from '../../components/VersionDropdown'
 import TypesenseSearchBox from '../../components/TypesenseSearchBox'
 import isSemVer from '../../utils/isSemVer'
 
@@ -49,19 +32,11 @@ export default {
   name: 'Navbar',
 
   components: {
-    VersionDropdown,
     SidebarButton,
-    NavLinks,
     SearchBox,
     TypesenseSearchBox,
   },
 
-  data() {
-    return {
-      linksWrapMaxWidth: null,
-    }
-  },
-
   computed: {
     typesense() {
       return Object.assign(
@@ -78,6 +53,20 @@ export default {
     showVersionDropdown() {
       return isSemVer(this.normalizedVersionStringForSemVer(this.$page.path.split('/')[1]))
     },
+
+    logoStyles() {
+      const toCssSize = value => {
+        if (value === undefined || value === null || value === '') return undefined
+        return typeof value === 'number' ? `${value}px` : value
+      }
+
+      return {
+        '--logo-width': toCssSize(this.$site.themeConfig.logoWidth),
+        '--logo-height': toCssSize(this.$site.themeConfig.logoHeight),
+        '--logo-width-mobile': toCssSize(this.$site.themeConfig.logoWidthMobile),
+        '--logo-height-mobile': toCssSize(this.$site.themeConfig.logoHeightMobile),
+      }
+    },
   },
 
   methods: {
@@ -103,29 +92,6 @@ export default {
     },
   },
 
-  mounted() {
-    const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
-    const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
-    const handleLinksWrapWidth = () => {
-      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
-        this.linksWrapMaxWidth = null
-      } else {
-        this.linksWrapMaxWidth =
-          this.$el.offsetWidth -
-          NAVBAR_VERTICAL_PADDING -
-          ((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0)
-      }
-    }
-    handleLinksWrapWidth()
-    window.addEventListener('resize', handleLinksWrapWidth, false)
-  },
-}
-
-function css(el, property) {
-  // NOTE: Known bug, will return 'auto' if style value is 'auto'
-  const win = el.ownerDocument.defaultView
-  // null means not to return pseudo styles
-  return win.getComputedStyle(el, null)[property]
 }
 </script>
 
@@ -133,50 +99,66 @@ function css(el, property) {
 $navbar-vertical-padding = 0.7rem
 $navbar-horizontal-padding = 1.5rem
 
-.navbar
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding $navbar-vertical-padding $navbar-horizontal-padding
+  .navbar
+    display: flex;
+    align-items: center;
+    padding $navbar-vertical-padding $navbar-horizontal-padding
   line-height $navbarHeight - 1.4rem
   a, span, img
     display inline-block
   .logo-and-links
     display flex
+    align-items center
+    min-width 0
+  .home-link
+    display flex
+    align-items center
   .logo
     height $navbarHeight - 1.4rem
     min-width $navbarHeight - 1.4rem
     margin-right 0.8rem
     vertical-align top
+    width var(--logo-width, auto)
+    height var(--logo-height, $navbarHeight - 1.4rem)
   .site-name
     font-size 1.3rem
     font-weight 600
     color $textColor
     position relative
-  .links
-    padding-left 1rem
-    box-sizing border-box
-    background-color white
-    white-space nowrap
-    font-size 0.9rem
-    right $navbar-horizontal-padding
-    top $navbar-vertical-padding
-    display flex
+
   .navbar-search-container
     display flex
     align-items center
     gap 0.5rem
+    margin-left auto
+    justify-content flex-end
+    flex 0 0 auto
+
   .search-box
     flex: 0 0 auto
     margin-left 1.7rem
 
 @media (max-width: $MQMobile)
   .navbar
-    padding-left 4rem
+    padding-left $navbar-horizontal-padding
+    .sidebar-button
+      position static
+      top auto
+      left auto
+      display flex
+      align-items center
+      justify-content center
+      padding-left 0
+      padding-right 1rem
     .can-hide
       display none
-    .links
-      padding-left 1.5rem
+    .navbar-search-container
+      margin-left auto
+    .search-box
+      margin-left 0
+    .logo
+      width var(--logo-width-mobile, var(--logo-width, auto))
+      height var(--logo-height-mobile, var(--logo-height, $navbarHeight - 1.4rem))
     .site-name
       width calc(100vw - 9.4rem)
       overflow hidden
diff --git a/docs-site/content/.vuepress/theme/layouts/Layout.vue b/docs-site/content/.vuepress/theme/layouts/Layout.vue
new file mode 100644
index 00000000..b3585d1d
--- /dev/null
+++ b/docs-site/content/.vuepress/theme/layouts/Layout.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="theme-container" :class="pageClasses" @touchstart="onTouchStart" @touchend="onTouchEnd">
+    <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
+
+    <div class="sidebar-mask" @click="toggleSidebar(false)" />
+
+    <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
+      <template #top>
+        <slot name="sidebar-top" />
+      </template>
+      <template #bottom>
+        <slot name="sidebar-bottom" />
+      </template>
+    </Sidebar>
+
+    <Home v-if="$page.frontmatter.home" />
+
+    <Page v-else :sidebar-items="sidebarItems">
+      <template #top>
+        <slot name="page-top" />
+      </template>
+      <template #bottom>
+        <slot name="page-bottom" />
+      </template>
+    </Page>
+  </div>
+</template>
+
+<script>
+import Home from '@theme/components/Home.vue'
+import Navbar from '@theme/components/Navbar.vue'
+import Page from '@theme/components/Page.vue'
+import Sidebar from '@theme/components/Sidebar.vue'
+import { resolveSidebarItems } from '@parent-theme/util'
+
+export default {
+  name: 'Layout',
+
+  components: {
+    Home,
+    Page,
+    Sidebar,
+    Navbar,
+  },
+
+  data() {
+    return {
+      isSidebarOpen: false,
+    }
+  },
+
+  computed: {
+    shouldShowNavbar() {
+      const { themeConfig } = this.$site
+      const { frontmatter } = this.$page
+      if (frontmatter.navbar === false || themeConfig.navbar === false) {
+        return false
+      }
+      return this.$title || themeConfig.logo || themeConfig.repo || themeConfig.nav || this.$themeLocaleConfig.nav
+    },
+
+    shouldShowSidebar() {
+      const { frontmatter } = this.$page
+      if (frontmatter.home || frontmatter.sidebar === false) {
+        return false
+      }
+      return this.sidebarItems.length > 0 || this.hasSidebarNavContent
+    },
+
+    hasSidebarNavContent() {
+      const themeConfig = this.$site.themeConfig || {}
+      const localeConfig = this.$themeLocaleConfig || {}
+      const pageNav = this.$page.nav || []
+      const themeNav = themeConfig.nav || []
+      const localeNav = localeConfig.nav || []
+      return Boolean(themeConfig.repo || pageNav.length || themeNav.length || localeNav.length)
+    },
+
+    sidebarItems() {
+      return resolveSidebarItems(this.$page, this.$page.regularPath, this.$site, this.$localePath)
+    },
+
+    pageClasses() {
+      const userPageClass = this.$page.frontmatter.pageClass
+      return [
+        {
+          'no-navbar': !this.shouldShowNavbar,
+          'sidebar-open': this.isSidebarOpen,
+          'no-sidebar': !this.shouldShowSidebar,
+        },
+        userPageClass,
+      ]
+    },
+  },
+
+  mounted() {
+    this.$router.afterEach(() => {
+      this.isSidebarOpen = false
+    })
+  },
+
+  methods: {
+    toggleSidebar(to) {
+      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
+      this.$emit('toggle-sidebar', this.isSidebarOpen)
+    },
+
+    onTouchStart(e) {
+      this.touchStart = {
+        x: e.changedTouches[0].clientX,
+        y: e.changedTouches[0].clientY,
+      }
+    },
+
+    onTouchEnd(e) {
+      const dx = e.changedTouches[0].clientX - this.touchStart.x
+      const dy = e.changedTouches[0].clientY - this.touchStart.y
+      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
+        if (dx > 0 && this.touchStart.x <= 80) {
+          this.toggleSidebar(true)
+        } else {
+          this.toggleSidebar(false)
+        }
+      }
+    },
+  },
+}
+</script>