diff --git a/apps/site/components/Common/Search/States/WithAllResults.tsx b/apps/site/components/Common/Search/States/WithAllResults.tsx
deleted file mode 100644
index 481edb8cc3966..0000000000000
--- a/apps/site/components/Common/Search/States/WithAllResults.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { Results } from '@orama/orama';
-import NextLink from 'next/link';
-import { useParams } from 'next/navigation';
-import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
-
-import type { SearchDoc } from '@/types';
-
-import styles from './index.module.css';
-
-type SearchResults = Results<SearchDoc>;
-
-type SeeAllProps = {
-  searchResults: SearchResults;
-  searchTerm: string;
-  selectedFacetName: string;
-  onSeeAllClick: () => void;
-};
-
-export const WithAllResults: FC<SeeAllProps> = props => {
-  const t = useTranslations();
-  const params = useParams();
-
-  const locale = params?.locale ?? 'en';
-  const resultsCount = props.searchResults?.count?.toLocaleString('en') ?? 0;
-  const searchParams = new URLSearchParams();
-
-  searchParams.set('q', props.searchTerm);
-  searchParams.set('section', props.selectedFacetName);
-
-  const allResultsURL = `/${locale}/search?${searchParams.toString()}`;
-
-  return (
-    <div className={styles.seeAllFulltextSearchResults}>
-      <NextLink href={allResultsURL} onClick={props.onSeeAllClick}>
-        {t('components.search.seeAll.text', { count: resultsCount })}
-      </NextLink>
-    </div>
-  );
-};
diff --git a/apps/site/components/Common/Search/States/WithError.tsx b/apps/site/components/Common/Search/States/WithError.tsx
deleted file mode 100644
index 33eecbabd147d..0000000000000
--- a/apps/site/components/Common/Search/States/WithError.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
-
-import styles from './index.module.css';
-
-export const WithError: FC = () => {
-  const t = useTranslations();
-
-  return (
-    <div className={styles.searchErrorContainer}>
-      {t('components.search.searchError.text')}
-    </div>
-  );
-};
diff --git a/apps/site/components/Common/Search/States/WithNoResults.tsx b/apps/site/components/Common/Search/States/WithNoResults.tsx
deleted file mode 100644
index 5b55c60469c4b..0000000000000
--- a/apps/site/components/Common/Search/States/WithNoResults.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
-
-import styles from './index.module.css';
-
-type NoResultsProps = { searchTerm: string };
-
-export const WithNoResults: FC<NoResultsProps> = props => {
-  const t = useTranslations();
-
-  return (
-    <div className={styles.noResultsContainer}>
-      {t('components.search.noResults.text', { query: props.searchTerm })}
-    </div>
-  );
-};
diff --git a/apps/site/components/Common/Search/States/WithPoweredBy.tsx b/apps/site/components/Common/Search/States/WithPoweredBy.tsx
deleted file mode 100644
index 3986280d5d7a6..0000000000000
--- a/apps/site/components/Common/Search/States/WithPoweredBy.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import { useTranslations } from 'next-intl';
-import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
-
-import styles from './index.module.css';
-
-const getLogoURL = (theme: string = 'dark') =>
-  `https://website-assets.oramasearch.com/orama-when-${theme}.svg`;
-
-export const WithPoweredBy = () => {
-  const t = useTranslations();
-  const { resolvedTheme } = useTheme();
-  const [logoURL, setLogoURL] = useState<string>();
-
-  useEffect(() => setLogoURL(getLogoURL(resolvedTheme)), [resolvedTheme]);
-
-  return (
-    <div className={styles.poweredBy}>
-      {t('components.search.poweredBy.text')}
-
-      <a
-        href="https://oramasearch.com?utm_source=nodejs.org"
-        target="_blank"
-        rel="noreferer"
-      >
-        {logoURL && (
-          <Image
-            src={logoURL}
-            alt="Powered by OramaSearch"
-            className={styles.poweredByLogo}
-            width={80}
-            height={20}
-          />
-        )}
-      </a>
-    </div>
-  );
-};
diff --git a/apps/site/components/Common/Search/States/WithSearchBox.tsx b/apps/site/components/Common/Search/States/WithSearchBox.tsx
deleted file mode 100644
index d3a2cff45087c..0000000000000
--- a/apps/site/components/Common/Search/States/WithSearchBox.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-'use client';
-
-import {
-  MagnifyingGlassIcon,
-  ChevronLeftIcon,
-} from '@heroicons/react/24/outline';
-import type { Results, Nullable } from '@orama/orama';
-import { useState, useRef, useEffect } from 'react';
-import type { FC } from 'react';
-
-import styles from '@/components/Common/Search/States/index.module.css';
-import { WithAllResults } from '@/components/Common/Search/States/WithAllResults';
-import { WithError } from '@/components/Common/Search/States/WithError';
-import { WithNoResults } from '@/components/Common/Search/States/WithNoResults';
-import { WithPoweredBy } from '@/components/Common/Search/States/WithPoweredBy';
-import { WithSearchResult } from '@/components/Common/Search/States/WithSearchResult';
-import Tabs from '@/components/Common/Tabs';
-import { useClickOutside, useKeyboardCommands } from '@/hooks/react-client';
-import { useRouter } from '@/navigation.mjs';
-import { DEFAULT_ORAMA_QUERY_PARAMS } from '@/next.constants.mjs';
-import { search as oramaSearch, getInitialFacets } from '@/next.orama.mjs';
-import type { SearchDoc } from '@/types';
-import { searchHitToLinkPath } from '@/util/searchUtils';
-
-type Facets = { [key: string]: number };
-
-type SearchResults = Nullable<Results<SearchDoc>>;
-
-type SearchBoxProps = { onClose: () => void };
-
-export const WithSearchBox: FC<SearchBoxProps> = ({ onClose }) => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [searchResults, setSearchResults] = useState<SearchResults>(null);
-  const [selectedResult, setSelectedResult] = useState<number>();
-  const [selectedFacet, setSelectedFacet] = useState<number>(0);
-  const [searchError, setSearchError] = useState<Nullable<Error>>(null);
-
-  const router = useRouter();
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const searchBoxRef = useRef<HTMLDivElement>(null);
-
-  const search = (term: string) => {
-    oramaSearch({
-      term,
-      ...DEFAULT_ORAMA_QUERY_PARAMS,
-      mode: 'fulltext',
-      returning: [
-        'path',
-        'pageSectionTitle',
-        'pageTitle',
-        'path',
-        'siteSection',
-      ],
-      ...filterBySection(),
-    })
-      .then(setSearchResults)
-      .catch(setSearchError);
-  };
-
-  const reset = () => {
-    setSearchTerm('');
-    setSearchResults(null);
-    setSelectedResult(undefined);
-    setSelectedFacet(0);
-  };
-
-  const handleClose = () => {
-    reset();
-    onClose();
-  };
-
-  useClickOutside(searchBoxRef, handleClose);
-
-  useEffect(() => {
-    searchInputRef.current?.focus();
-
-    getInitialFacets().then(setSearchResults).catch(setSearchError);
-
-    return reset;
-  }, []);
-
-  useEffect(
-    () => {
-      search(searchTerm);
-    },
-    // we don't need to care about memoization of search function
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [searchTerm, selectedFacet]
-  );
-
-  useKeyboardCommands(cmd => {
-    if (searchError || !searchResults || searchResults.count <= 0) {
-      return;
-    }
-
-    switch (true) {
-      case cmd === 'down' && selectedResult === undefined:
-        setSelectedResult(0);
-        break;
-      case cmd === 'down' &&
-        selectedResult != undefined &&
-        selectedResult < searchResults.count &&
-        selectedResult < DEFAULT_ORAMA_QUERY_PARAMS.limit - 1:
-        setSelectedResult(selectedResult + 1);
-        break;
-      case cmd === 'up' && selectedResult != undefined && selectedResult != 0:
-        setSelectedResult(selectedResult - 1);
-        break;
-      case cmd === 'enter':
-        handleEnter();
-        break;
-      default:
-    }
-  });
-
-  const handleEnter = () => {
-    if (!searchResults || !selectedResult) {
-      return;
-    }
-
-    const selectedHit = searchResults.hits[selectedResult];
-
-    if (!selectedHit) {
-      return;
-    }
-
-    handleClose();
-    router.push(searchHitToLinkPath(selectedHit));
-  };
-
-  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    handleClose();
-    router.push(`/search?q=${searchTerm}&section=${selectedFacetName}`);
-  };
-
-  const changeFacet = (idx: string) => setSelectedFacet(Number(idx));
-
-  const filterBySection = () => {
-    if (selectedFacet === 0) {
-      return {};
-    }
-
-    return { where: { siteSection: { eq: selectedFacetName } } };
-  };
-
-  const facets: Facets = {
-    all: searchResults?.facets
-      ? Object.values(searchResults?.facets.siteSection.values).reduce(
-          (a, b) => a + b,
-          0
-        )
-      : 0,
-    ...(searchResults?.facets?.siteSection?.values ?? {}),
-  };
-
-  const selectedFacetName = Object.keys(facets)[selectedFacet];
-
-  return (
-    <div className={styles.searchBoxModalContainer}>
-      <div className={styles.searchBoxModalPanel} ref={searchBoxRef}>
-        <div className={styles.searchBoxInnerPanel}>
-          <div className={styles.searchBoxInputContainer}>
-            <button
-              onClick={onClose}
-              className={styles.searchBoxBackIconContainer}
-            >
-              <ChevronLeftIcon className={styles.searchBoxBackIcon} />
-            </button>
-
-            <MagnifyingGlassIcon
-              className={styles.searchBoxMagnifyingGlassIcon}
-            />
-
-            <form onSubmit={onSubmit}>
-              <input
-                ref={searchInputRef}
-                aria-activedescendant={
-                  selectedResult !== undefined
-                    ? `search-hit-${selectedResult}`
-                    : undefined
-                }
-                aria-autocomplete="list"
-                aria-controls="fulltext-results-container"
-                aria-expanded={Boolean(!searchError && searchResults?.count)}
-                autoComplete="off"
-                role="combobox"
-                type="search"
-                className={styles.searchBoxInput}
-                onChange={event => setSearchTerm(event.target.value)}
-                value={searchTerm}
-              />
-            </form>
-          </div>
-
-          <div className={styles.fulltextSearchSections}>
-            <Tabs
-              activationMode="manual"
-              defaultValue="0"
-              autoFocus={true}
-              tabs={Object.keys(facets).map((facetName, idx) => ({
-                key: facetName,
-                label: facetName,
-                secondaryLabel: `(${facets[facetName].toLocaleString('en')})`,
-                value: idx.toString(),
-              }))}
-              onValueChange={changeFacet}
-            />
-          </div>
-
-          <div
-            id="fulltext-results-container"
-            className={styles.fulltextResultsContainer}
-            role="listbox"
-          >
-            {searchError && <WithError />}
-
-            {!searchError && (
-              <>
-                {searchResults &&
-                  searchResults.count > 0 &&
-                  searchResults.hits.map((hit, idx) => (
-                    <WithSearchResult
-                      key={hit.id}
-                      hit={hit}
-                      searchTerm={searchTerm}
-                      selected={selectedResult === idx}
-                      idx={idx}
-                    />
-                  ))}
-
-                {searchResults && searchResults.count === 0 && (
-                  <WithNoResults searchTerm={searchTerm} />
-                )}
-
-                {searchResults && searchResults.count > 8 && (
-                  <WithAllResults
-                    searchResults={searchResults}
-                    searchTerm={searchTerm}
-                    selectedFacetName={selectedFacetName}
-                    onSeeAllClick={onClose}
-                  />
-                )}
-              </>
-            )}
-          </div>
-
-          <div className={styles.fulltextSearchFooter}>
-            <WithPoweredBy />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/site/components/Common/Search/States/WithSearchResult.tsx b/apps/site/components/Common/Search/States/WithSearchResult.tsx
deleted file mode 100644
index 05e0dd47ef051..0000000000000
--- a/apps/site/components/Common/Search/States/WithSearchResult.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { Result } from '@orama/orama';
-import { useEffect, type FC, useRef } from 'react';
-
-import { pathToBreadcrumbs } from '@/components/Common/Search/utils';
-import Link from '@/components/Link';
-import { highlighter } from '@/next.orama.mjs';
-import type { SearchDoc } from '@/types';
-import { searchHitToLinkPath } from '@/util/searchUtils';
-
-import styles from './index.module.css';
-
-type SearchResultProps = {
-  hit: Result<SearchDoc>;
-  searchTerm: string;
-  selected: boolean;
-  idx: number;
-};
-
-export const WithSearchResult: FC<SearchResultProps> = props => {
-  const divRef = useRef<HTMLDivElement>(null);
-  const path = searchHitToLinkPath(props.hit);
-
-  useEffect(() => {
-    if (props.selected && divRef.current) {
-      divRef.current.scrollIntoView({ block: 'center' });
-    }
-  }, [props.selected]);
-
-  return (
-    <Link
-      id={`search-hit-${props.idx}`}
-      key={props.hit.id}
-      href={path}
-      className={styles.fulltextSearchResult}
-      role="option"
-      aria-selected={props.selected}
-    >
-      <div
-        className={styles.fulltextSearchResultTitle}
-        ref={divRef}
-        dangerouslySetInnerHTML={{
-          __html: highlighter
-            .highlight(props.hit.document.pageSectionTitle, props.searchTerm)
-            .trim(125),
-        }}
-      />
-      <div className={styles.fulltextSearchResultBreadcrumb}>
-        {pathToBreadcrumbs(props.hit.document.path).join(' > ')}
-        {' > '}
-        {props.hit.document.pageTitle}
-      </div>
-    </Link>
-  );
-};
diff --git a/apps/site/components/Common/Search/States/index.module.css b/apps/site/components/Common/Search/States/index.module.css
deleted file mode 100644
index a4a3f7041c97e..0000000000000
--- a/apps/site/components/Common/Search/States/index.module.css
+++ /dev/null
@@ -1,192 +0,0 @@
-.searchBoxModalContainer {
-  @apply fixed
-    inset-0
-    z-50
-    flex
-    items-center
-    justify-center
-    bg-neutral-900
-    bg-opacity-90
-    dark:bg-neutral-900
-    dark:bg-opacity-90;
-}
-
-.searchBoxModalPanel {
-  @apply fixed
-    h-screen
-    w-full
-    bg-neutral-100
-    md:h-[450px]
-    md:max-w-3xl
-    md:rounded-xl
-    md:shadow-lg
-    dark:bg-neutral-950;
-}
-
-.searchBoxInnerPanel {
-  @apply pt-12
-    text-neutral-800
-    md:pt-2
-    dark:text-neutral-400;
-}
-
-.searchBoxMagnifyingGlassIcon {
-  @apply absolute
-    top-[10px]
-    hidden
-    size-6
-    md:block;
-}
-
-.searchBoxBackIconContainer {
-  @apply block
-    md:hidden;
-}
-
-.searchBoxBackIcon {
-  @apply absolute
-    top-[7px]
-    block
-    size-6
-    md:hidden;
-}
-
-.searchBoxInputContainer {
-  @apply relative
-  px-2
-  md:px-4;
-}
-
-.searchBoxInput {
-  @apply w-full
-    rounded-b-none
-    border-b
-    border-neutral-300
-    bg-transparent
-    py-2
-    pl-8
-    pr-4
-    focus:outline-none
-    dark:border-neutral-900
-    dark:text-neutral-300
-    dark:placeholder-neutral-300;
-}
-
-.fulltextResultsContainer {
-  @apply h-80
-    overflow-auto
-    md:px-4;
-}
-
-.fulltextSearchResult {
-  @apply flex
-    flex-col
-    rounded-md
-    p-2
-    text-left
-    text-sm;
-
-  &[aria-selected='true'],
-  &:hover {
-    @apply bg-neutral-300
-      dark:bg-neutral-900;
-  }
-}
-
-.fulltextSearchResultTitle {
-  @apply text-neutral-800
-    dark:text-neutral-300;
-}
-
-.fulltextSearchResultBreadcrumb {
-  @apply mt-1
-    text-xs
-    capitalize
-    text-neutral-800
-    dark:text-neutral-600;
-}
-
-.fulltextSearchSections {
-  @apply mb-1
-    mt-2
-    p-2
-    md:px-4;
-}
-
-.seeAllFulltextSearchResults {
-  @apply m-auto
-    mb-2
-    mt-4
-    w-full
-    text-center
-    text-sm
-    text-neutral-700
-    hover:underline
-    dark:text-neutral-600;
-}
-
-.poweredBy {
-  @apply flex
-    text-xs
-    text-neutral-950
-    dark:text-neutral-200;
-}
-
-.poweredByLogo {
-  @apply ml-2
-    w-16;
-}
-
-.emptyStateContainer {
-  @apply flex
-    h-[80%]
-    w-full
-    flex-col
-    items-center
-    justify-center
-    text-center
-    text-sm
-    text-neutral-600
-    dark:text-neutral-500;
-}
-
-.noResultsContainer {
-  @apply flex
-    h-[80%]
-    w-full
-    items-center
-    justify-center
-    text-center
-    text-sm
-    text-neutral-600
-    dark:text-neutral-500;
-}
-
-.noResultsTerm {
-  @apply font-semibold;
-}
-
-.searchErrorContainer {
-  @apply flex
-    h-[80%]
-    w-full
-    items-center
-    justify-center
-    text-center
-    text-sm
-    text-neutral-600
-    dark:text-neutral-500;
-}
-
-.fulltextSearchFooter {
-  @apply flex
-    w-full
-    justify-end
-    rounded-b-xl
-    border-t
-    border-neutral-300
-    bg-neutral-100
-    p-4
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-}
diff --git a/apps/site/components/Common/Search/index.module.css b/apps/site/components/Common/Search/index.module.css
deleted file mode 100644
index 734019bf8cad0..0000000000000
--- a/apps/site/components/Common/Search/index.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.searchButton {
-  @apply flex
-    grow
-    basis-80
-    items-center
-    gap-2
-    rounded-md
-    bg-neutral-200
-    p-2
-    text-sm
-    text-neutral-800
-    hover:bg-neutral-300
-    hover:text-neutral-900
-    sm:mr-auto
-    dark:bg-neutral-900
-    dark:text-neutral-600
-    dark:hover:bg-neutral-800
-    dark:hover:text-neutral-500;
-}
-
-.magnifyingGlassIcon {
-  @apply size-5;
-}
-
-.shortcutIndicator {
-  @apply font-ibm-plex-mono
-    invisible
-    flex
-    flex-1
-    items-center
-    justify-end
-    self-center
-    px-1
-    text-xs
-    motion-safe:transition-opacity
-    motion-safe:duration-100
-    md:visible;
-}
diff --git a/apps/site/components/Common/Search/index.tsx b/apps/site/components/Common/Search/index.tsx
index 652daa66f1d74..5b793f4e7555b 100644
--- a/apps/site/components/Common/Search/index.tsx
+++ b/apps/site/components/Common/Search/index.tsx
@@ -1,61 +1,90 @@
 'use client';
 
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import classNames from 'classnames';
-import { useTranslations } from 'next-intl';
-import { useState, type FC } from 'react';
+import { OramaSearchBox, OramaSearchButton } from '@orama/react-components';
+import { useTranslations, useLocale } from 'next-intl';
+import { useTheme } from 'next-themes';
+import { type FC } from 'react';
 
-import { WithSearchBox } from '@/components/Common/Search/States/WithSearchBox';
-import { useDetectOS } from '@/hooks';
-import { useKeyboardCommands } from '@/hooks/react-client';
+import {
+  ORAMA_CLOUD_ENDPOINT,
+  ORAMA_CLOUD_API_KEY,
+  DEFAULT_ORAMA_QUERY_PARAMS,
+  DEFAULT_ORAMA_SUGGESTIONS,
+  BASE_URL,
+} from '@/next.constants.mjs';
 
-import styles from './index.module.css';
+import { themeConfig } from './utils';
 
-export const SearchButton: FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
+const uppercaseFirst = (word: string) =>
+  word.charAt(0).toUpperCase() + word.slice(1);
+
+const getFormattedPath = (path: string, title: string) =>
+  `${path
+    .replace(/#.+$/, '')
+    .split('/')
+    .map(element => element.replaceAll('-', ' '))
+    .map(element => uppercaseFirst(element))
+    .filter(Boolean)
+    .join(' > ')} — ${title}`;
+
+const SearchButton: FC = () => {
+  const { resolvedTheme } = useTheme();
   const t = useTranslations();
-  const openSearchBox = () => setIsOpen(true);
-  const closeSearchBox = () => setIsOpen(false);
-
-  useKeyboardCommands(cmd => {
-    switch (cmd) {
-      case 'cmd-k':
-        openSearchBox();
-        break;
-      case 'escape':
-        closeSearchBox();
-        break;
-      default:
-    }
-  });
-
-  const { os } = useDetectOS();
-
-  const osCommandKey = os === 'MAC' ? '⌘' : 'Ctrl';
-  const isOSLoading = os === 'LOADING';
+  const locale = useLocale();
+  const colorScheme = resolvedTheme as 'light' | 'dark';
+
+  const sourceMap = {
+    title: 'pageSectionTitle',
+    description: 'formattedPath',
+    path: 'path',
+  };
+
+  const resultMap = {
+    ...sourceMap,
+    description: ({
+      path,
+      pageSectionTitle,
+    }: {
+      path: string;
+      pageSectionTitle: string;
+    }) => {
+      return getFormattedPath(path, pageSectionTitle);
+    },
+    path: ({ path, siteSection }: { path: string; siteSection: string }) =>
+      siteSection.toLowerCase() === 'docs' ? `/${path}` : `/${locale}/${path}`,
+    section: 'siteSection',
+  };
 
   return (
     <>
-      <button
-        type="button"
-        onClick={openSearchBox}
-        className={styles.searchButton}
+      <OramaSearchButton
+        style={{ flexGrow: 1 }}
+        colorScheme={colorScheme}
+        themeConfig={themeConfig}
         aria-label={t('components.search.searchBox.placeholder')}
       >
-        <MagnifyingGlassIcon className={styles.magnifyingGlassIcon} />
-
         {t('components.search.searchBox.placeholder')}
-        <kbd
-          title={`${osCommandKey} K`}
-          className={classNames(styles.shortcutIndicator, {
-            'opacity-0': isOSLoading,
-          })}
-        >
-          <abbr>{osCommandKey} K</abbr>
-        </kbd>
-      </button>
-
-      {isOpen ? <WithSearchBox onClose={closeSearchBox} /> : null}
+      </OramaSearchButton>
+
+      <OramaSearchBox
+        index={{ api_key: ORAMA_CLOUD_API_KEY, endpoint: ORAMA_CLOUD_ENDPOINT }}
+        colorScheme={colorScheme}
+        themeConfig={themeConfig}
+        sourceBaseUrl={BASE_URL}
+        sourcesMap={sourceMap}
+        resultMap={resultMap}
+        facetProperty="siteSection"
+        linksTarget="_self"
+        highlightTitle={{
+          caseSensitive: false,
+          HTMLTag: 'b',
+          CSSClass: 'font-bold',
+        }}
+        searchParams={DEFAULT_ORAMA_QUERY_PARAMS}
+        suggestions={DEFAULT_ORAMA_SUGGESTIONS}
+      />
     </>
   );
 };
+
+export default SearchButton;
diff --git a/apps/site/components/Common/Search/utils.ts b/apps/site/components/Common/Search/utils.ts
index ca204dda9b64f..0c15a476fa4a2 100644
--- a/apps/site/components/Common/Search/utils.ts
+++ b/apps/site/components/Common/Search/utils.ts
@@ -1,7 +1,43 @@
-export const pathToBreadcrumbs = (path: string) =>
-  path
-    .replace(/#.+$/, '')
-    .split('/')
-    .slice(0, -1)
-    .map(element => element.replaceAll('-', ' '))
-    .filter(Boolean);
+import tailwindConfig from '@/tailwind.config';
+
+const colors = tailwindConfig.theme.colors;
+export const themeConfig = {
+  colors: {
+    light: {
+      '--text-color-primary': colors.neutral[900],
+      '--text-color-accent': colors.green[600],
+      '--background-color-secondary': colors.neutral[100],
+      '--background-color-tertiary': colors.neutral[300],
+      '--border-color-accent': colors.green[600],
+      '--border-color-primary': colors.neutral[200],
+      '--border-color-tertiary': colors.green[700],
+      '--button-background-color-primary': colors.green[600],
+      '--button-background-color-secondary': colors.white,
+      '--button-background-color-secondary-hover': colors.green[100],
+      '--button-border-color-secondary': colors.neutral[300],
+      '--button-text-color-secondary': colors.neutral[900],
+      '--chat-button-border-color-gradientThree': colors.green[400],
+      '--chat-button-border-color-gradientFour': colors.green[700],
+      '--chat-button-background-color-gradientOne': colors.green[600],
+      '--chat-button-background-color-gradientTwo': colors.green[300],
+    },
+    dark: {
+      '--text-color-primary': colors.neutral[100],
+      '--text-color-accent': colors.green[400],
+      '--background-color-secondary': colors.neutral[950],
+      '--background-color-tertiary': colors.neutral[900],
+      '--border-color-accent': colors.green[400],
+      '--border-color-primary': colors.neutral[900],
+      '--border-color-tertiary': colors.green[300],
+      '--button-background-color-primary': colors.green[400],
+      '--button-background-color-secondary': colors.neutral[950],
+      '--button-background-color-secondary-hover': colors.green[800],
+      '--button-border-color-secondary': colors.neutral[900],
+      '--button-text-color-secondary': colors.neutral[200],
+      '--chat-button-border-color-gradientThree': colors.green[400],
+      '--chat-button-border-color-gradientFour': colors.green[700],
+      '--chat-button-background-color-gradientOne': colors.green[400],
+      '--chat-button-background-color-gradientTwo': colors.green[800],
+    },
+  },
+};
diff --git a/apps/site/components/Containers/NavBar/index.tsx b/apps/site/components/Containers/NavBar/index.tsx
index 1ce06a1a5d0f6..5af65deddd09a 100644
--- a/apps/site/components/Containers/NavBar/index.tsx
+++ b/apps/site/components/Containers/NavBar/index.tsx
@@ -3,11 +3,11 @@
 import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
 import XMark from '@heroicons/react/24/solid/XMarkIcon';
 import * as Label from '@radix-ui/react-label';
+import dynamic from 'next/dynamic';
 import { useState } from 'react';
 import type { FC, ComponentProps, HTMLAttributeAnchorTarget } from 'react';
 
 import LanguageDropdown from '@/components/Common/LanguageDropDown';
-import { SearchButton } from '@/components/Common/Search';
 import ThemeToggle from '@/components/Common/ThemeToggle';
 import NavItem from '@/components/Containers/NavBar/NavItem';
 import GitHub from '@/components/Icons/Social/GitHub';
@@ -17,6 +17,10 @@ import type { FormattedMessage } from '@/types';
 
 import style from './index.module.css';
 
+const SearchButton = dynamic(() => import('@/components/Common/Search'), {
+  ssr: false,
+});
+
 const navInteractionIcons = {
   show: <Hamburger className={style.navInteractionIcon} />,
   close: <XMark className={style.navInteractionIcon} />,
diff --git a/apps/site/components/MDX/SearchPage/index.module.css b/apps/site/components/MDX/SearchPage/index.module.css
deleted file mode 100644
index 777e5af913050..0000000000000
--- a/apps/site/components/MDX/SearchPage/index.module.css
+++ /dev/null
@@ -1,82 +0,0 @@
-.searchPageContainer {
-  @apply mx-auto
-    w-full
-    px-4
-    py-14
-    md:max-w-screen-xl;
-}
-
-.searchTermContainer {
-  @apply relative
-    flex
-    w-full
-    flex-col
-    justify-start
-    gap-1
-    px-6
-    text-left
-    md:px-0;
-}
-
-.searchResultsColumns {
-  @apply relative
-    mt-12
-    grid
-    gap-4
-    md:grid-cols-[15%_1fr];
-}
-
-.facetsColumn {
-  @apply sticky
-    top-0
-    flex
-    gap-4
-    overflow-x-auto
-    px-6
-    capitalize
-    md:flex-col
-    md:px-0;
-}
-
-.facetCount {
-  @apply ml-2
-    text-sm
-    text-neutral-500
-    dark:text-neutral-800;
-}
-
-.resultsColumn {
-  @apply flex
-    flex-col
-    gap-4
-    px-2;
-}
-
-.searchResult {
-  @apply flex
-    w-full
-    flex-col
-    rounded-lg
-    px-4
-    py-2
-    hover:bg-neutral-100
-    dark:hover:bg-neutral-900;
-}
-
-.searchResultTitle {
-  @apply text-lg;
-}
-
-.searchResultPageTitle {
-  @apply text-sm
-    capitalize
-    text-neutral-500
-    dark:text-neutral-600;
-}
-
-.searchResultSnippet {
-  @apply my-2
-    text-sm
-    text-neutral-500
-    dark:text-neutral-400;
-}
diff --git a/apps/site/components/MDX/SearchPage/index.tsx b/apps/site/components/MDX/SearchPage/index.tsx
deleted file mode 100644
index 1702eb288dc7c..0000000000000
--- a/apps/site/components/MDX/SearchPage/index.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-'use client';
-
-import type { Nullable, Results, Result } from '@orama/orama';
-import { useSearchParams } from 'next/navigation';
-import { useTranslations } from 'next-intl';
-import { useEffect, useState, type FC } from 'react';
-
-import { WithPoweredBy } from '@/components/Common/Search/States/WithPoweredBy';
-import { WithSearchBox } from '@/components/Common/Search/States/WithSearchBox';
-import { pathToBreadcrumbs } from '@/components/Common/Search/utils';
-import Link from '@/components/Link';
-import { useBottomScrollListener } from '@/hooks/react-client';
-import { BASE_URL, DEFAULT_ORAMA_QUERY_PARAMS } from '@/next.constants.mjs';
-import { search as oramaSearch, highlighter } from '@/next.orama.mjs';
-import type { SearchDoc } from '@/types';
-
-import styles from './index.module.css';
-
-type SearchResults = Nullable<Results<SearchDoc>>;
-type Hit = Result<SearchDoc>;
-
-const SearchPage: FC = () => {
-  const t = useTranslations();
-  const searchParams = useSearchParams();
-  const [searchResults, setSearchResults] = useState<SearchResults>(null);
-  const [hits, setHits] = useState<Array<Hit>>([]);
-  const [offset, setOffset] = useState<number>(0);
-
-  const searchTerm = searchParams?.get('q');
-  const searchSection = searchParams?.get('section');
-  const [shownSearchBox, setShownSearchbox] = useState<boolean>(!searchTerm);
-
-  useBottomScrollListener(() => setOffset(offset => offset + 10));
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => search(offset), [offset]);
-
-  useEffect(() => {
-    setHits([]);
-    search(0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchSection, searchTerm]);
-
-  const uniqueHits = (newHits: Array<Hit>) =>
-    newHits.filter(
-      (obj, index) => newHits.findIndex(item => item.id === obj.id) === index
-    );
-
-  const search = (resultsOffset = 0) => {
-    oramaSearch({
-      ...DEFAULT_ORAMA_QUERY_PARAMS,
-      mode: 'fulltext',
-      term: searchTerm || '',
-      limit: 10,
-      offset: resultsOffset,
-      ...filterBySection(),
-    })
-      .then(results => {
-        setSearchResults(results);
-        setHits(hits => uniqueHits([...hits, ...(results?.hits ?? [])]));
-      })
-      .catch();
-  };
-
-  const facets = {
-    all: searchResults?.count ?? 0,
-    ...(searchResults?.facets?.siteSection?.values ?? {}),
-  };
-
-  const filterBySection = () =>
-    searchSection && searchSection !== 'all'
-      ? { where: { siteSection: { eq: searchSection } } }
-      : {};
-
-  const getDocumentURL = (siteSection: string, path: string) => {
-    const isAPIResult = siteSection.toLowerCase() === 'docs';
-    const basePath = isAPIResult ? BASE_URL : '';
-    return `${basePath}/${path}`;
-  };
-
-  return (
-    <div className={styles.searchPageContainer}>
-      {shownSearchBox ? (
-        <WithSearchBox onClose={() => setShownSearchbox(false)} />
-      ) : null}
-      <div className={styles.searchTermContainer}>
-        <h1>
-          {t('components.search.searchPage.title', { query: searchTerm })}
-        </h1>
-
-        <WithPoweredBy />
-      </div>
-
-      <div className={styles.searchResultsColumns}>
-        <div className={styles.facetsColumn}>
-          {Object.keys(facets).map(facetName => (
-            <Link
-              key={facetName}
-              className={styles.searchResultsFacet}
-              href={`/search?q=${searchTerm}&section=${facetName}`}
-            >
-              {facetName}
-              <span className={styles.facetCount}>
-                ({facets[facetName as keyof typeof facets]})
-              </span>
-            </Link>
-          ))}
-        </div>
-
-        <div className={styles.resultsColumn}>
-          {hits?.map(hit => (
-            <Link
-              key={hit.id}
-              className={styles.searchResult}
-              href={getDocumentURL(
-                hit.document.siteSection.toLowerCase(),
-                hit.document.path
-              )}
-            >
-              <div>
-                <h2 className={styles.searchResultTitle}>
-                  {hit.document.pageSectionTitle}
-                </h2>
-
-                <p
-                  className={styles.searchResultSnippet}
-                  dangerouslySetInnerHTML={{
-                    __html: highlighter
-                      .highlight(hit.document.pageSectionContent, searchTerm!)
-                      .trim(180),
-                  }}
-                />
-
-                <div className={styles.searchResultPageTitle}>
-                  Home {'>'} {pathToBreadcrumbs(hit.document.path).join(' > ')}
-                </div>
-              </div>
-            </Link>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SearchPage;
diff --git a/apps/site/hooks/react-client/__tests__/useBottomScrollListener.test.mjs b/apps/site/hooks/react-client/__tests__/useBottomScrollListener.test.mjs
deleted file mode 100644
index db3dee7456d6f..0000000000000
--- a/apps/site/hooks/react-client/__tests__/useBottomScrollListener.test.mjs
+++ /dev/null
@@ -1,37 +0,0 @@
-import { fireEvent, renderHook, act } from '@testing-library/react';
-
-import useBottomScrollListener from '@/hooks/react-client/useBottomScrollListener';
-
-describe('useBottomScrollListener', () => {
-  it('should call the callback when the scroll reaches the bottom', () => {
-    const callback = jest.fn();
-    renderHook(() => useBottomScrollListener(callback));
-
-    act(() => {
-      fireEvent.scroll(window, {
-        target: { scrollY: 100, innerHeight: 200, scrollHeight: 200 },
-      });
-    });
-
-    // timout is needed because the callback is called in the next tick
-    setTimeout(() => {
-      expect(callback).toHaveBeenCalled();
-    }, 1);
-  });
-
-  it('should not call the callback when the scroll does not reach the bottom', () => {
-    const callback = jest.fn();
-    renderHook(() => useBottomScrollListener(callback));
-
-    act(() => {
-      fireEvent.scroll(window, {
-        target: { scrollY: 100, innerHeight: 200, scrollHeight: 300 },
-      });
-    });
-
-    // timout is needed because the callback is called in the next tick
-    setTimeout(() => {
-      expect(callback).not.toHaveBeenCalled();
-    }, 1);
-  });
-});
diff --git a/apps/site/hooks/react-client/__tests__/useClickOutside.test.mjs b/apps/site/hooks/react-client/__tests__/useClickOutside.test.mjs
deleted file mode 100644
index 9bcb82fd092de..0000000000000
--- a/apps/site/hooks/react-client/__tests__/useClickOutside.test.mjs
+++ /dev/null
@@ -1,45 +0,0 @@
-import { renderHook, act } from '@testing-library/react';
-
-import useClickOutside from '@/hooks/react-client/useClickOutside';
-
-describe('useClickOutside', () => {
-  it('should call the callback function when clicked outside the element', () => {
-    const fn = jest.fn();
-    const { rerender } = renderHook(() =>
-      useClickOutside({ current: null }, fn)
-    );
-
-    const mockEvent = new MouseEvent('click', { bubbles: true });
-    const mockElement = document.createElement('div');
-
-    rerender({ current: mockElement }, fn);
-
-    act(() => {
-      document.dispatchEvent(mockEvent);
-    });
-
-    setTimeout(() => {
-      expect(fn).toHaveBeenCalledTimes(1);
-    }, 1);
-  });
-
-  it('should not call the callback function when clicked inside the element', () => {
-    const fn = jest.fn();
-    const { rerender } = renderHook(() =>
-      useClickOutside({ current: null }, fn)
-    );
-
-    const mockEvent = new MouseEvent('click', { bubbles: true });
-    const mockElement = document.createElement('div');
-    const mockChildElement = document.createElement('button');
-    mockElement.appendChild(mockChildElement);
-
-    rerender({ current: mockElement }, fn);
-
-    act(() => {
-      mockChildElement.dispatchEvent(mockEvent);
-    });
-
-    expect(fn).not.toHaveBeenCalled();
-  });
-});
diff --git a/apps/site/hooks/react-client/__tests__/useKeyboardCommands.test.mjs b/apps/site/hooks/react-client/__tests__/useKeyboardCommands.test.mjs
deleted file mode 100644
index dc52ed2acf454..0000000000000
--- a/apps/site/hooks/react-client/__tests__/useKeyboardCommands.test.mjs
+++ /dev/null
@@ -1,51 +0,0 @@
-import { renderHook, act, fireEvent } from '@testing-library/react';
-
-import useKeyboardCommands from '@/hooks/react-client/useKeyboardCommands';
-
-describe('useKeyboardCommands', () => {
-  it('should call the callback function with the correct command', () => {
-    const fn = jest.fn();
-    renderHook(props => useKeyboardCommands(props), { initialProps: fn });
-
-    act(() => {
-      fireEvent.keyDown(document, { key: 'k', metaKey: true });
-    });
-    expect(fn).toHaveBeenCalledWith('cmd-k');
-    fn.mockClear();
-
-    act(() => {
-      fireEvent.keyDown(document, { key: 'Escape' });
-    });
-    expect(fn).toHaveBeenCalledWith('escape');
-    fn.mockClear();
-
-    act(() => {
-      fireEvent.keyDown(document, { key: 'Enter' });
-    });
-    expect(fn).toHaveBeenCalledWith('enter');
-    fn.mockClear();
-
-    act(() => {
-      fireEvent.keyDown(document, { key: 'ArrowDown' });
-    });
-    expect(fn).toHaveBeenCalledWith('down');
-    fn.mockClear();
-
-    act(() => {
-      fireEvent.keyDown(document, { key: 'ArrowUp' });
-    });
-    expect(fn).toHaveBeenCalledWith('up');
-    fn.mockClear();
-  });
-
-  it('should not call the callback function for unsupported keys', () => {
-    const fn = jest.fn();
-    renderHook(props => useKeyboardCommands(props), { initialProps: fn });
-
-    act(() => {
-      fireEvent.keyDown(document, { key: 'a' });
-    });
-
-    expect(fn).not.toHaveBeenCalled();
-  });
-});
diff --git a/apps/site/hooks/react-client/index.ts b/apps/site/hooks/react-client/index.ts
index c78f8d3cfbc38..33a9392db1a58 100644
--- a/apps/site/hooks/react-client/index.ts
+++ b/apps/site/hooks/react-client/index.ts
@@ -3,7 +3,4 @@ export { default as useDetectOS } from './useDetectOS';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';
-export { default as useKeyboardCommands } from './useKeyboardCommands';
-export { default as useClickOutside } from './useClickOutside';
-export { default as useBottomScrollListener } from './useBottomScrollListener';
 export { default as useNavigationState } from './useNavigationState';
diff --git a/apps/site/hooks/react-client/useBottomScrollListener.ts b/apps/site/hooks/react-client/useBottomScrollListener.ts
deleted file mode 100644
index 7c65471159701..0000000000000
--- a/apps/site/hooks/react-client/useBottomScrollListener.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import { debounce } from '@/util/debounce';
-
-type CallbackFunction = () => void;
-
-const useBottomScrollListener = (
-  callback: CallbackFunction,
-  debounceTime = 300
-) => {
-  const [bottomReached, setBottomReached] = useState(false);
-
-  const debouncedCallback = debounce(callback, debounceTime);
-
-  const handleScroll = () => {
-    const scrollTop = document.documentElement.scrollTop;
-    const windowHeight = window.innerHeight;
-    const height = document.documentElement.scrollHeight;
-
-    const bottomOfWindow = Math.ceil(scrollTop + windowHeight) >= height;
-
-    if (bottomOfWindow) {
-      setBottomReached(true);
-      debouncedCallback();
-    } else {
-      setBottomReached(false);
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll, { passive: true });
-
-    return () => window.removeEventListener('scroll', handleScroll);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return bottomReached;
-};
-
-export default useBottomScrollListener;
diff --git a/apps/site/hooks/react-client/useClickOutside.ts b/apps/site/hooks/react-client/useClickOutside.ts
deleted file mode 100644
index 88337392b9b48..0000000000000
--- a/apps/site/hooks/react-client/useClickOutside.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { RefObject } from 'react';
-import { useEffect } from 'react';
-
-const useClickOutside = <T extends HTMLElement>(
-  ref: RefObject<T>,
-  fn: () => void
-) => {
-  useEffect(() => {
-    const element = ref?.current;
-    const handleClickOutside = (event: Event) => {
-      if (element && !element.contains(event.target as Node)) {
-        fn();
-      }
-    };
-    document.addEventListener('click', handleClickOutside);
-    return () => document.removeEventListener('click', handleClickOutside);
-  }, [ref, fn]);
-};
-
-export default useClickOutside;
diff --git a/apps/site/hooks/react-client/useKeyboardCommands.ts b/apps/site/hooks/react-client/useKeyboardCommands.ts
deleted file mode 100644
index 89b4513edbd85..0000000000000
--- a/apps/site/hooks/react-client/useKeyboardCommands.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useEffect } from 'react';
-
-type KeyboardCommand = 'cmd-k' | 'escape' | 'down' | 'up' | 'enter';
-
-type KeyboardCommandCallback = (key: KeyboardCommand) => void;
-
-const useKeyboardCommands = (fn: KeyboardCommandCallback) => {
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      // Detect ⌘ + k on Mac, Ctrl + k on Windows
-      if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
-        event.preventDefault();
-        fn('cmd-k');
-      }
-
-      switch (event.key) {
-        case 'Escape':
-          fn('escape');
-          break;
-        case 'Enter':
-          fn('enter');
-          break;
-        case 'ArrowDown':
-          fn('down');
-          break;
-        case 'ArrowUp':
-          fn('up');
-          break;
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [fn]);
-};
-
-export default useKeyboardCommands;
diff --git a/apps/site/next.config.mjs b/apps/site/next.config.mjs
index 9fd5295768103..85732bff5e9ab 100644
--- a/apps/site/next.config.mjs
+++ b/apps/site/next.config.mjs
@@ -117,7 +117,7 @@ const nextConfig = {
     instrumentationHook: true,
   },
   // To import ESM-only packages with next dev --turbo. Source: https://github.com/vercel/next.js/issues/63318#issuecomment-2079677098
-  transpilePackages: ['shiki'],
+  transpilePackages: ['shiki', '@orama/react-components'],
 };
 
 /** @type {import('@sentry/cli').SentryCliOptions} */
diff --git a/apps/site/next.constants.mjs b/apps/site/next.constants.mjs
index e3a9120ae45c7..fe6f456e85a82 100644
--- a/apps/site/next.constants.mjs
+++ b/apps/site/next.constants.mjs
@@ -130,8 +130,7 @@ export const EXTERNAL_LINKS_SITEMAP = [
  * @see https://docs.oramasearch.com/open-source/usage/search/introduction
  */
 export const DEFAULT_ORAMA_QUERY_PARAMS = {
-  mode: 'fulltext',
-  limit: 8,
+  limit: 25,
   threshold: 0,
   boost: {
     pageSectionTitle: 4,
@@ -143,6 +142,15 @@ export const DEFAULT_ORAMA_QUERY_PARAMS = {
   },
 };
 
+/**
+ * The initial Orama Cloud chat suggestions visible in the empty state of the search box.
+ */
+export const DEFAULT_ORAMA_SUGGESTIONS = [
+  'How to install Node.js?',
+  'How to create an HTTP server?',
+  'Upgrading Node.js version',
+];
+
 /**
  * The default batch size to use when syncing Orama Cloud
  */
diff --git a/apps/site/next.mdx.use.mjs b/apps/site/next.mdx.use.mjs
index 54191ff55b952..67c8adaf9082f 100644
--- a/apps/site/next.mdx.use.mjs
+++ b/apps/site/next.mdx.use.mjs
@@ -17,7 +17,6 @@ import SourceButton from './components/Downloads/Release/SourceButton';
 import VerifyingBinariesLink from './components/Downloads/Release/VerifyingBinariesLink';
 import VersionDropdown from './components/Downloads/Release/VersionDropdown';
 import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
-import SearchPage from './components/MDX/SearchPage';
 import WithBadge from './components/withBadge';
 import WithBanner from './components/withBanner';
 import WithNodeRelease from './components/withNodeRelease';
@@ -39,8 +38,6 @@ export const mdxComponents = {
   DownloadButton: DownloadButton,
   // Renders a Download Link
   DownloadLink: DownloadLink,
-  // Renders a Search Page
-  SearchPage: SearchPage,
   // Renders an container for Upcoming Node.js Meetings
   UpcomingMeetings: UpcomingMeetings,
   // Group of components that enable you to select versions for Node.js
diff --git a/apps/site/next.orama.mjs b/apps/site/next.orama.mjs
deleted file mode 100644
index 5a7c150d2b777..0000000000000
--- a/apps/site/next.orama.mjs
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Highlight } from '@orama/highlight';
-import { OramaClient } from '@oramacloud/client';
-
-import {
-  DEFAULT_ORAMA_QUERY_PARAMS,
-  ORAMA_CLOUD_ENDPOINT,
-  ORAMA_CLOUD_API_KEY,
-} from './next.constants.mjs';
-
-// Provides a safe-wrapper that initialises the OramaClient
-// based on the presence of environmental variables
-const { search, getInitialFacets } = (() => {
-  if (ORAMA_CLOUD_ENDPOINT && ORAMA_CLOUD_API_KEY) {
-    const orama = new OramaClient({
-      endpoint: ORAMA_CLOUD_ENDPOINT,
-      api_key: ORAMA_CLOUD_API_KEY,
-    });
-
-    return {
-      search: orama.search.bind(orama),
-      getInitialFacets: async () =>
-        orama.search({ term: '', ...DEFAULT_ORAMA_QUERY_PARAMS }).catch(),
-    };
-  }
-
-  return { search: async () => null, getInitialFacets: async () => null };
-})();
-
-export { search, getInitialFacets };
-
-export const highlighter = new Highlight({
-  CSSClass: 'font-bold',
-  HTMLTag: 'span',
-});
diff --git a/apps/site/package.json b/apps/site/package.json
index 2b8643d89aab7..5778e2b2585d3 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -40,7 +40,7 @@
     "@mdx-js/mdx": "^3.0.1",
     "@node-core/website-i18n": "*",
     "@nodevu/core": "~0.1.0",
-    "@orama/highlight": "^0.1.6",
+    "@orama/react-components": "^0.1.10",
     "@oramacloud/client": "^1.3.16",
     "@radix-ui/react-accessible-icon": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.1",
diff --git a/apps/site/pages/en/search.mdx b/apps/site/pages/en/search.mdx
deleted file mode 100644
index ac57c0e414803..0000000000000
--- a/apps/site/pages/en/search.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: search
-title: Search Results
----
-
-<SearchPage />
diff --git a/apps/site/pages/fa/search.mdx b/apps/site/pages/fa/search.mdx
deleted file mode 100644
index 789c12514cdfa..0000000000000
--- a/apps/site/pages/fa/search.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: search
-title: نتایج جستجو
----
-
-<SearchPage />
diff --git a/apps/site/pages/fr/search.mdx b/apps/site/pages/fr/search.mdx
deleted file mode 100644
index e1e31021bab81..0000000000000
--- a/apps/site/pages/fr/search.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: search
-title: Résultats de la recherche
----
-
-<SearchPage />
diff --git a/apps/site/pages/id/search.mdx b/apps/site/pages/id/search.mdx
deleted file mode 100644
index 7b4a2ae44d4c4..0000000000000
--- a/apps/site/pages/id/search.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: search
-title: Hasil Pencarian
----
-
-<SearchPage />
diff --git a/apps/site/pages/ja/search.mdx b/apps/site/pages/ja/search.mdx
deleted file mode 100644
index ad7e918069f96..0000000000000
--- a/apps/site/pages/ja/search.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: search
-title: 検索結果
----
-
-<SearchPage />
diff --git a/apps/site/pages/ko/search.mdx b/apps/site/pages/ko/search.mdx
deleted file mode 100644
index e9eaeb4f3fb9e..0000000000000
--- a/apps/site/pages/ko/search.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: search
-title: 검색결과
----
-
-<SearchPage />
diff --git a/apps/site/pages/pt/search.mdx b/apps/site/pages/pt/search.mdx
deleted file mode 100644
index 8760cc8d396e3..0000000000000
--- a/apps/site/pages/pt/search.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: search
-title: Resultados da Pesquisa
----
-
-<SearchPage />
diff --git a/apps/site/pages/tr/search.mdx b/apps/site/pages/tr/search.mdx
deleted file mode 100644
index 5db97e62c1b65..0000000000000
--- a/apps/site/pages/tr/search.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: search
-title: Arama Sonuçları
----
-
-<SearchPage />
diff --git a/apps/site/pages/uk/search.mdx b/apps/site/pages/uk/search.mdx
deleted file mode 100644
index df80d434d9e4c..0000000000000
--- a/apps/site/pages/uk/search.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: search
-title: Результати пошуку
----
-
-<SearchPage />
diff --git a/apps/site/pages/zh-cn/search.mdx b/apps/site/pages/zh-cn/search.mdx
deleted file mode 100644
index c33e34ff57dcd..0000000000000
--- a/apps/site/pages/zh-cn/search.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: search
-title: 搜索结果
----
-
-<SearchPage />
diff --git a/apps/site/pages/zh-tw/search.mdx b/apps/site/pages/zh-tw/search.mdx
deleted file mode 100644
index d484b08ae27f5..0000000000000
--- a/apps/site/pages/zh-tw/search.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: search
-title: 搜尋結果
----
-
-<SearchPage />
diff --git a/apps/site/scripts/orama-search/get-documents.mjs b/apps/site/scripts/orama-search/get-documents.mjs
index 617ea11301a91..f9557371e113b 100644
--- a/apps/site/scripts/orama-search/get-documents.mjs
+++ b/apps/site/scripts/orama-search/get-documents.mjs
@@ -46,6 +46,9 @@ const splitIntoSections = markdownContent => {
   }));
 };
 
+const uppercaseFirst = string =>
+  string.charAt(0).toUpperCase() + string.slice(1);
+
 const getPageTitle = data =>
   data.title ||
   data.pathname
@@ -63,11 +66,14 @@ export const siteContent = [...pageData, ...apiData]
 
     const siteSection = pathname.split('/').shift();
     const subSections = splitIntoSections(markdownContent);
-
     return subSections.map(section => {
+      const path = `${pathname}#${slug(section.pageSectionTitle)}`;
+
       return {
-        path: pathname + '#' + slug(section.pageSectionTitle),
-        siteSection,
+        path,
+        siteSection: uppercaseFirst(siteSection),
+        pageLink:
+          siteSection.toLowerCase() === 'docs' ? `/${path}` : `/en/${path}`,
         pageTitle: title,
         ...section,
       };
diff --git a/apps/site/types/index.ts b/apps/site/types/index.ts
index 567d44d0e088a..c26a8e205a2b9 100644
--- a/apps/site/types/index.ts
+++ b/apps/site/types/index.ts
@@ -10,4 +10,3 @@ export * from './redirects';
 export * from './server';
 export * from './github';
 export * from './calendar';
-export * from './search';
diff --git a/apps/site/types/search.ts b/apps/site/types/search.ts
deleted file mode 100644
index 03ac4e67a4a18..0000000000000
--- a/apps/site/types/search.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface SearchDoc {
-  id: string;
-  path: string;
-  pageTitle: string;
-  siteSection: string;
-  pageSectionTitle: string;
-  pageSectionContent: string;
-}
diff --git a/apps/site/util/searchUtils.ts b/apps/site/util/searchUtils.ts
deleted file mode 100644
index 6c5e1cb243b2c..0000000000000
--- a/apps/site/util/searchUtils.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { Result } from '@orama/orama';
-
-import { BASE_URL } from '@/next.constants.mjs';
-import type { SearchDoc } from '@/types';
-
-export const searchHitToLinkPath = (hit: Result<SearchDoc>) => {
-  const isAPIResult = hit.document.siteSection.toLowerCase() === 'docs';
-  const basePath = isAPIResult ? BASE_URL : '';
-  return `${basePath}/${hit.document.path}`;
-};
diff --git a/package-lock.json b/package-lock.json
index 89ff6408690f1..e56c034d39add 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,7 @@
         "@mdx-js/mdx": "^3.0.1",
         "@node-core/website-i18n": "*",
         "@nodevu/core": "~0.1.0",
-        "@orama/highlight": "^0.1.6",
+        "@orama/react-components": "^0.1.10",
         "@oramacloud/client": "^1.3.16",
         "@radix-ui/react-accessible-icon": "^1.1.0",
         "@radix-ui/react-avatar": "^1.1.1",
@@ -4514,6 +4514,21 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz",
+      "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
+      "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0"
+      }
+    },
     "node_modules/@mdx-js/mdx": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.0.tgz",
@@ -5715,6 +5730,54 @@
         "node": ">= 16.0.0"
       }
     },
+    "node_modules/@orama/react-components": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@orama/react-components/-/react-components-0.1.10.tgz",
+      "integrity": "sha512-p/xmGPG3UfvBlz+fierFcEbcf53HD/AUN4yMtzKAR/uHT9IvSFYFu0/kIrTJZuQskCmTrHASagHldFpXw+NFhg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@orama/wc-components": "0.1.10"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.3.1",
+        "react-dom": "^17.0.0 || ^18.3.1"
+      }
+    },
+    "node_modules/@orama/wc-components": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@orama/wc-components/-/wc-components-0.1.10.tgz",
+      "integrity": "sha512-EZ1tr12IfaNx9oQUvi5J38Yrm7nshCMKBYh0MTYz5RQUG5WuW19GFZ6BqawGiUrtvk9oZNAkw6aGCYA8E4IuaA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@orama/highlight": "^0.1.6",
+        "@orama/orama": "^2.0.23",
+        "@oramacloud/client": "1.3.17",
+        "@phosphor-icons/webcomponents": "^2.1.5",
+        "@stencil/core": "^4.19.0",
+        "@stencil/store": "^2.0.16",
+        "dompurify": "^3.1.6",
+        "highlight.js": "^11.10.0",
+        "markdown-it": "^14.1.0",
+        "marked": "^13.0.2",
+        "marked-highlight": "^2.1.3",
+        "shiki": "^1.10.3",
+        "sse.js": "^2.5.0"
+      }
+    },
+    "node_modules/@orama/wc-components/node_modules/@oramacloud/client": {
+      "version": "1.3.17",
+      "resolved": "https://registry.npmjs.org/@oramacloud/client/-/client-1.3.17.tgz",
+      "integrity": "sha512-6o2NmRwaKwog39/9KEKVait1P3vRL/9sKMviewLBv+GD+av3MJQ+3yC6SPil7Ti354S2DizmFh3xScgon6TyXg==",
+      "license": "ISC",
+      "dependencies": {
+        "@orama/orama": "^2.0.16",
+        "@paralleldrive/cuid2": "^2.2.1",
+        "lodash": "^4.17.21",
+        "openai": "^4.24.1",
+        "react": "^18.2.0",
+        "vue": "^3.4.25"
+      }
+    },
     "node_modules/@oramacloud/client": {
       "version": "1.3.18",
       "resolved": "https://registry.npmjs.org/@oramacloud/client/-/client-1.3.18.tgz",
@@ -5729,6 +5792,24 @@
         "vue": "^3.4.25"
       }
     },
+    "node_modules/@paralleldrive/cuid2": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@paralleldrive/cuid2/-/cuid2-2.2.2.tgz",
+      "integrity": "sha512-ZOBkgDwEdoYVlSeRbYYXs0S9MejQofiVYoTbKzy/6GQa39/q5tQU2IX46+shYnUkpEl3wc+J6wRlar7r2EK2xA==",
+      "license": "MIT",
+      "dependencies": {
+        "@noble/hashes": "^1.1.5"
+      }
+    },
+    "node_modules/@phosphor-icons/webcomponents": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/webcomponents/-/webcomponents-2.1.5.tgz",
+      "integrity": "sha512-JcvQkZxvcX2jK+QCclm8+e8HXqtdFW9xV4/kk2aL9Y3dJA2oQVt+pzbv1orkumz3rfx4K9mn9fDoMr1He1yr7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "lit": "^3"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -5831,7 +5912,6 @@
       "version": "0.52.1",
       "resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.52.1.tgz",
       "integrity": "sha512-qnSqB2DQ9TPP96dl8cDubDvrUyWc0/sK81xHTK8eSUspzDM3bsewX903qclQFvVhgStjRWdC5bLb3kQqMkfV5A==",
-      "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/api": "^1.0.0"
       },
@@ -7495,6 +7575,32 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@stencil/core": {
+      "version": "4.22.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.22.2.tgz",
+      "integrity": "sha512-eq2pYrrnzcLyBRANk0X/VVOfCtD0nCxWnEZ0AVdscuqfDkOjxa6SSZOfEhR9FAvrmESHp8y5jRCVPnf4n5CC4A==",
+      "license": "MIT",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
+      }
+    },
+    "node_modules/@stencil/store": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/@stencil/store/-/store-2.0.16.tgz",
+      "integrity": "sha512-ET3EByKlmNyTA8O+tcp5YWePOiVnPIiuoiIaxTrf3zFFVo7JWVsVoak9IE0UTn3MkIM0ubR9lgxvi70uN588/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0",
+        "npm": ">=6.0.0"
+      },
+      "peerDependencies": {
+        "@stencil/core": ">=2.0.0 || >=3.0.0 || >= 4.0.0-beta.0 || >= 4.0.0"
+      }
+    },
     "node_modules/@storybook/addon-controls": {
       "version": "8.3.6",
       "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.3.6.tgz",
@@ -8818,6 +8924,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -9864,7 +9976,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/aria-hidden": {
@@ -12752,6 +12863,12 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz",
+      "integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)"
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -15983,6 +16100,15 @@
         "he": "bin/he"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -19782,6 +19908,15 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/lint-staged": {
       "version": "15.2.10",
       "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.10.tgz",
@@ -20060,6 +20195,37 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/lit": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.1.tgz",
+      "integrity": "sha512-1BBa1E/z0O9ye5fZprPtdqnc0BFzxIxTTOO/tQFmyC/hj1O3jL4TfmLBw0WEwjAokdLwpclkvGgDJwTIh0/22w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^2.0.4",
+        "lit-element": "^4.1.0",
+        "lit-html": "^3.2.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.1.1.tgz",
+      "integrity": "sha512-HO9Tkkh34QkTeUmEdNYhMT8hzLid7YlMlATSi1q4q17HE5d9mrrEHJ/o8O2D0cMi182zK1F3v7x0PWFjrhXFew==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0",
+        "@lit/reactive-element": "^2.0.4",
+        "lit-html": "^3.2.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.1.tgz",
+      "integrity": "sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/load-plugin": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/load-plugin/-/load-plugin-6.0.3.tgz",
@@ -20603,6 +20769,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
@@ -20613,6 +20796,27 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/marked": {
+      "version": "13.0.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.3.tgz",
+      "integrity": "sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/marked-highlight": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/marked-highlight/-/marked-highlight-2.2.0.tgz",
+      "integrity": "sha512-36LzwtVf7HEbbMITKU4j+iZuyWKgdXJfgYr4F5j27vs79oRPyApuBF3WkS5OsqO1+1lypWxztad7zNRM4qgXFw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "marked": ">=4 <15"
+      }
+    },
     "node_modules/mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -21064,6 +21268,12 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -24118,6 +24328,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pure-rand": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
@@ -26859,6 +27078,12 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/sse.js": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/sse.js/-/sse.js-2.5.0.tgz",
+      "integrity": "sha512-I7zYndqOOkNpz9KIdFZ8c8A7zs1YazNewBr8Nsi/tqThfJkVPuP1q7UE2h4B0RwoWZxbBYpd06uoW3NI3SaZXg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/stable-hash": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.4.tgz",
@@ -29073,6 +29298,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
     "node_modules/uglify-js": {
       "version": "3.19.3",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",