diff --git a/assets/css/hero.css b/assets/css/hero.css
index 309e72e..dcbedc1 100644
--- a/assets/css/hero.css
+++ b/assets/css/hero.css
@@ -134,6 +134,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  padding-top: 2vw;
+  padding-bottom: 2vw;
+
 }
 
 .bloc-image img {
@@ -164,7 +167,6 @@
 
 .hero-button-end a:hover {
   background-color: linear-gradient(to bottom right, #F9B208, #E72E77);
-  color: white;
 }
 
 /* Responsive layout for larger screens */
diff --git a/partials/components/hero.hbs b/partials/components/hero.hbs
index 958eac4..612e3c1 100644
--- a/partials/components/hero.hbs
+++ b/partials/components/hero.hbs
@@ -42,7 +42,7 @@
                 </ul>
             </div>
             <div class="bloc-image">
-                <img src="assets/screenshots/screenshot_1.png" alt="Preferences Screen">
+                <img src="assets/screenshots/screenshot_3.png" alt="Preferences Screen">
             </div>
         </div>
 
@@ -70,13 +70,13 @@
                 </ul>
             </div>
             <div class="bloc-image">
-                <img src="assets/screenshots/screenshot_1.png" alt="Itinerary Screen">
+                <img src="assets/screenshots/screenshot_2.png" alt="Itinerary Screen">
             </div>
         </div>
 
         <div class="hero-bloc">
             <div class="bloc-image">
-                <img src="assets/screenshots/screenshot_1.png" alt="App Mockup">
+                <img src="assets/screenshots/screenshot_2.png" alt="App Mockup">
             </div>
             <div class="bloc-text">
                 <h3>Real-time Flexibility</h3>
@@ -97,7 +97,7 @@
                 </ul>
             </div>
             <div class="bloc-image">
-                <img src="assets/screenshots/screenshot_1.png" alt="Toilet Finder">
+                <img src="assets/screenshots/screenshot_2.png" alt="Toilet Finder">
             </div>
         </div>