diff --git a/Images/cart.jpg b/Images/cart.jpg
new file mode 100644
index 00000000..bc3f0667
Binary files /dev/null and b/Images/cart.jpg differ
diff --git a/Images/online-delivery.jpg b/Images/online-delivery.jpg
new file mode 100644
index 00000000..f037e638
Binary files /dev/null and b/Images/online-delivery.jpg differ
diff --git a/Images/vintage-goods.jpg b/Images/vintage-goods.jpg
new file mode 100644
index 00000000..3fc91cf4
Binary files /dev/null and b/Images/vintage-goods.jpg differ
diff --git a/Images/vintage-services.jpg b/Images/vintage-services.jpg
new file mode 100644
index 00000000..438f46a1
Binary files /dev/null and b/Images/vintage-services.jpg differ
diff --git a/index.html b/index.html
index e272dfae..a6af8d08 100644
--- a/index.html
+++ b/index.html
@@ -353,13 +353,7 @@
     flex-direction: column; /* Stack content vertically */
     align-items: center;
     max-width: 350px; /* Maximum width of each card */
-    flex: 1 1 280px; /* Allow boxes to grow and shrink */
-    min-width: 300px; /* Minimum width for responsiveness */
-    min-height: 200px; /* Minimum height for the card */
-}
-
-.box:hover{
-    border: 1px solid black;
+    min-width: 250px; /* Minimum width for responsiveness */
 }
 
 .card-image {
@@ -719,31 +713,43 @@ <h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whims
         
     </section>
 
- <section class="service_container">
-    <div class="service">
-        <!-- Text Column - 60% Width -->
-        <div class="service_text column"  style="margin-left: auto; margin-right: auto;"><br>
-            <h1>Bringing happiness to you</h1>
-            <p>Order your favourite vintage collections!</p>
-        </div>
-
-        <!-- Buttons Column - 40% Width -->
-
-        <div class="service_buttons column" style="margin-left: auto; margin-right: auto;">
-            <div class="button_row" data-aos="fade-down">
-                <div class="service_item box" data-aos="fade-down" style="height: 200px;">
-                    <h2>Online Delivery</h2><br>
-                    <a href="./Html-files/menu.html" class="order_btn">Order Online</a>
-                </div>
-                <div class="service_item box" data-aos="fade-down" style="height: 200px;">
-                    <h2>Click & Collect</h2><br>
-                    <a href="./Html-files/cart.html" class="order_btn">Take out Order</a>
+    <section class="service_container">
+        <div class="service">
+            <!-- Text Column - 60% Width -->
+            <div class="service_text column"  style="margin-left: auto; margin-right: auto;"><br>
+                <h1>Bringing happiness to you</h1>
+                <p>Order your favourite vintage collections!</p>
+            </div>
+    
+            <!-- Buttons Column - 40% Width -->
+    
+            <div class="service_buttons column" style="margin-left: auto; margin-right: auto;">
+                <div class="button_row" data-aos="fade-down">
+                    <div class="service_item box" data-aos="fade-down">
+                        <h2>Vintage Collections</h2><br>
+                        <a href="./Html-files/menu.html" class="order_btn">Explore Goods</a>
+                        <img src="./Images/vintage-goods.jpg" alt="collections page"/>
+                    </div>
+                    <div class="service_item box" data-aos="fade-down">
+                        <h2>Vintage Services</h2><br>
+                        <a href="./Html-files/booknow.html" class="order_btn">Explore Services</a>
+                        <img src="./Images/vintage-services.jpg" alt="services page"/>
+                    </div>
+                    <div class="service_item box" data-aos="fade-down">
+                        <h2>Online Delivery</h2><br>
+                        <a href="./Html-files/payment2.html" class="order_btn">Order Online</a>
+                        <img src="./Images/online-delivery.jpg" alt="online payment page"/>
+                    </div>
+                    <div class="service_item box" data-aos="fade-down">
+                        <h2>Click & Collect</h2><br>
+                        <a href="./Html-files/cart.html" class="order_btn">Take out Order</a>
+                        <img src="./Images/cart.jpg" alt="cart page"/>
+                    </div>
                 </div>
             </div>
-        </div>
-          
-
-</section>
+              
+    
+    </section>
 
     <section class="menu_container">
         <div class="mainhead">
diff --git a/style.css b/style.css
index 2e9bc4dd..c7d9bc2f 100644
--- a/style.css
+++ b/style.css
@@ -209,50 +209,75 @@ body {
         margin-bottom: 20px;
     }
 
-    /* Buttons Column - 40% */
-    .service_buttons {
-        flex: 0 0 40%;
-    }
-
     .button_row {
-        display: flex;
-        justify-content: space-between;
-      /*border: 1px solid black;*/
-        gap: 20px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
+      justify-content: center;
     }
-
+    
     .service_item {
-        text-align: center;
-        flex: 1;
-        padding: 10px;
-        margin: 5px 0;
+      text-align: center;
+      flex: 1;
+      padding: 10px;
+      margin: 5px 0;
+      transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition for scaling, shadow, and border */
+      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Initial shadow */
+      overflow: hidden; /* Prevent content overflow */
+      border-radius: 8px; /* Optional rounded corners */
+      border: 2px solid transparent; /* Initial border (transparent) */
     }
-
+    
     .service_item h2 {
-        font-family: var(--ff-philosopher);
-        color: hsl(357, 82%, 35%);
-        font-size: 1.7rem;
-        margin-bottom: 10px;
+      font-family: var(--ff-philosopher);
+      color: hsl(357, 82%, 35%);
+      font-size: 1.7rem;
+      margin-bottom: 10px;
+      transition: color 0.3s ease; /* Smooth text color change on hover */
     }
-
+    
+    .service_item:hover h2 {
+      color: #b22222; /* Change title color on hover */
+    }
+    
+    .service_item img {
+      width: 100%;
+      margin-top: 70px;
+      height: 200px;
+      object-fit: cover;
+      border-radius: 8px; /* Optional rounded corners */
+      transition: transform 0.3s ease; /* Smooth image zoom effect */
+    }
+    
+    .service_item:hover img {
+      transform: scale(1.1); /* Zoom the image on hover */
+    }
+    
+    /* Updated order_btn styles */
     .order_btn {
-        font-family: var(--ff-poppins);
-        background-color: hsl(357, 82%, 35%);
-        color: white;
-        padding: 12px 30px;
-        font-size: 1rem;
-        margin-top: 10px;
-        text-decoration: none;
-        border-radius: 10px;
-        transition: background-color 0.3s ease;
+      font-family: var(--ff-poppins);
+      background-color: hsl(357, 82%, 35%);
+      color: white;
+      padding: 12px 30px;
+      font-size: 1rem;
+      margin-top: 10px;
+      text-decoration: none;
+      border-radius: 10px;
+      transition: background-color 0.3s ease, transform 0.3s ease; /* Added transform for hover effect */
     }
-
+    
     .order_btn:hover {
-        background-color: hsl(357, 82%, 45%);
+      background-color: hsl(357, 82%, 45%);
+      transform: scale(1.1); /* Slightly enlarge the button on hover */
     }
-
-    
     
+    .service_item:hover {
+      transform: scale(1.5);
+      box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2); /* Increase shadow depth on hover */
+      border: 2px solid hsl(357, 82%, 35%); /* Dark red/maroon border on hover */
+    }
+
+  
 
 
 /*
@@ -269,20 +294,6 @@ body {
 }
 */
 
-.service_container:before {
-  background-color: transparent;
-  content: "";
-  position: absolute;
-
-  /*  
-    height: 560px;
-  height: 800px;
-  width: 100%;
-  /* justify-items: center; */
-  opacity: 0.4;
-  z-index: -1;
-  /* background-repeat: no-repeat; */
-}
 
 /*
 .service {