diff --git a/package-lock.json b/package-lock.json
index 47fc793d975686f..be5355d2380edfa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,8 +53,6 @@
 				"globals": "16.0.0",
 				"hastscript": "9.0.1",
 				"he": "1.2.0",
-				"instantsearch.css": "8.5.1",
-				"instantsearch.js": "4.78.0",
 				"jsonc-parser": "3.3.1",
 				"lz-string": "1.5.0",
 				"marked": "15.0.7",
@@ -70,6 +68,7 @@
 				"react": "19.0.0",
 				"react-dom": "19.0.0",
 				"react-icons": "5.5.0",
+				"react-instantsearch": "7.15.4",
 				"react-markdown": "10.0.1",
 				"redirects-in-workers": "0.0.5",
 				"rehype": "13.0.2",
@@ -10736,13 +10735,6 @@
 				"@babel/runtime": "^7.1.2"
 			}
 		},
-		"node_modules/instantsearch.css": {
-			"version": "8.5.1",
-			"resolved": "https://registry.npmjs.org/instantsearch.css/-/instantsearch.css-8.5.1.tgz",
-			"integrity": "sha512-lu4gWSa2crIA1OAuFwtrNJy4d8oRvKmkY5gv8Dbf3tuedQMm6cf7K+1kXJKRAHLm4pZos9RXIH10m57UfDKbyg==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/instantsearch.js": {
 			"version": "4.78.0",
 			"resolved": "https://registry.npmjs.org/instantsearch.js/-/instantsearch.js-4.78.0.tgz",
@@ -14856,6 +14848,41 @@
 				"react": "*"
 			}
 		},
+		"node_modules/react-instantsearch": {
+			"version": "7.15.4",
+			"resolved": "https://registry.npmjs.org/react-instantsearch/-/react-instantsearch-7.15.4.tgz",
+			"integrity": "sha512-gr2oxOXPmMirFgTVYRo//Lr0wXMOYdcOiybJxRzA/jAN/5Hom+COt/wCgBmH8yH1RNIqjN+y6k86wXzH08HAww==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.1.2",
+				"instantsearch-ui-components": "0.11.1",
+				"instantsearch.js": "4.78.0",
+				"react-instantsearch-core": "7.15.4"
+			},
+			"peerDependencies": {
+				"algoliasearch": ">= 3.1 < 6",
+				"react": ">= 16.8.0 < 20",
+				"react-dom": ">= 16.8.0 < 20"
+			}
+		},
+		"node_modules/react-instantsearch-core": {
+			"version": "7.15.4",
+			"resolved": "https://registry.npmjs.org/react-instantsearch-core/-/react-instantsearch-core-7.15.4.tgz",
+			"integrity": "sha512-s2PPiAhQbamWoxSttxyfg4TKVteiEVkpmyYE7ef/6yoAO3QXVLZH5XsrqxBBLpH8XcpheuGYD3HvI/dhyUKYxg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.1.2",
+				"algoliasearch-helper": "3.24.2",
+				"instantsearch.js": "4.78.0",
+				"use-sync-external-store": "^1.0.0"
+			},
+			"peerDependencies": {
+				"algoliasearch": ">= 3.1 < 6",
+				"react": ">= 16.8.0 < 20"
+			}
+		},
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -18053,6 +18080,16 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"node_modules/use-sync-external-store": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+			"integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 907b35c759a7363..2b693b5b5f1d394 100644
--- a/package.json
+++ b/package.json
@@ -71,8 +71,6 @@
 		"globals": "16.0.0",
 		"hastscript": "9.0.1",
 		"he": "1.2.0",
-		"instantsearch.css": "8.5.1",
-		"instantsearch.js": "4.78.0",
 		"jsonc-parser": "3.3.1",
 		"lz-string": "1.5.0",
 		"marked": "15.0.7",
@@ -88,6 +86,7 @@
 		"react": "19.0.0",
 		"react-dom": "19.0.0",
 		"react-icons": "5.5.0",
+		"react-instantsearch": "7.15.4",
 		"react-markdown": "10.0.1",
 		"redirects-in-workers": "0.0.5",
 		"rehype": "13.0.2",
diff --git a/src/components/search/InstantSearch.tsx b/src/components/search/InstantSearch.tsx
new file mode 100644
index 000000000000000..42d050f87592f8c
--- /dev/null
+++ b/src/components/search/InstantSearch.tsx
@@ -0,0 +1,95 @@
+import { liteClient as algoliasearch } from "algoliasearch/lite";
+import { useEffect } from "react";
+import {
+	InstantSearch,
+	Highlight,
+	Configure,
+	useSearchBox,
+	type UseSearchBoxProps,
+	useInfiniteHits,
+	type UseInfiniteHitsProps,
+} from "react-instantsearch";
+
+function SearchBox(props: UseSearchBoxProps) {
+	const { query, refine } = useSearchBox(props);
+
+	useEffect(() => {
+		const params = new URLSearchParams(window.location.search);
+		const query = params.get("query");
+
+		if (query) {
+			refine(query);
+		}
+	}, []);
+
+	return (
+		<div className="flex items-center rounded border border-cl1-gray-8 p-2 dark:border-cl1-gray-2">
+			<input
+				type="text"
+				value={query}
+				onChange={(event) => refine(event.target.value)}
+				className="w-full border-none bg-transparent p-0 text-sm outline-none"
+				placeholder="Search..."
+			/>
+		</div>
+	);
+}
+
+function InfiniteHits(props: UseInfiniteHitsProps) {
+	const { items, isLastPage, showMore } = useInfiniteHits(props);
+
+	return (
+		<div className="space-y-4">
+			{items.map((item) => {
+				const hierarchy = Object.entries(item.hierarchy)
+					.filter(([, value]) => value !== null)
+					.sort((a, b) => a[0].localeCompare(b[0]))
+					.map(([, value]) => value);
+
+				const title = hierarchy ? hierarchy.join(" > ") : "Documentation";
+
+				return (
+					<a
+						key={item.objectID}
+						href={item.url}
+						className="flex flex-col rounded border border-cl1-gray-8 p-6 !text-black no-underline hover:bg-cl1-gray-9 dark:border-cl1-gray-2 dark:bg-cl1-gray-0 dark:hover:bg-cl1-gray-1"
+					>
+						<strong>{title}</strong>
+						<p className="line-clamp-2">
+							<Highlight attribute="content" hit={item} />
+						</p>
+					</a>
+				);
+			})}
+			{items.length !== 0 && !isLastPage && (
+				<div className="flex items-center justify-center">
+					<button
+						onClick={showMore}
+						className="h-12 cursor-pointer rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black"
+					>
+						Load more
+					</button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default function InstantSearchComponent() {
+	return (
+		<InstantSearch
+			searchClient={algoliasearch(
+				"D32WIYFTUF",
+				"5cec275adc19dd3bc17617f7d9cf312a",
+			)}
+			indexName="prod_devdocs"
+			future={{
+				preserveSharedStateOnUnmount: true,
+			}}
+		>
+			<Configure facetFilters={["type:content"]} />
+			<SearchBox />
+			<InfiniteHits />
+		</InstantSearch>
+	);
+}
diff --git a/src/pages/search.astro b/src/pages/search.astro
index e8fd5bd800f19a9..838f38c76874319 100644
--- a/src/pages/search.astro
+++ b/src/pages/search.astro
@@ -1,639 +1,19 @@
 ---
-import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
-import "instantsearch.css/themes/satellite.css";
+import StarlightPage, {
+	type StarlightPageProps,
+} from "@astrojs/starlight/components/StarlightPage.astro";
+import InstantSearch from "../components/search/InstantSearch.tsx";
+
+const props = {
+	frontmatter: {
+		title: "Search",
+		template: "splash",
+	},
+	hideTitle: true,
+	hideBreadcrumbs: true,
+} as StarlightPageProps;
 ---
 
-<StarlightPage frontmatter={{ title: "Search", template: "splash" }}>
-	<div class="search-panel__results not-content">
-		<div id="searchbox"></div>
-		<div id="current_refinements" class="mb-4"></div>
-		<div class="flex gap-x-4">
-			<div id="source"></div>
-			<div id="product"></div>
-			<div id="product_group"></div>
-			<div id="content_type"></div>
-		</div>
-		<div id="hits"></div>
-		<div id="pagination"></div>
-	</div>
+<StarlightPage {...props}>
+	<InstantSearch client:load />
 </StarlightPage>
-
-<script>
-	import instantsearch from "instantsearch.js";
-	import {
-		searchBox,
-		hits,
-		configure,
-		pagination,
-		refinementList,
-		currentRefinements,
-		panel,
-	} from "instantsearch.js/es/widgets";
-
-	import { liteClient as algoliasearch } from "algoliasearch/lite";
-
-	// Functions needed for dropdowns, pulled from https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/facet-dropdown/js/
-
-	function hasClassName(elem: HTMLElement | null, className: string) {
-		if (!elem) return;
-		return elem.className.split(" ").indexOf(className) >= 0;
-	}
-
-	function addClassName(elem: HTMLElement | null, className: string) {
-		if (!elem) return;
-		elem.className = [...elem.className.split(" "), className].join(" ");
-	}
-
-	function removeClassName(elem: HTMLElement | null, className: string) {
-		if (!elem) return;
-		elem.className = elem.className
-			.split(" ")
-			.filter((name) => name !== className)
-			.join(" ");
-	}
-
-	function capitalize(str: string) {
-		if (typeof str !== "string") return "";
-		return str.charAt(0).toUpperCase() + str.slice(1);
-	}
-
-	const CLASS_OPENED = "ais-Dropdown--opened";
-	const CLASS_BUTTON = "ais-Dropdown-button";
-	const CLASS_CLOSE_BUTTON = "ais-Dropdown-close";
-
-	const cx = (...args: string[]) => args.filter(Boolean).join(" ");
-
-	export function createDropdown(
-		baseWidget: any,
-		{
-			cssClasses: userCssClasses = {},
-			buttonText,
-			buttonClassName,
-			closeOnChange,
-		}: {
-			cssClasses?: Record<string, string>;
-			buttonText?: string;
-			buttonClassName?: string | ((options: any) => string);
-			closeOnChange?: boolean | (() => boolean);
-		} = {},
-	) {
-		// Merge class names with the default ones and the ones from user
-		const cssClasses = {
-			root: cx("ais-Dropdown", userCssClasses.root),
-			button: cx(CLASS_BUTTON, userCssClasses.button),
-			buttonRefined: cx(
-				"ais-Dropdown-button--refined",
-				userCssClasses.buttonRefined,
-			),
-			closeButton: cx(CLASS_CLOSE_BUTTON, userCssClasses.closeButton),
-		};
-		const makeWidget = panel<typeof refinementList>({
-			cssClasses,
-			templates: {
-				header: (options) => {
-					const { widgetParams } = options;
-
-					let text;
-					if (typeof buttonText === "string") {
-						text = buttonText;
-					} else {
-						// See if the widget has `attribute`
-						text =
-							widgetParams && widgetParams.attribute
-								? capitalize(widgetParams.attribute)
-								: "";
-					}
-					// Get the number of refinements if the widget has `items`
-					const nbRefinements = (options.items || []).filter(
-						(item) => item.isRefined,
-					).length;
-					// Format the button text
-					text = nbRefinements > 0 ? `${text} (${nbRefinements})` : text;
-
-					const classNames = [cssClasses.button];
-					if (typeof buttonClassName === "string") {
-						classNames.push(buttonClassName);
-					} else if (typeof buttonClassName === "function") {
-						classNames.push(buttonClassName(options));
-					} else if ((options.items || []).find((item) => item.isRefined)) {
-						classNames.push(cssClasses.buttonRefined);
-					}
-
-					return `
-          <button type="button" class="${cx(...classNames)}">
-            ${text}
-          </button>
-        `;
-				},
-				footer: `<button type="button" class="${cssClasses.closeButton}">Apply</button>`,
-			},
-		})(baseWidget);
-
-		return (widgetParams: any) => {
-			const widget = makeWidget(widgetParams);
-			const state: {
-				windowClickListener?: (event: MouseEvent) => void;
-			} = {};
-			let rootElem: HTMLElement | null;
-			let headerElem: HTMLElement | null;
-			let closeButtonElem: HTMLButtonElement | null;
-
-			const open = () => {
-				addClassName(rootElem, CLASS_OPENED);
-				// This 'click' event is still being propagated,
-				// so we add this event listener in the next tick.
-				// Otherwise, it will immediately close the panel again.
-				setTimeout(() => {
-					state.windowClickListener = (event) => {
-						// Close if the outside is clicked
-						if (rootElem && !event.composedPath().includes(rootElem)) {
-							close();
-						}
-					};
-					// Add an event listener when the panel is opened
-					window.addEventListener("click", state.windowClickListener);
-				}, 0);
-			};
-			const close = () => {
-				removeClassName(rootElem, CLASS_OPENED);
-				// Remove the event listener when the panel is closed
-				if (state.windowClickListener) {
-					window.removeEventListener("click", state.windowClickListener);
-				}
-				delete state.windowClickListener;
-			};
-			const isOpened = () => hasClassName(rootElem, CLASS_OPENED);
-			const toggle = () => {
-				if (isOpened()) {
-					close();
-				} else {
-					open();
-				}
-			};
-
-			// Add a click listener to the header (button) and the caret symbol
-			const buttonListener = (event: MouseEvent) => {
-				if (
-					!(event.target as HTMLElement)?.matches("." + CLASS_BUTTON) &&
-					!(event.target as HTMLElement)?.matches(".caretDownFilter")
-				) {
-					return;
-				}
-				toggle();
-			};
-
-			// Setup a clean-up function, which will be called in `dispose`.
-			const cleanUp = () => {
-				headerElem?.removeEventListener("click", buttonListener);
-				if (state.windowClickListener) {
-					window.removeEventListener("click", state.windowClickListener);
-				}
-			};
-
-			// Return a modified version of the widget
-			return {
-				...widget,
-				$$widgetType: "cmty.facetDropdown",
-				render: (options: any) => {
-					if (!rootElem) {
-						rootElem = document
-							.querySelector(widgetParams.container)
-							.querySelector(".ais-Panel");
-					}
-
-					if (!headerElem) {
-						headerElem = rootElem?.querySelector(".ais-Panel-header") ?? null;
-
-						headerElem?.addEventListener("click", buttonListener);
-					}
-
-					if (!closeButtonElem) {
-						closeButtonElem =
-							rootElem?.querySelector("." + CLASS_CLOSE_BUTTON) ?? null;
-
-						closeButtonElem?.addEventListener("click", close);
-					}
-
-					// Whenever uiState changes, it closes the panel.
-					options.instantSearchInstance.use(() => ({
-						subscribe() {},
-						unsubscribe() {},
-						onStateChange() {
-							if (
-								isOpened() &&
-								(closeOnChange === true ||
-									(typeof closeOnChange === "function" &&
-										closeOnChange() === true))
-							) {
-								close();
-							}
-						},
-					}));
-
-					return widget.render.call(widget, options);
-				},
-				dispose: (options: any) => {
-					if (typeof cleanUp === "function") {
-						cleanUp();
-					}
-
-					return widget.dispose.call(widget, options);
-				},
-			};
-		};
-	}
-
-	const searchClient = algoliasearch(
-		"8MU1G3QO9P",
-		"4edb0a6cef3338ff4bcfbc6b3d2db56b",
-	);
-	const indexName = "crawler_Dev Docs -> Instantsearch.js";
-
-	const search = instantsearch({
-		indexName: indexName,
-		searchClient,
-		insights: true,
-		routing: {
-			stateMapping: {
-				stateToRoute(uiState) {
-					const indexUiState = uiState[indexName];
-					return {
-						q: indexUiState.query,
-						source:
-							indexUiState.refinementList && indexUiState.refinementList.source,
-						product:
-							indexUiState.refinementList &&
-							indexUiState.refinementList.product,
-						product_group:
-							indexUiState.refinementList &&
-							indexUiState.refinementList.product_group,
-						content_type:
-							indexUiState.refinementList &&
-							indexUiState.refinementList.content_type,
-					};
-				},
-				// @ts-expect-error TODO: improve types
-				routeToState(routeState) {
-					return {
-						[indexName]: {
-							query: routeState.q,
-							refinementList: {
-								source: routeState.source,
-								product: routeState.product,
-								product_group: routeState.product_group,
-								content_type: routeState.content_type,
-							},
-						},
-					};
-				},
-			},
-		},
-	});
-
-	const MOBILE_WIDTH = 375;
-
-	const productDropdown = createDropdown(refinementList, {
-		closeOnChange: () => window.innerWidth >= MOBILE_WIDTH,
-	});
-
-	const sourceDropdown = createDropdown(refinementList, {
-		closeOnChange: () => window.innerWidth >= MOBILE_WIDTH,
-	});
-
-	const productGroupDropdown = createDropdown(refinementList, {
-		closeOnChange: () => window.innerWidth >= MOBILE_WIDTH,
-		buttonText: "Product group",
-	});
-
-	const contentTypeDropdown = createDropdown(refinementList, {
-		closeOnChange: () => window.innerWidth >= MOBILE_WIDTH,
-		buttonText: "Content type",
-	});
-
-	search.addWidgets([
-		searchBox({
-			container: "#searchbox",
-		}),
-		hits({
-			container: "#hits",
-			templates: {
-				item(hit, { html, components }) {
-					if (hit.path.startsWith("/api/resources/")) {
-						return html`
-							<div class="searchResult">
-								<a href=${hit.url}>
-									<h3>${components.Highlight({ attribute: "title", hit })}</h3>
-								</a>
-								<p>${components.Snippet({ attribute: "content", hit })}</p>
-								<div class="additionalSearchContent">
-									<p>
-										<strong>Operation</strong>:
-										${components.Highlight({ attribute: "operation", hit })}
-									</p>
-									<p>
-										<strong>Endpoint group</strong>:
-										${components.Highlight({ attribute: "parent_tag", hit })}
-									</p>
-									<p>
-										<strong>Content type</strong>:
-										${components.Highlight({ attribute: "content_type", hit })}
-									</p>
-								</div>
-								<a href=${hit.url}>${hit.url}</a>
-							</div>
-						`;
-					} else {
-						return html`
-							<div class="searchResult">
-								<a href=${hit.url}>
-									<h3>${components.Highlight({ attribute: "title", hit })}</h3>
-								</a>
-								<p>${components.Snippet({ attribute: "content", hit })}</p>
-								<div class="additionalSearchContent">
-									<p>
-										<strong>Product</strong>:
-										${components.Highlight({ attribute: "product", hit })}
-									</p>
-									<p>
-										<strong>Product group</strong>:
-										${components.Highlight({ attribute: "product_group", hit })}
-									</p>
-									<p>
-										<strong>Content type</strong>:
-										${components.Highlight({ attribute: "content_type", hit })}
-									</p>
-								</div>
-								<a href=${hit.url}>${hit.url}</a>
-							</div>
-						`;
-					}
-				},
-			},
-		}),
-		configure({
-			hitsPerPage: 10,
-			attributesToSnippet: ["content:30"],
-		}),
-		sourceDropdown({
-			container: "#source",
-			attribute: "source",
-			searchable: false,
-		}),
-		productDropdown({
-			container: "#product",
-			attribute: "product",
-			searchable: true,
-		}),
-		productGroupDropdown({
-			container: "#product_group",
-			attribute: "product_group",
-			searchable: true,
-		}),
-		contentTypeDropdown({
-			container: "#content_type",
-			attribute: "content_type",
-			searchable: true,
-		}),
-		pagination({
-			container: "#pagination",
-		}),
-		currentRefinements({
-			container: "#current_refinements",
-			transformItems(items) {
-				return items.map((item) => {
-					item.label = item.label.replace("_", " ");
-					return item;
-				});
-			},
-		}),
-	]);
-
-	search.start();
-</script>
-
-<style is:inline>
-	#searchbox {
-		margin-bottom: 2rem;
-	}
-
-	.ais-Dropdown-button {
-		border: 1px solid #d6d6e7;
-		padding: 0.75rem 1.5rem;
-		border-radius: 0.25rem;
-		cursor: pointer;
-		font-size: 0.8rem;
-		background-color: transparent;
-	}
-
-	.ais-Dropdown-button--refined {
-		font-weight: bold;
-	}
-
-	.ais-Dropdown .ais-Panel-body > div > div[class^="ais-"] {
-		position: absolute;
-		border: 1px solid #ccc;
-		border-radius: 0.25rem;
-		padding: 0.5rem 1rem;
-		margin-top: 0.5rem;
-		background-color: var(--sl-color-bg-nav);
-	}
-
-	.ais-Dropdown .ais-Panel-header {
-		margin-bottom: 0;
-		padding-bottom: 0;
-		border-bottom: 0;
-	}
-
-	.ais-Dropdown .ais-Panel-body {
-		display: none;
-	}
-
-	.ais-Dropdown--opened .ais-Panel-body {
-		display: block;
-	}
-
-	.ais-Dropdown .ais-Panel-body {
-		position: relative;
-	}
-
-	.ais-Dropdown-close {
-		display: none;
-	}
-
-	/* mobile */
-	@media only screen and (max-width: 375px) {
-		body {
-			overflow: hidden;
-		}
-
-		.ais-Dropdown--opened .ais-Panel-body {
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			background: #fff;
-		}
-
-		.ais-Dropdown--opened .ais-Panel-body > div > div[class^="ais-"] {
-			margin-top: 0;
-			top: 0;
-			left: 0;
-			right: 0;
-			height: 85vh;
-			border: 0;
-		}
-
-		.ais-Dropdown--opened .ais-Panel-footer {
-			position: absolute;
-			top: 85vh;
-			width: 100%;
-			left: 0;
-			bottom: 0;
-		}
-
-		.ais-Dropdown-close {
-			border: 1px solid #d6d6e7;
-			background: #fff;
-			border-radius: 0.25rem;
-			padding: 0.25rem 0.5rem;
-			cursor: pointer;
-			width: calc(100% - 2rem);
-			margin: 0 1rem;
-			height: 3rem;
-			font-size: 1rem;
-		}
-
-		.ais-Dropdown-close:hover {
-			background-color: #f5f5fa;
-		}
-
-		.ais-Dropdown--opened .ais-Dropdown-close {
-			display: inline;
-		}
-	}
-
-	.search-panel__filters {
-		display: flex;
-	}
-
-	.search-panel__filters > div {
-		margin-right: 1rem;
-	}
-
-	.search-panel__filters > div:last-child {
-		margin-right: 0;
-	}
-
-	.ais-RefinementList-list {
-		font-weight: normal;
-	}
-
-	.ais-Breadcrumb-item--selected,
-	.ais-Menu-item--selected {
-		font-weight: bold;
-	}
-
-	@media (max-width: 700px) {
-		.additionalSearchContent p {
-			margin-bottom: 0.5em !important;
-		}
-	}
-
-	@media (min-width: 700px) {
-		.additionalSearchContent {
-			display: flex;
-		}
-		.additionalSearchContent p {
-			padding-right: 1em;
-		}
-	}
-
-	.searchResult a {
-		color: #0059b3;
-	}
-
-	.searchResult a:hover {
-		text-decoration: underline;
-	}
-
-	.ais-Hits-item {
-		padding-bottom: 2em !important;
-		margin-bottom: 2em !important;
-		border-radius: 0.25rem !important;
-		background-color: var(--sl-color-bg-nav);
-	}
-
-	.DocsMarkdown ul > :last-child {
-		margin-bottom: auto !important;
-	}
-
-	.ais-Dropdown-button {
-		display: flex;
-	}
-
-	.ais-Dropdown-button img {
-		padding-left: 0.5em;
-		padding-top: 0.25em;
-	}
-
-	.ais-RefinementList {
-		z-index: 1;
-	}
-
-	@media (max-width: 600px) {
-		.search-panel__filters {
-			flex-direction: column;
-		}
-		.ais-Panel {
-			margin-bottom: 0.5em;
-		}
-	}
-
-	.ais-CurrentRefinements-list {
-		display: flex;
-		flex-direction: column;
-		padding-left: 0em !important;
-		gap: 0.5rem;
-		width: 30em;
-	}
-
-	.ais-CurrentRefinements-delete {
-		padding-top: 0.18em;
-		color: inherit;
-	}
-
-	/* Dark mode styling */
-
-	.ais-CurrentRefinements-item {
-		background-color: var(--sl-color-bg-nav);
-		color: inherit;
-	}
-
-	.ais-SearchBox-resetIcon {
-		filter: invert(1) grayscale(100%);
-	}
-
-	.ais-SearchBox-input::placeholder {
-		color: inherit;
-	}
-
-	.ais-SearchBox-form::before {
-		filter: invert(1) grayscale(100%);
-	}
-
-	.ais-SearchBox-input {
-		background-color: var(--sl-color-bg-nav);
-		color: inherit;
-	}
-
-	ais-SearchBox-input:focus {
-		border-color: var(--code-orange);
-		box-shadow: none;
-		border-radius: 0px;
-	}
-
-	.searchResult a {
-		color: var(--code-orange);
-	}
-</style>
diff --git a/src/plugins/docsearch/index.ts b/src/plugins/docsearch/index.ts
index 782dfd36fb7bb7a..46ee480fec0945b 100644
--- a/src/plugins/docsearch/index.ts
+++ b/src/plugins/docsearch/index.ts
@@ -18,4 +18,18 @@ export default {
 			};
 		});
 	},
+	resultsFooterComponent({ state }) {
+		return {
+			type: "a",
+			ref: undefined,
+			constructor: undefined,
+			__v: null,
+			key: state.query,
+			props: {
+				href: `/search/?query=${state.query}`,
+				target: "_blank",
+				children: "View all results",
+			},
+		};
+	},
 } satisfies DocSearchClientOptions;