diff --git a/assets/css/hero.css b/assets/css/hero.css
index 836568c..8b68e1b 100644
--- a/assets/css/hero.css
+++ b/assets/css/hero.css
@@ -15,6 +15,7 @@
   align-items: center;
   text-align: center;
   width: 100%;
+  height: 30vw;
   /* max-width: 1200px; */
   gap: 4rem; /* Space between items */
   margin-bottom: 4rem;
@@ -79,60 +80,94 @@
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
+.hero-catch-phrase {
+  text-align: center;
+  font-size: 2.5rem;
+  color: #333;
+  margin: 40px 0;
+}
+
 .hero-second {
   display: flex;
   flex-direction: column; /* Stack elements vertically by default */
   align-items: center;
   text-align: center;
-  width: 80%;
+  width: 70%;
   gap: 4rem; /* Space between items */
   margin-bottom: 4rem;
 }
 
-/* How It Works Section */
-#how-it-works {
-  /* background-color: #f8f9fa; */
-  padding: 30px 0;
-}
 
-#how-it-works h2 {
-  margin-bottom: 35px;
-}
-
-.steps {
+.hero-bloc {
   display: flex;
-  flex-direction: column;
-  gap: 120px;
-  text-align: center;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: #f5f5f5;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.step h3 {
-  font-size: 1.6rem;
-  margin-bottom: 10px;
+/* Styling for bloc-text */
+.bloc-text {
+  flex: 1;
+  padding: 20px;
+  font-size: 1.2rem;
+  color: #333;
 }
 
-/* Features Section */
-#features {
-  padding: 30px 0;
+.bloc-text h3 {
+  font-size: 1.8rem;
+  color: #E72E77;
+  margin-bottom: 1rem;
 }
 
-#features h2 {
-  margin-bottom: 35px;
+.bloc-text ul {
+  list-style-type: disc;
+  padding-left: 20px;
 }
 
-.features-list {
+.bloc-text ul li {
+  margin-bottom: 0.5rem;
+}
+
+/* Styling for bloc-image */
+.bloc-image {
+  flex: 1;
+  max-width: 400px;
+  padding: 20px;
   display: flex;
-  flex-direction: column;
-  gap: 50px;
+  justify-content: center;
+  align-items: center;
 }
 
-.feature {
-  text-align: center;
+.bloc-image img {
+  max-width: 100%;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.feature h3 {
+/* Button at the end of the hero-second */
+.hero-button-end {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+.hero-button-end a {
+  background-color: #E72E77;
+  color: white;
+  padding: 20px 40px;
   font-size: 1.6rem;
-  margin-bottom: 10px;
+  font-weight: bold;
+  border-radius: 8px;
+  text-decoration: none;
+  transition: background-color 0.3s;
+}
+
+.hero-button-end a:hover {
+  background-color: #F9B208;
+  color: #333;
 }
 
 /* Responsive layout for larger screens */
@@ -188,18 +223,4 @@
     height: 100%;
     object-fit: cover;
   }
-
-  .steps {
-    flex-direction: row;
-    justify-content: space-around;
-  }
-
-  .features-list {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .feature {
-    flex-basis: 45%;
-  }
 }
\ No newline at end of file
diff --git a/partials/components/hero.hbs b/partials/components/hero.hbs
index 6d1db4e..958eac4 100644
--- a/partials/components/hero.hbs
+++ b/partials/components/hero.hbs
@@ -1,6 +1,7 @@
 <link rel="stylesheet" href="{{asset "css/hero.css"}}">
 
 <section class="hero">
+    <!-- First Section -->
     <div class="hero-first">
         <!-- Left content with logo and text -->
         <div class="hero-content">
@@ -22,51 +23,87 @@
             </div>
         </div>
     </div>
+
+    <!-- Catch phrase -->
+    <div class="hero-catch-phrase">
+        <h1>Let's plan trips your way!</h1>
+    </div>
+
+    <!-- Second Section -->
     <div class="hero-second">
-        <!-- How It Works Section -->
-        <section id="how-it-works">
-            <div class="container">
-                <h2>How It Works</h2>
-                <div class="steps">
-                    <div class="step">
-                        <h3>1. Set Your Preferences</h3>
-                        <p>Choose the experiences that matter to you, whether it's history, nature, or shopping, your preferences guide the trip. Choose the length of your trip as well, be it an hour or the whole day.</p>
-                    <!-- Add a screenshot of the preference selection screen -->
-                    </div>
-                    <div class="step">
-                        <h3>2. Generate an Optimized Trip</h3>
-                        <p>Our app uses an internally-developed algorithm to find the best route, balancing popular landmarks and hidden gems to create a personalized experience.</p>
-                    <!-- Add a screenshot of a generated trip route -->
-                    </div>
-                    <div class="step">
-                        <h3>3. Explore at Your Own Pace</h3>
-                        <p>Follow the plan or make changes on the go : our flexible trip design allows you to explore freely while ensuring you never miss anything important.</p>
-                    <!-- Add a screenshot of an itinerary view -->
-                    </div>
-                </div>
-            </div>
-        </section>
 
-        <!-- Features Section -->
-        <section id="features">
-            <div class="container">
-                <h2>Why Choose AnyWay?</h2>
-                <div class="features-list">
-                    <div class="feature">
-                        <h3>Personalized Itineraries</h3>
-                        <p>Custom-tailored trips based on your unique interests, ensuring every stop is something you'll love.</p>
-                    </div>
-                    <div class="feature">
-                        <h3>Smart Optimization</h3>
-                        <p>Our advanced algorithm combines both well-known landmarks and local hidden gems for the perfect balance.</p>
-                    </div>
-                    <div class="feature">
-                        <h3>Real-time Flexibility</h3>
-                        <p>Change your itinerary anytime, and the app will instantly recalculate to ensure you still see all the best spots.</p>
-                    </div>
-                </div>
+        <div class="hero-bloc">
+            <div class="bloc-text">
+                <h3>Set Your Preferences</h3>
+                <ul>
+                    <li>Choose from sightseeing, nature, and shopping categories.</li>
+                    <li>Refine by subcategories like museums or restaurants.</li>
+                    <li>Select trip durations from quick stops to full-day adventures.</li>
+                </ul>
             </div>
-        </section>
+            <div class="bloc-image">
+                <img src="assets/screenshots/screenshot_1.png" alt="Preferences Screen">
+            </div>
+        </div>
 
+        <div class="hero-bloc">
+            <div class="bloc-image">
+                <img src="assets/screenshots/screenshot_1.png" alt="Optimization Process">
+            </div>
+            <div class="bloc-text">
+                <h3>Get the Perfect Trip</h3>
+                <ul>
+                    <li>Our intelligent algorithm balances landmarks and hidden gems.</li>
+                    <li>Custom-tailored trips ensure every stop aligns with your interests.</li>
+                    <li>Enjoy smart optimization for the perfect balance of activities.</li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="hero-bloc">
+            <div class="bloc-text">
+                <h3>Explore at Your Own Pace</h3>
+                <ul>
+                    <li>Skip or remove landmarks as you go.</li>
+                    <li>Save your trip for later and revisit anytime.</li>
+                    <li>Flexible trip design ensures you never miss important spots.</li>
+                </ul>
+            </div>
+            <div class="bloc-image">
+                <img src="assets/screenshots/screenshot_1.png" alt="Itinerary Screen">
+            </div>
+        </div>
+
+        <div class="hero-bloc">
+            <div class="bloc-image">
+                <img src="assets/screenshots/screenshot_1.png" alt="App Mockup">
+            </div>
+            <div class="bloc-text">
+                <h3>Real-time Flexibility</h3>
+                <ul>
+                    <li>Remove landmarks or recalculate the trip on-the-go.</li>
+                    <li>Adjust your itinerary anytime and keep exploring effortlessly.</li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="hero-bloc">
+            <div class="bloc-text">
+                <h3>Find Nearby Toilets</h3>
+                <ul>
+                    <li>Never struggle to find public restrooms during your trip.</li>
+                    <li>Simply ask, and the app shows nearby public toilets.</li>
+                    <li>A quick and free solution to an everyday problem.</li>
+                </ul>
+            </div>
+            <div class="bloc-image">
+                <img src="assets/screenshots/screenshot_1.png" alt="Toilet Finder">
+            </div>
+        </div>
+
+        <!-- Call to Action Button -->
+        <div class="hero-button-end">
+            <a href="https://anydev.info/early-access/" class="cta-button">Get Started Now</a>
+        </div>
     </div>
 </section>