diff --git a/package.json b/package.json
index 7cf5876..763ca95 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "platine-management",
   "private": true,
-  "version": "1.0.18",
+  "version": "1.0.19",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/hooks/useFetchQuery.ts b/src/hooks/useFetchQuery.ts
index 148d7f3..1240762 100644
--- a/src/hooks/useFetchQuery.ts
+++ b/src/hooks/useFetchQuery.ts
@@ -80,6 +80,7 @@ export function useInfiniteFetchQuery<Path extends APIPaths, Options extends API
   return {
     ...result,
     results,
+    count: result?.data?.pages[0]?.totalElements,
   };
 }
 
diff --git a/src/hooks/useSearchFilter.ts b/src/hooks/useSearchFilter.ts
index 74be016..4d75312 100644
--- a/src/hooks/useSearchFilter.ts
+++ b/src/hooks/useSearchFilter.ts
@@ -1,7 +1,8 @@
+import { FormEventHandler, useState } from "react";
 import { create } from "zustand";
 import { combine } from "zustand/middleware";
 
-const base = {
+export const base = {
   contacts: {
     identifier: "",
     name: "",
@@ -15,9 +16,9 @@ const base = {
     identificationName: "",
   },
   surveys: {
-    idSource: undefined as undefined | string,
+    idSource: "",
     year: undefined as undefined | number,
-    periodicity: undefined as undefined | string,
+    periodicity: "",
   },
 };
 
@@ -34,6 +35,66 @@ export function useSetSearchFilter() {
   return useSearchFilter(v => v.setFilter);
 }
 
+export function useGetSearchFilter() {
+  return useSearchFilter(v => v);
+}
+
 export function useSearchFilterParams<K extends Key>(name: K): State[K] {
   return useSearchFilter(v => v[name]);
 }
+
+/* 
+  Hook to manage filter states more efficiently 
+
+  example: 
+    const { onSubmit, onReset, inputProps } = useSearchForm("contacts", {
+      identifier: "",
+      name: "",
+      email: "",
+      city: "",
+      function: "",
+    });
+
+    <form onSubmit={onSubmit} onReset={onReset}>
+      <TextField
+        label="Identifiant du contact"
+        {...inputProps("identifier")}
+      />
+      <TextField 
+        label="Nom/prénom" 
+        {...inputProps("name")} 
+      />
+      ...
+    </form>
+*/
+
+export function useSearchForm<K extends Key>(key: K, initialValue: State[K]) {
+  const [value, setValue] = useState(initialValue);
+  const setFilter = useSetSearchFilter();
+
+  const onSubmit: FormEventHandler = e => {
+    e.preventDefault();
+    setFilter(key, value);
+  };
+
+  const onReset: FormEventHandler = e => {
+    e.preventDefault();
+    setFilter(key, base[key]);
+    setValue(base[key]);
+  };
+
+  return {
+    value,
+    onSubmit,
+    onReset,
+    inputProps: (name: keyof State[K]) => ({
+      id: name,
+      name: name,
+      value: value[name],
+      onChange: (e: any) => setValue({ ...value, [name]: e.target.value }),
+    }),
+    handler: (name: keyof State[K]) => {
+      return (e: any) => setValue({ ...value, [name]: e.target.value });
+    },
+  };
+}
diff --git a/src/pages/ContactPage.tsx b/src/pages/ContactPage.tsx
index c1683d2..2894c8b 100644
--- a/src/pages/ContactPage.tsx
+++ b/src/pages/ContactPage.tsx
@@ -21,7 +21,7 @@ enum Tab {
 
 const TabNames = {
   [Tab.Infos]: "Infos contact",
-  [Tab.Surveys]: "Interrogation(s)",
+  [Tab.Surveys]: "Questionnaire(s)",
   [Tab.Ids]: "Gestion des identifiants",
   [Tab.Permissions]: "Gestion des droits",
 };
diff --git a/src/pages/Search/SearchContacts.tsx b/src/pages/Search/SearchContacts.tsx
index 30216e6..e7d92ba 100644
--- a/src/pages/Search/SearchContacts.tsx
+++ b/src/pages/Search/SearchContacts.tsx
@@ -29,13 +29,15 @@ export const SearchContacts = () => {
     hasNextPage,
     fetchNextPage,
     isLoading,
+    count,
   } = useInfiniteFetchQuery(endpoint, {
     query: { ...useSearchFilterParams("contacts"), pageSize: 20, sort: "identifier" },
   });
   const [tab, setTab] = useState("me");
+
   return (
     <Stack spacing={3} sx={{ minHeight: 0 }}>
-      <Row>
+      <Row justifyContent={"space-between"}>
         <ToggleButtonGroup value={tab} exclusive onChange={(_, v) => setTab(v)}>
           <ToggleButton value="me" aria-label="left aligned">
             Mes contacts
@@ -44,6 +46,7 @@ export const SearchContacts = () => {
             Tout
           </ToggleButton>
         </ToggleButtonGroup>
+        {count && <Typography variant="titleSmall">résultat: {count} contact(s)</Typography>}
       </Row>
       {isLoading && (
         <Row justifyContent={"space-around"} height={"100%"}>
diff --git a/src/pages/Search/SearchSurveyUnits.tsx b/src/pages/Search/SearchSurveyUnits.tsx
index c3c7db8..9c0f42f 100644
--- a/src/pages/Search/SearchSurveyUnits.tsx
+++ b/src/pages/Search/SearchSurveyUnits.tsx
@@ -1,5 +1,4 @@
 import { Box, CardActionArea, CircularProgress, Stack } from "@mui/material";
-import { FilterListBySelector } from "../../ui/Search/FilterListBySelector.tsx";
 import { Row } from "../../ui/Row";
 import { useInfiniteFetchQuery } from "../../hooks/useFetchQuery.ts";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
@@ -24,6 +23,7 @@ export const SearchSurveyUnits = () => {
     hasNextPage,
     fetchNextPage,
     isLoading,
+    count,
   } = useInfiniteFetchQuery(endpoint, {
     query: useSearchFilterParams("surveyUnits"),
   });
@@ -40,7 +40,7 @@ export const SearchSurveyUnits = () => {
             Tout
           </ToggleButton>
         </ToggleButtonGroup>
-        <FilterListBySelector />
+        {count && <Typography variant="titleSmall">résultat: {count} unité(s) enquêtée(s)</Typography>}
       </Row>
       {isLoading && (
         <Row justifyContent={"space-around"} height={"100%"}>
diff --git a/src/theme.tsx b/src/theme.tsx
index 0050851..fd5e429 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -104,6 +104,7 @@ declare module "@mui/material/SvgIcon" {
     headerSinglePage: true;
     cardTitle: true;
     smallIcon: true;
+    linkIcon: true;
   }
   interface SvgIconPropsColorOverrides {
     yellow: true;
@@ -305,6 +306,12 @@ export const theme = createTheme({
             fontSize: 20,
           },
         },
+        {
+          props: { fontSize: "linkIcon" },
+          style: {
+            fontSize: 14,
+          },
+        },
       ],
     },
     MuiTab: {
@@ -405,6 +412,7 @@ export const theme = createTheme({
       styleOverrides: {
         root: {
           background: "#FFF",
+          color: palette.text.secondary,
         },
         sizeSmall: {
           ...typography.bodyMedium,
diff --git a/src/ui/AddressInformations.tsx b/src/ui/AddressInformations.tsx
index 9075dda..272f411 100644
--- a/src/ui/AddressInformations.tsx
+++ b/src/ui/AddressInformations.tsx
@@ -14,25 +14,22 @@ export const AddressInformations = ({ identificationName, address }: Props) => {
   const isCodeBoxDisplayed =
     address?.zipCode || address?.cityName || address?.cedexCode || address?.cedexName;
 
-  const isSupplementDisplayed = address?.addressSupplement || address?.specialDistribution;
   return (
     <Stack spacing={1} typography={"bodyMedium"}>
       {identificationName && (
         <Typography variant="titleSmall">{identificationName.toUpperCase()}</Typography>
       )}
+      {address?.addressSupplement && <Box component={"span"}>{address?.addressSupplement}</Box>}
       {isStreetBoxDisplayed && (
         <Box component={"span"}>
           {address?.streetNumber} {address?.repetitionIndex} {address?.streetType} {address?.streetName}
         </Box>
       )}
-      {isSupplementDisplayed && (
-        <Box component={"span"}>
-          {address?.addressSupplement} {address?.specialDistribution}
-        </Box>
-      )}
+      {address?.specialDistribution && <Box component={"span"}>{address?.specialDistribution}</Box>}
       {isCodeBoxDisplayed && (
         <Box component={"span"}>
-          {address?.zipCode} {address?.cityName} {address?.cedexCode} {address?.cedexName}
+          {address?.zipCode} {address?.cityName?.toLocaleUpperCase()} {address?.cedexCode}
+          {address?.cedexName?.toLocaleUpperCase()}
         </Box>
       )}
       <Box component={"span"}>{address?.countryName}</Box>
diff --git a/src/ui/Contact/AddRightsForm.tsx b/src/ui/Contact/AddRightsForm.tsx
index 23d31a7..de051c1 100644
--- a/src/ui/Contact/AddRightsForm.tsx
+++ b/src/ui/Contact/AddRightsForm.tsx
@@ -83,18 +83,21 @@ export const AddRightsForm = ({ contact }: Props) => {
 
             <SelectWithOptions
               options={[]}
+              value={fieldsData.idSource}
               label={"Source"}
               name={"idSource"}
               onChange={e => setFieldsData({ ...fieldsData, idSource: e.target.value })}
             />
             <SelectWithOptions
               options={[]}
+              value={fieldsData.year}
               label={"Millésime"}
               name={"year"}
               onChange={e => setFieldsData({ ...fieldsData, year: e.target.value })}
             />
             <SelectWithOptions
               options={[]}
+              value={fieldsData.periodicity}
               label={"Période"}
               name={"periodicity"}
               onChange={e => setFieldsData({ ...fieldsData, periodicity: e.target.value })}
diff --git a/src/ui/Contact/CollectStateHistory.tsx b/src/ui/Contact/CollectStateHistory.tsx
index df99789..b5063b2 100644
--- a/src/ui/Contact/CollectStateHistory.tsx
+++ b/src/ui/Contact/CollectStateHistory.tsx
@@ -1,4 +1,4 @@
-import { Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
+import { IconButton, Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
@@ -6,8 +6,10 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import TableContainer from "@mui/material/TableContainer";
 import { CollectStateSelect, collectStates } from "./CollectStateSelect";
-import { useFetchQuery } from "../../hooks/useFetchQuery";
+import { useFetchMutation, useFetchQuery } from "../../hooks/useFetchQuery";
 import { Row } from "../Row";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import { useState } from "react";
 
 type Props = {
   onClose: () => void;
@@ -18,23 +20,46 @@ type Props = {
 };
 
 export const CollectStateHistory = ({ onClose, open, questioningId, surveyName, onSelect }: Props) => {
-  const { data: states } = useFetchQuery("/api/questionings/{id}/questioning-events", {
+  const [dialog, setDialog] = useState<number>();
+
+  const { data: states, refetch } = useFetchQuery("/api/questionings/{id}/questioning-events", {
     urlParams: {
       id: parseInt(questioningId),
     },
   });
 
+  const { mutateAsync, isPending } = useFetchMutation(
+    "/api/questionings/questioning-events/{id}",
+    "delete",
+  );
+
   if (!states) {
     return;
   }
 
+  const onValidate = async (value: string) => {
+    await onSelect(value);
+    refetch();
+  };
+
+  const onDelete = async (id?: number) => {
+    if (!id) {
+      return;
+    }
+    await mutateAsync({
+      urlParams: { id },
+    });
+    setDialog(undefined);
+    refetch();
+  };
+
   const sortedStates = states.sort((a, b) => b.eventDate!.localeCompare(a.eventDate!));
 
   return (
     <Dialog onClose={onClose} open={open}>
       <DialogTitle>
         <Row justifyContent={"space-between"}>
-          Historique {surveyName} <CollectStateSelect onSelect={onSelect} />
+          Historique {surveyName} <CollectStateSelect onValidate={onValidate} />
         </Row>
       </DialogTitle>
       <DialogContent
@@ -50,6 +75,7 @@ export const CollectStateHistory = ({ onClose, open, questioningId, surveyName,
                 <TableCell sx={{ typography: "titleSmall" }}>Date</TableCell>
                 <TableCell sx={{ typography: "titleSmall" }}>Heure</TableCell>
                 <TableCell sx={{ typography: "titleSmall" }}>Statut</TableCell>
+                <TableCell sx={{ typography: "titleSmall" }}>Supprimer</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -63,6 +89,24 @@ export const CollectStateHistory = ({ onClose, open, questioningId, surveyName,
                     <TableCell>{date}</TableCell>
                     <TableCell>{hour}</TableCell>
                     <TableCell>{collectStates.find(cs => cs.value === state.type)?.label}</TableCell>
+                    {state.type && ["VALPAP", "HC", "REFUSAL", "WASTE"].includes(state.type) && (
+                      <TableCell align="center">
+                        <IconButton
+                          aria-label="supprimer"
+                          color="inherit"
+                          onClick={() => setDialog(state.id)}
+                          disabled={isPending}
+                        >
+                          <DeleteOutlineIcon />
+                        </IconButton>
+                        <DeleteDialog
+                          onClose={() => setDialog(undefined)}
+                          onDelete={() => onDelete(state.id)}
+                          open={dialog === state.id}
+                          state={state.type}
+                        />
+                      </TableCell>
+                    )}
                   </TableRow>
                 );
               })}
@@ -78,3 +122,34 @@ export const CollectStateHistory = ({ onClose, open, questioningId, surveyName,
     </Dialog>
   );
 };
+
+type DeleteDialogProps = {
+  onClose: () => void;
+  onDelete: () => void;
+  open: boolean;
+  state: string;
+};
+
+const DeleteDialog = ({ onClose, open, state, onDelete }: DeleteDialogProps) => {
+  return (
+    <Dialog onClose={onClose} open={open}>
+      <DialogContent
+        sx={{
+          width: "350px",
+          height: "fit-content",
+          py: 4,
+        }}
+      >
+        Êtes-vous sûr de vouloir supprimer l'état "{collectStates.find(s => s.value === state)?.label}" ?
+      </DialogContent>
+      <DialogActions>
+        <Button variant="outlined" onClick={onClose}>
+          Annuler
+        </Button>
+        <Button variant="contained" onClick={onDelete}>
+          Valider
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
diff --git a/src/ui/Contact/CollectStateSelect.tsx b/src/ui/Contact/CollectStateSelect.tsx
index cf88efe..011b7cb 100644
--- a/src/ui/Contact/CollectStateSelect.tsx
+++ b/src/ui/Contact/CollectStateSelect.tsx
@@ -1,7 +1,8 @@
 import MenuItem from "@mui/material/MenuItem";
 import Box from "@mui/material/Box";
-import { Button, Menu } from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, Menu } from "@mui/material";
 import { useState } from "react";
+import { useToggle } from "react-use";
 
 export const collectStates = [
   { label: "Questionnaire papier réceptionné", value: "VALPAP" },
@@ -20,13 +21,16 @@ const options = collectStates.filter(state =>
 );
 
 type Props = {
-  onSelect: (value: string) => void;
+  onValidate: (value: string) => void;
 };
 
-export const CollectStateSelect = ({ onSelect }: Props) => {
+export const CollectStateSelect = ({ onValidate }: Props) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [selectedState, setSelectedState] = useState("");
   const open = Boolean(anchorEl);
 
+  const [openDialog, toggleDialog] = useToggle(false);
+
   const onClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -36,7 +40,14 @@ export const CollectStateSelect = ({ onSelect }: Props) => {
 
   const handleSelect = (value: string) => {
     setAnchorEl(null);
-    onSelect(value);
+    setSelectedState(value);
+    toggleDialog();
+  };
+
+  const handleValidate = () => {
+    toggleDialog();
+    onValidate(selectedState);
+    setSelectedState("");
   };
 
   return (
@@ -65,6 +76,45 @@ export const CollectStateSelect = ({ onSelect }: Props) => {
           </MenuItem>
         ))}
       </Menu>
+      {selectedState !== "" && (
+        <ValidationDialog
+          open={openDialog}
+          onClose={toggleDialog}
+          state={selectedState}
+          onValidate={handleValidate}
+        />
+      )}
     </Box>
   );
 };
+
+type ValidationDialogProps = {
+  onClose: () => void;
+  onValidate: () => void;
+  open: boolean;
+  state: string;
+};
+
+const ValidationDialog = ({ onClose, open, state, onValidate }: ValidationDialogProps) => {
+  return (
+    <Dialog onClose={onClose} open={open}>
+      <DialogContent
+        sx={{
+          width: "350px",
+          height: "fit-content",
+          py: 4,
+        }}
+      >
+        Êtes-vous sûr de vouloir ajouter l'état "{collectStates.find(s => s.value === state)?.label}" ?
+      </DialogContent>
+      <DialogActions>
+        <Button variant="outlined" onClick={onClose}>
+          Annuler
+        </Button>
+        <Button variant="contained" onClick={onValidate}>
+          Valider
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
diff --git a/src/ui/Contact/ContactFormDialog.tsx b/src/ui/Contact/ContactFormDialog.tsx
index d34ba66..d5de938 100644
--- a/src/ui/Contact/ContactFormDialog.tsx
+++ b/src/ui/Contact/ContactFormDialog.tsx
@@ -23,12 +23,12 @@ export const addressSchema = z
       .string()
       .nullable()
       .transform(val => (val === null ? "" : val))
-      .optional(), //TODO: use real repetition index
+      .optional(),
     streetType: z
       .string()
       .nullable()
       .transform(val => (val === null ? "" : val))
-      .optional(), // TODO: use real street type
+      .optional(),
     streetName: z.string().optional(),
     addressSupplement: z
       .string()
@@ -40,17 +40,80 @@ export const addressSchema = z
       .nullable()
       .transform(val => (val === null ? "" : val))
       .optional(),
-    cityName: z.string().optional(),
-    zipCode: z.string().optional(),
-    deliveryOffice: z.string().optional(), // TODO: add in api
+    cedexName: z
+      .string()
+      .nullable()
+      .transform(val => (val === null ? "" : val)),
     cedexCode: z
       .string()
       .nullable()
-      .transform(val => (val === null ? "" : val))
-      .optional(),
+      .transform(val => (val === null ? "" : val)),
+    cityName: z
+      .string()
+      .nullable()
+      .transform(val => (val === null ? "" : val)),
+    zipCode: z
+      .string()
+      .nullable()
+      .transform(val => (val === null ? "" : val)),
     countryName: z.string().optional().or(z.literal("")),
   })
-  .optional();
+  .superRefine(({ cedexCode, zipCode, cityName, cedexName }, refinementContext) => {
+    if ((cedexCode === undefined || cedexCode === "") && (zipCode === undefined || zipCode === "")) {
+      refinementContext.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Code cedex ou code postal requis",
+        path: ["zipCode"],
+      });
+      return refinementContext.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Code cedex ou code postal requis",
+        path: ["cedexCode"],
+      });
+    }
+
+    if (cedexCode && cedexCode !== "" && zipCode && zipCode !== "") {
+      refinementContext.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Impossible de remplir code postal et code cedex",
+        path: ["zipCode"],
+      });
+      return refinementContext.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Impossible de remplir code postal et code cedex",
+        path: ["cedexCode"],
+      });
+    }
+
+    if (cedexName && cedexName !== "" && cityName && cityName !== "") {
+      refinementContext.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Impossible de remplir commune et bureau distributeur",
+        path: ["cityName"],
+      });
+      return refinementContext.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Impossible de remplir commune et bureau distributeur",
+        path: ["cedexName"],
+      });
+    }
+
+    if (cedexCode !== undefined && cedexCode !== "" && (cedexName === undefined || cedexName === "")) {
+      return refinementContext.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Champs requis",
+        path: ["cedexName"],
+      });
+    }
+
+    if (zipCode !== undefined && zipCode !== "" && (cityName === undefined || cityName === "")) {
+      return refinementContext.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Champs requis",
+        path: ["cityName"],
+      });
+    }
+  });
 
 const schema = z.object({
   civility: z.enum(["Female", "Male", "Undefined"]),
@@ -65,6 +128,7 @@ const schema = z.object({
     .optional(),
   secondPhone: z.string().optional().or(z.literal("")),
   identificationName: z.string().optional(),
+  usualCompanyName: z.string().optional(),
   address: addressSchema,
 });
 
@@ -80,7 +144,7 @@ export const streetTypeEnum = ["rue", "avenue"]; // TODO: use real street type
 export const styles = {
   Grid: {
     display: "grid",
-    gridTemplateColumns: "1fr 1px 1fr 1fr",
+    gridTemplateColumns: "1fr 1px 1fr ",
     gap: "40px",
   },
 };
@@ -89,7 +153,7 @@ export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) =>
   const defaultValues = contact.address?.countryName
     ? contact
     : { ...contact, address: { ...contact.address, countryName: "France" } };
-  const { register, control, errors, handleSubmit } = useForm(schema, {
+  const { register, control, errors, handleSubmit, reset } = useForm(schema, {
     defaultValues: defaultValues,
   });
 
@@ -103,15 +167,19 @@ export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) =>
     onSave();
   });
 
+  const handleClose = () => {
+    reset(defaultValues);
+    onClose();
+  };
   console.log({ errors });
 
   return (
-    <Dialog open={open} onClose={onClose} sx={{ ".MuiPaper-root": { maxWidth: "1160px", px: 3 } }}>
+    <Dialog open={open} onClose={handleClose} sx={{ ".MuiPaper-root": { maxWidth: "1160px", px: 3 } }}>
       <form action="#" onSubmit={onSubmit}>
         <DialogTitle>Modification des coordonnées</DialogTitle>
         <DialogContent>
           <Box sx={styles.Grid}>
-            <Stack gap={4}>
+            <Stack gap={3} pt={2.5}>
               <Field
                 control={control}
                 label="Civilité"
@@ -126,7 +194,7 @@ export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) =>
               <Field label="Adresse courriel" error={errors.email?.message} {...register("email")} />
               <Row gap={3}>
                 <Field
-                  sx={{ width: "150px" }}
+                  sx={{ width: "180px" }}
                   label="Téléphone 1"
                   error={errors.phone?.message}
                   {...register("phone")}
@@ -135,7 +203,7 @@ export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) =>
               </Row>
               <Row gap={3}>
                 <Field
-                  sx={{ width: "150px" }}
+                  sx={{ width: "180px" }}
                   label="Téléphone 2"
                   error={errors.secondPhone?.message}
                   {...register("secondPhone")}
@@ -144,19 +212,18 @@ export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) =>
               </Row>
             </Stack>
             <Divider orientation="vertical" variant="middle" />
-            <Box component={"div"} pt={6}>
-              <AddressFormFields
-                errors={errors}
-                register={register}
-                repetitionIndexValue={contact.address?.repetitionIndex}
-                streetTypeValue={contact.address?.streetType}
-                countryValue={contact.address?.countryName?.toLocaleUpperCase() ?? "FRANCE"}
-              />
-            </Box>
+            <AddressFormFields
+              errors={errors}
+              register={register}
+              repetitionIndexValue={contact.address?.repetitionIndex}
+              streetTypeValue={contact.address?.streetType}
+              countryValue={contact.address?.countryName?.toLocaleUpperCase() ?? "FRANCE"}
+              type="contact"
+            />
           </Box>
         </DialogContent>
         <DialogActions>
-          <Button onClick={onClose} disabled={isPending}>
+          <Button type="reset" onClick={handleClose} disabled={isPending}>
             Annuler
           </Button>
           <Button type="submit" variant="contained" disabled={isPending}>
diff --git a/src/ui/Contact/ContactSurveys.tsx b/src/ui/Contact/ContactSurveys.tsx
index a9b44cd..8fba62e 100644
--- a/src/ui/Contact/ContactSurveys.tsx
+++ b/src/ui/Contact/ContactSurveys.tsx
@@ -16,6 +16,7 @@ import { useDebouncedState } from "../../hooks/useDebouncedState.ts";
 import { collectStates } from "./CollectStateSelect.tsx";
 import { useToggle } from "react-use";
 import { SelectChangeEvent } from "@mui/material/Select";
+import Button from "@mui/material/Button";
 
 type Props = {
   contact: APISchemas["ContactFirstLoginDto"];
@@ -24,7 +25,8 @@ type Props = {
 export const ContactSurveysContent = ({ contact }: Props) => {
   const [role, setRole] = useState("tous");
   const [state, setState] = useState("");
-  const [search, setSearch] = useDebouncedState("", 500);
+  const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", 500);
+  const [search, setSearch] = useState("");
   const [isFilteredOpened, toggle] = useToggle(false);
 
   const {
@@ -40,16 +42,16 @@ export const ContactSurveysContent = ({ contact }: Props) => {
     },
   });
 
-  const filteredSurveys = filterSurveys(surveys ?? [], { search, role, state });
+  const filteredSurveys = filterSurveys(surveys ?? [], { search: debouncedSearch, role, state });
 
   return (
     <Card sx={{ mx: 2, px: 6, py: 3 }} elevation={2}>
       <TitleWithIconAndDivider
-        title={"Liste des interrogations du contact"}
+        title={"Liste des questionnaires du contact"}
         IconComponent={BinocularIcon}
       />
 
-      <Row justifyContent={"space-between"}>
+      <Row justifyContent={"space-between"} component={"form"}>
         <Row spacing={3} py={4}>
           <ContactSurveysFilterSelect
             options={[
@@ -57,12 +59,32 @@ export const ContactSurveysContent = ({ contact }: Props) => {
               { label: "Principal", value: "primary" },
               { label: "Secondaire", value: "secondary" },
             ]}
-            defaultValue={"tous"}
+            value={role}
             label={"Rôle du contact"}
             name={"role"}
             onFilterChange={e => setRole(e.target.value)}
           />
-          <Filters onSearch={e => setSearch(e.target.value)} onSelect={e => setState(e.target.value)} />
+          <Filters
+            searchValue={search}
+            stateValue={state}
+            onSearch={e => {
+              setSearch(e.target.value);
+              setDebouncedSearch(e.target.value);
+            }}
+            onSelect={e => setState(e.target.value)}
+          />
+          <Button
+            variant="outlined"
+            type="reset"
+            onClick={() => {
+              setSearch("");
+              setDebouncedSearch("");
+              setRole("tous");
+              setState("");
+            }}
+          >
+            Réinitialiser
+          </Button>
         </Row>
         <ToggleButtonGroup value={isFilteredOpened} exclusive onChange={(_, v) => toggle(v)}>
           <ToggleButton value={false} aria-label="left aligned">
@@ -74,7 +96,7 @@ export const ContactSurveysContent = ({ contact }: Props) => {
         </ToggleButtonGroup>
       </Row>
 
-      <ContactSurveysTable surveys={filteredSurveys} onSelectState={refetch} isLoading={isLoading} />
+      <ContactSurveysTable surveys={filteredSurveys} refetchState={refetch} isLoading={isLoading} />
     </Card>
   );
 };
@@ -104,15 +126,18 @@ function filterSurveys(
 }
 
 type FiltersProps = {
+  searchValue: string;
+  stateValue: string;
   onSelect: (e: SelectChangeEvent) => void;
   onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export const Filters = ({ onSelect, onSearch }: FiltersProps) => {
+export const Filters = ({ searchValue, stateValue, onSelect, onSearch }: FiltersProps) => {
   return (
     <Row gap={3}>
       <ContactSurveysFilterSelect
         options={[...collectStates, { label: "Tous", value: "all" }]}
+        value={stateValue !== "" ? stateValue : "none"}
         placeholderLabel="Sélectionnez un état"
         label={"Etat de la collecte"}
         name={"state"}
@@ -127,6 +152,7 @@ export const Filters = ({ onSelect, onSearch }: FiltersProps) => {
             </InputAdornment>
           ),
         }}
+        value={searchValue}
         name="name"
         id="name"
         label="Rechercher dans le tableau"
diff --git a/src/ui/Contact/ContactSurveysFilterSelect.tsx b/src/ui/Contact/ContactSurveysFilterSelect.tsx
index 84224f3..b44581b 100644
--- a/src/ui/Contact/ContactSurveysFilterSelect.tsx
+++ b/src/ui/Contact/ContactSurveysFilterSelect.tsx
@@ -5,7 +5,7 @@ import Select, { SelectChangeEvent } from "@mui/material/Select";
 
 type Props = {
   options: { label: string; value: string }[];
-  defaultValue?: string;
+  value?: string;
   placeholderLabel?: string;
   label: string;
   name: string;
@@ -14,7 +14,7 @@ type Props = {
 
 export const ContactSurveysFilterSelect = ({
   options,
-  defaultValue,
+  value,
   label,
   placeholderLabel,
   name,
@@ -32,7 +32,7 @@ export const ContactSurveysFilterSelect = ({
         label={label}
         name={name}
         fullWidth
-        defaultValue={defaultValue ?? placeholderLabel ?? ""}
+        value={value ?? placeholderLabel ?? ""}
         onChange={onFilterChange}
         id={`select-${name}`}
         size="small"
diff --git a/src/ui/Contact/ContactSurveysTable.tsx b/src/ui/Contact/ContactSurveysTable.tsx
index d6b0213..249c124 100644
--- a/src/ui/Contact/ContactSurveysTable.tsx
+++ b/src/ui/Contact/ContactSurveysTable.tsx
@@ -43,7 +43,7 @@ export const columns: readonly Column[] = [
 
 type Props = {
   surveys?: APISchemas["AccreditationDetailDto"][];
-  onSelectState: () => void;
+  refetchState: () => void;
   isLoading: boolean;
 };
 
@@ -72,7 +72,7 @@ export const ContactSurveysTable = (props: Props) => {
               <ContactSurveysTableRow
                 survey={survey}
                 key={`survey-${survey.partition}-${survey.identificationName}-${index}`}
-                onSelectState={props.onSelectState}
+                refetchState={props.refetchState}
               />
             );
           })}
diff --git a/src/ui/Contact/ContactSurveysTableRow.tsx b/src/ui/Contact/ContactSurveysTableRow.tsx
index 3fb71ce..e21b056 100644
--- a/src/ui/Contact/ContactSurveysTableRow.tsx
+++ b/src/ui/Contact/ContactSurveysTableRow.tsx
@@ -13,12 +13,14 @@ import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import IconButton from "@mui/material/IconButton";
 import { Link } from "../Link";
+import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
+import { Typography } from "@mui/material";
 
 type Props = {
   survey: APISchemas["AccreditationDetailDto"];
-  onSelectState: () => void;
+  refetchState: () => void;
 };
-export const ContactSurveysTableRow = ({ survey, onSelectState }: Props) => {
+export const ContactSurveysTableRow = ({ survey, refetchState }: Props) => {
   const [openCollectStateHistory, setOpenCollectStateHistory] =
     useState<APISchemas["AccreditationDetailDto"]>();
 
@@ -40,7 +42,6 @@ export const ContactSurveysTableRow = ({ survey, onSelectState }: Props) => {
         payload: { "source": "platine-gestion" },
       },
     });
-    onSelectState();
   };
 
   return (
@@ -50,15 +51,16 @@ export const ContactSurveysTableRow = ({ survey, onSelectState }: Props) => {
       key={`row-${survey.partition}-${survey.identificationName}`}
       sx={{ borderBottom: `solid 1px ${theme.palette.text.hint}` }}
     >
-      {columns.map(column => {
+      {columns.map((column, index) => {
         return (
           <ContactSurveysTableCell
-            key={survey["identificationCode"]}
+            key={`${survey["identificationCode"]}-${index}`}
             survey={survey}
             columnId={column.id}
             openCollectStateHistory={openCollectStateHistory}
             setOpenCollectStateHistory={setOpenCollectStateHistory}
             onSelectCollectState={onSelectCollectState}
+            refetchState={refetchState}
           />
         );
       })}
@@ -85,6 +87,7 @@ type ContactSurveysTableCellProps = {
   openCollectStateHistory: APISchemas["AccreditationDetailDto"] | undefined;
   setOpenCollectStateHistory: (survey?: APISchemas["AccreditationDetailDto"]) => void;
   onSelectCollectState: (type: string, questioningId?: string) => void;
+  refetchState: () => void;
 };
 
 const ContactSurveysTableCell = ({
@@ -93,6 +96,7 @@ const ContactSurveysTableCell = ({
   openCollectStateHistory,
   setOpenCollectStateHistory,
   onSelectCollectState,
+  refetchState,
 }: ContactSurveysTableCellProps) => {
   const value = survey[columnId as keyof typeof survey];
 
@@ -101,7 +105,7 @@ const ContactSurveysTableCell = ({
       survey.questioningId !== undefined && openCollectStateHistory === survey;
 
     return (
-      <TableCell key={`state-${survey.partition}-${survey.identificationName}`} width={"240px"}>
+      <TableCell width={"240px"}>
         <Row spacing={1}>
           <Chip
             sx={{
@@ -117,7 +121,10 @@ const ContactSurveysTableCell = ({
           />
           {isCollectStateHistoryVisible && (
             <CollectStateHistory
-              onClose={() => setOpenCollectStateHistory(undefined)}
+              onClose={() => {
+                refetchState();
+                setOpenCollectStateHistory(undefined);
+              }}
               open={true}
               questioningId={survey.questioningId!}
               surveyName={survey.partition ?? ""}
@@ -131,7 +138,7 @@ const ContactSurveysTableCell = ({
 
   if (columnId === "actions") {
     return (
-      <TableCell key={`action-${survey.partition}-${survey.identificationName}`} align="center">
+      <TableCell align="center">
         {survey.questioningUrl && (
           <IconButton color="inherit" target="_blank" component={Link} to={survey.questioningUrl}>
             <OpenInNewIcon fontSize="small" />
@@ -142,25 +149,29 @@ const ContactSurveysTableCell = ({
   }
 
   if (columnId === "main") {
-    return <TableCell key={columnId}>{value === true ? "Principal" : "Secondaire"}</TableCell>;
+    return <TableCell>{value === true ? "Principal" : "Secondaire"}</TableCell>;
   }
 
   if (columnId === "partioningClosingDate") {
-    return (
-      <TableCell key={columnId}>{new Date(Date.parse(value as string)).toLocaleDateString()}</TableCell>
-    );
+    return <TableCell>{new Date(Date.parse(value as string)).toLocaleDateString()}</TableCell>;
   }
 
   if (columnId === "surveyUnitId" || columnId === "sourceWording") {
     return (
-      <TableCell key={columnId}>
+      <TableCell>
         <Link
-          sx={{ cursor: "pointer", "&.MuiLink-root:hover": { color: "primary.main" } }}
+          sx={{
+            cursor: "pointer",
+            "&.MuiLink-root:hover": { color: "primary.main" },
+          }}
           to={columnId === "surveyUnitId" ? `/survey-units/${value}` : `/surveys/${survey.surveyId}`}
           color={"inherit"}
           underline="none"
         >
-          {value}
+          <Row spacing={0.5}>
+            <Typography variant="bodyMedium">{value}</Typography>
+            <ArrowOutwardIcon fontSize="linkIcon" />
+          </Row>
         </Link>
       </TableCell>
     );
diff --git a/src/ui/Contact/PasswordCard.tsx b/src/ui/Contact/PasswordCard.tsx
index 62c6bb1..439df91 100644
--- a/src/ui/Contact/PasswordCard.tsx
+++ b/src/ui/Contact/PasswordCard.tsx
@@ -11,6 +11,7 @@ import { SelectWithOptions } from "../Form/SelectWithOptions.tsx";
 
 export const PasswordCard = () => {
   const [open, setOpen] = useState(false);
+  const [optionSelected, setOptionSelected] = useState("");
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -18,6 +19,7 @@ export const PasswordCard = () => {
 
   const onClose = () => {
     setOpen(false);
+    setOptionSelected("");
   };
 
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -28,7 +30,10 @@ export const PasswordCard = () => {
     onClose();
   };
 
-  const options = ["mail", "phone"]; // TODO: use real options
+  const options = [
+    { label: "email", value: "mail" },
+    { label: "téléphone", value: "phone" },
+  ]; // TODO: use real options
 
   const style = {
     root: {
@@ -57,6 +62,8 @@ export const PasswordCard = () => {
         >
           <Box sx={style.root} pb={1} pt={3} px={6}>
             <SelectWithOptions
+              value={optionSelected}
+              onChange={e => setOptionSelected(e.target.value)}
               options={options}
               label={"Choisissez le mode d'envoi"}
               name={"password"}
diff --git a/src/ui/Form/AddressFormFields.tsx b/src/ui/Form/AddressFormFields.tsx
index fb21d30..6607055 100644
--- a/src/ui/Form/AddressFormFields.tsx
+++ b/src/ui/Form/AddressFormFields.tsx
@@ -14,6 +14,7 @@ type Props = {
   repetitionIndexValue?: string;
   streetTypeValue?: string;
   countryValue: string;
+  type?: "contact" | "surveyUnit";
 };
 
 const styles = {
@@ -30,16 +31,46 @@ export const AddressFormFields = ({
   repetitionIndexValue,
   streetTypeValue,
   countryValue,
+  type = "surveyUnit",
 }: Props) => {
   const [country, setCountry] = useState(countryValue);
 
   return (
     <Box sx={styles.Grid}>
-      <Stack gap={4} pt={1}>
+      <Stack gap={3} pt={1}>
+        <Box sx={{ width: "650px" }}>
+          <Field
+            defaultValue={countryValue ?? "FRANCE"}
+            type="select"
+            label="Sélectionnez un pays"
+            selectoptions={countries}
+            error={errors.address?.countryName?.message}
+            {...register("address.countryName")}
+            onChange={e => {
+              setCountry(e.target.value as string);
+            }}
+          />
+        </Box>
+        {type === "surveyUnit" ? (
+          <Field
+            sx={{ width: "650px" }}
+            label="Raison sociale"
+            error={errors.identificationName?.message}
+            {...register("identificationName")}
+          />
+        ) : (
+          <Field
+            sx={{ width: "650px" }}
+            label="Raison sociale"
+            error={errors.usualCompanyName?.message}
+            {...register("usualCompanyName")}
+          />
+        )}
         <Field
-          label="Raison sociale"
-          error={errors.identificationName?.message}
-          {...register("identificationName")}
+          sx={{ width: "650px" }}
+          label="Complément (ZI, Bat, Res ...)"
+          error={errors.address?.addressSupplement?.message}
+          {...register("address.addressSupplement")}
         />
         <Row gap={2}>
           <Field
@@ -48,7 +79,7 @@ export const AddressFormFields = ({
             error={errors.address?.streetNumber?.message}
             {...register("address.streetNumber")}
           />
-          <Box sx={{ width: "200px" }}>
+          <Box sx={{ width: "250px" }}>
             {country === "FRANCE" ? (
               <Field
                 type="select"
@@ -67,78 +98,65 @@ export const AddressFormFields = ({
               />
             )}
           </Box>
+          {country === "FRANCE" ? (
+            <Field
+              sx={{ width: "270px" }}
+              type="select"
+              label="Type de voie"
+              selectoptions={streetTypeEnum}
+              defaultValue={streetTypeValue}
+              error={errors.address?.streetType?.message}
+              {...register("address.streetType")}
+            />
+          ) : (
+            <Field
+              sx={{ width: "270px" }}
+              label="Type de voie"
+              defaultValue={streetTypeValue ?? ""}
+              error={errors.address?.streetType?.message}
+              {...register("address.streetType")}
+            />
+          )}
         </Row>
-        {country === "FRANCE" ? (
-          <Field
-            type="select"
-            label="Type de voie"
-            selectoptions={streetTypeEnum}
-            defaultValue={streetTypeValue}
-            error={errors.address?.streetType?.message}
-            {...register("address.streetType")}
-          />
-        ) : (
-          <Field
-            label="Type de voie"
-            defaultValue={streetTypeValue ?? ""}
-            error={errors.address?.streetType?.message}
-            {...register("address.streetType")}
-          />
-        )}
         <Field
+          sx={{ width: "650px" }}
           label="Libellé de voie"
           error={errors.address?.streetName?.message}
           {...register("address.streetName")}
         />
         <Field
-          label="Complément (ZI, Bat, Res ...)"
-          error={errors.address?.addressSupplement?.message}
-          {...register("address.addressSupplement")}
-        />
-        <Field
+          sx={{ width: "650px" }}
           label="Mention spéciale (BP, TSA ...)"
           error={errors.address?.specialDistribution?.message}
           {...register("address.specialDistribution")}
         />
-      </Stack>
-      <Stack gap={4} pt={1}>
-        <Field
-          sx={{ width: "210px" }}
-          label="Commune"
-          error={errors.address?.cityName?.message}
-          {...register("address.cityName")}
-        />
-        <Field
-          sx={{ width: "120px" }}
-          label="Code postal"
-          error={errors.address?.zipCode?.message}
-          {...register("address.zipCode")}
-        />
-        <Field
-          sx={{ width: "210px" }}
-          label="Bureau distributeur"
-          error={errors.address?.deliveryOffice?.message}
-          {...register("address.deliveryOffice")}
-        />
-        <Field
-          sx={{ width: "210px" }}
-          label="Code cedex"
-          error={errors.address?.cedexCode?.message}
-          {...register("address.cedexCode")}
-        />
-        <Box sx={{ width: "300px" }}>
+        <Row gap={2} alignItems={"flex-start"}>
           <Field
-            defaultValue={countryValue ?? "FRANCE"}
-            type="select"
-            label="Sélectionnez un pays"
-            selectoptions={countries}
-            error={errors.address?.countryName?.message}
-            {...register("address.countryName")}
-            onChange={e => {
-              setCountry(e.target.value as string);
-            }}
+            sx={{ width: "180px" }}
+            label="Commune"
+            error={errors.address?.cityName?.message}
+            {...register("address.cityName")}
           />
-        </Box>
+          <Field
+            sx={{ width: "120px" }}
+            label="Code postal"
+            error={errors.address?.zipCode?.message}
+            {...register("address.zipCode")}
+          />
+
+          <Field
+            sx={{ width: "180px" }}
+            label="Bureau distributeur"
+            error={errors.address?.cedexName?.message}
+            {...register("address.cedexName")}
+          />
+          <Field
+            sx={{ width: "120px" }}
+            label="Code cedex"
+            error={errors.address?.cedexCode?.message}
+            {...register("address.cedexCode")}
+          />
+        </Row>
       </Stack>
     </Box>
   );
diff --git a/src/ui/Form/SelectWithOptions.tsx b/src/ui/Form/SelectWithOptions.tsx
index 4514c1a..db23f33 100644
--- a/src/ui/Form/SelectWithOptions.tsx
+++ b/src/ui/Form/SelectWithOptions.tsx
@@ -6,6 +6,7 @@ export type Props = {
   options: Option[];
   label: string;
   name: string;
+  value?: string | number;
   onChange?: (e: SelectChangeEvent) => void;
 };
 
@@ -17,11 +18,24 @@ const getLabel = (o: Option) => {
   return typeof o === "string" ? o : o.label;
 };
 
-export function SelectWithOptions({ options, label, name, onChange }: Props) {
+const getSelectedLabel = (selected: string, options: Option[]) => {
+  if (typeof options[0] === "string") {
+    return selected;
+  }
+
+  const option = options.find((o: Option) => typeof o !== "string" && o.value === selected) as {
+    label: string;
+    value: string;
+  };
+  return option.label;
+};
+
+export function SelectWithOptions({ options, label, name, onChange, value }: Props) {
   return (
     <Select
       name={name}
       size="small"
+      value={value ? getValue(value.toLocaleString()) : ""}
       displayEmpty
       onChange={onChange}
       fullWidth
@@ -31,7 +45,7 @@ export function SelectWithOptions({ options, label, name, onChange }: Props) {
           return <>{label}</>;
         }
 
-        return <>{selected}</>;
+        return <>{getSelectedLabel(selected, options)}</>;
       }}
     >
       {options.map(o => (
diff --git a/src/ui/Search/SearchContactsForm.tsx b/src/ui/Search/SearchContactsForm.tsx
index e6c4956..a1b4a92 100644
--- a/src/ui/Search/SearchContactsForm.tsx
+++ b/src/ui/Search/SearchContactsForm.tsx
@@ -2,30 +2,71 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import { ExpandButton } from "../ExpandButton";
 import { useState } from "react";
+import { SearchSurveySelect } from "./SearchSurveySelect";
+import { SelectWithOptions } from "../Form/SelectWithOptions";
+import { useFetchQuery } from "../../hooks/useFetchQuery";
+import { SearchPanelActions } from "./SearchPanelActions";
+import { useGetSearchFilter, useSearchForm } from "../../hooks/useSearchFilter";
 
 export const SearchContactsForm = () => {
   const [expanded, setExpanded] = useState(false);
 
+  const { data: periodicities } = useFetchQuery("/api/periodicities");
+
+  const sortedPeriodicities = periodicities?.sort((a, b) => (a.label > b.label ? 1 : -1)) ?? [];
+
+  // TODO use another endpoint
+  const { data } = useFetchQuery("/api/surveys", { query: { size: 50 } });
+
+  const surveysName = data?.content?.map(s => s.sourceId) ?? [];
+  // filter undefined value before sorting (use Set to remove duplicate value)
+  const filteredSurveysName = new Set(surveysName.filter(s => s).sort((a, b) => (a > b ? 1 : -1)));
+
+  const years = data?.content?.map(s => s.year) ?? [];
+  const filteredYears = years.filter(year => year !== undefined && year !== null);
+  const sortedYears = Array.from(new Set(filteredYears.sort((a, b) => (a! > b! ? 1 : -1))));
+
   const handleExpandClick = () => {
     setExpanded(!expanded);
   };
 
+  const { contacts } = useGetSearchFilter();
+
+  const { onSubmit, onReset, inputProps } = useSearchForm("contacts", contacts);
+
   return (
-    <Stack spacing={3}>
-      <Stack spacing={2}>
-        <TextField name="id" id="id" label="Identifiant du contact" variant="outlined" size="small" />
-        <TextField name="name" id="name" label="Nom/prénom" variant="outlined" size="small" />
-        <TextField name="email" id="email" label="Adresse courriel" variant="outlined" size="small" />
-      </Stack>
-      <ExpandButton label={"Autres champs de recherche"} handleExpandClick={handleExpandClick} />
-      {expanded && (
+    <form onSubmit={onSubmit} onReset={onReset}>
+      <Stack spacing={3}>
         <Stack spacing={2}>
-          <TextField name="city" id="city" label="Ville" variant="outlined" size="small" />
-          <TextField name="function" id="function" label="Fonction" variant="outlined" size="small" />
-          {/* TODO: keep this filter ? */}
-          {/* <TextField name="campaign" id="campaign" label="Campagne" variant="outlined" size="small" /> */}
+          <TextField
+            label="Identifiant du contact"
+            variant="outlined"
+            size="small"
+            {...inputProps("identifier")}
+          />
+          <TextField label="Nom/prénom" variant="outlined" size="small" {...inputProps("name")} />
+          <TextField label="Adresse courriel" variant="outlined" size="small" {...inputProps("email")} />
         </Stack>
-      )}
-    </Stack>
+        <ExpandButton label={"Autres champs de recherche"} handleExpandClick={handleExpandClick} />
+        {expanded && (
+          <Stack spacing={2}>
+            <TextField label="Ville" variant="outlined" size="small" {...inputProps("city")} />
+            <TextField label="Fonction" variant="outlined" size="small" {...inputProps("function")} />
+            <SearchSurveySelect
+              name="surveyId"
+              label={"Nom de l'enquête"}
+              options={Array.from(filteredSurveysName)}
+            />
+            <SelectWithOptions
+              name="year"
+              label={"Année de collecte"}
+              options={sortedYears.map(s => s!.toString())}
+            />
+            <SelectWithOptions name="period" label={"Périodicité"} options={sortedPeriodicities} />
+          </Stack>
+        )}
+        <SearchPanelActions />
+      </Stack>
+    </form>
   );
 };
diff --git a/src/ui/Search/SearchPanel.tsx b/src/ui/Search/SearchPanel.tsx
index 1811040..cc6e9f6 100644
--- a/src/ui/Search/SearchPanel.tsx
+++ b/src/ui/Search/SearchPanel.tsx
@@ -1,5 +1,4 @@
-import { Button, Card, Tab, Tabs } from "@mui/material";
-import { FormEventHandler } from "react";
+import { Card, Tab, Tabs } from "@mui/material";
 
 import PermIdentityIcon from "@mui/icons-material/PermIdentity";
 import CorporateFareIcon from "@mui/icons-material/CorporateFare";
@@ -8,12 +7,10 @@ import { SearchContactsForm } from "./SearchContactsForm.tsx";
 import { SearchSurveysForm } from "./SearchSurveysForm.tsx";
 import { SearchSurveyUnitsForm } from "./SearchSurveyUnitsForm.tsx";
 import Typography from "@mui/material/Typography";
-import SearchIcon from "@mui/icons-material/Search";
 import Stack from "@mui/material/Stack";
 import { theme } from "../../theme.tsx";
 import { useLocation, useNavigate } from "react-router-dom";
 import { kebabCase } from "../../functions/string.ts";
-import { useSetSearchFilter } from "../../hooks/useSearchFilter.ts";
 
 const getSearchTitle = (tab: string) => {
   switch (tab) {
@@ -39,40 +36,11 @@ export const style = {
 export const SearchPanel = () => {
   const currentTab = useCurrentTab();
   const navigate = useNavigate();
-  const setFilter = useSetSearchFilter();
+
   const handleChange = (_: unknown, tab: string) => {
     navigate("/search/" + kebabCase(tab));
   };
 
-  const handleSubmit: FormEventHandler<HTMLFormElement> = e => {
-    e.preventDefault();
-    const data = new FormData(e.currentTarget);
-    // We could write a more dynamic code but this improves error discovery in TypeScript
-    if (currentTab === "surveys") {
-      setFilter(currentTab, {
-        idSource: data.get("surveyId")!.toString(),
-        year: data.get("year") ? parseInt(data.get("year")!.toString(), 10) : undefined,
-        periodicity: data.get("period")!.toString(),
-      });
-    }
-    if (currentTab === "surveyUnits") {
-      setFilter(currentTab, {
-        idSu: data.get("idSu")!.toString(),
-        identificationCode: data.get("identificationCode")!.toString(),
-        identificationName: data.get("identificationName")!.toString(),
-      });
-    }
-    if (currentTab === "contacts") {
-      setFilter(currentTab, {
-        identifier: data.get("id")!.toString(),
-        name: data.get("name")!.toString(),
-        email: data.get("email")!.toString(),
-        city: data.get("city")?.toString() ?? "",
-        function: data.get("function")?.toString() ?? "",
-      });
-    }
-  };
-
   return (
     <div>
       <Card elevation={2} sx={style.root}>
@@ -104,21 +72,12 @@ export const SearchPanel = () => {
           {getSearchTitle(currentTab)}
         </Typography>
 
-        <Stack spacing={3} m={3} component="form" onSubmit={handleSubmit}>
+        <Stack spacing={3} m={3}>
           <Stack spacing={2}>
             {currentTab === "contacts" && <SearchContactsForm />}
             {currentTab === "surveys" && <SearchSurveysForm />}
             {currentTab === "surveyUnits" && <SearchSurveyUnitsForm />}
           </Stack>
-          <Button
-            type="submit"
-            variant="contained"
-            sx={{ typography: "bodyLarge" }}
-            size={"large"}
-            startIcon={<SearchIcon />}
-          >
-            lancer la recherche
-          </Button>
         </Stack>
       </Card>
     </div>
diff --git a/src/ui/Search/SearchPanelActions.tsx b/src/ui/Search/SearchPanelActions.tsx
new file mode 100644
index 0000000..93d3517
--- /dev/null
+++ b/src/ui/Search/SearchPanelActions.tsx
@@ -0,0 +1,22 @@
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import SearchIcon from "@mui/icons-material/Search";
+
+export function SearchPanelActions() {
+  return (
+    <Stack spacing={1.5}>
+      <Button
+        type="submit"
+        variant="contained"
+        sx={{ typography: "bodyLarge" }}
+        size={"large"}
+        startIcon={<SearchIcon />}
+      >
+        lancer la recherche
+      </Button>
+      <Button variant="outlined" type="reset" sx={{ typography: "bodyLarge" }} size={"large"}>
+        Réinitialiser la recherche
+      </Button>
+    </Stack>
+  );
+}
diff --git a/src/ui/Search/SearchSurveySelect.tsx b/src/ui/Search/SearchSurveySelect.tsx
index dc03172..9e74e43 100644
--- a/src/ui/Search/SearchSurveySelect.tsx
+++ b/src/ui/Search/SearchSurveySelect.tsx
@@ -12,9 +12,9 @@ export const SearchSurveySelect = ({ options, ...props }: Props) => {
   return (
     <FormControl fullWidth>
       <InputLabel size="small" id={labelId}>
-        Nom de l'enquête
+        {props.label}
       </InputLabel>
-      <Select size="small" labelId={labelId} id={id} label="Age" {...props}>
+      <Select size="small" labelId={labelId} id={id} label={props.label} {...props}>
         {options.map(option => (
           <MenuItem key={option} value={option}>
             {option}
diff --git a/src/ui/Search/SearchSurveyUnitsForm.tsx b/src/ui/Search/SearchSurveyUnitsForm.tsx
index a5425c0..97711ca 100644
--- a/src/ui/Search/SearchSurveyUnitsForm.tsx
+++ b/src/ui/Search/SearchSurveyUnitsForm.tsx
@@ -1,29 +1,38 @@
 import TextField from "@mui/material/TextField";
+import { useGetSearchFilter, useSearchForm } from "../../hooks/useSearchFilter";
+import Stack from "@mui/material/Stack";
+import { SearchPanelActions } from "./SearchPanelActions";
 
 export const SearchSurveyUnitsForm = () => {
+  const { surveyUnits } = useGetSearchFilter();
+
+  const { onSubmit, onReset, inputProps } = useSearchForm("surveyUnits", surveyUnits);
+
   return (
-    <>
-      <TextField
-        name="idSu"
-        id="idSu"
-        label="Identifiant unité enquêtée"
-        variant="outlined"
-        size="small"
-      />
-      <TextField
-        name="identificationCode"
-        id="identificationCode"
-        label="SIREN"
-        variant="outlined"
-        size="small"
-      />
-      <TextField
-        name="identificationName"
-        id="identificationName"
-        label="Raison sociale"
-        variant="outlined"
-        size="small"
-      />
-    </>
+    <form onSubmit={onSubmit} onReset={onReset}>
+      <Stack spacing={4}>
+        <Stack spacing={2}>
+          <TextField
+            label="Identifiant unité enquêtée"
+            variant="outlined"
+            size="small"
+            {...inputProps("idSu")}
+          />
+          <TextField
+            label="SIREN"
+            variant="outlined"
+            size="small"
+            {...inputProps("identificationCode")}
+          />
+          <TextField
+            label="Raison sociale"
+            variant="outlined"
+            size="small"
+            {...inputProps("identificationName")}
+          />
+        </Stack>
+        <SearchPanelActions />
+      </Stack>
+    </form>
   );
 };
diff --git a/src/ui/Search/SearchSurveysForm.tsx b/src/ui/Search/SearchSurveysForm.tsx
index 7ef89ce..1f6a784 100644
--- a/src/ui/Search/SearchSurveysForm.tsx
+++ b/src/ui/Search/SearchSurveysForm.tsx
@@ -1,6 +1,9 @@
 import { SearchSurveySelect } from "./SearchSurveySelect.tsx";
 import { useFetchQuery } from "../../hooks/useFetchQuery.ts";
 import { SelectWithOptions } from "../Form/SelectWithOptions.tsx";
+import Stack from "@mui/material/Stack";
+import { SearchPanelActions } from "./SearchPanelActions.tsx";
+import { useGetSearchFilter, useSearchForm } from "../../hooks/useSearchFilter.ts";
 
 // TODO : Replace with true data
 const names = ["AQV", "a1", "a2", "a3", "a4", "a5"];
@@ -9,13 +12,26 @@ const years = ["2024", "2023", "2022"];
 export const SearchSurveysForm = () => {
   const { data } = useFetchQuery("/api/periodicities");
 
+  const { surveys } = useGetSearchFilter();
+
+  const { onSubmit, onReset, inputProps } = useSearchForm("surveys", surveys);
+
   const sortedPeriodicities = data?.sort((a, b) => (a.label > b.label ? 1 : -1)) ?? [];
 
   return (
-    <>
-      <SearchSurveySelect name="surveyId" label={"Nom de l'enquête"} options={names} />
-      <SelectWithOptions name="year" label={"Année de collecte"} options={years} />
-      <SelectWithOptions name="period" label={"Périodicité"} options={sortedPeriodicities} />
-    </>
+    <form onSubmit={onSubmit} onReset={onReset}>
+      <Stack spacing={4}>
+        <Stack spacing={2}>
+          <SearchSurveySelect label={"Nom de l'enquête"} options={names} {...inputProps("idSource")} />
+          <SelectWithOptions label={"Année de collecte"} options={years} {...inputProps("year")} />
+          <SelectWithOptions
+            label={"Périodicité"}
+            options={sortedPeriodicities}
+            {...inputProps("periodicity")}
+          />
+        </Stack>
+        <SearchPanelActions />
+      </Stack>
+    </form>
   );
 };
diff --git a/src/ui/SurveyUnit/SurveyUnitContacts.tsx b/src/ui/SurveyUnit/SurveyUnitContacts.tsx
index 3eb407a..cd35a4a 100644
--- a/src/ui/SurveyUnit/SurveyUnitContacts.tsx
+++ b/src/ui/SurveyUnit/SurveyUnitContacts.tsx
@@ -1,5 +1,4 @@
 import Stack from "@mui/material/Stack";
-import { useState } from "react";
 import { Row } from "../Row";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import ToggleButton from "@mui/material/ToggleButton";
@@ -19,11 +18,9 @@ import { TextWithLeftIcon } from "../TextWithLeftIcon";
 import LocationOnIcon from "@mui/icons-material/LocationOn";
 import LocalPhoneOutlinedIcon from "@mui/icons-material/LocalPhoneOutlined";
 import EmailIcon from "@mui/icons-material/Email";
-import ContactPageOutlinedIcon from "@mui/icons-material/ContactPageOutlined";
 import EditIcon from "@mui/icons-material/Edit";
 import { useFetchQuery } from "../../hooks/useFetchQuery";
 import { APISchemas } from "../../types/api";
-import { ContactSurveysFilterSelect } from "../Contact/ContactSurveysFilterSelect";
 import SearchIcon from "@mui/icons-material/Search";
 import useToggle from "react-use/lib/useToggle";
 import { useDebouncedState } from "../../hooks/useDebouncedState";
@@ -35,7 +32,6 @@ type Props = {
 
 export const SurveyUnitContacts = ({ surveyUnit }: Props) => {
   const [search, setSearch] = useDebouncedState("", 500);
-  const [role, setRole] = useState("tous");
   const [isFilteredOpened, toggle] = useToggle(false);
 
   const { data: contacts, isLoading } = useFetchQuery("/api/survey-units/{id}/contacts", {
@@ -55,42 +51,29 @@ export const SurveyUnitContacts = ({ surveyUnit }: Props) => {
     );
   }
 
-  const filteredContacts = filterContacts(contacts ?? [], { search, role });
+  const filteredContacts = filterContacts(contacts ?? [], { search });
 
   return (
-    <Box>
+    <Box sx={{ height: "calc(100vh - 500px)" }}>
       <Stack spacing={4} sx={{ minHeight: 0, px: 3, py: 1 }}>
         <Row justifyContent={"space-between"}>
-          <Row spacing={3} py={2}>
-            <ContactSurveysFilterSelect
-              options={[
-                { label: "Tous", value: "tous" },
-                { label: "Principal", value: "primary" },
-                { label: "Secondaire", value: "secondary" },
-              ]}
-              defaultValue={"tous"}
-              label={"Rôle du contact"}
-              name={"role"}
-              onFilterChange={e => setRole(e.target.value)}
-            />
+          <TextField
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon fontSize="small" />
+                </InputAdornment>
+              ),
+            }}
+            name="name"
+            id="name"
+            label="Rechercher dans le tableau"
+            placeholder="Saisissez votre recherche"
+            variant="outlined"
+            size="small"
+            onChange={e => setSearch(e.target.value)}
+          />
 
-            <TextField
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <SearchIcon fontSize="small" />
-                  </InputAdornment>
-                ),
-              }}
-              name="name"
-              id="name"
-              label="Rechercher dans le tableau"
-              placeholder="Saisissez votre recherche"
-              variant="outlined"
-              size="small"
-              onChange={e => setSearch(e.target.value)}
-            />
-          </Row>
           <ToggleButtonGroup value={isFilteredOpened} exclusive onChange={(_, v) => toggle(v)}>
             <ToggleButton value={false} aria-label="left aligned">
               Mes contacts
@@ -117,7 +100,7 @@ export const SurveyUnitContacts = ({ surveyUnit }: Props) => {
       </Stack>
 
       {!isLoading && filteredContacts.length === 0 && (
-        <Row justifyContent={"space-around"}>
+        <Row justifyContent={"space-around"} height={"100%"}>
           <Typography variant="titleMedium">Aucun résultat</Typography>
         </Row>
       )}
@@ -146,12 +129,12 @@ export const SurveyUnitContacts = ({ surveyUnit }: Props) => {
 
 const SurveyUnitContactCard = ({ contact }: { contact: APISchemas["SurveyUnitContact"] }) => {
   const listSourcesId =
-    contact.listSourcesId !== undefined && contact.listSourcesId?.length > 12
-      ? `${contact.listSourcesId?.slice(0, 12).join(", ")}...`
+    contact.listSourcesId !== undefined && contact.listSourcesId?.length > 6
+      ? `${contact.listSourcesId?.slice(0, 6).join(", ")}...`
       : contact.listSourcesId?.join(", ");
 
   return (
-    <Card elevation={2}>
+    <Card elevation={2} sx={{ height: "100%" }}>
       <CardActionArea component={Link} to={`/contacts/${contact.identifier}`}>
         <Box px={3} py={2}>
           <Typography align="right" variant="titleLarge" color="text.tertiary" gutterBottom>
@@ -169,13 +152,6 @@ const SurveyUnitContactCard = ({ contact }: { contact: APISchemas["SurveyUnitCon
             <Typography color={"text.tertiary"} variant="titleSmall">
               {listSourcesId ?? ""}
             </Typography>
-            <Row gap={1}>
-              <ContactPageOutlinedIcon />
-              <Typography variant="titleSmall" fontWeight={700} color="black">
-                {/* Contact {contact.role === "primary" ? "principal" : "secondaire"} TODO */}
-                TODO Role
-              </Typography>
-            </Row>
           </Stack>
         </Box>
       </CardActionArea>
@@ -196,16 +172,8 @@ export const ContactCardTitle = ({ firstName, lastName }: { firstName?: string;
 
 function filterContacts(
   contacts: Array<APISchemas["SurveyUnitContact"]>,
-  { search }: { search?: string; role?: string },
+  { search }: { search?: string },
 ) {
-  // TODO: wait api role data
-  // if (role !== "tous") {
-  //   contacts =
-  //     role === "primary"
-  //       ? contacts.filter(c => c.main === true)
-  //       : contacts.filter(c => c.main === false);
-  // }
-
   if (search) {
     contacts = contacts.filter(
       item =>
diff --git a/src/ui/SurveyUnit/SurveyUnitSurveys.tsx b/src/ui/SurveyUnit/SurveyUnitSurveys.tsx
index 492eb2c..3751281 100644
--- a/src/ui/SurveyUnit/SurveyUnitSurveys.tsx
+++ b/src/ui/SurveyUnit/SurveyUnitSurveys.tsx
@@ -16,7 +16,8 @@ type Props = {
 export const SurveyUnitSurveys = ({ surveyUnit }: Props) => {
   const [isFilteredOpened, toggle] = useToggle(false);
   const [state, setState] = useState("");
-  const [search, setSearch] = useDebouncedState("", 500);
+  const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", 500);
+  const [search, setSearch] = useState("");
 
   const { data: surveys, isLoading } = useFetchQuery("/api/survey-units/{id}/partitionings", {
     urlParams: {
@@ -27,12 +28,20 @@ export const SurveyUnitSurveys = ({ surveyUnit }: Props) => {
     },
   });
 
-  const filteredSurveys = filterSurveys(surveys ?? [], { search, state });
+  const filteredSurveys = filterSurveys(surveys ?? [], { search: debouncedSearch, state });
 
   return (
     <Card sx={{ mx: 2, px: 6, py: 3 }} elevation={2}>
       <Row justifyContent={"space-between"} py={4}>
-        <Filters onSearch={e => setSearch(e.target.value)} onSelect={e => setState(e.target.value)} />
+        <Filters
+          searchValue={search}
+          stateValue={state}
+          onSearch={e => {
+            setSearch(e.target.value);
+            setDebouncedSearch(e.target.value);
+          }}
+          onSelect={e => setState(e.target.value)}
+        />
 
         <ToggleButtonGroup value={isFilteredOpened} exclusive onChange={(_, v) => toggle(v)}>
           <ToggleButton value={false} aria-label="left aligned">
@@ -52,7 +61,7 @@ function filterSurveys(
   surveys: Array<APISchemas["SurveyUnitPartitioning"]>,
   { search, state }: { search?: string; state?: string },
 ) {
-  if (state && state !== "all") {
+  if (state && state !== "none") {
     surveys = surveys.filter(s => s.lastEvent === state);
   }