diff --git a/package.json b/package.json
index 6c302d84..b11dd5b5 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
 		"@wpengine/atlas-next": "^3.0.0",
 		"date-fns": "^4.1.0",
 		"date-fns-tz": "^3.2.0",
-		"downshift": "^9.0.9",
 		"feed": "^5.1.0",
 		"graphql": "^16.11.0",
 		"http-status-codes": "^2.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6dea7224..f37bf7a2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,9 +62,6 @@ importers:
       date-fns-tz:
         specifier: ^3.2.0
         version: 3.2.0(date-fns@4.1.0)
-      downshift:
-        specifier: ^9.0.9
-        version: 9.0.9(react@19.1.0)
       feed:
         specifier: ^5.1.0
         version: 5.1.0
@@ -1698,9 +1695,6 @@ packages:
     resolution: {integrity: sha512-/UIcLWvwAQyVibgpQDPtfNM3SvqN7G9elAPAV7GM0L53EbNWwWiCsWtK8Fwed/APEbptPHXs5PuW+y8Bq8lFTA==}
     engines: {node: '>= 12.0.0'}
 
-  compute-scroll-into-view@3.1.1:
-    resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
-
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -1847,11 +1841,6 @@ packages:
     resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==}
     engines: {node: '>=10'}
 
-  downshift@9.0.9:
-    resolution: {integrity: sha512-ygOT8blgiz5liDuEFAIaPeU4dDEa+w9p6PHVUisPIjrkF5wfR59a52HpGWAVVMoWnoFO8po2mZSScKZueihS7g==}
-    peerDependencies:
-      react: '>=16.12.0'
-
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -3688,9 +3677,6 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
-  react-is@18.2.0:
-    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
-
   react@19.1.0:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
@@ -6307,8 +6293,6 @@ snapshots:
       normalize-path: 3.0.0
       readable-stream: 3.6.2
 
-  compute-scroll-into-view@3.1.1: {}
-
   concat-map@0.0.1: {}
 
   concat-stream@2.0.0:
@@ -6447,15 +6431,6 @@ snapshots:
 
   dotenv@8.6.0: {}
 
-  downshift@9.0.9(react@19.1.0):
-    dependencies:
-      '@babel/runtime': 7.27.6
-      compute-scroll-into-view: 3.1.1
-      prop-types: 15.8.1
-      react: 19.1.0
-      react-is: 18.2.0
-      tslib: 2.8.1
-
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -8853,8 +8828,6 @@ snapshots:
 
   react-is@16.13.1: {}
 
-  react-is@18.2.0: {}
-
   react@19.1.0: {}
 
   read-package-json-fast@3.0.2:
diff --git a/src/components/header.jsx b/src/components/header.jsx
index 2d7033ce..1dca442b 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -1,8 +1,7 @@
 import { SiDiscord, SiGithub } from "@icons-pack/react-simple-icons";
-import { useState } from "react";
 import FaustLogo from "./faust-logo";
 import PrimaryNav from "./primary-nav";
-import SearchBar from "./search-bar";
+import Search from "./search/search";
 import Link from "@/components/link";
 import { classNames } from "@/utils/strings";
 
@@ -20,15 +19,11 @@ const socialIcons = [
 ];
 
 export default function Header() {
-	const [isMenuOpen, setIsMenuOpen] = useState(false);
-	const [isSearchOpen, setIsSearchOpen] = useState(false);
-
 	return (
 		<div
 			className={classNames(
 				"container-blur-bg top-0 border-b-[1px] border-gray-800 bg-gray-900/80",
-				isMenuOpen ? "fixed z-11 w-full" : "sticky z-10",
-				isSearchOpen ? "z-11" : "z-10",
+				"sticky z-10",
 			)}
 		>
 			<header className="container mx-auto flex items-center justify-between px-4 py-6 sm:px-6 md:max-w-6xl md:px-8">
@@ -48,12 +43,9 @@ export default function Header() {
 					</Link>
 				</div>
 				<div className="flex items-center gap-5 md:w-full md:justify-between">
-					<PrimaryNav
-						onMenuToggle={setIsMenuOpen}
-						setIsMenuOpen={setIsMenuOpen}
-					/>
+					<PrimaryNav />
 					<span className="flex gap-5">
-						<SearchBar setIsSearchOpen={setIsSearchOpen} />
+						<Search />
 						<div className="hidden items-center space-x-4 md:flex">
 							{socialIcons.map(({ url, name, icon: Icon }) => (
 								<Link
diff --git a/src/components/layout.jsx b/src/components/layout.jsx
index ce8a8514..cc9b71e9 100644
--- a/src/components/layout.jsx
+++ b/src/components/layout.jsx
@@ -1,6 +1,7 @@
 import localFont from "next/font/local";
 import Footer from "./footer";
 import Header from "./header";
+import SearchBox from "./search/search-box";
 
 const inter = localFont({
 	src: "../fonts/inter-variable-font.woff2",
@@ -20,6 +21,7 @@ export default function Layout({ children }) {
 			<Header />
 			{children}
 			<Footer />
+			<SearchBox />
 		</div>
 	);
 }
diff --git a/src/components/primary-nav.jsx b/src/components/primary-nav.jsx
index 00e6e5ee..0eac614b 100644
--- a/src/components/primary-nav.jsx
+++ b/src/components/primary-nav.jsx
@@ -31,7 +31,7 @@ const sendMainNavItemSelectEvent = (item) => {
 	});
 };
 
-export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
+export default function PrimaryMenu({ className }) {
 	return (
 		<nav className={classNames("flex items-center space-x-4", className)}>
 			<ul className="hidden flex-row space-x-4 pl-4 md:flex">
@@ -88,10 +88,7 @@ export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
 				</li>
 			</ul>
 			<Popover>
-				<PopoverButton
-					className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden"
-					onClick={() => setIsMenuOpen(!isMenuOpen)}
-				>
+				<PopoverButton className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden">
 					<span className="sr-only hidden group-data-open:block">
 						Open main nav
 					</span>
diff --git a/src/components/search-bar.jsx b/src/components/search-bar.jsx
deleted file mode 100644
index b3408df3..00000000
--- a/src/components/search-bar.jsx
+++ /dev/null
@@ -1,266 +0,0 @@
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { useCombobox } from "downshift";
-import debounce from "lodash.debounce";
-import { useRouter } from "next/router";
-import { useState, useEffect, useRef, useCallback } from "react";
-import { sendSearchEvent, sendSelectItemEvent } from "@/lib/analytics.mjs";
-
-export default function SearchBar({ setIsSearchOpen }) {
-	const [items, setItems] = useState([]);
-	const [inputValue, setInputValue] = useState("");
-	const [isModalOpen, setIsModalOpen] = useState(false);
-	const dialogReference = useRef(null);
-	const router = useRouter();
-
-	const openModal = useCallback(() => {
-		setIsModalOpen(true);
-		setInputValue("");
-		setItems([]);
-		setIsSearchOpen(true);
-	}, [setIsSearchOpen]);
-
-	const closeModal = useCallback(() => {
-		setIsModalOpen(false);
-		setIsSearchOpen(false);
-	}, [setIsSearchOpen]);
-
-	const handleOutsideClick = useCallback(
-		(event) => {
-			const isClickOutsideOfModal = event.target === dialogReference.current;
-			if (isClickOutsideOfModal) {
-				closeModal();
-				setInputValue("");
-				setItems([]);
-			}
-		},
-		[closeModal],
-	);
-
-	const handleKeyDown = useCallback(
-		(event) => {
-			if (event.metaKey && event.key === "k") {
-				event.preventDefault();
-				openModal();
-			}
-
-			if (event.key === "Escape") {
-				closeModal();
-			}
-		},
-		[openModal, closeModal],
-	);
-
-	useEffect(() => {
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [handleKeyDown]);
-
-	const debouncedFetchItems = useRef(
-		debounce(async (value) => {
-			if (!value) {
-				setItems([]);
-				return;
-			}
-
-			try {
-				const response = await fetch(
-					`/api/search?query=${encodeURIComponent(value)}`,
-				);
-
-				if (!response.ok) {
-					console.error(
-						`Search API error: ${response.status} ${response.statusText}`,
-					);
-					setItems([]);
-					return;
-				}
-
-				const data = await response.json();
-
-				if (Array.isArray(data)) {
-					setItems(data);
-				} else {
-					console.error("Search API returned unexpected data:", data);
-					setItems([]);
-				}
-			} catch (error) {
-				console.error("Error fetching search results:", error);
-				setItems([]);
-			} finally {
-				sendSearchEvent(value);
-			}
-		}, 500),
-	).current;
-
-	useEffect(() => {
-		return () => {
-			debouncedFetchItems.cancel();
-		};
-	}, [debouncedFetchItems]);
-
-	const {
-		isOpen,
-		getMenuProps,
-		getInputProps,
-		getItemProps,
-		highlightedIndex,
-		openMenu,
-		closeMenu,
-	} = useCombobox({
-		items,
-		inputValue,
-		defaultHighlightedIndex: 0,
-		onInputValueChange: ({ inputValue: newValue }) => {
-			setInputValue(newValue);
-			debouncedFetchItems(newValue);
-			if (newValue.trim() === "") {
-				closeMenu();
-			} else {
-				openMenu();
-			}
-		},
-		onSelectedItemChange: ({ selectedItem }) => {
-			if (selectedItem) {
-				closeModal();
-				router.push(selectedItem.path);
-			}
-		},
-		itemToString: (item) => (item ? item.title : ""),
-	});
-
-	return (
-		<>
-			<button
-				className="inline-flex items-center rounded-md bg-gray-800 px-2 py-1.5 text-sm font-medium text-gray-400 hover:bg-gray-700"
-				onClick={() => {
-					openModal();
-				}}
-				type="button"
-			>
-				<span className="sr-only md:hidden">Open search</span>
-				<MagnifyingGlassIcon className="h-6 w-6 text-gray-400 md:hidden" />
-				<span className="hidden md:inline">
-					<span className="pl-3">Search docs...</span>
-					<kbd className="ml-8 rounded-sm bg-gray-700 px-2 py-1 font-sans text-gray-400">
-						⌘K
-					</kbd>
-				</span>
-			</button>
-
-			{isModalOpen && (
-				<div
-					className="bg-opacity-50 fixed inset-0 z-50 flex items-start justify-center bg-black backdrop-blur-xs"
-					onClick={handleOutsideClick}
-					onKeyDown={(event) => {
-						if (event.key === "Enter" || event.key === " ") {
-							handleOutsideClick(event);
-						}
-					}}
-					role="button"
-					tabIndex="0"
-					ref={dialogReference}
-				>
-					<div
-						className="relative mt-10 w-full max-w-3xl rounded-lg bg-gray-800 p-6 shadow-lg"
-						role="dialog"
-						tabIndex="-1"
-					>
-						<div
-							role="combobox"
-							aria-expanded={isOpen}
-							aria-haspopup="listbox"
-							aria-controls="search-results"
-						>
-							<div className="relative">
-								<input
-									autoFocus
-									{...getInputProps({
-										placeholder: "What are you searching for?",
-										"aria-label": "Search input",
-										className:
-											"w-full pr-10 p-2 bg-gray-700 text-white placeholder-gray-400 border border-gray-700 rounded-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500",
-									})}
-								/>
-								<button
-									type="button"
-									className="absolute top-1/2 right-2 -translate-y-1/2 transform text-xs text-gray-400 hover:text-white"
-									onClick={closeModal}
-								>
-									Esc
-								</button>
-							</div>
-							<ul
-								{...getMenuProps({
-									id: "search-results",
-								})}
-								className="mt-2 max-h-60 overflow-y-auto"
-							>
-								{isOpen &&
-									items &&
-									items.length > 0 &&
-									items.map((item, index) => (
-										<li
-											key={item.id}
-											{...getItemProps({
-												item,
-												index,
-												onClick: () => {
-													closeModal();
-													sendSelectItemEvent({
-														list: {
-															id: "search_results",
-															name: "Search Results",
-														},
-														item: {
-															item_id: item.path,
-															item_name: item.title,
-															item_category: item.type,
-														},
-													});
-													router.push(item.path);
-												},
-												onKeyDown: (event) => {
-													if (event.key === "Enter") {
-														closeModal();
-														sendSelectItemEvent({
-															list: {
-																id: "search_results",
-																name: "Search Results",
-															},
-															item: {
-																item_id: item.path,
-																item_name: item.title,
-																item_category: item.type,
-															},
-														});
-														router.push(item.path);
-													}
-												},
-											})}
-											role="option"
-											aria-selected={highlightedIndex === index}
-											tabIndex={0}
-											className={`flex w-full cursor-pointer items-center justify-between px-4 py-4 ${
-												highlightedIndex === index
-													? "bg-blue-600 text-white"
-													: "bg-gray-800 text-white"
-											}`}
-										>
-											<span className="text-left">{item.title}</span>
-											<span className="text-right text-sm text-gray-400">
-												{item.type === "mdx_doc" ? "Doc" : "Blog"}
-											</span>
-										</li>
-									))}
-							</ul>
-
-							{isOpen && items.length === 0 && (
-								<div className="mt-2 text-gray-500">No results found.</div>
-							)}
-						</div>
-					</div>
-				</div>
-			)}
-		</>
-	);
-}
diff --git a/src/components/search/search-box.jsx b/src/components/search/search-box.jsx
new file mode 100644
index 00000000..f01dfef2
--- /dev/null
+++ b/src/components/search/search-box.jsx
@@ -0,0 +1,159 @@
+import { XCircleIcon, ArrowPathIcon } from "@heroicons/react/24/outline";
+import debounce from "lodash.debounce";
+import { useState, useEffect, useRef, useCallback } from "react";
+import SearchResults from "./search-results";
+import { useSearch } from "./state";
+import { sendSearchEvent, sendSelectItemEvent } from "@/lib/analytics.mjs";
+
+export default function SearchBar() {
+	const { dialog } = useSearch();
+	const [items, setItems] = useState([]);
+	const [inputValue, setInputValue] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleClose = useCallback(() => {
+		setInputValue("");
+		setItems([]);
+	}, [setInputValue, setItems]);
+
+	const handleKeyDown = useCallback(
+		(event) => {
+			if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+				event.preventDefault();
+				dialog.current?.showModal();
+			}
+		},
+		[dialog],
+	);
+
+	// Add event listener for keydown on the document
+	// This allows the search to be opened with Cmd/Ctrl + K
+	useEffect(() => {
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [handleKeyDown]);
+
+	const debouncedFetchItems = useRef(
+		debounce(async (value) => {
+			if (!value) {
+				setItems([]);
+				return;
+			}
+
+			try {
+				const response = await fetch(
+					`/api/search?query=${encodeURIComponent(value)}`,
+				);
+
+				if (!response.ok) {
+					console.error(
+						`Search API error: ${response.status} ${response.statusText}`,
+					);
+					setItems([]);
+					return;
+				}
+
+				const data = await response.json();
+
+				if (Array.isArray(data)) {
+					setItems(data);
+				} else {
+					console.error("Search API returned unexpected data:", data);
+					setItems([]);
+				}
+			} catch (error) {
+				console.error("Error fetching search results:", error);
+				setItems([]);
+			} finally {
+				setIsLoading(false);
+				sendSearchEvent(value);
+			}
+		}, 300),
+	).current;
+
+	// Cleanup the debounced function on unmount
+	useEffect(() => {
+		return () => {
+			debouncedFetchItems.cancel();
+		};
+	}, [debouncedFetchItems]);
+
+	const handleInputChange = useCallback(
+		(event) => {
+			setIsLoading(true);
+			const value = event.target.value;
+			setInputValue(value);
+			debouncedFetchItems(value);
+		},
+		[debouncedFetchItems, setInputValue],
+	);
+
+	return (
+		<dialog
+			ref={dialog}
+			className="mx-auto mt-[10vh] bg-transparent p-0 backdrop:backdrop-blur-sm md:mt-[20vh]"
+			// eslint-disable-next-line react/no-unknown-property
+			closedby="any"
+			onClose={handleClose}
+		>
+			<section className="relative w-[85dvi] max-w-3xl rounded-lg bg-gray-800 p-4 md:w-[70vw] md:p-6">
+				<div className="relative">
+					<input
+						aria-haspopup="listbox"
+						aria-controls="search-results"
+						value={inputValue}
+						onChange={handleInputChange}
+						autoFocus
+						type="text"
+						placeholder="What are you searching for?"
+						aria-label="Search input"
+						className="w-full rounded-sm border border-gray-700 bg-gray-700 p-2 pr-10 text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-hidden"
+					/>
+					<button
+						type="button"
+						className="absolute top-1/2 right-2 -translate-y-1/2 transform text-xs text-gray-400 hover:text-white"
+						onClick={() => {
+							dialog.current?.close();
+						}}
+						aria-label="Close search"
+					>
+						<XCircleIcon className="h-5 w-5" />
+					</button>
+				</div>
+				{inputValue.length > 0 && (
+					<div
+						id="search-results"
+						aria-live="polite"
+						aria-label="Search results"
+						className="mt-6 transition duration-300 ease-in-out"
+					>
+						{isLoading ? (
+							<div className="flex items-center justify-center">
+								<ArrowPathIcon className="h-5 w-5 animate-spin text-gray-400" />
+								<span className="sr-only">Searching</span>
+							</div>
+						) : (
+							<SearchResults
+								items={items}
+								onSelectItem={(item) => {
+									dialog.current?.close();
+									sendSelectItemEvent({
+										list: {
+											id: "search_results",
+											name: "Search Results",
+										},
+										item: {
+											item_id: item.path,
+											item_name: item.title,
+											item_category: item.type,
+										},
+									});
+								}}
+							/>
+						)}
+					</div>
+				)}
+			</section>
+		</dialog>
+	);
+}
diff --git a/src/components/search/search-results-list.jsx b/src/components/search/search-results-list.jsx
new file mode 100644
index 00000000..f16fb4cc
--- /dev/null
+++ b/src/components/search/search-results-list.jsx
@@ -0,0 +1,34 @@
+import Link from "@/components/link";
+
+export default function SearchResults({ items, onSelectItem }) {
+	return (
+		<ul className="custom-scrollbar max-h-[75dvh] overflow-y-auto md:max-h-96">
+			{items.map((item) => {
+				if (!item?.id || !item?.title || !item?.path) {
+					console.warn("Invalid item in search results:", item);
+					return;
+				}
+
+				return (
+					<li
+						key={item.id}
+						className="border-b border-gray-700 py-6 pr-4 first:pt-4 hover:bg-gray-800"
+					>
+						<Link
+							href={item.path}
+							onClick={() => {
+								onSelectItem(item);
+							}}
+							className="flex w-full cursor-pointer items-center justify-between"
+						>
+							<span className="text-left">{item.title}</span>
+							<span className="text-right text-sm text-gray-400">
+								{item.type === "mdx_doc" ? "Doc" : "Blog"}
+							</span>
+						</Link>
+					</li>
+				);
+			})}
+		</ul>
+	);
+}
diff --git a/src/components/search/search-results.jsx b/src/components/search/search-results.jsx
new file mode 100644
index 00000000..e39b116a
--- /dev/null
+++ b/src/components/search/search-results.jsx
@@ -0,0 +1,13 @@
+import SearchResultsList from "./search-results-list";
+
+export default function SearchResults({ items, onSelectItem }) {
+	return (
+		<>
+			{items.length > 0 ? (
+				<SearchResultsList items={items} onSelectItem={onSelectItem} />
+			) : (
+				<p className="text-white">No results found.</p>
+			)}
+		</>
+	);
+}
diff --git a/src/components/search/search.jsx b/src/components/search/search.jsx
new file mode 100644
index 00000000..4d99d010
--- /dev/null
+++ b/src/components/search/search.jsx
@@ -0,0 +1,28 @@
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { useSearch } from "./state";
+import { isBrowser } from "@/utils/booleans";
+
+export default function Search() {
+	const { dialog } = useSearch();
+
+	// Use `⌘` for Mac and `Ctrl` for other platforms
+	const shortcut =
+		!isBrowser || navigator.platform === "MacIntel" ? "⌘" : "Ctrl";
+	return (
+		<button
+			className="inline-flex items-center rounded-md bg-gray-800 px-2 py-1.5 text-sm font-medium text-gray-400 hover:bg-gray-700"
+			type="button"
+			aria-label={`Search (shortcut: ${shortcut}K)`}
+			onClick={() => dialog.current?.showModal()}
+		>
+			<span className="sr-only md:hidden">Open search</span>
+			<MagnifyingGlassIcon className="h-6 w-6 text-gray-400 md:hidden" />
+			<span className="hidden md:inline">
+				<span className="pl-3">Search docs...</span>
+				<kbd className="ml-8 rounded-sm bg-gray-700 px-2 py-1 font-sans text-gray-400">
+					{shortcut}K
+				</kbd>
+			</span>
+		</button>
+	);
+}
diff --git a/src/components/search/state.jsx b/src/components/search/state.jsx
new file mode 100644
index 00000000..b63a4850
--- /dev/null
+++ b/src/components/search/state.jsx
@@ -0,0 +1,17 @@
+import { createContext, useContext, useMemo, useRef } from "react";
+
+const SearchContext = createContext();
+
+export const useSearch = () => {
+	return useContext(SearchContext);
+};
+
+export const SearchProvider = ({ children }) => {
+	const dialog = useRef(null);
+
+	const value = useMemo(() => ({ dialog }), [dialog]);
+
+	return (
+		<SearchContext.Provider value={value}>{children}</SearchContext.Provider>
+	);
+};
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 27a5774f..6232284a 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -6,6 +6,7 @@ import { GoogleAnalytics } from "@next/third-parties/google";
 import { useRouter } from "next/router";
 import DocsLayout from "@/components/docs-layout";
 import Layout from "@/components/layout";
+import { SearchProvider } from "@/components/search/state";
 import blocks from "@/wp-blocks";
 import "../../faust.config";
 import "./global.css";
@@ -20,18 +21,20 @@ export default function MyApp({ Component, pageProps }) {
 	return (
 		<FaustProvider pageProps={pageProps}>
 			<GoogleAnalytics gaId={GA_TRACKING_ID} />
-			{/*  eslint-disable-next-line unicorn/no-null */}
-			<WordPressBlocksProvider config={{ blocks, theme: null }}>
-				<Layout>
-					{isDocsRoute ? (
-						<DocsLayout {...pageProps}>
+			<SearchProvider>
+				{/*  eslint-disable-next-line unicorn/no-null */}
+				<WordPressBlocksProvider config={{ blocks, theme: null }}>
+					<Layout>
+						{isDocsRoute ? (
+							<DocsLayout {...pageProps}>
+								<Component {...pageProps} />
+							</DocsLayout>
+						) : (
 							<Component {...pageProps} />
-						</DocsLayout>
-					) : (
-						<Component {...pageProps} />
-					)}
-				</Layout>
-			</WordPressBlocksProvider>
+						)}
+					</Layout>
+				</WordPressBlocksProvider>
+			</SearchProvider>
 		</FaustProvider>
 	);
 }
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index 4010cede..1165155f 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -28,6 +28,15 @@ export default function Document() {
 					type="application/atom+xml"
 					title="WPGraphQL Blog Atom Feed"
 				/>
+				{/*
+					We use the dialog-closedby-polyfill to support the closedby attribute
+					in Safari.
+				*/}
+				{/* eslint-disable-next-line @next/next/no-sync-scripts */}
+				<script
+					type="module"
+					src="https://cdn.jsdelivr.net/npm/dialog-closedby-polyfill/index.js"
+				/>
 			</Head>
 			<body className="bg-gray-900 text-gray-200">
 				<Main />
diff --git a/src/utils/booleans.js b/src/utils/booleans.js
new file mode 100644
index 00000000..c3328802
--- /dev/null
+++ b/src/utils/booleans.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line unicorn/prefer-global-this
+export const isBrowser = typeof window !== "undefined";