diff --git a/book.html b/book.html
index 59309441..92a4c37b 100644
--- a/book.html
+++ b/book.html
@@ -30,7 +30,106 @@ <h1 id="logo">BuddyTrail</h1>
       </nav>
     </header>
    <main>
-    
+           <!-- cursor trail effect -->
+           <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>
+           <div class="circle"></div>
+       
+       <style>
+       .circle {
+                       height: 35px;
+                       width: 35px;
+                       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>
+       
+         <script>    const coords = { x: 0, y: 0 };
+           const circles = document.querySelectorAll(".circle");
+           
+           const colors = [
+             "#ffb56b",
+         "#fdaf69",
+         "#f89d63",
+         "#f59761",
+         "#ef865e",
+         "#ec805d",
+         "#e36e5c",
+         "#df685c",
+         "#d5585c",
+         "#d1525c",
+         "#c5415d",
+         "#c03b5d",
+         "#b22c5e",
+         "#ac265e",
+         "#9c155f",
+         "#950f5f",
+         "#830060",
+         "#7c0060",
+         "#680060",
+         "#60005f",
+         "#48005f",
+         "#3d005e"
+           ];
+           
+           circles.forEach(function (circle, index) {
+             circle.x = 0;
+             circle.y = 0;
+             circle.style.backgroundColor = colors[index % colors.length];
+           });
+           
+           window.addEventListener("mousemove", function(e){
+             coords.x = e.clientX;
+             coords.y = e.clientY;
+           });
+           
+           function animateCircles() {
+             let x = coords.x;
+             let y = coords.y;
+           
+             circles.forEach(function (circle, index) {
+               circle.style.left = x - 12 + "px";
+               circle.style.top = y - 12 + "px";
+           
+               circle.style.scale = (circles.length - index) / circles.length;
+           
+               circle.x = x;
+               circle.y = y;
+           
+               const nextCircle = circles[index + 1] || circles[0];
+               x += (nextCircle.x - x) * 0.3;
+               y += (nextCircle.y - y) * 0.3;
+             });
+           
+             requestAnimationFrame(animateCircles);
+           }
+           
+           animateCircles();</script>
+       </script>
    </main>
     <footer>
       <div class="footer-wrapper">
diff --git a/index.html b/index.html
index 427c6a13..9ad13a50 100644
--- a/index.html
+++ b/index.html
@@ -552,6 +552,106 @@ <h3>Beach Resort in Goa</h3>
               Explore More
             </button>
           </div>
+           <!-- cursor trail effect -->
+    <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>
+    <div class="circle"></div>
+
+<style>
+.circle {
+                height: 35px;
+                width: 35px;
+                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>
+
+  <script>    const coords = { x: 0, y: 0 };
+    const circles = document.querySelectorAll(".circle");
+    
+    const colors = [
+      "#ffb56b",
+  "#fdaf69",
+  "#f89d63",
+  "#f59761",
+  "#ef865e",
+  "#ec805d",
+  "#e36e5c",
+  "#df685c",
+  "#d5585c",
+  "#d1525c",
+  "#c5415d",
+  "#c03b5d",
+  "#b22c5e",
+  "#ac265e",
+  "#9c155f",
+  "#950f5f",
+  "#830060",
+  "#7c0060",
+  "#680060",
+  "#60005f",
+  "#48005f",
+  "#3d005e"
+    ];
+    
+    circles.forEach(function (circle, index) {
+      circle.x = 0;
+      circle.y = 0;
+      circle.style.backgroundColor = colors[index % colors.length];
+    });
+    
+    window.addEventListener("mousemove", function(e){
+      coords.x = e.clientX;
+      coords.y = e.clientY;
+    });
+    
+    function animateCircles() {
+      let x = coords.x;
+      let y = coords.y;
+    
+      circles.forEach(function (circle, index) {
+        circle.style.left = x - 12 + "px";
+        circle.style.top = y - 12 + "px";
+    
+        circle.style.scale = (circles.length - index) / circles.length;
+    
+        circle.x = x;
+        circle.y = y;
+    
+        const nextCircle = circles[index + 1] || circles[0];
+        x += (nextCircle.x - x) * 0.3;
+        y += (nextCircle.y - y) * 0.3;
+      });
+    
+      requestAnimationFrame(animateCircles);
+    }
+    
+    animateCircles();</script>
+</script>
 
           <div class="recommendation-item">
             <h3>Cultural Tour in Rajasthan</h3>
diff --git a/signUp.html b/signUp.html
index 04277f43..39e4ad1d 100644
--- a/signUp.html
+++ b/signUp.html
@@ -43,6 +43,28 @@ <h2>Create Account</h2>
             Sign up with Google
           </a>
         </div>
+          <!-- cursor trail effect -->
+     <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>
+     <div class="circle"></div>
 
         <p>Or sign up using your email:</p>
 
@@ -77,6 +99,83 @@ <h2>Create Account</h2>
         </div>
       </div>
     </div>
+    <style>
+      .circle {
+                      height: 35px;
+                      width: 35px;
+                      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>
+      
+      <script>    const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+        
+        const colors = [
+          "#ffb56b",
+      "#fdaf69",
+      "#f89d63",
+      "#f59761",
+      "#ef865e",
+      "#ec805d",
+      "#e36e5c",
+      "#df685c",
+      "#d5585c",
+      "#d1525c",
+      "#c5415d",
+      "#c03b5d",
+      "#b22c5e",
+      "#ac265e",
+      "#9c155f",
+      "#950f5f",
+      "#830060",
+      "#7c0060",
+      "#680060",
+      "#60005f",
+      "#48005f",
+      "#3d005e"
+        ];
+        
+        circles.forEach(function (circle, index) {
+          circle.x = 0;
+          circle.y = 0;
+          circle.style.backgroundColor = colors[index % colors.length];
+        });
+        
+        window.addEventListener("mousemove", function(e){
+          coords.x = e.clientX;
+          coords.y = e.clientY;
+        });
+        
+        function animateCircles() {
+          let x = coords.x;
+          let y = coords.y;
+        
+          circles.forEach(function (circle, index) {
+            circle.style.left = x - 12 + "px";
+            circle.style.top = y - 12 + "px";
+        
+            circle.style.scale = (circles.length - index) / circles.length;
+        
+            circle.x = x;
+            circle.y = y;
+        
+            const nextCircle = circles[index + 1] || circles[0];
+            x += (nextCircle.x - x) * 0.3;
+            y += (nextCircle.y - y) * 0.3;
+          });
+        
+          requestAnimationFrame(animateCircles);
+        }
+        
+        animateCircles();</script>
+    </script>
 
     <script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-app-compat.js"></script>
     <script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-auth-compat.js"></script>