diff --git a/app/api/search/route.ts b/app/api/search/route.ts
index 61eeacd..cba8644 100644
--- a/app/api/search/route.ts
+++ b/app/api/search/route.ts
@@ -5,7 +5,7 @@ import { ENDPOINTS } from "../config";
 
 export async function GET(request: NextRequest) {
   const page = parseInt(request.nextUrl.searchParams.get("page")) || 0;
-  const query = request.nextUrl.searchParams.get("q") || null;
+  const query = decodeURI(request.nextUrl.searchParams.get("q")) || null;
   const token = request.nextUrl.searchParams.get("token") || null;
 
   const where = request.nextUrl.searchParams.get("where") || "releases"
diff --git a/app/pages/Search.tsx b/app/pages/Search.tsx
index 95d9182..475fc95 100644
--- a/app/pages/Search.tsx
+++ b/app/pages/Search.tsx
@@ -28,6 +28,7 @@ export function SearchPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [query, setQuery] = useState(searchParams.get("q") || null);
+  const [searchVal, setSearchVal] = useState(searchParams.get("q") || "")
   const where = searchParams.get("where") || null;
   const searchBy = searchParams.get("searchBy") || null;
   const list = searchParams.get("list") || null;
@@ -88,7 +89,22 @@ export function SearchPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scrollPosition]);
 
-  if (error) return <div>failed to load</div>;
+  function _executeSearch(query) {
+    const Params = new URLSearchParams(window.location.search);
+    Params.set("q", query);
+    const url = new URL(`/search?${Params.toString()}`, window.location.origin);
+    setContent(null);
+    setQuery(searchVal.trim());
+    router.push(url.toString());
+  }
+
+  useEffect(() => {
+    if (searchVal.length % 4 == 1) {
+      _executeSearch(searchVal)
+    }
+  }, [searchVal]);
+
+  if (error) return <div>failed to load: {error.message}</div>;
 
   return (
     <>
@@ -97,9 +113,7 @@ export function SearchPage() {
           className="max-w-full mx-auto"
           onSubmit={(e) => {
             e.preventDefault();
-            setContent(null);
-            setQuery(e.target[0].value.trim());
-            router.push(`/search?q=${e.target[0].value.trim()}`);
+            _executeSearch(searchVal)
           }}
         >
           <label
@@ -132,6 +146,8 @@ export function SearchPage() {
               className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               placeholder="Поиск аниме..."
               required
+              value={searchVal}
+              onChange={(e) => setSearchVal(e.target.value)}
               defaultValue={query || ""}
             />
             <button