diff --git a/index.html b/index.html
index eb5d015c..22720095 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,24 @@
     <link rel="stylesheet" href="chatbot.css">
     <title>BuddyTrail</title>
     <style>
+     .header1{
+       background-color:white;
+       border-radius:8px;
+     }
+    /* Button Styling */
+    .btn {
+      background-color: #007bff; /* Primary button color */
+      padding: 10px 20px; /* Padding for button size */
+      text-decoration: none; /* Remove underline from text */
+      color: white; /* White text */
+      border-radius: 5px; /* Rounded corners */
+    }
+  
+    /* Hover Effect for Buttons */
+    .btn:hover {
+      background-color: #0056b3; /* Darker color on hover */
+    }
+
       * {
     margin: 0;
     padding: 0;
@@ -385,7 +403,79 @@ <h3>
           and destination
         </h3>
       </header>
-      <div class="cards" style="height: 384px;">
+      <!-- Start of Cards Container -->
+<div class="cards" style="height: 384px;">
+
+  <!-- Travel Card -->
+  <div class="card">
+    <div class="header1">
+      <!-- Travel Icon -->
+      <div class="card-icon">
+        <img src="/icons/route-solid.svg" alt="Travel Icon">
+      </div>
+      <!-- Card Title -->
+      <h4>Travel</h4>
+      <!-- Card Description -->
+      <p>
+        Discover budget-friendly getaways for families and friends! From serene
+        mountains to sunny beaches, find your next adventure without breaking the
+        bank. Start exploring now!
+      </p>
+      <!-- Button Link for Travel -->
+      <a href="travel.html" class="btn" style="color: white;">Explore more</a>
+    </div>
+  </div>
+  <!-- End of Travel Card -->
+
+  <!-- Hotel Card -->
+  <div class="card">
+    <div class="header1">
+      <!-- Hotel Icon -->
+      <div class="card-icon">
+        <img src="./icons/bed-solid.svg" alt="Hotel Icon">
+      </div>
+      <!-- Card Title -->
+      <h4>Hotel</h4>
+      <!-- Card Description -->
+      <p>
+        We've handpicked top-rated options that offer exceptional value. Book your
+        perfect stay today and enjoy premium accommodations without the premium
+        price tag!
+      </p>
+      <!-- Button Link for Hotels -->
+      <a href="hotel.html" class="btn" style="color: white;">See Hotels</a>
+    </div>
+  </div>
+  <!-- End of Hotel Card -->
+
+  <!-- Fly Card -->
+  <div class="card">
+    <div class="header1">
+      <!-- Fly Icon -->
+      <div class="card-icon">
+        <img src="/icons/plane-departure-solid.svg" alt="Fly Icon">
+      </div>
+      <!-- Card Title -->
+      <h4>Fly</h4>
+      <!-- Card Description -->
+      <p>
+        Fly to your dream destination without breaking the bank! We offer the best
+        flight deals, combining comfort and affordability for perfect journey.
+        Book now and take off for less!
+      </p>
+      <!-- Button Link for Flights -->
+      <a href="fly.html" class="btn" style="color: white;">See Flights</a>
+    </div>
+  </div>
+  <!-- End of Fly Card -->
+
+</div>
+<!-- End of Cards Container -->
+
+<!-- CSS for the buttons (Move this to your CSS file) -->
+
+
+<!--       <div class="cards" style="height: 384px;">
         <div class="card">
           <div class="header1">
           <div class="card-icon">
@@ -427,7 +517,7 @@ <h4>Fly</h4>
           </p>
           <button id="btn"><a href="fly.html ">See Flights</a></button></div>
         </div>
-      </div>
+      </div> -->
     </section>
     <!-- deals -->
    <section id="deals" class="deals-section">