diff --git a/src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/SearchForm/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/SearchForm/index.tsx
new file mode 100644
index 00000000..b78efc90
--- /dev/null
+++ b/src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/SearchForm/index.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react'
+import Promise from 'promise-polyfill'
+import { loadResource } from '@dvcorg/gatsby-theme-iterative/src/utils/front/resources'
+
+import * as styles from '@dvcorg/gatsby-theme-iterative/src/components/Documentation/Layout/SearchForm/styles.module.css'
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  interface Window {
+    docsearch?: (opts: Record<string, unknown>) => void
+  }
+}
+
+const SearchForm: React.FC = props => {
+  const [searchAvailable, setSearchAvailable] = useState<boolean>(false)
+  useEffect(() => {
+    if (window) {
+      if (!window.docsearch) {
+        Promise.all([
+          loadResource(
+            'https://cdn.jsdelivr.net/npm/docsearch.js@2.6.2/dist/cdn/docsearch.min.css'
+          ),
+          loadResource(
+            'https://cdn.jsdelivr.net/npm/docsearch.js@2.6.2/dist/cdn/docsearch.min.js'
+          )
+        ]).then(() => {
+          if (window.docsearch) {
+            window.docsearch({
+              appId: 'MY83GIY4K1',
+              apiKey: '3167487c02cc2d86a6ef55e1aaf1839a',
+              indexName: 'mlemai',
+              inputSelector: '#doc-search',
+              debug: false // Set to `true` if you want to inspect the dropdown
+            })
+            setSearchAvailable(true)
+          }
+        })
+      } else {
+        window.docsearch({
+          appId: 'MY83GIY4K1',
+          apiKey: '3167487c02cc2d86a6ef55e1aaf1839a',
+          indexName: 'mlemai',
+          inputSelector: '#doc-search',
+          debug: false // Set to `true` if you want to inspect the dropdown
+        })
+        setSearchAvailable(true)
+      }
+    }
+  }, [])
+
+  return (
+    <div className={styles.searchArea}>
+      <div className={styles.container}>
+        <input
+          className={styles.input}
+          type="text"
+          id="doc-search"
+          placeholder="Search docs"
+          disabled={!searchAvailable}
+          {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default SearchForm
diff --git a/src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/index.tsx
deleted file mode 100644
index 3ff449df..00000000
--- a/src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { PropsWithChildren, Reducer, useEffect, useReducer } from 'react'
-import cn from 'classnames'
-import { SkipNavContent } from '@reach/skip-nav'
-
-import LayoutWidthContainer from '@dvcorg/gatsby-theme-iterative/src/components/LayoutWidthContainer'
-import HamburgerIcon from '@dvcorg/gatsby-theme-iterative/src/components/HamburgerIcon'
-import SidebarMenu from '@dvcorg/gatsby-theme-iterative/src/components/Documentation/Layout/SidebarMenu'
-import { matchMedia } from '@dvcorg/gatsby-theme-iterative/src/utils/front/breakpoints'
-import { focusElementWithHotkey } from '@dvcorg/gatsby-theme-iterative/src/utils/front/focusElementWithHotkey'
-
-import * as styles from '@dvcorg/gatsby-theme-iterative/src/components/Documentation/Layout/styles.module.css'
-import { useWindowSize } from 'react-use'
-
-const toggleReducer: Reducer<boolean, void> = state => !state
-
-const Layout: React.FC<PropsWithChildren<{ currentPath: string }>> = ({
-  children,
-  currentPath
-}) => {
-  const [isMenuOpen, toggleMenu] = useReducer(toggleReducer, false)
-
-  const windowSize = useWindowSize()
-
-  useEffect(() => {
-    if (matchMedia('--xs-scr')) {
-      return
-    }
-    const closeEventListener = focusElementWithHotkey('#doc-search', '/')
-    return closeEventListener
-  }, [windowSize])
-
-  return (
-    <LayoutWidthContainer className={styles.container} wide>
-      {/* eslint-disable jsx-a11y/no-static-element-interactions */}
-      {/* eslint-disable jsx-a11y/click-events-have-key-events */}
-      <div
-        className={cn(styles.backdrop, isMenuOpen && styles.opened)}
-        onClick={toggleMenu}
-      />
-      {/* eslint-enable jsx-a11y/no-static-element-interactions */}
-      {/* eslint-enable jsx-a11y/click-events-have-key-events */}
-
-      <button
-        className={cn(styles.sideToggle, isMenuOpen && styles.opened)}
-        onClick={toggleMenu}
-      >
-        <HamburgerIcon />
-      </button>
-
-      <div className={cn(styles.side, isMenuOpen && styles.opened)}>
-        <SidebarMenu
-          currentPath={currentPath}
-          onClick={(isLeafItemClicked: boolean): void => {
-            if (matchMedia('--xs-scr') && isLeafItemClicked) {
-              toggleMenu()
-            }
-          }}
-        />
-      </div>
-      <div className={styles.content}>
-        <SkipNavContent id="main-content" />
-        {children}
-      </div>
-    </LayoutWidthContainer>
-  )
-}
-
-export default Layout