diff --git a/apps/web/src/components/search/index.js b/apps/web/src/components/search/index.js
index a50f061ac..c43360bc7 100644
--- a/apps/web/src/components/search/index.js
+++ b/apps/web/src/components/search/index.js
@@ -20,8 +20,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import * as Icon from "../icons";
 import "./search.css";
 import Field from "../field";
-
-function SearchBox(props) {
+import { debounce } from "../../utils/debounce";
+function SearchBox({ onSearch }) {
   return (
     <Field
       data-test-id="search-input"
@@ -29,18 +29,16 @@ function SearchBox(props) {
       id="search"
       name="search"
       type="text"
-      sx={{m: 0,mx: 1,mt: 1}}
+      sx={{ m: 0, mx: 1, mt: 1 }}
       placeholder="Type your query here"
-      onKeyDown={(e) => {
-        if (e.key === "Enter") props.onSearch(e.target.value);
-      }}
+      onChange={debounce((e) => onSearch(e.target.value), 250)}
       action={{
         icon: Icon.Search,
         testId: "search-button",
         onClick: () => {
           const searchField = document.getElementById("search");
           if (searchField && searchField.value && searchField.value.length) {
-            props.onSearch(searchField.value);
+            onSearch(searchField.value);
           }
         }
       }}