diff --git a/src/components/Layout/HomeHeader.tsx b/src/components/Layout/HomeHeader.tsx
index 8340973..81f0ff0 100644
--- a/src/components/Layout/HomeHeader.tsx
+++ b/src/components/Layout/HomeHeader.tsx
@@ -1,15 +1,15 @@
-import { Fragment } from 'react'
-import { Popover, Transition } from '@headlessui/react'
-import { MenuIcon, XIcon } from '@heroicons/react/outline'
-import { SearchIcon } from '@heroicons/react/solid'
-import { navigationEntries } from './Navbar'
-import { Link } from '../Links'
-import { PrimaryButton } from '../Buttons'
-import { useSearchFichesForm } from '../../utils/hooks'
-import { LogoFull, LogoIcon } from '../Logos'
+import { Fragment } from 'react';
+import { Popover, Transition } from '@headlessui/react';
+import { MenuIcon, XIcon } from '@heroicons/react/outline';
+import { SearchIcon } from '@heroicons/react/solid';
+import { navigationEntries } from './Navbar';
+import { Link } from '../Links';
+import { PrimaryButton } from '../Buttons';
+import { useSearchFichesForm } from '../../utils/hooks';
+import { LogoFull, LogoIcon } from '../Logos';
 
 const SearchForm = () => {
-  const { handleSubmit, onChange, value } = useSearchFichesForm()
+  const { handleSubmit, onChange, value } = useSearchFichesForm();
 
   return (
     <form onSubmit={handleSubmit} className="mt-3 sm:flex lg:w-3/4">
@@ -33,15 +33,15 @@ const SearchForm = () => {
         <PrimaryButton type="submit">Rechercher</PrimaryButton>
       </div>
     </form>
-  )
-}
+  );
+};
 
 export const HomeHeader = () => (
   <div className="relative bg-white overflow-hidden">
     <div className="max-w-7xl mx-auto">
       <Popover>
         <div className="bg-white flex justify-between lg:px-8 pt-6 px-4 relative sm:px-6 z-30">
-          <div>
+          <div className="w-full h-auto">
             <nav
               className="relative flex items-center justify-between sm:h-10 lg:justify-start"
               aria-label="Global"
@@ -52,9 +52,7 @@ export const HomeHeader = () => (
                     <LogoFull className="text-blue-default w-14" />
                   </Link>
                   <div className="-mr-2 flex items-center md:hidden">
-                    <Popover.Button
-                      className="bg-white rounded-md p-2 inline-flex items-center justify-center text-blue-default hover:text-gray-default hover:bg-gray-light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-default"
-                    >
+                    <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-blue-default hover:text-gray-default hover:bg-gray-light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-default">
                       <span className="sr-only">Menu principal</span>
                       <MenuIcon className="h-6 w-6" aria-hidden="true" />
                     </Popover.Button>
@@ -74,10 +72,18 @@ export const HomeHeader = () => (
               </div>
             </nav>
           </div>
-          <div className="flex justify-end flex-wrap gap-4 hidden lg:block">
+          <div className="justify-end flex-wrap gap-4 hidden lg:block">
             <p className="flex gap-8 items-center flex-nowrap">
-              <img className="h-10" src="/partenaires/logo-ars.png" alt="Logo ARS" />
-              <img className="h-12" src="/partenaires/logo-gouv.png" alt="Logo gouvernement" />
+              <img
+                className="h-10"
+                src="/partenaires/logo-ars.png"
+                alt="Logo ARS"
+              />
+              <img
+                className="h-12"
+                src="/partenaires/logo-gouv.png"
+                alt="Logo gouvernement"
+              />
             </p>
           </div>
         </div>
@@ -95,17 +101,13 @@ export const HomeHeader = () => (
             focus
             className="absolute top-0 inset-x-0 p-2 transition  origin-top-right md:hidden z-10"
           >
-            <div
-              className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden"
-            >
+            <div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
               <div className="px-5 pt-4 flex items-center justify-between">
                 <div>
                   <LogoFull className="text-blue-default w-14" />
                 </div>
                 <div className="-mr-2">
-                  <Popover.Button
-                    className="bg-white rounded-md p-2 inline-flex items-center justify-center text-blue-default hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-default"
-                  >
+                  <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-blue-default hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-default">
                     <span className="sr-only">Close main menu</span>
                     <XIcon className="h-6 w-6" aria-hidden="true" />
                   </Popover.Button>
@@ -131,14 +133,18 @@ export const HomeHeader = () => (
         <main className="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
           <div className="sm:text-center lg:text-left">
             <h1 className="text-4xl tracking-tight font-extrabold text-blue-default sm:text-5xl md:text-6xl">
-              <span className="block">Ressources <br />Santé et Précarité</span>{' '}
-              <span className="block text-4xl text-green-default mt-4 ">Auvergne Rhône Alpes</span>
+              <span className="block">
+                Ressources <br />
+                Santé et Précarité
+              </span>{' '}
+              <span className="block text-4xl text-green-default mt-4 ">
+                Auvergne Rhône Alpes
+              </span>
             </h1>
-            <p
-              className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"
-            >
-              Ce site se veut être un outil pratique à destination des professionnels de santé.
-              Par un système de mots clés, vous serez orientés vers des fiches thématiques.
+            <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
+              Ce site se veut être un outil pratique à destination des
+              professionnels de santé. Par un système de mots clés, vous serez
+              orientés vers des fiches thématiques.
             </p>
             <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
               <SearchForm />
@@ -147,8 +153,16 @@ export const HomeHeader = () => (
           <div className="relative lg:right-0 px-1 pt-10 lg:hidden md:block">
             <div className="flex justify-center flex-wrap gap-4">
               <p className="flex gap-8 items-center flex-wrap">
-                <img className="h-10" src="/partenaires/logo-ars.png" alt="Logo ARS" />
-                <img className="h-12" src="/partenaires/logo-gouv.png" alt="Logo gouvernement" />
+                <img
+                  className="h-10"
+                  src="/partenaires/logo-ars.png"
+                  alt="Logo ARS"
+                />
+                <img
+                  className="h-12"
+                  src="/partenaires/logo-gouv.png"
+                  alt="Logo gouvernement"
+                />
               </p>
             </div>
           </div>
@@ -159,4 +173,4 @@ export const HomeHeader = () => (
       <LogoIcon className="h-full text-green-default" />
     </div>
   </div>
-)
+);
diff --git a/src/components/Search/SearchFacet.tsx b/src/components/Search/SearchFacet.tsx
index 9af70ca..1385efb 100644
--- a/src/components/Search/SearchFacet.tsx
+++ b/src/components/Search/SearchFacet.tsx
@@ -1,31 +1,28 @@
-import { useRefinementList } from 'react-instantsearch-hooks'
-import { Fragment } from 'react'
-import { Listbox, Transition } from '@headlessui/react'
-import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'
-import classNames from 'classnames'
-import type { RefinementListItem } from 'instantsearch.js/es/connectors/refinement-list/connectRefinementList'
-import { ClassNameProp } from '../../types/react'
+import { Listbox, Transition } from '@headlessui/react';
+import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
+import classNames from 'classnames';
+import type { RefinementListItem } from 'instantsearch.js/es/connectors/refinement-list/connectRefinementList';
+import { Fragment } from 'react';
+import { useRefinementList } from 'react-instantsearch-hooks';
+import { ClassNameProp } from '../../types/react';
 
 type SearchFacetProps = {
-  attribute: string,
-  label: string,
-  getItemLabel?: (item: RefinementListItem) => string,
-  getItemClassName?: (item: RefinementListItem) => string,
+  attribute: string;
+  label: string;
+  getItemLabel?: (item: RefinementListItem) => string;
+  getItemClassName?: (item: RefinementListItem) => string;
 } & ClassNameProp;
 
 export const SearchFacet = ({
   attribute,
   className,
   label,
-  getItemLabel = item => item.label,
+  getItemLabel = (item) => item.label,
   getItemClassName = () => 'bg-gray-light text-blue-default',
 }: SearchFacetProps) => {
-  const {
-    items,
-    refine,
-  } = useRefinementList({ attribute, limit: 1000 })
+  const { items, refine } = useRefinementList({ attribute, limit: 1000 });
 
-  const refinedItems = items.filter(item => item.isRefined)
+  const refinedItems = items.filter((item) => item.isRefined);
   return (
     <Listbox value="" onChange={refine}>
       {({ open }) => (
@@ -33,22 +30,28 @@ export const SearchFacet = ({
           <Listbox.Label className="sr-only">{label}</Listbox.Label>
           <div className="mt-1 relative">
             <Listbox.Button className={className}>
-              <span className="w-full inline-flex truncate gap-2">
-                {refinedItems.length
-                  ? refinedItems.map(item => (
+              <span className="w-full inline-flex flex-wrap truncate gap-2">
+                {refinedItems.length ? (
+                  refinedItems.map((item) => (
                     <span
                       key={item.value}
                       className={classNames(
                         'inline-flex items-center px-2 py-0.5 rounded text-xs truncate',
-                        getItemClassName(item),
+                        getItemClassName(item)
                       )}
                     >
                       {getItemLabel(item)}
                     </span>
-                  )) : <span className="text-gray-default text-sm">{label}</span>}
+                  ))
+                ) : (
+                  <span className="text-gray-default text-sm">{label}</span>
+                )}
               </span>
               <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                <SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                <SelectorIcon
+                  className="h-5 w-5 text-gray-400"
+                  aria-hidden="true"
+                />
               </span>
             </Listbox.Button>
 
@@ -63,23 +66,32 @@ export const SearchFacet = ({
                 {items.map((item) => (
                   <Listbox.Option
                     key={item.value}
-                    className={({ active }) => classNames(
-                      active
-                        ? getItemClassName(item)
-                        : 'text-gray-900',
-                      'cursor-default select-none relative py-2 pl-3 pr-9',
-                    )}
+                    className={({ active }) =>
+                      classNames(
+                        active ? getItemClassName(item) : 'text-gray-900',
+                        'cursor-default select-none relative py-2 pl-3 pr-9'
+                      )
+                    }
                     value={item.value}
                   >
-                    {({
-                      active,
-                    }) => (
+                    {({ active }) => (
                       <>
                         <div className="flex items-baseline">
-                          <span title={getItemLabel(item)} className={classNames(item.isRefined ? 'font-semibold' : 'font-normal', 'truncate')}>
+                          <span
+                            title={getItemLabel(item)}
+                            className={classNames(
+                              item.isRefined ? 'font-semibold' : 'font-normal',
+                              'truncate'
+                            )}
+                          >
                             {getItemLabel(item)}
                           </span>
-                          <span className={classNames(active ? getItemClassName(item) : 'text-gray-400', 'text-xs italic ml-2')}>
+                          <span
+                            className={classNames(
+                              active ? getItemClassName(item) : 'text-gray-400',
+                              'text-xs italic ml-2'
+                            )}
+                          >
                             ({item.count})
                           </span>
                         </div>
@@ -88,7 +100,7 @@ export const SearchFacet = ({
                           <span
                             className={classNames(
                               active ? 'text-white' : 'text-green-default',
-                              'absolute inset-y-0 right-0 flex items-center pr-4',
+                              'absolute inset-y-0 right-0 flex items-center pr-4'
                             )}
                           >
                             <CheckIcon className="h-5 w-5" aria-hidden="true" />
@@ -104,5 +116,5 @@ export const SearchFacet = ({
         </>
       )}
     </Listbox>
-  )
-}
+  );
+};
diff --git a/src/pages/annuaire/index.tsx b/src/pages/annuaire/index.tsx
index bd2cf73..b28c6e1 100644
--- a/src/pages/annuaire/index.tsx
+++ b/src/pages/annuaire/index.tsx
@@ -1,28 +1,31 @@
-import { NextSeo } from 'next-seo'
-import { SearchIcon } from '@heroicons/react/solid'
-import { GetStaticProps } from 'next'
-import { Configure } from 'react-instantsearch-hooks'
-import dynamic from 'next/dynamic'
-import { Layout } from '../../components/Layout/Layout'
-import { SearchContext } from '../../components/Search/SearchContext'
-import { IndicesNames } from '../../services/algolia.browser'
-import { SearchInput } from '../../components/Search/SearchInput'
-import { StructuresList } from '../../components/Map/StructuresList'
-import { SearchResults } from '../../components/Search/SearchResults'
-import { Structure } from '../../types/models'
-import { isPreviewForced } from '../../services/contentful'
-import { SearchFacet } from '../../components/Search/SearchFacet'
-import { StructureType, types } from '../../data/structures_types'
-import { FloatingButtons } from '../../components/FloatingButtons'
+import { SearchIcon } from '@heroicons/react/solid';
+import { GetStaticProps } from 'next';
+import { NextSeo } from 'next-seo';
+import dynamic from 'next/dynamic';
+import { Configure } from 'react-instantsearch-hooks';
+import { FloatingButtons } from '../../components/FloatingButtons';
+import { Layout } from '../../components/Layout/Layout';
+import { StructuresList } from '../../components/Map/StructuresList';
+import { SearchContext } from '../../components/Search/SearchContext';
+import { SearchFacet } from '../../components/Search/SearchFacet';
+import { SearchInput } from '../../components/Search/SearchInput';
+import { SearchResults } from '../../components/Search/SearchResults';
+import { StructureType, types } from '../../data/structures_types';
+import { IndicesNames } from '../../services/algolia.browser';
+import { isPreviewForced } from '../../services/contentful';
+import { Structure } from '../../types/models';
 
 const GeoSearch = dynamic<Record<string, never>>(
-  () => import('../../components/Search/GeoSearch').then(module => module.GeoSearch),
+  () =>
+    import('../../components/Search/GeoSearch').then(
+      (module) => module.GeoSearch
+    ),
   {
     ssr: false,
-  },
-)
+  }
+);
 
-const ALGOLIA_MAX_HITS_PER_PAGE = 1000
+const ALGOLIA_MAX_HITS_PER_PAGE = 1000;
 
 const SearchField = () => (
   <div className="mt-1 relative rounded-md shadow-sm w-full">
@@ -30,11 +33,11 @@ const SearchField = () => (
       <SearchIcon className="h-5 w-5 text-gray-400 " aria-hidden="true" />
     </div>
     <SearchInput
-      className="w-full border border-gray-default placeholder-gray-default rounded-md shadow-sm pl-3 pl-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-default focus:border-blue-default text-sm"
+      className="w-full h-full border border-gray-default placeholder-gray-default rounded-md shadow-sm pl-3 pl-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-default focus:border-blue-default text-sm"
       label="Chercher dans la zone"
     />
   </div>
-)
+);
 
 export default function Annuaire() {
   return (
@@ -44,27 +47,38 @@ export default function Annuaire() {
         <div className="relative max-w-7xl mx-auto">
           <FloatingButtons className="absolute -top-5" />
           <div className="text-center">
-            <h1 className="text-3xl font-extrabold tracking-tight text-blue-default sm:text-4xl">Annuaire</h1>
+            <h1 className="text-3xl font-extrabold tracking-tight text-blue-default sm:text-4xl">
+              Annuaire
+            </h1>
           </div>
           <div className="flex flex-col bg-white drop-shadow-md print:drop-shadow-none rounded-md p-5 m-auto my-5">
-
             <SearchContext indexName={IndicesNames.structures}>
-              <Configure aroundLatLngViaIP hitsPerPage={ALGOLIA_MAX_HITS_PER_PAGE} />
+              <Configure
+                aroundLatLngViaIP
+                hitsPerPage={ALGOLIA_MAX_HITS_PER_PAGE}
+              />
               <div className="mb-4 grid sm:grid-cols-3 sm:gap-4 gap-2 print:hidden">
                 <div className="sm:col-span-2">
                   <SearchFacet
                     attribute="type"
                     label="Filtrer par dispositifs dans la zone"
-                    getItemLabel={item => types[item.value as StructureType].nom}
-                    getItemClassName={item => types[item.value as StructureType].colorClassname}
-                    className="relative w-full bg-white border border-gray-default rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-default focus:border-blue-default sm:text-sm"
+                    getItemLabel={(item) =>
+                      types[item.value as StructureType].nom
+                    }
+                    getItemClassName={(item) =>
+                      types[item.value as StructureType].colorClassname
+                    }
+                    className="relative w-full bg-white border border-gray-default rounded-md shadow-sm pl-3 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-default focus:border-blue-default sm:text-sm md:pr-10"
                   />
                 </div>
                 <SearchField />
               </div>
               <SearchResults
                 render={(hits: Structure[]) => (
-                  <StructuresList structures={hits} mapChildren={<GeoSearch />} />
+                  <StructuresList
+                    structures={hits}
+                    mapChildren={<GeoSearch />}
+                  />
                 )}
               />
             </SearchContext>
@@ -72,13 +86,11 @@ export default function Annuaire() {
         </div>
       </div>
     </Layout>
-  )
+  );
 }
 
-export const getStaticProps: GetStaticProps = async ({
-  preview,
-}) => ({
+export const getStaticProps: GetStaticProps = async ({ preview }) => ({
   props: {
     preview: preview || isPreviewForced,
   },
-})
+});