diff --git a/front/app/components/HomePageHeader.tsx b/front/app/components/HomePageHeader.tsx
index aa7bfcac..e08bf1db 100644
--- a/front/app/components/HomePageHeader.tsx
+++ b/front/app/components/HomePageHeader.tsx
@@ -14,7 +14,7 @@ export default function HomePageHeader() {
 
   return (
     <main className='global-border'>
-      <div className='minh-[460px] relative bg-none object-cover'>
+      <div className='minh-[460px] relative bg-none object-cover px-4 md:px-0'>
         <Image
           src='/eclaireur/eyes_left.svg'
           alt='Yeux'
@@ -58,9 +58,9 @@ export default function HomePageHeader() {
             <h2 className='mb-6 w-3/4 text-center text-lg font-normal'>
               Accédez aux données de dépenses publiques de votre commune, département ou région.
             </h2>
-            <div className='mx-auto flex min-w-[400] justify-center'>
+            <div className='mx-auto flex w-full justify-center md:min-w-[400]'>
               <SearchBar
-                className='relative w-3/4 md:w-96 lg:w-[32rem]'
+                className='relative w-full md:w-96 lg:w-[32rem]'
                 onSelect={({ siren }) => navigateToCommunityPage(siren)}
               />
             </div>
diff --git a/front/app/globals.css b/front/app/globals.css
index 5585817d..99dc8f46 100644
--- a/front/app/globals.css
+++ b/front/app/globals.css
@@ -8,7 +8,7 @@ input[type='search']::-webkit-search-cancel-button {
 
 @layer components {
   .global-margin {
-    @apply container mx-auto max-w-[1200px] overflow-x-hidden sm:overflow-x-visible;
+    @apply container mx-auto max-w-[1200px] overflow-x-visible;
   }
   .section-format {
     @apply mx-4 my-4 max-w-full rounded-3xl border border-[#737373] p-4 md:mx-8 md:my-8 md:p-8 xl:mx-auto xl:my-16 xl:max-w-[1128px];
diff --git a/front/components/SearchBar/SearchBar.tsx b/front/components/SearchBar/SearchBar.tsx
index 647be490..b3e4eac2 100644
--- a/front/components/SearchBar/SearchBar.tsx
+++ b/front/components/SearchBar/SearchBar.tsx
@@ -33,17 +33,23 @@ export default function SearchBar({
     setTimeout(() => setIsFocused(false), 200);
   }
 
-  function resetSearchBar() {
-    setQuery('');
-    setIsFocused(false);
+  // Commenting cos never used
+  // function resetSearchBar() {
+  //   setQuery('');
+  //   setIsFocused(false);
+  //   if (inputRef.current) {
+  //     inputRef.current.value = '';
+  //   }
+  // }
+
+  function handleSelect(picked: Pick<Community, 'nom' | 'siren' | 'type' | 'code_postal'>) {
+    setQuery(picked.nom);
     if (inputRef.current) {
-      inputRef.current.value = '';
+      inputRef.current.value = picked.nom;
     }
-  }
+    setIsFocused(false);
 
-  function handleSelect(picked: Pick<Community, 'nom' | 'siren' | 'type' | 'code_postal'>) {
     onSelect(picked);
-    resetSearchBar();
   }
 
   // Détection de clic extérieur
@@ -69,7 +75,7 @@ export default function SearchBar({
   return (
     <div className={className}>
       <div className='relative' ref={searchBarRef}>
-        <div className='flex items-center'>
+        <div className='flex items-center overflow-visible'>
           <Input
             ref={inputRef}
             type='search'
@@ -81,7 +87,10 @@ export default function SearchBar({
               if (e.relatedTarget === null) handleOnBlur();
             }}
           />
-          <Search className='absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary' />
+          <div className='pointer-events-none absolute right-14 top-1 h-12 w-10 bg-gradient-to-l from-white to-transparent' />
+          <div className='ratio-square absolute right-0 top-0 flex h-14 w-14 items-center justify-center rounded-br-xl bg-primary'>
+            <Search className='absolute h-4 w-4 text-white' />
+          </div>
         </div>
         {showSuggestions && <Suggestions query={query} onSelect={handleSelect} />}
       </div>
diff --git a/front/components/SearchBar/SearchSuggestions.tsx b/front/components/SearchBar/SearchSuggestions.tsx
index cc88695d..67d56de9 100644
--- a/front/components/SearchBar/SearchSuggestions.tsx
+++ b/front/components/SearchBar/SearchSuggestions.tsx
@@ -13,7 +13,7 @@ export default function Suggestions({ query, onSelect }: SuggestionsProps) {
   const { data: suggestions, isPending, isError } = useCommunitiesBySearch(query);
 
   return (
-    <div className='absolute z-10 mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md'>
+    <div className='absolute left-0 right-0 z-50 mt-1 max-h-[60vh] overflow-auto overscroll-contain rounded-md border bg-popover text-popover-foreground shadow-lg'>
       <Command>
         <CommandList>
           <CommandEmpty>