diff --git a/packages/samples/headless-commerce-react/.eslintrc.json b/packages/samples/headless-commerce-react/.eslintrc.json
new file mode 100644
index 00000000000..f2b963db013
--- /dev/null
+++ b/packages/samples/headless-commerce-react/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "extends": ["plugin:@typescript-eslint/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "root": true
+}
diff --git a/packages/samples/headless-commerce-react/src/components/breadcrumb-manager/breadcrumb-manager.tsx b/packages/samples/headless-commerce-react/src/components/breadcrumb-manager/breadcrumb-manager.tsx
index 020c674f40d..6bb726765a3 100644
--- a/packages/samples/headless-commerce-react/src/components/breadcrumb-manager/breadcrumb-manager.tsx
+++ b/packages/samples/headless-commerce-react/src/components/breadcrumb-manager/breadcrumb-manager.tsx
@@ -18,7 +18,7 @@ export default function BreadcrumbManager(props: BreadcrumbManagerProps) {
   const [state, setState] = useState(controller.state);
 
   useEffect(() => {
-    controller.subscribe(() => setState(controller.state));
+    controller.subscribe(() => setState({...controller.state}));
   }, [controller]);
 
   if (!state.hasBreadcrumbs) {
@@ -57,14 +57,17 @@ export default function BreadcrumbManager(props: BreadcrumbManagerProps) {
         <button onClick={controller.deselectAll}>Clear all filters</button>
       </div>
       <ul className="Breadcrumbs">
-        {state.facetBreadcrumbs.map((facetBreadcrumb, index) => {
+        {state.facetBreadcrumbs.map((facetBreadcrumb) => {
           return (
-            <li className="FacetBreadcrumbs" key={index}>
+            <li
+              className="FacetBreadcrumbs"
+              key={`${facetBreadcrumb.facetId}-breadcrumbs`}
+            >
               {facetBreadcrumb.values.map((value, index) => {
                 return (
                   <button
                     className="BreadcrumbValue"
-                    key={index}
+                    key={`${value.value}-breadcrumb-${index}`}
                     onClick={() => value.deselect()}
                   >
                     {facetBreadcrumb.facetDisplayName}:{' '}
diff --git a/packages/samples/headless-commerce-react/src/components/facets/category-facet/category-facet.tsx b/packages/samples/headless-commerce-react/src/components/facets/category-facet/category-facet.tsx
index 2316eaad30e..9a0e2f05dbd 100644
--- a/packages/samples/headless-commerce-react/src/components/facets/category-facet/category-facet.tsx
+++ b/packages/samples/headless-commerce-react/src/components/facets/category-facet/category-facet.tsx
@@ -1,8 +1,9 @@
 import {
+  CategoryFacetSearchResult,
   CategoryFacetValue,
   CategoryFacet as HeadlessCategoryFacet,
 } from '@coveo/headless/commerce';
-import {useEffect, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 
 interface ICategoryFacetProps {
   controller: HeadlessCategoryFacet;
@@ -12,19 +13,143 @@ export default function CategoryFacet(props: ICategoryFacetProps) {
   const {controller} = props;
 
   const [state, setState] = useState(controller.state);
+  const [showFacetSearchResults, setShowFacetSearchResults] = useState(false);
+
+  const facetSearchInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     controller.subscribe(() => setState(controller.state));
   }, [controller]);
 
-  const toggleSelect = (value: CategoryFacetValue) => {
+  const focusFacetSearchInput = (): void => {
+    facetSearchInputRef.current!.focus();
+  };
+
+  const onChangeFacetSearchInput = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (e.target.value === '') {
+      setShowFacetSearchResults(false);
+      controller.facetSearch.clear();
+      return;
+    }
+
+    controller.facetSearch.updateText(e.target.value);
+    controller.facetSearch.search();
+    setShowFacetSearchResults(true);
+  };
+
+  const onClickClearFacetSearch = (): void => {
+    setShowFacetSearchResults(false);
+    controller.facetSearch.clear();
+    focusFacetSearchInput();
+  };
+
+  const highlightFacetSearchResult = (displayValue: string): string => {
+    const query = state.facetSearch.query;
+    const regex = new RegExp(query, 'gi');
+    return displayValue.replace(regex, (match) => `<mark>${match}</mark>`);
+  };
+
+  const onClickFacetSearchResult = (value: CategoryFacetSearchResult): void => {
+    controller.facetSearch.select(value);
+    controller.facetSearch.clear();
+    setShowFacetSearchResults(false);
+    focusFacetSearchInput();
+  };
+
+  const onClickClearSelectedFacetValue = (): void => {
+    controller.deselectAll();
+    focusFacetSearchInput();
+  };
+
+  const toggleSelectFacetValue = (value: CategoryFacetValue) => {
     if (controller.isValueSelected(value)) {
       controller.deselectAll();
     }
     controller.toggleSelect(value);
   };
 
-  const renderAncestry = () => {
+  const renderFacetSearchControls = () => {
+    return (
+      <div className="FacetSearch">
+        <label className="FacetSearchLabel" htmlFor="facetSearchInput">
+          Search:{' '}
+        </label>
+        <input
+          aria-label={`Search in facet '${state.displayName ?? state.facetId}'`}
+          className="FacetSearchInput"
+          disabled={state.isLoading}
+          id="facetSearchInput"
+          onChange={onChangeFacetSearchInput}
+          ref={facetSearchInputRef}
+          value={state.facetSearch.query}
+        ></input>
+        <button
+          aria-label="Clear facet search query"
+          className="FacetSearchClear"
+          disabled={state.isLoading || state.facetSearch.query === ''}
+          onClick={onClickClearFacetSearch}
+          type="reset"
+        >
+          X
+        </button>
+        {state.facetSearch.isLoading && (
+          <span className="FacetSearchLoading">
+            {' '}
+            Facet search is loading...
+          </span>
+        )}
+      </div>
+    );
+  };
+
+  const renderFacetSearchResults = () => {
+    return state.facetSearch.values.length === 0 ? (
+      <span className="FacetSearchNoResults">
+        No results for <strong>{state.facetSearch.query}</strong>
+      </span>
+    ) : (
+      <ul className="FacetSearchResults">
+        {state.facetSearch.values.map((value) => (
+          <li
+            className="FacetSearchResult"
+            key={value.rawValue}
+            onClick={() => onClickFacetSearchResult(value)}
+            style={{width: 'fit-content'}}
+          >
+            <input
+              aria-label={`Select facet search result '${value.displayValue}' in category '${value.path.join(' / ')}'`}
+              className="FacetSearchResultCheckbox"
+              disabled={state.isLoading}
+              id={value.rawValue}
+              type="checkbox"
+            ></input>
+            <label className="FacetSearchResultLabel" htmlFor={value.rawValue}>
+              <span
+                className="FacetSearchResultName"
+                dangerouslySetInnerHTML={{
+                  __html: highlightFacetSearchResult(value.displayValue),
+                }}
+              ></span>
+              {value.path.length > 0 && (
+                <span className="FacetSearchResultCategory">
+                  {' '}
+                  <small>in {value.path.join(' > ')}</small>
+                </span>
+              )}
+            </label>
+            <span className="FacetSearchResultNumberOfProducts">
+              {' '}
+              ({value.count})
+            </span>
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  const renderActiveFacetValueTree = () => {
     if (!state.hasActiveValues) {
       return null;
     }
@@ -33,32 +158,53 @@ export default function CategoryFacet(props: ICategoryFacetProps) {
     const activeValueChildren = ancestry[ancestry.length - 1]?.children ?? [];
 
     return (
-      <ul className="Ancestry">
-        {ancestry.map((ancestor) => {
+      <ul className="ActiveFacetValueTree">
+        {ancestry.map((ancestryValue) => {
+          const checkboxId = `ancestryFacetValueCheckbox-${ancestryValue.value}`;
           return (
-            <li className="AncestryValue" key={ancestor.value}>
+            <li
+              className="AncestryFacetValue"
+              key={`${ancestryValue.value}-ancestry`}
+            >
               <input
+                checked={controller.isValueSelected(ancestryValue)}
+                className="FacetValueCheckbox"
+                disabled={state.isLoading}
+                id={checkboxId}
+                onChange={() => toggleSelectFacetValue(ancestryValue)}
                 type="checkbox"
-                checked={controller.isValueSelected(ancestor)}
-                onChange={() => toggleSelect(ancestor)}
               ></input>
-              <label>{ancestor.value}</label>
-              <span> ({ancestor.numberOfResults})</span>
+              <label className="FacetValueLabel" htmlFor={checkboxId}>
+                <span className="FacetValueName">{ancestryValue.value}</span>
+                <span className="FacetValueNumberOfProducts">
+                  {' '}
+                  ({ancestryValue.numberOfResults})
+                </span>
+              </label>
             </li>
           );
         })}
         {activeValueChildren.length > 0 && (
-          <ul className="ActiveValueChildren">
-            {activeValueChildren.map((leaf) => {
+          <ul className="ActiveFacetValueChildren">
+            {activeValueChildren.map((child) => {
+              const checkboxId = `facetValueChildCheckbox-${child.value}`;
               return (
-                <li className="ActiveValueChild" key={leaf.value}>
+                <li className="FacetValueChild" key={`${child.value}-child`}>
                   <input
-                    type="checkbox"
                     checked={false}
-                    onChange={() => toggleSelect(leaf)}
+                    className="FacetValueCheckbox"
+                    disabled={state.isLoading}
+                    id={checkboxId}
+                    type="checkbox"
+                    onChange={() => toggleSelectFacetValue(child)}
                   ></input>
-                  <label>{leaf.value}</label>
-                  <span> ({leaf.numberOfResults})</span>
+                  <label className="FacetValueLabel" htmlFor={checkboxId}>
+                    <span className="FacetValueName">{child.value}</span>
+                    <span className="FacetValueNumberOfProducts">
+                      {' '}
+                      ({child.numberOfResults})
+                    </span>
+                  </label>
                 </li>
               );
             })}
@@ -77,12 +223,13 @@ export default function CategoryFacet(props: ICategoryFacetProps) {
       <ul className="RootFacetValues">
         {state.values.map((root) => {
           return (
-            <li className="FacetValue" key={root.value}>
+            <li className="FacetValue" key={`${root.value}-root`}>
               <input
                 className="FacetValueCheckbox"
                 type="checkbox"
                 checked={false}
-                onChange={() => toggleSelect(root)}
+                disabled={state.isLoading}
+                onChange={() => toggleSelectFacetValue(root)}
               ></input>
               <label className="FacetValueName">{root.value}</label>
               <span className="FacetValueNumberOfResults">
@@ -96,32 +243,49 @@ export default function CategoryFacet(props: ICategoryFacetProps) {
     );
   };
 
+  const renderFacetValues = () => {
+    return (
+      <div className="FacetValues">
+        <button
+          aria-label="Clear selected facet value"
+          className="FacetClear"
+          disabled={state.isLoading || !state.hasActiveValues}
+          onClick={onClickClearSelectedFacetValue}
+          type="reset"
+        >
+          X
+        </button>
+        {renderRootValues()}
+        {renderActiveFacetValueTree()}
+        <button
+          aria-label="Show more facet values"
+          className="FacetShowMore"
+          disabled={state.isLoading || !state.canShowMoreValues}
+          onClick={controller.showMoreValues}
+        >
+          +
+        </button>
+        <button
+          aria-label="Show less facet values"
+          className="FacetShowLess"
+          disabled={state.isLoading || !state.canShowLessValues}
+          onClick={controller.showLessValues}
+        >
+          -
+        </button>
+      </div>
+    );
+  };
+
   return (
-    <li className="CategoryFacet">
-      <h3 className="FacetDisplayName">{state.displayName ?? state.facetId}</h3>
-      <button
-        className="FacetClear"
-        disabled={!state.hasActiveValues}
-        onClick={controller.deselectAll}
-      >
-        Clear
-      </button>
-      {renderRootValues()}
-      {renderAncestry()}
-      <button
-        className="FacetShowMore"
-        disabled={!state.canShowMoreValues}
-        onClick={controller.showMoreValues}
-      >
-        Show more
-      </button>
-      <button
-        className="FacetShowLess"
-        disabled={!state.canShowLessValues}
-        onClick={controller.showLessValues}
-      >
-        Show less
-      </button>
-    </li>
+    <fieldset className="CategoryFacet">
+      <legend className="FacetDisplayName">
+        {state.displayName ?? state.facetId}
+      </legend>
+      {renderFacetSearchControls()}
+      {showFacetSearchResults
+        ? renderFacetSearchResults()
+        : renderFacetValues()}
+    </fieldset>
   );
 }
diff --git a/packages/samples/headless-commerce-react/src/components/facets/date-facet/date-facet.tsx b/packages/samples/headless-commerce-react/src/components/facets/date-facet/date-facet.tsx
index d3a4dfb3c43..214707e5e00 100644
--- a/packages/samples/headless-commerce-react/src/components/facets/date-facet/date-facet.tsx
+++ b/packages/samples/headless-commerce-react/src/components/facets/date-facet/date-facet.tsx
@@ -17,52 +17,65 @@ export default function DateFacet(props: IDateFacetProps) {
   const renderFacetValues = () => {
     return (
       <ul className="FacetValues">
-        {state.values.map((value, index) => (
-          <li className="FacetValue" key={index}>
-            <input
-              className="FacetValueCheckbox"
-              type="checkbox"
-              checked={value.state !== 'idle'}
-              onChange={() => controller.toggleSelect(value)}
-            ></input>
-            <label className="FacetValueLabel">
-              {value.start} to {value.end}
-            </label>
-            <span className="FacetValueNumberOfResults">
-              {' '}
-              ({value.numberOfResults})
-            </span>
-          </li>
-        ))}
+        {state.values.map((value) => {
+          const id = `${value.start}-${value.end}-${value.endInclusive}`;
+          return (
+            <li className="FacetValue" key={id}>
+              <input
+                checked={value.state !== 'idle'}
+                className="FacetValueCheckbox"
+                disabled={state.isLoading}
+                id={id}
+                onChange={() => controller.toggleSelect(value)}
+                type="checkbox"
+              ></input>
+              <label className="FacetValueLabel" htmlFor={id}>
+                {value.start} to {value.end}
+              </label>
+              <span className="FacetValueNumberOfResults">
+                {' '}
+                ({value.numberOfResults})
+              </span>
+            </li>
+          );
+        })}
       </ul>
     );
   };
 
   return (
-    <li className="DateFacet">
-      <h3 className="FacetDisplayName">{state.displayName ?? state.facetId}</h3>
+    <fieldset className="DateFacet">
+      <legend className="FacetDisplayName">
+        {state.displayName ?? state.facetId}
+      </legend>
       <button
+        aria-label="Clear selected facet values"
         className="FacetClear"
-        disabled={!state.hasActiveValues}
+        disabled={state.isLoading || !state.hasActiveValues}
         onClick={controller.deselectAll}
       >
-        Clear
+        X
       </button>
+      {state.isLoading && (
+        <span className="FacetLoading"> Facet is loading...</span>
+      )}
       {renderFacetValues()}
       <button
+        aria-label="Show more facet values"
         className="FacetShowMore"
-        disabled={!state.canShowMoreValues}
+        disabled={state.isLoading || !state.canShowMoreValues}
         onClick={controller.showMoreValues}
       >
-        Show more
+        +
       </button>
       <button
+        aria-label="Show less facet values"
         className="FacetShowLess"
-        disabled={!state.canShowLessValues}
+        disabled={state.isLoading || !state.canShowLessValues}
         onClick={controller.showLessValues}
       >
-        Show less
+        -
       </button>
-    </li>
+    </fieldset>
   );
 }
diff --git a/packages/samples/headless-commerce-react/src/components/facets/facet-generator/facet-generator.tsx b/packages/samples/headless-commerce-react/src/components/facets/facet-generator/facet-generator.tsx
index ac8010db4e2..58d40f04877 100644
--- a/packages/samples/headless-commerce-react/src/components/facets/facet-generator/facet-generator.tsx
+++ b/packages/samples/headless-commerce-react/src/components/facets/facet-generator/facet-generator.tsx
@@ -25,7 +25,7 @@ export default function FacetGenerator(props: IFacetGeneratorProps) {
   }
 
   return (
-    <ul className="Facets">
+    <nav className="Facets">
       {facetState.map((facet, index) => {
         switch (facet.type) {
           case 'regular':
@@ -42,6 +42,6 @@ export default function FacetGenerator(props: IFacetGeneratorProps) {
             return null;
         }
       })}
-    </ul>
+    </nav>
   );
 }
diff --git a/packages/samples/headless-commerce-react/src/components/facets/numeric-facet/numeric-facet.tsx b/packages/samples/headless-commerce-react/src/components/facets/numeric-facet/numeric-facet.tsx
index 59f6f1008f0..c60c17c74b2 100644
--- a/packages/samples/headless-commerce-react/src/components/facets/numeric-facet/numeric-facet.tsx
+++ b/packages/samples/headless-commerce-react/src/components/facets/numeric-facet/numeric-facet.tsx
@@ -1,5 +1,5 @@
 import {NumericFacet as HeadlessNumericFacet} from '@coveo/headless/commerce';
-import {useEffect, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 
 interface INumericFacetProps {
   controller: HeadlessNumericFacet;
@@ -9,60 +9,194 @@ export default function NumericFacet(props: INumericFacetProps) {
   const {controller} = props;
 
   const [state, setState] = useState(controller.state);
+  const [currentManualRange, setCurrentManualRange] = useState({
+    start:
+      controller.state.manualRange?.start ??
+      controller.state.domain?.min ??
+      controller.state.values[0]?.start ??
+      0,
+    end:
+      controller.state.manualRange?.end ??
+      controller.state.domain?.max ??
+      controller.state.values[0]?.end ??
+      0,
+  });
+
+  const manualRangeStartInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    controller.subscribe(() => setState(controller.state));
+    controller.subscribe(() => {
+      setState(controller.state),
+        setCurrentManualRange({
+          start:
+            controller.state.manualRange?.start ??
+            controller.state.domain?.min ??
+            controller.state.values[0]?.start ??
+            0,
+          end:
+            controller.state.manualRange?.end ??
+            controller.state.domain?.max ??
+            controller.state.values[0]?.end ??
+            0,
+        });
+    });
   }, [controller]);
 
+  const focusManualRangeStartInput = (): void => {
+    manualRangeStartInputRef.current!.focus();
+  };
+
+  const invalidRange =
+    currentManualRange.start >= currentManualRange.end ||
+    isNaN(currentManualRange.start) ||
+    isNaN(currentManualRange.end);
+
+  const onChangeManualRangeStart = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCurrentManualRange({
+      start: Number.parseInt(e.target.value),
+      end: currentManualRange.end,
+    });
+  };
+
+  const onChangeManualRangeEnd = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCurrentManualRange({
+      start: currentManualRange.start,
+      end: Number.parseInt(e.target.value),
+    });
+  };
+
+  const onClickManualRangeSelect = () => {
+    const start =
+      state.domain && currentManualRange.start < state.domain.min
+        ? state.domain.min
+        : currentManualRange.start;
+    const end =
+      state.domain && currentManualRange.end > state.domain.max
+        ? state.domain.max
+        : currentManualRange.end;
+    controller.setRanges([
+      {
+        start,
+        end,
+        endInclusive: true,
+        state: 'selected',
+      },
+    ]);
+    focusManualRangeStartInput();
+  };
+
+  const onClickClearSelectedFacetValues = (): void => {
+    controller.deselectAll();
+    focusManualRangeStartInput();
+  };
+
+  const renderManualRangeControls = () => {
+    return (
+      <div className="ManualRangeControls">
+        <label className="ManualRangeStartLabel" htmlFor="manualRangeStart">
+          From:{' '}
+        </label>
+        <input
+          aria-label="Manual range start"
+          className="ManualRangeStartInput"
+          disabled={state.isLoading}
+          id="manualRangeStart"
+          ref={manualRangeStartInputRef}
+          type="number"
+          value={currentManualRange.start}
+          onChange={onChangeManualRangeStart}
+        />
+        <label className="ManualRangeEndLabel" htmlFor="manualRangeEnd">
+          To:{' '}
+        </label>
+        <input
+          aria-label="Manual range end"
+          className="ManualRangeEndInput"
+          disabled={state.isLoading}
+          id="manualRangeEnd"
+          type="number"
+          value={currentManualRange.end}
+          onChange={onChangeManualRangeEnd}
+        />
+        <button
+          aria-label="Select manual range"
+          className="ManualRangeSelect"
+          disabled={state.isLoading || invalidRange}
+          onClick={onClickManualRangeSelect}
+          type="submit"
+        >
+          ✓
+        </button>
+      </div>
+    );
+  };
+
   const renderFacetValues = () => {
     return (
-      <ul className="FacetValues">
-        {state.values.map((value, index) => (
-          <li className="FacetValue" key={index}>
-            <input
-              className="FacetValueCheckbox"
-              type="checkbox"
-              checked={value.state !== 'idle'}
-              onChange={() => controller.toggleSelect(value)}
-            ></input>
-            <label className="FacetValueName">
-              {value.start} to {value.end}
-            </label>
-            <span className="ValueValueNumberOfResults">
-              {' '}
-              ({value.numberOfResults})
-            </span>
-          </li>
-        ))}
-      </ul>
+      <div className="FacetValues">
+        <button
+          aria-label="Clear selected facet values"
+          className="FacetClear"
+          disabled={state.isLoading || !state.hasActiveValues}
+          onClick={onClickClearSelectedFacetValues}
+          type="reset"
+        >
+          X
+        </button>
+        {state.isLoading && <span> Facet is loading...</span>}
+        <ul>
+          {state.values.map((value, index) => {
+            const checkboxId = `${value.start}-${value.end}-${value.endInclusive}`;
+            return (
+              <li className="FacetValue" key={index}>
+                <input
+                  className="FacetValueCheckbox"
+                  disabled={state.isLoading}
+                  id={checkboxId}
+                  type="checkbox"
+                  checked={value.state !== 'idle'}
+                  onChange={() => controller.toggleSelect(value)}
+                ></input>
+                <label className="FacetValueLabel" htmlFor={checkboxId}>
+                  <span className="FacetValueName">
+                    {value.start} to {value.end}
+                  </span>
+                  <span className="FacetValueNumberOfProducts">
+                    {' '}
+                    ({value.numberOfResults})
+                  </span>
+                </label>
+              </li>
+            );
+          })}
+        </ul>
+        <button
+          aria-label="Show more facet values"
+          className="FacetShowMore"
+          disabled={state.isLoading || !state.canShowMoreValues}
+          onClick={controller.showMoreValues}
+        >
+          +
+        </button>
+        <button
+          aria-label="Show less facet values"
+          className="FacetShowLess"
+          disabled={state.isLoading || !state.canShowLessValues}
+          onClick={controller.showLessValues}
+        >
+          -
+        </button>
+      </div>
     );
   };
 
   return (
-    <li className="NumericFacet">
-      <h3 className="FacetDisplayName">{state.displayName ?? state.facetId}</h3>
-      <button
-        className="FacetClear"
-        disabled={!state.hasActiveValues}
-        onClick={controller.deselectAll}
-      >
-        Clear
-      </button>
+    <fieldset className="NumericFacet">
+      <legend className="FacetDisplayName">
+        {state.displayName ?? state.facetId}
+      </legend>
+      {renderManualRangeControls()}
       {renderFacetValues()}
-      <button
-        className="FacetShowMore"
-        disabled={!state.canShowMoreValues}
-        onClick={controller.showMoreValues}
-      >
-        Show more
-      </button>
-      <button
-        className="FacetShowLess"
-        disabled={!state.canShowLessValues}
-        onClick={controller.showLessValues}
-      >
-        Show less
-      </button>
-    </li>
+    </fieldset>
   );
 }
diff --git a/packages/samples/headless-commerce-react/src/components/facets/regular-facet/regular-facet.tsx b/packages/samples/headless-commerce-react/src/components/facets/regular-facet/regular-facet.tsx
index b6ac1eea17e..e4bb91a4a80 100644
--- a/packages/samples/headless-commerce-react/src/components/facets/regular-facet/regular-facet.tsx
+++ b/packages/samples/headless-commerce-react/src/components/facets/regular-facet/regular-facet.tsx
@@ -1,5 +1,9 @@
-import {RegularFacet as HeadlessRegularFacet} from '@coveo/headless/commerce';
-import {useEffect, useState} from 'react';
+import {
+  RegularFacet as HeadlessRegularFacet,
+  RegularFacetSearchResult,
+  RegularFacetValue,
+} from '@coveo/headless/commerce';
+import {useEffect, useRef, useState} from 'react';
 
 interface IRegularFacetProps {
   controller: HeadlessRegularFacet;
@@ -9,26 +13,127 @@ export default function RegularFacet(props: IRegularFacetProps) {
   const {controller} = props;
 
   const [state, setState] = useState(controller.state);
+  const [showFacetSearchResults, setShowFacetSearchResults] = useState(false);
+
+  const facetSearchInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     controller.subscribe(() => setState(controller.state));
   }, [controller]);
 
-  const renderFacetValues = () => {
+  const focusFacetSearchInput = (): void => {
+    facetSearchInputRef.current!.focus();
+  };
+
+  const onChangeFacetSearchInput = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (e.target.value === '') {
+      setShowFacetSearchResults(false);
+      controller.facetSearch.clear();
+      return;
+    }
+
+    controller.facetSearch.updateText(e.target.value);
+    controller.facetSearch.search();
+    setShowFacetSearchResults(true);
+  };
+
+  const highlightFacetSearchResult = (displayValue: string): string => {
+    const query = state.facetSearch.query;
+    const regex = new RegExp(query, 'gi');
+    return displayValue.replace(regex, (match) => `<mark>${match}</mark>`);
+  };
+
+  const onClickFacetSearchResult = (value: RegularFacetSearchResult): void => {
+    controller.facetSearch.select(value);
+    controller.facetSearch.clear();
+    setShowFacetSearchResults(false);
+    focusFacetSearchInput();
+  };
+
+  const onClickFacetSearchClear = (): void => {
+    setShowFacetSearchResults(false);
+    controller.facetSearch.clear();
+    focusFacetSearchInput();
+  };
+
+  const onClickClearSelectedFacetValues = (): void => {
+    controller.deselectAll();
+    focusFacetSearchInput();
+  };
+
+  const onClickFacetValue = (facetValue: RegularFacetValue): void => {
+    controller.toggleSelect(facetValue);
+    focusFacetSearchInput();
+  };
+
+  const renderFacetSearchControls = () => {
     return (
-      <ul className="FacetValues">
-        {state.values.map((value) => (
-          <li className="FacetValue" key={value.value}>
+      <div className="FacetSearch">
+        <label className="FacetSearchLabel" htmlFor="facetSearchInput">
+          Search:{' '}
+        </label>
+        <input
+          aria-label={`Search in facet '${state.displayName ?? state.facetId}'`}
+          className="FacetSearchInput"
+          disabled={state.isLoading}
+          id="facetSearchInput"
+          onChange={onChangeFacetSearchInput}
+          ref={facetSearchInputRef}
+          value={state.facetSearch.query}
+        ></input>
+        <button
+          aria-label="Clear facet search query"
+          className="FacetSearchClear"
+          disabled={state.isLoading || state.facetSearch.query === ''}
+          onClick={onClickFacetSearchClear}
+          type="reset"
+        >
+          X
+        </button>
+        {state.facetSearch.isLoading && (
+          <span className="FacetSearchLoading">
+            {' '}
+            Facet search is loading...
+          </span>
+        )}
+      </div>
+    );
+  };
+
+  const renderFacetSearchResults = () => {
+    return state.facetSearch.values.length === 0 ? (
+      <span className="FacetSearchNoResults">
+        No results for <strong>{state.facetSearch.query}</strong>
+      </span>
+    ) : (
+      <ul className="FacetSearchResults">
+        {state.facetSearch.values.map((value) => (
+          <li
+            className="FacetSearchResult"
+            key={value.rawValue}
+            onClick={() => onClickFacetSearchResult(value)}
+            style={{width: 'fit-content'}}
+          >
             <input
-              className="FacetValueCheckbox"
+              aria-label={`Select facet search result ${value.displayValue}`}
+              className="FacetSearchResultCheckbox"
+              disabled={state.isLoading}
+              id={value.rawValue}
               type="checkbox"
-              checked={value.state !== 'idle'}
-              onChange={() => controller.toggleSelect(value)}
             ></input>
-            <label className="FacetValueName">{value.value}</label>
-            <span className="FacetValueNumberOfResults">
+            <label className="FacetSearchResultLabel" htmlFor={value.rawValue}>
+              <span
+                className="FacetSearchResultName"
+                dangerouslySetInnerHTML={{
+                  __html: highlightFacetSearchResult(value.displayValue),
+                }}
+              ></span>
+            </label>
+            <span className="FacetSearchResultNumberOfProducts">
               {' '}
-              ({value.numberOfResults})
+              ({value.count})
             </span>
           </li>
         ))}
@@ -36,31 +141,72 @@ export default function RegularFacet(props: IRegularFacetProps) {
     );
   };
 
+  const renderFacetValues = () => {
+    return (
+      <div className="FacetValuesControls">
+        <button
+          aria-label="Clear selected facet values"
+          className="FacetClearSelected"
+          disabled={state.isLoading || !state.hasActiveValues}
+          onClick={onClickClearSelectedFacetValues}
+          type="reset"
+        >
+          X
+        </button>
+        {state.isLoading && (
+          <span className="FacetLoading"> Facet is loading...</span>
+        )}
+        <ul className="FacetValues">
+          {state.values.map((value) => (
+            <li className="FacetValue" key={value.value}>
+              <input
+                aria-label={`${value.state === 'idle' ? 'Select' : 'Deselect'} facet value '${value.value}'`}
+                className="FacetValueCheckbox"
+                disabled={state.isLoading}
+                id={value.value}
+                checked={value.state !== 'idle'}
+                onClick={() => onClickFacetValue(value)}
+                type="checkbox"
+              ></input>
+              <label className="FacetValueLabel" htmlFor={value.value}>
+                <span className="FacetValueName">{value.value}</span>
+                <span className="FacetValueNumberOfProducts">
+                  {' '}
+                  ({value.numberOfResults})
+                </span>
+              </label>
+            </li>
+          ))}
+        </ul>
+        <button
+          aria-label="Show more facet values"
+          className="FacetShowMore"
+          disabled={state.isLoading || !state.canShowMoreValues}
+          onClick={controller.showMoreValues}
+        >
+          +
+        </button>
+        <button
+          aria-label="Show less facet values"
+          className="FacetShowLess"
+          disabled={state.isLoading || !state.canShowLessValues}
+          onClick={controller.showLessValues}
+        >
+          -
+        </button>
+      </div>
+    );
+  };
+
   return (
-    <li className="RegularFacet">
-      <h3 className="FacetDisplayName">{state.displayName ?? state.facetId}</h3>
-      <button
-        className="FacetClear"
-        disabled={!state.hasActiveValues}
-        onClick={controller.deselectAll}
-      >
-        Clear
-      </button>
-      {renderFacetValues()}
-      <button
-        className="FacetShowMore"
-        disabled={!state.canShowMoreValues}
-        onClick={controller.showMoreValues}
-      >
-        Show more
-      </button>
-      <button
-        className="FacetShowLess"
-        disabled={!state.canShowLessValues}
-        onClick={controller.showLessValues}
-      >
-        Show less
-      </button>
-    </li>
+    <fieldset className="RegularFacet">
+      <legend className="FacetDisplayName">
+        {state.displayName ?? state.facetId}
+      </legend>
+      {renderFacetSearchControls()}
+      {showFacetSearchResults
+        ? renderFacetSearchResults()
+        : renderFacetValues()}
+    </fieldset>
   );
 }
diff --git a/packages/samples/headless-commerce-react/src/components/instant-products/instant-products.tsx b/packages/samples/headless-commerce-react/src/components/instant-products/instant-products.tsx
new file mode 100644
index 00000000000..d4507642585
--- /dev/null
+++ b/packages/samples/headless-commerce-react/src/components/instant-products/instant-products.tsx
@@ -0,0 +1,64 @@
+import {
+  InstantProducts as HeadlessInstantProducts,
+  Product,
+} from '@coveo/headless/commerce';
+import {useEffect, useState} from 'react';
+
+interface IInstantProductProps {
+  controller: HeadlessInstantProducts;
+  navigate: (pathName: string) => void;
+}
+
+export default function InstantProducts(props: IInstantProductProps) {
+  const {controller, navigate} = props;
+  const [state, setState] = useState(controller.state);
+
+  useEffect(
+    () => controller.subscribe(() => setState({...controller.state})),
+    [controller]
+  );
+
+  if (state.products.length === 0 || !state.query) {
+    return null;
+  }
+
+  const onClickProduct = (product: Product) => {
+    controller.interactiveProduct({options: {product}}).select();
+
+    // Normally here, you would simply navigate to product.clickUri.
+    const productId = product.ec_product_id ?? product.permanentid;
+    const productName = product.ec_name ?? product.permanentid;
+    const productPrice = product.ec_promo_price ?? product.ec_price ?? NaN;
+    navigate(`/product/${productId}/${productName}/${productPrice}`);
+    // In this sample project, we navigate to a custom URL because the app doesn't have access to a commerce backend
+    // service to retrieve detailed product information from for the purpose of rendering a product description page
+    // (PDP).
+    // Therefore, we encode bare-minimum product information in the URL, and use it to render the PDP.
+    // This is by no means a realistic scenario.
+  };
+
+  return (
+    <div className="InstantProducts">
+      {state.products.length === 0 ? (
+        <p className="NoInstantProducts">
+          No instant products for query <b>{state.query}</b>
+        </p>
+      ) : (
+        <>
+          <p>
+            Instant products for query <b>{state.query}</b>
+          </p>
+          <ul className="InstantProducts">
+            {state.products.map((product, index) => (
+              <li className="Product" key={index}>
+                <button onClick={() => onClickProduct(product)}>
+                  {product.ec_name} ({product.ec_product_id})
+                </button>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/packages/samples/headless-commerce-react/src/components/products-per-page/products-per-page.tsx b/packages/samples/headless-commerce-react/src/components/products-per-page/products-per-page.tsx
new file mode 100644
index 00000000000..a9bf608fc25
--- /dev/null
+++ b/packages/samples/headless-commerce-react/src/components/products-per-page/products-per-page.tsx
@@ -0,0 +1,47 @@
+import {Pagination} from '@coveo/headless/commerce';
+import {useEffect, useState} from 'react';
+
+interface IProductsPerPageProps {
+  controller: Pagination;
+}
+
+export default function ProductsPerPage(props: IProductsPerPageProps) {
+  const {controller} = props;
+
+  const [state, setState] = useState(controller.state);
+
+  useEffect(() => {
+    controller.subscribe(() => setState(controller.state));
+  }, [controller]);
+
+  const options = [5, 10, 20, 50];
+  return (
+    <div className="ProductsPerPage">
+      <label className="ProductsPerPageLabel">Products per page:</label>
+      {options.map((pageSize) => (
+        <label key={pageSize} className="ProductsPerPageOption">
+          <input
+            type="radio"
+            name="page"
+            value={pageSize}
+            checked={state.pageSize === pageSize}
+            onChange={() => controller.setPageSize(pageSize)}
+          />
+          {pageSize}
+        </label>
+      ))}
+      <label key={0} className="ProductsPerPageOptionOther">
+        <input
+          type="radio"
+          name="page"
+          value={state.pageSize}
+          checked={state.pageSize === 0 || !options.includes(state.pageSize)}
+          onChange={() => controller.setPageSize(0)}
+        />
+        {state.pageSize !== 0 && !options.includes(state.pageSize)
+          ? `Other (${state.pageSize})`
+          : 'Default'}
+      </label>
+    </div>
+  );
+}
diff --git a/packages/samples/headless-commerce-react/src/components/search-box/search-box.tsx b/packages/samples/headless-commerce-react/src/components/search-box/search-box.tsx
index e41751edcc8..ae0a9416602 100644
--- a/packages/samples/headless-commerce-react/src/components/search-box/search-box.tsx
+++ b/packages/samples/headless-commerce-react/src/components/search-box/search-box.tsx
@@ -1,45 +1,168 @@
-import {SearchBox as HeadlessSearchBox} from '@coveo/headless/commerce';
-import {useEffect, useState} from 'react';
+import {
+  SearchBox as HeadlessSearchBox,
+  InstantProducts as HeadlessInstantProducts,
+  Suggestion,
+} from '@coveo/headless/commerce';
+import {useEffect, useRef, useState} from 'react';
+import InstantProducts from '../instant-products/instant-products';
 
 interface ISearchBoxProps {
   controller: HeadlessSearchBox;
+  instantProductsController: HeadlessInstantProducts;
+  navigate: (pathName: string) => void;
 }
 
 export default function SearchBox(props: ISearchBoxProps) {
-  const {controller} = props;
+  const {controller, instantProductsController, navigate} = props;
 
   const [state, setState] = useState(controller.state);
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    controller.state.value && controller.clear();
-    controller.subscribe(() => setState(controller.state));
+    controller.subscribe(() => setState({...controller.state}));
   }, [controller]);
 
+  const focusSearchBoxInput = () => {
+    searchInputRef.current!.focus();
+  };
+
+  const hideDropdown = () => {
+    setIsDropdownVisible(false);
+  };
+
+  const showDropdown = () => {
+    setIsDropdownVisible(true);
+  };
+
+  const onSearchBoxInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === '') {
+      hideDropdown();
+      controller.clear();
+      return;
+    }
+
+    controller.updateText(e.target.value);
+    instantProductsController.updateQuery(e.target.value);
+    controller.showSuggestions();
+    showDropdown();
+  };
+
+  const onSearchBoxInputKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    switch (e.key) {
+      case 'Escape':
+        if (isDropdownVisible) {
+          hideDropdown();
+          break;
+        }
+        if (state.value !== '') {
+          controller.clear();
+          instantProductsController.updateQuery(state.value);
+          break;
+        }
+        break;
+      case 'Enter':
+        hideDropdown();
+        controller.submit();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onClickSearchBoxClear = () => {
+    focusSearchBoxInput();
+    hideDropdown();
+    controller.clear();
+    instantProductsController.updateQuery(state.value);
+  };
+
+  const onClickSearchBoxSubmit = () => {
+    controller.submit();
+    focusSearchBoxInput();
+    hideDropdown();
+  };
+
+  const onFocusSuggestion = (suggestion: Suggestion) => {
+    instantProductsController.updateQuery(suggestion.rawValue);
+  };
+
+  const onSelectSuggestion = (suggestion: Suggestion) => {
+    controller.selectSuggestion(suggestion.rawValue);
+    hideDropdown();
+  };
+
+  const renderDropdown = () => {
+    return (
+      <div className="SearchBoxDropdown row">
+        {state.suggestions.length > 0 && (
+          <div className="QuerySuggestion column small">
+            <p>Query suggestions</p>
+            <ul>
+              {state.suggestions.map((suggestion) => (
+                <li
+                  key={`${suggestion.rawValue}-suggestion`}
+                  className="QuerySuggestion"
+                >
+                  <button
+                    onMouseOver={() => onFocusSuggestion(suggestion)}
+                    onFocus={() => onFocusSuggestion(suggestion)}
+                    onClick={() => onSelectSuggestion(suggestion)}
+                    dangerouslySetInnerHTML={{
+                      __html: suggestion.highlightedValue,
+                    }}
+                  ></button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        <div className="InstantProducts column">
+          <InstantProducts
+            controller={instantProductsController}
+            navigate={navigate}
+          />
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="Searchbox">
       <input
         className="SearchBoxInput"
+        onChange={onSearchBoxInputChange}
+        onKeyDown={onSearchBoxInputKeyDown}
+        ref={searchInputRef}
         value={state.value}
-        onChange={(e) => controller.updateText(e.target.value)}
       ></input>
-      {state.value !== '' && (
-        <span className="SearchBoxClear">
-          <button onClick={controller.clear}>X</button>
-        </span>
-      )}
-      <button onClick={controller.submit}>Search</button>
-      {state.suggestions.length > 0 && (
-        <ul className="QuerySuggestions">
-          {state.suggestions.map((suggestion, index) => (
-            <li key={index} className="QuerySuggestion">
-              <button
-                onClick={() => controller.selectSuggestion(suggestion.rawValue)}
-                dangerouslySetInnerHTML={{__html: suggestion.highlightedValue}}
-              ></button>
-            </li>
-          ))}
-        </ul>
-      )}
+      <button
+        aria-label="Clear query"
+        className="SearchBoxClear"
+        disabled={
+          state.isLoadingSuggestions || state.isLoading || state.value === ''
+        }
+        onClick={onClickSearchBoxClear}
+        title="Clear query"
+        type="reset"
+      >
+        X
+      </button>
+      <button
+        arial-label="Submit query"
+        className="SearchBoxSubmit"
+        disabled={state.isLoading}
+        onClick={onClickSearchBoxSubmit}
+        title="Submit query"
+        type="submit"
+      >
+        Search
+      </button>
+      {isDropdownVisible && renderDropdown()}
     </div>
   );
 }
diff --git a/packages/samples/headless-commerce-react/src/components/standalone-search-box/standalone-search-box.tsx b/packages/samples/headless-commerce-react/src/components/standalone-search-box/standalone-search-box.tsx
index a6a6c3c87c1..a3cb82f450b 100644
--- a/packages/samples/headless-commerce-react/src/components/standalone-search-box/standalone-search-box.tsx
+++ b/packages/samples/headless-commerce-react/src/components/standalone-search-box/standalone-search-box.tsx
@@ -1,19 +1,28 @@
-import {StandaloneSearchBox as HeadlessStandaloneSearchBox} from '@coveo/headless/commerce';
-import {useEffect, useState} from 'react';
+import {
+  StandaloneSearchBox as HeadlessStandaloneSearchBox,
+  InstantProducts as HeadlessInstantProducts,
+  Suggestion,
+} from '@coveo/headless/commerce';
+import {useEffect, useRef, useState} from 'react';
+import InstantProducts from '../instant-products/instant-products';
 
 interface IStandaloneSearchBoxProps {
   navigate: (url: string) => void;
   controller: HeadlessStandaloneSearchBox;
+  instantProductsController: HeadlessInstantProducts;
 }
 
 export default function StandaloneSearchBox(props: IStandaloneSearchBoxProps) {
-  const {navigate, controller} = props;
+  const {navigate, controller, instantProductsController} = props;
 
   const [state, setState] = useState(controller.state);
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     controller.state.value && controller.clear();
-    controller.subscribe(() => setState(controller.state));
+    controller.subscribe(() => setState({...controller.state}));
   }, [controller]);
 
   useEffect(() => {
@@ -25,31 +34,145 @@ export default function StandaloneSearchBox(props: IStandaloneSearchBoxProps) {
     }
   }, [state.redirectTo, navigate, state.value, controller]);
 
+  const focusSearchBoxInput = () => {
+    searchInputRef.current!.focus();
+  };
+
+  const hideDropdown = () => {
+    setIsDropdownVisible(false);
+  };
+
+  const showDropdown = () => {
+    setIsDropdownVisible(true);
+  };
+
+  const onSearchBoxInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === '') {
+      hideDropdown();
+      controller.clear();
+      return;
+    }
+
+    controller.updateText(e.target.value);
+    instantProductsController.updateQuery(e.target.value);
+    controller.showSuggestions();
+    showDropdown();
+  };
+
+  const onSearchBoxInputKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    switch (e.key) {
+      case 'Escape':
+        if (isDropdownVisible) {
+          hideDropdown();
+          break;
+        }
+        if (state.value !== '') {
+          controller.clear();
+          instantProductsController.updateQuery(state.value);
+          break;
+        }
+        break;
+      case 'Enter':
+        hideDropdown();
+        controller.submit();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onClickSearchBoxClear = () => {
+    focusSearchBoxInput();
+    hideDropdown();
+    controller.clear();
+    instantProductsController.updateQuery(state.value);
+  };
+
+  const onClickSearchBoxSubmit = () => {
+    controller.submit();
+    focusSearchBoxInput();
+    hideDropdown();
+  };
+
+  const onFocusSuggestion = (suggestion: Suggestion) => {
+    instantProductsController.updateQuery(suggestion.rawValue);
+  };
+
+  const onSelectSuggestion = (suggestion: Suggestion) => {
+    controller.selectSuggestion(suggestion.rawValue);
+    hideDropdown();
+  };
+
+  const renderDropdown = () => {
+    return (
+      <div className="SearchBoxDropdown row">
+        {state.suggestions.length > 0 && (
+          <div className="QuerySuggestion column small">
+            <p>Query suggestions</p>
+            <ul>
+              {state.suggestions.map((suggestion) => (
+                <li
+                  key={`${suggestion.rawValue}-suggestion`}
+                  className="QuerySuggestion"
+                >
+                  <button
+                    onMouseOver={() => onFocusSuggestion(suggestion)}
+                    onFocus={() => onFocusSuggestion(suggestion)}
+                    onClick={() => onSelectSuggestion(suggestion)}
+                    dangerouslySetInnerHTML={{
+                      __html: suggestion.highlightedValue,
+                    }}
+                  ></button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        <div className="InstantProducts column">
+          <InstantProducts
+            controller={instantProductsController}
+            navigate={navigate}
+          />
+        </div>
+      </div>
+    );
+  };
+
   return (
-    <div className="StandaloneSearchbox">
+    <div className="Searchbox">
       <input
         className="SearchBoxInput"
+        onChange={onSearchBoxInputChange}
+        onKeyDown={onSearchBoxInputKeyDown}
+        ref={searchInputRef}
         value={state.value}
-        onChange={(e) => controller.updateText(e.target.value)}
       ></input>
-      {state.value !== '' && (
-        <span className="SearchBoxClear">
-          <button onClick={controller.clear}>X</button>
-        </span>
-      )}
-      <button onClick={() => controller.submit()}>Search</button>
-      {state.suggestions.length > 0 && (
-        <ul className="QuerySuggestions">
-          {state.suggestions.map((suggestion, index) => (
-            <li key={index} className="QuerySuggestion">
-              <button
-                onClick={() => controller.selectSuggestion(suggestion.rawValue)}
-                dangerouslySetInnerHTML={{__html: suggestion.highlightedValue}}
-              ></button>
-            </li>
-          ))}
-        </ul>
-      )}
+      <button
+        aria-label="Clear query"
+        className="SearchBoxClear"
+        disabled={
+          state.isLoadingSuggestions || state.isLoading || state.value === ''
+        }
+        onClick={onClickSearchBoxClear}
+        title="Clear query"
+        type="reset"
+      >
+        X
+      </button>
+      <button
+        arial-label="Submit query"
+        className="SearchBoxSubmit"
+        disabled={state.isLoading}
+        onClick={onClickSearchBoxSubmit}
+        title="Submit query"
+        type="submit"
+      >
+        Search
+      </button>
+      {isDropdownVisible && renderDropdown()}
     </div>
   );
 }
diff --git a/packages/samples/headless-commerce-react/src/components/summary/summary.tsx b/packages/samples/headless-commerce-react/src/components/summary/summary.tsx
index 31be502caa1..bbc94418103 100644
--- a/packages/samples/headless-commerce-react/src/components/summary/summary.tsx
+++ b/packages/samples/headless-commerce-react/src/components/summary/summary.tsx
@@ -14,14 +14,33 @@ export default function Summary(props: ISummaryProps) {
     controller.subscribe(() => setState(controller.state));
   }, [controller]);
 
-  const getSummaryText = () => {
+  const renderQuerySummary = () => {
+    if (!('query' in state) || state.query === '') {
+      return null;
+    }
+
+    return (
+      <span>
+        {' '}
+        for query <b>{state.query as string}</b>
+      </span>
+    );
+  };
+
+  const renderSummary = () => {
+    if (state.isLoading) {
+      return <span>Loading...</span>;
+    }
+
     const {firstProduct, lastProduct, totalNumberOfProducts} = state;
-    return `Showing results ${firstProduct} - ${lastProduct} of ${totalNumberOfProducts}`;
+    return (
+      <span>
+        Showing products {firstProduct} - {lastProduct} of{' '}
+        {totalNumberOfProducts}
+        {renderQuerySummary()}
+      </span>
+    );
   };
 
-  return (
-    <div className="Summary">
-      <span>{getSummaryText()}</span>
-    </div>
-  );
+  return <div className="Summary">{renderSummary()}</div>;
 }
diff --git a/packages/samples/headless-commerce-react/src/components/use-cases/search-and-listing-interface/search-and-listing-interface.css b/packages/samples/headless-commerce-react/src/components/use-cases/search-and-listing-interface/search-and-listing-interface.css
index d9b8b6316ab..b94783dac96 100644
--- a/packages/samples/headless-commerce-react/src/components/use-cases/search-and-listing-interface/search-and-listing-interface.css
+++ b/packages/samples/headless-commerce-react/src/components/use-cases/search-and-listing-interface/search-and-listing-interface.css
@@ -1,7 +1,16 @@
 .column {
   float: left;
+}
+
+.small {
+  width: 25%;
+}
+.medium {
   width: 50%;
 }
+.large {
+  width: 75%;
+}
 
 .row:after {
   content: '';
diff --git a/packages/samples/headless-commerce-react/src/components/use-cases/search-and-listing-interface/search-and-listing-interface.tsx b/packages/samples/headless-commerce-react/src/components/use-cases/search-and-listing-interface/search-and-listing-interface.tsx
index c05cfcee9c5..7f5d2145055 100644
--- a/packages/samples/headless-commerce-react/src/components/use-cases/search-and-listing-interface/search-and-listing-interface.tsx
+++ b/packages/samples/headless-commerce-react/src/components/use-cases/search-and-listing-interface/search-and-listing-interface.tsx
@@ -7,6 +7,7 @@ import {useState, useEffect} from 'react';
 import BreadcrumbManager from '../../breadcrumb-manager/breadcrumb-manager';
 import FacetGenerator from '../../facets/facet-generator/facet-generator';
 import ProductList from '../../product-list/product-list';
+import ProductsPerPage from '../../products-per-page/products-per-page';
 import ShowMore from '../../show-more/show-more';
 import Sort from '../../sort/sort';
 import Summary from '../../summary/summary';
@@ -37,23 +38,27 @@ export default function SearchAndListingInterface(
 
   return (
     <div className="SearchAndListingInterface row">
-      <div className="column">
+      <div className="row">
+        <Sort controller={searchOrListingController.sort()} />
+        <Summary controller={searchOrListingController.summary()} />
+      </div>
+      <div className="column small">
         <FacetGenerator
           controller={searchOrListingController.facetGenerator()}
         />
       </div>
-      <div className="column">
+      <div className="column medium">
         <BreadcrumbManager
           controller={searchOrListingController.breadcrumbManager()}
         />
-        <Sort controller={searchOrListingController.sort()} />
-        <Summary controller={searchOrListingController.summary()} />
+
         <ProductList
           products={searchOrListingState.products}
           controllerBuilder={searchOrListingController.interactiveProduct}
           cartController={cartController}
           navigate={navigate}
         ></ProductList>
+        <ProductsPerPage controller={searchOrListingController.pagination()} />
         <ShowMore controller={searchOrListingController.pagination()} />
         {/*<Pagination controller={controller.pagination()} />*/}
       </div>
diff --git a/packages/samples/headless-commerce-react/src/index.css b/packages/samples/headless-commerce-react/src/index.css
index 7323ae85c54..afd0f7965af 100644
--- a/packages/samples/headless-commerce-react/src/index.css
+++ b/packages/samples/headless-commerce-react/src/index.css
@@ -1,5 +1,5 @@
 body {
-  margin: 0;
+  margin: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
     'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
diff --git a/packages/samples/headless-commerce-react/src/layout/layout.tsx b/packages/samples/headless-commerce-react/src/layout/layout.tsx
index cb900bfe3ed..3410fa9cfd1 100644
--- a/packages/samples/headless-commerce-react/src/layout/layout.tsx
+++ b/packages/samples/headless-commerce-react/src/layout/layout.tsx
@@ -1,5 +1,6 @@
 import {
   buildCart,
+  buildInstantProducts,
   buildStandaloneSearchBox,
   CommerceEngine,
 } from '@coveo/headless/commerce';
@@ -17,6 +18,8 @@ interface ILayoutProps {
 
 export default function Layout(props: ILayoutProps) {
   const {engine, isPending, navigate, children} = props;
+  const standaloneSearchBoxId = 'standalone-search-box';
+
   return (
     <div className="Layout">
       <section className="Header">
@@ -93,10 +96,13 @@ export default function Layout(props: ILayoutProps) {
             controller={buildStandaloneSearchBox(engine, {
               options: {
                 redirectionUrl: '/search',
-                id: 'standalone-search-box',
+                id: standaloneSearchBoxId,
                 highlightOptions,
               },
             })}
+            instantProductsController={buildInstantProducts(engine, {
+              options: {searchBoxId: standaloneSearchBoxId},
+            })}
           />
         )}
       </section>
diff --git a/packages/samples/headless-commerce-react/src/pages/cart-page.tsx b/packages/samples/headless-commerce-react/src/pages/cart-page.tsx
index 50cea6edac9..16d4898f6c0 100644
--- a/packages/samples/headless-commerce-react/src/pages/cart-page.tsx
+++ b/packages/samples/headless-commerce-react/src/pages/cart-page.tsx
@@ -24,6 +24,10 @@ export default function CartPage(props: ICartPageProps) {
   });
 
   useEffect(() => {
+    /**
+     * It is important to call the `Context` controller's `setView` method with the current URL when a page is loaded,
+     * as the Commerce API requires this information to function properly.
+     */
     contextController.setView({url});
 
     if (
diff --git a/packages/samples/headless-commerce-react/src/pages/home-page.tsx b/packages/samples/headless-commerce-react/src/pages/home-page.tsx
index 9c34fde235d..4c445dbb5cc 100644
--- a/packages/samples/headless-commerce-react/src/pages/home-page.tsx
+++ b/packages/samples/headless-commerce-react/src/pages/home-page.tsx
@@ -23,6 +23,10 @@ export default function HomePage(props: IHomePageProps) {
   });
 
   useEffect(() => {
+    /**
+     * It is important to call the `Context` controller's `setView` method with the current URL when a page is loaded,
+     * as the Commerce API requires this information to function properly.
+     */
     contextController.setView({url});
 
     if (
diff --git a/packages/samples/headless-commerce-react/src/pages/product-description-page.tsx b/packages/samples/headless-commerce-react/src/pages/product-description-page.tsx
index c290c6c79de..d6413fd2513 100644
--- a/packages/samples/headless-commerce-react/src/pages/product-description-page.tsx
+++ b/packages/samples/headless-commerce-react/src/pages/product-description-page.tsx
@@ -46,6 +46,10 @@ export default function ProductDescriptionPage(
   const product = loadProduct();
 
   useEffect(() => {
+    /**
+     * It is important to call the `Context` controller's `setView` method with the current URL when a page is loaded,
+     * as the Commerce API requires this information to function properly.
+     */
     contextController.setView({url});
   }, [contextController, url]);
 
diff --git a/packages/samples/headless-commerce-react/src/pages/product-listing-page.tsx b/packages/samples/headless-commerce-react/src/pages/product-listing-page.tsx
index a827542a63b..720a374412a 100644
--- a/packages/samples/headless-commerce-react/src/pages/product-listing-page.tsx
+++ b/packages/samples/headless-commerce-react/src/pages/product-listing-page.tsx
@@ -52,6 +52,16 @@ export default function ProductListingPage(props: IProductListingPageProps) {
   }, [productListingController]);
 
   useEffect(() => {
+    /**
+     * It is important to call the `Context` controller's `setView` method with the current URL when a page is loaded,
+     * as the Commerce API requires this information to function properly.
+     *
+     * Note, however, that calling this method will reset the query, pagination, sort, and facets.
+     *
+     * This means that on a search or listing page, you must call this method BEFORE you bind the URL manager.
+     * Otherwise, the URL manager will restore the state from the URL parameters, and then this state will get
+     * immediately reset when the `setView` method is called.
+     */
     contextController.setView({url});
     const unsubscribe = bindUrlManager();
 
diff --git a/packages/samples/headless-commerce-react/src/pages/search-page.tsx b/packages/samples/headless-commerce-react/src/pages/search-page.tsx
index b188b8faaff..58e76f09665 100644
--- a/packages/samples/headless-commerce-react/src/pages/search-page.tsx
+++ b/packages/samples/headless-commerce-react/src/pages/search-page.tsx
@@ -1,4 +1,5 @@
 import {
+  buildInstantProducts,
   buildSearch,
   buildSearchBox,
   Cart,
@@ -25,8 +26,10 @@ export default function Search(props: ISearchProps) {
 
   contextController.setView({url});
   const searchController = buildSearch(engine);
+
+  const searchBoxId = 'search-box';
   const searchBoxController = buildSearchBox(engine, {
-    options: {id: 'search-box', highlightOptions},
+    options: {id: searchBoxId, highlightOptions},
   });
 
   const bindUrlManager = useCallback(() => {
@@ -58,6 +61,16 @@ export default function Search(props: ISearchProps) {
   }, [searchController]);
 
   useEffect(() => {
+    /**
+     * It is important to call the `Context` controller's `setView` method with the current URL when a page is loaded,
+     * as the Commerce API requires this information to function properly.
+     *
+     * Note, however, that calling this method will reset the query, pagination, sort, and facets.
+     *
+     * This means that on a search or listing page, you must call this method BEFORE you bind the URL manager.
+     * Otherwise, the URL manager will restore the state from the URL parameters, and then this state will get
+     * immediately reset when the `setView` method is called.
+     */
     contextController.setView({url});
     const unsubscribe = bindUrlManager();
 
@@ -84,7 +97,13 @@ export default function Search(props: ISearchProps) {
 
   return (
     <div className="SearchPage">
-      <SearchBox controller={searchBoxController} />
+      <SearchBox
+        controller={searchBoxController}
+        instantProductsController={buildInstantProducts(engine, {
+          options: {searchBoxId},
+        })}
+        navigate={navigate}
+      />
       <h2 className="PageTitle">Search</h2>
       <DidYouMean controller={searchController.didYouMean()} />
       <SearchAndListingInterface