diff --git a/configs/ecospheres/config.yaml b/configs/ecospheres/config.yaml
index 33720457c..18b3a49dc 100644
--- a/configs/ecospheres/config.yaml
+++ b/configs/ecospheres/config.yaml
@@ -29,7 +29,7 @@ website:
   # leave empty if not pertinent
   logo_operator:
   homepage:
-    title: 'La plateforme des données de la transition écologique'
+    title:
     subtitle:
     sections:
       - title:
diff --git a/src/components/header/HeaderSearch.vue b/src/components/SearchComponent.vue
similarity index 82%
rename from src/components/header/HeaderSearch.vue
rename to src/components/SearchComponent.vue
index 8cefdfff2..d67179ee2 100644
--- a/src/components/header/HeaderSearch.vue
+++ b/src/components/SearchComponent.vue
@@ -14,12 +14,19 @@ defineProps({
   searchLabel: {
     type: String,
     required: true
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  id: {
+    type: String,
+    default: 'select-search'
   }
 })
 
 const emits = defineEmits(['search'])
 
-const placeholder = config.website.header_search.placeholder
 const dropdown = config.website.header_search.dropdown
 const query = ref('')
 const selectedMultiSearch = ref()
@@ -58,18 +65,18 @@ const dropdownLabel = (text: string) => {
   />
 
   <div v-else>
-    <label id="search-label" for="select-search" class="fr-sr-only"
-      >Rechercher. Saisissez un mot clé puis choisissez une des options situés
+    <label :id="id" for="select-search" class="fr-sr-only">
+      Rechercher. Saisissez un mot clé puis choisissez une des options situés
       après le champ pour lancer la recherche dans la rubrique souhaitée</label
     >
     <Multiselect
-      id="select-search"
+      :id="id"
       v-model="selectedMultiSearch"
       class="select-search"
       :options="dropdown"
       label="text"
       track-by="route"
-      placeholder=""
+      :placeholder="placeholder"
       select-label=""
       deselect-label=""
       aria-labelledby="search-label"
@@ -93,7 +100,7 @@ const dropdownLabel = (text: string) => {
         <span class="fr-icon-search-line search-icon"></span>
       </template>
       <template #placeholder>
-        <span aria-hidden="true" class="visible-label">Rechercher</span>
+        <span aria-hidden="true" class="visible-label">{{ placeholder }}</span>
       </template>
     </Multiselect>
   </div>
@@ -115,6 +122,19 @@ const dropdownLabel = (text: string) => {
   .visible-label {
     margin-left: var(--icon-width);
   }
+  .multiselect__placeholder {
+    margin-inline-start: var(--icon-width);
+    font-style: italic;
+    color: var(--text-mention-grey);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    overflow: hidden;
+  }
+  ::placeholder {
+    font-style: italic;
+    color: var(--text-mention-grey);
+  }
 }
 :deep(.multiselect__tags) {
   border: 0;
diff --git a/src/components/header/HeaderComponent.vue b/src/components/header/HeaderComponent.vue
index c1c5e1994..28ade0c56 100644
--- a/src/components/header/HeaderComponent.vue
+++ b/src/components/header/HeaderComponent.vue
@@ -9,8 +9,8 @@ import {
   type StyleValue
 } from 'vue'
 
+import SearchComponent from '../SearchComponent.vue'
 import type { DsfrHeaderMenuLinkProps } from './DsfrHeaderMenuLink.vue'
-import HeaderSearch from './HeaderSearch.vue'
 
 type DsfrHeaderProps = {
   serviceTitle?: string
@@ -192,7 +192,7 @@ const badgeCss = 'fr-badge fr-badge--sm fr-badge--' + props.badgeStyle
               />
             </div>
             <div v-if="showSearch" class="fr-header__search fr-modal">
-              <HeaderSearch :search-label="searchLabel" />
+              <SearchComponent :search-label="searchLabel" />
             </div>
           </div>
         </div>
@@ -217,7 +217,7 @@ const badgeCss = 'fr-badge fr-badge--sm fr-badge--' + props.badgeStyle
               >
                 Fermer
               </button>
-              <HeaderSearch
+              <SearchComponent
                 v-if="searchModalOpened"
                 :search-label="searchLabel"
                 @search="hideModal(false)"
diff --git a/src/custom/ecospheres/views/HomeView.vue b/src/custom/ecospheres/views/HomeView.vue
index f0bfd98fd..cc8ce1b6c 100644
--- a/src/custom/ecospheres/views/HomeView.vue
+++ b/src/custom/ecospheres/views/HomeView.vue
@@ -4,6 +4,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import HomeThemes from '@/components/HomeThemes.vue'
+import SearchComponent from '@/components/SearchComponent.vue'
 import config from '@/config'
 
 import contributeSvg from '../assets/contribuer.svg'
@@ -16,7 +17,6 @@ const doSearch = () => {
   router.push({ name: 'datasets', query: { q: query.value } })
 }
 
-const homepageTitle = config.website.homepage.title
 const searchConfig = config.website.search_bar
 
 useHead({
@@ -34,29 +34,22 @@ useHead({
 
 <template>
   <div class="datagouv-components">
-    <section class="fr-container fr-py-12v">
-      <div class="fr-grid-row fr-grid-row--gutters">
-        <div class="fr-col">
-          <h1>{{ homepageTitle }}</h1>
-          <p>
-            <i>ecologie</i><strong>.data.gouv</strong><i>.fr</i> référence et
-            centralise les données de la transition écologique.
-          </p>
-          <p>
-            Le catalogue rassemble les données utiles au déploiement des
-            politiques publiques portées par le Ministère de la Transition
-            écologique et de la Cohésion des territoires.
-          </p>
-        </div>
-        <div class="fr-col-md-6 fr-hidden fr-unhidden-md fr-grid-row--center">
-          <img
-            src="../assets/home-global-schema.svg"
-            alt=""
-            class="illustration"
-            width="441"
-            height="290"
-          />
-        </div>
+    <section class="fr-container fr-pt-12v">
+      <h1 class="main-title-v2">
+        Le&nbsp;catalogue des&nbsp;données
+        <br />
+        pour la <span class="highlight">transition écologique</span>
+      </h1>
+      <div class="big-search">
+        <SearchComponent
+          id="big-select-search"
+          placeholder="Rechercher"
+          search-label="Rechercher"
+        />
+        <p for="select-search">
+          Exemple : "Itinéraires fraîcheur" dans les bouquets ou "Horaires des
+          TGV" dans les données
+        </p>
       </div>
     </section>
     <section class="fr-container">
@@ -319,4 +312,21 @@ useHead({
     height: 120%;
   }
 }
+
+.main-title-v2 {
+  text-align: center;
+  font-size: clamp(1.375rem, 0.4698rem + 4.5259vw, 4rem);
+
+  @media (max-width: 768px) {
+    text-align: inherit;
+  }
+}
+.main-title-v2 :deep(.highlight) {
+  color: #000091;
+}
+
+.big-search {
+  max-width: 792px;
+  margin: 0 auto;
+}
 </style>