diff --git a/berry_pops.html b/berry_pops.html
index 73df9fb..b5e8fc6 100644
--- a/berry_pops.html
+++ b/berry_pops.html
@@ -1,75 +1,59 @@
 <html lang="en">
- <head>
-  <meta charset="utf-8"/>
-  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-  <title>
-   Shop Items
-  </title>
-  <script src="https://cdn.tailwindcss.com">
-  </script>
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
- </head>
- <body class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 flex items-center justify-center min-h-screen">
-  <div class="max-w-4xl mx-auto p-6 bg-white rounded-lg shadow-md flex">
-   <div class="w-1/2">
-    <br>
-    <br>
-    <br>
-    <img alt="A pink cup of Van Leeuwen strawberry ice cream with several scoops on top" class="rounded-lg" height="400" src="/images/download (2).jpeg" width="400"/>
-   </div>
-   <div class="w-1/2 pl-6">
-    <h1 class="text-2xl font-bold text-red-700">
-     Berry Pops
-    </h1>
-    <div class="flex items-center my-2">
-     <span class="text-2xl font-bold text-red-700">
-      $18.99
-     </span>
-     <span class="text-gray-500 line-through ml-2">
-      $20.99
-     </span>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Shop Items</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 flex items-center justify-center min-h-screen">
+    <div class="max-w-4xl mx-auto p-6 bg-white rounded-lg shadow-md flex flex-wrap md:flex-nowrap">
+      <div class="w-full md:w-1/2 mb-6 md:mb-0">
+        <img
+          src="/basic-icecream-website/images/ice.jpg"
+          alt="A pink cup of Van Leeuwen strawberry ice cream with several scoops on top"
+          class="rounded-lg w-full h-auto object-cover"
+        />
+      </div>
+      <div class="w-full md:w-1/2 md:pl-6">
+        <h1 class="text-3xl font-bold text-red-700 mb-4">Berry Pops</h1>
+        <div class="flex items-center my-2">
+          <span class="text-2xl font-bold text-red-700">$18.99</span>
+          <span class="text-gray-500 line-through ml-2">$20.99</span>
+        </div>
+        <p class="text-gray-700 mb-6">
+          Berry Pops delivers a vibrant, fruity burst of mixed berries with
+          each bite, offering a refreshing balance of tartness and sweetness.
+          This dairy-free treat is ideal for those who love light and zesty
+          flavors. Reviews highlight its invigorating taste and the perfect mix
+          of berry flavors for a refreshing experience.
+        </p>
+        <ul class="mb-6">
+          <li>
+            <strong>SKU (Stock Keeping Unit):</strong> BPIC500ML
+          </li>
+          <li>
+            <strong>Availability:</strong>
+            <span class="text-red-700">Limited</span>
+          </li>
+          <li>
+            <strong>Flavor:</strong>
+            <span class="text-red-700">Tangent and fruity</span>
+          </li>
+          <li>
+            <strong>Vendor:</strong>
+            <span class="text-red-700">Polar Bear</span>
+          </li>
+        </ul>
+        <a href="index.html">
+          <button class="px-6 py-2 bg-red-700 text-white rounded hover:bg-red-600 transition duration-300">
+            Go Back
+          </button>
+        </a>
+      </div>
     </div>
-    <p class="text-gray-700 mb-4">
-        Berry Pops delivers a vibrant, fruity burst of mixed berries with each bite, offering a refreshing balance of tartness and sweetness. This dairy-free treat is ideal for those who love light and zesty flavors. Reviews highlight its invigorating taste and the perfect mix of berry flavors for a refreshing experience.
-      </p>
-    <ul class="mb-4">
-     <li>
-      <strong>
-       SKU(Stock Keeping Unit):
-      </strong>
-      BPIC500ML
-     </li>
-     <li>
-      <strong>
-       Availability:
-      </strong>
-      <span class="text-red-700">
-       Limited
-      </span>
-     </li>
-     <li>
-      <strong>
-       Flavor:
-      </strong>
-      <span class="text-red-700">
-       Tangent and fruity
-      </span>
-     </li>
-     <li>
-      <strong>
-       Vendor:
-      </strong>
-      <span class="text-red-700">
-       Polar Bear
-      </span>
-     </li>
-    </ul>
-    <a href="index.html">
-      <button class="ml-4 px-6 py-2 bg-red-700 text-white rounded">
-        Go Back
-      </button>
-    </div>
-   </div>
-  </div>
- </body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/icecream-details.html b/icecream-details.html
index fbc923e..19ec7b7 100644
--- a/icecream-details.html
+++ b/icecream-details.html
@@ -4,53 +4,115 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ice Cream Details</title>
-    <link rel="stylesheet" href="styles.css"> <!-- Link your CSS file -->
-<style>
-    /* Circle styles */
-    .circle {
-        height: 24px;
-        width: 24px;
-        border-radius: 24px;
-        background-color: black;
-        position: fixed;
-        top: 0;
-        left: 0;
-        pointer-events: none;
-        z-index: 99999999;
-        /* Stays on top of all elements */
-    }
-</style>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        /* Basic Reset */
+        body, h1, h2, p {
+            margin: 0;
+            padding: 0;
+            font-family: 'Roboto', sans-serif; /* Modern font */
+        }
+
+        /* Body styles */
+        body {
+            background-color: #f9f9f9;
+            color: #333;
+            line-height: 1.6;
+        }
+
+        /* Header styles */
+        header {
+            background-color: #FF6F61; /* Ice cream color */
+            color: white;
+            text-align: center;
+            padding: 20px 0;
+        }
+
+        /* Main section styles */
+        main {
+            padding: 20px;
+            max-width: 1200px; /* Max width for content */
+            margin: auto; /* Center content */
+        }
+
+        /* Blog details section */
+        #blog-details {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
+            gap: 20px;
+            margin-top: 20px; /* Space above the blog details */
+        }
+
+        /* Blog detail article styles */
+        .blog-detail {
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+
+        .blog-detail:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        /* Image styles */
+        .blog-detail img {
+            width: 100%; /* Full width */
+            border-bottom: 1px solid #ddd;
+        }
+
+        /* Heading styles */
+        h2 {
+            color: #FF6F61; /* Ice cream color */
+            padding: 10px;
+            text-align: center;
+        }
+
+        /* Paragraph styles */
+        p {
+            padding: 0 15px 15px;
+        }
+
+        /* Footer styles */
+        footer {
+            text-align: center;
+            padding: 10px;
+            background-color: #FF6F61; /* Ice cream color */
+            color: white;
+            position: relative;
+            bottom: 0;
+            width: 100%;
+        }
+
+        /* Circle styles */
+        .circle {
+            height: 24px;
+            width: 24px;
+            border-radius: 50%;
+            background-color: black;
+            position: fixed;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            z-index: 9999; /* Stays on top of all elements */
+        }
+    </style>
 </head>
 <body>
     <!-- Circles -->
     <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
+    <!-- Additional circles can be created dynamically in the script below -->
+
     <header>
         <h1>Ice Cream Details</h1>
     </header>
+    
     <main>
         <section id="blog-details">
-
             <article class="blog-detail" id="journey-of-artic-delights">
-                <h2>The Journey of Artic Delights</h2>
+                <h2>The Journey of Artic Delights of love</h2>
                 <img src="https://plus.unsplash.com/premium_photo-1658526992090-e15722e684c0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aWNlY3JlYW0lMjBzaG9yfGVufDB8fDB8fHww" alt="The Journey of Artic Delights">
                 <p>Discover how our ice cream shop began its journey with a passion for creating unique flavors that delight the taste buds. From humble beginnings to a beloved local favorite, read about our story and what makes us special.</p>
                 <p>In this blog, we recount our early days of experimentation with ice cream flavors and the challenges we faced. You'll learn how community feedback shaped our menu and how we strive to bring smiles to our customers with every scoop.</p>
@@ -71,7 +133,7 @@ <h2>Chilling Adventures with Exotic Flavors</h2>
             </article>
 
             <article class="blog-detail" id="crafting-perfect-scoop">
-                <h2>Crafting the Perfect Scoop</h2>
+                <h2>Crafting the Perfect Scoop for you</h2>
                 <img src="https://images.unsplash.com/photo-1591261730540-1ab1db33ac78?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fGljZWNyZWFtJTIwc2hvcHxlbnwwfHwwfHx8MA%3D%3D" alt="Crafting the Perfect Scoop">
                 <p>Learn about our meticulous process of crafting the perfect ice cream scoop. We source only the finest ingredients and use artisanal methods to ensure every bite is a delicious experience.</p>
                 <p>In this article, we discuss our ingredient sourcing, the art of blending flavors, and the importance of quality in every scoop.</p>
@@ -83,12 +145,13 @@ <h2>Behind the Scenes at Artic Delights</h2>
                 <p>Get a sneak peek behind the scenes at our shop! Meet our passionate team and see how we create our delicious ice cream flavors daily.</p>
                 <p>This blog entry introduces our team members and highlights their roles in the ice cream making process, showcasing their dedication and love for creating delightful flavors.</p>
             </article>
-
         </section>
     </main>
+    
     <footer>
         <p>&copy; 2024 Artic Delights. All Rights Reserved.</p>
     </footer>
+
     <script>
         // Coordinates for the cursor
         const coords = { x: 0, y: 0 };
@@ -96,51 +159,36 @@ <h2>Behind the Scenes at Artic Delights</h2>
 
         // Colors for the circles
         const colors = [
-            "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
-            "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
-            "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
-            "#680060", "#60005f", "#48005f", "#3d005e"
+            "#FF6F61", "#F5B7B1", "#76D7C4", "#FAD7A1", "#F0B27A"
         ];
 
-        // Assign colors and initial position to each circle
-        circles.forEach(function (circle, index) {
-            circle.x = 0;
-            circle.y = 0;
-            circle.style.backgroundColor = colors[index % colors.length];
-        });
-
-        // Update the coordinates when the mouse moves
-        window.addEventListener("mousemove", function (e) {
-            coords.x = e.clientX;
-            coords.y = e.clientY;
+        // Create animated circles on mouse move
+        document.addEventListener("mousemove", (event) => {
+            coords.x = event.clientX;
+            coords.y = event.clientY;
+            createCircle();
         });
 
-        // Animation function to move the circles
-        function animateCircles() {
-            let x = coords.x;
-            let y = coords.y;
+        // Function to create and animate circles
+        function createCircle() {
+            const circle = document.createElement("div");
+            circle.classList.add("circle");
+            circle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+            circle.style.top = `${coords.y}px`;
+            circle.style.left = `${coords.x}px`;
+            document.body.appendChild(circle);
 
-            circles.forEach(function (circle, index) {
-                // Update the position and scale of each circle
-                circle.style.left = x - 12 + "px";
-                circle.style.top = y - 12 + "px";
-                circle.style.scale = (circles.length - index) / circles.length;
+            // Animation effect
+            setTimeout(() => {
+                circle.style.transform = "scale(0)";
+                circle.style.opacity = "0";
+            }, 10);
 
-                circle.x = x;
-                circle.y = y;
-
-                // Get the next circle in the sequence
-                const nextCircle = circles[index + 1] || circles[0];
-                x += (nextCircle.x - x) * 0.3;
-                y += (nextCircle.y - y) * 0.3;
+            // Remove circle from DOM after animation
+            circle.addEventListener("transitionend", () => {
+                circle.remove();
             });
-
-            // Repeat the animation
-            requestAnimationFrame(animateCircles);
         }
-
-        // Start the animation
-        animateCircles();
     </script>
 </body>
 </html>
diff --git a/images/ice.jpg b/images/ice.jpg
new file mode 100644
index 0000000..483e045
Binary files /dev/null and b/images/ice.jpg differ
diff --git a/index.html b/index.html
index a7d850c..f031b24 100644
--- a/index.html
+++ b/index.html
@@ -1102,6 +1102,15 @@ <h2>Billing Address</h2>
   left: 0;
   right: 0;
 }
+.footer{
+    padding-top: 20px;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 0.8em;
+    
+}
 .order .box:before {
   height: 3px;
   margin-top: -1px;
