diff --git a/lib/decentralised_book_index_web/components/my_components/book_search.ex b/lib/decentralised_book_index_web/components/my_components/book_search.ex
index 2657083..bbfe7f7 100644
--- a/lib/decentralised_book_index_web/components/my_components/book_search.ex
+++ b/lib/decentralised_book_index_web/components/my_components/book_search.ex
@@ -17,7 +17,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
     <div class="bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
       <div class="flex items-center justify-center p-4 flex-row space-y-0 space-x-4">
         <div class="w-full grow">
-          <form class="flex items-center" phx-submit="search">
+          <form class="flex items-center" phx-change="search" phx-submit="search">
             <label for="simple-search" class="sr-only">Search</label>
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
@@ -25,7 +25,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
                   <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                 </svg>
               </div>
-              <input name="query" type="text" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Search" value={@search_query}>
+              <input name="query" type="text" phx-debounce="300" autocomplete="off" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Search" value={@search_query}>
             </div>
           </form>
         </div>
diff --git a/lib/decentralised_book_index_web/components/my_components/just_search_resources.ex b/lib/decentralised_book_index_web/components/my_components/just_search_resources.ex
index 55d46c5..48cdc4c 100644
--- a/lib/decentralised_book_index_web/components/my_components/just_search_resources.ex
+++ b/lib/decentralised_book_index_web/components/my_components/just_search_resources.ex
@@ -14,7 +14,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.JustSearchResources
     <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
       <div class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
         <div class="w-full grow">
-          <form class="flex items-center" phx-submit="search">
+          <form class="flex items-center" phx-change="search" phx-submit="search">
             <label for="simple-search" class="sr-only">Search</label>
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
@@ -22,7 +22,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.JustSearchResources
                   <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                 </svg>
               </div>
-              <input name="query" type="text" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder={@search_placeholder} value={@search_query}>
+              <input name="query" type="text" phx-debounce="300" autocomplete="off" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder={@search_placeholder} value={@search_query}>
             </div>
           </form>
         </div>
diff --git a/lib/decentralised_book_index_web/components/my_components/search_resources.ex b/lib/decentralised_book_index_web/components/my_components/search_resources.ex
index 0bd543f..d739970 100644
--- a/lib/decentralised_book_index_web/components/my_components/search_resources.ex
+++ b/lib/decentralised_book_index_web/components/my_components/search_resources.ex
@@ -20,7 +20,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SearchResources do
     <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
       <div class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
         <div class="w-full grow">
-          <form class="flex items-center" phx-submit="search">
+          <form class="flex items-center" phx-change="search" phx-submit="search">
             <label for="simple-search" class="sr-only">Search</label>
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
@@ -28,7 +28,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SearchResources do
                   <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                 </svg>
               </div>
-              <input name="query" type="text" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder={@search_placeholder} value={@search_query}>
+              <input name="query" type="text" phx-debounce="300" autocomplete="off" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder={@search_placeholder} value={@search_query}>
             </div>
           </form>
         </div>