diff --git a/website/api/controllers/view-app-details.js b/website/api/controllers/view-app-details.js
index e757164e3c..bdebe18752 100644
--- a/website/api/controllers/view-app-details.js
+++ b/website/api/controllers/view-app-details.js
@@ -52,6 +52,7 @@ module.exports = {
       thisApp,
       // pageDescriptionForMeta,
       pageTitleForMeta,
+      algoliaPublicKey: sails.config.custom.algoliaPublicKey,
     };
 
   }
diff --git a/website/api/controllers/view-app-library.js b/website/api/controllers/view-app-library.js
index 1ea01f1e25..f166d0c3f0 100644
--- a/website/api/controllers/view-app-library.js
+++ b/website/api/controllers/view-app-library.js
@@ -25,7 +25,10 @@ module.exports = {
     let allApps = sails.config.builtStaticContent.appLibrary;
     allApps = _.sortBy(allApps, 'name');
     // Respond with view.
-    return {allApps};
+    return {
+      allApps,
+      algoliaPublicKey: sails.config.custom.algoliaPublicKey,
+    };
 
   }
 
diff --git a/website/assets/js/components/docs-nav-and-search.component.js b/website/assets/js/components/docs-nav-and-search.component.js
new file mode 100644
index 0000000000..a778012962
--- /dev/null
+++ b/website/assets/js/components/docs-nav-and-search.component.js
@@ -0,0 +1,107 @@
+/**
+ * <docs-nav-and-search>
+ * -----------------------------------------------------------------------------
+ * A navigation bar with a search box.
+ *
+ * @type {Component}
+ *
+ * -----------------------------------------------------------------------------
+ */
+
+parasails.registerComponent('docsNavAndSearch', {
+  //  ╔═╗╦═╗╔═╗╔═╗╔═╗
+  //  ╠═╝╠╦╝║ ║╠═╝╚═╗
+  //  ╩  ╩╚═╚═╝╩  ╚═╝
+  props: [
+    'searchFilter',
+    'algoliaPublicKey',
+    'currentSection',
+  ],
+
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: function (){
+    return {
+      //…
+    };
+  },
+
+  //  ╦ ╦╔╦╗╔╦╗╦
+  //  ╠═╣ ║ ║║║║
+  //  ╩ ╩ ╩ ╩ ╩╩═╝
+  template: `
+  <div class="d-block">
+    <div class="d-flex flex-row w-100 justify-content-between">
+      <div purpose="nav-link-container" class="d-flex align-items-center">
+        <div purpose="docs-links" class="d-flex flex-row">
+          <a :class="[currentSection === 'docs' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/docs" style="text-decoration: none; text-decoration-line: none;">Get started</a>
+          <a :class="[currentSection === 'vitals' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/vitals" style="text-decoration: none; text-decoration-line: none;">Vitals</a>
+          <a :class="[currentSection === 'queries' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/queries" style="text-decoration: none; text-decoration-line: none;">Queries</a>
+          <a :class="[currentSection === 'policies' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/policies" style="text-decoration: none; text-decoration-line: none;">Policies</a>
+          <a :class="[currentSection === 'software' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/app-library" style="text-decoration: none; text-decoration-line: none;">Software</a>
+          <a :class="[currentSection === 'tables' ? 'active' : '']" purpose="docs-top-nav-menu-link" href="/tables" style="text-decoration: none; text-decoration-line: none;">Data tables</a>
+        </div>
+      </div>
+      <div>
+        <div purpose="nav-bar-search" id="docsearch-query" class="d-flex" v-if="algoliaPublicKey">
+          <div purpose="disabled-search" class="d-flex">
+            <div class="input-group d-flex flex-nowrap">
+              <div class="input-group-prepend">
+                <span class="input-group-text border-0 bg-transparent" >
+                  <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
+                </span>
+              </div>
+              <div class="form-control border-0 ">
+              <input class="docsearch-input pr-1"
+                placeholder="Search" aria-label="Search"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `,
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function() {
+    //…
+  },
+  mounted: async function() {
+    let filterForSearch = {};
+    if(this.searchFilter){
+      let searchIndexesThatExist = ['docs', 'software', 'queries', 'vitals', 'policies', 'tables', 'handbook', 'software'];
+      if(!searchIndexesThatExist.includes(this.searchFilter)){
+        throw new Error(`Invalid 'searchFilter' value provided to <docs-nav-and-search> component. Please change the searchFilter value to one of: ${searchIndexesThatExist.join(', ')}`);
+      }
+      filterForSearch = {
+        'facetFilters': [`section:${this.searchFilter}`]
+      };
+    }
+    if(this.algoliaPublicKey) {
+      docsearch({
+        appId: 'NZXAYZXDGH',
+        apiKey: this.algoliaPublicKey,
+        indexName: 'fleetdm',
+        container: '#docsearch-query',
+        placeholder: 'Search',
+        debug: false,
+        searchParameters: filterForSearch,
+      });
+    }
+  },
+  beforeDestroy: function() {
+    //…
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+    //…
+  },
+});
diff --git a/website/assets/js/pages/app-details.page.js b/website/assets/js/pages/app-details.page.js
index bba7bb6ac1..088684552a 100644
--- a/website/assets/js/pages/app-details.page.js
+++ b/website/assets/js/pages/app-details.page.js
@@ -13,21 +13,6 @@ parasails.registerPage('app-details', {
     //…
   },
   mounted: async function() {
-
-    if(this.algoliaPublicKey) { // Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the documentation search will be disabled.
-      docsearch({
-        appId: 'NZXAYZXDGH',
-        apiKey: this.algoliaPublicKey,
-        indexName: 'fleetdm',
-        container: '#docsearch-query',
-        placeholder: 'Search',
-        debug: false,
-        searchParameters: {
-          'facetFilters': ['section:queries']
-        },
-      });
-    }
-
     $('[purpose="copy-button"]').on('click', async function() {
       let code = $(this).siblings('pre').find('code').text();
       $(this).addClass('copied');
diff --git a/website/assets/js/pages/docs/basic-documentation.page.js b/website/assets/js/pages/docs/basic-documentation.page.js
index ba111ea84b..1d8e1b8791 100644
--- a/website/assets/js/pages/docs/basic-documentation.page.js
+++ b/website/assets/js/pages/docs/basic-documentation.page.js
@@ -3,9 +3,6 @@ parasails.registerPage('basic-documentation', {
   //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
   //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
   data: {
-
-    isDocsLandingPage: false,
-
     inputTextValue: '',
     inputTimers: {},
     searchString: '',
@@ -19,6 +16,7 @@ parasails.registerPage('basic-documentation', {
     scrollDistance: 0,
     navSectionsByDocsSectionSlug: {},
     lastScrollTop: 0,
+    modal: undefined,
   },
 
   computed: {
@@ -31,9 +29,6 @@ parasails.registerPage('basic-documentation', {
   //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
   //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
   beforeMount: function() {
-    if (this.thisPage.url === '/docs') {
-      this.isDocsLandingPage = true;
-    }
 
     this.breadcrumbs = _.trim(this.thisPage.url, /\//).split(/\//);
 
@@ -80,31 +75,13 @@ parasails.registerPage('basic-documentation', {
       return pagesBySectionSlug;
     })();
     // Adding a scroll event listener for scrolling sidebars and showing the back to top button.
-    if(!this.isDocsLandingPage){
-      window.addEventListener('scroll', this.handleScrollingInDocumentation);
-    }
+    window.addEventListener('scroll', this.handleScrollingInDocumentation);
   },
 
   mounted: async function() {
 
     // Set a currentDocsSection value to display different Fleet premium CTAs based on what section is being viewed.
-    if(!this.isDocsLandingPage){
-      this.currentDocsSection = this.thisPage.url.split(/\//).slice(-2)[0];
-    }
-
-    // Algolia DocSearch
-    if(this.algoliaPublicKey) { // Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the documentation search will be disabled.
-      docsearch({
-        appId: 'NZXAYZXDGH',
-        apiKey: this.algoliaPublicKey,
-        indexName: 'fleetdm',
-        container: (this.isDocsLandingPage ? '#docsearch-query-landing' : '#docsearch-query'),
-        clickAnalytics: true,
-        searchParameters: {
-          'facetFilters': ['section:docs']
-        },
-      });
-    }
+    this.currentDocsSection = this.thisPage.url.split(/\//).slice(-2)[0];
 
     // Handle hashes in urls when coming from an external page.
     if(window.location.hash){
@@ -337,6 +314,16 @@ parasails.registerPage('basic-documentation', {
         left: 0,
         behavior: 'smooth',
       });
+    },
+    clickOpenMobileSubtopicsNav: function() {
+      this.modal = 'subtopics';
+    },
+    clickOpenMobileDocsNav: function() {
+      this.modal = 'table-of-contents';
+    },
+    closeModal: async function() {
+      this.modal = '';
+      await this.forceRender();
     }
   }
 
diff --git a/website/assets/js/pages/osquery-table-details.page.js b/website/assets/js/pages/osquery-table-details.page.js
index 6ade4bf6fa..dd3d719a95 100644
--- a/website/assets/js/pages/osquery-table-details.page.js
+++ b/website/assets/js/pages/osquery-table-details.page.js
@@ -4,7 +4,7 @@ parasails.registerPage('osquery-table-details', {
   //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
   data: {
     //…
-    selectedPlatform: 'all',
+    selectedPlatform: 'apple',
     search: '',
     showTableNav: false,
     userFriendlyPlatformNames: {
@@ -14,13 +14,15 @@ parasails.registerPage('osquery-table-details', {
       'chrome': 'ChromeOS',
       'all': 'All platforms'
     },
+    modal: undefined,
   },
 
   computed: {
     filteredTables: function () {
+      let platformToFilterBy = this.selectedPlatform !== 'apple' ? this.selectedPlatform : 'darwin';
       return this.allTables.filter(
         (table) =>
-          this._isIncluded(table.platforms, this.selectedPlatform)
+          table.platforms.includes(platformToFilterBy)
       );
     },
     numberOfTablesDisplayed: function() {
@@ -32,36 +34,15 @@ parasails.registerPage('osquery-table-details', {
   //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
   //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
   beforeMount: function() {
-
+    if(['#apple','#linux','#windows','#chrome'].includes(window.location.hash)){
+      this.selectedPlatform = window.location.hash.split('#')[1];
+    } else {
+      // otherwise, default the filter to be the first supported platform of the currently viewed table.
+      this.selectedPlatform = this.tableToDisplay.platforms[0] === 'darwin' ? 'apple' : this.tableToDisplay.platforms[0];
+    }
   },
   mounted: async function() {
 
-    // Algolia DocSearch
-    if(this.algoliaPublicKey) { // Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the documentation search will be disabled.
-      docsearch({
-        appId: 'NZXAYZXDGH',
-        apiKey: this.algoliaPublicKey,
-        indexName: 'fleetdm',
-        container: '#docsearch-query',
-        placeholder: 'Search tables',
-        debug: false,
-        searchParameters: {
-          'facetFilters': ['section:tables']
-        },
-      });
-    }
-
-    // Check the URL to see if a platformFilter was provided.
-    if(window.location.search) {
-      // https://caniuse.com/mdn-api_urlsearchparams_get
-      let possibleSearchParamsToFilterBy = new URLSearchParams(window.location.search);
-      let platformToFilterBy = possibleSearchParamsToFilterBy.get('platformFilter');
-      // If the provided platform matches a key in the userFriendlyPlatformNames array, we'll set this.selectedPlatform.
-      if(platformToFilterBy && this.userFriendlyPlatformNames[platformToFilterBy]){
-        this.selectedPlatform = platformToFilterBy;
-      }
-    }
-
     // sort the array of all tables
     this.allTables = this.allTables.sort((a, b)=>{
       return a.title > b.title ? 1 : -1;
@@ -128,7 +109,7 @@ parasails.registerPage('osquery-table-details', {
     await setTimeout(()=>{
       let activeTableLink = $('[purpose="table-of-contents-link"].active')[0];
       if(activeTableLink) {
-        $('[purpose="table-of-contents"]')[0].scrollTop = activeTableLink.offsetTop - 12;
+        $('[purpose="table-of-contents"]')[0].scrollTop = activeTableLink.offsetTop;
       }
       // Note: we're running this code after a 5ms delay to make sure the tables have been filtered, otherwise it will scroll the table of contents to the links posiiton in the full list of tables.
     }, 5);
@@ -141,11 +122,43 @@ parasails.registerPage('osquery-table-details', {
     clickFilterByPlatform: async function(platform) {
       this.selectedPlatform = platform;
     },
+    clickSelectPlatform: function (platform) {
+      let platformToLookFor = platform;
+      if(platform === 'apple'){
+        platformToLookFor = 'darwin';
+      }
+      let currentTableAvailableOnNewPlatform = this.tableToDisplay.platforms.includes(platformToLookFor);
+      if(!currentTableAvailableOnNewPlatform){
+        if(platformToLookFor === 'chrome'){
+          this.goto('/tables/chrome_extensions#chrome');
+        } else if(platformToLookFor === 'darwin') {
+          this.goto('/tables/account_policy_data#apple');
+        } else if(platformToLookFor === 'linux') {
+          this.goto('/tables/apparmor_events#linux');
+        } else if(platformToLookFor === 'windows') {
+          this.goto('/tables/appcompat_shims#windows');
+        }
+      } else {
+        this.selectedPlatform = platform;
+      }
 
+    },
     clickToggleTableNav: function() {
       this.showTableNav = !this.showTableNav;
     },
-
+    clickOpenTablesNav: async function() {
+      this.modal = 'table-of-contents';
+      await setTimeout(()=>{
+        let activeTableLink = $('[purpose="modal-table-of-contents-link"].active')[0];
+        if(activeTableLink) {
+          $('[purpose="modal-table-of-contents"]')[0].scrollTop = activeTableLink.offsetTop;
+        }
+      }, 250);
+    },
+    closeModal: async function() {
+      this.modal = '';
+      await this.forceRender();
+    },
     _isIncluded: function (data, selectedOption) {
       if (selectedOption.startsWith('all') || selectedOption === '') {
         return true;
diff --git a/website/assets/js/pages/policy-details.page.js b/website/assets/js/pages/policy-details.page.js
index cadf6c2674..547a7f32d7 100644
--- a/website/assets/js/pages/policy-details.page.js
+++ b/website/assets/js/pages/policy-details.page.js
@@ -14,21 +14,6 @@ parasails.registerPage('policy-details', {
     //…
   },
   mounted: async function () {
-    // Note: Docsearch will be disabled on this page until a search index has been created for it.
-    // Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the documentation search will be disabled.
-    if(this.algoliaPublicKey) {
-      docsearch({
-        appId: 'NZXAYZXDGH',
-        apiKey: this.algoliaPublicKey,
-        indexName: 'fleetdm',
-        container: '#docsearch-query',
-        placeholder: 'Search',
-        debug: false,
-        searchParameters: {
-          'facetFilters': ['section:policies']
-        },
-      });
-    }
     let columnNamesForThisQuery = [];
     let tableNamesForThisQuery = [];
     if(this.columnNamesForSyntaxHighlighting){
diff --git a/website/assets/js/pages/policy-library.page.js b/website/assets/js/pages/policy-library.page.js
index c904996df2..cd334d3e25 100644
--- a/website/assets/js/pages/policy-library.page.js
+++ b/website/assets/js/pages/policy-library.page.js
@@ -13,19 +13,7 @@ parasails.registerPage('policy-library', {
     //…
   },
   mounted: async function () {
-    if(this.algoliaPublicKey) { // Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the documentation search will be disabled.
-      docsearch({
-        appId: 'NZXAYZXDGH',
-        apiKey: this.algoliaPublicKey,
-        indexName: 'fleetdm',
-        container: '#docsearch-query',
-        placeholder: 'Search',
-        debug: false,
-        searchParameters: {
-          'facetFilters': ['section:policies']
-        },
-      });
-    }
+    //…
   },
 
   //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
diff --git a/website/assets/js/pages/query-detail.page.js b/website/assets/js/pages/query-detail.page.js
index a4426949d3..2699d0ad06 100644
--- a/website/assets/js/pages/query-detail.page.js
+++ b/website/assets/js/pages/query-detail.page.js
@@ -15,19 +15,6 @@ parasails.registerPage('query-detail', {
   },
   mounted: async function () {
 
-    if(this.algoliaPublicKey) { // Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the documentation search will be disabled.
-      docsearch({
-        appId: 'NZXAYZXDGH',
-        apiKey: this.algoliaPublicKey,
-        indexName: 'fleetdm',
-        container: '#docsearch-query',
-        placeholder: 'Search',
-        debug: false,
-        searchParameters: {
-          'facetFilters': ['section:queries']
-        },
-      });
-    }
     let columnNamesForThisQuery = [];
     let tableNamesForThisQuery = [];
     if(this.columnNamesForSyntaxHighlighting){
diff --git a/website/assets/js/pages/query-library.page.js b/website/assets/js/pages/query-library.page.js
index 6060c62150..08ac6514b1 100644
--- a/website/assets/js/pages/query-library.page.js
+++ b/website/assets/js/pages/query-library.page.js
@@ -13,19 +13,7 @@ parasails.registerPage('query-library', {
     //…
   },
   mounted: async function () {
-    if(this.algoliaPublicKey) { // Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the documentation search will be disabled.
-      docsearch({
-        appId: 'NZXAYZXDGH',
-        apiKey: this.algoliaPublicKey,
-        indexName: 'fleetdm',
-        container: '#docsearch-query',
-        placeholder: 'Search',
-        debug: false,
-        searchParameters: {
-          'facetFilters': ['section:queries']
-        },
-      });
-    }
+    //…
   },
 
   //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
diff --git a/website/assets/js/pages/vital-details.page.js b/website/assets/js/pages/vital-details.page.js
index e3fcc7e4a0..1a9bbdc4f5 100644
--- a/website/assets/js/pages/vital-details.page.js
+++ b/website/assets/js/pages/vital-details.page.js
@@ -21,20 +21,6 @@ parasails.registerPage('vital-details', {
     if(['#apple','#linux','#windows','#chrome'].includes(window.location.hash)){
       this.selectedPlatform = window.location.hash.split('#')[1];
     }
-    // Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the documentation search will be disabled.
-    if(this.algoliaPublicKey) {
-      docsearch({
-        appId: 'NZXAYZXDGH',
-        apiKey: this.algoliaPublicKey,
-        indexName: 'fleetdm',
-        container: '#docsearch-query',
-        placeholder: 'Search',
-        debug: false,
-        searchParameters: {
-          'facetFilters': ['section:vitals']
-        },
-      });
-    }
     let columnNamesForThisQuery = [];
     let tableNamesForThisQuery = [];
     if(this.columnNamesForSyntaxHighlighting){
diff --git a/website/assets/styles/components/docs-nav-and-search.component.less b/website/assets/styles/components/docs-nav-and-search.component.less
new file mode 100644
index 0000000000..5d8aba42f2
--- /dev/null
+++ b/website/assets/styles/components/docs-nav-and-search.component.less
@@ -0,0 +1,263 @@
+
+/**
+ * <docs-nav-and-search>
+ *
+ */
+
+[parasails-component='docs-nav-and-search'] {
+  margin-bottom: 48px;
+  margin-left: -8px;
+  [purpose='docs-links'] {
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+  }
+  a {
+    height: 29px;
+    &[purpose='docs-top-nav-menu-link'] {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 4px 8px !important;//lesshint-disable-line importantRule
+      margin-right: 16px !important;//lesshint-disable-line importantRule
+      white-space: nowrap;
+      &:last-of-type {
+        margin-right: 0px !important;//lesshint-disable-line importantRule
+      }
+      color: #8B8FA2 !important;//lesshint-disable-line importantRule
+      font-size: 14px !important;//lesshint-disable-line importantRule
+      font-weight: 400 !important;//lesshint-disable-line importantRule
+      line-height: 150% !important;//lesshint-disable-line importantRule
+      text-decoration: none !important;//lesshint-disable-line importantRule
+      text-decoration-line: none !important;//lesshint-disable-line importantRule
+      &.active {
+        border-radius: 8px;
+        background: #F1F3F5;
+        color: #192147 !important;//lesshint-disable-line importantRule
+      }
+      &:hover {
+        border-radius: 8px;
+        background: #F1F3F5;
+        text-decoration: none;
+      }
+    }
+  }
+  width: 100%;
+  [purpose='nav-bar-search'] {
+    margin-left: 24px;
+    // Note: We're using classes here to override the default Docsearch styles;
+    button {
+      width: 100%;
+      cursor: text;
+      margin: 0;
+    }
+    .DocSearch-Button {
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+      border: 1px solid @core-fleet-black-25;
+      background-color: #FFF;
+      padding: 8px 15px;
+      height: 36px;
+      margin: 0;
+      width: 190px;
+    }
+    .DocSearch-Button:hover {
+      box-shadow: none;
+      border: 1px solid @core-fleet-black-25;
+      color: @core-fleet-black-50;
+    }
+    .DocSearch-Search-Icon {
+      margin-left: 0px;
+      margin-right: 8px;
+      height: 16px;
+      width: 16px;
+      color: @core-fleet-black-50;
+      stroke-width: 3px;
+    }
+    .DocSearch-Button-Keys {
+      display: none;
+    }
+    .input-group:focus-within {
+      border: 1px solid @core-vibrant-blue;
+    }
+    .DocSearch-Button-Placeholder {
+      font-size: 16px;
+      line-height: 16px;
+      font-weight: 400;
+      padding-left: 0px;
+    }
+    [purpose='disabled-search'] {
+      input {
+        padding-top: 6px;
+        padding-bottom: 6px;
+        border: none;
+        }
+        &::placeholder {
+          font-size: 16px;
+          line-height: 24px;
+          color: #8B8FA2;
+        }
+      .input-group {
+        border-top-left-radius: 6px;
+        border-bottom-left-radius: 6px;
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+        border: 1px solid @core-fleet-black-25;
+        background: #FFF;
+      }
+      .input-group:focus-within {
+        border: 1px solid @core-vibrant-blue;
+      }
+      .form-control {
+        border-radius: 6px;
+        padding: 6px;
+        height: 36px;
+        margin: 0;
+        width: 212px;
+      }
+      .docsearch-input:focus-visible {
+        outline: none;
+      }
+      .ds-input:focus {
+        outline: rgba(0, 0, 0, 0);
+      }
+      .input-group-text {
+        color: @core-fleet-black-50;
+      }
+      .form-control {
+        height: 36px;
+        padding: 0px;
+        font-size: 16px;
+      } &:focus {
+        border: none;
+      }
+    }
+    img {
+      height: 16px;
+      margin-right: 8px;
+    }
+    background: #FFF;
+    &::placeholder {
+      font-size: 16px;
+      color: @core-fleet-black-50;
+    }
+  }
+  @media (max-width: 991px) {
+    margin-bottom: 32px;
+    [purpose='nav-bar-search'] {
+      margin-left: 24px;
+      // Note: We're using classes here to override the default Docsearch styles;
+      button {
+        width: 100%;
+        cursor: pointer;
+        margin: 0;
+      }
+      .DocSearch-Button {
+        border-top-left-radius: 6px;
+        border-bottom-left-radius: 6px;
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+        border: none;
+        background-color: transparent;
+        padding: 0px;
+        height: 36px;
+        margin: 0;
+        width: 16px;
+      }
+      .DocSearch-Button:hover {
+        box-shadow: none;
+        border: none;
+        color: @core-fleet-black-50;
+      }
+      .DocSearch-Search-Icon {
+        margin-left: 0px;
+        margin-right: 8px;
+        // padding: 8px 15px;
+        height: 16px;
+        width: 16px;
+        color: @core-fleet-black-75;
+        stroke-width: 3px;
+      }
+      .DocSearch-Button-Keys {
+        display: none;
+      }
+      .input-group:focus-within {
+        border: 1px solid @core-vibrant-blue;
+      }
+      .DocSearch-Button-Placeholder {
+        font-size: 16px;
+        line-height: 16px;
+        font-weight: 400;
+        padding-left: 0px;
+        display: none;
+      }
+      [purpose='disabled-search'] {
+        input {
+          padding-top: 6px;
+          padding-bottom: 6px;
+          border: none;
+          }
+          &::placeholder {
+            font-size: 16px;
+            line-height: 24px;
+            color: #8B8FA2;
+          }
+        .input-group {
+          border-top-left-radius: 6px;
+          border-bottom-left-radius: 6px;
+          border-top-right-radius: 6px;
+          border-bottom-right-radius: 6px;
+          border: 1px solid @core-fleet-black-25;
+          background: #FFF;
+        }
+        .input-group:focus-within {
+          border: 1px solid @core-vibrant-blue;
+        }
+        .form-control {
+          border-radius: 6px;
+          padding: 6px;
+          height: 36px;
+          margin: 0;
+          width: 212px;
+        }
+        .docsearch-input:focus-visible {
+          outline: none;
+        }
+        .ds-input:focus {
+          outline: rgba(0, 0, 0, 0);
+        }
+        .input-group-text {
+          color: @core-fleet-black-50;
+        }
+        .form-control {
+          height: 36px;
+          padding: 0px;
+          font-size: 16px;
+        } &:focus {
+          border: none;
+        }
+      }
+      img {
+        height: 16px;
+        margin-right: 8px;
+      }
+      background: none;
+      &::placeholder {
+        font-size: 16px;
+        color: @core-fleet-black-50;
+      }
+    }
+
+
+  }
+  @media (max-width: 768px) {
+    [purpose='nav-link-container'] {
+      max-width: calc(~'100% - 48px');
+      overflow-x: scroll;
+      scrollbar-width: none;
+    }
+
+  }
+}
diff --git a/website/assets/styles/importer.less b/website/assets/styles/importer.less
index 19e29e9058..cc32e98356 100644
--- a/website/assets/styles/importer.less
+++ b/website/assets/styles/importer.less
@@ -28,6 +28,7 @@
 @import 'components/parallax-city.component.less';
 @import 'components/logo-carousel.component.less';
 @import 'components/animated-arrow-button.component.less';
+@import 'components/docs-nav-and-search.component.less';
 
 // Per-page styles
 @import 'pages/homepage.less';
diff --git a/website/assets/styles/pages/app-details.less b/website/assets/styles/pages/app-details.less
index adb47a10f6..83fe643963 100644
--- a/website/assets/styles/pages/app-details.less
+++ b/website/assets/styles/pages/app-details.less
@@ -17,7 +17,7 @@
     }
 
     [purpose='page-container'] {
-      padding: 64px 64px 32px 64px;
+      padding: 48px;
     }
     [purpose='page-content'] {
       margin-left: auto;
@@ -25,117 +25,25 @@
       max-width: 1072px;
     }
 
-    [purpose='breadcrumbs-and-search'] {
-      margin-bottom: 64px;
-      max-width: 1072px;
+    [purpose='breadcrumbs'] {
       font-size: 14px;
-      [purpose='breadcrumbs'] {
-        margin-right: 24px;
-      }
-      [purpose='search'] {
-        // Note: We're using classes here to override the default Docsearch styles;
-        button {
-          width: 100%;
-          cursor: text;
-          margin: 0;
-        }
-        .DocSearch-Button {
-          border-top-left-radius: 6px;
-          border-bottom-left-radius: 6px;
-          border-top-right-radius: 6px;
-          border-bottom-right-radius: 6px;
-          border: 1px solid @core-fleet-black-25;
-          background-color: #FFF;
-          padding: 6px;
-          height: 36px;
-          margin: 0;
-          width: 256px;
-        }
-        .DocSearch-Button:hover {
-          box-shadow: none;
-          border: 1px solid @core-fleet-black-25;
-          color: @core-fleet-black-50;
-        }
-        .DocSearch-Search-Icon {
-          margin-left: 10px;
-          height: 16px;
-          width: 16px;
-          color: @core-fleet-black-50;
-          stroke-width: 3px;
-        }
-        .DocSearch-Button-Keys {
-          display: none;
-        }
-        .input-group:focus-within {
-          border: 1px solid @core-vibrant-blue;
-        }
-        .DocSearch-Button-Placeholder {
-          font-size: 16px;
-          font-weight: 400;
-          padding-left: 12px;
-        }
-        [purpose='disabled-search'] {
-          input {
-            padding-top: 6px;
-            padding-bottom: 6px;
-            border: none;
-            } &::placeholder {
-              font-size: 16px;
-              line-height: 24px;
-              color: #8B8FA2;
-            }
-          .input-group {
-            border-top-left-radius: 6px;
-            border-bottom-left-radius: 6px;
-            border-top-right-radius: 6px;
-            border-bottom-right-radius: 6px;
-            border: 1px solid @core-fleet-black-25;
-            background: #FFF;
-          }
-          .input-group:focus-within {
-            border: 1px solid @core-vibrant-blue;
-          }
-          .form-control {
-            border-radius: 6px;
-            padding: 6px;
-            height: 36px;
-            margin: 0;
-            width: 212px;
-          }
-          .docsearch-input:focus-visible {
-            outline: none;
-          }
-          .ds-input:focus {
-            outline: rgba(0, 0, 0, 0);
-          }
-          .input-group-text {
-            color: @core-fleet-black-50;
-          }
-          .form-control {
-            height: 36px;
-            padding: 0px;
-            font-size: 16px;
-          } &:focus {
-            border: none;
-          }
-        }
-      }
+      margin-bottom: 48px;
+    }
 
-      [purpose='breadcrumbs-category'] {
-        color: #8B8FA2;
-        margin-right: 8px;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 150%; /*  */
-        &:hover {
-          color: #192147;
-          text-decoration: none;
-        }
-      }
-      [purpose='breadcrumbs-title'] {
-        margin-left: 8px;
+    [purpose='breadcrumbs-category'] {
+      color: #8B8FA2;
+      margin-right: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 150%; /*  */
+      &:hover {
+        color: #192147;
+        text-decoration: none;
       }
     }
+    [purpose='breadcrumbs-title'] {
+      margin-left: 8px;
+    }
     [purpose='icon-and-name'] {
       flex-direction: row;
       align-items: center;
@@ -373,24 +281,14 @@
         width: 100%;
         margin-left: 0px;
       }
-      [purpose='breadcrumbs-and-search'] {
+      [purpose='breadcrumbs'] {
         margin-bottom: 32px;
       }
     }
 
     @media (max-width: 768px) {
-      [purpose='breadcrumbs-and-search'] {
-        max-width: 1072px;
-        font-size: 14px;
-        [purpose='breadcrumbs'] {
-          margin-bottom: 24px;
-        }
-        [purpose='search'] {
-          width: 100%;
-          .DocSearch-Button {
-            width: 100%;
-          }
-        }
+      [purpose='breadcrumbs'] {
+        margin-bottom: 24px;
       }
     }
 
diff --git a/website/assets/styles/pages/app-library.less b/website/assets/styles/pages/app-library.less
index b81cde8340..0a15e0b5e5 100644
--- a/website/assets/styles/pages/app-library.less
+++ b/website/assets/styles/pages/app-library.less
@@ -1,10 +1,10 @@
 #app-library {
 
   [purpose='page-container'] {
-    padding: 64px;
+    padding: 48px;
   }
   [purpose='page-content'] {
-    max-width: 1072px;
+    max-width: 1104px;
     margin-left: auto;
     margin-right: auto;
   }
@@ -240,7 +240,7 @@
 
   @media (max-width: 991px) {
     [purpose='page-container'] {
-      padding: 64px 32px;
+      padding: 32px;
     }
     [purpose='app-card'] {
       min-width: 40%;
@@ -255,9 +255,6 @@
   }
 
   @media (max-width: 768px) {
-    [purpose='page-container'] {
-      padding: 48px 24px;
-    }
     [purpose='app-search'] {
       margin-top: 32px;
       width: 100%;
diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less
index 15dcf08f95..7f3bf72ad3 100644
--- a/website/assets/styles/pages/docs/basic-documentation.less
+++ b/website/assets/styles/pages/docs/basic-documentation.less
@@ -1,5 +1,15 @@
 #basic-documentation {
 
+
+  [purpose='page-container'] {
+    padding: 48px;
+  }
+  [purpose='page-content'] {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1104px;
+  }
+
   h1 {
     font-size: 30px;
   }
@@ -25,23 +35,15 @@
   }
 
   h1, h2, h3, h4, h5, h6 {
-    line-height: 1.2;
-  }
-
-
-
-  a:not(.btn) {
-    color: @core-vibrant-blue;
+    line-height: 120%;
   }
 
   ul {
     list-style: none;
     padding-left: 8px;
-
     li {
       margin-bottom: 8px;
     }
-
   }
 
   .markdown-heading:hover {
@@ -77,6 +79,75 @@
     80% {opacity: 20;}
     100% {opacity: 0;}
   }
+  [purpose='mobile-custom-select'] {
+    display: flex;
+    cursor: pointer;
+    height: 48px;
+    padding: 0px 12px;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    border-radius: 6px;
+    border: 1px solid var(--border-border-primary, #E2E4EA);
+    background: var(--surface-surface-primary, #FFF);
+    width: 100%;
+    margin-bottom: 16px;
+    margin-top: 16px;
+    p {
+      color: var(--text-text-brand, #192147);
+
+      /* Body MD (FKA p) */
+      font-family: Inter;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px; /* 150% */
+    }
+    img {
+      height: 16px;
+    }
+    &:hover {
+      border-radius: 6px;
+      border: 1px solid var(--border-border-primary, #E2E4EA);
+      background: var(--surface-surface-primary, #FFF);
+      box-shadow: 0px 0px 0px 2px rgba(25, 33, 71, 0.05);
+    }
+  }
+  [purpose='mobile-table-of-contents'] {
+
+    display: flex;
+    cursor: pointer;
+    height: 48px;
+    padding: 0px 12px;
+    justify-content: start;
+    align-items: center;
+    align-self: stretch;
+    border-radius: 6px;
+    border: 1px solid #E2E4EA;
+    background: #FFF;
+    width: 100%;
+    margin-bottom: 8px;
+    p {
+      color: #192147;
+
+      /* Body MD (FKA p) */
+      font-family: Inter;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px; /* 150% */
+    }
+    img {
+      height: 14px;
+      margin-right: 16px;
+    }
+    &:hover {
+      border-radius: 6px;
+      border: 1px solid #E2E4EA;
+      background: #FFF;
+      box-shadow: 0px 0px 0px 2px rgba(25, 33, 71, 0.05);
+    }
+  }
 
   [purpose='search'] {
     // Note: We're using classes here to override the default Docsearch styles;
@@ -161,49 +232,6 @@
       border: none;
     }
   }
-
-  [purpose='docs-landing-page'] {
-    h3 {
-      font-size: 24px;
-      line-height: 32px;
-    }
-    a {
-      color: @core-vibrant-blue;
-    }
-    [purpose='support-link'] {
-      text-align: center;
-      margin-top: 24px;
-      margin-bottom: 0px;
-      a {
-        display: inline-block;
-      }
-      a:after {
-        background-image: url('/images/icon-arrow-upper-right-7x7@2x.png');
-        background-size: 7px 7px;
-        display: inline-block;
-        position: relative;
-        top: -4px;
-        left: 4px;
-        width: 7px;
-        height: 7px;
-        content: '';
-      }
-      br {
-        display: none;
-      }
-    }
-    [purpose='docs-tree'] {
-      a {
-        color: @core-fleet-black;
-        text-decoration: none;
-        &:hover {
-          color: @core-vibrant-blue;
-        }
-      }
-    }
-  }
-
-
   [purpose='docs-template'] {
 
     h3 {
@@ -218,7 +246,6 @@
 
     [purpose='edit-button'], [purpose='faq-edit-button'] {
       color: @core-vibrant-blue;
-
       font-size: 12px;
       position: absolute;
       right: 230px;
@@ -240,42 +267,16 @@
     [purpose='faq-edit-button'] {
       right: 48px;
     }
-
-
-    [purpose='search'] {
-
-      .form-control {
-        height: 36px;
-        font-size: 16px;
-        padding: 0;
-      }
-      .DocSearch-Button {
-        height: 36px;
-        font-size: 16px;
-        padding: 0;
-      }
-    }
-
-    [purpose='breadcrumbs'] {
-      p, a {
-        font-size: 14px;
-      }
-    }
-
-
     [purpose='mobile-docs-nav'] {
-
       a {
         color: @core-fleet-black;
         text-decoration: none;
-
         &.active {
           color: @core-vibrant-blue;
         }
         &:hover {
           color: @core-vibrant-blue;
         }
-
       }
 
       [purpose='mobile-docs-nav-other-links'] {
@@ -303,94 +304,86 @@
     [purpose='left-sidebar'] {
       scrollbar-width: none;
       font-size: 14px;
-
-      a {
-        color: @core-fleet-black;
-        text-decoration: none;
-
-        &:hover {
-          color: #6A67FE;
-        }
-
-        &.btn-primary {
-          color: #fff;
-        }
-
-        .btn-primary {
-          color: #fff;
-          background-color: #ff5c83;
-          border-color: #ff5c83;
-
-          &:hover {
-            background-color: darken(#ff5c83, 10%);
-            border-color: darken(#ff5c83, 10%);
-          }
-
-        }
-
-      }
-
-      .left-nav {
+      max-width: 200px;
+      [purpose='left-sidebar-links'] {
         border-bottom: 1px solid @core-fleet-black-25;
+        margin-bottom: 16px;
       }
-
-      .topic {
-        padding-left: 0px;
-        color: @core-fleet-black-75;
-        &.active {
-          color: @core-vibrant-blue;
-        }
-
+      [purpose='section-title'] {
+        margin-bottom: 8px;
+        color: #192147;
+        font-family: Inter;
+        font-size: 14px;
+        font-weight: 800;
+        line-height: 120%;
       }
-
-
-    }
-    [purpose='left-sidebar']::-webkit-scrollbar, [purpose='right-sidebar']::-webkit-scrollbar, [purpose='subtopics']::-webkit-scrollbar {
-      display: none;
-    }
-    [purpose='expanded-nav'] {
-      li {
+      [purpose='subpage-link'] {
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
         line-height: 21px;
         color: @core-fleet-black-75;
+        display: block;
+        padding: 4px 8px;
+        &:hover {
+          text-decoration: none;
+          border-radius: 4px;
+          background: #F9FAFC;
+        }
+        &.active {
+          border-radius: 4px;
+          background: #F9FAFC;
+        }
       }
-
-      [purpose='nav-section']:not(:last-of-type) {
-        border-bottom: 1px solid #E2E4EA;
-        margin-bottom: 16px;
-      }
-      [purpose='nav-section'] {
-        padding-bottom: 12px;
-        [purpose='nav-section-title'] {
-          font-size: 13px;
-          font-weight: 500;
-          line-height: 18px;
-          text-transform: uppercase;
-          margin-bottom: 12px;
-          padding-top: 8px;
-          color: @core-fleet-black;
+      [purpose='expanded-nav'] {
+        display: flex;
+        flex-direction: column;
+        padding-top: 8px;
+        padding-bottom: 16px;
+        [purpose='nav-section']:not(:last-of-type) {
+          border-bottom: 1px solid #E2E4EA;
+          margin-bottom: 16px;
+        }
+        [purpose='nav-section'] {
+          padding-bottom: 12px;
+          [purpose='nav-section-title'] {
+            font-size: 13px;
+            font-weight: 500;
+            line-height: 18px;
+            text-transform: uppercase;
+            margin-bottom: 12px;
+            padding-top: 8px;
+            color: @core-fleet-black;
+          }
         }
       }
     }
+    [purpose='left-sidebar']::-webkit-scrollbar, [purpose='right-sidebar']::-webkit-scrollbar, [purpose='subtopics']::-webkit-scrollbar {
+      display: none;
+    }
+
 
     [purpose='right-sidebar'] {
       scrollbar-width: none;
       p, a {
         font-size: 14px;
       }
-
       a {
         &:hover {
-          color: #6A67FE;
+          color: @core-fleet-black-75;
+          text-decoration: none;
+          border-radius: 4px;
+          background: #F9FAFC;
+        }
+        &.active {
+          color: @core-fleet-black-75;
+          border-radius: 4px;
+          background: #F9FAFC;
         }
       }
-
       li {
         margin-bottom: 0;
       }
-
     }
     [purpose='swag-cta'] {
       cursor: pointer;
@@ -510,6 +503,7 @@
 
     [purpose='content'] {
       width: 100%;
+      padding-left: 32px;
       hr {
         margin: 0px;
         padding: 0px;
@@ -566,7 +560,9 @@
         margin-bottom: 24px;
         scroll-margin-top: 104px;
       }
-
+      a:not(.btn) {
+        color: @core-vibrant-blue;
+      }
       pre + hr + h3 {
         padding-top: 0px;
       }
@@ -882,15 +878,126 @@
     }
   }
 
+  [purpose='subtopics-modal'] {
+    .modal.fade .modal-dialog {
+      transition: transform 0.2s ease-out;
+      -webkit-transform: translate(-25%, 0%);
+      transform: translate(125%, 0%);
+    }
+    .modal.show .modal-dialog {
+      -webkit-transform: translate(0, 0);
+      transform: translate(0, 0);
+    }
+    [parasails-component='modal'] {
+
+      [purpose='modal-dialog'] {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  [purpose='table-of-contents-modal'] {
+    .modal.fade .modal-dialog {
+      transition: transform 0.2s ease-out;
+      -webkit-transform: translate(-25%, 0%);
+      transform: translate(-125%, 0%);
+    }
+    .modal.show .modal-dialog {
+      -webkit-transform: translate(0, 0);
+      transform: translate(0, 0);
+    }
+    [parasails-component='modal'] {
+
+      [purpose='modal-dialog'] {
+        margin-left: 16px;
+      }
+    }
+  }
+
+  [parasails-component='modal'] {
+    [purpose='modal-dialog'] {
+      // margin-left: 16px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      max-width: 366px;
+      // max-height: calc(~'100vh - 32px');
+      [purpose='modal-content'] {
+        display: flex;
+        height: calc(~'100vh - 32px');
+        margin-top: 0px;
+        max-width: 366px;
+        padding: 48px 19px 24px 24px;
+        flex-direction: column;
+        align-items: flex-start;
+        scrollbar-width: none;
+        flex-shrink: 0;
+        [purpose='modal-links'] {
+          height: 100%;
+          width: 100%;
+          scrollbar-width: none;
+          overflow: auto;
+          [purpose='section-title'] {
+            color: #192147;
+            font-family: Inter;
+            font-size: 14px;
+            font-weight: 800;
+            line-height: 120%;
+            margin-bottom: 8px;
+          }
+          [purpose='expanded-nav'] {
+            padding-top: 8px;
+            padding-bottom: 16px;
+
+          }
+
+          [purpose='modal-nav-link'] {
+            color: #515774;
+            font-family: Inter;
+            font-size: 14px;
+            line-height: 150%;
+            width: 100%;
+            display: block;
+            padding: 4px 8px;
+            &:hover {
+              text-decoration: none;
+              border-radius: 4px;
+              background: #F9FAFC;
+            }
+            &.active {
+              border-radius: 4px;
+              background: #F9FAFC;
+            }
+          }
+          [purpose='modal-subtopics'] {
+            a {
+              color: #515774;
+              font-family: Inter;
+              margin-right: 5px;
+              font-size: 14px;
+              line-height: 150%;
+              width: 100%;
+              // text-wrap: nowrap;
+              padding: 4px 8px;
+              &:hover {
+                text-decoration: none;
+                border-radius: 4px;
+                background: #F9FAFC;
+              }
+              &.active {
+                border-radius: 4px;
+                background: #F9FAFC;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
   // for larger screens
   @media (min-width: 992px) {
 
     [purpose='docs-template'] {
-      ul {
-        .topic {
-          padding-left: 8px;
-        }
-      }
 
       [purpose='search'] {
         .input-group {
@@ -909,7 +1016,8 @@
       }
       [purpose='left-sidebar'] {
         height: fit-content;
-        min-width: 216px;
+        min-width: 200px;
+        margin-right: 16px;
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 500ms;
@@ -922,28 +1030,40 @@
         min-width: 190px;
         position: sticky;
         top: 104px;
+        margin-left: 24px;
         height: fit-content;
         overflow-y: auto;
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 500ms;
 
+        [purpose='subtopics-heading'] {
+          color: #192147;
+          font-size: 14px;
+          font-weight: 800;
+          line-height: 120%;
+          margin-bottom: 24px;
+        }
         [purpose='subtopics'] {
           scrollbar-width: none;
           overflow-y: auto;
           color: @core-fleet-black;
-          padding-top: 4px;
-          padding-bottom: 4px;
-          border-left: 1px solid @core-vibrant-blue-25;
+
           max-height: calc(~'100vh - 60px');
+          dispaly: flex;
+          flex-direction: column;
           transition-property: max-height;
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-duration: 500ms;
           a {
-            color: @core-fleet-black;
+            display: block;
+            color: #515774;
             text-decoration: none;
+            padding: 4px 8px;
             &:hover {
-              color: @core-vibrant-blue;
+              color: #515774;
+              border-radius: 4px;
+              background: #F9FAFC;
             }
           }
         }
@@ -1001,6 +1121,9 @@
 
   // for smaller screens
   @media (max-width: 991px) {
+    [purpose='page-container'] {
+      padding: 32px;
+    }
     [purpose='back-to-top-button-container'] {
       display: none;
     }
@@ -1015,27 +1138,23 @@
         top: -55px;
         right: 0px;
       }
-
       [purpose='right-sidebar'] {
         width: 100%;
         // Note: we're specifying a minimum height for this element to be the height of the edit page button.
         // Even if there are no subtopics on a documentation page, we can be sure that the edit page button will not overlap the pages content.
         min-height: 30px;
         margin-bottom: 32px;
-
         [purpose='subtopics'] {
           color: @core-fleet-black;
-
           a {
             color: @core-vibrant-blue;
           }
-
         }
-
       }
-
       [purpose='content'] {
         width: 100%;
+        padding-left: 0px;
+        margin-left: 0px;
         a {
           word-wrap: break-word;
         }
@@ -1050,9 +1169,8 @@
 
   @media (max-width: 768px) {
     [purpose='docs-template'] {
-
       [purpose='edit-button'] {
-        top: 0px;
+        top: 80px;
         right: 0px;
       }
     }
@@ -1060,11 +1178,60 @@
   }
 
   // for mobile
-  @media (max-width: 576px) {
+  @media (max-width: 575px) {
     [purpose='docs-template'] {
       padding: 0px 24px;
     }
+    [purpose='page-container'] {
+      padding: 32px 24px;
+    }
+    [purpose='subtopics-modal'] {
+      .modal.fade .modal-dialog {
+        transition: transform 0.1s ease-out;
+        -webkit-transform: translate(-25%, 0%);
+        transform: translate(0, 125%);
+      }
+      .modal.show .modal-dialog {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+      }
+      [parasails-component='modal'] {
 
+        [purpose='modal-dialog'] {
+          margin-right: 16px;
+        }
+      }
+    }
+    [purpose='table-of-contents-modal'] {
+      .modal.fade .modal-dialog {
+        transition: transform 0.1s ease-out;
+        -webkit-transform: translate(-25%, 0%);
+        transform: translate(0%, 125%);
+      }
+      .modal.show .modal-dialog {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+      }
+      [parasails-component='modal'] {
+
+        [purpose='modal-dialog'] {
+          margin-left: 16px;
+        }
+      }
+    }
+    [parasails-component='modal'] {
+
+      [purpose='modal-dialog'] {
+        margin: 16px;
+        width: 100%;
+        max-width: calc(~'100% - 32px');
+        max-height: calc(~'100vh - 32px');
+        [purpose='modal-content'] {
+          max-width: 100%;
+          height: calc(~'100vh - 72px');
+        }
+      }
+    }
   }
   @media(hover) {
     [purpose='docs-template'] {
diff --git a/website/assets/styles/pages/osquery-table-details.less b/website/assets/styles/pages/osquery-table-details.less
index e7b42e2f31..c24fdbc593 100644
--- a/website/assets/styles/pages/osquery-table-details.less
+++ b/website/assets/styles/pages/osquery-table-details.less
@@ -1,4 +1,68 @@
 #osquery-table-details {
+
+
+  [purpose='page-container'] {
+    padding: 48px;
+  }
+  [purpose='page-content'] {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1104px;
+  }
+  [purpose='page-headline'] {
+    // max-width: 662px;
+    // margin-right: 16px;
+    margin-bottom: 48px;
+    h2 {
+      margin-bottom: 24px;
+      color: #192147;
+      font-size: 32px;
+      font-weight: 800;
+      line-height: 120%;
+    }
+    p {
+      color: #515774;
+      font-size: 15px;
+      line-height: 150%;
+      margin-bottom: 0px;
+    }
+  }
+
+  [purpose='platform-filters'] {
+    border-bottom: 1px solid #E2E4EA;
+    margin-bottom: 48px;
+    [purpose='platform-filter'] {
+      width: 25%;
+      display: flex;
+      padding: 16px 40px 24px 40px;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      img {
+        height: 20px;
+        margin-right: 10px;
+      }
+      p {
+        color: #192147;
+        text-align: center;
+        margin-bottom: 0px;
+        font-family: Inter;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px; /* 150% */
+        white-space: nowrap;
+      }
+      &.selected {
+        border-bottom: 2px solid var(--text-text-brand, #192147);
+        padding: 16px 40px 22px 40px;
+        p {
+          font-weight: 700;
+        }
+      }
+    }
+  }
+
+
   hr {
     margin: 0;
     width: 100vw;
@@ -132,31 +196,31 @@
     -ms-overflow-style: none;
     min-width: 245px;
     max-width: 250px;
-    padding-top: 24px;
     height: 100%;
     margin-right: 16px;
     h4 {
       line-height: 24px;
     }
   }
-  [purpose='table-of-contents'] {
+  [purpose='table-of-contents'], [purpose='modal-table-of-contents'] {
     scrollbar-width: none;
-    padding-top: 16px;
     padding-bottom: 120px;
-    margin-top: 16px;
-    border-top: 1px solid @core-fleet-black-25;
     position: relative;
+    width: 100%;
     a {
       font-size: 14px;
       line-height: 28px;
-      color: @text-normal;
+      color: @core-fleet-black-75;
       text-decoration: none;
-    }
-    a:hover {
-      color: @core-vibrant-blue;
-    }
-    a.active {
-      color: @core-vibrant-blue;
+      &:hover {
+        text-decoration: none;
+        border-radius: 4px;
+        background: #F9FAFC;
+      }
+      &.active {
+        border-radius: 4px;
+        background: #F9FAFC;
+      }
     }
     min-height: calc(~'100vh - 565px');
     overflow-y: scroll;
@@ -179,6 +243,7 @@
   [purpose='table-container'] {
     height: min-content;
     max-width: 860px;
+    width: 100%;
   }
 
   [purpose='overflow-shadow'] {
@@ -191,9 +256,8 @@
     z-index: 2;
   }
   [purpose='content'] {
-    padding-left: 40px;
-    padding-right: 40px;
-    max-width: 960px;
+    margin-top: 32px;
+    color: @core-fleet-black-75;
     h2 {
       font-weight: 800;
       font-size: 24px;
@@ -231,9 +295,8 @@
   }
 
   [purpose='schema-table'] {
-    width: 100%;
+    max-width: 100%;
     position: relative;
-    padding-top: 24px;
     margin-bottom: 40px;
     [purpose='platform-logos'] {
       height: 0px;
@@ -244,6 +307,7 @@
     a:not(.btn):not([purpose='evented-table-label']) {
       color: @core-vibrant-blue;
       padding-right: 7px;
+      word-break: break-word;
     }
     a:not(.markdown-link):not([purpose='evented-table-label']) {
       &:after {
@@ -413,13 +477,152 @@
     margin-top: 40px;
     border-top: 1px solid @core-fleet-black-25;
   }
+  [purpose='mobile-custom-select'] {
+    display: flex;
+    cursor: pointer;
+    height: 48px;
+    padding: 0px 12px;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    border-radius: 6px;
+    border: 1px solid var(--border-border-primary, #E2E4EA);
+    background: var(--surface-surface-primary, #FFF);
+    width: 100%;
+    margin-bottom: 16px;
+    margin-top: 16px;
+    p {
+      color: var(--text-text-brand, #192147);
+      margin-top: 0px;
+      /* Body MD (FKA p) */
+      font-family: Inter;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px; /* 150% */
+    }
+    img {
+      height: 16px;
+    }
+    &:hover {
+      border-radius: 6px;
+      border: 1px solid var(--border-border-primary, #E2E4EA);
+      background: var(--surface-surface-primary, #FFF);
+      box-shadow: 0px 0px 0px 2px rgba(25, 33, 71, 0.05);
+    }
+  }
+  [purpose='table-of-contents-modal'] {
+    [purpose='modal-table-of-contents'] {
+      padding-bottom: 0px;
+    }
+    .modal.fade .modal-dialog {
+      transition: transform 0.2s ease-out;
+      -webkit-transform: translate(-25%, 0%);
+      transform: translate(-125%, 0%);
+    }
+    .modal.show .modal-dialog {
+      -webkit-transform: translate(0, 0);
+      transform: translate(0, 0);
+    }
+    [parasails-component='modal'] {
 
+      [purpose='modal-dialog'] {
+        margin-left: 16px;
+      }
+    }
+  }
+  [parasails-component='modal'] {
+
+    [purpose='modal-dialog'] {
+      // margin-left: 16px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      max-width: 366px;
+      // max-height: calc(~'100vh - 32px');
+      [purpose='modal-content'] {
+        display: flex;
+        height: calc(~'100vh - 32px');
+        margin-top: 0px;
+        max-width: 366px;
+        padding: 48px 19px 24px 24px;
+        flex-direction: column;
+        align-items: flex-start;
+        // gap: 24px;
+        flex-shrink: 0;
+        [purpose='modal-links'] {
+          max-height: 100%;
+          width: 100%;
+          overflow-y: scroll;
+          [purpose='section-title'] {
+            color: #192147;
+            font-family: Inter;
+            font-size: 14px;
+            font-weight: 800;
+            line-height: 120%;
+            margin-bottom: 8px;
+          }
+          [purpose='expanded-nav'] {
+            padding-top: 8px;
+            padding-bottom: 16px;
+          }
+
+          [purpose='modal-nav-link'] {
+            color: #515774;
+            font-family: Inter;
+            margin-right: 5px;
+            font-size: 14px;
+            line-height: 150%;
+            width: 100%;
+            display: block;
+            // text-wrap: nowrap;
+            padding: 4px 8px;
+            &:hover {
+              text-decoration: none;
+              border-radius: 4px;
+              background: #F9FAFC;
+            }
+            &.active {
+              border-radius: 4px;
+              background: #F9FAFC;
+            }
+          }
+          [purpose='modal-subtopics'] {
+            a {
+              color: #515774;
+              font-family: Inter;
+              margin-right: 5px;
+              font-size: 14px;
+              line-height: 150%;
+              width: 100%;
+              // text-wrap: nowrap;
+              padding: 4px 8px;
+              // &:hover {
+              //   text-decoration: none;
+              //   border-radius: 4px;
+              //   background: #F9FAFC;
+              // }
+              // &.active {
+              //   border-radius: 4px;
+              //   background: #F9FAFC;
+              // }
+            }
+          }
+        }
+      }
+    }
+  }
   @media (max-width: 991px) {
+    [purpose='page-container'] {
+      padding: 32px;
+    }
     [purpose='table-container'] {
       max-width: unset;
     }
+    [purpose='content'] {
+      margin-top: 0px;
+    }
     [purpose='schema-table'] {
-      padding-top: 40px;
+      padding-top: 16px;
       [purpose='platform-logos'] {
         top: 53px;
       }
@@ -432,6 +635,9 @@
         display: block;
       }
     }
+    [purpose='platform-filters'] {
+      margin-bottom: 32px;
+    }
     [purpose='filter-row'] {
       padding-left: 40px;
       padding-right: 40px;
@@ -458,9 +664,8 @@
   }
 
   @media (max-width: 576px) {
-    [purpose='content'] {
-      padding-left: 24px;
-      padding-right: 24px;
+    [purpose='page-container'] {
+      padding: 32px 24px;
     }
     [purpose='mobile-nav'] {
       padding-left: 24px;
@@ -511,5 +716,35 @@
         }
       }
     }
+    [purpose='table-of-contents-modal'] {
+      .modal.fade .modal-dialog {
+        transition: transform 0.1s ease-out;
+        -webkit-transform: translate(-25%, 0%);
+        transform: translate(0%, 125%);
+      }
+      .modal.show .modal-dialog {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+      }
+      [parasails-component='modal'] {
+
+        [purpose='modal-dialog'] {
+          margin-left: 16px;
+        }
+      }
+    }
+    [parasails-component='modal'] {
+
+      [purpose='modal-dialog'] {
+        margin: 16px;
+        width: 100%;
+        max-width: calc(~'100% - 32px');
+        max-height: calc(~'100vh - 32px');
+        [purpose='modal-content'] {
+          max-width: 100%;
+          height: calc(~'100vh - 72px');
+        }
+      }
+    }
   }
 }
diff --git a/website/assets/styles/pages/policy-details.less b/website/assets/styles/pages/policy-details.less
index 6c9dbd8fce..39cd391c22 100644
--- a/website/assets/styles/pages/policy-details.less
+++ b/website/assets/styles/pages/policy-details.less
@@ -1,5 +1,5 @@
 #policy-details {
-  // background-color: #FFF;
+
   h3 {
     padding-bottom: 24px;
     padding-top: 32px;
@@ -19,125 +19,32 @@
 
 
   [purpose='page-container'] {
-    padding: 64px 64px 32px 64px;
+    padding: 48px;
   }
   [purpose='page-content'] {
     margin-left: auto;
     margin-right: auto;
-    max-width: 1072px;
+    max-width: 1104px;
   }
 
-  [purpose='breadcrumbs-and-search'] {
-    margin-bottom: 64px;
-    max-width: 1072px;
+  [purpose='breadcrumbs'] {
     font-size: 14px;
-    [purpose='breadcrumbs'] {
-      margin-right: 24px;
-    }
-    [purpose='search'] {
-      // Note: We're using classes here to override the default Docsearch styles;
-      button {
-        width: 100%;
-        cursor: text;
-        margin: 0;
-      }
-      .DocSearch-Button {
-        border-top-left-radius: 6px;
-        border-bottom-left-radius: 6px;
-        border-top-right-radius: 6px;
-        border-bottom-right-radius: 6px;
-        border: 1px solid @core-fleet-black-25;
-        background-color: #FFF;
-        padding: 6px;
-        height: 36px;
-        margin: 0;
-        width: 256px;
-      }
-      .DocSearch-Button:hover {
-        box-shadow: none;
-        border: 1px solid @core-fleet-black-25;
-        color: @core-fleet-black-50;
-      }
-      .DocSearch-Search-Icon {
-        margin-left: 10px;
-        height: 16px;
-        width: 16px;
-        color: @core-fleet-black-50;
-        stroke-width: 3px;
-      }
-      .DocSearch-Button-Keys {
-        display: none;
-      }
-      .input-group:focus-within {
-        border: 1px solid @core-vibrant-blue;
-      }
-      .DocSearch-Button-Placeholder {
-        font-size: 16px;
-        font-weight: 400;
-        padding-left: 12px;
-      }
-      [purpose='disabled-search'] {
-        input {
-          padding-top: 6px;
-          padding-bottom: 6px;
-          border: none;
-          } &::placeholder {
-            font-size: 16px;
-            line-height: 24px;
-            color: #8B8FA2;
-          }
-        .input-group {
-          border-top-left-radius: 6px;
-          border-bottom-left-radius: 6px;
-          border-top-right-radius: 6px;
-          border-bottom-right-radius: 6px;
-          border: 1px solid @core-fleet-black-25;
-          background: #FFF;
-        }
-        .input-group:focus-within {
-          border: 1px solid @core-vibrant-blue;
-        }
-        .form-control {
-          border-radius: 6px;
-          padding: 6px;
-          height: 36px;
-          margin: 0;
-          width: 212px;
-        }
-        .docsearch-input:focus-visible {
-          outline: none;
-        }
-        .ds-input:focus {
-          outline: rgba(0, 0, 0, 0);
-        }
-        .input-group-text {
-          color: @core-fleet-black-50;
-        }
-        .form-control {
-          height: 36px;
-          padding: 0px;
-          font-size: 16px;
-        } &:focus {
-          border: none;
-        }
-      }
-    }
-
-    [purpose='breadcrumbs-category'] {
-      color: #8B8FA2;
-      margin-right: 8px;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 150%; /*  */
-      &:hover {
-        color: #192147;
-        text-decoration: none;
-      }
-    }
-    [purpose='breadcrumbs-title'] {
-      margin-left: 8px;
+    margin-bottom: 48px;
+  }
+  [purpose='breadcrumbs-category'] {
+    color: #8B8FA2;
+    margin-right: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 150%; /*  */
+    &:hover {
+      color: #192147;
+      text-decoration: none;
     }
   }
+  [purpose='breadcrumbs-title'] {
+    margin-left: 8px;
+  }
 
   [purpose='policy-name'] {
     color: #192147;
@@ -560,7 +467,7 @@
       width: 100%;
       margin-left: 0px;
     }
-    [purpose='breadcrumbs-and-search'] {
+    [purpose='breadcrumbs'] {
       margin-bottom: 32px;
     }
     pre {
@@ -573,18 +480,8 @@
   }
 
   @media (max-width: 768px) {
-    [purpose='breadcrumbs-and-search'] {
-      max-width: 1072px;
-      font-size: 14px;
-      [purpose='breadcrumbs'] {
-        margin-bottom: 24px;
-      }
-      [purpose='search'] {
-        width: 100%;
-        .DocSearch-Button {
-          width: 100%;
-        }
-      }
+    [purpose='breadcrumbs'] {
+      margin-bottom: 24px;
     }
   }
 
diff --git a/website/assets/styles/pages/policy-library.less b/website/assets/styles/pages/policy-library.less
index ce3916a65e..6a2656624c 100644
--- a/website/assets/styles/pages/policy-library.less
+++ b/website/assets/styles/pages/policy-library.less
@@ -1,5 +1,15 @@
 #policy-library {
-  // background-color: #FFF;
+
+  [purpose='page-container'] {
+    padding: 48px;
+  }
+  [purpose='page-content'] {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1104px;
+  }
+
+
   a {
     color: #515774;
     font-family: Inter;
@@ -110,14 +120,7 @@
       color: @core-fleet-black-50;
     }
   }
-  [purpose='page-container'] {
-    padding: 64px;
-  }
-  [purpose='page-content'] {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 1072px;
-  }
+
   [purpose='search-and-headline'] {
     margin-bottom: 64px;
   }
@@ -312,7 +315,7 @@
 
   @media (max-width: 991px) {
     [purpose='page-container'] {
-      padding: 64px 32px;
+      padding: 32px;
     }
     [purpose='policy-name-and-description'] {
       max-width: unset;
diff --git a/website/assets/styles/pages/query-detail.less b/website/assets/styles/pages/query-detail.less
index 5e0648e844..c6282f2f0d 100644
--- a/website/assets/styles/pages/query-detail.less
+++ b/website/assets/styles/pages/query-detail.less
@@ -1,5 +1,5 @@
 #query-detail {
-  // background-color: #FFF;
+
   h3 {
     padding-bottom: 24px;
     padding-top: 32px;
@@ -19,125 +19,32 @@
 
 
   [purpose='page-container'] {
-    padding: 64px 64px 32px 64px;
+    padding: 48px;
   }
   [purpose='page-content'] {
     margin-left: auto;
     margin-right: auto;
-    max-width: 1072px;
+    max-width: 1104px;
   }
 
-  [purpose='breadcrumbs-and-search'] {
-    margin-bottom: 64px;
-    max-width: 1072px;
+  [purpose='breadcrumbs'] {
     font-size: 14px;
-    [purpose='breadcrumbs'] {
-      margin-right: 24px;
-    }
-    [purpose='search'] {
-      // Note: We're using classes here to override the default Docsearch styles;
-      button {
-        width: 100%;
-        cursor: text;
-        margin: 0;
-      }
-      .DocSearch-Button {
-        border-top-left-radius: 6px;
-        border-bottom-left-radius: 6px;
-        border-top-right-radius: 6px;
-        border-bottom-right-radius: 6px;
-        border: 1px solid @core-fleet-black-25;
-        background-color: #FFF;
-        padding: 6px;
-        height: 36px;
-        margin: 0;
-        width: 256px;
-      }
-      .DocSearch-Button:hover {
-        box-shadow: none;
-        border: 1px solid @core-fleet-black-25;
-        color: @core-fleet-black-50;
-      }
-      .DocSearch-Search-Icon {
-        margin-left: 10px;
-        height: 16px;
-        width: 16px;
-        color: @core-fleet-black-50;
-        stroke-width: 3px;
-      }
-      .DocSearch-Button-Keys {
-        display: none;
-      }
-      .input-group:focus-within {
-        border: 1px solid @core-vibrant-blue;
-      }
-      .DocSearch-Button-Placeholder {
-        font-size: 16px;
-        font-weight: 400;
-        padding-left: 12px;
-      }
-      [purpose='disabled-search'] {
-        input {
-          padding-top: 6px;
-          padding-bottom: 6px;
-          border: none;
-          } &::placeholder {
-            font-size: 16px;
-            line-height: 24px;
-            color: #8B8FA2;
-          }
-        .input-group {
-          border-top-left-radius: 6px;
-          border-bottom-left-radius: 6px;
-          border-top-right-radius: 6px;
-          border-bottom-right-radius: 6px;
-          border: 1px solid @core-fleet-black-25;
-          background: #FFF;
-        }
-        .input-group:focus-within {
-          border: 1px solid @core-vibrant-blue;
-        }
-        .form-control {
-          border-radius: 6px;
-          padding: 6px;
-          height: 36px;
-          margin: 0;
-          width: 212px;
-        }
-        .docsearch-input:focus-visible {
-          outline: none;
-        }
-        .ds-input:focus {
-          outline: rgba(0, 0, 0, 0);
-        }
-        .input-group-text {
-          color: @core-fleet-black-50;
-        }
-        .form-control {
-          height: 36px;
-          padding: 0px;
-          font-size: 16px;
-        } &:focus {
-          border: none;
-        }
-      }
-    }
-
-    [purpose='breadcrumbs-category'] {
-      color: #8B8FA2;
-      margin-right: 8px;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 150%; /*  */
-      &:hover {
-        color: #192147;
-        text-decoration: none;
-      }
-    }
-    [purpose='breadcrumbs-title'] {
-      margin-left: 8px;
+    margin-bottom: 48px;
+  }
+  [purpose='breadcrumbs-category'] {
+    color: #8B8FA2;
+    margin-right: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 150%;
+    &:hover {
+      color: #192147;
+      text-decoration: none;
     }
   }
+  [purpose='breadcrumbs-title'] {
+    margin-left: 8px;
+  }
 
   [purpose='query-name'] {
     color: #192147;
@@ -505,7 +412,7 @@
       width: 100%;
       margin-left: 0px;
     }
-    [purpose='breadcrumbs-and-search'] {
+    [purpose='breadcrumbs'] {
       margin-bottom: 32px;
     }
     pre {
@@ -518,18 +425,8 @@
   }
 
   @media (max-width: 768px) {
-    [purpose='breadcrumbs-and-search'] {
-      max-width: 1072px;
-      font-size: 14px;
-      [purpose='breadcrumbs'] {
-        margin-bottom: 24px;
-      }
-      [purpose='search'] {
-        width: 100%;
-        .DocSearch-Button {
-          width: 100%;
-        }
-      }
+    [purpose='breadcrumbs'] {
+      margin-bottom: 24px;
     }
   }
 
diff --git a/website/assets/styles/pages/query-library.less b/website/assets/styles/pages/query-library.less
index e48a1cf681..9990bb0444 100644
--- a/website/assets/styles/pages/query-library.less
+++ b/website/assets/styles/pages/query-library.less
@@ -1,5 +1,15 @@
 #query-library {
-  // background-color: #FFF;
+
+
+  [purpose='page-container'] {
+    padding: 48px;
+  }
+  [purpose='page-content'] {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1104px;
+  }
+
   a {
     color: #515774;
     font-family: Inter;
@@ -110,14 +120,7 @@
       color: @core-fleet-black-50;
     }
   }
-  [purpose='page-container'] {
-    padding: 64px;
-  }
-  [purpose='page-content'] {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 1072px;
-  }
+
   [purpose='search-and-headline'] {
     margin-bottom: 64px;
   }
@@ -318,7 +321,7 @@
 
   @media (max-width: 991px) {
     [purpose='page-container'] {
-      padding: 64px 32px;
+      padding: 32px;
     }
     [purpose='policy-name-and-description'] {
       max-width: unset;
diff --git a/website/assets/styles/pages/vital-details.less b/website/assets/styles/pages/vital-details.less
index 1bb64e8696..af084bf372 100644
--- a/website/assets/styles/pages/vital-details.less
+++ b/website/assets/styles/pages/vital-details.less
@@ -1,5 +1,4 @@
 #vital-details {
-  // background-color: #FFF;
   h3 {
     padding-bottom: 24px;
     padding-top: 32px;
@@ -20,12 +19,12 @@
 
 
   [purpose='page-container'] {
-    padding: 64px 64px 32px 64px;
+    padding: 48px;
   }
   [purpose='page-content'] {
     margin-left: auto;
     margin-right: auto;
-    max-width: 1072px;
+    max-width: 1104px;
   }
   [purpose='search-and-headline'] {
     margin-bottom: 48px;
@@ -247,10 +246,8 @@
         }
       }
     }
-
-
-
   }
+
   [purpose='vital-details-and-sidebar'] {
     padding-top: 32px;
 
@@ -549,10 +546,10 @@
           max-height: 100%;
           width: 100%;
           overflow-y: scroll;
+          scrollbar-width: none;
           [purpose='vital-link'] {
             color: #515774;
             font-family: Inter;
-            margin-right: 5px;
             font-size: 14px;
             line-height: 150%;
             width: 100%;
diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index 8e731aeb83..6fd045f91d 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -463,6 +463,7 @@
     <script src="/js/components/bar-chart.component.js"></script>
     <script src="/js/components/call-to-action.component.js"></script>
     <script src="/js/components/cloud-error.component.js"></script>
+    <script src="/js/components/docs-nav-and-search.component.js"></script>
     <script src="/js/components/js-timestamp.component.js"></script>
     <script src="/js/components/logo-carousel.component.js"></script>
     <script src="/js/components/modal.component.js"></script>
diff --git a/website/views/pages/app-details.ejs b/website/views/pages/app-details.ejs
index 85178bc077..d5deabc178 100644
--- a/website/views/pages/app-details.ejs
+++ b/website/views/pages/app-details.ejs
@@ -1,31 +1,14 @@
 <div id="app-details" v-cloak>
   <div purpose="page-container">
     <div purpose="page-content" class="container p-0">
-      <div purpose="breadcrumbs-and-search" class="d-flex flex-md-row flex-column justify-content-between align-items-md-center align-items-start">
-        <div purpose="breadcrumbs" class="d-flex flex-row align-items-start">
-          <div>
-            <a purpose="breadcrumbs-category" class="text-nowrap" href="/app-library">App library</a>/
-          </div>
-          <div purpose="breadcrumbs-title">
-            <span><%- thisApp.name %></span>
-          </div>
+      <docs-nav-and-search current-section="software" search-filter="software" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
+      <div purpose="breadcrumbs" class="d-flex flex-row align-items-start">
+        <div>
+          <a purpose="breadcrumbs-category" class="text-nowrap" href="/app-library">App library</a>/
+        </div>
+        <div purpose="breadcrumbs-title">
+          <span><%- thisApp.name %></span>
         </div>
-<!--         <div purpose="search" id="docsearch-query" class="d-flex">
-          <div purpose="disabled-search" class="d-flex w-100">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <span class="input-group-text border-0 bg-transparent pl-3" >
-                  <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
-                </span>
-              </div>
-              <div class="form-control border-0 ">
-              <input class="docsearch-input pr-1"
-                placeholder="Search" aria-label="Search the handbook"
-                />
-              </div>
-            </div>
-          </div>
-        </div> -->
       </div>
       <div purpose="app-details-and-sidebar" class="d-flex flex-nowrap flex-lg-row flex-column">
         <div purpose="app-details" class="d-inline-flex flex-column flex-shrink w-0">
diff --git a/website/views/pages/app-library.ejs b/website/views/pages/app-library.ejs
index e1ee79fa07..a993a7f7bb 100644
--- a/website/views/pages/app-library.ejs
+++ b/website/views/pages/app-library.ejs
@@ -1,27 +1,12 @@
 <div id="app-library" v-cloak>
   <div purpose="page-container">
     <div purpose="page-content" class="d-flex flex-column">
+      <docs-nav-and-search current-section="software" search-filter="software" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
       <div purpose="search-and-headline" class="d-flex flex-md-row flex-column justify-content-between align-items-md-center">
         <div purpose="page-title" class="d-flex flex-column">
           <h1>App library</h1>
           <p>Install Fleet-maintained apps on your hosts without the need for additional configuration. Activate self-service for your end users.</p>
         </div>
-<!--         <div purpose="app-search" id="docsearch-query" class="d-flex">
-          <div purpose="disabled-search" class="d-flex w-100">
-            <div class="input-group d-flex flex-nowrap">
-              <div class="input-group-prepend">
-                <span class="input-group-text border-0 bg-transparent" >
-                  <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
-                </span>
-              </div>
-              <div class="form-control border-0 ">
-              <input class="docsearch-input pr-1"
-                placeholder="Search" aria-label="Search"
-                />
-              </div>
-            </div>
-          </div>
-        </div> -->
       </div>
       <div purpose="count-and-cta" class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start justify-content-sm-between justify-content-center mb-3">
         <div><p class="mb-0"><strong>{{allApps.length}} and counting....</strong></p></div>
diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs
index 10b4595701..e777005829 100644
--- a/website/views/pages/docs/basic-documentation.ejs
+++ b/website/views/pages/docs/basic-documentation.ejs
@@ -1,161 +1,36 @@
 <div id="basic-documentation" v-cloak>
-
-  <div purpose="docs-landing-page" v-if="isDocsLandingPage">
-    <div style="max-width: 948px;" class="container-fluid p-0 px-3 px-sm-4 py-5 mb-5 mx-auto">
-
-      <div class="text-center">
-        <h1 class="pt-5">Fleet documentation</h1>
-        <p class="mb-2">Welcome to the documentation for Fleet, the lightweight management platform for laptops and servers.</p>
-      </div>
-
-      <div purpose="search" id="docsearch-query-landing" class="d-flex p-0 mt-5">
-        <div class="input-group">
-          <div class="input-group-prepend">
-            <span class="input-group-text border-0 bg-transparent pl-3" >
-              <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
-            </span>
-          </div>
-          <div class="form-control border-0 ">
-          <input class="docsearch-input pr-1"
-            placeholder="Search..." aria-label="Search the docs and guides"
-            />
-          </div>
-        </div>
-      </div>
-      <p purpose="support-link">Can't find what you're looking for? <a href="/support">Support</a></p>
-
-
-      <div purpose="docs-tree">
-        <div class="container-fluid d-flex flex-column flex-sm-row justify-content-sm-between p-0 px-4">
-          <div v-for="page in findPagesByUrl()">
-            <div style="max-width: 300px;" class="container-fluid justify-content-start align-items-center p-0 px-2 pt-4 m-0 mt-3">
-              <h3 class="mb-4">{{page.title}}</h3>
-              <ul style="list-style: none;" class="p-0 m-0">
-                <li class="mb-2" v-for="subpage in findPagesByUrl(page.url)">
-                  <a :href="subpage.url">{{subpage.title}}</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
+  <div purpose="page-container">
+    <div purpose="page-content">
+    <docs-nav-and-search search-filter="docs" current-section="docs" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
+    <div purpose="mobile-table-of-contents" class="d-flex d-lg-none" @click="clickOpenMobileDocsNav()">
+      <img src="/images/icon-hamburger-menu-16x14@2x.png" alt="click to open the table of contents." >
+      <p class="mb-0"><%= thisPage.title %></p>
     </div>
-  </div>
-
-  <div v-else>
-    <div purpose="docs-template" style="max-width: 1200px;" class="container-fluid px-lg-3  mb-5">
-
-      <div purpose="breadcrumbs-and-search" class="conainer-fluid d-flex flex-column flex-lg-row justify-content-lg-between p-0 pt-4 pb-lg-2 m-0 breadcrumbs-search">
-
-        <div purpose="breadcrumbs" class="d-none d-lg-flex p-0 m-0 align-items-center breadcrumbs">
-          <a :href="'/' + breadcrumbs[0]" class="pr-3" v-if="breadcrumbs.length > 1">
-            {{breadcrumbs[0] === 'docs' ? 'Documentation' : breadcrumbs[0]}}
-          </a>
-          <div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length === 3">
-            <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png" />
-            <a :href="'/' + breadcrumbs[0] + '/' + breadcrumbs[1]" class="px-3">
-              {{getTitleFromUrl(breadcrumbs[1])}}
-            </a>
-          </div>
-          <div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length > 1">
-            <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/>
-            <p class="px-3 m-0">
-              {{thisPage.title}}
-            </p>
-          </div>
-        </div>
-
-        <div purpose="search" id="docsearch-query" class="d-flex p-0 mb-2 mb-lg-0">
-          <div class="input-group">
-            <div class="input-group-prepend">
-              <span class="input-group-text border-0 bg-transparent pl-3">
-                <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
-              </span>
-            </div>
-            <div class="form-control border-0 ">
-              <input class="docsearch-input pr-1"
-              placeholder="Search the docs..." aria-label="Search the docs and guides"
-              v-model="inputTextValue"/>
-            </div>
-          </div>
-        </div>
-
-        <div purpose="mobile-docs-nav" class="d-flex-block d-lg-none">
-          <div class="d-flex flex-column d-lg-none p-0 m-0 justify-content-start align-items-center">
-            <button purpose="docs-nav-button" class="btn btn-block d-flex align-items-center docs-nav-button" type="button" @click="toggleDocsNav">
-              <span class="pr-2 m-0">Docs</span>
-              <img class="my-auto" style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/>
-              <span class="font-weight-bold px-2 m-0">{{getTitleFromUrl(breadcrumbs[1])}}</span>
-              <img style="width: 6px; height: 9px;" class="ml-auto my-auto" alt="right chevron" src="/images/chevron-right-6x9@2x.png" v-if="!showDocsNav"/>
-              <img style="width: 9px; height: 6px;" class="ml-auto my-auto" alt="down chevron" src="/images/chevron-down-9x6@2x.png" v-else/>
-            </button>
-          </div>
-          <div class="border-bottom" v-if="!showDocsNav"></div>
-          <div class="d-flex px-0 border-bottom mobile-docs-nav" v-if="showDocsNav">
-            <div class="container-fluid px-0 pt-4">
-              <ul class="px-0 mb-0 pb-3">
-                <li class="px-0 mb-2" v-for="page in findPagesByUrl()" :key="page.title">
-                  <span class="font-weight-bold">
-                    {{page.title}}
-                  </span>
-                  <div purpose="expanded-nav" class="pt-3">
-                    <ul class="p-0 pl-2 mb-3" v-if="!_.isEmpty(findPagesByUrl(page.url))">
-                      <li v-for="subpage in findPagesByUrl(page.url)" :key="subpage.title">
-                        <a :href="subpage.url" :class="subpage.title === thisPage.title ? 'topic active' : 'topic'">
-                          {{subpage.title}}
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
-                </li>
-              </ul>
-              <ul class="px-0 mb-0 pt-3" purpose="mobile-docs-nav-other-links">
-                <li class="px-0 mb-3"><a href="/queries">Built-in checks</a></li>
-                <li class="px-0 mb-3"><a href="/tables">Raw data</a></li>
-                <li class="px-0 mb-3"><a href="/app-library">App library</a></li>
-                <li class="px-0 mb-3"><a href="/releases">Release notes</a></li>
-                <li class="px-0 mb-3"><a href="/docs/contributing" target="_blank">Contributing</a></li>
-                <li class="px-0 mb-3"><a href="/support">Support</a></li>
-                <li class="px-0 mb-3"><a href="/contact">Take a tour</a></li>
-              </ul>
-            </div>
-          </div>
-
-        </div>
-
-      </div>
 
+    <div purpose="docs-template" class="container-fluid p-0">
       <h1 purpose="page-title" class="d-flex d-lg-none py-4 m-0"><%= thisPage.title %></h1>
-
       <div purpose="edit-button-container">
           <a :purpose="thisPage.title !== 'FAQ' ? 'edit-button' : 'faq-edit-button'" :href="'https://github.com/fleetdm/fleet/edit/main/docs/'+thisPage.sectionRelativeRepoPath" target="_blank">
             <i class="fa fa-pencil"></i>Edit page
           </a>
       </div>
 
-      <div class="container-fluid d-flex flex-column flex-lg-row p-0 pt-lg-4 pb-lg-4 m-0">
-        <div purpose="left-sidebar" class="d-none d-lg-flex flex-column text-left pl-0 pr-4 left-sidebar">
-          <ul class="p-0 pb-3 m-0 left-nav">
-            <li v-for="page in findPagesByUrl()" :key="page.title">
-              <span class="font-weight-bold pb-3">{{page.title}}</span>
-              <div purpose="expanded-nav" class="pt-3" >
-                <ul class="p-0 pl-2 mb-3">
-                  <li v-for="subpage in findPagesByUrl(page.url)" :key="subpage.title">
-                    <a :href="subpage.url" :class="subpage.title === thisPage.title ? 'topic active' : 'topic'">
-                      {{subpage.title}}
-                    </a>
-                  </li>
-                </ul>
+      <div purpose="content-and-desktop-sidebars" class="d-flex flex-column flex-lg-row">
+        <div purpose="left-sidebar" class="d-none d-lg-flex flex-column text-left left-sidebar">
+          <div purpose="left-sidebar-links">
+            <div v-for="page in findPagesByUrl()" :key="page.title">
+              <p purpose="section-title">{{page.title}}</p>
+              <div purpose="expanded-nav">
+                <a :href="subpage.url" purpose="subpage-link" :class="subpage.title === thisPage.title ? 'topic active' : 'topic'" v-for="subpage in findPagesByUrl(page.url)" :key="subpage.title">
+                  {{subpage.title}}
+                </a>
               </div>
-            </li>
-          </ul>
-          <a class="pt-4 pb-3" href="/queries">Built-in checks</a>
-          <a class="pb-3" href="/tables">Raw data</a>
-          <a class="pb-3" href="/app-library">App library</a>
-          <a class="pb-3" target="_blank" href="/releases">Release notes</a>
-          <a class="pb-3" href="/docs/contributing" target="_blank">Contributing</a>
-          <a class="pb-3" target="_blank" href="/support">Support</a>
-          <a class="pb-3" href="/contact">Take a tour</a>
+            </div>
+          </div>
+          <a purpose="subpage-link" target="_blank" href="/releases">Release notes</a>
+          <a purpose="subpage-link" href="/docs/contributing" target="_blank">Contributing</a>
+          <a purpose="subpage-link" target="_blank" href="/support">Support</a>
+          <a purpose="subpage-link" href="/contact">Take a tour</a>
           <div class="d-none d-lg-block" purpose="swag-cta" v-if="showSwagForm">
             <a class="d-flex align-items-center justify-content-center" @click="clickSwagRequestCTA()">
               <div class="d-flex flex-column align-items-center">
@@ -169,27 +44,24 @@
           </div>
         </div>
 
-        <div purpose="right-sidebar" class="order-first order-lg-last p-0 pb-2 pb-lg-0 pr-lg-0 right-sidebar" v-if="!thisPage.title.includes('FAQ')">
-
-          <p class="font-weight-bold pb-2 m-0 mb-2" v-if="!_.isEmpty(subtopics)">On this page:</p>
-          <div purpose="subtopics" v-if="!_.isEmpty(subtopics)">
-            <ul class="p-0 m-0">
-              <!-- <li v-for="(subtopic, index) in subtopics" :class="pl-lg-2 pb-3 pb-1g-2 subtopic" :key="index">
-                <a :class="getActiveSubtopicClass(currentLocation, subtopic.url)" :href="subtopic.url">{{subtopic.title}}</a>
-              </li> -->
-              <li v-for="(subtopic, index) in subtopics" class="pl-lg-3 pb-3 pb-lg-2 subtopic" :key="index">
-                <a :href="subtopic.url">{{subtopic.title}}</a>
-              </li>
-              <li class="d-lg-none pl-lg-3 subtopic">
-                <a href="/support">Help and feedback</a>
-              </li>
-            </ul>
+        <div purpose="right-sidebar" class="order-first order-lg-last  right-sidebar" v-if="!thisPage.title.includes('FAQ') && !_.isEmpty(subtopics)">
+          <div class="d-none d-lg-block">
+            <p purpose="subtopics-heading" class="font-weight-bold">On this page:</p>
+            <div purpose="subtopics" v-if="!_.isEmpty(subtopics)">
+              <a purpose="subtopic-link" v-for="(subtopic, index) in subtopics" :href="subtopic.url">{{subtopic.title}}</a>
+            </div>
+          </div>
+          <div class="d-block d-lg-none" >
+            <div purpose="mobile-custom-select" class="d-flex flex-row justify-content-between" @click="clickOpenMobileSubtopicsNav()">
+              <div><p class="mb-0">On this page</p></div>
+              <div><img src="/images/icon-select-arrows-16x16@2x.png" alt="click to open the table of contents"></div>
+            </div>
           </div>
         </div>
 
-        <div purpose="content" id="body-content" class="d-flex flex-column px-lg-5 content" parasails-has-no-page-script>
 
 
+        <div purpose="content" id="body-content" class="d-flex flex-column content" parasails-has-no-page-script>
           <%- partial(
             path.relative(
               path.dirname(__filename),
@@ -202,7 +74,6 @@
               )
             )
           ) %>
-
           <div purpose="docs-start-cta" class="d-flex flex-column flex-sm-row justify-content-between">
             <div purpose="docs-start-cta-image" class="col-sm-6 col-md-5 col-lg-6"></div>
             <div purpose="docs-start-cta-content" class="d-flex flex-column justify-content-center text-center">
@@ -225,19 +96,40 @@
               <%}%>
             </div>
           </div>
-
         </div>
 
       </div>
 
     </div>
 
-    <div purpose="back-to-top-button-container">
-      <div purpose="back-to-top-button" nohightlight @click="clickScrollToTop">
-        <p class="mb-0"><img alt="An arrow pointing up" class="d-inline" src="/images/icon-arrow-up-12x13@2x.png">Back to top</p>
-      </div>
+  </div>
+  </div>
+  <div purpose="back-to-top-button-container">
+    <div purpose="back-to-top-button" nohightlight @click="clickScrollToTop">
+      <p class="mb-0"><img alt="An arrow pointing up" class="d-inline" src="/images/icon-arrow-up-12x13@2x.png">Back to top</p>
     </div>
   </div>
-
+  <div purpose="table-of-contents-modal">
+  <modal v-if="modal === 'table-of-contents'" @close="closeModal()">
+    <div purpose="modal-links">
+      <div v-for="page in findPagesByUrl()" :key="page.title">
+        <p purpose="section-title">{{page.title}}</p>
+        <div purpose="expanded-nav">
+          <a purpose="modal-nav-link" :href="subpage.url" :class="subpage.title === thisPage.title ? 'active' : ''"   v-for="subpage in findPagesByUrl(page.url)" :key="subpage.title">
+            {{subpage.title}}
+          </a>
+        </div>
+      </div>
+    </div>
+  </modal>
+  </div>
+  <div purpose="subtopics-modal">
+    <modal v-if="modal === 'subtopics'" @close="closeModal()">
+      <p class="font-weight-bold pb-2 m-0 mb-2" v-if="!_.isEmpty(subtopics)">On this page:</p>
+      <div purpose="modal-links">
+        <a v-for="subtopic in subtopics" purpose="modal-nav-link"  class="d-block" :href="subtopic.url" @click="closeModal()">{{subtopic.title}}</a>
+      </div>
+    </modal>
+  </div>
 </div>
 <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
diff --git a/website/views/pages/osquery-table-details.ejs b/website/views/pages/osquery-table-details.ejs
index 34b3b72424..5c4344711e 100644
--- a/website/views/pages/osquery-table-details.ejs
+++ b/website/views/pages/osquery-table-details.ejs
@@ -1,93 +1,74 @@
 <div id="osquery-table-details" v-cloak>
-  <div class="d-flex flex-column justify-content-center">
-    <div purpose="search-and-filters"  class="d-flex flex-column justify-content-center">
-      <div purpose="filter-row" style="max-width: 1200px;" class="mx-auto py-4 w-100 d-flex flex-sm-row flex-column justify-content-between">
-        <div class="d-flex">
-          <div purpose="platform-selector" class="d-flex flex-row justify-content-between align-items-center"
-            id="dropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            {{userFriendlyPlatformNames[selectedPlatform]}} <img class="d-flex align-self-end" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
-          </div>
-          <div purpose="platform-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurpose">
-            <div class="dropdown-item d-block"
-              @click="clickFilterByPlatform('all')">All platforms</div>
-              <div class="dropdown-item d-block"
-              @click="clickFilterByPlatform('windows')">Windows</div>
-            <div class="dropdown-item d-block"
-              @click="clickFilterByPlatform('linux')">Linux</div>
-            <div class="dropdown-item d-block"
-              @click="clickFilterByPlatform('darwin')">macOS</div>
-            <div class="dropdown-item d-block"
-              @click="clickFilterByPlatform('chrome')">ChromeOS</div>
-          </div>
+  <div purpose="page-container">
+    <div purpose="page-content">
+      <docs-nav-and-search search-filter="tables" current-section="tables" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
+        <div purpose="page-headline" class="d-flex flex-column">
+          <h2>Tables</h2>
+          <p>Fleet uses osquery tables to query operating system, hardware, and software data. Each table provides specific data for analysis and filtering.</p>
         </div>
-        <div class="d-flex">
-          <div purpose="search" id="docsearch-query" class="d-flex align-items-center">
-            <div purpose="disabled-search" class="d-flex align-items-center">
-              <img style="height: 16px; width: 16px;" class="d-inline mr-2" alt="search" src="/images/icon-search-16x16@2x.png">
-              <input placeholder="Search tables" class="pl-1" >
-            </div>
+        <div purpose="platform-filters" class="d-flex flex-row justify-content-center">
+          <div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">
+            <p class="d-flex align-items-center">
+            <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
+            <span class="d-none d-md-inline">Apple</span>
+            </p>
           </div>
-        </div>
-      </div>
-      <hr>
-      <div purpose="mobile-nav" class="d-flex d-lg-none flex-column">
-        <div class="d-flex flex-row justify-content-between align-items-center" @click="clickToggleTableNav()">
-          <div purpose="table-of-contents-header" class="d-flex flex-row">
-            <h4 style="font-size: 16px; line-height: 24px; font-weight: 700; margin-bottom: 0px;">
-              <img class="d-inline" style="vertical-align:  middle;margin-right: 12px; height: 14px; width: 16px;" src="/images/icon-hamburger-menu-16x14@2x.png" alt="A menu icon">
-                Tables
-              <span class="ml-2" purpose="number-of-tables">{{numberOfTablesDisplayed}}</span>
-            </h4>
+          <div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
+            <p class="d-flex align-items-center">
+              <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
+              <span class="d-none d-md-inline">Linux</span>
+            </p>
           </div>
-          <img style="width: 6px; height: 9px;" class="d-flex d-lg-none justify-self-end"  alt="right chevron" src="/images/chevron-right-6x9@2x.png" v-if="!showTableNav"/>
-          <img style="width: 9px; height: 6px;" class="d-flex d-lg-none justify-self-end"  alt="down chevron" src="/images/chevron-down-9x6@2x.png" v-else/>
-        </div>
-        <div class="d-flex d-lg-none pt-3" v-if="showTableNav">
-          <div purpose="mobile-table-of-contents">
-            <a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url+[selectedPlatform !== 'all' ? '?platformFilter='+encodeURIComponent(selectedPlatform) : '' ]" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
+          <div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
+            <p class="d-flex align-items-center">
+              <img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" class="d-inline">
+              <span class="d-none d-md-inline">Windows</span>
+            </p>
           </div>
-        </div>
-      </div>
-      <hr class="d-lg-none d-flex">
-    </div>
-    <div purpose="content" class="container" style="max-width: 1200px;">
-      <div class="d-flex flex-lg-row flex-column justify-content-between">
-        <div purpose="left-sidebar" class="d-none d-lg-flex flex-column">
-          <div class="d-flex flex-row justify-content-between">
-            <div purpose="table-of-contents-header" class="d-flex flex-row">
-              <h4 style="font-size: 16px; line-height: 24px; font-weight: 700;">
-                Tables<span class="ml-2" purpose="number-of-tables">{{numberOfTablesDisplayed}}</span>
-              </h4>
-            </div>
-          </div>
-          <div style="position: relative;">
-            <div purpose="table-of-contents">
-              <a class="d-block" purpose="table-of-contents-link" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url+[selectedPlatform !== 'all' ? '?platformFilter='+encodeURIComponent(selectedPlatform) : '' ]" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
-            </div>
-            <div purpose="overflow-shadow" class="d-none d-lg-block"></div>
+          <div purpose="platform-filter" :class="[selectedPlatform === 'chrome' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('chrome')">
+            <p class="d-flex align-items-center">
+              <img src="/images/os-chromeos-dark-24x24@2x.png" alt="Chrome" class="d-inline">
+              <span class="d-none d-md-inline">ChromeOS</span>
+            </p>
           </div>
         </div>
 
-        <div purpose="table-container" class="d-flex flex-column pl-xl-5 pl-lg-3 w-100">
-          <div purpose="schema-table">
-            <div purpose="platform-logos" class="d-flex flex-row align-items-center">
-              <img class="mx-2" style="height: 25px" src="/images/os-macos-dark-24x24@2x.png" alt="macOS logo" v-if="_.includes(tableToDisplay.platforms, 'darwin')">
-              <img class="mx-2" style="height: 24px" src="/images/os-windows-dark-24x24@2x.png" alt="Windows logo" v-if="_.includes(tableToDisplay.platforms, 'windows')">
-              <img class="mx-2" style="height: 24px" src="/images/os-linux-dark-24x24@2x.png" alt="Linux logo" v-if="_.includes(tableToDisplay.platforms, 'linux')">
-              <img class="mx-2" style="height: 25px" src="/images/os-chromeos-dark-24x24@2x.png" alt="macOS logo" v-if="_.includes(tableToDisplay.platforms, 'chrome')">
-            </div>
-            <%- partial(path.relative(path.dirname(__filename), path.resolve( sails.config.appPath, path.join(sails.config.builtStaticContent.compiledPagePartialsAppPath, tableToDisplay.htmlId)))) %>
-          </div>
 
-          <div class="justify-self-end">
-              <a :href="tableToDisplay.githubUrl" purpose="edit-button" target="_blank">Edit page<i class="fa fa-pencil"></i></a>
-            <div class="d-block justify-self-end" purpose="slack-cta">
-              <h3 class="pt-0" style="font-size: 24px; line-height: 28px;">Need more help?</h3>
-              <div class="d-sm-flex">
-                <a href="/slack" target="_blank" class="d-flex btn btn-md btn-outline-secondary justify-content-center align-items-center mt-3 mt-sm-0" purpose="next-steps-button">
-                  <img style="height: 24px;" class="pr-3" alt="Slack logo" src="/images/logo-slack-24x24@2x.png"/>
-                  Ask the community on Slack
-                </a>
+
+
+
+      <div class="d-flex flex-column justify-content-center">
+        <div purpose="content" class="container p-0" style="max-width: 1200px;">
+          <div class="d-flex flex-lg-row flex-column justify-content-start">
+            <div purpose="left-sidebar" class="d-none d-lg-flex flex-column">
+              <div style="position: relative;">
+                <div purpose="table-of-contents">
+                  <a class="d-block" purpose="table-of-contents-link" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url+'#'+selectedPlatform" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
+                </div>
+                <div purpose="overflow-shadow" class="d-none d-lg-block"></div>
+              </div>
+            </div>
+            <div purpose="mobile-custom-select" class="d-flex d-lg-none flex-row justify-content-between" @click="clickOpenTablesNav()">
+              <div><p class="mb-0"><%= tableToDisplay.title %></p></div>
+              <div><img src="/images/icon-select-arrows-16x16@2x.png" alt="click to open the table of contents"></div>
+            </div>
+
+            <div purpose="table-container" class="d-flex flex-column">
+              <div purpose="schema-table">
+                <%- partial(path.relative(path.dirname(__filename), path.resolve( sails.config.appPath, path.join(sails.config.builtStaticContent.compiledPagePartialsAppPath, tableToDisplay.htmlId)))) %>
+              </div>
+
+              <div class="justify-self-end">
+                  <a :href="tableToDisplay.githubUrl" purpose="edit-button" target="_blank">Edit page<i class="fa fa-pencil"></i></a>
+                <div class="d-block justify-self-end" purpose="slack-cta">
+                  <h3 class="pt-0" style="font-size: 24px; line-height: 28px;">Need more help?</h3>
+                  <div class="d-sm-flex">
+                    <a href="/slack" target="_blank" class="d-flex btn btn-md btn-outline-secondary justify-content-center align-items-center mt-3 mt-sm-0" purpose="next-steps-button">
+                      <img style="height: 24px;" class="pr-3" alt="Slack logo" src="/images/logo-slack-24x24@2x.png"/>
+                      Ask the community on Slack
+                    </a>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -95,5 +76,12 @@
       </div>
     </div>
   </div>
+  <div purpose="table-of-contents-modal" >
+    <modal v-if="modal === 'table-of-contents'" @close="closeModal()">
+      <div purpose="modal-table-of-contents">
+        <a class="d-block" purpose="modal-table-of-contents-link" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url+'#'+selectedPlatform" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
+      </div>
+    </modal>
+  </div>
 </div>
 <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
diff --git a/website/views/pages/policy-details.ejs b/website/views/pages/policy-details.ejs
index 464ec360d7..4d89bd69f0 100644
--- a/website/views/pages/policy-details.ejs
+++ b/website/views/pages/policy-details.ejs
@@ -1,30 +1,13 @@
 <div id="policy-details" v-cloak>
   <div purpose="page-container">
     <div purpose="page-content">
-      <div purpose="breadcrumbs-and-search" class="d-flex flex-md-row flex-column justify-content-between align-items-md-center align-items-start">
-        <div purpose="breadcrumbs" class="d-flex flex-row align-items-start">
-          <div>
-            <a purpose="breadcrumbs-category" class="text-nowrap" href="/policies">Policies</a>/
-          </div>
-          <div purpose="breadcrumbs-title">
-            <span><%- policy.name %></span>
-          </div>
+      <docs-nav-and-search search-filter="policies" current-section="policies" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
+      <div purpose="breadcrumbs" class="d-flex flex-row align-items-start">
+        <div>
+          <a purpose="breadcrumbs-category" class="text-nowrap" href="/policies">Policies</a>/
         </div>
-        <div purpose="search" id="docsearch-query" class="d-flex">
-          <div purpose="disabled-search" class="d-flex w-100">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <span class="input-group-text border-0 bg-transparent pl-3" >
-                  <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
-                </span>
-              </div>
-              <div class="form-control border-0 ">
-              <input class="docsearch-input pr-1"
-                placeholder="Search" aria-label="Search the handbook"
-                />
-              </div>
-            </div>
-          </div>
+        <div purpose="breadcrumbs-title">
+          <span><%- policy.name %></span>
         </div>
       </div>
       <div purpose="policy-details-and-sidebar" class="d-flex flex-lg-row flex-column">
diff --git a/website/views/pages/policy-library.ejs b/website/views/pages/policy-library.ejs
index 958c6b6fc3..46f1d66760 100644
--- a/website/views/pages/policy-library.ejs
+++ b/website/views/pages/policy-library.ejs
@@ -2,28 +2,13 @@
 
   <div purpose="page-container">
     <div purpose="page-content">
+      <docs-nav-and-search search-filter="policies" current-section="policies" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
       <div purpose="search-and-headline" class="d-flex flex-md-row flex-column justify-content-between align-items-md-center align-items-start">
         <div purpose="page-headline" class="d-flex flex-column">
           <h2>Policies</h2>
           <p>A collection of policies, OS settings, and scripts for macOS, Windows, and Linux.</p>
           <p>Contributions welcome <a target="_blank" href="https://github.com/fleetdm/fleet/blob/main/docs/01-Using-Fleet/standard-query-library/standard-query-library.yml">over on GitHub.</a></p>
         </div>
-        <div purpose="policy-search" id="docsearch-query" class="d-flex">
-          <div purpose="disabled-search" class="d-flex">
-            <div class="input-group d-flex flex-nowrap">
-              <div class="input-group-prepend">
-                <span class="input-group-text border-0 bg-transparent" >
-                  <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
-                </span>
-              </div>
-              <div class="form-control border-0 ">
-              <input class="docsearch-input pr-1"
-                placeholder="Search" aria-label="Search"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
       <div purpose="platform-filters" class="d-flex flex-row justify-content-center">
         <div purpose="platform-filter" :class="[selectedPlatform === 'macos' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('macos')">
diff --git a/website/views/pages/query-detail.ejs b/website/views/pages/query-detail.ejs
index 921e4584d2..2d70e8bdea 100644
--- a/website/views/pages/query-detail.ejs
+++ b/website/views/pages/query-detail.ejs
@@ -1,30 +1,13 @@
 <div id="query-detail" v-cloak>
   <div purpose="page-container">
     <div purpose="page-content">
-      <div purpose="breadcrumbs-and-search" class="d-flex flex-md-row flex-column justify-content-between align-items-md-center align-items-start">
-        <div purpose="breadcrumbs" class="d-flex flex-row align-items-start">
-          <div>
-            <a purpose="breadcrumbs-category" class="text-nowrap" href="/queries">Queries</a>/
-          </div>
-          <div purpose="breadcrumbs-title">
-            <span><%- query.name %></span>
-          </div>
+      <docs-nav-and-search search-filter="queries" current-section="queries" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
+      <div purpose="breadcrumbs" class="d-flex flex-row align-items-start">
+        <div>
+          <a purpose="breadcrumbs-category" class="text-nowrap" href="/queries">Queries</a>/
         </div>
-        <div purpose="search" id="docsearch-query" class="d-flex">
-          <div purpose="disabled-search" class="d-flex w-100">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <span class="input-group-text border-0 bg-transparent pl-3" >
-                  <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
-                </span>
-              </div>
-              <div class="form-control border-0 ">
-              <input class="docsearch-input pr-1"
-                placeholder="Search" aria-label="Search the handbook"
-                />
-              </div>
-            </div>
-          </div>
+        <div purpose="breadcrumbs-title">
+          <span><%- query.name %></span>
         </div>
       </div>
       <div purpose="query-details-and-sidebar" class="d-flex flex-lg-row flex-column">
diff --git a/website/views/pages/query-library.ejs b/website/views/pages/query-library.ejs
index e1c2c3c6a9..8b29c6467d 100644
--- a/website/views/pages/query-library.ejs
+++ b/website/views/pages/query-library.ejs
@@ -2,27 +2,12 @@
 
   <div purpose="page-container">
     <div purpose="page-content">
+      <docs-nav-and-search search-filter="queries" current-section="queries" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
       <div purpose="search-and-headline" class="d-flex flex-md-row flex-column justify-content-between align-items-md-center align-items-start">
         <div purpose="page-headline" class="d-flex flex-column">
           <h2>Queries</h2>
           <p>A collection of optional queries you can run anytime. Contributions welcome <a target="_blank" href="https://github.com/fleetdm/fleet/edit/main/docs/queries.yml">over on GitHub.</a></p>
         </div>
-        <div purpose="policy-search" id="docsearch-query" class="d-flex">
-          <div purpose="disabled-search" class="d-flex">
-            <div class="input-group d-flex flex-nowrap">
-              <div class="input-group-prepend">
-                <span class="input-group-text border-0 bg-transparent" >
-                  <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
-                </span>
-              </div>
-              <div class="form-control border-0 ">
-              <input class="docsearch-input pr-1"
-                placeholder="Search" aria-label="Search"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
       <div purpose="platform-filters" class="d-flex flex-row justify-content-center">
         <div purpose="platform-filter" :class="[selectedPlatform === 'macos' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('macos')">
diff --git a/website/views/pages/vital-details.ejs b/website/views/pages/vital-details.ejs
index 85e2b79532..3dc512bd47 100644
--- a/website/views/pages/vital-details.ejs
+++ b/website/views/pages/vital-details.ejs
@@ -1,27 +1,12 @@
 <div id="vital-details" v-cloak>
   <div purpose="page-container">
     <div purpose="page-content">
+      <docs-nav-and-search search-filter="vitals" current-section="vitals" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
       <div purpose="search-and-headline" class="d-flex flex-md-row flex-column justify-content-between align-items-md-center align-items-start">
         <div purpose="page-headline" class="d-flex flex-column">
           <h2>Vitals</h2>
           <p>Fleet’s built-in queries for collecting and storing important device information.</p>
         </div>
-        <div purpose="vitals-search" id="docsearch-query" class="d-flex">
-          <div purpose="disabled-search" class="d-flex">
-            <div class="input-group d-flex flex-nowrap">
-              <div class="input-group-prepend">
-                <span class="input-group-text border-0 bg-transparent" >
-                  <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
-                </span>
-              </div>
-              <div class="form-control border-0 ">
-              <input class="docsearch-input pr-1"
-                placeholder="Search" aria-label="Search"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
       <div purpose="platform-filters" class="d-flex flex-row justify-content-center">
         <div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">