diff --git a/index.html b/index.html
index 52c81b4..3f7fb11 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,76 @@
 </head>
 
 <body>
+  <div class="circle-container">
+    <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>
+    <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>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const coords = { x: 0, y: 0 };
+      const circles = document.querySelectorAll(".circle");
+
+      circles.forEach(function (circle) {
+        circle.x = 0;
+        circle.y = 0;
+      });
+
+      window.addEventListener("mousemove", function (e) {
+        coords.x = e.pageX;
+        coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+      });
+
+      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.transform = `scale(${(circles.length - index) / circles.length})`;
+
+          const nextCircle = circles[index + 1] || circles[0];
+          circle.x = x;
+          circle.y = y;
+
+          x += (nextCircle.x - x) * 0.25;
+          y += (nextCircle.y - y) * 0.25;
+        });
+
+        requestAnimationFrame(animateCircles);
+      }
+
+      animateCircles();
+    });
+  </script>
   <div id="root"></div>
   <script type="module" src="./src/main.jsx"></script>
 </body>
diff --git a/src/index.css b/src/index.css
index b862f3d..67c415e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -37,4 +37,34 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(rgb(191, 102, 255), rgb(137, 58, 249));
   border-radius: 7px;
+}
+.circle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  pointer-events: none;
+  background: radial-gradient(circle, rgba(13, 0, 80, 0.466), rgba(195, 0, 255, 0.5));
+  transition: transform 0.1s, left 0.1s, top 0.1s;
+  box-shadow: 0 0 20px #23bdf590,
+    0 0 60px #f523f5,
+    0 0 100px #23bdf5;
+    animation: colors 1s infinite;
+transform: translate(-50%, -50%);
+}
+
+.circle-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+@media (max-width: 724px) {
+  .circle-container{
+    display: none;
+  }
 }
\ No newline at end of file
