diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx
index 05e8257d..6ac6128f 100644
--- a/src/components/form/SearchBar.tsx
+++ b/src/components/form/SearchBar.tsx
@@ -9,7 +9,7 @@ import { TextInputControl } from "../text-inputs/TextInputControl";
 export interface SearchBarProps {
   placeholder?: string;
   onChange: (value: string, force: boolean) => void;
-  onUnFocus: () => void;
+  onUnFocus: (newSearch?: string) => void;
   value: string;
 }
 
@@ -57,6 +57,20 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
             className="w-full flex-1 bg-transparent px-4 py-4 pl-12 text-search-text placeholder-search-placeholder focus:outline-none sm:py-4 sm:pr-2"
             placeholder={props.placeholder}
           />
+
+          {props.value.length > 0 && (
+            <div
+              onClick={() => {
+                props.onUnFocus("");
+                if (ref && typeof ref !== "function") {
+                  ref.current?.focus();
+                }
+              }}
+              className="cursor-pointer hover:text-white  absolute bottom-0 right-2 top-0 flex justify-center my-auto h-10 w-10 items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full transition-[transform,background-color] duration-200"
+            >
+              <Icon icon={Icons.X} className="transition-colors duration-200" />
+            </div>
+          )}
         </Flare.Child>
       </Flare.Base>
     );
diff --git a/src/hooks/useSearchQuery.ts b/src/hooks/useSearchQuery.ts
index 75cd2a28..425fe4f1 100644
--- a/src/hooks/useSearchQuery.ts
+++ b/src/hooks/useSearchQuery.ts
@@ -33,8 +33,8 @@ export function useSearchQuery(): [
     );
   };
 
-  const onUnFocus = () => {
-    updateParams(search, true);
+  const onUnFocus = (newSearch?: string) => {
+    updateParams(newSearch ?? search, true);
   };
 
   return [search, updateParams, onUnFocus];
diff --git a/themes/default.ts b/themes/default.ts
index bd31b3ff..c4495a0e 100644
--- a/themes/default.ts
+++ b/themes/default.ts
@@ -160,6 +160,7 @@ export const defaultTheme = {
       // search bar
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100,
diff --git a/themes/list/blue.ts b/themes/list/blue.ts
index e10592dc..2cb43766 100644
--- a/themes/list/blue.ts
+++ b/themes/list/blue.ts
@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100
diff --git a/themes/list/gray.ts b/themes/list/gray.ts
index c0c434e8..c6c0144d 100644
--- a/themes/list/gray.ts
+++ b/themes/list/gray.ts
@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100
diff --git a/themes/list/red.ts b/themes/list/red.ts
index b42b935f..0ec319e8 100644
--- a/themes/list/red.ts
+++ b/themes/list/red.ts
@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100
diff --git a/themes/list/teal.ts b/themes/list/teal.ts
index 742f4a32..1fb66ac4 100644
--- a/themes/list/teal.ts
+++ b/themes/list/teal.ts
@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100