diff --git a/appointment.html b/appointment.html
index 045c26d8..0f4c49ba 100644
--- a/appointment.html
+++ b/appointment.html
@@ -115,6 +115,48 @@
                 padding: 8px;
             }
         }
+
+        .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
     </style>
 </head>
 <body>
@@ -172,6 +214,7 @@
 
     <button type="submit">Make an Appointment</button>
 </form>
+<div class="cursor"></div>
 
 <script>
     document.getElementById('appointmentForm').addEventListener('submit', function(event) {
@@ -184,6 +227,34 @@
             document.getElementById('appointmentForm').reset();
         }, 500); // Simulate a delay for form submission
     });
+    const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
 </script>
 
 </body>
diff --git a/aptmnt.html b/aptmnt.html
index a1c55f6b..8b99cd17 100644
--- a/aptmnt.html
+++ b/aptmnt.html
@@ -115,6 +115,48 @@
                 padding: 8px;
             }
         }
+        
+        .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
     </style>
 </head>
 <body>
@@ -173,6 +215,37 @@
 
     <button type="submit">Make an Appointment</button>
 </form>
+<div class="cursor"></div>
+<script>
+    const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
+</script>
 
 </body>
 </html>
diff --git a/dex.html b/dex.html
index 1f878e31..198adfb8 100644
--- a/dex.html
+++ b/dex.html
@@ -22,6 +22,47 @@
       background-color: #3fbcc0;
       z-index: 9999;
     }
+    .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
         </style>
     </head>
     <body>
@@ -236,6 +277,7 @@ <h3 class="footer__title">Follow us</h3>
 
             <p class="footer__copy">&#169; Talo. All right reserved</p>
         </footer>
+        <div class="cursor"></div>
 
         <!--=============== SCROLL UP ===============-->
         <a href="#" class="scrollup" id="scroll-up">
@@ -243,6 +285,34 @@ <h3 class="footer__title">Follow us</h3>
         </a>
 
         <!--=============== MAIN JS ===============-->
+        <script>const cursor = document.querySelector(".cursor");
+
+            //follow cursor on mouse move
+            document.addEventListener("mousemove",(e)=>{
+                let x = e.pageX;
+                let y = e.pageY;
+            
+                cursor.style.top = y + "px";
+                cursor.style.left =x + "px";
+                cursor.style.display ="block";
+            
+                //cursor effects on mouse stopped
+                function mouseStopped(){
+                    cursor.style.display="none";
+            
+                }
+                clearTimeout(timeout);
+                timeout = setTimeout(mouseStopped,1000);
+            
+            
+            });
+            
+            //cursor effect on mouseout
+            
+            document.addEventListener("mouseout",()=>{
+                cursor.style.display="none";
+            
+            });</script>
         <script src="assets/js/main.js"></script>
     </body>
 </html>
diff --git a/faq.html b/faq.html
index 79c47464..3e5581e5 100644
--- a/faq.html
+++ b/faq.html
@@ -117,6 +117,48 @@
       z-index: 9999;
     }
 
+    .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
+
 </style>
 <body>
 
@@ -341,6 +383,7 @@ <h4>RAPIDOC Newsletter</h4><br>
       </svg>
     </div>
   </div>
+  <div class="cursor"></div>
 
   <!-- footer -->
 
@@ -380,6 +423,34 @@ <h4>RAPIDOC Newsletter</h4><br>
     }
   }
 });
+const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 8520e1ae..f822463c 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,8 @@
         publicKey: "o6kveYmOSDrs0l1Mg",
       });
     })();
+
+    
   </script>
 
   <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
@@ -335,6 +337,48 @@
       opacity: 0;
       visibility: hidden;
     }
+
+    .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
   </style>
   <style>
    
@@ -701,6 +745,8 @@ <h1 class="about-us-heading">About Us</h1>
       </div>
     </section>
 
+    <div class="cursor"></div>
+
     <script>
       document.querySelectorAll('.about-us-community').forEach(function (element) {
         element.addEventListener('mouseover', function () {
@@ -1745,6 +1791,35 @@ <h4>RAPIDOC Newsletter</h4><br>
       navbar.classList.toggle('nav-h');
       nav.classList.toggle('vis-h');
     })
+
+    const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
   </script>
 
   <div id="progressBar"></div>
diff --git a/login.html b/login.html
index cc266dbb..fff3535a 100644
--- a/login.html
+++ b/login.html
@@ -15,6 +15,49 @@
   <!--script src="https://www.googletagmanager.com/gtag/js?l=dataLayer&amp;id=undefined" async=""></script-->
 </head>
 <body>
+  <style>
+    .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
+  </style>
   <div class="top-left-corner">
     <a href="index.html" class="home-button">
         <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 64 64">
@@ -84,6 +127,7 @@ <h1 class="title">Start your <br> journey now</h1>
     </div>
 
   </div>
+  <div class="cursor"></div>
   
   <script src="log/script.js"></script>
   <script src="https://apis.google.com/js/platform.js" async defer></script>
@@ -101,6 +145,35 @@ <h1 class="title">Start your <br> journey now</h1>
         document.getElementById("registerForm").scrollIntoView({ behavior: "smooth" });
       });
     });
+
+    const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
   </script>
 </body>
 </html>
diff --git a/med.html b/med.html
index 4cc0a715..8aef2c0a 100644
--- a/med.html
+++ b/med.html
@@ -6,6 +6,80 @@
     <title>Document</title>
 </head>
 <body>
+    <style>
+        .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
+    </style>
     Order here portal here.
+    <div class="cursor"></div>
+    <script>
+        const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/medicine.html b/medicine.html
index 572f85a6..5f1394d9 100644
--- a/medicine.html
+++ b/medicine.html
@@ -13,6 +13,49 @@
        
 </head>
 <body>
+  <style>
+    .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
+  </style>
     <header class="header_container">
         <div class="img">
         <img id="rd-logo"  style="width: 90px; height: auto;" src="/images/rd.png"> 
@@ -146,6 +189,37 @@ <h4>RAPIDOC Newsletter</h4><br>
           </svg>
         </div>
       </div>
+      <div class="cursor"></div>
+      <script>
+        const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
+      </script>
     <script src="medicine.js"></script>
 </body>
 </html> 
diff --git a/news.html b/news.html
index 5df6b083..14bc508c 100644
--- a/news.html
+++ b/news.html
@@ -395,6 +395,48 @@
   }
 }
 
+.cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
+
     </style>
     <link rel="stylesheet" href="chatbox.css">
      <!-- Google Fonts Link For Icons chatboxx -->
@@ -695,6 +737,7 @@ <h4>RAPIDOC Newsletter</h4><br>
   <div id="preloader"></div>
   <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
       class="bi bi-arrow-up-short"></i></a>
+      <div class="cursor"></div>
 
 
   <!-- JS Files -->
@@ -733,6 +776,35 @@ <h4>RAPIDOC Newsletter</h4><br>
       checkButtonVisibility();
     });
 
+    const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
+
   </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
diff --git a/signedup.html b/signedup.html
index 75e1cafe..8e3a6d3b 100644
--- a/signedup.html
+++ b/signedup.html
@@ -10,6 +10,49 @@
   <link rel="stylesheet" href="log/login.css">
 </head>
 <body>
+  <style>
+    .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
+  </style>
   <div class="container" id="container">
     <div class="form-container login-container">
       <form action="#">
@@ -27,6 +70,37 @@ <h1>Signup Completed Successfully!</h1>
     </div>
 
   </div>
+  <div class="cursor"></div>
+  <script>
+    const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
+  </script>
 
   <script src="log/script.js"></script>
 
diff --git a/successful_appointment.html b/successful_appointment.html
index 43cbd2fd..873a91a5 100644
--- a/successful_appointment.html
+++ b/successful_appointment.html
@@ -4,6 +4,49 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Appointment Booking Success</title>
+    <style>
+        .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
+    </style>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -66,5 +109,36 @@
         <h1>Your appointment has been successfully booked</h1>
         <a href="index.html" class="btn">Home</a>
     </div>
+    <div class="cursor"></div>
+    <script>
+        const cursor = document.querySelector(".cursor");
+
+//follow cursor on mouse move
+document.addEventListener("mousemove",(e)=>{
+    let x = e.pageX;
+    let y = e.pageY;
+
+    cursor.style.top = y + "px";
+    cursor.style.left =x + "px";
+    cursor.style.display ="block";
+
+    //cursor effects on mouse stopped
+    function mouseStopped(){
+        cursor.style.display="none";
+
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(mouseStopped,1000);
+
+
+});
+
+//cursor effect on mouseout
+
+document.addEventListener("mouseout",()=>{
+    cursor.style.display="none";
+
+});
+    </script>
 </body>
 </html>
diff --git a/test.html b/test.html
index 1149fe49..48979d35 100644
--- a/test.html
+++ b/test.html
@@ -31,6 +31,49 @@
 
 </head>
 <body>
+    <style>
+        .cursor{
+    z-index: 999;
+    background: rgb(11, 173, 198);
+    position: fixed;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    pointer-events: none;
+    box-shadow: 0 0 20px rgb(11, 173, 198),
+                0 0 60px rgb(11, 173, 198),
+                0 0 100px rgb(11, 173, 198);
+
+    animation: colors 5s infinite; 
+    transform: translate(-50%,-50%);           
+
+
+}
+
+@keyframes colors {
+    0%{
+       filter: hue-rotate(0deg);
+    }
+  
+}
+
+.cursor:before{
+    size: 100px;
+    content: '';
+    position: absolute;
+    background: rgb(11, 173, 198);
+    width: 50px;
+    height: 50px;
+    opacity: 0.2;
+    transform: translate(-30%,-30%);
+    border-radius: 50%;
+
+}
+
+    </style>
     <header class="header_container">
         <div class="img">
         <img id="rd-logo"  style="width: 90px; height: auto;" src="/images/rd.png"> 
@@ -215,6 +258,7 @@ <h3>RAPIDOC Newsletter</h3>
           </div>
         </div>
       </footer>
+      <div class="cursor"></div>
       
 
 
@@ -225,7 +269,35 @@ <h3>RAPIDOC Newsletter</h3>
 
 
 
+    <script>const cursor = document.querySelector(".cursor");
 
+        //follow cursor on mouse move
+        document.addEventListener("mousemove",(e)=>{
+            let x = e.pageX;
+            let y = e.pageY;
+        
+            cursor.style.top = y + "px";
+            cursor.style.left =x + "px";
+            cursor.style.display ="block";
+        
+            //cursor effects on mouse stopped
+            function mouseStopped(){
+                cursor.style.display="none";
+        
+            }
+            clearTimeout(timeout);
+            timeout = setTimeout(mouseStopped,1000);
+        
+        
+        });
+        
+        //cursor effect on mouseout
+        
+        document.addEventListener("mouseout",()=>{
+            cursor.style.display="none";
+        
+        });
+        </script>
     <script src="tests.js"></script>
 </body>
 </html>
\ No newline at end of file
