diff --git a/docs/assets/javascript/search-results.js b/docs/assets/javascript/search-results.js
index d3fec2b398e..9e636eff526 100644
--- a/docs/assets/javascript/search-results.js
+++ b/docs/assets/javascript/search-results.js
@@ -4,9 +4,9 @@ import { tokens } from '@rhds/tokens/meta.js';
 import '@rhds/elements/rh-badge/rh-badge.js';
 
 const params = new URLSearchParams(location.search);
-const searchTerm = params.get('s');
+const searchTerm = params.get('search');
 // since this is the results page, just search for the query param immediately
-const searchResults = fuse.search(searchTerm)?.map(x => x.item);
+const searchResults = searchTerm ? fuse.search(searchTerm)?.map(x => x.item) : [];
 const results = document.getElementById('results');
 const resultsList = document.getElementById('results-list');
 const categoryCtas = document.querySelectorAll('.token-category');
diff --git a/docs/assets/javascript/search-tokens.js b/docs/assets/javascript/search-tokens.js
index ffba606ddc7..773856f4461 100644
--- a/docs/assets/javascript/search-tokens.js
+++ b/docs/assets/javascript/search-tokens.js
@@ -29,7 +29,7 @@ export async function init(form) {
   form.addEventListener('submit', event => {
     event.preventDefault();
     const url = new URL('/tokens/search/', location.origin);
-    url.searchParams.set('s', search.value);
+    url.searchParams.set('search', search.value);
     location.href = url.href;
   });
   search.addEventListener('input', async function() {
diff --git a/uxdot/uxdot-search.css b/uxdot/uxdot-search.css
index dd3dc47c979..cbea5621333 100644
--- a/uxdot/uxdot-search.css
+++ b/uxdot/uxdot-search.css
@@ -30,19 +30,21 @@ input::placeholder {
   overflow-y: scroll;
   z-index: 2;
   grid-column: 1/2;
-  width: calc(100% + 2 * var(--rh-border-width-md));
-  inset-block-start: var(--rh-length-2xl);
-  inset-inline-start: calc(-1 * var(--rh-space-md));
+  width: calc(100% - 2 * var(--rh-space-sm));
   padding: var(--rh-space-sm);
+  inset-block-start: 100%;
+  inset-inline-start: 0%;
+  background: light-dark(var(--rh-color-surface-lightest), var(--rh-color-surface-darkest));
+  color: var(--rh-color-text-primary);
+  box-shadow: var(--rh-box-shadow-md);
 }
 
 ol {
   list-style-type: none;
   flex-flow: column nowrap;
-  padding-inline-start: 0;
-  border: var(--rh-border-width-sm);
-  background: var(--rh-color-surface-lightest);
   margin: 0;
+  padding: 0;
+  border: var(--rh-border-width-sm);
   height: calc(100% - var(--rh-space-md));
   width: calc(100% - 2 * var(--rh-border-width-md));
 }
@@ -63,5 +65,6 @@ li {
 
 li[aria-selected='true'],
 li:focus-within {
-  outline: var(--rh-border-width-md);
+  outline: var(--rh-border-width-md) solid var(--rh-color-interactive-primary-default);
+  background: light-dark(var(--rh-color-surface-lighter), var(--rh-color-surface-darker));
 }
diff --git a/uxdot/uxdot-search.ts b/uxdot/uxdot-search.ts
index d37e9bf2f6b..775a8c66943 100644
--- a/uxdot/uxdot-search.ts
+++ b/uxdot/uxdot-search.ts
@@ -89,6 +89,7 @@ export class UxdotSearch extends LitElement {
       <input id="input"
              placeholder="${ifDefined(this.placeholder)}"
              role="combobox"
+             autocomplete="off"
              aria-label="${ifDefined(this.#ariaLabel)}"
              aria-autocomplete="list"
              aria-controls="listbox"