diff --git a/frontend/src/app-components/attachment/AttachmentUploader.tsx b/frontend/src/app-components/attachment/AttachmentUploader.tsx
index ef5eb377..b49dd316 100644
--- a/frontend/src/app-components/attachment/AttachmentUploader.tsx
+++ b/frontend/src/app-components/attachment/AttachmentUploader.tsx
@@ -222,7 +222,7 @@ const AttachmentUploader: FC<FileUploadProps> = ({
                     {
                       defaultValues: { accept, onChange },
                     },
-                    { maxWidth: "xl" },
+                    { maxWidth: "xl", isSingleton: true },
                   )
                 }
               >
diff --git a/frontend/src/app-components/inputs/FilterTextfield.tsx b/frontend/src/app-components/inputs/FilterTextfield.tsx
index bbd3af20..0d7cc302 100644
--- a/frontend/src/app-components/inputs/FilterTextfield.tsx
+++ b/frontend/src/app-components/inputs/FilterTextfield.tsx
@@ -14,7 +14,7 @@ import {
   InputAdornment,
   TextFieldProps,
 } from "@mui/material";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 
 import { useTranslate } from "@/hooks/useTranslate";
 
@@ -37,30 +37,49 @@ export const FilterTextfield = ({
   ...props
 }) => {
   const { t } = useTranslate();
-  const [inputValue, setInputValue] = useState(defaultValue);
+  const ref = useRef<HTMLInputElement>(null);
+  const isTyping = useRef(false);
+  const toggleTyping = useMemo(
+    () =>
+      debounce((value: boolean) => {
+        isTyping.current = value;
+      }, delay * 2),
+    [delay],
+  );
   const debouncedSearch = useMemo(
     () =>
       debounce((value: string) => {
         onSearch?.(value);
+        toggleTyping(false);
       }, delay),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [onSearch, delay],
   );
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const value = event.target.value;
 
-      setInputValue(value);
+      toggleTyping(true);
       debouncedSearch(value);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [debouncedSearch],
   );
   const handleClear = useCallback(() => {
-    setInputValue("");
     debouncedSearch("");
   }, [debouncedSearch]);
 
+  useEffect(() => {
+    // Avoid infinite loop cycle (input => URL update => default value)
+    if (defaultValue !== ref.current?.value && !isTyping.current) {
+      ref.current && (ref.current.value = defaultValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValue]);
+
   return (
     <Input
+      inputRef={ref}
       InputProps={{
         startAdornment: <Adornment Icon={SearchIcon} />,
         endAdornment: clearable && (
@@ -73,7 +92,8 @@ export const FilterTextfield = ({
       }}
       placeholder={t("placeholder.keywords")}
       {...props}
-      value={inputValue}
+      // value={inputValue}
+      defaultValue={defaultValue}
       onChange={handleChange}
     />
   );
diff --git a/frontend/src/components/categories/index.tsx b/frontend/src/components/categories/index.tsx
index 18e46f09..c9c1c748 100644
--- a/frontend/src/components/categories/index.tsx
+++ b/frontend/src/components/categories/index.tsx
@@ -43,9 +43,12 @@ export const Categories = () => {
   const { toast } = useToast();
   const dialogs = useDialogs();
   const hasPermission = useHasPermission();
-  const { onSearch, searchPayload } = useSearch<ICategory>({
-    $iLike: ["label"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<ICategory>(
+    {
+      $iLike: ["label"],
+    },
+    { syncUrl: true },
+  );
   const { dataGridProps } = useFind(
     { entity: EntityType.CATEGORY },
     {
@@ -142,7 +145,7 @@ export const Categories = () => {
             width="max-content"
           >
             <Grid item>
-              <FilterTextfield onChange={onSearch} />
+              <FilterTextfield onChange={onSearch} defaultValue={searchText} />
             </Grid>
             {hasPermission(EntityType.CATEGORY, PermissionAction.CREATE) ? (
               <Grid item>
diff --git a/frontend/src/components/content-types/index.tsx b/frontend/src/components/content-types/index.tsx
index 69fe5827..951cb00f 100644
--- a/frontend/src/components/content-types/index.tsx
+++ b/frontend/src/components/content-types/index.tsx
@@ -40,9 +40,12 @@ export const ContentTypes = () => {
   const router = useRouter();
   const dialogs = useDialogs();
   // data fetching
-  const { onSearch, searchPayload } = useSearch<IContentType>({
-    $iLike: ["name"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<IContentType>(
+    {
+      $iLike: ["name"],
+    },
+    { syncUrl: true },
+  );
   const { dataGridProps } = useFind(
     { entity: EntityType.CONTENT_TYPE },
     {
@@ -99,7 +102,7 @@ export const ContentTypes = () => {
           width="max-content"
         >
           <Grid item>
-            <FilterTextfield onChange={onSearch} />
+            <FilterTextfield onChange={onSearch} defaultValue={searchText} />
           </Grid>
           {hasPermission(EntityType.CONTENT_TYPE, PermissionAction.CREATE) ? (
             <Grid item>
diff --git a/frontend/src/components/contents/index.tsx b/frontend/src/components/contents/index.tsx
index e95d5111..e577d9de 100644
--- a/frontend/src/components/contents/index.tsx
+++ b/frontend/src/components/contents/index.tsx
@@ -57,10 +57,13 @@ export const Contents = () => {
   const queryClient = useQueryClient();
   const dialogs = useDialogs();
   // data fetching
-  const { onSearch, searchPayload } = useSearch<IContent>({
-    $eq: [{ entity: String(query.id) }],
-    $iLike: ["title"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<IContent>(
+    {
+      $eq: [{ entity: String(query.id) }],
+      $iLike: ["title"],
+    },
+    { syncUrl: true },
+  );
   const hasPermission = useHasPermission();
   const { dataGridProps } = useFind(
     { entity: EntityType.CONTENT, format: Format.FULL },
@@ -157,7 +160,7 @@ export const Contents = () => {
         >
           <Grid justifyContent="flex-end" gap={1} container alignItems="center">
             <Grid item>
-              <FilterTextfield onChange={onSearch} />
+              <FilterTextfield onChange={onSearch} defaultValue={searchText} />
             </Grid>
             {hasPermission(EntityType.CONTENT, PermissionAction.CREATE) ? (
               <ButtonGroup sx={{ marginLeft: "auto" }}>
diff --git a/frontend/src/components/context-vars/index.tsx b/frontend/src/components/context-vars/index.tsx
index c2a617b6..1095b6a8 100644
--- a/frontend/src/components/context-vars/index.tsx
+++ b/frontend/src/components/context-vars/index.tsx
@@ -43,9 +43,12 @@ export const ContextVars = () => {
   const { toast } = useToast();
   const dialogs = useDialogs();
   const hasPermission = useHasPermission();
-  const { onSearch, searchPayload } = useSearch<IContextVar>({
-    $iLike: ["label"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<IContextVar>(
+    {
+      $iLike: ["label"],
+    },
+    { syncUrl: true },
+  );
   const { dataGridProps } = useFind(
     { entity: EntityType.CONTEXT_VAR },
     {
@@ -176,7 +179,7 @@ export const ContextVars = () => {
           width="max-content"
         >
           <Grid item>
-            <FilterTextfield onChange={onSearch} />
+            <FilterTextfield onChange={onSearch} defaultValue={searchText} />
           </Grid>
           {hasPermission(EntityType.CONTEXT_VAR, PermissionAction.CREATE) ? (
             <Grid item>
diff --git a/frontend/src/components/inbox/index.tsx b/frontend/src/components/inbox/index.tsx
index 598b7461..22564d47 100644
--- a/frontend/src/components/inbox/index.tsx
+++ b/frontend/src/components/inbox/index.tsx
@@ -27,9 +27,12 @@ import { AssignedTo } from "./types";
 
 export const Inbox = () => {
   const { t } = useTranslate();
-  const { onSearch, searchPayload } = useSearch<ISubscriber>({
-    $or: ["first_name", "last_name"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<ISubscriber>(
+    {
+      $or: ["first_name", "last_name"],
+    },
+    { syncUrl: true },
+  );
   const [channels, setChannels] = useState<string[]>([]);
   const [assignment, setAssignment] = useState<AssignedTo>(AssignedTo.ALL);
 
@@ -48,13 +51,10 @@ export const Inbox = () => {
           <MainContainer style={{ height: "100%" }}>
             <Sidebar position="left">
               <Grid paddingX={1} paddingTop={2} paddingBottom={1} mx={1}>
-                <FilterTextfield onChange={onSearch} defaultValue="" />
-                {/* <Search
-                  onClearClick={() => onSearch("")}
-                  className="changeColor"
-                  onChange={(v) => onSearch(v)}
-                  placeholder="Search..."
-                /> */}
+                <FilterTextfield
+                  onChange={onSearch}
+                  defaultValue={searchText}
+                />
               </Grid>
               <Grid
                 display="flex"
diff --git a/frontend/src/components/labels/index.tsx b/frontend/src/components/labels/index.tsx
index 1661ffc7..3df00f6e 100644
--- a/frontend/src/components/labels/index.tsx
+++ b/frontend/src/components/labels/index.tsx
@@ -42,9 +42,12 @@ export const Labels = () => {
   const { toast } = useToast();
   const dialogs = useDialogs();
   const hasPermission = useHasPermission();
-  const { onSearch, searchPayload } = useSearch<ILabel>({
-    $or: ["name", "title"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<ILabel>(
+    {
+      $or: ["name", "title"],
+    },
+    { syncUrl: true },
+  );
   const { dataGridProps } = useFind(
     { entity: EntityType.LABEL, format: Format.FULL },
     {
@@ -173,7 +176,7 @@ export const Labels = () => {
           width="max-content"
         >
           <Grid item>
-            <FilterTextfield onChange={onSearch} />
+            <FilterTextfield onChange={onSearch} defaultValue={searchText} />
           </Grid>
           {hasPermission(EntityType.LABEL, PermissionAction.CREATE) ? (
             <Grid item>
diff --git a/frontend/src/components/languages/index.tsx b/frontend/src/components/languages/index.tsx
index 74b6be11..c14da822 100644
--- a/frontend/src/components/languages/index.tsx
+++ b/frontend/src/components/languages/index.tsx
@@ -43,9 +43,12 @@ export const Languages = () => {
   const dialogs = useDialogs();
   const queryClient = useQueryClient();
   const hasPermission = useHasPermission();
-  const { onSearch, searchPayload } = useSearch<ILanguage>({
-    $or: ["title", "code"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<ILanguage>(
+    {
+      $or: ["title", "code"],
+    },
+    { syncUrl: true },
+  );
   const { dataGridProps, refetch } = useFind(
     { entity: EntityType.LANGUAGE },
     {
@@ -197,7 +200,7 @@ export const Languages = () => {
           width="max-content"
         >
           <Grid item>
-            <FilterTextfield onChange={onSearch} />
+            <FilterTextfield onChange={onSearch} defaultValue={searchText} />
           </Grid>
           {hasPermission(EntityType.LANGUAGE, PermissionAction.CREATE) ? (
             <Grid item>
diff --git a/frontend/src/components/media-library/index.tsx b/frontend/src/components/media-library/index.tsx
index 15ea6854..847c7fbe 100644
--- a/frontend/src/components/media-library/index.tsx
+++ b/frontend/src/components/media-library/index.tsx
@@ -37,9 +37,13 @@ type MediaLibraryProps = {
 export const MediaLibrary = ({ onSelect, accept }: MediaLibraryProps) => {
   const { t } = useTranslate();
   const formatFileSize = useFormattedFileSize();
-  const { onSearch, searchPayload } = useSearch<IAttachment>({
-    $iLike: ["name"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<IAttachment>(
+    {
+      $iLike: ["name"],
+    },
+    // Sync URL only in the media library page (not the modal)
+    { syncUrl: !onSelect },
+  );
   const { dataGridProps } = useFind(
     { entity: EntityType.ATTACHMENT },
     {
@@ -151,7 +155,7 @@ export const MediaLibrary = ({ onSelect, accept }: MediaLibraryProps) => {
           width="max-content"
         >
           <Grid item>
-            <FilterTextfield onChange={onSearch} />
+            <FilterTextfield onChange={onSearch} defaultValue={searchText} />
           </Grid>
         </Grid>
       </PageHeader>
diff --git a/frontend/src/components/nlp/components/NlpEntity.tsx b/frontend/src/components/nlp/components/NlpEntity.tsx
index f039170f..a8e76cd1 100644
--- a/frontend/src/components/nlp/components/NlpEntity.tsx
+++ b/frontend/src/components/nlp/components/NlpEntity.tsx
@@ -80,9 +80,12 @@ const NlpEntity = () => {
     },
   });
   const [selectedNlpEntities, setSelectedNlpEntities] = useState<string[]>([]);
-  const { onSearch, searchPayload } = useSearch<INlpEntity>({
-    $or: ["name", "doc"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<INlpEntity>(
+    {
+      $or: ["name", "doc"],
+    },
+    { syncUrl: true },
+  );
   const { dataGridProps: nlpEntityGrid } = useFind(
     {
       entity: EntityType.NLP_ENTITY,
@@ -224,7 +227,7 @@ const NlpEntity = () => {
         flexShrink={0}
       >
         <Grid item>
-          <FilterTextfield onChange={onSearch} />
+          <FilterTextfield onChange={onSearch} defaultValue={searchText} />
         </Grid>
 
         {hasPermission(EntityType.NLP_ENTITY, PermissionAction.CREATE) ? (
diff --git a/frontend/src/components/nlp/components/NlpSample.tsx b/frontend/src/components/nlp/components/NlpSample.tsx
index c9f214f9..49b3eca1 100644
--- a/frontend/src/components/nlp/components/NlpSample.tsx
+++ b/frontend/src/components/nlp/components/NlpSample.tsx
@@ -86,13 +86,16 @@ export default function NlpSample() {
     EntityType.NLP_SAMPLE_ENTITY,
   );
   const getLanguageFromCache = useGetFromCache(EntityType.LANGUAGE);
-  const { onSearch, searchPayload } = useSearch<INlpSample>({
-    $eq: [
-      ...(type !== "all" ? [{ type }] : []),
-      ...(language ? [{ language }] : []),
-    ],
-    $iLike: ["text"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<INlpSample>(
+    {
+      $eq: [
+        ...(type !== "all" ? [{ type }] : []),
+        ...(language ? [{ language }] : []),
+      ],
+      $iLike: ["text"],
+    },
+    { syncUrl: true },
+  );
   const { mutate: deleteNlpSample } = useDelete(EntityType.NLP_SAMPLE, {
     onError: () => {
       toast.error(t("message.internal_server_error"));
@@ -317,6 +320,7 @@ export default function NlpSample() {
         >
           <FilterTextfield
             onChange={onSearch}
+            defaultValue={searchText}
             fullWidth={false}
             sx={{ minWidth: "256px" }}
           />
diff --git a/frontend/src/components/nlp/components/NlpValue.tsx b/frontend/src/components/nlp/components/NlpValue.tsx
index aac1c9a3..789a96a4 100644
--- a/frontend/src/components/nlp/components/NlpValue.tsx
+++ b/frontend/src/components/nlp/components/NlpValue.tsx
@@ -51,10 +51,13 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
     entity: EntityType.NLP_ENTITY,
     format: Format.FULL,
   });
-  const { onSearch, searchPayload } = useSearch<INlpValue>({
-    $eq: [{ entity: entityId }],
-    $or: ["doc", "value"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<INlpValue>(
+    {
+      $eq: [{ entity: entityId }],
+      $or: ["doc", "value"],
+    },
+    { syncUrl: true },
+  );
   const { dataGridProps } = useFind(
     { entity: EntityType.NLP_VALUE, format: Format.FULL },
     {
@@ -228,7 +231,10 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
                 sx={{ width: "max-content", gap: 1 }}
               >
                 <Grid item>
-                  <FilterTextfield onChange={onSearch} />
+                  <FilterTextfield
+                    onChange={onSearch}
+                    defaultValue={searchText}
+                  />
                 </Grid>
                 <ButtonGroup sx={{ marginLeft: "auto" }}>
                   {hasPermission(
diff --git a/frontend/src/components/roles/index.tsx b/frontend/src/components/roles/index.tsx
index 2d2928c1..d4c4f568 100644
--- a/frontend/src/components/roles/index.tsx
+++ b/frontend/src/components/roles/index.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
@@ -40,9 +40,12 @@ export const Roles = () => {
   const { toast } = useToast();
   const dialogs = useDialogs();
   const hasPermission = useHasPermission();
-  const { onSearch, searchPayload } = useSearch<IRole>({
-    $iLike: ["name"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<IRole>(
+    {
+      $iLike: ["name"],
+    },
+    { syncUrl: true },
+  );
   const { dataGridProps } = useFind(
     { entity: EntityType.ROLE },
     {
@@ -140,7 +143,7 @@ export const Roles = () => {
           width="max-content"
         >
           <Grid item>
-            <FilterTextfield onChange={onSearch} />
+            <FilterTextfield onChange={onSearch} defaultValue={searchText} />
           </Grid>
           {hasPermission(EntityType.ROLE, PermissionAction.CREATE) ? (
             <Grid item>
diff --git a/frontend/src/components/subscribers/index.tsx b/frontend/src/components/subscribers/index.tsx
index 23cf33d2..3c03078c 100644
--- a/frontend/src/components/subscribers/index.tsx
+++ b/frontend/src/components/subscribers/index.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
@@ -43,10 +43,13 @@ export const Subscribers = () => {
     { hasCount: false },
   );
   const [labelFilter, setLabelFilter] = useState<string>("");
-  const { onSearch, searchPayload } = useSearch<ISubscriber>({
-    $eq: labelFilter ? [{ labels: [labelFilter] }] : [],
-    $or: ["first_name", "last_name"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<ISubscriber>(
+    {
+      $eq: labelFilter ? [{ labels: [labelFilter] }] : [],
+      $or: ["first_name", "last_name"],
+    },
+    { syncUrl: true },
+  );
   const { dataGridProps } = useFind(
     { entity: EntityType.SUBSCRIBER, format: Format.FULL },
     { params: searchPayload },
@@ -172,7 +175,11 @@ export const Subscribers = () => {
           flexWrap="nowrap"
           width="50%"
         >
-          <FilterTextfield onChange={onSearch} fullWidth={true} />
+          <FilterTextfield
+            onChange={onSearch}
+            fullWidth={true}
+            defaultValue={searchText}
+          />
           <Input
             select
             label={t("label.labels")}
diff --git a/frontend/src/components/translations/index.tsx b/frontend/src/components/translations/index.tsx
index f2a47053..6eed9f2e 100644
--- a/frontend/src/components/translations/index.tsx
+++ b/frontend/src/components/translations/index.tsx
@@ -44,9 +44,12 @@ export const Translations = () => {
       hasCount: false,
     },
   );
-  const { onSearch, searchPayload } = useSearch<ITranslation>({
-    $iLike: ["str"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<ITranslation>(
+    {
+      $iLike: ["str"],
+    },
+    { syncUrl: true },
+  );
   const { dataGridProps, refetch: refreshTranslations } = useFind(
     { entity: EntityType.TRANSLATION },
     {
@@ -152,7 +155,7 @@ export const Translations = () => {
           width="max-content"
         >
           <Grid item>
-            <FilterTextfield onChange={onSearch} />
+            <FilterTextfield onChange={onSearch} defaultValue={searchText} />
           </Grid>
           <Grid item>
             <Button
diff --git a/frontend/src/components/users/index.tsx b/frontend/src/components/users/index.tsx
index fb57261f..ae1fce9c 100644
--- a/frontend/src/components/users/index.tsx
+++ b/frontend/src/components/users/index.tsx
@@ -53,9 +53,12 @@ export const Users = () => {
     },
   });
   const hasPermission = useHasPermission();
-  const { onSearch, searchPayload } = useSearch<IUser>({
-    $or: ["first_name", "last_name", "email"],
-  });
+  const { onSearch, searchPayload, searchText } = useSearch<IUser>(
+    {
+      $or: ["first_name", "last_name", "email"],
+    },
+    { syncUrl: true },
+  );
   const { data: roles } = useFind(
     {
       entity: EntityType.ROLE,
@@ -102,7 +105,7 @@ export const Users = () => {
       headerName: t("label.name"),
       sortable: false,
       disableColumnMenu: true,
-      valueGetter: (params, val) => `${val.first_name} ${val.last_name}`,
+      valueGetter: (_params, val) => `${val.first_name} ${val.last_name}`,
       headerAlign: "left",
       renderHeader,
     },
@@ -198,7 +201,7 @@ export const Users = () => {
           width="max-content"
         >
           <Grid item>
-            <FilterTextfield onChange={onSearch} />
+            <FilterTextfield onChange={onSearch} defaultValue={searchText} />
           </Grid>
           {!ssoEnabled &&
           hasPermission(EntityType.USER, PermissionAction.CREATE) ? (
diff --git a/frontend/src/hooks/useSearch.tsx b/frontend/src/hooks/useSearch.tsx
index e5cc0ad4..90d2ef88 100644
--- a/frontend/src/hooks/useSearch.tsx
+++ b/frontend/src/hooks/useSearch.tsx
@@ -14,6 +14,8 @@ import {
   TParamItem,
 } from "@/types/search.types";
 
+import { useUrlQueryParam } from "./useUrlQueryParam";
+
 const buildOrParams = <T,>({ params, searchText }: TBuildParamProps<T>) => ({
   or: params?.map((field) => ({
     [field]: { contains: searchText },
@@ -50,20 +52,38 @@ const buildNeqInitialParams = <T,>({
     {},
   );
 
-export const useSearch = <T,>(params: TParamItem<T>) => {
-  const [searchText, setSearchText] = useState<string>("");
+interface SearchHookOptions {
+  syncUrl?: boolean;
+}
+
+export const useSearch = <T,>(
+  params: TParamItem<T>,
+  options: SearchHookOptions = { syncUrl: false },
+) => {
+  const { syncUrl } = options;
+  const [searchQuery, setSearchQuery] = useUrlQueryParam("search", "");
+  const [search, setSearch] = useState<string>("");
   const {
     $eq: eqInitialParams,
     $iLike: iLikeParams,
     $neq: neqInitialParams,
     $or: orParams,
   } = params;
+  const searchText = syncUrl ? searchQuery : search;
 
   return {
+    searchText,
     onSearch: (
       e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string,
     ) => {
-      setSearchText(typeof e === "string" ? e : e.target.value);
+      const newValue =
+        typeof e === "object" ? e.target.value.toString() : e.toString();
+
+      if (syncUrl) {
+        setSearchQuery(newValue);
+      } else {
+        setSearch(newValue);
+      }
     },
     searchPayload: {
       where: {
diff --git a/frontend/src/hooks/useUrlQueryParam.ts b/frontend/src/hooks/useUrlQueryParam.ts
index 770d7f8c..20b51af6 100644
--- a/frontend/src/hooks/useUrlQueryParam.ts
+++ b/frontend/src/hooks/useUrlQueryParam.ts
@@ -9,9 +9,48 @@
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
 
+type QueryParamSerializer<T> = {
+  parse: (raw: string | string[] | undefined) => T;
+  stringify: (val: T) => string | string[] | undefined;
+};
+
+export function defaultSerializer<T = string>(): QueryParamSerializer<T> {
+  return {
+    parse: (raw) => {
+      if (Array.isArray(raw)) return raw[0] as unknown as T;
+      if (typeof raw === "undefined") return "" as unknown as T;
+
+      return raw as unknown as T;
+    },
+    stringify: (val) => val as unknown as string,
+  };
+}
+
+export function booleanSerializer(): QueryParamSerializer<boolean> {
+  return {
+    parse: (raw) => raw === "true",
+    stringify: (val) => (val ? "true" : "false"),
+  };
+}
+
+export function numberSerializer(): QueryParamSerializer<number> {
+  return {
+    parse: (raw) => Number(Array.isArray(raw) ? raw[0] : raw),
+    stringify: (val) => val.toString(),
+  };
+}
+
+export function arraySerializer(): QueryParamSerializer<string[]> {
+  return {
+    parse: (raw) => (Array.isArray(raw) ? raw : raw ? [raw] : []),
+    stringify: (val) => val,
+  };
+}
+
 export const useUrlQueryParam = <T>(
-  key: string, 
-  defaultValue: T
+  key: string,
+  defaultValue: T,
+  serializer: QueryParamSerializer<T> = defaultSerializer(),
 ): [T, (val: T) => void] => {
   const router = useRouter();
   const [value, setValue] = useState<T>(() => {
@@ -21,7 +60,7 @@ export const useUrlQueryParam = <T>(
     if (initial === undefined) return defaultValue;
     // parse value if needed (e.g., numbers)
     try {
-      return JSON.parse(initial as string) as T;
+      return serializer.parse(initial as string) as T;
     } catch {
       return initial as unknown as T;
     }
@@ -35,7 +74,7 @@ export const useUrlQueryParam = <T>(
 
     if (urlValue !== undefined) {
       try {
-        parsedVal = JSON.parse(urlValue as string);
+        parsedVal = serializer.parse(urlValue as string);
       } catch {
         parsedVal = urlValue as unknown as T;
       }
@@ -49,19 +88,24 @@ export const useUrlQueryParam = <T>(
   }, [router.isReady, router.query[key]]);
 
   // Update URL when state changes
-  const updateValue = useCallback((val: T) => {
-    debugger
-    setValue(val);
-    if (!router.isReady) return;
-    const newQuery = { ...router.query };
+  const updateValue = useCallback(
+    (val: T) => {
+      setValue(val);
+      if (!router.isReady) return;
+      const newQuery = { ...router.query };
 
-    if (val === defaultValue || val === undefined || val === '') {
-      delete newQuery[key];
-    } else {
-      newQuery[key] = typeof val === 'string' ? val : JSON.stringify(val);
-    }
-    router.push({ pathname: router.pathname, query: newQuery }, undefined, { shallow: true });
-  }, [router, key, defaultValue]);
+      if (val === defaultValue || val === undefined || val === "") {
+        delete newQuery[key];
+      } else {
+        newQuery[key] = serializer.stringify(val);
+      }
+      router.push({ pathname: router.pathname, query: newQuery }, undefined, {
+        shallow: true,
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [router, key, defaultValue],
+  );
 
   return [value, updateValue];
-}
\ No newline at end of file
+};
\ No newline at end of file