diff --git a/templates/skeleton/app/components/PageLayout.tsx b/templates/skeleton/app/components/PageLayout.tsx
index c76369028..d6a808b5e 100644
--- a/templates/skeleton/app/components/PageLayout.tsx
+++ b/templates/skeleton/app/components/PageLayout.tsx
@@ -1,5 +1,5 @@
 import {Await, Link} from '@remix-run/react';
-import {Suspense} from 'react';
+import {Suspense, useId} from 'react';
 import type {
   CartApiQueryFragment,
   FooterQuery,
@@ -70,6 +70,7 @@ function CartAside({cart}: {cart: PageLayoutProps['cart']}) {
 }
 
 function SearchAside() {
+  const queriesDatalistId = useId();
   return (
     <Aside type="search" heading="SEARCH">
       <div className="predictive-search">
@@ -84,6 +85,7 @@ function SearchAside() {
                 placeholder="Search"
                 ref={inputRef}
                 type="search"
+                list={queriesDatalistId}
               />
               &nbsp;
               <button onClick={goToSearch}>Search</button>
@@ -92,7 +94,7 @@ function SearchAside() {
         </SearchFormPredictive>
 
         <SearchResultsPredictive>
-          {({items, total, term, state, inputRef, closeSearch}) => {
+          {({items, total, term, state, closeSearch}) => {
             const {articles, collections, pages, products, queries} = items;
 
             if (state === 'loading' && term.current) {
@@ -107,7 +109,7 @@ function SearchAside() {
               <>
                 <SearchResultsPredictive.Queries
                   queries={queries}
-                  inputRef={inputRef}
+                  queriesDatalistId={queriesDatalistId}
                 />
                 <SearchResultsPredictive.Products
                   products={products}
diff --git a/templates/skeleton/app/components/SearchResultsPredictive.tsx b/templates/skeleton/app/components/SearchResultsPredictive.tsx
index 4e6b01474..53a496d90 100644
--- a/templates/skeleton/app/components/SearchResultsPredictive.tsx
+++ b/templates/skeleton/app/components/SearchResultsPredictive.tsx
@@ -13,14 +13,14 @@ type PredictiveSearchItems = PredictiveSearchReturn['result']['items'];
 type UsePredictiveSearchReturn = {
   term: React.MutableRefObject<string>;
   total: number;
-  inputRef: React.MutableRefObject<HTMLInputElement | null>;
   items: PredictiveSearchItems;
   fetcher: Fetcher<PredictiveSearchReturn>;
+  queriesDatalistId: string;
 };
 
 type SearchResultsPredictiveArgs = Pick<
   UsePredictiveSearchReturn,
-  'term' | 'total' | 'inputRef' | 'items'
+  'term' | 'total' | 'items' | 'queriesDatalistId'
 > & {
   state: Fetcher['state'];
   closeSearch: () => void;
@@ -244,35 +244,18 @@ function SearchResultsPredictiveProducts({
 
 function SearchResultsPredictiveQueries({
   queries,
-  inputRef,
-}: PartialPredictiveSearchResult<'queries', 'inputRef'>) {
+  queriesDatalistId,
+}: PartialPredictiveSearchResult<'queries', 'queriesDatalistId'>) {
   if (!queries.length) return null;
 
   return (
-    <div className="predictive-search-result" key="queries">
-      <h5>Queries</h5>
-      <ul>
-        {queries.map((suggestion) => {
-          if (!suggestion) return null;
+    <datalist id={queriesDatalistId}>
+      {queries.map((suggestion) => {
+        if (!suggestion) return null;
 
-          return (
-            <li className="predictive-search-result-item" key={suggestion.text}>
-              <div
-                role="presentation"
-                onClick={() => {
-                  if (!inputRef.current) return;
-                  inputRef.current.value = suggestion.text;
-                  inputRef.current.focus();
-                }}
-                dangerouslySetInnerHTML={{
-                  __html: suggestion?.styledText,
-                }}
-              />
-            </li>
-          );
-        })}
-      </ul>
-    </div>
+        return <option key={suggestion.text} value={suggestion.text} />;
+      })}
+    </datalist>
   );
 }