diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
index 100c2bb62..e3be36133 100644
--- a/components/layout/navbar/search.tsx
+++ b/components/layout/navbar/search.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { createUrl } from 'lib/utils';
@@ -8,6 +9,11 @@ import { createUrl } from 'lib/utils';
 export default function Search() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const [searchValue, setSearchValue] = useState('');
+
+  useEffect(() => {
+    setSearchValue(searchParams?.get('q') || '');
+  }, [searchParams, setSearchValue]);
 
   function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -32,7 +38,8 @@ export default function Search() {
         name="search"
         placeholder="Search for products..."
         autoComplete="off"
-        defaultValue={searchParams?.get('q') || ''}
+        value={searchValue}
+        onChange={(e) => setSearchValue(e.target.value)}
         className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-gray-800 dark:border-gray-800 dark:bg-transparent dark:text-gray-500 dark:placeholder:text-gray-500"
       />
       <div className="absolute right-0 top-0 mr-3 flex h-full items-center">