diff --git a/Product-view.html b/Product-view.html
new file mode 100644
index 00000000..9b4547e3
--- /dev/null
+++ b/Product-view.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Product Quick View</title>
+    <link rel="stylesheet" href="styles/view.css">
+</head>
+<body>
+    <!-- Eye Icon to Trigger Modal -->
+    <div class="product-container">
+        <img src="product-image.jpg" alt="Product" class="product-img">
+        <button class="quick-view-btn" onclick="openModal()">
+            <i class="fa fa-eye"></i> <!-- Eye icon for quick view -->
+        </button>
+    </div>
+
+    <!-- Quick View Modal -->
+    <div id="quickViewModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal()">&times;</span>
+            <div class="modal-left">
+                <img src="product-image.jpg" alt="Product" class="modal-product-img">
+            </div>
+            <div class="modal-right">
+                <h2>Papaya Pineapple Ice Cream</h2>
+                <p>The delightful duo of papaya and pineapple makes this an irresistible flavour. Papaya is sourced from Solapur and Pineapple from Kerala. Just to give you a taste that’s truly memorable!</p>
+                <h3>Ingredients</h3>
+                <p>Milk, Pineapple Pulp, Papaya Pulp, Sugar</p>
+                <h3>Available In</h3>
+                <p>Scoop | Shake | Family Pack</p>
+            </div>
+        </div>
+    </div>
+
+    <script src="script/products.js"></script>
+</body>
+</html>
diff --git a/README.md b/README.md
index 7227d558..4305d7c2 100644
--- a/README.md
+++ b/README.md
@@ -191,4 +191,8 @@ For any inquiries or support, please contact:
 - **GitHub:** (https://github.com/DharshiBalasubramaniyam)
 ---
 
-
+<div align="center">
+    <a href="#top">
+        <img src="https://img.shields.io/badge/Back%20to%20Top-000000?style=for-the-badge&logo=github&logoColor=white" alt="Back to Top">
+    </a>
+</div>
diff --git a/blogs.html b/blogs.html
index 5897cdaf..b49ca193 100644
--- a/blogs.html
+++ b/blogs.html
@@ -500,7 +500,7 @@ <h4 style="margin-top: 15px;">Follow Us</h4>
           <li><a href="https://www.facebook.com/" class="social"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
           <li><a href="https://www.instagram.com/" class="social"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
           <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i> Linkedin</a></li>
-          <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter"></i> Twitter</a></li>
+          <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
           <!-- Added Whatsapp Logo -->
           <li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp"></i>
             Whatsapp</a></li>
diff --git a/catering.html b/catering.html
index 3e52454c..4d445219 100644
--- a/catering.html
+++ b/catering.html
@@ -73,8 +73,8 @@
             <a href="./index.html">IcyCo</a>
         </div>
         <div class="nav-links">
-            <a href="./index.html" class="link">home</a>
-            <a href="./products.html" class="link">products</a>
+            <a href="./index.html" class="link">Home</a>
+            <a href="./products.html" class="link">Products</a>
             <a href="./delivery.html" class="link">Delivery</a>
             <a href="./dine-in.html" class="link">Dine In</a>
             <a href="./catering.html" class="link active">Catering</a>
@@ -100,7 +100,7 @@ <h2 class="heading">Tell us about your event</h2>
         <form class="form-contents">
 
             <div class="indv-text">
-                <label for="name" class="text">NAME</label>
+                <label for="name" class="text">Name</label>
                 <input type="text" class="form-text" placeholder="Enter your Name" required required
                     pattern="[a-zA-Z ]+"
                     oninvalid="this.setCustomValidity('Please enter your name  without using numbers or special characters.')"
@@ -108,12 +108,12 @@ <h2 class="heading">Tell us about your event</h2>
             </div>
 
             <div class="indv-text">
-                <label for="email" class="text">EMAIL ID</label>
+                <label for="email" class="text">Email Id</label>
                 <input type="email" class="form-text" placeholder="example@gmail.com" required>
             </div>
 
             <div class="indv-text">
-                <label for="contact" class="text">CONTACT No.</label>
+                <label for="contact" class="text">Contact No.</label>
                 <input type="tel" class="form-text" name="contact" id="contact" placeholder="0123456789" required
                     pattern="[0-9]{10}" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
             </div>
@@ -123,29 +123,30 @@ <h2 class="heading">Tell us about your event</h2>
                 <input type="date" class="form-text" name="" id="dateInput" required>
             </div>
 
-            <div class="indv-text">
-                <label for="eventtype" class="text">Event Type</label>
+          <div class="indv-text">
+              <label for="eventtype" class="text">Event Type</label>
+
+              <label for="self-pickup">
+              <input type="radio" id="self-pickup" name="indoor-outdoor" value="self-pickup">
+              Self Service Pickup
+              </label><br><br>
+
+              <label for="self-delivery">
+              <input type="radio" id="self-delivery" name="indoor-outdoor" value="self-delivery">
+              Self Service Delivery
+              </label><br><br>
+
+              <label for="full-service">
+              <input type="radio" id="full-service" name="indoor-outdoor" value="full-service">
+              Full Service Catering
+              </label><br><br>
+
+              <label for="not-sure">
+              <input type="radio" id="not-sure" name="indoor-outdoor" value="not-sure">
+              Not Sure, Want To Learn More
+              </label>
+        </div>
 
-                <label for="self-pickup">
-                    <input type="radio" id="self-pickup" name="indoor-outdoor" value="self-pickup">
-                    Self Service Pickup
-                </label><br><br>
-            
-                <label for="self-delivery">
-                    <input type="radio" id="self-delivery" name="indoor-outdoor" value="self-delivery">
-                    Self Service Delivery
-                </label><br><br>
-            
-                <label for="full-service">
-                    <input type="radio" id="full-service" name="indoor-outdoor" value="full-service">
-                    Full Service Catering
-                </label><br><br>
-            
-                <label for="not-sure">
-                    <input type="radio" id="not-sure" name="indoor-outdoor" value="not-sure">
-                    Not Sure, Want To Learn More
-                </label>
-            </div>
             
     
 
@@ -155,37 +156,34 @@ <h2 class="heading">Tell us about your event</h2>
             </div>
 
             <div class="indv-text">
-                <label for="state" class="text">STATE</label>
-                <select class="form-text" id="state" required>
-                    <option value="">Select State</option>
-                    <option value="Andhra Pradesh">Andhra Pradesh</option>
-                    <option value="Arunachal Pradesh">Arunachal Pradesh</option>
-                    <option value="Assam">Assam</option>
-                    <option value="Bihar">Bihar</option>
-                    <option value="Chhattisgarh">Chhattisgarh</option>
-                    <option value="Goa">Goa</option>
-                    <option value="Gujarat">Gujarat</option>
-                    <option value="Haryana">Haryana</option>
-                    <option value="Himachal Pradesh">Himachal Pradesh</option>
-                    <option value="Jharkhand">Jharkhand</option>
-                    <option value="Karnataka">Karnataka</option>
-                    <option value="Kerala">Kerala</option>
-                    <option value="Madhya Pradesh">Madhya Pradesh</option>
-                    <option value="Maharashtra">Maharashtra</option>
-                    <option value="Manipur">Manipur</option>
-                    <option value="Meghalaya">Meghalaya</option>
-                    <option value="Mizoram">Mizoram</option>
-                    <option value="Nagaland">Nagaland</option>
-                    <option value="Odisha">Odisha</option>
-                    <option value="Punjab">Punjab</option>
-                    <option value="Rajasthan">Rajasthan</option>
-                    <option value="Sikkim">Sikkim</option>
-                    <option value="Tamil Nadu">Tamil Nadu</option>
-                    <option value="Telangana">Telangana</option>
-                    <option value="Tripura">Tripura</option>
-                    <option value="Uttar Pradesh">Uttar Pradesh</option>
-                    <option value="Uttarakhand">Uttarakhand</option>
-                    <option value="West Bengal">West Bengal</option>
+                 <label for="state" class="text">State</label>
+                 <select class="form-text" id="state" required>
+                    <option value="">Select District</option>
+                    <option value="Ampara">Ampara</option>
+                    <option value="Anuradhapura">Anuradhapura</option>
+                    <option value="Badulla">Badulla</option>
+                    <option value="Batticaloa">Batticaloa</option>
+                    <option value="Colombo">Colombo</option>
+                    <option value="Galle">Galle</option>
+                    <option value="Gampaha">Gampaha</option>
+                    <option value="Hambantota">Hambantota</option>
+                    <option value="Jaffna">Jaffna</option>
+                    <option value="Kalutara">Kalutara</option>
+                    <option value="Kandy">Kandy</option>
+                    <option value="Kegalle">Kegalle</option>
+                    <option value="Kilinochchi">Kilinochchi</option>
+                    <option value="Kurunegala">Kurunegala</option>
+                    <option value="Mannar">Mannar</option>
+                    <option value="Matale">Matale</option>
+                    <option value="Matara">Matara</option>
+                    <option value="Moneragala">Moneragala</option>
+                    <option value="Mullaitivu">Mullaitivu</option>
+                    <option value="Nuwara Eliya">Nuwara Eliya</option>
+                    <option value="Polonnaruwa">Polonnaruwa</option>
+                    <option value="Puttalam">Puttalam</option>
+                    <option value="Ratnapura">Ratnapura</option>
+                    <option value="Trincomalee">Trincomalee</option>
+                    <option value="Vavuniya">Vavuniya</option>
                 </select>
             </div>
 
@@ -275,7 +273,7 @@ <h4 style="margin-top: 15px;">Follow Us</h4>
                     <li><a href="https://www.facebook.com/" class="social"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
                     <li><a href="https://www.instagram.com/" class="social"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
                     <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i> Linkedin</a></li>
-                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter"></i> Twitter</a></li>
+                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
                     <!-- Added Whatsapp Logo -->
                     <li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp"></i>
                         Whatsapp</a></li>
@@ -315,4 +313,4 @@ <h4>Newsletter</h4>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/contributor.html b/contributor.html
index 045ed587..a2e053de 100644
--- a/contributor.html
+++ b/contributor.html
@@ -172,7 +172,7 @@ <h1>Our <span>Contributors</span></h1>
           <div class="footer-col">
               <h4>Useful links</h4>
               <ul class="links">
-                  <li><a href="#home">Home</a></li>
+                  <li><a href="./index.html">Home</a></li>
                   <li><a href="./products.html">Products</a></li>
                   <li><a href="gallary.html">Gallery</a></li>
                   <li><a href="#about">About Us</a></li>
@@ -234,7 +234,7 @@ <h4 style="margin-top: 15px;">Follow Us</h4>
                           Instagram</a></li>
                   <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
                           Linkedin</a></li>
-                  <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i>
+                  <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-twitter" aria-hidden="true"></i>
                           Twitter</a></li>
                   <!-- Modified the class link for redirect and CSS -->
                   <li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp" aria-hidden="true"></i> Whatsapp</a></li>
diff --git a/delivery.html b/delivery.html
index 59deb6f6..4ea7bd63 100644
--- a/delivery.html
+++ b/delivery.html
@@ -103,75 +103,83 @@ <h2 class="heading">Enter Your Details</h2>
                             required />
                     </div>
 
-                    <div class="indv-text">
-                        <label for="email" class="text">Email Id</label>
-                        <input type="email" class="form-text" placeholder="example@gmail.com" required>
-                    </div>
-
-                    <div class="indv-text">
-                        <label for="contact" class="text">Contact No.</label>
-                        <input type="tel" class="form-text" name="contact" id="contact" placeholder="0123456789"
-                            required>
+                  
 
-                    </div>
+            <div class="indv-text">
+                <label for="email" class="text">Email Id</label>
+                <input type="email" class="form-text" placeholder="example@gmail.com" required>
+            </div>
 
-                    <div class="indv-text">
-                        <label for="add1" class="text">Address Line1</label>
-                        <input type="text" class="form-text" name="" id="" placeholder="Street Address" required>
-                    </div>
+            <div class="indv-text">
+                <label for="contact" class="text">Contact No.</label>
+                <input type="tel" class="form-text" name="contact" id="contact" placeholder="0123456789" required>
+            </div>
 
-                    <div class="indv-text">
-                        <label for="add2" class="text">Address Line2</label>
-                        <input type="text" class="form-text" name="" id="" placeholder="City" required>
-                    </div>
+            <div class="indv-text">
+                <label for="add1" class="text">Address Line1</label>
+                <input type="text" class="form-text" name="" id="" placeholder="Street Address" required>
+            </div>
 
-                    <div class="indv-text">
-                        <label for="pincode" class="text">PIN Code </label>
-                        <input type="text" class="form-text" id="pincode" name="pincode" placeholder="Enter Pin Code"
-                            required pattern="\d{6}" title="Please enter a valid 6-digit PIN code" maxlength="6">
-                    </div>
+            <div class="indv-text">
+                <label for="add2" class="text">Address Line2</label>
+                <input type="text" class="form-text" name="" id="" placeholder="City" required>
+            </div>
 
-                    <div class="indv-text">
-                        <label for="state" class="text">State</label>
-                        <select class="form-text" id="state" required>
-                            <option value="">Select State</option>
-                            <option value="Andhra Pradesh">Colombo</option>
-                            <option value="Arunachal Pradesh">Gampaha</option>
-                            <option value="Assam">Kalutara</option>
-                            <option value="Bihar">Kandy</option>
-                            <option value="Chhattisgarh">Matale</option>
-                            <option value="Goa">Nuwara Eliya</option>
-                            <option value="Gujarat">Galle</option>
-                            <option value="Haryana">Matara</option>
-                            <option value="Himachal Pradesh">Hambantota</option>
-                            <option value="Jharkhand">Jaffna</option>
-                            <option value="Karnataka">Kilinochchi</option>
-                            <option value="Kerala">Mannar</option>
-                            <option value="Madhya Pradesh">Vavuniya</option>
-                            <option value="Maharashtra">Mullaitivu</option>
-                            <option value="Manipur">Batticaloa</option>
-                            <option value="Meghalaya">Ampara</option>
-                            <option value="Mizoram">Trincomalee</option>
-                            <option value="Nagaland">Kurunegala</option>
-                            <option value="Odisha">Puttalam</option>
-                            <option value="Punjab">Anuradhapura</option>
-                            <option value="Rajasthan">Polonnaruwa</option>
-                            <option value="Sikkim">Badulla</option>
-                            <option value="Tamil Nadu">Moneragala</option>
-                            <option value="Telangana">Ratnapura</option>
-                            <option value="Tripura">Kegalle</option>
-                        </select>
-                    </div>
+            <div class="indv-text">
+                <label for="pincode" class="text">PIN Code </label>
+                <input type="text" class="form-text" id="pincode" name="pincode" placeholder="Enter Pin Code" required
+                    pattern="\d{6}" title="Please enter a valid 6-digit PIN code" maxlength="6">
+            </div>
 
-                    <div style="display: flex; margin: 20px;" class="btn">
-                        <button type="submit" value="SUMBIT" class="btn-style">Submit</button>
-                        <button type="reset" class="btn-style reset-btn" value="RESET">Clear</button>
-                    </div>
+        
+
+
+<div class="indv-text">
+    <label for="state" class="text">State</label>
+    <select class="form-text" id="state" required>
+        <option value="">Select District</option>
+        <option value="Ampara">Ampara</option>
+        <option value="Anuradhapura">Anuradhapura</option>
+        <option value="Badulla">Badulla</option>
+        <option value="Batticaloa">Batticaloa</option>
+        <option value="Colombo">Colombo</option>
+        <option value="Galle">Galle</option>
+        <option value="Gampaha">Gampaha</option>
+        <option value="Hambantota">Hambantota</option>
+        <option value="Jaffna">Jaffna</option>
+        <option value="Kalutara">Kalutara</option>
+        <option value="Kandy">Kandy</option>
+        <option value="Kegalle">Kegalle</option>
+        <option value="Kilinochchi">Kilinochchi</option>
+        <option value="Kurunegala">Kurunegala</option>
+        <option value="Mannar">Mannar</option>
+        <option value="Matale">Matale</option>
+        <option value="Matara">Matara</option>
+        <option value="Moneragala">Moneragala</option>
+        <option value="Mullaitivu">Mullaitivu</option>
+        <option value="Nuwara Eliya">Nuwara Eliya</option>
+        <option value="Polonnaruwa">Polonnaruwa</option>
+        <option value="Puttalam">Puttalam</option>
+        <option value="Ratnapura">Ratnapura</option>
+        <option value="Trincomalee">Trincomalee</option>
+        <option value="Vavuniya">Vavuniya</option>
+    </select>
+</div>
+
+<div class="indv-text">
+    <label for="add2" class="text">Notes for Delivery</label>
+    <input type="text" class="form-text" name="" id="" placeholder="Enter any specific instructions or notes for delivery" >
+</div>
+
+            <div style="display: flex; margin: 20px;" class="btn">
+                <button type="submit" value="SUMBIT" class="btn-style">Submit</button>
+                <button type="reset" class="btn-style reset-btn" value="RESET">Clear</button>
             </div>
 
-            </form>
-        </section>
+        </form>
+    </section>
     </div>
+<!-- >>>>>>> master -->
 
     <!-- Cart -->
     <div class="cart">
@@ -248,14 +256,12 @@ <h4>Need Help?</h4>
                 </ul>
                 <h4 style="margin-top: 15px;">Follow Us</h4>
                 <ul class="links">
-                    <li><a href="https://www.facebook.com/" class="social"><i class="fa-brands fa-facebook-f"></i>
-                            Facebook</a></li>
-                    <li><a href="https://www.instagram.com/" class="social"><i class="fa-brands fa-instagram"></i>
-                            Instagram</a></li>
-                    <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i>
-                            Linkedin</a></li>
-                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter"></i>
-                            Twitter</a></li>
+
+                    <li><a href="https://www.facebook.com/" class="social"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
+                    <li><a href="https://www.instagram.com/" class="social"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
+                    <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i> Linkedin</a></li>
+                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
+<!-- >>>>>>> master -->
                     <!-- Added Whatsapp Logo -->
                     <li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp"></i>
                             Whatsapp</a></li>
@@ -287,6 +293,27 @@ <h4>Newsletter</h4>
     </div>
 
     <!-- scripts -->
+    <script>
+        document.querySelector('.form-contents').addEventListener('submit', function(event) {
+            const emailField = document.querySelector('input[type="email"]');
+            const email = emailField.value;
+    
+            // Stricter email regex pattern
+            const emailPattern = /^(?!.*\.\.)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]{1,64}@[a-zA-Z0-9-]{1,255}\.[a-zA-Z]{2,}$/;
+    
+            // Length checks for local and domain parts
+            const [localPart, domainPart] = email.split("@");
+            if (!emailPattern.test(email) || 
+                localPart.length > 64 || 
+                (domainPart && domainPart.length > 255)) {
+                
+                alert("Please enter a valid email address.");
+                emailField.focus();
+                event.preventDefault();  // Prevents form submission if email is invalid
+            }
+        });
+    </script>
+    
     <script src="./script/nav.js"></script>
     <script src="./script/cart.js"></script>
     <script src="./script/topscrollindicator.js"></script>
diff --git a/dine-in.html b/dine-in.html
index 9bd8acaa..f560e548 100644
--- a/dine-in.html
+++ b/dine-in.html
@@ -253,7 +253,7 @@ <h4 style="margin-top: 15px;">Follow Us</h4>
                     <li><a href="https://www.facebook.com/" class="social"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
                     <li><a href="https://www.instagram.com/" class="social"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
                     <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i> Linkedin</a></li>
-                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter"></i> Twitter</a></li>
+                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
                     <!-- Added Whatsapp Logo -->
                     <li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp"></i>
                         Whatsapp</a></li>
diff --git a/faq.html b/faq.html
index 6ca805d5..e5c0f2f0 100644
--- a/faq.html
+++ b/faq.html
@@ -221,7 +221,7 @@ <h4 style="margin-top: 15px;">Follow Us</h4>
                     <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i>
                             Linkedin</a></li>
                     <!-- Added the new X logo -->
-                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter"></i>
+                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-twitter"></i>
                             Twitter</a></li>
                     <!-- Added Whatsapp Redirect -->
                     <li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp"></i> Whatsapp</a></li>
diff --git a/gallary.html b/gallary.html
index 9912648d..03542878 100644
--- a/gallary.html
+++ b/gallary.html
@@ -276,7 +276,7 @@ <h4 style="margin-top: 15px;">Follow Us</h4>
                             Instagram</a></li>
                     <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i>
                             Linkedin</a></li>
-                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter"></i>
+                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-twitter"></i>
                             Twitter</a></li>
                     <!-- Added Whatsapp Redirect -->
                     <li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp"></i> Whatsapp</a></li>
diff --git a/index.html b/index.html
index 82e28434..60ce16c6 100644
--- a/index.html
+++ b/index.html
@@ -61,8 +61,6 @@
         </div>
     </div>
 
-
-
     <!-- Scroll progress bar -->
     <div class="scroll-progress" id="scrollProgress"></div>
 
@@ -138,14 +136,13 @@ <h4>Welcome to the frozen feast, where the world of frozen delights comes alive!
 
     <!-- Our Flavors -->
     <section id="our-flavors">
-        <h1>Find Your <span>Taste</span></h1>
-        <div class="flavors-container bottomani">
-        </div>
+        <h1>Find Your Taste</h1>
+        <div class="flavors-container bottomani"></div>
     </section>
 
     <!-- Services -->
     <section class="services" id="services">
-        <h1>What <span>we do?</span></h1>
+        <h1>What we do?</h1>
         <div class="services-card-wrapper">
             <div class="service-card rightani">
                 <div class="service-card1">
@@ -189,9 +186,7 @@ <h3>Sweeten Your Event – Ice Cream Catering</h3>
 
     <!-- Pop-up for email registration -->
     <div id="popup" class="popup">
-
         <div class="popup-content">
-
             <div class="popup-left">
                 <img src="images/popupice.jpg" alt="Discount Image">
             </div>
@@ -208,12 +203,9 @@ <h2>Get a sweet deal before it melts away..</h2>
                         Service</a> and <a href="privacy.html">Privacy Policy</a>.</p>
             </div>
             <span class="close-btn" id="close-btn2">&times; </span>
-
         </div>
-
     </div>
 
-
     <!-- About -->
     <section class="about" id="about">
         <div class="box-container about-box">
@@ -279,8 +271,25 @@ <h3>Fun & Friendly Atmosphere</h3>
     <section class="reviewSection" id="reviewsSection">
         <h1>Top Reviews</h1>
         <div class="reviews">
-            <div class="review-box" id="box_1">
-                <h1>Top Reviews from our verified customers</h1>
+            <div class="review-box bottomani">
+                <i class="fa fa-quote-right quote" aria-hidden="true"></i>
+                <i class="fa fa-quote-right quote" aria-hidden="true"></i>
+                <div class="top">
+                    <img src="images/reveiwer1.jpg" alt="Reviewer Tom Stepher">
+                    <div class="right">
+                        <div class="name"><span>Tom Stepher</span> <br> <small>Verified Customer</small></div>
+                        <div class="stars">
+                            <i class="fa fa-star" aria-hidden="true"></i>
+                            <i class="fa fa-star" aria-hidden="true"></i>
+                            <i class="fa fa-star" aria-hidden="true"></i>
+                            <i class="fa fa-star" aria-hidden="true"></i>
+                            <i class="fa fa-star" aria-hidden="true"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="text">“IcyCo’s ice cream is like a symphony for your taste buds. The salted caramel
+                    swirl? Divine!”
+                </div>
             </div>
             <div class="review-box bottomani">
                 <i class="fa fa-quote-right quote" aria-hidden="true"></i>
@@ -377,7 +386,7 @@ <h1>Top Reviews from our verified customers</h1>
                     </div>
                 </div>
 
-                <div class="text">"From the name itself theses Ice Creams here are best in quality and taste of
+                <div class="text">"From the name itself,these Ice Creams here are best in quality and taste of
                     course."
                 </div>
             </div>
@@ -387,7 +396,7 @@ <h1>Top Reviews from our verified customers</h1>
 
     <!-- contact -->
     <section class="contact" id="contact">
-        <h1><span>Contact</span> Us</h1>
+        <h1>Contact Us</h1>
         <form action="#" novalidate class="box-container bottomani" id="contact-form">
             <div class="row">
                 <div class="input-box">
@@ -441,25 +450,15 @@ <h4>Useful links</h4>
                 <ul class="links">
 
                     <li><a href="#home">Home</a></li>
-                    <!-- <li><a href="#"><i class="fas fa-user"></i> My Account</a></li> -->
-                    <li><a href="products.html">Products</a></li>
-                    <li><a href="gallary.html">Gallery</a></li>
-                    <li><a href="#about">About Us</a></li>
-                    <li><a href="./faq.html" class="link"> FAQ</a></li>
-                    <li><a href="contributor.html"> Our Contributors</a></li>
-                    <li><a href="blogs.html"> Our Blogs</a></li>
-                    <!-- <li><a href="#"><i class="fas fa-file-contract"></i> Customer Agreement</a></li> -->
-                    <li><a href="privacy.html"> Privacy Policy</a></li>
-
-                    <!-- <li><a href="#home">Home</a></li>
+                    <li><a href="./login.html">My Account</a></li>
                     <li><a href="./products.html">Products</a></li>
-                    <li><a href="gallary.html">Gallery</a></li>
+                    <li><a href="./gallary.html">Gallery</a></li>
                     <li><a href="#about">About Us</a></li>
-                    <li><a href="./faq.html" class="link">FAQ</a></li>
-                    <li><a href="contributor.html">Our Contributors</a></li>
-                    <li><a href="blogs.html">Our Blogs</a></li>
-                    <li><a href="privacy.html">Privacy Policy</a></li>
-                    <li><a href="terms&condition.html">Terms&Condition</a></li> -->
+                    <li><a href="./faq.html" class="link"> FAQ</a></li>
+                    <li><a href="./contributor.html"> Our Contributors</a></li>
+                    <li><a href="./blogs.html"> Our Blogs</a></li>
+                    <li><a href="./terms&condition.html">Customer Agreement</a></li>
+                    <li><a href="./privacy.html"> Privacy Policy</a></li>
 
                 </ul>
             </div>
@@ -504,7 +503,7 @@ <h4 style="margin-top: 15px;">Follow Us</h4>
                             Instagram</a></li>
                     <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i>
                             Linkedin</a></li>
-                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter"></i>
+                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-twitter"></i>
                             Twitter</a></li>
                     <li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp"></i> 
                             Whatsapp</a></li>
@@ -551,4 +550,4 @@ <h4>Newsletter</h4>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/privacy.html b/privacy.html
index 71928e3f..7f6bb8a7 100644
--- a/privacy.html
+++ b/privacy.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="./styles/privacy.css">
     <link rel="stylesheet" href="styles/styles.css">
     <link rel="stylesheet" href="./styles/mediaQueries.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
     <link rel="stylesheet" href="styles/topscrollindicator.css">
 
     <!-- link to add favicon -->
@@ -265,8 +265,8 @@ <h4>Useful links</h4>
             <div class="footer-col">
                 <h4>Opening Hours</h4>
                 <ul class="links">
-                    <li><a href="#">Mon-Sat : 9.00 AM to 9.30 PM</a></li>
-                    <li><a href="#">Sunday : 9.00 AM to 3.00 PM</a></li>
+                    <li><a href="#">Mon-Sat : 9:00 AM to 9:30 PM</a></li>
+                    <li><a href="#">Sunday : 9:00 AM to 3:00 PM</a></li>
                 </ul>
                 <h4 style="margin-top: 15px;">Locations</h4>
                 <ul class="links">
@@ -302,7 +302,7 @@ <h4 style="margin-top: 15px;">Follow Us</h4>
                             Instagram</a></li>
                     <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i>
                             Linkedin</a></li>
-                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter"></i>
+                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-twitter"></i>
                             Twitter</a></li>
                     <li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp"></i>
                              Whatsapp</a></li>
diff --git a/products.html b/products.html
index 3e1e629c..4b2429ca 100644
--- a/products.html
+++ b/products.html
@@ -120,6 +120,9 @@ <h1>Our <span>Products</span></h1>
         <div class="box-container products-box " style="margin-top: 40px;"></div>
     </section>
 
+    <!-- Overlay Section -->
+    <div id="overlay" style="display: none;"></div>
+
     <!-- footer -->
     <section class="footer">
         <div class="footer-row">
@@ -174,7 +177,7 @@ <h4 style="margin-top: 15px;">Follow Us</h4>
                             Instagram</a></li>
                     <li><a href="https://www.linkedin.com/" class="social"><i class="fa-brands fa-linkedin-in"></i>
                             Linkedin</a></li>
-                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-x-twitter"></i>
+                    <li><a href="https://www.twitter.com/" class="social"><i class="fa-brands fa-twitter"></i>
                             Twitter</a></li>
                     <!-- Added Whatsapp Logo -->
                     <li><a href="https://www.whatsapp.com/" class="social"><i class="fa-brands fa-whatsapp"></i>
diff --git a/script/products.js b/script/products.js
index 3def7302..abfbaf91 100644
--- a/script/products.js
+++ b/script/products.js
@@ -8,14 +8,14 @@ document.addEventListener("DOMContentLoaded", () => {
       displayFlavorFilter();
       displayCartItems();
       handleQuantityButtonsInCart();
-      createSearchBar(); 
+      createSearchBar();
 
       const falvor_id = getQueryParam("flavor");
 
       if (falvor_id) {
-            filterProducts(falvor_id); 
+            filterProducts(falvor_id);
       } else {
-            displayProducts(products_list); 
+            displayProducts(products_list);
       }
 
 });
@@ -23,18 +23,18 @@ document.addEventListener("DOMContentLoaded", () => {
 function displayProducts(products) {
       let productsSection = document.querySelector(".products-box");
       if (productsSection) {
-            productsSection.innerHTML = ""; 
+            productsSection.innerHTML = "";
       }
-      
+
       if (products == '') {
             productsSection.innerHTML = `
-                <div class="no-product-container">
-                    <h1 class="no-product-heading">No Product Found</h1>
-                    <img src="images/product-not-found.png" alt="No products available" class="no-product-image">
-                    <p class="no-product-text">We're sorry, but it seems we can't find the product you're looking for. Try searching for another flavor!</p>
-                </div>
-            `;
-        }
+              <div class="no-product-container">
+                  <h1 class="no-product-heading">No Product Found</h1>
+                  <img src="images/product-not-found.png" alt="No products available" class="no-product-image">
+                  <p class="no-product-text">We're sorry, but it seems we can't find the product you're looking for. Try searching for another flavor!</p>
+              </div>
+          `;
+      }
 
       products.forEach((product) => {
             let box = document.createElement("div");
@@ -44,21 +44,24 @@ function displayProducts(products) {
             box.setAttribute("id", product.id);
 
             box.innerHTML = `
-                                                      <div class="image-wrapper">
-                                                                  <div class="off">-${product.off}%</div>
-                                                                  <img src="${product.image}" alt="">
-                                                                  <div class="cat-label">${flavorName}</div>
-                                                      </div>
-                                                      <div class="name-price">
-                                                                  <div class="name">${product.name}</div>
-                                                                  <div class="price">$${product.price}</div>
-                                                      </div>
-                                                      <div class="description">${product.description}</div>
-                                                      <div class="qty">
-                                                                  <span class="decrease">-</span>
-                                                                  <span class="pcs">1</span>
-                                                                  <span class="increase">+</span>
-                                                      </div>`;
+              <div class="image-wrapper">
+                  <div class="off">-${product.off}%</div>
+                  <img src="${product.image}" alt="">
+                  <div class="cat-label">${flavorName}</div>
+                  <div class="quick-view-icon">
+                      <i class="fas fa-eye"></i>
+                  </div>
+              </div>
+              <div class="name-price">
+                  <div class="name">${product.name}</div>
+                  <div class="price">$${product.price}</div>
+              </div>
+              <div class="description">${product.description}</div>
+              <div class="qty">
+                  <span class="decrease">-</span>
+                  <span class="pcs">1</span>
+                  <span class="increase">+</span>
+              </div>`;
 
             let addToCartButton = document.createElement("button");
             let existingCartItem = cartItems.find((item) => item?.itemId == product.id);
@@ -72,10 +75,13 @@ function displayProducts(products) {
 
             box.appendChild(addToCartButton);
 
+            box.querySelector(".quick-view-icon").addEventListener("click", () => {
+                  showQuickView(product);
+            });
+
             productsSection?.appendChild(box);
       });
 
-      handleQuantityButtonsInProductCard();
 }
 
 function displayFlavorFilter() {
@@ -237,16 +243,16 @@ function displayCartItems() {
                   itemLi.innerHTML = `
                                                             <img src="${product.image}" alt="">
                                                             <div class="text">
-                                                                        <span class="name">${product.name}</span><br>
-                                                                        <span class="qty">${ci.pcs}</span> x ${product.price} <br>
+                                                                        <span class="name">${product.name}</span>
+                                                                        <div class="qty qtycart">
+                                                                              <span class="decrease decreasecart">-</span>
+                                                                              <span class="pcs pcscart">${ci.pcs}</span>
+                                                                              <span class="increase increasecart">+</span>
+                                                                        </div>
                                                                         <div class="price">$${ci.amount}</div>
                                                                         <i class="fa fa-trash remove-cart-item-btn" aria-hidden="true"></i>
                                                             </div>
-                                                            <div class="qty qtycart">
-                                                                        <span class="decrease decreasecart">-</span>
-                                                                        <span class="pcs pcscart">${ci.pcs}</span>
-                                                                        <span class="increase increasecart">+</span>
-                                                            </div>
+                                                            
                                                 `;
 
                   cartUlList.appendChild(itemLi);
@@ -283,6 +289,7 @@ function handleQuantityButtonsInProductCard() {
             }
       });
 }
+handleQuantityButtonsInProductCard();
 
 function handleQuantityButtonsInCart() {
       const cartList = document.querySelector(".cart-list-items");
@@ -340,161 +347,6 @@ function handleQuantityButtonsInCart() {
       });
 }
 
-
-// Add items to wishlist
-
-function addToWishlist(e) {
-    let wishlistItemId = e.target.closest(".box").getAttribute("id");
-    let pcs = parseInt(e.target.closest(".box").querySelector(".pcs").textContent, 10);
-
-    // Ensure pcs is a valid number
-    if (isNaN(pcs) || pcs <= 0) {
-        showToast("Please select the number of cups you want!");
-        return;
-    }
-
-    let existingWishlistItem = wishlistItems.find(item => item.itemId == wishlistItemId);
-    let item = products_list.find(item => item.id == wishlistItemId);
-    let amount = item.price * pcs;
-
-    if (existingWishlistItem) {
-        existingWishlistItem.pcs += pcs; // Increment by the correct number of pcs
-        existingWishlistItem.amount = existingWishlistItem.pcs * item.price;
-        showToast(`${pcs} more ${item.name} ice cream/s successfully added to the wishlist!`);
-    } else {
-        wishlistItems.push({
-            itemId: wishlistItemId,
-            pcs: pcs,  // Ensure pcs is a number
-            amount: amount
-        });
-        showToast(`${pcs} ${item.name} ice cream/s successfully added to the wishlist!`);
-    }
-
-    localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
-    displayWishlistItems();
-}
-
-
-
-
-function handleRemoveButtonInWishlist() {
-    let removeBtns = document.querySelectorAll(".remove-wishlist-item-btn");
-    removeBtns.forEach(btn => {
-        btn.addEventListener("click", () => {
-            let itemId = btn.closest('li').getAttribute("id");
-            wishlistItems = wishlistItems.filter(item => item.itemId !== itemId);
-
-            localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
-            displayWishlistItems(); // Update the wishlist display
-
-            // Reset button text to "Add to Wishlist" if necessary
-            const productBox = document.querySelector(`.box[id='${itemId}']`);
-            if (productBox) {
-                const addToWishlistButton = productBox.querySelector(".wishlist-btn");
-                addToWishlistButton.innerHTML = '<i class="fa fa-heart"></i>'; // Reset icon and text
-            }
-        });
-    });
-}
-
-
-function displayWishlistItems() {
-    const wishlistUlList = document.querySelector(".wishlist-list-items");
-    wishlistUlList.innerHTML = "";
-
-    if (wishlistItems.length > 0) {
-        document.querySelector(".empty-wishlist").classList.remove("active");
-        document.querySelector(".no-empty-wishlist").classList.add("active");
-    } else {
-        document.querySelector(".empty-wishlist").classList.add("active");
-        document.querySelector(".no-empty-wishlist").classList.remove("active");
-    }
-
-    wishlistItems.forEach(wi => {
-        let itemLi = document.createElement("li");
-        itemLi.setAttribute("id", wi.itemId);
-        let product = products_list.find(p => p.id == wi.itemId);
-    
-        if (product) {
-            itemLi.innerHTML = `
-                <img src="${product.image}" alt="">
-                <div class="text">
-                    <span class="name">${product.name}</span><br>
-
-                    <span class="qty">${ci.pcs}</span> x ${product.price} <br>
-                    <div class="price">$${ci.amount}</div>
-                    <i class="fa fa-trash remove-cart-item-btn" aria-hidden="true"></i>
-                </div>
-                <div class="qty qtycart">
-                    <span class="decrease decreasecart">-</span>
-                    <span class="pcs pcscart">${ci.pcs}</span>
-                    <span class="increase increasecart">+</span>
-
-                </div>
-            `;
-            wishlistUlList.appendChild(itemLi);
-            handleRemoveButtonInWishlist();  // Attach remove functionality
-    
-            let moveToCartBtn = itemLi.querySelector(".move-to-cart");
-            moveToCartBtn.addEventListener("click", () => moveToCart(wi.itemId));
-        }
-    });
-    
-}
-
-
-// Function to move item from wishlist to cart
-function moveToCart(wishlistItemId) {
-    // Find the item in wishlist
-    let wishlistItemIndex = wishlistItems.findIndex(item => item.itemId == wishlistItemId);
-    if (wishlistItemIndex > -1) {
-        let wishlistItem = wishlistItems[wishlistItemIndex];
-
-        // Check if the item already exists in the cart
-        let existingCartItem = cartItems.find(item => item.itemId == wishlistItemId);
-        if (existingCartItem) {
-            existingCartItem.pcs += wishlistItem.pcs; // Update quantity if it already exists
-            existingCartItem.amount = existingCartItem.pcs * products_list.find(p => p.id == wishlistItemId).price; // Update amount
-            showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} moved to cart!`);
-        } else {
-            cartItems.push({
-                itemId: wishlistItem.itemId,
-                pcs: wishlistItem.pcs,
-                amount: wishlistItem.amount
-            });
-            showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} added to cart!`);
-        }
-
-        // Remove the item from the wishlist
-        wishlistItems.splice(wishlistItemIndex, 1);
-        localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
-
-        // Re-display the wishlist and cart items
-        displayWishlistItems();
-        displayCartItems();
-    }
-}
-
-
-// Scroll animation
-
-
-
-document.addEventListener("DOMContentLoaded", () => {
-      // Apply ScrollReveal to products
-      const productBoxes = document.querySelectorAll(".products-box .box");
-      productBoxes.forEach((box) => {
-            sr.reveal(box, {
-                  origin: "left",
-                  distance: "80px",
-                  duration: 600,
-                  easing: "ease-in",
-                  interval: 400,
-                  reset: true,
-            });
-      });
-});
-
 function createSearchBar() {
       const searchBarContainer = document.querySelector(".search-container");
 
@@ -552,3 +404,56 @@ function handleSearchInput() {
       });
 }
 
+function showQuickView(product) {
+      const overlay = document.getElementById("overlay");
+
+      // Set the inner HTML of overlay with the product details in two sections
+      overlay.innerHTML = `
+          <div class="quick-view-popup">
+              <span class="close-btn">&times;</span>
+              <div class="popup-content">
+                  <!-- Left section for the image -->
+                  <div class="left-section">
+                      <img src="${product.image}" alt="${product.name}" class="quick-view-image"/>
+                  </div>
+                  <!-- Right section for the text content -->
+                  <div class="right-section">
+                      <h2>${product.name}</h2>
+                      <p>${product.description}</p>
+                      <div class="price">Price: $${product.price}</div>
+                  </div>
+              </div>
+          </div>
+      `;
+
+      // Show the overlay
+      overlay.style.display = "flex";
+
+      // Close popup on clicking the close button
+      overlay.querySelector(".close-btn").addEventListener("click", () => {
+            overlay.style.display = "none";
+      });
+
+      // Close popup when clicking outside of it
+      overlay.addEventListener("click", (e) => {
+            if (e.target === overlay) {
+                  overlay.style.display = "none";
+            }
+      });
+}
+
+function openModal() {
+      document.getElementById("quickViewModal").style.display = "flex";
+}
+
+function closeModal() {
+      document.getElementById("quickViewModal").style.display = "none";
+}
+
+// Close modal when clicking outside content
+window.onclick = function (event) {
+      const modal = document.getElementById("quickViewModal");
+      if (event.target === modal) {
+            modal.style.display = "none";
+      }
+};
diff --git a/styles/home.css b/styles/home.css
index b455c71f..1e4d8651 100644
--- a/styles/home.css
+++ b/styles/home.css
@@ -6,7 +6,7 @@
     flex-direction: row;
     position: relative;
     gap: 25px;
-    background: linear-gradient(to bottom, var(--body-color), #ffabd2);
+    background: linear-gradient(to top, var(--body-color), #ffabd2);
 }
 
 .home .text {
@@ -44,7 +44,7 @@
     background-size: cover;
     background-repeat: no-repeat;
     transition: 0.4s;
-    filter: brightness(70%);
+    filter: brightness(90%);
 
 }
 
@@ -135,7 +135,7 @@
 }
 
 .service-card {
-    box-shadow: 0 0 15px rgb(223, 223, 223);
+    /* box-shadow: 0 0 15px rgb(223, 223, 223); */
     flex: 1 1 300px;
     background-size: calc(2*16px) calc(2*16px);
     border-radius: 10px;
@@ -144,7 +144,7 @@
 }
 
 .service-card1:hover {
-    box-shadow: 3px 3px 12px var(--secondary-color);
+    /* box-shadow: 3px 3px 12px var(--secondary-color); */
 }
 
 .service-card>div {
@@ -157,7 +157,7 @@
     padding: 17px 10px;
     gap: 25px;
     flex-direction: column;
-    border-top: 5px solid var(--secondary-color);
+    /* border-top: 5px solid var(--secondary-color); */
 }
 
 .service-card:hover {
@@ -184,6 +184,7 @@
     line-height: 25px;
     text-align: center;
     font-family: var(--main-font);
+    color: #5b5b5b;
 }
 
 .service-card img {
@@ -279,19 +280,14 @@
     margin: 1%;
     display: flex;
     align-items: center;
-    border-radius: 15px;
+    border-radius: 5px;
     padding: 20px;
     box-shadow: var(--box-shadow);
     background: transparent;
     cursor: pointer;
     gap: 22px;
     transition: background 0.3s ease, transform 0.3s ease;
-}
-
-.feature-box:hover {
-    background: rgba(255, 255, 255, 0.1);
-    transform: scale(1.05);
-    box-shadow: 3px 3px 12px var(--secondary-color);
+    border: 2px solid var(--secondary-color);
 }
 
 .icon-circle {
@@ -318,12 +314,6 @@
 
 .feature-box img {
     transition: 0.3s;
-    /* added transition on image inside feature box */
-}
-
-.feature-box:hover img {
-    transform: scale(1.12);
-    /* added hover effect on img */
 }
 
 .feature-text {
@@ -339,26 +329,17 @@
     text-align: left;
     font-size: 1.26em;
     margin: 17px 0;
-    /* Keeping the margin from patch-1 */
     font-weight: bold;
     transition: color 0.3s ease;
 }
 
-.feature-box:hover .feature-text h3 {
-    color: #a10e70;
-}
-
 .feature-text p {
     color: #757575;
     font-size: 1em;
     transition: color 0.3s ease;
+    text-align: left;
 }
 
-.feature-box:hover .feature-text p {
-    color: #b0b0b0;
-}
-
-
 /* -------------reviews section styles------------------- */
 
 /* Review box styles */
@@ -373,37 +354,10 @@
     position: relative;
     flex: 1 1 400px;
     padding: 15px;
-    border-radius: 10px;
-    box-shadow: var(--box-shadow);
+    border-radius: 5px;
     cursor: pointer;
     transition: 0.3s;
-}
-
-.review-box:hover {
-    transform: scale(1.05);
-    /* box-shadow: 0 8px 16px rgb(0, 0, 0); */
-}
-
-/* Remove border for the first review box */
-#box_1 {
-    border: none;
-    border-radius: 0px;
-    box-shadow: none;
-    cursor: default;
-    background-color: #f7f7f7;
-}
-
-#box_1:hover {
-    transform: none;
-}
-
-/* Style the h2 font inside the first review */
-#box_1 h1 {
-    font-size: 40px;
-    /* Reduced font size for the title */
-    color: #333;
-    font-weight: bold;
-    background-color: inherit;
+    background-color: var(--body-color);
 }
 
 .review-box .quote {
@@ -448,7 +402,8 @@
 .review-box .text {
     margin-top: 10px;
     font-size: 20px;
-    line-height: 20px;
+    line-height: 25px;
+    margin: 15px 0;
 }
 
 /* Our flavors section  */
@@ -481,8 +436,6 @@
     object-fit: cover;
     border-radius: 50%;
     border: 10px solid rgba(211, 211, 211, 0.4);
-    ;
-    /* Border around the image */
 }
 
 .flavor-item h3 {
@@ -584,7 +537,7 @@ input[type="email"] {
     margin-top: 10px;
     text-align: center;
     text-decoration: none;
-    margin-top: 15px;
+    margin-top: 0px;
     color: black;
 }
 
@@ -615,6 +568,10 @@ input[type="email"] {
         width: calc(45% - 15px);
         /* Adjust for 2 boxes per row */
     }
+    .popup-content {
+        width: 90%;
+        max-width: 600px;
+    }
 }
 
 @media (max-width: 768px) {
@@ -623,3 +580,67 @@ input[type="email"] {
         /* 1 box per row on smaller screens */
     }
 }
+
+@media (max-width: 768px) {
+
+    .popup-left {
+        display: none;
+    }
+    
+    /* Make popup content full width on mobile */
+    .popup-content {
+        flex-direction: column;
+        width: 90%;
+        max-width: 500px;
+        height: auto;
+        padding: 20px;
+    }
+
+    .popup-right {
+        width: 100%;
+    }
+
+    .popup h2 {
+        font-size: 24px;
+        margin-bottom: 10px;
+    }
+
+    .popup .signup-btn {
+        font-size: 14px;
+    }
+    
+}
+
+#close-btn2 {
+    position:absolute;
+    top:5px;
+    right:5px;
+    font-size: 30px;
+    width: 40px; 
+    height: 40px;
+    background-color: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    padding: 2px;
+    color: var(--secondary-color);
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+    text-align: center;
+    border: 1px solid var(--secondary-color);
+    transition: 0.3s;
+}
+#close-btn2:hover {
+    transform: scale(1);
+    color: white;
+    background-color: var(--secondary-color); 
+}
+
+#services, #reviewsSection {
+    background-color: var(--secondary-color);
+    padding-block: 50px;
+}
+#services h1, #reviewsSection h1 {
+    background-color: var(--body-color);
+    color: var(--secondary-color);
+}
\ No newline at end of file
diff --git a/styles/login-signup.css b/styles/login-signup.css
index 46c065db..2b0d5498 100644
--- a/styles/login-signup.css
+++ b/styles/login-signup.css
@@ -1,259 +1,259 @@
 body {
-    padding: 25px 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    min-height: 100dvh;
+  padding: 25px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  min-height: 100dvh;
 }
 
 #logo {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
 }
 
 form {
-    width: 100%;
-    max-width: 450px;
+  width: 100%;
+  max-width: 450px;
 }
 
 #name-fields {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
 }
 
 #first-name-field,
 #last-name-field {
-    flex: 1 1 200px;
+  flex: 1 1 200px;
 }
 
 #first-name-field input,
 #last-name-field input {
-    padding: 15px 12px;
-    width: 100%;
+  padding: 15px 12px;
+  width: 100%;
 }
 
 .input-fields {
-    margin-bottom: 12px;
+  margin-bottom: 12px;
 }
 
 .input-fields input {
-    width: 100%;
-    padding: 15px 12px;
+  width: 100%;
+  padding: 15px 12px;
 }
 
 .input-field-header {
-    margin-bottom: 7px;
-    font-weight: 550;
+  margin-bottom: 7px;
+  font-weight: 550;
+}
+
+.input-field:focus {
+  border: 2px solid #d91656;
+  box-shadow: 0 0 8px rgba(237, 59, 246, 0.6);
+  transition: box-shadow 0.3s;
 }
 
 .password-container {
-    position: relative;
+  position: relative;
 }
 
 .password-container input {
-    width: 100%;
+  width: 100%;
 }
 
 /* Style the eye icon */
 .password-container i {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
 }
 
-.check-container{
-    display: flex;
-    align-items:center ;
-    padding-left: 5px;
+.check-container {
+  display: flex;
+  align-items: center;
+  padding-left: 5px;
 }
 .check-button {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 15px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 15px;
 }
 
 .check-button input {
-    height: 15px;
-    width: 15px;
-    cursor: pointer;
+  height: 15px;
+  width: 15px;
+  cursor: pointer;
 }
 
 .check-button span {
-    margin-left: 8px;
-    font-size: 14px;
+  margin-left: 8px;
+  font-size: 14px;
 }
-.forget-button{
-    width: 50%;
+.forget-button {
+  width: 50%;
 }
 
 .signin-btn button {
-    width: 100%;
-    border-radius: auto;
-    margin-top: 15px;
-}
-.sep-container{
-    margin-top: 20px;
-    width: 100%;
-    height: 20px;
-    display: flex;
-    justify-content: center;
-    color: gray;
-    font-size: 14px;
-}
-.sep-line{
-    height: 1px;
-    width: 50px;
-    border: 1px solid rgb(168, 168, 168);
-    margin: 10px;
+  width: 100%;
+  border-radius: auto;
+  margin-top: 15px;
+}
+.sep-container {
+  margin-top: 20px;
+  width: 100%;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  color: gray;
+  font-size: 14px;
+}
+.sep-line {
+  height: 1px;
+  width: 50px;
+  border: 1px solid rgb(168, 168, 168);
+  margin: 10px;
 }
 
 .terms {
-    margin-top: 10px;
-    max-width: 450px;
-    width: 100%;
-    text-align: center;
-    margin-bottom: 14px;
-    font-size: 14px;
+  margin-top: 10px;
+  max-width: 450px;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 14px;
+  font-size: 14px;
 }
 
 .terms a {
-    text-decoration: none;
-    color: var(--main-color);
+  text-decoration: none;
+  color: var(--main-color);
 }
 
 #line-container {
-    font-size: 14px;
+  font-size: 14px;
 }
 
 .register-now-link {
-    margin-left: 3px;
-    text-decoration: none;
-    color: var(--main-color);
+  margin-left: 3px;
+  text-decoration: none;
+  color: var(--main-color);
 }
 
 .register-now-link:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .sign-in {
-    margin-top: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 28px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 28px;
 }
 
 .social-links {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    margin-top: 20px;
-    max-width: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: 20px;
+  max-width: 450px;
 }
 
 .social-links button {
-    width: 100%;
-    background-color: transparent;
-    background-image: none;
-    border-radius: 7px;
-    margin-bottom: 15px;
-    color: black;
+  width: 100%;
+  background-color: transparent;
+  background-image: none;
+  border-radius: 7px;
+  margin-bottom: 15px;
+  color: black;
 }
 
 .social-links img {
-    margin-right: 5px;
+  margin-right: 5px;
 }
 
 .social-links img {
-    margin-right: 8px;
-    vertical-align: middle;
+  margin-right: 8px;
+  vertical-align: middle;
 }
 
 .social-links button span {
-    line-height: 20px;
-    padding-top: 4px;
+  line-height: 20px;
+  padding-top: 4px;
 }
 .input-field::placeholder {
-    color: gray;      
-    font-size: 16px;
-    font-weight: bold; 
-    opacity: 1;       
-}
-.input-field{
-    margin-top: 10px;
-    border-radius: 7px;
-    border: 1px solid black;
-    font-size: 16px;
-    letter-spacing: 1px;
-}
-.social-link-2{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 10px;
-    gap: 5px;
-}
-.social-link-2 a{
-    background-color: transparent;
-    color: none;
-    border: solid 1px black;
-    padding: 8px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all .38s ease-in-out;
-    margin-left: 5px;
+  color: gray;
+  font-size: 16px;
+  font-weight: bold;
+  opacity: 1;
+}
+.input-field {
+  margin-top: 10px;
+  border-radius: 7px;
+  border: 1px solid black;
+  font-size: 16px;
+  letter-spacing: 1px;
+}
+.social-link-2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+  gap: 5px;
+}
+.social-link-2 a {
+  background-color: transparent;
+  color: none;
+  border: solid 1px black;
+  padding: 8px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.38s ease-in-out;
+  margin-left: 5px;
 }
 .social-link-2 a:hover {
-    transform: scale(1.2);
-    box-shadow: 1px 1px 6px 1px #D91656;
-  }
-
-
-
-
-   
+  transform: scale(1.2);
+  box-shadow: 1px 1px 6px 1px #d91656;
+}
 
 /* signup page  */
 
-
 .error {
-    border: 2px solid red;
+  border: 2px solid red;
 }
 
 .error-message {
-    color: red;
-    font-size: 12px;
-    margin-top: 5px;
-    display: none;
+  color: red;
+  font-size: 12px;
+  margin-top: 5px;
+  display: none;
 }
 
 .show-message {
-    display: block;
+  display: block;
 }
 #password-strength-meter {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 #strength-bar {
-    height: 8px;
-    width: 0;
-    background-color: #ff4d4d;
-    transition: width 0.3s ease;
+  height: 8px;
+  width: 0;
+  background-color: #ff4d4d;
+  transition: width 0.3s ease;
 }
 
 #password-strength-text {
-    margin-top: 5px;
-    font-size: 14px;
-    color: #666;
+  margin-top: 5px;
+  font-size: 14px;
+  color: #666;
 }
diff --git a/styles/products.css b/styles/products.css
index 419b18c0..212b58c3 100644
--- a/styles/products.css
+++ b/styles/products.css
@@ -42,7 +42,7 @@
 
 .categories-wrapper button:not(.active) {
     background-image: none;
-    color: var(--ternary-color);
+    color: var(--main-color);
     background-color: transparent;
 }
 
@@ -88,7 +88,7 @@
 }
 
 .products .products-box .box .off,
-.products .products-box .box .wish {
+.products .products-box .quick-view-icon  {
     position: absolute;
     width: 60px;
     height: 40px;
@@ -96,23 +96,24 @@
     text-align: center;
     top: 15px;
     left: 0px;
-    background-color: var(--main-color);
+    background: rgba(0, 0, 0, 0.5);
     color: var(--body-color);
     padding: 7px 10px;
     display: flex;
     align-items: center;
     justify-content: center;
+    border-radius: 0 25px 25px 0;
 
 }
 
-.products .products-box .box .wish {
+.products .products-box .quick-view-icon {
     left: auto;
-    right: -60px;
-    transition: right 0.2s ease;
-}
-
-.products .products-box .box:hover .wish {
     right: 0;
+    border-radius: 25px 0 0 25px;
+    transition: 0.3s;
+}
+.products .products-box .quick-view-icon:hover {
+    background: var(--secondary-color);
 }
 
 .products .products-box .box:hover {
@@ -131,13 +132,10 @@
     width: 100%;
     display: flex;
     align-items: center;
-    /* Vertically center the name and price */
     justify-content: space-between;
-    /* Keep name and price at opposite ends */
     font-size: 22px;
     padding: 10px 1px;
     text-align: center;
-    /* Centers the text within each item */
 }
 
 .products .products-box .box .description {
@@ -152,68 +150,6 @@
     justify-content: center;
 }
 
-.qtycart {
-    width: fit-content;
-    border: 2px solid rgba(80, 79, 79, 0.158);
-    border-radius: 5px;
-    padding: 0;
-    display: flex;
-}
-
-.decreasecart {
-    padding: 0;
-}
-
-.increasecart {
-    cursor: pointer !important;
-    padding: 0;
-}
-
-.pcscart {
-    padding: 0;
-}
-
-/* Cart container */
-.cart-list-items {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-}
-
-.cart-list-items li {
-    position: relative; /* Allows the remove button to be positioned at the top-right */
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px;
-    margin-bottom: 15px;
-    background-color: #f9f9f9;
-    border-radius: 8px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}
-
-.cart-list-items li img {
-    width: 80px; /* Increase image size */
-    height: auto;
-    border-radius: 8px;
-    margin-right: 15px;
-}
-
-/* Remove button styling */
-.remove-cart-item-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 20px;
-    color: #888;
-    cursor: pointer;
-}
-
-.remove-cart-item-btn:hover {
-    color: red;
-}
-
 /* Product details */
 .text {
     flex: 1;
@@ -240,32 +176,6 @@
     color: #333;
 }
 
-/* Quantity selectors */
-.qtycart {
-    position: absolute;
-    bottom: 10px; /* Position at bottom right */
-    right: 10px;
-    display: flex;
-    align-items: center;
-    border: 2px solid rgba(80, 79, 79, 0.158);
-    border-radius: 5px;
-    padding: 0;
-}
-
-.qtycart .pcs {
-    margin: 0 ;
-    font-size: 16px;
-    font-weight: 500;
-}
-
-.qtycart span {
-    background-color: #fff;
-    padding: 5px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-weight: 600;
-}
-
 .qtycart span:hover {
     background-color: #f1f1f1;
 }
@@ -346,4 +256,138 @@
     margin-top: 1.25rem;
     color: #640D5F;
     line-height: 1.5; 
-}
\ No newline at end of file
+}
+
+/* Quick-View Icon Display */
+
+.image-wrapper {
+    position: relative;
+}
+/* .quick-view-icon {
+    position: absolute;
+    width: 60px;
+    height: 40px;
+    font-size: 20px;
+    text-align: center;
+    top: 15px;
+    left: auto;
+    right: 0;
+    background-color: var(--main-color);
+    color: var(--body-color);
+    padding: 7px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+} */
+
+.image-wrapper:hover .quick-view-icon {
+    opacity: 1;
+}
+
+
+
+/* Overlay background */
+#overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+/* Quick view pop-up styling */
+.quick-view-popup {
+    background: #fff;
+    padding: 20px;
+    width: 80%;
+    max-width: 700px;
+    border-radius: 10px;
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+/* Close button */
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 24px;
+    color: #333;
+    cursor: pointer;
+}
+
+
+.close-btn {
+    position:absolute;
+    top:5px;
+    right:5px;
+    font-size: 30px;
+    width: 40px; 
+    height: 40px;
+    background-color: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    padding: 2px;
+    color: var(--secondary-color);
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+    text-align: center;
+    border: 1px solid var(--secondary-color);
+    transition: 0.3s;
+}
+.close-btn:hover {
+    transform: scale(1);
+    color: white;
+    background-color: var(--secondary-color); 
+}
+
+
+/* Content container inside the popup */
+.popup-content {
+    display: flex;
+    gap: 20px;
+}
+
+/* Left section for the image */
+.left-section {
+    flex: 1;
+}
+
+.quick-view-image {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+}
+
+/* Right section for text content */
+.right-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.right-section h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.right-section p {
+    font-size: 16px;
+    color: #555;
+    margin-bottom: 20px;
+}
+
+.right-section .price {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+}
diff --git a/styles/styles.css b/styles/styles.css
index 936c1d54..60f5becf 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -18,9 +18,9 @@
 
 :root {
     --ternary-color: #640D5F;
-    --main-color: #D91656;
+    --main-color: rgb(217, 22, 86);
     --body-color: #ffffff;
-    --secondary-color: #EE66A6;
+    --secondary-color: rgb(238, 102, 166);
     --background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 87% at 26% 20%, rgba(255, 255, 255, 0.41) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
     --main-font: "Afacad Flux", sans-serif;
     --heading-font: "Afacad Flux", sans-serif;
@@ -398,8 +398,8 @@ h3 {
 
 .cart ul li img {
     float: left;
-    height: 50px;
-    width: 50px;
+    min-height: 80px;
+    width: 80px;
     margin-right: 10px;
 }
 
@@ -408,6 +408,33 @@ h3 {
     font-size: 13px;
     line-height: 17px;
 }
+.qtycart {
+    margin: 0;
+}
+
+.qtycart {
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    border: 2px solid rgba(80, 79, 79, 0.158);
+    border-radius: 5px;
+    padding: 0;
+    margin: 10px 0;
+}
+
+.qtycart .pcs {
+    margin: 0 ;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.qtycart span {
+    background-color: #fff;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 600;
+}
 
 .cart ul li .text .price {
     font-weight: 600;
@@ -761,7 +788,7 @@ h3 {
         transform: translateX(0px);
     }
 }
-
+/* 
 .leftani {
     animation: appearleft linear;
     animation-timeline: view();
@@ -772,7 +799,7 @@ h3 {
     animation: appearright linear;
     animation-timeline: view();
     animation-range: entry 0 cover 40%;
-}
+} */
 
 
 @keyframes appearright {
@@ -808,11 +835,11 @@ h3 {
     }
 }
 
-.bottomani {
+/* .bottomani {
     animation: appearbottom linear;
     animation-timeline: view();
     animation-range: entry 0 cover 40%;
-}
+} */
 
 /* gallery Section */
 
@@ -841,25 +868,3 @@ h3 {
 }
 
 
-/*Added a close button(X)*/
-#close-btn2 {
-    position:absolute;
-    top:1;
-    right:0;
-    font-size: 30px;
-    width: 40px; 
-    height: 40px;
-    cursor: pointer;
-    padding: 2px;
-    border-radius: 25%;
-    display: flex;
-    align-items: center;
-    justify-content: center; 
-    text-align: center;
-}
-/*Hovering effect on close button*/
-#close-btn2:hover {
-    transform: scale(1);
-    color: #ff69b4;
-    background-color: rgb(235, 192, 211); 
-}
diff --git a/styles/view.css b/styles/view.css
new file mode 100644
index 00000000..4f7bd274
--- /dev/null
+++ b/styles/view.css
@@ -0,0 +1,131 @@
+body {
+    font-family: Arial, sans-serif;
+}
+
+.product-container {
+    position: relative;
+    display: inline-block;
+}
+
+.quick-view-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: transparent;
+    border: none;
+    color: #333;
+    cursor: pointer;
+    font-size: 24px;
+}
+
+/* Modal styling */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    display: flex;
+    background-color: #fff;
+    width: 80%;
+    max-width: 700px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.modal-left {
+    flex: 1;
+    padding: 20px;
+}
+
+.modal-product-img {
+    width: 100%;
+    border-radius: 8px;
+}
+
+.modal-right {
+    flex: 1;
+    padding: 20px;
+}
+
+.modal-right h2 {
+    margin-top: 0;
+    font-size: 24px;
+}
+
+.modal-right p {
+    margin: 10px 0;
+}
+
+.close {
+    position:absolute;
+    top:5px;
+    right:5px;
+    font-size: 30px;
+    width: 40px; 
+    height: 40px;
+    background-color: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    padding: 2px;
+    color: var(--secondary-color);
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+    text-align: center;
+    border: 1px solid var(--secondary-color);
+    transition: 0.3s;
+}
+.close:hover {
+    transform: scale(1);
+    color: white;
+    background-color: var(--secondary-color); 
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .modal-content {
+        flex-direction: column; /* Stack content vertically on smaller screens */
+    }
+
+    .modal-right h2 {
+        font-size: 20px; /* Adjust heading size for mobile */
+    }
+
+    .modal-right p, .modal-right .price {
+        font-size: 16px; /* Adjust text size for readability */
+    }
+
+    .quick-view-btn, .close {
+        font-size: 20px; /* Adjust button size */
+    }
+
+    .modal {
+        padding: 10px; /* Add padding around the modal for smaller screens */
+    }
+}
+
+@media (max-width: 480px) {
+    .modal-content {
+        width: 95%; /* Further reduce modal width for very small screens */
+    }
+
+    .close {
+        font-size: 24px; /* Smaller close button */
+    }
+
+    .modal-right h2 {
+        font-size: 18px;
+    }
+
+    .modal-right p, .modal-right .price {
+        font-size: 14px;
+    }
+}
\ No newline at end of file
diff --git a/subscriptions.html b/subscriptions.html
index cbe07a28..4aa67c36 100644
--- a/subscriptions.html
+++ b/subscriptions.html
@@ -209,7 +209,7 @@ <h4 style="margin-top: 15px;">Follow Us</h4>
                     <li><a href="#" class="social"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
                     <li><a href="#" class="social"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
                     <li><a href="#" class="social"><i class="fa-brands fa-linkedin-in"></i> Linkedin</a></li>
-                    <li><a href="#" class="social"><i class="fa-brands fa-x-twitter"></i> Twitter</a></li>
+                    <li><a href="#" class="social"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
                 </ul>
             </div>
             <div class="footer-col">
