diff --git a/apps/site/components/Common/Searchbox/ChatInteractions/index.module.css b/apps/site/components/Common/Searchbox/ChatInteractions/index.module.css
index 2bb4384ee51f5..9c3231c65b06c 100644
--- a/apps/site/components/Common/Searchbox/ChatInteractions/index.module.css
+++ b/apps/site/components/Common/Searchbox/ChatInteractions/index.module.css
@@ -39,7 +39,7 @@
 
 .scrollDownButton {
   @apply absolute
-    bottom-36
+    bottom-28
     left-1/2
     inline-flex
     -translate-x-1/2
@@ -53,7 +53,6 @@
     focus:bg-neutral-300
     focus:outline-none
     motion-safe:transition-colors
-    lg:bottom-28
     dark:bg-neutral-900
     dark:text-neutral-200
     focus:dark:bg-neutral-800;
diff --git a/apps/site/components/Common/Searchbox/ChatMessage/index.tsx b/apps/site/components/Common/Searchbox/ChatMessage/index.tsx
index 8b94f31ef9f96..8fb1d537ccfdb 100644
--- a/apps/site/components/Common/Searchbox/ChatMessage/index.tsx
+++ b/apps/site/components/Common/Searchbox/ChatMessage/index.tsx
@@ -1,8 +1,8 @@
+import ChatActions from '@node-core/ui-components/Common/Search/Chat/Actions';
 import type { Interaction } from '@orama/core';
 import { ChatInteractions } from '@orama/ui/components';
 import type { FC } from 'react';
 
-import { ChatActions } from '../ChatActions';
 import ChatSources from '../ChatSources';
 import styles from './index.module.css';
 
diff --git a/apps/site/components/Common/Searchbox/DocumentLink/index.module.css b/apps/site/components/Common/Searchbox/DocumentLink/index.module.css
index 9e0483cb5c47c..d5a426fe2194f 100644
--- a/apps/site/components/Common/Searchbox/DocumentLink/index.module.css
+++ b/apps/site/components/Common/Searchbox/DocumentLink/index.module.css
@@ -2,7 +2,7 @@
 
 .documentLink {
   @apply rounded-xl
-    bg-white
+    bg-neutral-100
     px-4
     py-2
     text-neutral-900
@@ -10,7 +10,6 @@
     hover:bg-neutral-200
     focus:bg-neutral-200
     motion-safe:transition-colors
-    lg:bg-neutral-100
     dark:bg-neutral-950
     dark:text-neutral-200
     hover:dark:bg-neutral-900
diff --git a/apps/site/components/Common/Searchbox/EmptyResults/index.tsx b/apps/site/components/Common/Searchbox/EmptyResults/index.tsx
deleted file mode 100644
index 9671ed04ae32f..0000000000000
--- a/apps/site/components/Common/Searchbox/EmptyResults/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import { SparklesIcon } from '@heroicons/react/24/outline';
-import { SearchResults, Suggestions } from '@orama/ui/components';
-import { useTranslations } from 'next-intl';
-import { type FC } from 'react';
-
-import { useSearchbox } from '#site/providers/searchboxProvider';
-
-import styles from './index.module.css';
-
-export const EmptyResults: FC = () => {
-  const t = useTranslations();
-  const searchbox = useSearchbox();
-  const isSearchMode = searchbox?.mode === 'search';
-
-  return (
-    <SearchResults.NoResults>
-      {term => (
-        <>
-          {term ? (
-            <div className={styles.noResultsWrapper}>
-              <p>
-                {t('components.search.noResultsFoundFor')} "{term}"
-              </p>
-            </div>
-          ) : (
-            <Suggestions.Wrapper className={styles.suggestionsWrapper}>
-              <p className={styles.suggestionsTitle}>
-                {t('components.search.suggestions')}
-              </p>
-              <Suggestions.Item
-                onClick={() => searchbox?.switchTo('chat')}
-                tabIndex={isSearchMode ? 0 : -1}
-                aria-hidden={!isSearchMode}
-                className={styles.suggestionItem}
-              >
-                <SparklesIcon />
-                {t('components.search.suggestionOne')}
-              </Suggestions.Item>
-              <Suggestions.Item
-                onClick={() => searchbox?.switchTo('chat')}
-                tabIndex={isSearchMode ? 0 : -1}
-                aria-hidden={!isSearchMode}
-                className={styles.suggestionItem}
-              >
-                <SparklesIcon />
-                {t('components.search.suggestionTwo')}
-              </Suggestions.Item>
-              <Suggestions.Item
-                tabIndex={isSearchMode ? 0 : -1}
-                aria-hidden={!isSearchMode}
-                onClick={() => searchbox?.switchTo('chat')}
-                className={styles.suggestionItem}
-              >
-                <SparklesIcon />
-                {t('components.search.suggestionThree')}
-              </Suggestions.Item>
-            </Suggestions.Wrapper>
-          )}
-        </>
-      )}
-    </SearchResults.NoResults>
-  );
-};
diff --git a/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.module.css b/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.module.css
deleted file mode 100644
index 211eedd672b8d..0000000000000
--- a/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-@reference "../../../../styles/index.css";
-
-.mobileChatContainer {
-  @apply flex
-    grow
-    flex-col
-    overflow-hidden
-    px-4
-    pb-4;
-}
-
-.mobileChatTop {
-  @apply grow
-    overflow-hidden;
-}
-
-.mobileChatBottom {
-  @apply mt-4;
-}
diff --git a/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.tsx b/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.tsx
deleted file mode 100644
index 99b3385250a70..0000000000000
--- a/apps/site/components/Common/Searchbox/InnerSearchboxModal/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client';
-import type { FC, PropsWithChildren } from 'react';
-import { useEffect, useState, useRef } from 'react';
-
-import { useSearchbox } from '#site/providers/searchboxProvider';
-
-import { ChatInput } from '../ChatInput';
-import { ChatInteractionsContainer } from '../ChatInteractions';
-import { Footer } from '../Footer';
-import { MobileTopBar } from '../MobileTopBar';
-import { Search } from '../Search';
-import { SlidingChatPanel } from '../SlidingChatPanel';
-import styles from './index.module.css';
-
-export const InnerSearchboxModal: FC<PropsWithChildren> = () => {
-  const searchbox = useSearchbox();
-  const [isMobileScreen, setIsMobileScreen] = useState(false);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-
-  const displaySearch =
-    !isMobileScreen || (isMobileScreen && searchbox?.mode === 'search');
-
-  useEffect(() => {
-    const checkScreenSize = () => {
-      setIsMobileScreen(window.innerWidth < 1024);
-    };
-    checkScreenSize();
-    window.addEventListener('resize', checkScreenSize);
-    return () => {
-      window.removeEventListener('resize', checkScreenSize);
-    };
-  }, []);
-
-  return (
-    <>
-      {isMobileScreen && (
-        <MobileTopBar
-          isChatOpen={searchbox?.mode === 'chat'}
-          onSelect={searchbox?.switchTo}
-        />
-      )}
-      {displaySearch && <Search ref={searchInputRef} />}
-      {isMobileScreen && searchbox?.mode === 'chat' && (
-        <>
-          <div className={styles.mobileChatContainer}>
-            <div className={styles.mobileChatTop}>
-              <ChatInteractionsContainer />
-            </div>
-            <div className={styles.mobileChatBottom}>
-              <ChatInput />
-            </div>
-          </div>
-          <Footer />
-        </>
-      )}
-      {!isMobileScreen && searchbox?.mode === 'chat' && (
-        <SlidingChatPanel
-          open={searchbox?.isChatOpen}
-          onClose={() => {
-            searchbox?.closeChatAndReset(() => {
-              searchInputRef.current?.focus();
-            });
-          }}
-        />
-      )}
-    </>
-  );
-};
diff --git a/apps/site/components/Common/Searchbox/MobileTopBar/index.module.css b/apps/site/components/Common/Searchbox/MobileTopBar/index.module.css
deleted file mode 100644
index 88c270ac7bff7..0000000000000
--- a/apps/site/components/Common/Searchbox/MobileTopBar/index.module.css
+++ /dev/null
@@ -1,67 +0,0 @@
-@reference "../../../../styles/index.css";
-
-.topBar {
-  @apply relative
-    flex
-    justify-center
-    p-4
-    lg:hidden;
-}
-
-.topBarArrow {
-  @apply absolute
-    top-1/2
-    left-4
-    -translate-y-1/2
-    text-neutral-900
-    dark:text-neutral-200;
-
-  svg {
-    @apply size-4;
-  }
-}
-
-.topBarTabs {
-  @apply flex
-    rounded-4xl
-    bg-neutral-200
-    p-1
-    text-sm
-    text-neutral-900
-    dark:bg-neutral-900
-    dark:text-neutral-200;
-}
-
-.topBarTab {
-  @apply flex
-    items-center
-    gap-1
-    px-4
-    py-1;
-
-  svg {
-    @apply size-4;
-  }
-}
-
-.topBarTabActive {
-  @apply relative
-    z-10
-    text-white
-    before:absolute
-    before:inset-0
-    before:z-[-1]
-    before:rounded-4xl
-    before:bg-black
-    motion-safe:transition-colors
-    dark:text-neutral-900
-    dark:before:bg-white;
-
-  &.topBarTabAnimated:first-of-type {
-    @apply before:animate-slide-to-left;
-  }
-
-  &.topBarTabAnimated:last-of-type {
-    @apply before:animate-slide-to-right;
-  }
-}
diff --git a/apps/site/components/Common/Searchbox/MobileTopBar/index.tsx b/apps/site/components/Common/Searchbox/MobileTopBar/index.tsx
deleted file mode 100644
index 8aab4ccb8dbf7..0000000000000
--- a/apps/site/components/Common/Searchbox/MobileTopBar/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client';
-
-import {
-  MagnifyingGlassIcon,
-  ArrowLeftIcon,
-  SparklesIcon,
-} from '@heroicons/react/24/solid';
-import { Modal } from '@orama/ui/components/Modal';
-import classNames from 'classnames';
-import type { FC } from 'react';
-import { useState } from 'react';
-
-import '@orama/ui/styles.css';
-
-import styles from './index.module.css';
-
-export const MobileTopBar: FC<{
-  isChatOpen: boolean;
-  onSelect?: (mode: 'search' | 'chat') => void;
-}> = ({ isChatOpen, onSelect }) => {
-  const [animated, setAnimated] = useState(false);
-
-  function selectMode(mode: 'search' | 'chat') {
-    onSelect?.(mode);
-
-    if (!animated) {
-      setAnimated(true);
-    }
-  }
-
-  return (
-    <div className={styles.topBar}>
-      <Modal.Close
-        className={styles.topBarArrow}
-        aria-label="Close search modal"
-      >
-        <ArrowLeftIcon />
-      </Modal.Close>
-      <div className={styles.topBarTabs}>
-        <button
-          className={classNames(styles.topBarTab, {
-            [styles.topBarTabActive]: !isChatOpen,
-            [styles.topBarTabAnimated]: animated,
-          })}
-          onClick={() => selectMode('search')}
-        >
-          <span>Search</span>
-          <MagnifyingGlassIcon />
-        </button>
-        <button
-          className={classNames(styles.topBarTab, {
-            [styles.topBarTabActive]: isChatOpen,
-            [styles.topBarTabAnimated]: animated,
-          })}
-          onClick={() => selectMode('chat')}
-        >
-          <SparklesIcon />
-          <span>Ask AI</span>
-        </button>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/site/components/Common/Searchbox/Search/index.tsx b/apps/site/components/Common/Searchbox/Search/index.tsx
deleted file mode 100644
index 3c006d0be61ea..0000000000000
--- a/apps/site/components/Common/Searchbox/Search/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-
-import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
-import { SearchInput } from '@orama/ui/components';
-import { useTranslations } from 'next-intl';
-import type { FC, PropsWithChildren } from 'react';
-
-import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
-import { useSearchbox } from '#site/providers/searchboxProvider';
-
-import { Footer } from '../Footer';
-import { SearchResultsWrapper } from '../SearchResults';
-import styles from './index.module.css';
-
-type SearchProps = PropsWithChildren & React.RefAttributes<HTMLInputElement>;
-
-export const Search: FC<SearchProps> = ({ ref }) => {
-  const t = useTranslations();
-  const searchbox = useSearchbox();
-  const isSearchMode = searchbox?.mode === 'search';
-
-  return (
-    <div className={styles.searchContainer}>
-      <SearchInput.Wrapper className={styles.searchInputWrapper}>
-        <MagnifyingGlassIcon />
-        <SearchInput.Input
-          inputId="orama-doc-search"
-          ariaLabel={t('components.search.searchPlaceholder')}
-          placeholder={t('components.search.searchPlaceholder')}
-          tabIndex={isSearchMode ? 0 : -1}
-          aria-hidden={!isSearchMode}
-          className={styles.searchInput}
-          searchParams={{
-            ...DEFAULT_ORAMA_QUERY_PARAMS,
-            groupBy: {
-              properties: ['siteSection'],
-            },
-            facets: {
-              siteSection: {},
-            },
-          }}
-          ref={ref}
-        />
-      </SearchInput.Wrapper>
-
-      <SearchResultsWrapper />
-      <Footer />
-    </div>
-  );
-};
diff --git a/apps/site/components/Common/Searchbox/Search/utils.ts b/apps/site/components/Common/Searchbox/Search/utils.ts
deleted file mode 100644
index 5fc41ceac70f1..0000000000000
--- a/apps/site/components/Common/Searchbox/Search/utils.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const uppercaseFirst = (word: string) =>
-  word.charAt(0).toUpperCase() + word.slice(1);
-
-export const getFormattedPath = (path: string, title: string) =>
-  `${path
-    .replace(/#.+$/, '')
-    .split('/')
-    .map(element => element.replaceAll('-', ' '))
-    .map(element => uppercaseFirst(element))
-    .filter(Boolean)
-    .join(' > ')} — ${title}`;
diff --git a/apps/site/components/Common/Searchbox/SearchItem/index.module.css b/apps/site/components/Common/Searchbox/SearchItem/index.module.css
index d731764ed2baf..6db5acb033ecb 100644
--- a/apps/site/components/Common/Searchbox/SearchItem/index.module.css
+++ b/apps/site/components/Common/Searchbox/SearchItem/index.module.css
@@ -17,9 +17,8 @@
       focus-visible:border-green-600
       focus-visible:bg-transparent
       motion-safe:transition-colors
-      dark:bg-zinc-950
-      dark:hover:bg-neutral-900
-      lg:dark:bg-neutral-950;
+      dark:bg-neutral-950
+      dark:hover:bg-neutral-900;
   }
 
   svg {
diff --git a/apps/site/components/Common/Searchbox/SearchItem/index.tsx b/apps/site/components/Common/Searchbox/SearchItem/index.tsx
index 32cb73025e0d7..7be5d4d704191 100644
--- a/apps/site/components/Common/Searchbox/SearchItem/index.tsx
+++ b/apps/site/components/Common/Searchbox/SearchItem/index.tsx
@@ -2,9 +2,7 @@
 
 import { DocumentTextIcon } from '@heroicons/react/24/outline';
 import { SearchResults } from '@orama/ui/components';
-import { useReducer, type FC } from 'react';
-
-import searchReducer, { searchState } from '#site/reducers/searchboxReducer';
+import type { FC } from 'react';
 
 import { DocumentLink } from '../DocumentLink';
 import type { Document } from '../DocumentLink';
@@ -13,32 +11,29 @@ import { getFormattedPath } from './utils';
 
 type SearchItemProps = {
   document: Document;
+  mode?: 'search' | 'chat';
 };
 
-export const SearchItem: FC<SearchItemProps> = ({ document }) => {
-  const [state] = useReducer(searchReducer, searchState);
-  const isSearchMode = state.mode === 'search';
-  return (
-    <SearchResults.Item className={styles.searchResultsItem}>
-      <DocumentLink
-        document={document as Document}
-        tabIndex={isSearchMode ? 0 : -1}
-        aria-hidden={!isSearchMode}
-        data-focus-on-arrow-nav
-      >
-        <DocumentTextIcon />
-        <div>
-          {typeof document?.pageSectionTitle === 'string' && (
-            <h3>{document.pageSectionTitle}</h3>
+export const SearchItem: FC<SearchItemProps> = ({ document, mode }) => (
+  <SearchResults.Item className={styles.searchResultsItem}>
+    <DocumentLink
+      document={document as Document}
+      tabIndex={mode === 'search' ? 0 : -1}
+      aria-hidden={mode === 'chat'}
+      data-focus-on-arrow-nav
+    >
+      <DocumentTextIcon />
+      <div>
+        {typeof document?.pageSectionTitle === 'string' && (
+          <h3>{document.pageSectionTitle}</h3>
+        )}
+        {typeof document?.pageSectionTitle === 'string' &&
+          typeof document?.path === 'string' && (
+            <p className={styles.searchResultsItemDescription}>
+              {getFormattedPath(document.path, document.pageSectionTitle)}
+            </p>
           )}
-          {typeof document?.pageSectionTitle === 'string' &&
-            typeof document?.path === 'string' && (
-              <p className={styles.searchResultsItemDescription}>
-                {getFormattedPath(document.path, document.pageSectionTitle)}
-              </p>
-            )}
-        </div>
-      </DocumentLink>
-    </SearchResults.Item>
-  );
-};
+      </div>
+    </DocumentLink>
+  </SearchResults.Item>
+);
diff --git a/apps/site/components/Common/Searchbox/SearchResults/index.module.css b/apps/site/components/Common/Searchbox/SearchResults/index.module.css
deleted file mode 100644
index 6957f388fedbf..0000000000000
--- a/apps/site/components/Common/Searchbox/SearchResults/index.module.css
+++ /dev/null
@@ -1,188 +0,0 @@
-@reference "../../../../styles/index.css";
-
-.searchResultsContainer {
-  @apply flex
-    grow
-    flex-col
-    overflow-y-auto;
-}
-
-.chatButtonWrapper {
-  @apply hidden
-    border-b
-    border-neutral-200
-    p-2
-    lg:block
-    dark:border-neutral-900;
-
-  svg {
-    @apply size-4;
-  }
-}
-
-.chatButton {
-  @apply flex
-    w-full
-    cursor-pointer
-    items-center
-    gap-2
-    rounded-lg
-    border
-    border-transparent
-    bg-transparent
-    p-3
-    text-sm
-    duration-300
-    hover:bg-neutral-300
-    focus-visible:border-green-600
-    focus-visible:outline-none
-    motion-safe:transition-colors
-    dark:hover:bg-neutral-900
-    dark:focus-visible:border-green-400;
-}
-
-.chatButtonWithSearch {
-  @apply bg-neutral-300
-    dark:bg-neutral-900;
-}
-
-.searchResultsWrapper {
-  @apply grow
-    overflow-y-auto
-    px-5
-    pt-3
-    text-neutral-900
-    lg:grow-0
-    dark:text-neutral-200;
-
-  &::-webkit-scrollbar {
-    @apply size-1.5;
-  }
-
-  &::-webkit-scrollbar-track {
-    @apply bg-transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    @apply rounded-md
-      bg-neutral-900;
-  }
-}
-
-.facetTabsWrapper {
-  @apply mb-2
-    overflow-x-auto;
-
-  &::-webkit-scrollbar {
-    @apply hidden;
-  }
-}
-
-.facetTabItem {
-  @apply flex
-    cursor-pointer
-    items-center
-    gap-2
-    rounded-3xl
-    border
-    border-neutral-200
-    px-3
-    py-1
-    text-sm
-    duration-300
-    focus:outline-none
-    focus-visible:bg-neutral-300
-    motion-safe:transition-colors
-    dark:border-neutral-900
-    dark:focus-visible:bg-neutral-900;
-}
-
-.facetTabItemSelected {
-  @apply border-2
-    border-green-600
-    dark:border-green-400;
-}
-
-.facetTabsList {
-  @apply flex
-    items-center
-    gap-2
-    overflow-x-auto;
-
-  &::-webkit-scrollbar {
-    @apply hidden;
-  }
-}
-
-.facetTabItemCount {
-  @apply text-neutral-700;
-}
-
-.searchResultsGroupWrapper {
-  @apply relative
-    items-start
-    overflow-y-auto;
-}
-
-.searchResultsGroup {
-  @apply mb-3
-    border-t
-    border-neutral-200
-    dark:border-neutral-900;
-}
-
-.searchResultsGroup:first-of-type {
-  @apply border-0;
-}
-
-.searchResultsGroupTitle {
-  @apply mt-4
-    mb-3
-    pl-2
-    text-sm
-    font-semibold
-    text-neutral-600
-    dark:text-neutral-600;
-}
-
-.skeletonWrapper {
-  @apply flex
-    flex-col
-    gap-5
-    py-6;
-}
-
-.skeletonItem {
-  @apply flex
-    items-center
-    gap-4;
-}
-
-.skeletonAnim {
-  @apply dark:animate-pulse-dark
-    animate-pulse
-    rounded-md;
-}
-
-.skeletonAvatar {
-  @apply h-6
-    w-5
-    shrink-0;
-}
-
-.skeletonText {
-  @apply flex
-    flex-1
-    flex-col
-    gap-2;
-}
-
-.skeletonLineShort {
-  @apply h-3
-    w-1/3;
-}
-
-.skeletonLineLong {
-  @apply h-3
-    w-2/3;
-}
diff --git a/apps/site/components/Common/Searchbox/SearchResults/index.tsx b/apps/site/components/Common/Searchbox/SearchResults/index.tsx
deleted file mode 100644
index a2f8f9529d94a..0000000000000
--- a/apps/site/components/Common/Searchbox/SearchResults/index.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-'use client';
-
-import { SparklesIcon } from '@heroicons/react/24/outline';
-import { FacetTabs, SearchResults, SlidingPanel } from '@orama/ui/components';
-import { useSearch } from '@orama/ui/hooks/useSearch';
-import classNames from 'classnames';
-import { useTranslations } from 'next-intl';
-import { type FC } from 'react';
-
-import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
-import { useSearchbox } from '#site/providers/searchboxProvider';
-
-import styles from './index.module.css';
-import type { Document } from '../DocumentLink';
-import { EmptyResults } from '../EmptyResults';
-import { SearchItem } from '../SearchItem';
-
-export const SearchResultsWrapper: FC = () => {
-  const t = useTranslations();
-  const {
-    context: { searchTerm, selectedFacet },
-  } = useSearch();
-  const searchbox = useSearchbox();
-  const isSearchMode = searchbox?.mode === 'search';
-
-  return (
-    <div className={styles.searchResultsContainer}>
-      <div className={styles.chatButtonWrapper}>
-        <SlidingPanel.Trigger
-          onClick={() => searchbox?.switchTo('chat')}
-          className={classNames(styles.chatButton, {
-            [styles.chatButtonWithSearch]: searchTerm,
-          })}
-          tabIndex={isSearchMode ? 0 : -1}
-          aria-hidden={!isSearchMode}
-          initialPrompt={searchTerm || undefined}
-          data-focus-on-arrow-nav
-        >
-          <SparklesIcon />
-          <span>
-            {searchTerm ? `${searchTerm} - ` : ''}
-            {t('components.search.chatButtonLabel')}
-          </span>
-        </SlidingPanel.Trigger>
-      </div>
-
-      <div className={styles.searchResultsWrapper}>
-        <SearchResults.Wrapper>
-          <FacetTabs.Wrapper className={styles.facetTabsWrapper}>
-            <FacetTabs.List className={styles.facetTabsList}>
-              {(group, isSelected) => (
-                <>
-                  <FacetTabs.Item
-                    isSelected={group.name === selectedFacet}
-                    group={group}
-                    filterBy="siteSection"
-                    searchParams={{
-                      ...DEFAULT_ORAMA_QUERY_PARAMS,
-                      term: searchTerm ?? '',
-                    }}
-                    tabIndex={isSearchMode ? 0 : -1}
-                    aria-hidden={!isSearchMode}
-                    className={classNames(
-                      isSelected && styles.facetTabItemSelected,
-                      styles.facetTabItem
-                    )}
-                  >
-                    {group.name}
-                    <span className={styles.facetTabItemCount}>
-                      ({group.count})
-                    </span>
-                  </FacetTabs.Item>
-                </>
-              )}
-            </FacetTabs.List>
-          </FacetTabs.Wrapper>
-
-          <SearchResults.Loading>
-            <div className={styles.skeletonWrapper}>
-              {[...Array(3)].map((_, index) => (
-                <div key={index} className={styles.skeletonItem}>
-                  <div
-                    className={classNames(
-                      styles.skeletonAnim,
-                      styles.skeletonAvatar
-                    )}
-                  />
-                  <div className={styles.skeletonText}>
-                    <div
-                      className={classNames(
-                        styles.skeletonAnim,
-                        styles.skeletonLineShort
-                      )}
-                    />
-                    <div
-                      className={classNames(
-                        styles.skeletonAnim,
-                        styles.skeletonLineLong
-                      )}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </SearchResults.Loading>
-
-          <EmptyResults />
-
-          <SearchResults.GroupsWrapper
-            className={styles.searchResultsGroupWrapper}
-            groupBy="siteSection"
-          >
-            {group => (
-              <div key={group.name} className={styles.searchResultsGroup}>
-                <h2 className={styles.searchResultsGroupTitle}>{group.name}</h2>
-                <SearchResults.GroupList group={group}>
-                  {hit => <SearchItem document={hit.document as Document} />}
-                </SearchResults.GroupList>
-              </div>
-            )}
-          </SearchResults.GroupsWrapper>
-        </SearchResults.Wrapper>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/site/components/Common/Searchbox/SlidingChatPanel/index.module.css b/apps/site/components/Common/Searchbox/SlidingChatPanel/index.module.css
index d515baea87855..4e9612bb55082 100644
--- a/apps/site/components/Common/Searchbox/SlidingChatPanel/index.module.css
+++ b/apps/site/components/Common/Searchbox/SlidingChatPanel/index.module.css
@@ -28,6 +28,7 @@
     box-border
     h-[95vh]
     w-full
+    justify-self-center
     overflow-hidden
     rounded-lg
     border
diff --git a/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx b/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx
index 94a7b1acb3a76..42d46bab4b55c 100644
--- a/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx
+++ b/apps/site/components/Common/Searchbox/SlidingChatPanel/index.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import { XMarkIcon } from '@heroicons/react/24/solid';
+import ChatInput from '@node-core/ui-components/Common/Search/Chat/Input';
 import { SlidingPanel } from '@orama/ui/components';
 import { useTranslations } from 'next-intl';
 import type { FC, PropsWithChildren } from 'react';
 
-import { ChatInput } from '../ChatInput';
 import styles from './index.module.css';
 import { ChatInteractionsContainer } from '../ChatInteractions';
 
@@ -37,7 +37,15 @@ export const SlidingChatPanel: FC<SlidingChatPanelProps> = ({
           <div className={styles.slidingPanelInner}>
             <ChatInteractionsContainer />
             <div className={styles.slidingPanelBottom}>
-              <ChatInput />
+              <ChatInput
+                suggestions={[
+                  t('components.search.suggestionOne'),
+                  t('components.search.suggestionTwo'),
+                  t('components.search.suggestionThree'),
+                ]}
+                placeholder={t('components.search.chatPlaceholder')}
+                disclaimer={t('components.search.disclaimer')}
+              />
             </div>
           </div>
         </SlidingPanel.Content>
diff --git a/apps/site/components/Common/Searchbox/index.module.css b/apps/site/components/Common/Searchbox/index.module.css
index 5c94c5cb4b1a5..207d7ab262ae6 100644
--- a/apps/site/components/Common/Searchbox/index.module.css
+++ b/apps/site/components/Common/Searchbox/index.module.css
@@ -1,105 +1,8 @@
 @reference "../../../styles/index.css";
 
-.searchboxContainer {
-  @apply grow;
-
-  * {
-    @apply antialiased;
-  }
-}
-
-.searchButton {
+.searchResultsContainer {
   @apply flex
-    w-full
     grow
-    cursor-pointer
-    items-center
-    justify-between
-    gap-1
-    rounded-xl
-    border
-    border-neutral-300
-    bg-white
-    p-1.5
-    text-neutral-900
-    duration-300
-    hover:bg-neutral-100
-    motion-safe:transition-colors
-    dark:border-neutral-900
-    dark:bg-neutral-950
-    dark:text-neutral-200
-    hover:dark:bg-neutral-900;
-}
-
-.searchButtonContent {
-  @apply relative
-    flex
-    flex-nowrap
-    items-center
-    gap-1
-    text-sm;
-
-  svg {
-    @apply size-4;
-  }
-}
-
-.searchButtonShortcut {
-  @apply hidden
-    rounded-md
-    bg-neutral-300
-    px-2
-    py-1
-    text-sm
-    text-neutral-800
-    lg:inline
-    dark:bg-neutral-900
-    dark:text-neutral-400;
-}
-
-.modalWrapper {
-  @apply fixed
-    top-0
-    left-0
-    z-50
-    mx-auto
-    my-0
-    flex
-    size-full
-    items-start
-    justify-center
-    bg-white/70
-    lg:pt-[5vh]
-    dark:bg-zinc-950/70;
-}
-
-.modalInner {
-  @apply fixed
-    top-0
-    bottom-0
-    mx-auto
-    my-0
-    flex
-    h-full
-    max-w-none
-    bg-white
-    lg:top-auto
-    lg:bottom-auto
-    lg:h-auto
-    lg:max-w-3xl
-    lg:bg-neutral-100
-    dark:bg-zinc-950
-    lg:dark:bg-neutral-950;
-}
-
-.modalContent {
-  @apply flex
-    h-full
     flex-col
-    border-neutral-200
-    lg:h-auto
-    lg:max-h-[70vh]
-    lg:rounded-xl
-    lg:border
-    dark:border-neutral-900;
+    overflow-y-auto;
 }
diff --git a/apps/site/components/Common/Searchbox/index.tsx b/apps/site/components/Common/Searchbox/index.tsx
index 1077e42274838..4ead827d34ddd 100644
--- a/apps/site/components/Common/Searchbox/index.tsx
+++ b/apps/site/components/Common/Searchbox/index.tsx
@@ -1,58 +1,64 @@
 'use client';
 
-import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
-import { SearchRoot, ChatRoot, Modal } from '@orama/ui/components';
+import ChatTrigger from '@node-core/ui-components/Common/Search/Chat/Trigger';
+import SearchModal from '@node-core/ui-components/Common/Search/Modal';
+import SearchResults from '@node-core/ui-components/Common/Search/Results';
+import SearchSuggestions from '@node-core/ui-components/Common/Search/Suggestions';
 import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 import type { FC } from 'react';
 
-import '@orama/ui/styles.css';
-import { SearchboxProvider } from '#site/providers/searchboxProvider';
+import { DEFAULT_ORAMA_QUERY_PARAMS } from '#site/next.constants.mjs';
 
+import type { Document } from './DocumentLink';
+import { Footer } from './Footer';
 import styles from './index.module.css';
-import { InnerSearchboxModal } from './InnerSearchboxModal';
 import { oramaClient } from './orama-client';
+import { SearchItem } from './SearchItem';
+import { SlidingChatPanel } from './SlidingChatPanel';
 
 const Searchbox: FC = () => {
   const t = useTranslations();
+  const [mode, setMode] = useState<'chat' | 'search'>('search');
 
-  return (
-    <SearchboxProvider>
-      <div className={styles.searchboxContainer}>
-        <Modal.Root>
-          <Modal.Trigger
-            type="button"
-            disabled={!oramaClient}
-            enableCmdK
-            className={styles.searchButton}
-          >
-            <div className={styles.searchButtonContent}>
-              <MagnifyingGlassIcon />
-              {t('components.search.searchPlaceholder')}
-            </div>
-            <span className={styles.searchButtonShortcut}>⌘ K</span>
-          </Modal.Trigger>
+  const sharedProps = {
+    searchParams: DEFAULT_ORAMA_QUERY_PARAMS,
+    tabIndex: mode === 'search' ? 0 : -1,
+    'aria-hidden': mode === 'chat',
+  };
 
-          <Modal.Wrapper
-            closeOnOutsideClick
-            closeOnEscape
-            className={styles.modalWrapper}
-          >
-            <SearchRoot client={oramaClient}>
-              <ChatRoot
-                client={oramaClient}
-                askOptions={{ throttle_delay: 50 }}
-              >
-                <Modal.Inner className={styles.modalInner}>
-                  <Modal.Content className={styles.modalContent}>
-                    <InnerSearchboxModal />
-                  </Modal.Content>
-                </Modal.Inner>
-              </ChatRoot>
-            </SearchRoot>
-          </Modal.Wrapper>
-        </Modal.Root>
+  return (
+    <SearchModal
+      client={oramaClient}
+      placeholder={t('components.search.searchPlaceholder')}
+    >
+      <div className={styles.searchResultsContainer}>
+        <ChatTrigger onClick={() => setMode('chat')}>
+          {t('components.search.chatButtonLabel')}
+        </ChatTrigger>
+        <SearchResults
+          noResultsTitle={t('components.search.noResultsFoundFor')}
+          onHit={hit => (
+            <SearchItem document={hit.document as Document} mode={mode} />
+          )}
+          {...sharedProps}
+        >
+          <SearchSuggestions
+            suggestions={[
+              t('components.search.suggestionOne'),
+              t('components.search.suggestionTwo'),
+              t('components.search.suggestionThree'),
+            ]}
+            label={t('components.search.suggestions')}
+          />
+        </SearchResults>
       </div>
-    </SearchboxProvider>
+      <Footer />
+      <SlidingChatPanel
+        open={mode === 'chat'}
+        onClose={() => setMode('search')}
+      />
+    </SearchModal>
   );
 };
 
diff --git a/apps/site/providers/searchboxProvider.tsx b/apps/site/providers/searchboxProvider.tsx
deleted file mode 100644
index 25ac547e9f313..0000000000000
--- a/apps/site/providers/searchboxProvider.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import type { FC, PropsWithChildren } from 'react';
-import { createContext, useContext, useReducer } from 'react';
-
-import searchReducer, {
-  searchState,
-  getActions,
-} from '#site/reducers/searchboxReducer';
-import type * as Types from '#site/types/searchbox';
-
-type SearchboxContextType =
-  | (Types.SearchboxState & Types.SearchboxDispatchActions)
-  | null;
-
-const SearchboxContext = createContext<SearchboxContextType>(null);
-
-export const SearchboxProvider: FC<PropsWithChildren> = ({ children }) => {
-  const [state, dispatch] = useReducer(searchReducer, searchState);
-  const actions = getActions(dispatch);
-
-  const contextValue: SearchboxContextType = {
-    ...state,
-    ...actions,
-  };
-
-  return (
-    <SearchboxContext.Provider value={contextValue}>
-      {children}
-    </SearchboxContext.Provider>
-  );
-};
-
-export const useSearchbox = (): SearchboxContextType => {
-  const context = useContext(SearchboxContext);
-  return context;
-};
diff --git a/apps/site/reducers/searchboxReducer.ts b/apps/site/reducers/searchboxReducer.ts
deleted file mode 100644
index 576f19dfa312c..0000000000000
--- a/apps/site/reducers/searchboxReducer.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { Dispatch } from 'react';
-
-import type * as Types from '#site/types/searchbox';
-
-export const searchState: Types.SearchboxState = {
-  // Default mode is search
-  mode: 'search',
-  // Chat panel starts closed
-  isChatOpen: false,
-};
-
-export const getActions = (
-  dispatch: Dispatch<Types.SearchboxAction>
-): Types.SearchboxDispatchActions => ({
-  setMode: payload => dispatch({ type: 'SET_MODE', payload }),
-  setChatOpen: payload => dispatch({ type: 'SET_CHAT_OPEN', payload }),
-  closeChatAndReset: (onComplete?: () => void) =>
-    dispatch({
-      type: 'CLOSE_CHAT_AND_RESET',
-      payload: { onComplete },
-    }),
-  switchTo: payload => dispatch({ type: 'SWITCH_TO', payload }),
-});
-
-const reducer = (
-  state: Types.SearchboxState,
-  action: Types.SearchboxAction
-): Types.SearchboxState => {
-  switch (action.type) {
-    case 'SET_MODE':
-      return { ...state, mode: action.payload };
-    case 'SET_CHAT_OPEN':
-      return { ...state, isChatOpen: action.payload };
-    case 'CLOSE_CHAT_AND_RESET':
-      if (action.payload?.onComplete) {
-        setTimeout(action.payload.onComplete, 0);
-      }
-      return {
-        ...state,
-        isChatOpen: false,
-        mode: 'search',
-      };
-    case 'SWITCH_TO':
-      return {
-        ...state,
-        mode: action.payload,
-        isChatOpen: action.payload === 'chat',
-      };
-    default:
-      return state;
-  }
-};
-
-export default reducer;
diff --git a/apps/site/types/index.ts b/apps/site/types/index.ts
index 23ed74f0acf4c..35643a647dbbe 100644
--- a/apps/site/types/index.ts
+++ b/apps/site/types/index.ts
@@ -16,4 +16,3 @@ export * from './download';
 export * from './userAgent';
 export * from './vulnerabilities';
 export * from './page';
-export * from './searchbox';
diff --git a/apps/site/types/searchbox.ts b/apps/site/types/searchbox.ts
deleted file mode 100644
index bb013be28f1ae..0000000000000
--- a/apps/site/types/searchbox.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export type SearchboxMode = 'search' | 'chat';
-
-export type SearchboxState = {
-  // The current mode (search or chat)
-  mode: SearchboxMode;
-  // Whether chat panel is open (for desktop)
-  isChatOpen: boolean;
-};
-
-export type SearchboxAction =
-  | { type: 'SET_MODE'; payload: SearchboxMode }
-  | { type: 'SET_CHAT_OPEN'; payload: boolean }
-  | {
-      type: 'CLOSE_CHAT_AND_RESET';
-      payload?: { onComplete?: () => void };
-    }
-  | { type: 'SWITCH_TO'; payload: SearchboxMode };
-
-export type SearchboxDispatchActions = {
-  setMode: (mode: SearchboxMode) => void;
-  setChatOpen: (isOpen: boolean) => void;
-  closeChatAndReset: (onComplete?: () => void) => void;
-  switchTo: (mode: SearchboxMode) => void;
-};
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 7100f1117a1fa..8c51a373a3a9f 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
+    "@orama/ui": "^1.3.2",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "~2.1.16",
@@ -52,6 +53,7 @@
     "tailwindcss": "catalog:"
   },
   "devDependencies": {
+    "@orama/core": "^1.2.13",
     "@storybook/addon-styling-webpack": "^2.0.0",
     "@storybook/addon-themes": "^10.0.2",
     "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
diff --git a/apps/site/components/Common/Searchbox/ChatActions/index.module.css b/packages/ui-components/src/Common/Search/Chat/Actions/index.module.css
similarity index 100%
rename from apps/site/components/Common/Searchbox/ChatActions/index.module.css
rename to packages/ui-components/src/Common/Search/Chat/Actions/index.module.css
diff --git a/apps/site/components/Common/Searchbox/ChatActions/index.tsx b/packages/ui-components/src/Common/Search/Chat/Actions/index.tsx
similarity index 94%
rename from apps/site/components/Common/Searchbox/ChatActions/index.tsx
rename to packages/ui-components/src/Common/Search/Chat/Actions/index.tsx
index 79f25bfd0e840..572da9f734730 100644
--- a/apps/site/components/Common/Searchbox/ChatActions/index.tsx
+++ b/packages/ui-components/src/Common/Search/Chat/Actions/index.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import {
   DocumentCheckIcon,
   ClipboardIcon,
@@ -18,7 +16,7 @@ type ChatActionsProps = {
   interaction: Interaction;
 };
 
-export const ChatActions: FC<ChatActionsProps> = ({ interaction }) => {
+const ChatActions: FC<ChatActionsProps> = ({ interaction }) => {
   const [isDisliked, setIsDisliked] = useState(false);
 
   const dislikeMessage = () => setIsDisliked(!isDisliked);
@@ -68,3 +66,5 @@ export const ChatActions: FC<ChatActionsProps> = ({ interaction }) => {
     </div>
   );
 };
+
+export default ChatActions;
diff --git a/apps/site/components/Common/Searchbox/ChatInput/index.module.css b/packages/ui-components/src/Common/Search/Chat/Input/index.module.css
similarity index 60%
rename from apps/site/components/Common/Searchbox/ChatInput/index.module.css
rename to packages/ui-components/src/Common/Search/Chat/Input/index.module.css
index 9334c1668cd84..27ef869d7e08b 100644
--- a/apps/site/components/Common/Searchbox/ChatInput/index.module.css
+++ b/packages/ui-components/src/Common/Search/Chat/Input/index.module.css
@@ -58,42 +58,3 @@
     sm:text-sm
     dark:text-neutral-500;
 }
-
-.suggestionsWrapper {
-  @apply mb-4
-    flex
-    items-center
-    gap-2
-    overflow-x-auto
-    px-1
-    text-sm
-    lg:justify-center;
-
-  &::-webkit-scrollbar {
-    @apply hidden;
-  }
-}
-
-.suggestionsItem {
-  @apply flex
-    size-max
-    cursor-pointer
-    rounded-full
-    border
-    border-neutral-300
-    bg-neutral-200
-    px-3
-    py-1
-    whitespace-nowrap
-    text-neutral-900
-    duration-300
-    hover:bg-neutral-300
-    focus:bg-neutral-300
-    focus:outline-none
-    motion-safe:transition-colors
-    dark:border-neutral-900
-    dark:bg-neutral-950
-    dark:text-neutral-200
-    dark:hover:bg-neutral-900
-    dark:focus:bg-neutral-900;
-}
diff --git a/apps/site/components/Common/Searchbox/ChatInput/index.tsx b/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
similarity index 57%
rename from apps/site/components/Common/Searchbox/ChatInput/index.tsx
rename to packages/ui-components/src/Common/Search/Chat/Input/index.tsx
index 013d86518b611..bc6e596b1a8aa 100644
--- a/apps/site/components/Common/Searchbox/ChatInput/index.tsx
+++ b/packages/ui-components/src/Common/Search/Chat/Input/index.tsx
@@ -1,29 +1,30 @@
-'use client';
-
 import { PaperAirplaneIcon } from '@heroicons/react/20/solid';
 import { PauseCircleIcon } from '@heroicons/react/24/solid';
-import { PromptTextArea, Suggestions } from '@orama/ui/components';
+import { PromptTextArea } from '@orama/ui/components';
 import { useChat } from '@orama/ui/hooks';
-import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { useEffect, useRef } from 'react';
 
+import SearchSuggestions from '#ui/Common/Search/Suggestions';
+
 import styles from './index.module.css';
 
-export const ChatInput: FC = () => {
-  const t = useTranslations();
+type ChatInputProps = {
+  suggestions: Array<string>;
+  placeholder: string;
+  disclaimer: string;
+};
+
+const ChatInput: FC<PropsWithChildren<ChatInputProps>> = ({
+  suggestions,
+  placeholder,
+  disclaimer,
+}) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
   const {
     context: { interactions },
   } = useChat();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const suggestions = [
-    t('components.search.suggestionOne'),
-    t('components.search.suggestionTwo'),
-    t('components.search.suggestionThree'),
-  ];
-
-  const hasInteractions = !!interactions?.length;
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
@@ -37,24 +38,13 @@ export const ChatInput: FC = () => {
 
   return (
     <>
-      {!hasInteractions && (
-        <Suggestions.Wrapper className={styles.suggestionsWrapper}>
-          {suggestions.map(suggestion => (
-            <Suggestions.Item
-              className={styles.suggestionsItem}
-              key={suggestion}
-            >
-              {suggestion}
-            </Suggestions.Item>
-          ))}
-        </Suggestions.Wrapper>
-      )}
+      {!interactions?.length && <SearchSuggestions suggestions={suggestions} />}
       <div className={styles.textareaContainer}>
         <PromptTextArea.Wrapper className={styles.textareaWrapper}>
           <PromptTextArea.Field
             id="orama-chat-input"
             name="chat-input"
-            placeholder={t('components.search.chatPlaceholder')}
+            placeholder={placeholder}
             rows={1}
             maxLength={500}
             autoFocus
@@ -69,9 +59,11 @@ export const ChatInput: FC = () => {
           </PromptTextArea.Button>
         </PromptTextArea.Wrapper>
         <div className={styles.textareaFooter}>
-          <small>{t('components.search.disclaimer')}</small>
+          <small>{disclaimer}</small>
         </div>
       </div>
     </>
   );
 };
+
+export default ChatInput;
diff --git a/apps/site/components/Common/Searchbox/Search/index.module.css b/packages/ui-components/src/Common/Search/Chat/Trigger/index.module.css
similarity index 51%
rename from apps/site/components/Common/Searchbox/Search/index.module.css
rename to packages/ui-components/src/Common/Search/Chat/Trigger/index.module.css
index 0be466bb89498..12666b7b9fb13 100644
--- a/apps/site/components/Common/Searchbox/Search/index.module.css
+++ b/packages/ui-components/src/Common/Search/Chat/Trigger/index.module.css
@@ -1,49 +1,10 @@
 @reference "../../../../styles/index.css";
 
-.searchContainer {
-  @apply flex
-    grow
-    flex-col
-    overflow-hidden;
-}
-
-.searchInputWrapper {
-  @apply relative;
-
-  svg {
-    @apply absolute
-      top-1/2
-      left-3
-      size-4
-      -translate-y-1/2
-      text-neutral-500
-      dark:text-neutral-600;
-  }
-}
-
-.searchInput {
-  @apply w-full
-    border-b
-    border-neutral-200
-    bg-transparent
-    py-4
-    pr-4
-    pl-9
-    text-sm
-    text-neutral-900
-    placeholder:text-neutral-500
-    focus:outline-none
-    dark:border-neutral-900
-    dark:text-neutral-200
-    dark:placeholder:text-neutral-600;
-}
-
 .chatButtonWrapper {
-  @apply hidden
+  @apply block
     border-b
     border-neutral-200
     p-2
-    lg:block
     dark:border-neutral-900;
 
   svg {
diff --git a/packages/ui-components/src/Common/Search/Chat/Trigger/index.tsx b/packages/ui-components/src/Common/Search/Chat/Trigger/index.tsx
new file mode 100644
index 0000000000000..d1d103a175694
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Chat/Trigger/index.tsx
@@ -0,0 +1,37 @@
+import { SparklesIcon } from '@heroicons/react/24/outline';
+import { SlidingPanel } from '@orama/ui/components/SlidingPanel';
+import { useSearch } from '@orama/ui/hooks/useSearch';
+import classNames from 'classnames';
+import type { ComponentProps, FC } from 'react';
+
+import styles from './index.module.css';
+
+const ChatTrigger: FC<ComponentProps<typeof SlidingPanel.Trigger>> = ({
+  children,
+  ...props
+}) => {
+  const {
+    context: { searchTerm },
+  } = useSearch();
+
+  return (
+    <div className={styles.chatButtonWrapper}>
+      <SlidingPanel.Trigger
+        className={classNames(styles.chatButton, {
+          [styles.chatButtonWithSearch]: searchTerm,
+        })}
+        initialPrompt={searchTerm || undefined}
+        data-focus-on-arrow-nav
+        {...props}
+      >
+        <SparklesIcon />
+        <span>
+          {searchTerm ? `${searchTerm} - ` : ''}
+          {children}
+        </span>
+      </SlidingPanel.Trigger>
+    </div>
+  );
+};
+
+export default ChatTrigger;
diff --git a/packages/ui-components/src/Common/Search/Input/index.module.css b/packages/ui-components/src/Common/Search/Input/index.module.css
new file mode 100644
index 0000000000000..af4e9f049a631
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Input/index.module.css
@@ -0,0 +1,32 @@
+@reference "../../../styles/index.css";
+
+.searchInputWrapper {
+  @apply relative;
+
+  svg {
+    @apply absolute
+      top-1/2
+      left-3
+      size-4
+      -translate-y-1/2
+      text-neutral-500
+      dark:text-neutral-600;
+  }
+}
+
+.searchInput {
+  @apply w-full
+    border-b
+    border-neutral-200
+    bg-transparent
+    py-4
+    pr-4
+    pl-9
+    text-sm
+    text-neutral-900
+    placeholder:text-neutral-500
+    focus:outline-none
+    dark:border-neutral-900
+    dark:text-neutral-200
+    dark:placeholder:text-neutral-600;
+}
diff --git a/packages/ui-components/src/Common/Search/Input/index.tsx b/packages/ui-components/src/Common/Search/Input/index.tsx
new file mode 100644
index 0000000000000..46b838e95089a
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Input/index.tsx
@@ -0,0 +1,29 @@
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import { SearchInput } from '@orama/ui/components';
+import type { ComponentProps, FC } from 'react';
+
+import styles from './index.module.css';
+
+type SearchProps = ComponentProps<typeof SearchInput.Input>;
+
+const Input: FC<SearchProps> = ({ searchParams, ...props }) => (
+  <SearchInput.Wrapper className={styles.searchInputWrapper}>
+    <MagnifyingGlassIcon />
+    <SearchInput.Input
+      inputId="orama-doc-search"
+      className={styles.searchInput}
+      searchParams={{
+        ...searchParams,
+        groupBy: {
+          properties: ['siteSection'],
+        },
+        facets: {
+          siteSection: {},
+        },
+      }}
+      {...props}
+    />
+  </SearchInput.Wrapper>
+);
+
+export default Input;
diff --git a/packages/ui-components/src/Common/Search/Modal/index.module.css b/packages/ui-components/src/Common/Search/Modal/index.module.css
new file mode 100644
index 0000000000000..d18772c8885f8
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Modal/index.module.css
@@ -0,0 +1,102 @@
+@reference "../../../styles/index.css";
+
+.searchboxContainer {
+  @apply grow;
+
+  * {
+    @apply antialiased;
+  }
+}
+
+.searchButton {
+  @apply flex
+    w-full
+    grow
+    cursor-pointer
+    items-center
+    justify-between
+    gap-1
+    rounded-xl
+    border
+    border-neutral-300
+    bg-white
+    p-1.5
+    text-neutral-900
+    duration-300
+    hover:bg-neutral-100
+    motion-safe:transition-colors
+    dark:border-neutral-900
+    dark:bg-neutral-950
+    dark:text-neutral-200
+    hover:dark:bg-neutral-900;
+}
+
+.searchButtonContent {
+  @apply relative
+    flex
+    flex-nowrap
+    items-center
+    gap-1
+    text-sm;
+
+  svg {
+    @apply size-4;
+  }
+}
+
+.searchButtonShortcut {
+  @apply inline
+    rounded-md
+    bg-neutral-300
+    px-2
+    py-1
+    text-sm
+    text-neutral-800
+    dark:bg-neutral-900
+    dark:text-neutral-400;
+}
+
+.modalWrapper {
+  @apply fixed
+    top-0
+    left-0
+    z-50
+    mx-auto
+    my-0
+    flex
+    size-full
+    items-start
+    justify-center
+    bg-white/70
+    pt-[5vh]
+    dark:bg-zinc-950/70;
+}
+
+.modalInner {
+  @apply fixed
+    top-auto
+    bottom-auto
+    mx-auto
+    my-0
+    flex
+    h-auto
+    w-full
+    max-w-3xl
+    bg-neutral-100
+    dark:bg-neutral-950;
+
+  > section {
+    @apply w-full;
+  }
+}
+
+.modalContent {
+  @apply flex
+    h-auto
+    max-h-[70vh]
+    flex-col
+    rounded-xl
+    border
+    border-neutral-200
+    dark:border-neutral-900;
+}
diff --git a/packages/ui-components/src/Common/Search/Modal/index.tsx b/packages/ui-components/src/Common/Search/Modal/index.tsx
new file mode 100644
index 0000000000000..9b28325af2adc
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Modal/index.tsx
@@ -0,0 +1,58 @@
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
+import type { OramaCloud } from '@orama/core';
+import { SearchRoot, ChatRoot, Modal } from '@orama/ui/components';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+
+import SearchInput from '#ui/Common/Search/Input';
+
+import styles from './index.module.css';
+
+type SearchModalProps = {
+  client: OramaCloud | null;
+  placeholder: string;
+} & ComponentProps<typeof SearchInput>;
+
+const SearchModal: FC<PropsWithChildren<SearchModalProps>> = ({
+  children,
+  client,
+  placeholder,
+}) => (
+  <div className={styles.searchboxContainer}>
+    <Modal.Root>
+      <Modal.Trigger
+        type="button"
+        disabled={!client}
+        enableCmdK
+        className={styles.searchButton}
+      >
+        <div className={styles.searchButtonContent}>
+          <MagnifyingGlassIcon />
+          {placeholder}
+        </div>
+        <span className={styles.searchButtonShortcut}>⌘ K</span>
+      </Modal.Trigger>
+
+      <Modal.Wrapper
+        closeOnOutsideClick
+        closeOnEscape
+        className={styles.modalWrapper}
+      >
+        <SearchRoot client={client}>
+          <ChatRoot client={client} askOptions={{ throttle_delay: 50 }}>
+            <Modal.Inner className={styles.modalInner}>
+              <Modal.Content className={styles.modalContent}>
+                <SearchInput
+                  placeholder={placeholder}
+                  ariaLabel={placeholder}
+                />
+                {children}
+              </Modal.Content>
+            </Modal.Inner>
+          </ChatRoot>
+        </SearchRoot>
+      </Modal.Wrapper>
+    </Modal.Root>
+  </div>
+);
+
+export default SearchModal;
diff --git a/packages/ui-components/src/Common/Search/Results/Empty/index.module.css b/packages/ui-components/src/Common/Search/Results/Empty/index.module.css
new file mode 100644
index 0000000000000..32a6b73458497
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/Empty/index.module.css
@@ -0,0 +1,13 @@
+@reference "../../../../styles/index.css";
+
+.noResultsWrapper {
+  @apply flex
+    h-full
+    items-center
+    justify-center
+    pt-10
+    pb-31
+    text-sm
+    text-neutral-800
+    dark:text-neutral-500;
+}
diff --git a/packages/ui-components/src/Common/Search/Results/Empty/index.tsx b/packages/ui-components/src/Common/Search/Results/Empty/index.tsx
new file mode 100644
index 0000000000000..0fb90251c35fc
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/Empty/index.tsx
@@ -0,0 +1,27 @@
+import { SearchResults, Suggestions } from '@orama/ui/components';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type EmptyResultsProps = {
+  label?: string;
+} & Omit<ComponentProps<typeof Suggestions.Item>, 'children'>;
+
+const SearchResultsEmpty: FC<PropsWithChildren<EmptyResultsProps>> = ({
+  children,
+  label,
+}) => (
+  <SearchResults.NoResults>
+    {term =>
+      term ? (
+        <div className={styles.noResultsWrapper}>
+          {label} "{term}"
+        </div>
+      ) : (
+        children
+      )
+    }
+  </SearchResults.NoResults>
+);
+
+export default SearchResultsEmpty;
diff --git a/packages/ui-components/src/Common/Search/Results/Skeleton/index.module.css b/packages/ui-components/src/Common/Search/Results/Skeleton/index.module.css
new file mode 100644
index 0000000000000..39e7d9b3bfaba
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/Skeleton/index.module.css
@@ -0,0 +1,43 @@
+@reference "../../../../styles/index.css";
+
+.skeletonWrapper {
+  @apply flex
+    flex-col
+    gap-5
+    py-6;
+}
+
+.skeletonItem {
+  @apply flex
+    items-center
+    gap-4;
+}
+
+.skeletonAnim {
+  @apply dark:animate-pulse-dark
+    animate-pulse
+    rounded-md;
+}
+
+.skeletonAvatar {
+  @apply h-6
+    w-5
+    shrink-0;
+}
+
+.skeletonText {
+  @apply flex
+    flex-1
+    flex-col
+    gap-2;
+}
+
+.skeletonLineShort {
+  @apply h-3
+    w-1/3;
+}
+
+.skeletonLineLong {
+  @apply h-3
+    w-2/3;
+}
diff --git a/packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx b/packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx
new file mode 100644
index 0000000000000..c0b0ee619b41f
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx
@@ -0,0 +1,35 @@
+import { SearchResults } from '@orama/ui/components';
+import classNames from 'classnames';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+const SearchResultsSkeleton: FC = () => (
+  <SearchResults.Loading>
+    <div className={styles.skeletonWrapper}>
+      {[...Array(3)].map((_, index) => (
+        <div key={index} className={styles.skeletonItem}>
+          <div
+            className={classNames(styles.skeletonAnim, styles.skeletonAvatar)}
+          />
+          <div className={styles.skeletonText}>
+            <div
+              className={classNames(
+                styles.skeletonAnim,
+                styles.skeletonLineShort
+              )}
+            />
+            <div
+              className={classNames(
+                styles.skeletonAnim,
+                styles.skeletonLineLong
+              )}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  </SearchResults.Loading>
+);
+
+export default SearchResultsSkeleton;
diff --git a/packages/ui-components/src/Common/Search/Results/Tabs/index.module.css b/packages/ui-components/src/Common/Search/Results/Tabs/index.module.css
new file mode 100644
index 0000000000000..e0a279af86fd3
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/Tabs/index.module.css
@@ -0,0 +1,50 @@
+@reference "../../../../styles/index.css";
+
+.facetTabsWrapper {
+  @apply mb-2
+    overflow-x-auto;
+
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
+}
+
+.facetTabItem {
+  @apply flex
+    cursor-pointer
+    items-center
+    gap-2
+    rounded-3xl
+    border
+    border-neutral-200
+    px-3
+    py-1
+    text-sm
+    duration-300
+    focus:outline-none
+    focus-visible:bg-neutral-300
+    motion-safe:transition-colors
+    dark:border-neutral-900
+    dark:focus-visible:bg-neutral-900;
+}
+
+.facetTabItemSelected {
+  @apply border-2
+    border-green-600
+    dark:border-green-400;
+}
+
+.facetTabsList {
+  @apply flex
+    items-center
+    gap-2
+    overflow-x-auto;
+
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
+}
+
+.facetTabItemCount {
+  @apply text-neutral-700;
+}
diff --git a/packages/ui-components/src/Common/Search/Results/Tabs/index.tsx b/packages/ui-components/src/Common/Search/Results/Tabs/index.tsx
new file mode 100644
index 0000000000000..bd764911cbc9d
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/Tabs/index.tsx
@@ -0,0 +1,37 @@
+import { FacetTabs } from '@orama/ui/components';
+import classNames from 'classnames';
+import type { ComponentProps, FC } from 'react';
+
+import styles from './index.module.css';
+
+type TabsProps = Omit<
+  ComponentProps<typeof FacetTabs.Item>,
+  'group' | 'filterBy'
+> & {
+  selectedFacet?: string | null;
+  searchTerm?: string | null;
+};
+
+const Tabs: FC<TabsProps> = ({ selectedFacet, ...props }) => (
+  <FacetTabs.Wrapper className={styles.facetTabsWrapper}>
+    <FacetTabs.List className={styles.facetTabsList}>
+      {(group, isSelected) => (
+        <FacetTabs.Item
+          {...props}
+          isSelected={group.name === selectedFacet}
+          group={group}
+          filterBy="siteSection"
+          className={classNames(
+            isSelected && styles.facetTabItemSelected,
+            styles.facetTabItem
+          )}
+        >
+          {group.name}
+          <span className={styles.facetTabItemCount}>({group.count})</span>
+        </FacetTabs.Item>
+      )}
+    </FacetTabs.List>
+  </FacetTabs.Wrapper>
+);
+
+export default Tabs;
diff --git a/packages/ui-components/src/Common/Search/Results/index.module.css b/packages/ui-components/src/Common/Search/Results/index.module.css
new file mode 100644
index 0000000000000..23d0f01a0f107
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/index.module.css
@@ -0,0 +1,50 @@
+@reference "../../../styles/index.css";
+
+.searchResultsWrapper {
+  @apply grow-0
+    overflow-y-auto
+    px-5
+    pt-3
+    text-neutral-900
+    dark:text-neutral-200;
+
+  &::-webkit-scrollbar {
+    @apply size-1.5;
+  }
+
+  &::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-md
+      bg-neutral-900;
+  }
+}
+
+.searchResultsGroupWrapper {
+  @apply relative
+    items-start
+    overflow-y-auto;
+}
+
+.searchResultsGroup {
+  @apply mb-3
+    border-t
+    border-neutral-200
+    dark:border-neutral-900;
+}
+
+.searchResultsGroup:first-of-type {
+  @apply border-0;
+}
+
+.searchResultsGroupTitle {
+  @apply mt-4
+    mb-3
+    pl-2
+    text-sm
+    font-semibold
+    text-neutral-600
+    dark:text-neutral-600;
+}
diff --git a/packages/ui-components/src/Common/Search/Results/index.tsx b/packages/ui-components/src/Common/Search/Results/index.tsx
new file mode 100644
index 0000000000000..2af135130d5e5
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Results/index.tsx
@@ -0,0 +1,56 @@
+import { SearchResults } from '@orama/ui/components';
+import { useSearch } from '@orama/ui/hooks/useSearch';
+import type { ComponentProps, FC } from 'react';
+
+import SearchResultsEmpty from '#ui/Common/Search/Results/Empty';
+import SearchResultsSkeleton from '#ui/Common/Search/Results/Skeleton';
+import Tabs from '#ui/Common/Search/Results/Tabs';
+
+import styles from './index.module.css';
+
+type SearchResultsWrapperProps = {
+  searchParams: Omit<ComponentProps<typeof Tabs>['searchParams'], 'term'>;
+  onHit: ComponentProps<typeof SearchResults.GroupList>['children'];
+  noResultsTitle: string;
+} & Omit<ComponentProps<typeof SearchResultsEmpty>, 'label'>;
+
+const SearchResultsWrapper: FC<SearchResultsWrapperProps> = ({
+  searchParams,
+  onHit,
+  noResultsTitle,
+  ...props
+}) => {
+  const {
+    context: { searchTerm, selectedFacet },
+  } = useSearch();
+
+  return (
+    <div className={styles.searchResultsWrapper}>
+      <SearchResults.Wrapper>
+        <Tabs
+          {...props}
+          searchParams={{ ...searchParams, term: searchTerm ?? '' }}
+          selectedFacet={selectedFacet}
+        />
+        <SearchResultsSkeleton />
+        <SearchResultsEmpty label={noResultsTitle} {...props} />
+
+        <SearchResults.GroupsWrapper
+          className={styles.searchResultsGroupWrapper}
+          groupBy="siteSection"
+        >
+          {group => (
+            <div key={group.name} className={styles.searchResultsGroup}>
+              <h2 className={styles.searchResultsGroupTitle}>{group.name}</h2>
+              <SearchResults.GroupList group={group}>
+                {onHit}
+              </SearchResults.GroupList>
+            </div>
+          )}
+        </SearchResults.GroupsWrapper>
+      </SearchResults.Wrapper>
+    </div>
+  );
+};
+
+export default SearchResultsWrapper;
diff --git a/apps/site/components/Common/Searchbox/EmptyResults/index.module.css b/packages/ui-components/src/Common/Search/Suggestions/index.module.css
similarity index 76%
rename from apps/site/components/Common/Searchbox/EmptyResults/index.module.css
rename to packages/ui-components/src/Common/Search/Suggestions/index.module.css
index acd79e2c7740e..2d09b2ce3b549 100644
--- a/apps/site/components/Common/Searchbox/EmptyResults/index.module.css
+++ b/packages/ui-components/src/Common/Search/Suggestions/index.module.css
@@ -1,4 +1,4 @@
-@reference "../../../../styles/index.css";
+@reference "../../../styles/index.css";
 
 .suggestionsWrapper {
   @apply flex
@@ -45,15 +45,3 @@
     @apply size-5;
   }
 }
-
-.noResultsWrapper {
-  @apply flex
-    h-full
-    items-center
-    justify-center
-    pt-10
-    pb-31
-    text-sm
-    text-neutral-800
-    dark:text-neutral-500;
-}
diff --git a/packages/ui-components/src/Common/Search/Suggestions/index.tsx b/packages/ui-components/src/Common/Search/Suggestions/index.tsx
new file mode 100644
index 0000000000000..f457695e98b1e
--- /dev/null
+++ b/packages/ui-components/src/Common/Search/Suggestions/index.tsx
@@ -0,0 +1,28 @@
+import { SparklesIcon } from '@heroicons/react/24/outline';
+import { Suggestions } from '@orama/ui/components/Suggestions';
+import type { ComponentProps, FC } from 'react';
+
+import styles from './index.module.css';
+
+type SearchSuggestionsProps = {
+  suggestions: Array<string>;
+  label?: string;
+} & Omit<ComponentProps<typeof Suggestions.Item>, 'children'>;
+
+const SearchSuggestions: FC<SearchSuggestionsProps> = ({
+  suggestions,
+  label,
+  ...props
+}) => (
+  <Suggestions.Wrapper className={styles.suggestionsWrapper}>
+    {label && <p className={styles.suggestionsTitle}>{label}</p>}
+    {suggestions.map((suggestion, i) => (
+      <Suggestions.Item {...props} key={i} className={styles.suggestionItem}>
+        <SparklesIcon />
+        {suggestion}
+      </Suggestions.Item>
+    ))}
+  </Suggestions.Wrapper>
+);
+
+export default SearchSuggestions;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 57429fbf842fb..b9230b3b3909a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -465,6 +465,9 @@ importers:
       '@heroicons/react':
         specifier: ^2.2.0
         version: 2.2.0(react@19.2.0)
+      '@orama/ui':
+        specifier: ^1.3.2
+        version: 1.3.2(@orama/core@1.2.13)(@types/react@19.2.2)(react@19.2.0)
       '@radix-ui/react-avatar':
         specifier: ^1.1.10
         version: 1.1.10(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -508,6 +511,9 @@ importers:
         specifier: 'catalog:'
         version: 4.0.17
     devDependencies:
+      '@orama/core':
+        specifier: ^1.2.13
+        version: 1.2.13
       '@storybook/addon-styling-webpack':
         specifier: ^2.0.0
         version: 2.0.0(storybook@10.0.7(@testing-library/dom@10.4.0)(prettier@3.6.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(webpack@5.102.0(@swc/core@1.13.5))