diff --git a/apps/web/src/components/Header.tsx b/apps/web/src/components/Header.tsx
index aaedbb3c7..de4056060 100644
--- a/apps/web/src/components/Header.tsx
+++ b/apps/web/src/components/Header.tsx
@@ -61,7 +61,6 @@ export const Header = forwardRef(function Header({ className }, ref) {
   const bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8])
 
   const pathname = usePathname()
-  // const isDocs = pathname?.startsWith('/docs')
   const isAuth = pathname?.startsWith('/auth')
 
   useEffect(() => {
@@ -91,10 +90,9 @@ export const Header = forwardRef(function Header({ className }, ref) {
         className={clsx(
           'absolute inset-x-0 top-full h-px transition',
           (isInsideMobileNavigation || !mobileNavIsOpen) &&
-          'bg-zinc-900/7.5 dark:bg-white/7.5'
+            'bg-zinc-900/7.5 dark:bg-white/7.5'
         )}
       />
-
       {/* Desktop logo */}
       <div className="relative top-1 hidden items-center justify-start lg:flex gap-4">
         <Link href="/" aria-label="Home">
@@ -113,7 +111,6 @@ export const Header = forwardRef(function Header({ className }, ref) {
           />
         </div>
       </div>
-      {/* {isDocs && <Search />} */}
 
       {/* Mobile logo + burger menu */}
       <div className="flex items-center gap-5 lg:hidden">
@@ -134,7 +131,6 @@ export const Header = forwardRef(function Header({ className }, ref) {
           />
         </div>
       </div>
-
       {!isAuth && (
         <div className="flex items-center gap-4">
           <nav className="hidden md:block">
diff --git a/apps/web/src/components/Layout.tsx b/apps/web/src/components/Layout.tsx
index 694fbea60..2dc36ec8c 100644
--- a/apps/web/src/components/Layout.tsx
+++ b/apps/web/src/components/Layout.tsx
@@ -7,6 +7,7 @@ import { usePathname } from 'next/navigation'
 import { Footer } from '@/components/Footer'
 import { DocsNavigation, SdkRefNavigation } from '@/components/Navigation'
 import { Section, SectionProvider } from '@/components/SectionProvider'
+import { Search } from './Search'
 
 export function Layout({
   children,
@@ -52,7 +53,8 @@ export function Layout({
                 lg:pb-4
               "
               >
-                <div className="hidden lg:block lg:mt-4">
+                <div className="hidden space-y-4 lg:block lg:mt-4">
+                  <Search />
                   {isApiRef ? <SdkRefNavigation /> : <DocsNavigation />}
                 </div>
               </div>
diff --git a/apps/web/src/components/MobileBurgerMenu.tsx b/apps/web/src/components/MobileBurgerMenu.tsx
index d23b958a5..960791ecc 100644
--- a/apps/web/src/components/MobileBurgerMenu.tsx
+++ b/apps/web/src/components/MobileBurgerMenu.tsx
@@ -15,6 +15,7 @@ import { create } from 'zustand'
 
 import { Header } from '@/components/Header'
 import { DocsNavigation, SdkRefNavigation } from '@/components/Navigation'
+import { Search } from './Search'
 
 function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
@@ -58,6 +59,7 @@ function MobileNavigationDialog({
   const initialPathname = useRef(pathname).current
   const initialSearchParams = useRef(searchParams).current
   const isApiRef = pathname?.startsWith('/docs/sdk-reference')
+  const isDocs = pathname?.startsWith('/docs')
 
   useEffect(() => {
     if (pathname !== initialPathname || searchParams !== initialSearchParams) {
@@ -123,8 +125,9 @@ function MobileNavigationDialog({
           >
             <motion.div
               layoutScroll
-              className="fixed bottom-0 left-0 top-14 w-full overflow-y-auto overflow-x-hidden bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 ring-zinc-900/7.5 dark:bg-zinc-900 dark:ring-zinc-800 min-[416px]:max-w-sm sm:px-6 sm:pb-10"
+              className="fixed bottom-0 left-0 top-14 space-y-4 w-full overflow-y-auto overflow-x-hidden bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 ring-zinc-900/7.5 dark:bg-zinc-900 dark:ring-zinc-800 min-[416px]:max-w-sm sm:px-6 sm:pb-10"
             >
+              {isDocs && <Search />}
               {isApiRef ? <SdkRefNavigation /> : <DocsNavigation />}
             </motion.div>
           </Transition.Child>
diff --git a/apps/web/src/components/Search.tsx b/apps/web/src/components/Search.tsx
index 166df1783..8ef416862 100644
--- a/apps/web/src/components/Search.tsx
+++ b/apps/web/src/components/Search.tsx
@@ -1,517 +1,511 @@
-// 'use client'
-
-// import { forwardRef, Fragment, Suspense, useCallback, useEffect, useId, useRef, useState } from 'react'
-// import Highlighter from 'react-highlight-words'
-// import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-// import {
-//   type AutocompleteApi,
-//   type AutocompleteCollection,
-//   type AutocompleteState,
-//   createAutocomplete,
-// } from '@algolia/autocomplete-core'
-// import clsx from 'clsx'
-
-// import { routes } from '@/components/Navigation/routes'
-// import { type Result } from '@/mdx/search.mjs'
-// import { DialogAnimated } from '@/components/DialogAnimated'
-
-// type EmptyObject = Record<string, never>
-
-// type Autocomplete = AutocompleteApi<
-//   Result,
-//   React.SyntheticEvent,
-//   React.MouseEvent,
-//   React.KeyboardEvent
-// >
-
-// function useAutocomplete({ close }: { close: () => void }) {
-//   const id = useId()
-//   const router = useRouter()
-//   const [autocompleteState, setAutocompleteState] = useState<
-//     AutocompleteState<Result> | EmptyObject
-//   >({})
-
-//   function navigate({ itemUrl }: { itemUrl?: string }) {
-//     if (!itemUrl) {
-//       return
-//     }
-
-//     itemUrl = itemUrl.replace('(docs)/', '')
-//     router.push(itemUrl)
-
-//     if (
-//       itemUrl ===
-//       window.location.pathname + window.location.search + window.location.hash
-//     ) {
-//       close()
-//     }
-//   }
-
-//   const [autocomplete] = useState<Autocomplete>(() =>
-//     createAutocomplete<
-//       Result,
-//       React.SyntheticEvent,
-//       React.MouseEvent,
-//       React.KeyboardEvent
-//     >({
-//       id,
-//       placeholder: 'Search in docs...',
-//       defaultActiveItemId: 0,
-//       onStateChange({ state }) {
-//         setAutocompleteState(state)
-//       },
-//       shouldPanelOpen({ state }) {
-//         return state.query !== ''
-//       },
-//       navigator: {
-//         navigate,
-//       },
-//       getSources({ query }) {
-//         return import('@/mdx/search.mjs').then(({ search }) => {
-//           return [
-//             {
-//               sourceId: 'documentation',
-//               getItems() {
-//                 return search(query, { limit: 5 })
-//               },
-//               getItemUrl({ item }) {
-//                 return item.url
-//               },
-//               onSelect: navigate,
-//             },
-//           ]
-//         })
-//       },
-//     }),
-//   )
-
-//   return { autocomplete, autocompleteState }
-// }
-
-// function SearchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-//   return (
-//     <svg
-//       viewBox="0 0 20 20"
-//       fill="none"
-//       aria-hidden="true"
-//       {...props}
-//     >
-//       <path
-//         strokeLinecap="round"
-//         strokeLinejoin="round"
-//         d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
-//       />
-//     </svg>
-//   )
-// }
-
-// function NoResultsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-//   return (
-//     <svg
-//       viewBox="0 0 20 20"
-//       fill="none"
-//       aria-hidden="true"
-//       {...props}
-//     >
-//       <path
-//         strokeLinecap="round"
-//         strokeLinejoin="round"
-//         d="M12.01 12a4.237 4.237 0 0 0 1.24-3c0-.62-.132-1.207-.37-1.738M12.01 12A4.237 4.237 0 0 1 9 13.25c-.635 0-1.237-.14-1.777-.388M12.01 12l3.24 3.25m-3.715-9.661a4.25 4.25 0 0 0-5.975 5.908M4.5 15.5l11-11"
-//       />
-//     </svg>
-//   )
-// }
-
-// function LoadingIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-//   const id = useId()
-
-//   return (
-//     <svg
-//       viewBox="0 0 20 20"
-//       fill="none"
-//       aria-hidden="true"
-//       {...props}
-//     >
-//       <circle
-//         cx="10"
-//         cy="10"
-//         r="5.5"
-//         strokeLinejoin="round"
-//       />
-//       <path
-//         stroke={`url(#${id})`}
-//         strokeLinecap="round"
-//         strokeLinejoin="round"
-//         d="M15.5 10a5.5 5.5 0 1 0-5.5 5.5"
-//       />
-//       <defs>
-//         <linearGradient
-//           id={id}
-//           x1="13"
-//           x2="9.5"
-//           y1="9"
-//           y2="15"
-//           gradientUnits="userSpaceOnUse"
-//         >
-//           <stop stopColor="currentColor" />
-//           <stop
-//             offset="1"
-//             stopColor="currentColor"
-//             stopOpacity="0"
-//           />
-//         </linearGradient>
-//       </defs>
-//     </svg>
-//   )
-// }
-
-// function HighlightQuery({ text, query }: { text: string; query: string }) {
-//   return (
-//     <Highlighter
-//       highlightClassName="underline bg-transparent text-brand-500"
-//       searchWords={[query]}
-//       autoEscape={true}
-//       textToHighlight={text}
-//     />
-//   )
-// }
-
-// function SearchResult({
-//   result,
-//   resultIndex,
-//   autocomplete,
-//   collection,
-//   query,
-// }: {
-//   result: Result
-//   resultIndex: number
-//   autocomplete: Autocomplete
-//   collection: AutocompleteCollection<Result>
-//   query: string
-// }) {
-//   const id = useId()
-
-//   const sectionTitle = routes.find(section =>
-//     section.links.find(link => link.href === result.url.split('#')[0]),
-//   )?.title
-//   const hierarchy = [sectionTitle, result.pageTitle].filter(
-//     (x): x is string => typeof x === 'string',
-//   )
-
-//   return (
-//     <li
-//       className={clsx(
-//         'group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
-//         resultIndex > 0 && 'border-t border-zinc-100 dark:border-zinc-800',
-//       )}
-//       aria-labelledby={`${id}-hierarchy ${id}-title`}
-//       {...autocomplete.getItemProps({
-//         item: result,
-//         source: collection.source,
-//       })}
-//     >
-//       <div
-//         id={`${id}-title`}
-//         aria-hidden="true"
-//         className="text-sm font-medium text-zinc-900 group-aria-selected:text-brand-500 dark:text-white"
-//       >
-//         <HighlightQuery
-//           text={result.title}
-//           query={query}
-//         />
-//       </div>
-//       {hierarchy.length > 0 && (
-//         <div
-//           id={`${id}-hierarchy`}
-//           aria-hidden="true"
-//           className="mt-1 truncate whitespace-nowrap text-2xs text-zinc-500"
-//         >
-//           {hierarchy.map((item, itemIndex, items) => (
-//             <Fragment key={itemIndex}>
-//               <HighlightQuery
-//                 text={item}
-//                 query={query}
-//               />
-//               <span
-//                 className={
-//                   itemIndex === items.length - 1
-//                     ? 'sr-only'
-//                     : 'mx-2 text-zinc-300 dark:text-zinc-700'
-//                 }
-//               >
-//                 /
-//               </span>
-//             </Fragment>
-//           ))}
-//         </div>
-//       )}
-//     </li>
-//   )
-// }
-
-// function SearchResults({
-//   autocomplete,
-//   query,
-//   collection,
-// }: {
-//   autocomplete: Autocomplete
-//   query: string
-//   collection: AutocompleteCollection<Result>
-// }) {
-//   if (collection.items.length === 0) {
-//     return (
-//       <div className="p-6 text-center">
-//         <NoResultsIcon className="mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" />
-//         <p className="mt-2 text-xs text-zinc-700 dark:text-zinc-400">
-//           Nothing found for{' '}
-//           <strong className="break-words font-semibold text-zinc-900 dark:text-white">
-//             &lsquo;{query}&rsquo;
-//           </strong>
-//           . Please try again.
-//         </p>
-//       </div>
-//     )
-//   }
-
-//   return (
-//     <ul {...autocomplete.getListProps()}>
-//       {collection.items.map((result, resultIndex) => (
-//         <SearchResult
-//           key={result.url}
-//           result={result}
-//           resultIndex={resultIndex}
-//           autocomplete={autocomplete}
-//           collection={collection}
-//           query={query}
-//         />
-//       ))}
-//     </ul>
-//   )
-// }
-
-// const SearchInput = forwardRef<
-//   React.ElementRef<'input'>,
-//   {
-//     autocomplete: Autocomplete
-//     autocompleteState: AutocompleteState<Result> | EmptyObject
-//     onClose: () => void
-//   }
-// >(function SearchInput({ autocomplete, autocompleteState, onClose }, inputRef) {
-//   const inputProps = autocomplete.getInputProps({ inputElement: null })
-
-//   return (
-//     <div className="group relative flex h-12">
-//       <SearchIcon className="pointer-events-none absolute left-3 top-0 h-full w-5 stroke-zinc-500" />
-//       <input
-//         ref={inputRef}
-//         className={clsx(
-//           'flex-auto appearance-none bg-transparent pl-10 text-zinc-900 outline-none placeholder:text-zinc-500 focus:w-full focus:flex-none dark:text-white sm:text-sm [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',
-//           autocompleteState.status === 'stalled' ? 'pr-11' : 'pr-4',
-//         )}
-//         {...inputProps}
-//         onKeyDown={event => {
-//           if (
-//             event.key === 'Escape' &&
-//             !autocompleteState.isOpen &&
-//             autocompleteState.query === ''
-//           ) {
-//             // In Safari, closing the dialog with the escape key can sometimes cause the scroll position to jump to the
-//             // bottom of the page. This is a workaround for that until we can figure out a proper fix in Headless UI.
-//             if (document.activeElement instanceof HTMLElement) {
-//               document.activeElement.blur()
-//             }
-
-//             onClose()
-//           } else {
-//             inputProps.onKeyDown(event)
-//           }
-//         }}
-//       />
-//       {autocompleteState.status === 'stalled' && (
-//         <div className="absolute inset-y-0 right-3 flex items-center">
-//           <LoadingIcon
-//             className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-brand-400" />
-//         </div>
-//       )}
-//     </div>
-//   )
-// })
-
-// function SearchDialog({
-//   open,
-//   setOpen,
-//   className,
-// }: {
-//   open: boolean
-//   setOpen: (open: boolean) => void
-//   className?: string
-// }) {
-//   const formRef = useRef<React.ElementRef<'form'>>(null)
-//   const panelRef = useRef<React.ElementRef<'div'>>(null)
-//   const inputRef = useRef<React.ElementRef<typeof SearchInput>>(null)
-//   const { autocomplete, autocompleteState } = useAutocomplete({
-//     close() {
-//       setOpen(false)
-//     },
-//   })
-//   const pathname = usePathname()
-//   const searchParams = useSearchParams()
-
-//   useEffect(() => {
-//     setOpen(false)
-//   }, [pathname, searchParams, setOpen])
-
-//   useEffect(() => {
-//     if (open) {
-//       return
-//     }
-
-//     function onKeyDown(event: KeyboardEvent) {
-//       if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
-//         event.preventDefault()
-//         setOpen(true)
-//       }
-//     }
-
-//     window.addEventListener('keydown', onKeyDown)
-
-//     return () => {
-//       window.removeEventListener('keydown', onKeyDown)
-//     }
-//   }, [open, setOpen])
-
-//   return (
-//     <DialogAnimated
-//       open={open}
-//       setOpen={setOpen}
-//       as={Fragment}
-//       className={className}
-//       afterLeave={() => autocomplete.setQuery('')}
-//       rootProps={autocomplete.getRootProps({})}
-//     >
-//       {/* @ts-ignore */}
-//       <form
-//         ref={formRef}
-//         {...autocomplete.getFormProps({
-//           inputElement: inputRef.current,
-//         })}
-//       >
-//         <SearchInput
-//           ref={inputRef}
-//           // @ts-ignore
-//           autocomplete={autocomplete}
-//           autocompleteState={autocompleteState}
-//           onClose={() => setOpen(false)}
-//         />
-//         {/* @ts-ignore */}
-//         <div
-//           ref={panelRef}
-//           className="border-t border-zinc-200 bg-white empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5"
-//           {...autocomplete.getPanelProps({})}
-//         >
-//           {/* @ts-ignore */}
-//           {autocompleteState.isOpen && (
-//             <SearchResults
-//               autocomplete={autocomplete}
-//               // @ts-ignore
-//               query={autocompleteState.query}
-//               // @ts-ignore
-//               collection={autocompleteState.collections[0]}
-//             />
-//           )}
-//         </div>
-//       </form>
-//     </DialogAnimated>
-//   )
-// }
-
-// function useSearchProps() {
-//   const buttonRef = useRef<React.ElementRef<'button'>>(null)
-//   const [open, setOpen] = useState(false)
-
-//   return {
-//     buttonProps: {
-//       ref: buttonRef,
-//       onClick() {
-//         setOpen(true)
-//       },
-//     },
-//     dialogProps: {
-//       open,
-//       setOpen: useCallback(
-//         (open: boolean) => {
-//           const { width = 0, height = 0 } =
-//             buttonRef.current?.getBoundingClientRect() ?? {}
-//           if (!open || (width !== 0 && height !== 0)) {
-//             setOpen(open)
-//           }
-//         },
-//         [setOpen],
-//       ),
-//     },
-//   }
-// }
-
-// export function Search() {
-//   const [modifierKey, setModifierKey] = useState<string>()
-//   const { buttonProps, dialogProps } = useSearchProps()
-
-//   useEffect(() => {
-//     setModifierKey(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl ')
-//   }, [])
-
-//   return (
-//     <div className="hidden lg:block lg:max-w-md lg:flex-auto">
-//       <button
-//         type="button"
-//         className="hidden h-8 w-full items-center gap-2 whitespace-nowrap rounded-full bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 ui-not-focus-visible:outline-none dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20 lg:flex"
-//         {...buttonProps}
-//       >
-//         <SearchIcon className="h-5 w-5 stroke-current" />
-//         Search in docs...
-//         <kbd className="ml-auto text-2xs text-zinc-400 dark:text-zinc-500">
-//           <kbd className="font-sans">{modifierKey}</kbd>
-//           <kbd className="font-sans">K</kbd>
-//         </kbd>
-//       </button>
-//       <Suspense fallback={null}>
-//         <SearchDialog
-//           className="hidden lg:block"
-//           {...dialogProps}
-//         />
-//       </Suspense>
-//     </div>
-//   )
-// }
-
-// export function MobileSearch() {
-//   const { buttonProps, dialogProps } = useSearchProps()
-
-//   return (
-//     <div className="contents lg:hidden">
-//       <button
-//         type="button"
-//         className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 ui-not-focus-visible:outline-none dark:hover:bg-white/5 lg:hidden"
-//         aria-label="Search in docs..."
-//         {...buttonProps}
-//       >
-//         <SearchIcon className="h-5 w-5 stroke-zinc-900 dark:stroke-white" />
-//       </button>
-//       <Suspense fallback={null}>
-//         <SearchDialog
-//           className="lg:hidden"
-//           {...dialogProps}
-//         />
-//       </Suspense>
-//     </div>
-//   )
-// }
+'use client'
+
+import {
+  forwardRef,
+  Fragment,
+  Suspense,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  useMemo,
+} from 'react'
+import Highlighter from 'react-highlight-words'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import {
+  type AutocompleteApi,
+  type AutocompleteCollection,
+  type AutocompleteState,
+  createAutocomplete,
+} from '@algolia/autocomplete-core'
+import clsx from 'clsx'
+
+/* import { routes } from '@/components/Navigation/routes' */
+import { type Result } from '@/mdx/search.mjs'
+import { DialogAnimated } from '@/components/DialogAnimated'
+import { docRoutes } from './Navigation/routes'
+
+type EmptyObject = Record<string, never>
+
+type Autocomplete = AutocompleteApi<
+  Result,
+  React.SyntheticEvent,
+  React.MouseEvent,
+  React.KeyboardEvent
+>
+
+function useAutocomplete({ close }: { close: () => void }) {
+  const id = useId()
+  const router = useRouter()
+  const [autocompleteState, setAutocompleteState] = useState<
+    AutocompleteState<Result> | EmptyObject
+  >({})
+
+  function navigate({ itemUrl }: { itemUrl?: string }) {
+    if (!itemUrl) {
+      return
+    }
+
+    itemUrl = itemUrl.replace('(docs)/', '')
+    router.push(itemUrl)
+
+    if (
+      itemUrl ===
+      window.location.pathname + window.location.search + window.location.hash
+    ) {
+      close()
+    }
+  }
+
+  const [autocomplete] = useState<Autocomplete>(() =>
+    createAutocomplete<
+      Result,
+      React.SyntheticEvent,
+      React.MouseEvent,
+      React.KeyboardEvent
+    >({
+      id,
+      placeholder: 'Search in docs...',
+      defaultActiveItemId: 0,
+      onStateChange({ state }) {
+        setAutocompleteState(state)
+      },
+      shouldPanelOpen({ state }) {
+        return state.query !== ''
+      },
+      navigator: {
+        navigate,
+      },
+      getSources({ query }) {
+        return import('@/mdx/search.mjs').then(({ search }) => {
+          return [
+            {
+              sourceId: 'documentation',
+              getItems() {
+                return search(query, { limit: 5 })
+              },
+              getItemUrl({ item }) {
+                return item.url
+              },
+              onSelect: navigate,
+            },
+          ]
+        })
+      },
+    })
+  )
+
+  return { autocomplete, autocompleteState }
+}
 
+function SearchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
+      />
+    </svg>
+  )
+}
 
-export function Search() {
-  return undefined
+function NoResultsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12.01 12a4.237 4.237 0 0 0 1.24-3c0-.62-.132-1.207-.37-1.738M12.01 12A4.237 4.237 0 0 1 9 13.25c-.635 0-1.237-.14-1.777-.388M12.01 12l3.24 3.25m-3.715-9.661a4.25 4.25 0 0 0-5.975 5.908M4.5 15.5l11-11"
+      />
+    </svg>
+  )
+}
+
+function LoadingIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  const id = useId()
+
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+      <circle cx="10" cy="10" r="5.5" strokeLinejoin="round" />
+      <path
+        stroke={`url(#${id})`}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.5 10a5.5 5.5 0 1 0-5.5 5.5"
+      />
+      <defs>
+        <linearGradient
+          id={id}
+          x1="13"
+          x2="9.5"
+          y1="9"
+          y2="15"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="currentColor" />
+          <stop offset="1" stopColor="currentColor" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+function HighlightQuery({ text, query }: { text: string; query: string }) {
+  return (
+    <Highlighter
+      highlightClassName="underline bg-transparent text-brand-500"
+      searchWords={[query]}
+      autoEscape={true}
+      textToHighlight={text}
+    />
+  )
+}
+
+function SearchResult({
+  result,
+  resultIndex,
+  autocomplete,
+  collection,
+  query,
+}: {
+  result: Result & { preview?: string }
+  resultIndex: number
+  autocomplete: Autocomplete
+  collection: AutocompleteCollection<Result>
+  query: string
+}) {
+  const id = useId()
+
+  const sectionTitle = docRoutes.find((section) =>
+    section.items.some((item) => {
+      if ('links' in item) {
+        return item.links.some((link) => link.href === result.url.split('#')[0])
+      } else {
+        return item.href === result.url.split('#')[0]
+      }
+    })
+  )?.title
+
+  const hierarchy = [sectionTitle, result.pageTitle].filter(
+    (x): x is string => typeof x === 'string'
+  )
+
+  const contextPreview = useMemo(() => {
+    if (!result.preview || !query) return result.preview
+
+    const previewText = result.preview.toLowerCase()
+    const queryIndex = previewText.indexOf(query.toLowerCase())
+
+    if (queryIndex === -1) return result.preview
+
+    const prefixChars = 10
+    const start = Math.max(0, queryIndex - prefixChars)
+    const prefix = start > 0 ? '...' : ''
+
+    return prefix + result.preview.slice(start)
+  }, [result.preview, query])
+
+  return (
+    <li
+      className={clsx(
+        'group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
+        resultIndex > 0 && 'border-t border-zinc-100 dark:border-zinc-800'
+      )}
+      aria-labelledby={`${id}-hierarchy ${id}-title`}
+      {...autocomplete.getItemProps({
+        item: result,
+        source: collection.source,
+      })}
+    >
+      <div
+        id={`${id}-title`}
+        aria-hidden="true"
+        className="text-sm font-medium text-zinc-900 group-aria-selected:text-brand-500 dark:text-white"
+      >
+        <HighlightQuery text={result.title} query={query} />
+      </div>
+      {hierarchy.length > 0 && (
+        <div
+          id={`${id}-hierarchy`}
+          aria-hidden="true"
+          className="mt-1 truncate whitespace-nowrap text-2xs text-zinc-500"
+        >
+          {hierarchy.map((item, itemIndex, items) => (
+            <Fragment key={itemIndex}>
+              <HighlightQuery text={item} query={query} />
+              <span
+                className={
+                  itemIndex === items.length - 1
+                    ? 'sr-only'
+                    : 'mx-2 text-zinc-300 dark:text-zinc-700'
+                }
+              >
+                /
+              </span>
+            </Fragment>
+          ))}
+        </div>
+      )}
+      {contextPreview && (
+        <div className="mt-2 text-xs text-zinc-600 dark:text-zinc-400 line-clamp-2">
+          <HighlightQuery text={contextPreview} query={query} />
+        </div>
+      )}
+    </li>
+  )
 }
 
-export function MobileSearch() {
-  return undefined
+function SearchResults({
+  autocomplete,
+  query,
+  collection,
+}: {
+  autocomplete: Autocomplete
+  query: string
+  collection: AutocompleteCollection<Result>
+}) {
+  if (collection.items.length === 0) {
+    return (
+      <div className="p-6 text-center">
+        <NoResultsIcon className="mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" />
+        <p className="mt-2 text-xs text-zinc-700 dark:text-zinc-400">
+          Nothing found for{' '}
+          <strong className="break-words font-semibold text-zinc-900 dark:text-white">
+            &lsquo;{query}&rsquo;
+          </strong>
+          . Please try again.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <ul {...autocomplete.getListProps()}>
+      {collection.items.map((result, resultIndex) => (
+        <SearchResult
+          key={result.url}
+          result={result}
+          resultIndex={resultIndex}
+          autocomplete={autocomplete}
+          collection={collection}
+          query={query}
+        />
+      ))}
+    </ul>
+  )
 }
+
+const SearchInput = forwardRef<
+  React.ElementRef<'input'>,
+  {
+    autocomplete: Autocomplete
+    autocompleteState: AutocompleteState<Result> | EmptyObject
+    onClose: () => void
+  }
+>(function SearchInput({ autocomplete, autocompleteState, onClose }, inputRef) {
+  const inputProps = autocomplete.getInputProps({ inputElement: null })
+
+  return (
+    <div className="group relative flex h-12">
+      <SearchIcon className="pointer-events-none absolute left-3 top-0 h-full w-5 stroke-zinc-500" />
+      <input
+        ref={inputRef}
+        className={clsx(
+          'flex-auto appearance-none bg-transparent pl-10 text-zinc-900 outline-none placeholder:text-zinc-500 focus:w-full focus:flex-none dark:text-white sm:text-sm [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',
+          autocompleteState.status === 'stalled' ? 'pr-11' : 'pr-4'
+        )}
+        {...inputProps}
+        onKeyDown={(event) => {
+          if (
+            event.key === 'Escape' &&
+            !autocompleteState.isOpen &&
+            autocompleteState.query === ''
+          ) {
+            // In Safari, closing the dialog with the escape key can sometimes cause the scroll position to jump to the
+            // bottom of the page. This is a workaround for that until we can figure out a proper fix in Headless UI.
+            if (document.activeElement instanceof HTMLElement) {
+              document.activeElement.blur()
+            }
+
+            onClose()
+          } else {
+            inputProps.onKeyDown(event)
+          }
+        }}
+      />
+      {autocompleteState.status === 'stalled' && (
+        <div className="absolute inset-y-0 right-3 flex items-center">
+          <LoadingIcon className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-brand-400" />
+        </div>
+      )}
+    </div>
+  )
+})
+
+function SearchDialog({
+  open,
+  setOpen,
+  className,
+}: {
+  open: boolean
+  setOpen: (open: boolean) => void
+  className?: string
+}) {
+  const formRef = useRef<React.ElementRef<'form'>>(null)
+  const panelRef = useRef<React.ElementRef<'div'>>(null)
+  const inputRef = useRef<React.ElementRef<typeof SearchInput>>(null)
+  const { autocomplete, autocompleteState } = useAutocomplete({
+    close() {
+      setOpen(false)
+    },
+  })
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    setOpen(false)
+  }, [pathname, searchParams, setOpen])
+
+  useEffect(() => {
+    if (open) {
+      return
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        setOpen(true)
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open, setOpen])
+
+  return (
+    <DialogAnimated
+      open={open}
+      setOpen={setOpen}
+      as={Fragment}
+      className={className}
+      afterLeave={() => autocomplete.setQuery('')}
+      rootProps={autocomplete.getRootProps({})}
+    >
+      {/* @ts-ignore */}
+      <form
+        ref={formRef}
+        {...autocomplete.getFormProps({
+          inputElement: inputRef.current,
+        })}
+      >
+        <SearchInput
+          ref={inputRef}
+          // @ts-ignore
+          autocomplete={autocomplete}
+          autocompleteState={autocompleteState}
+          onClose={() => setOpen(false)}
+        />
+        {/* @ts-ignore */}
+        <div
+          ref={panelRef}
+          className="border-t border-zinc-200 bg-white empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5"
+          {...autocomplete.getPanelProps({})}
+        >
+          {/* @ts-ignore */}
+          {autocompleteState.isOpen && (
+            <SearchResults
+              autocomplete={autocomplete}
+              // @ts-ignore
+              query={autocompleteState.query}
+              // @ts-ignore
+              collection={autocompleteState.collections[0]}
+            />
+          )}
+        </div>
+      </form>
+    </DialogAnimated>
+  )
+}
+
+function useSearchProps() {
+  const buttonRef = useRef<React.ElementRef<'button'>>(null)
+  const [open, setOpen] = useState(false)
+
+  return {
+    buttonProps: {
+      ref: buttonRef,
+      onClick() {
+        setOpen(true)
+      },
+    },
+    dialogProps: {
+      open,
+      setOpen: useCallback(
+        (open: boolean) => {
+          const { width = 0, height = 0 } =
+            buttonRef.current?.getBoundingClientRect() ?? {}
+          if (!open || (width !== 0 && height !== 0)) {
+            setOpen(open)
+          }
+        },
+        [setOpen]
+      ),
+    },
+  }
+}
+
+export function Search() {
+  const [modifierKey, setModifierKey] = useState<string>()
+  const { buttonProps, dialogProps } = useSearchProps()
+
+  useEffect(() => {
+    setModifierKey(
+      /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl '
+    )
+  }, [])
+
+  return (
+    <div className="lg:max-w-md lg:flex-auto">
+      <button
+        type="button"
+        className="h-8 w-full items-center gap-2 whitespace-nowrap rounded-full bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 ui-not-focus-visible:outline-none dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20 flex"
+        {...buttonProps}
+      >
+        <SearchIcon className="h-5 w-5 stroke-current" />
+        Search in docs...
+        <kbd className="ml-auto text-2xs text-zinc-400 dark:text-zinc-500">
+          <kbd className="font-sans">{modifierKey}</kbd>
+          <kbd className="font-sans">K</kbd>
+        </kbd>
+      </button>
+      <Suspense fallback={null}>
+        <SearchDialog {...dialogProps} />
+      </Suspense>
+    </div>
+  )
+}
+
+/* export function MobileSearch() {
+  const { buttonProps, dialogProps } = useSearchProps()
+
+  return (
+    <div className="contents lg:hidden">
+      <button
+        type="button"
+        className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 ui-not-focus-visible:outline-none dark:hover:bg-white/5 lg:hidden"
+        aria-label="Search in docs..."
+        {...buttonProps}
+      >
+        <SearchIcon className="h-5 w-5 stroke-zinc-900 dark:stroke-white" />
+      </button>
+      <Suspense fallback={null}>
+        <SearchDialog className="lg:hidden" {...dialogProps} />
+      </Suspense>
+    </div>
+  )
+} */
diff --git a/apps/web/src/mdx/search.mjs b/apps/web/src/mdx/search.mjs
index 35c1144c0..d327b32fd 100644
--- a/apps/web/src/mdx/search.mjs
+++ b/apps/web/src/mdx/search.mjs
@@ -22,16 +22,27 @@ function isObjectExpression(node) {
 }
 
 function excludeObjectExpressions(tree) {
-  return filter(tree, node => !isObjectExpression(node))
+  return filter(tree, (node) => !isObjectExpression(node))
 }
 
 function extractSections() {
   return (tree, { sections }) => {
     slugify.reset()
 
-    visit(tree, node => {
-      if (node.type === 'heading' || node.type === 'paragraph') {
-        let content = toString(excludeObjectExpressions(node))
+    visit(tree, (node) => {
+      if (
+        node.type === 'heading' ||
+        node.type === 'paragraph' ||
+        node.type === 'code'
+      ) {
+        let content
+        if (node.type === 'code') {
+          // Format code blocks with language for better context
+          content = `Code (${node.lang || 'text'}): ${node.value}`
+        } else {
+          content = toString(excludeObjectExpressions(node))
+        }
+
         if (node.type === 'heading' && node.depth <= 2) {
           let hash = node.depth === 1 ? null : slugify(content)
           sections.push([content, hash, []])
@@ -58,7 +69,7 @@ export default function (nextConfig = {}) {
             this.addContextDependency(appDir)
 
             let files = glob.sync('**/*.mdx', { cwd: appDir })
-            let data = files.map(file => {
+            let data = files.map((file) => {
               let url = '/' + file.replace(/(^|\/)page\.mdx$/, '')
               let mdx = fs.readFileSync(path.join(appDir, file), 'utf8')
 
@@ -85,7 +96,7 @@ export default function (nextConfig = {}) {
                 document: {
                   id: 'url',
                   index: 'content',
-                  store: ['title', 'pageTitle'],
+                  store: ['title', 'pageTitle', 'preview'],
                 },
                 context: {
                   resolution: 9,
@@ -97,12 +108,19 @@ export default function (nextConfig = {}) {
               let data = ${JSON.stringify(data)}
 
               for (let { url, sections } of data) {
+                const isReference = url.includes('docs/sdk-reference') || url.includes('docs/api-reference')
+
+                if (isReference) {
+                  continue
+                }
+
                 for (let [title, hash, content] of sections) {
                   sectionIndex.add({
                     url: url + (hash ? ('#' + hash) : ''),
                     title,
                     content: [title, ...content].join('\\n'),
                     pageTitle: hash ? sections[0][0] : undefined,
+                    preview: content.join('\\n'),
                   })
                 }
               }
@@ -119,11 +137,12 @@ export default function (nextConfig = {}) {
                   url: item.id,
                   title: item.doc.title,
                   pageTitle: item.doc.pageTitle,
+                  preview: item.doc.preview,
                 }))
               }
             `
-          })
-        ]
+          }),
+        ],
       })
 
       if (typeof nextConfig.webpack === 'function') {
@@ -131,6 +150,6 @@ export default function (nextConfig = {}) {
       }
 
       return config
-    }
+    },
   })
 }
diff --git a/apps/web/types.d.ts b/apps/web/types.d.ts
index 2a2370723..c08e065f1 100644
--- a/apps/web/types.d.ts
+++ b/apps/web/types.d.ts
@@ -5,6 +5,7 @@ declare module '@/mdx/search.mjs' {
     url: string
     title: string
     pageTitle?: string
+    preview?: string
   }
 
   export function search(query: string, options?: SearchOptions): Array<Result>