diff --git a/help/_includes/search.html b/help/_includes/search.html
deleted file mode 100644
index 7b024ba8ec33..000000000000
--- a/help/_includes/search.html
+++ /dev/null
@@ -1,363 +0,0 @@
-<div id="search-container">
-  <!-- Search Input styled as button -->
-  <input type="text" id="search-input-box" placeholder="Search..." />
-
-  <!-- Search Modal -->
-  <div id="search-modal" style="display:none;">
-    <div id="modal-content">
-      <div class="search-icon-wrapper">
-        <span class="search-icon">🔍</span>
-        <input type="text" id="search-input" placeholder="Go to..." />
-      </div>
-      <!-- Hidden Search Button -->
-      <button id="search-submit" style="display:none;">Search</button>
-
-      <!-- Search results container with tabindex to make it focusable -->
-      <div id="search-results" tabindex="0" style="display:none;"></div>
-
-      <!-- Footer with shortcut info -->
-      <div id="search-footer" style="text-align: center; margin-top: 10px; font-size: 14px; color: #586069;">
-        ⇵ Select, ↩ Go
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Modal and Search Styling -->
-<style>
-  /* Style for search input box (replaces button) */
-  #search-input-box {
-    padding: 8px 16px;
-    font-size: 16px;
-    cursor: pointer;
-    border: 1px solid #eaecef;
-    border-radius: 6px;
-    width: 100%;
-    box-sizing: border-box;
-    margin-bottom: 20px;
-  }
-
-  /* Modal background */
-  #search-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.7);
-    z-index: 1000;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-  }
-
-  /* Modal content */
-  #modal-content {
-    top: 20%;
-    background: white;
-    padding: 20px;
-    width: 60%;
-    max-width: 600px;
-    position: relative;
-    border-radius: 6px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-  }
-
-  /* Search input with magnifying glass */
-  .search-icon-wrapper {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 8px;
-    border: 1px solid #eaecef;
-    border-radius: 6px;
-    box-sizing: border-box;
-  }
-
-  .search-icon {
-    font-size: 18px;
-    margin-right: 8px;
-  }
-
-  /* Updated input style */
-  #search-input {
-    width: 100%;
-    border: none;
-    outline: none;
-    font-size: 20px;
-  }
-
-  /* Search results */
-  #search-results {
-    margin-top: 20px;
-    max-height: 300px;
-    overflow-y: auto;
-    border-top: 1px solid #eaecef;
-    padding-top: 10px;
-    outline: none; /* Disable the strong outline */
-  }
-
-  .search-result {
-    margin-bottom: 15px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #eaecef;
-  }
-
-  .search-result-title {
-    font-weight: bold;
-    margin-bottom: 5px;
-    color: #0366d6;
-    text-decoration: none;
-  }
-
-  .search-result-title:hover {
-    text-decoration: underline;
-  }
-
-  .search-result-context {
-    font-size: 14px;
-    color: #586069;
-  }
-
-  /* Highlighted search result */
-  .highlight {
-    background-color: #eaecef;
-  }
-
-  /* Softer focus style for search results */
-  #search-results:focus {
-    border: 2px solid #ddd; /* Softer border on focus */
-    outline: none;
-  }
-
-  /* Soft yellow highlight for selected section */
-  .highlight-section {
-    background-color: #fffbcc;
-    transition: background-color 0.3s ease;
-  }
-</style>
-
-<!-- FlexSearch CDN -->
-<script src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.31/dist/flexsearch.bundle.js"></script>
-
-<!-- JavaScript for modal and search -->
-<script>
-  // Keep track of the search results
-  let g_searchResultsArray = [];
-  let g_currentSelectionIndex = -1;
-  let g_highlightedSection = null;
-
-  // Declare the index variable globally so it can be reused
-  let g_index = null;
-
-  // Look up some commonly used elements once
-  const g_searchInputBox = document.getElementById('search-input-box');
-  const g_searchModal = document.getElementById('search-modal');
-  const g_searchResults = document.getElementById('search-results');
-  const g_searchInput = document.getElementById('search-input');
-
-  // Show and initialize the search modal
-  function showSearchModal() {
-    g_searchModal.style.display = 'flex';
-    if (g_searchResultsArray.length > 0) {
-      g_searchResults.style.display = 'block';
-      g_searchResults.focus(); // Focus on search results if they exist
-    } else {
-      g_searchInput.focus();
-    }
-  }
-
-  // Open modal when search input is clicked
-  g_searchInputBox.addEventListener('click', showSearchModal);
-
-  // Open modal when Cmd+K is pressed
-  document.addEventListener('keydown', function(event) {
-    if (event.metaKey && event.key === 'k') {
-      event.preventDefault();
-      showSearchModal();
-    }
-  });
-
-  // Close modal when pressing "Escape"
-  document.addEventListener('keydown', function(event) {
-    if (event.key === 'Escape' && g_searchModal.style.display === 'flex') {
-      g_searchModal.style.display = 'none';
-    }
-  });
-
-  // Close modal when clicking outside of modal content
-  window.addEventListener('click', function(event) {
-    if (event.target == g_searchModal) {
-      g_searchModal.style.display = 'none';
-    }
-  });
-
-  // Handle keyboard navigation (arrow keys and enter)
-  g_searchResults.addEventListener('keydown', function(event) {
-    // If the modal is being shown and has active search results, capture keydown
-    if (g_searchModal.style.display === 'flex' && g_searchResultsArray.length > 0) {
-      if (event.key === 'ArrowDown') {
-        event.preventDefault();
-        selectNextResult();
-      } else if (event.key === 'ArrowUp') {
-        event.preventDefault();
-        selectPreviousResult();
-      } else if (event.key === 'Enter' && g_currentSelectionIndex >= 0) {
-        event.preventDefault();
-        navigateToSelectedResult();
-      } else if (!['Tab', 'Shift'].includes(event.key)) {
-        g_searchInput.focus(); // Focus back on input if typing occurs
-      }
-    }
-  });
-
-  function selectNextResult() {
-    if (g_currentSelectionIndex < g_searchResultsArray.length - 1) {
-      g_currentSelectionIndex++;
-      updateSelectedResult();
-    }
-  }
-
-  function selectPreviousResult() {
-    if (g_currentSelectionIndex > 0) {
-      g_currentSelectionIndex--;
-      updateSelectedResult();
-    }
-  }
-
-  function updateSelectedResult() {
-    g_searchResultsArray.forEach((result, index) => {
-      if (index === g_currentSelectionIndex) {
-        result.classList.add('highlight');
-        result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      } else {
-        result.classList.remove('highlight');
-      }
-    });
-  }
-
-  function navigateToSelectedResult() {
-    const selectedResult = g_searchResultsArray[g_currentSelectionIndex];
-    const link = selectedResult.querySelector('a');
-    if (link) {
-      link.click();
-    }
-  }
-
-  // Execute search when pressing "Enter" in the input field
-  g_searchInput.addEventListener('keydown', function(event) {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      g_searchSubmit.click();
-    }
-  });
-
-  // Perform search when search button is clicked
-  const g_searchSubmit = document.getElementById('search-submit');
-
-  // Handle submitting the search query
-  g_searchSubmit.addEventListener('click', async function() {
-    const query = g_searchInput.value.trim().toLowerCase();
-    g_searchResults.innerHTML = '';
-    g_currentSelectionIndex = -1;
-
-    if (query.length === 0) {
-      g_searchResults.style.display = 'none';
-      return;
-    }
-
-    // Load the JSON search index file, if not already defined
-    if (g_index === null) {
-      console.log('Loading search index from:', '/searchIndex.json');
-      const response = await fetch('/searchIndex.json');
-      const indexData = await response.json();
-      g_index = new FlexSearch.Document({
-        document: {
-          id: 'id',
-          index: ['content'], // Index on the content field
-          store: ['title', 'url', 'content'], // Store title, URL, and content
-        }
-      });
-
-      // Import the index
-      for (const [key, data] of Object.entries(indexData)) {
-        await g_index.import(key, data);
-      }
-    } else {
-      console.log('Reusing existing search index');
-    }
-
-    // Perform search
-    const results = await g_index.search({
-      query,
-      field: 'content'
-    });
-
-    if (results.length > 0) {
-      g_searchResultsArray = [];
-      results.forEach(result => {
-        result.result.forEach(docId => {
-          const doc = g_index.store[docId];
-          if (doc && doc.content) {
-            const searchTermIndex = doc.content.toLowerCase().indexOf(query);
-            const contextBefore = doc.content.substring(Math.max(0, searchTermIndex - 30), searchTermIndex);
-            const contextAfter = doc.content.substring(searchTermIndex + query.length, Math.min(doc.content.length, searchTermIndex + query.length + 30));
-            const searchResultHtml = `
-              <div class="search-result">
-                <a href="${doc.url}" class="search-result-title" onclick="scrollToTOC('${doc.url}')">${doc.title}</a>
-                <div class="search-result-context">...${contextBefore}<strong>${query}</strong>${contextAfter}...</div>
-              </div>
-            `;
-            const resultElement = document.createElement('div');
-            resultElement.innerHTML = searchResultHtml;
-            g_searchResults.appendChild(resultElement);
-            g_searchResultsArray.push(resultElement);
-
-            // Automatically select the first result
-            if (g_searchResultsArray.length === 1) {
-              g_currentSelectionIndex = 0;
-              updateSelectedResult();
-            }
-          }
-        });
-      });
-      g_searchResults.style.display = 'block';
-      g_searchResults.focus();  // Focus on search results whenever there are results
-    } else {
-      g_searchResults.style.display = 'none';
-    }
-  });
-
-  // Trigger the TOC link click to use TocBot's smooth scrolling behavior
-  function scrollToTOC(url) {
-    const elementId = url.split('#')[1];
-    const tocLink = document.querySelector(`.toc-sidebar a[href="#${elementId}"]`);
-
-    if (tocLink) {
-      tocLink.click(); // Simulate a click on the TOC link for smooth scroll
-      highlightSelectedSection(elementId); // Highlight the section in yellow
-      closeModalAfterClick();
-    }
-  }
-
-  // Highlight the selected section
-  function highlightSelectedSection(sectionId) {
-    // Remove the previous highlight, if any
-    if (g_highlightedSection) {
-      g_highlightedSection.classList.remove('highlight-section');
-    }
-
-    // Highlight the new section
-    const sectionElement = document.getElementById(sectionId);
-    if (sectionElement) {
-      sectionElement.classList.add('highlight-section');
-      g_highlightedSection = sectionElement;
-    }
-  }
-
-  // Close modal after clicking a search result
-  function closeModalAfterClick() {
-    g_searchModal.style.display = 'none';
-  }
-</script>
-
diff --git a/help/_layouts/default.html b/help/_layouts/default.html
index c3981f17296f..906dacd9f2b4 100644
--- a/help/_layouts/default.html
+++ b/help/_layouts/default.html
@@ -5,247 +5,67 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ page.title }}</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.27.4/tocbot.css">
-    <style>
-        body {
-            margin: 0;
-            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-            background-color: #f9fafb;
-            color: #333;
-        }
-
-        /* Header styling */
-        .header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            background-color: #fff;
-            padding: 15px 20px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            position: fixed;
-            top: 0;
-            width: 100%;
-        }
-
-        .logo {
-            font-size: 24px;
-            font-weight: bold;
-            color: #0366d6;
-        }
-
-        .logo a {
-            text-decoration: none;
-            color: inherit;
-        }
-
-        .nav-links {
-            display: flex;
-            gap: 15px;
-            padding-right: 20px;
-        }
-
-        .nav-links a {
-            text-decoration: none;
-            color: #0366d6;
-            font-weight: 500;
-            padding: 10px 15px;
-            border-radius: 6px;
-            transition: background-color 0.3s;
-        }
-
-        .nav-links a:hover {
-            background-color: #f1f8ff;
-        }
-
-        .nav-links a.active {
-            background-color: #eaf5ff;
-            color: #0366d6;
-            font-weight: bold;
-        }
-
-        /* Sidebar navigation for TOC */
-        .toc-sidebar {
-            width: 250px;
-            position: fixed;
-            top: 80px;
-            bottom: 0;
-            left: 0;
-            background-color: #fff;
-            padding: 20px;
-            overflow-y: auto;
-            border-right: 1px solid #eaecef;
-            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-        }
-
-        .toc-link::before {
-            display: none;
-        }
-
-        .toc-sidebar ul {
-            list-style: none;
-            padding-left: 0;
-            line-height: 1.0;
-            font-size: 15px;
-        }
-
-        .toc-sidebar li {
-            margin-left: 0;
-            padding-left: 0;
-        }
-
-        .js-toc > ul > li > a {
-            font-weight: bold;
-            font-size: 18px;
-
-        }
-
-        .js-toc > ul > li > ul > li {
-            margin-top: 25px;
-        }
-
-        .js-toc > ul > li > ul > li > a {
-            font-weight: bold;
-        }
-
-        .js-toc > ul > li > ul > li > ul > li > ul > li {
-            padding-left: 10px;
-        }
-
-        .toc-sidebar a {
-            word-wrap: break-word;
-            display: block;
-            padding: 1px 10px;
-            margin-bottom: 5px;
-            text-decoration: none;
-            color: #0366d6;
-            border-radius: 6px;
-        }
-
-        .toc-sidebar a:hover {
-            background-color: #f1f8ff;
-            text-decoration: none;
-        }
-
-        .toc-sidebar .is-active-link {
-            background-color: #eaf5ff;
-            color: #0366d6;
-            border-radius: 6px;
-        }
-
-        /* Main content area */
-        main {
-            margin-left: 300px;
-            padding: 20px;
-            margin-top: 80px;
-            flex-grow: 1;
-            max-width: 900px;
-        }
-
-        main h1 {
-            font-size: 36px;
-            font-weight: bold;
-            margin-bottom: 20px;
-        }
-
-        main h2 {
-            font-size: 28px;
-            margin-bottom: 16px;
-        }
-
-        main h3 {
-            font-size: 24px;
-            margin-bottom: 12px;
-        }
-
-        main h4 {
-            font-size: 20px;
-            margin-bottom: 12px;
-        }
-
-        main p {
-            font-size: 16px;
-            line-height: 1.6;
-            margin-bottom: 20px;
-        }
-
-        .is-active-link {
-            font-weight: normal;
-        }
-
-        .scroll-spacer {
-            height: 300px;
-        }
-
-        /* Footer */
-        footer {
-            margin-left: 300px;
-            color: #0366d6;
-            background-color: #f9fafb;
-            padding: 40px 20px;
-            font-size: 14px;
-            max-width: 900px;
-        }
-
-        footer h3 {
-            color: #0366d6;
-        }
-
-        footer ul {
-            list-style: none;
-            padding: 0;
-        }
-
-        footer ul li a {
-            color: #0366d6;
-            text-decoration: none;
-        }
-
-        footer ul li a:hover {
-            text-decoration: underline;
-        }
-
-        footer .social-icons a img {
-            width: 20px;
-            margin-right: 10px;
-        }
-
-        .footer-container {
-            display: flex;
-            justify-content: center;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .footer-column {
-            flex: 1;
-            max-width: 300px; /* Set a max-width for each column */
-            padding: 0 20px;  /* Add padding for some space between the columns */
-        }
-    </style>
+    <link rel="stylesheet" href="default.css">
 </head>
 <body>
 
     <!-- Header -->
     <header class="header">
         <div class="logo">
+            <div class="hamburger" id="hamburger">
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+            </div>
+
             <a href="/">Expensify</a>
+            /
+            <!-- Dropdown for product selection -->
+            <div class="dropdown">
+                <span>{{ page.title | remove_first: 'Expensify ' }}</span>
+                <div class="dropdown-content">
+                    <a href="/expense" class="{% if page.title == 'Expensify Expense' %}active{% endif %}">Expense</a>
+                    <a href="/card" class="{% if page.title == 'Expensify Cards' %}active{% endif %}">Card</a>
+                    <a href="/travel" class="{% if page.title == 'Expensify Travel' %}active{% endif %}">Travel</a>
+                    <a href="/chat" class="{% if page.title == 'Expensify Chat' %}active{% endif %}">Chat</a>
+                    <a href="/invoice" class="{% if page.title == 'Expensify Invoice' %}active{% endif %}">Invoice</a>
+                    <a href="/billpay" class="{% if page.title == 'Expensify Billpay' %}active{% endif %}">Billpay</a>
+                </div>
+            </div>
+        </div>
+        <div id="search-container">
+            <!-- Search Input styled as button -->
+            <span id="search-icon" style="cursor: pointer; font-size: 24px;">🔍</span>
+
+            <!-- Search Modal -->
+            <div id="search-modal" style="display:none;">
+                <div id="modal-content">
+                    <div class="search-icon-wrapper">
+                        <span class="search-icon">🔍</span>
+                        <input type="text" id="search-input" placeholder="Go to..." />
+                    </div>
+                    <!-- Hidden Search Button -->
+                    <button id="search-submit" style="display:none;">Search</button>
+
+                    <!-- Search results container with tabindex to make it focusable -->
+                    <div id="search-results" tabindex="0" style="display:none;"></div>
+
+                    <!-- Footer with shortcut info -->
+                    <div id="search-footer" style="text-align: center; margin-top: 10px; font-size: 14px; color: #586069;">
+                        ⇵ Select, ↩ Go
+                    </div>
+                </div>
+            </div>
         </div>
-        <nav class="nav-links">
-            <a href="/expense" class="{% if page.title == 'Expensify Expense' %}active{% endif %}">Expense</a>
-            <a href="/card" class="{% if page.title == 'Expensify Cards' %}active{% endif %}">Card</a>
-            <a href="/travel" class="{% if page.title == 'Expensify Travel' %}active{% endif %}">Travel</a>
-            <a href="/chat" class="{% if page.title == 'Expensify Chat' %}active{% endif %}">Chat</a>
-            <a href="/invoice" class="{% if page.title == 'Expensify Invoice' %}active{% endif %}">Invoice</a>
-            <a href="/billpay" class="{% if page.title == 'Expensify Billpay' %}active{% endif %}">Billpay</a>
-        </nav>
     </header>
 
     <!-- TOC Sidebar -->
-    <nav class="toc-sidebar">
-        {% include search.html %}
+    <nav class="toc-sidebar" id="toc-sidebar">
         <div class="js-toc"></div>
     </nav>
 
     <!-- Main Content -->
+    <h1>{{ page.title }}</h1>
     <main class="js-toc-content">
         {{ content }}
 
@@ -330,73 +150,8 @@ <h3>Get Started</h3>
     </footer>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.32.1/tocbot.min.js"></script>
-    <script>
-        function updateURLHashOnScroll() {
-            const activeLink = document.querySelector('.toc-sidebar .is-active-link');
-            if (activeLink) {
-                const hash = activeLink.getAttribute('href');
-                if (history.pushState) {
-                    history.pushState(null, null, hash);
-                } else {
-                    window.location.hash = hash;
-                }
-            }
-        }
-
-        function scrollActiveLinkIntoView() {
-            const activeLink = document.querySelector('.toc-sidebar .is-active-link');
-            if (activeLink) {
-                activeLink.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest'
-                });
-            }
-        }
-
-        tocbot.init({
-          tocSelector: '.js-toc',
-          contentSelector: '.js-toc-content',
-          headingSelector: 'h1, h2, h3, h4, h5, h6',
-          collapseDepth: 3,
-          orderedList: false,
-          scrollSmooth: true,
-          scrollToActive: true,
-          enableUrlHashUpdateOnScroll: false,
-          headingsOffset: 80,
-          scrollSmoothOffset: -80,
-          tocScrollingWrapper: document.querySelector('.toc-sidebar'),
-          tocScrollOffset: 80,
-          headingObjectCallback: function(obj, element) {
-            const tocTitle = element.getAttribute('data-toc-title');
-            if (tocTitle) {
-                obj.textContent = tocTitle;
-            }
-            return obj;
-          },
-          onClick: function(e) {
-              setTimeout(scrollActiveLinkIntoView, 300);
-          },
-          scrollEndCallback: function() {
-              updateURLHashOnScroll();
-              scrollActiveLinkIntoView();
-          }
-        });
-
-        function adjustAnchorOnLoad() {
-            if (window.location.hash) {
-                const element = document.querySelector(window.location.hash);
-                if (element) {
-                    window.scrollTo({
-                        top: element.getBoundingClientRect().top + window.pageYOffset - 80,
-                        behavior: 'smooth'
-                    });
-                }
-            }
-        }
-
-        window.addEventListener('load', adjustAnchorOnLoad);
-    </script>
+    <script src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.31/dist/flexsearch.bundle.js"></script>
+    <script src="default.js"></script>
 
 </body>
-</html>
-
+</html>
\ No newline at end of file
diff --git a/help/_layouts/product.html b/help/_layouts/product.html
index cb8b5e882f24..89c2f92b8926 100644
--- a/help/_layouts/product.html
+++ b/help/_layouts/product.html
@@ -2,8 +2,6 @@
 layout: default
 ---
 
-<h1>{{ page.title }}</h1>
-
 <!-- Render the markdown content here -->
 <div class="product-content">
     {{ content }}
diff --git a/help/default.css b/help/default.css
new file mode 100644
index 000000000000..c71cbafcab75
--- /dev/null
+++ b/help/default.css
@@ -0,0 +1,373 @@
+body {
+    margin: 0;
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+    background-color: #f9fafb;
+    color: #333;
+}
+
+/* Header styling */
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+    padding: 15px 0px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    font-weight: bold;
+    color: #0366d6;
+    margin-left: 20px;
+}
+
+.logo a {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* Dropdown styling */
+.dropdown {
+    position: relative;
+    display: inline-block;
+    font-size: 24px; /* Match the logo font size */
+    font-weight: normal;
+    text-decoration: underline;
+    color: #0366d6;
+    cursor: pointer;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #fff;
+    min-width: 160px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    padding: 12px 16px;
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.dropdown a {
+    text-decoration: none;
+    color: #0366d6;
+    padding: 8px 0;
+    display: block;
+}
+
+.dropdown a.active {
+    font-weight: bold;
+    background-color: #eaf5ff;
+}
+
+/* Sidebar navigation for TOC */
+.toc-sidebar {
+    width: 250px;
+    position: fixed;
+    top: 60px;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    padding: 20px;
+    overflow-y: auto;
+    border-right: 1px solid #eaecef;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    transform: translateY(0);
+    transition: transform 0.3s ease-in-out;
+    z-index: 999;
+}
+
+.toc-sidebar.open {
+    transform: translateY(0);
+}
+
+.toc-link::before {
+    display: none;
+}
+
+.toc-sidebar ul {
+    list-style: none;
+    padding-left: 0;
+    line-height: 1.0;
+    font-size: 15px;
+}
+
+.toc-sidebar li {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.js-toc > a {
+    font-weight: bold;
+    font-size: 18px;
+
+}
+
+.js-toc > ul > li {
+    margin-top: 25px;
+}
+
+.js-toc > ul > li > a {
+    font-weight: bold;
+}
+
+.js-toc > ul > li > ul > li > ul > li {
+    padding-left: 10px;
+}
+
+.toc-sidebar a {
+    word-wrap: break-word;
+    display: block;
+    padding: 1px 10px;
+    margin-bottom: 5px;
+    text-decoration: none;
+    color: #0366d6;
+    border-radius: 6px;
+}
+
+.toc-sidebar a:hover {
+    background-color: #f1f8ff;
+    text-decoration: none;
+}
+
+.toc-sidebar .is-active-link {
+    background-color: #eaf5ff;
+    color: #0366d6;
+    border-radius: 6px;
+}
+
+/* Main content area */
+main {
+    margin-left: 300px;
+    padding: 20px;
+    flex-grow: 1;
+    max-width: 900px;
+}
+
+main h1 {
+    display: none;
+}
+
+main h2 {
+    font-size: 28px;
+    margin-bottom: 16px;
+}
+
+main h3 {
+    font-size: 24px;
+    margin-bottom: 12px;
+}
+
+main h4 {
+    font-size: 20px;
+    margin-bottom: 12px;
+}
+
+main p {
+    font-size: 16px;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+.is-active-link {
+    font-weight: normal;
+}
+
+.scroll-spacer {
+    height: 300px;
+}
+
+/* Footer */
+footer {
+    margin-left: 300px;
+    color: #0366d6;
+    background-color: #f9fafb;
+    padding: 40px 20px;
+    font-size: 14px;
+    max-width: 900px;
+}
+
+footer h3 {
+    color: #0366d6;
+}
+
+footer ul {
+    list-style: none;
+    padding: 0;
+}
+
+footer ul li a {
+    color: #0366d6;
+    text-decoration: none;
+}
+
+footer ul li a:hover {
+    text-decoration: underline;
+}
+
+footer .social-icons a img {
+    width: 20px;
+    margin-right: 10px;
+}
+
+.footer-container {
+    display: flex;
+    justify-content: center;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.footer-column {
+    flex: 1;
+    max-width: 300px; /* Set a max-width for each column */
+    padding: 0 20px;  /* Add padding for some space between the columns */
+}
+
+/* Mobile Styles */
+.hamburger {
+    display: none;
+    cursor: pointer;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 24px;
+    height: 18px;
+}
+
+.bar {
+    height: 3px;
+    width: 100%;
+    background-color: #0366d6;
+    border-radius: 10px;
+}
+
+@media (max-width: 768px) {
+
+    .hamburger {
+        display: flex;
+        margin-right: 20px;
+    }
+
+    .toc-sidebar {
+        transform: translateY(-100%);
+        width: 100%;
+    }
+
+    main {
+        margin-left: 0;
+        padding: 20px;
+        max-width: 100%;
+    }
+
+    footer {
+        display: none;
+    }
+}
+
+/* Modal background */
+#search-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+/* Modal content */
+#modal-content {
+    top: 20%;
+    background: white;
+    padding: 20px;
+    width: 60%;
+    max-width: 600px;
+    position: relative;
+    border-radius: 6px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+/* Search input with magnifying glass */
+.search-icon-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #eaecef;
+    border-radius: 6px;
+    box-sizing: border-box;
+}
+
+.search-icon {
+    font-size: 18px;
+    margin-right: 8px;
+}
+
+/* Updated input style */
+#search-input {
+    width: 100%;
+    border: none;
+    outline: none;
+    font-size: 20px;
+}
+
+/* Search results */
+#search-results {
+    margin-top: 20px;
+    max-height: 300px;
+    overflow-y: auto;
+    border-top: 1px solid #eaecef;
+    padding-top: 10px;
+    outline: none; /* Disable the strong outline */
+}
+
+.search-result {
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eaecef;
+}
+
+.search-result-title {
+    font-weight: bold;
+    margin-bottom: 5px;
+    color: #0366d6;
+    text-decoration: none;
+}
+
+.search-result-title:hover {
+    text-decoration: underline;
+}
+
+.search-result-context {
+    font-size: 14px;
+    color: #586069;
+}
+
+/* Highlighted search result */
+.highlight {
+    background-color: #eaecef;
+}
+
+/* Softer focus style for search results */
+#search-results:focus {
+    border: 2px solid #ddd; /* Softer border on focus */
+    outline: none;
+}
+
+/* Soft yellow highlight for selected section */
+.highlight-section {
+    background-color: #fffbcc;
+    transition: background-color 0.3s ease;
+}
\ No newline at end of file
diff --git a/help/default.js b/help/default.js
new file mode 100644
index 000000000000..1c27ade6c9e1
--- /dev/null
+++ b/help/default.js
@@ -0,0 +1,267 @@
+function updateURLHashOnScroll() {
+    const activeLink = document.querySelector('.toc-sidebar .is-active-link');
+    if (!activeLink) {
+        return;
+    }
+    const hash = activeLink.getAttribute('href');
+    if (window.history.pushState) {
+        window.history.pushState(null, null, hash);
+    } else {
+        window.location.hash = hash;
+    }
+}
+
+function scrollActiveLinkIntoView() {
+    const activeLink = document.querySelector('.toc-sidebar .is-active-link');
+    if (activeLink) {
+        activeLink.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+        });
+    }
+}
+
+// Assuming tocbot is globally defined
+window.tocbot.init({
+    tocSelector: '.js-toc',
+    contentSelector: '.js-toc-content',
+    headingSelector: 'h1, h2, h3, h4, h5, h6',
+    collapseDepth: 4,
+    orderedList: false,
+    scrollSmooth: true,
+    scrollToActive: true,
+    enableUrlHashUpdateOnScroll: false,
+    headingsOffset: 80,
+    scrollSmoothOffset: -80,
+    tocScrollingWrapper: document.querySelector('.toc-sidebar'),
+    tocScrollOffset: 80,
+    headingObjectCallback(obj, element) {
+        const tocTitle = element.getAttribute('data-toc-title');
+        if (tocTitle) {
+            const newObj = {...obj};
+            newObj.textContent = tocTitle;
+            return newObj;
+        }
+        return obj;
+    },
+    onClick() {
+        setTimeout(scrollActiveLinkIntoView, 300);
+        document.getElementById('toc-sidebar').classList.remove('open');
+    },
+    scrollEndCallback() {
+        updateURLHashOnScroll();
+        scrollActiveLinkIntoView();
+    },
+});
+
+function adjustAnchorOnLoad() {
+    if (!window.location.hash) {
+        return;
+    }
+    const element = document.querySelector(window.location.hash);
+    if (element) {
+        window.scrollTo({
+            top: element.getBoundingClientRect().top + window.pageYOffset - 80,
+            behavior: 'smooth',
+        });
+    }
+}
+
+window.addEventListener('load', adjustAnchorOnLoad);
+
+// Toggle sidebar on hamburger click
+document.getElementById('hamburger').addEventListener('click', function () {
+    const sidebar = document.getElementById('toc-sidebar');
+    sidebar.classList.toggle('open');
+});
+
+// Keep track of the search results
+let g_searchResultsArray = [];
+let g_currentSelectionIndex = -1;
+
+// Declare the index variable globally so it can be reused
+let g_index = null;
+
+// Look up some commonly used elements once
+const g_searchIcon = document.getElementById('search-icon');
+const g_searchModal = document.getElementById('search-modal');
+const g_searchResults = document.getElementById('search-results');
+const g_searchInput = document.getElementById('search-input');
+
+// Show and initialize the search modal
+function showSearchModal() {
+    g_searchModal.style.display = 'flex';
+    if (g_searchResultsArray.length > 0) {
+        g_searchResults.style.display = 'block';
+        g_searchResults.focus();
+    } else {
+        g_searchInput.focus();
+    }
+}
+
+// Open modal when search icon is clicked
+g_searchIcon.addEventListener('click', showSearchModal);
+
+// Open modal when Cmd+K is pressed
+document.addEventListener('keydown', function (event) {
+    if (!(event.metaKey && event.key === 'k')) {
+        return;
+    }
+    event.preventDefault();
+    showSearchModal();
+});
+
+// Close modal when pressing "Escape"
+document.addEventListener('keydown', function (event) {
+    if (!(event.key === 'Escape' && g_searchModal.style.display === 'flex')) {
+        return;
+    }
+    g_searchModal.style.display = 'none';
+});
+
+// Close modal when clicking outside of modal content
+window.addEventListener('click', function (event) {
+    if (!(event.target === g_searchModal)) {
+        return;
+    }
+    g_searchModal.style.display = 'none';
+});
+
+// Handle keyboard navigation (arrow keys and enter)
+g_searchResults.addEventListener('keydown', function (event) {
+    if (g_searchModal.style.display !== 'flex' || g_searchResultsArray.length === 0) {
+        return;
+    }
+    if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        selectNextResult();
+    } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        selectPreviousResult();
+    } else if (event.key === 'Enter' && g_currentSelectionIndex >= 0) {
+        event.preventDefault();
+        navigateToSelectedResult();
+    } else if (!['Tab', 'Shift'].includes(event.key)) {
+        g_searchInput.focus();
+    }
+});
+
+function selectNextResult() {
+    if (g_currentSelectionIndex >= g_searchResultsArray.length - 1) {
+        return;
+    }
+    g_currentSelectionIndex++;
+    updateSelectedResult();
+}
+
+function selectPreviousResult() {
+    if (g_currentSelectionIndex <= 0) {
+        return;
+    }
+    g_currentSelectionIndex--;
+    updateSelectedResult();
+}
+
+function updateSelectedResult() {
+    g_searchResultsArray.forEach((result, index) => {
+        if (index === g_currentSelectionIndex) {
+            result.classList.add('highlight');
+            result.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+        } else {
+            result.classList.remove('highlight');
+        }
+    });
+}
+
+function navigateToSelectedResult() {
+    const selectedResult = g_searchResultsArray[g_currentSelectionIndex];
+    const link = selectedResult.querySelector('a');
+    if (link) {
+        link.click();
+    }
+}
+
+// Execute search when pressing "Enter" in the input field
+g_searchInput.addEventListener('keydown', function (event) {
+    if (!(event.key === 'Enter')) {
+        return;
+    }
+    event.preventDefault();
+    document.getElementById('search-submit').click();
+});
+
+// Perform search when search button is clicked
+// Assuming search-submit is defined
+document.getElementById('search-submit').addEventListener('click', function () {
+    const query = g_searchInput.value.trim().toLowerCase();
+    g_searchResults.innerHTML = '';
+    g_currentSelectionIndex = -1;
+
+    if (query.length === 0) {
+        g_searchResults.style.display = 'none';
+        return;
+    }
+
+    if (g_index === null) {
+        // Assuming the fetch works correctly without console.log
+        fetch('/searchIndex.json')
+            .then((response) => response.json())
+            .then((indexData) => {
+                g_index = new window.FlexSearch.Document({
+                    document: {
+                        id: 'id',
+                        index: ['content'],
+                        store: ['title', 'url', 'content'],
+                    },
+                });
+
+                for (const [key, data] of Object.entries(indexData)) {
+                    g_index.import(key, data);
+                }
+
+                performSearch(query);
+            });
+    } else {
+        performSearch(query);
+    }
+});
+
+function performSearch(query) {
+    const results = g_index.search({
+        query,
+        field: 'content',
+    });
+
+    if (results && results.length > 0) {
+        g_searchResultsArray = [];
+        results.forEach((result) => {
+            result.result.forEach((docId) => {
+                const doc = g_index.store[docId];
+                if (doc && doc.content) {
+                    const searchTermIndex = doc.content.toLowerCase().indexOf(query);
+                    const contextBefore = doc.content.substring(Math.max(0, searchTermIndex - 30), searchTermIndex);
+                    const contextAfter = doc.content.substring(searchTermIndex + query.length, Math.min(doc.content.length, searchTermIndex + query.length + 30));
+                    const searchResultHtml = `
+                        <div class="search-result">
+                            <a href="${doc.url}" class="search-result-title">${doc.title}</a>
+                            <div class="search-result-context">...${contextBefore}<strong>${query}</strong>${contextAfter}...</div>
+                        </div>
+                    `;
+                    const resultElement = document.createElement('div');
+                    resultElement.innerHTML = searchResultHtml;
+                    g_searchResults.appendChild(resultElement);
+                    g_searchResultsArray.push(resultElement);
+
+                    if (g_searchResultsArray.length === 1) {
+                        g_currentSelectionIndex = 0;
+                        updateSelectedResult();
+                    }
+                }
+            });
+        });
+        g_searchResults.style.display = 'block';
+        g_searchResults.focus();
+    } else {
+        g_searchResults.style.display = 'none';
+    }
+}
diff --git a/help/index.md b/help/index.md
index 45366fecae11..e5c79ece08af 100644
--- a/help/index.md
+++ b/help/index.md
@@ -1,11 +1,11 @@
 ---
 layout: product
-title: Expensify
+title: Help
 ---
 ## Introduction
 The Expensify Superapp combines 6 world-class business, finance, and collaboration products into one app. It works identically on desktop and mobile, with colleagues and customers, and for personal use.
 
-### Main uses
+### [Main uses] What does Expensify do?
 Expensify can do a lot. You should check us out whenever you need to:
 * **Track and manage expenses** - Whether reimbursing employee receipts, deducting personal expenses, or splitting a bill, Expensify Expense is for you.
 * **Issue corporate cards** - Skip reimbursement and capture receipts in real-time by issuing the Expensify Card to yourself and employees.
@@ -16,7 +16,7 @@ Expensify can do a lot. You should check us out whenever you need to:
 
 If you send, receive, or spend money – or talk to anyone about anything – Expensify is for you.
 
-### Core users
+### [Core users] Who should use Expensify?
 Expensify offers something for everyone. Common users include:
 * **Individuals** - Millions track personal expenses to maximize deductions, stay within budgets, or see where money goes.
 * **Friends** - Split bills with friends for rent, parties, or drinks.
@@ -27,7 +27,7 @@ Expensify offers something for everyone. Common users include:
 
 If you're online doing anything, Expensify can probably help.
 
-### Key advantages
+### [Key advantages] Why should you use Expensify?
 You've got options, but use Expensify because it is:
 * **Simple enough for individuals** - A simple tool without overwhelming functionality or language.
 * **Powerful enough for enterprises** - It scales up to reveal sophisticated features only when needed. Used by public companies, multinationals, and more.
@@ -502,4 +502,4 @@ Members using paid functionality on multiple workspaces in a month aren't billed
 The billing page is currently under development and will be available soon. Stay tuned for updates on how to access and use the new billing features.
 
 #### [Recovery Codes Usage] How do I use my recovery codes if I lose access to my authenticator app?
-Your recovery codes work the same way as your authenticator codes. Just enter a recovery code as you would the authenticator code.
\ No newline at end of file
+Your recovery codes work the same way as your authenticator codes. Just enter a recovery code as you would the authenticator code.