diff --git a/Cursor/Cursor.css b/Cursor/Cursor.css
new file mode 100644
index 0000000..c026fa5
--- /dev/null
+++ b/Cursor/Cursor.css
@@ -0,0 +1,225 @@
+body {
+  margin: 0;
+  height: 100vh;
+  cursor: none;
+  background: #297F87;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.cursor {
+  width: 20px;
+  height: 20px;
+  border: 1px solid white;
+  border-radius: 50%;
+  position: absolute;
+  -webkit-transition-duration: 200ms;
+          transition-duration: 200ms;
+  -webkit-transition-timing-function: ease-out;
+          transition-timing-function: ease-out;
+  -webkit-animation: cursorAnim .5s infinite alternate;
+          animation: cursorAnim .5s infinite alternate;
+}
+
+.cursor::after {
+  content: "";
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  border: 8px solid gray;
+  border-radius: 50%;
+  opacity: 0.5;
+  top: -8px;
+  left: -8px;
+  -webkit-animation: cursorAnim2 .5s infinite alternate;
+          animation: cursorAnim2 .5s infinite alternate;
+}
+
+@-webkit-keyframes cursorAnim {
+  from {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  to {
+    -webkit-transform: scale(0.7);
+            transform: scale(0.7);
+  }
+}
+
+@keyframes cursorAnim {
+  from {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  to {
+    -webkit-transform: scale(0.7);
+            transform: scale(0.7);
+  }
+}
+
+@-webkit-keyframes cursorAnim2 {
+  from {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  to {
+    -webkit-transform: scale(0.4);
+            transform: scale(0.4);
+  }
+}
+
+@keyframes cursorAnim2 {
+  from {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  to {
+    -webkit-transform: scale(0.4);
+            transform: scale(0.4);
+  }
+}
+
+@-webkit-keyframes cursorAnim3 {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(3);
+            transform: scale(3);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes cursorAnim3 {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(3);
+            transform: scale(3);
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.expand {
+  -webkit-animation: cursorAnim3 .5s forwards;
+          animation: cursorAnim3 .5s forwards;
+  border: 1px solid red;
+}
+
+h2 {
+  font-size: 5em;
+  font-weight: 500;
+  color: #CAE4DB;
+  letter-spacing: 5px;
+}
+
+h2 span {
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+}
+
+h2:hover span:nth-child(1) {
+  margin-left: 30px;
+}
+
+h2:hover span:nth-child(4):after {
+  content: " ' ";
+}
+
+h2:hover span {
+  color: #fff;
+  text-shadow: 0 0 10px #fff,
 0 0 20px #fff,
 0 0 40px #fff,
 0 0 80px #fff,
 0 0 120px #fff;
+}
+
+h4 {
+  font-style: italic;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  position: absolute;
+  top: 0;
+  color: #FED049;
+  font-size: 2em;
+}
+
+a {
+  position: absolute;
+  display: inline-block;
+  padding: 15px 30px;
+  border: 2px solid #AF0069;
+  text-transform: uppercase;
+  color: #0A043C;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 20px;
+  bottom: 0px;
+  cursor: none;
+  bottom: 20px;
+}
+
+a:before {
+  content: '';
+  position: absolute;
+  top: 6px;
+  left: -2px;
+  width: calc(100% + 4px);
+  height: calc(100% - 12px);
+  background: #AF0069;
+  -webkit-transition: 0.5s ease-in-out;
+  transition: 0.5s ease-in-out;
+  -webkit-transform: scaleY(1);
+          transform: scaleY(1);
+  -webkit-transition-delay: 0.5s;
+          transition-delay: 0.5s;
+}
+
+a:hover:before {
+  -webkit-transform: scaleY(0);
+          transform: scaleY(0);
+}
+
+a:after {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: -2px;
+  height: calc(100% + 4px);
+  width: calc(100% - 12px);
+  background: #AF0069;
+  -webkit-transition: 0.5s ease-in-out;
+  transition: 0.5s ease-in-out;
+  -webkit-transform: scaleX(1);
+          transform: scaleX(1);
+}
+
+a:hover:after {
+  -webkit-transform: scaleX(0);
+          transform: scaleX(0);
+}
+
+a span {
+  position: relative;
+  z-index: 3;
+}
+/*# sourceMappingURL=Cursor.css.map */
\ No newline at end of file
diff --git a/Cursor/Cursor.css.map b/Cursor/Cursor.css.map
new file mode 100644
index 0000000..e8273ec
--- /dev/null
+++ b/Cursor/Cursor.css.map
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "Cursor.scss"
+    ],
+    "names": [],
+    "file": "Cursor.css"
+}
\ No newline at end of file
diff --git a/Cursor/Cursor.html b/Cursor/Cursor.html
new file mode 100644
index 0000000..2d7f814
--- /dev/null
+++ b/Cursor/Cursor.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./Cursor.css">
+</head>
+<body>
+    <h4>Custom Cursor</h4>
+    <h2><span>Kick</span><span>s</span></h2>
+    <a href="https://github.com/sterlingSid04"><span>Learn More</span></a>
+    <div class="cursor"></div>
+    <script>
+        const cursor = document.querySelector('.cursor');
+
+        document.addEventListener('mousemove',e=>{
+            cursor.setAttribute("style", "top:" + (e.pageY - 10)+"px; left:" + (e.pageX - 10) +"px");
+        })
+
+        document.addEventListener('click',()=>{
+            cursor.classList.add('expand');
+
+            setTimeout(()=>{
+                cursor.classList.remove('expand');
+            },500);
+        })
+            
+    </script>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/Cursor/Cursor.scss b/Cursor/Cursor.scss
new file mode 100644
index 0000000..d2faf3a
--- /dev/null
+++ b/Cursor/Cursor.scss
@@ -0,0 +1,168 @@
+body {
+    margin: 0;
+    height: 100vh;
+    cursor: none;
+    background: #297F87;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.cursor{
+    width: 20px;
+    height: 20px;
+    border: 1px solid white;
+    border-radius: 50%;
+    position: absolute;
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
+    animation: cursorAnim .5s infinite alternate ;
+}
+
+.cursor::after{
+    content: "";
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    border: 8px solid gray;
+    border-radius: 50%;
+    opacity: 0.5;
+    top:-8px;
+    left: -8px;
+    animation: cursorAnim2 .5s infinite alternate ;
+
+}
+
+@keyframes cursorAnim {
+    from {
+        transform: scale(1);
+    }
+    to{
+        transform: scale(0.7);
+    }
+}
+
+@keyframes cursorAnim2 {
+    from {
+        transform: scale(1);
+    }
+    to{
+        transform: scale(0.4);
+    }
+}
+
+@keyframes cursorAnim3 {
+    0% {
+        transform: scale(1);
+    }
+    50%{
+        transform: scale(3);
+    }
+    100%{
+        transform: scale(1);
+        opacity: 0;
+    }
+}
+
+.expand{
+    animation: cursorAnim3 .5s forwards;
+    border: 1px solid red;
+}
+
+h2{
+    font-size: 5em;
+    font-weight: 500;
+    color: #CAE4DB;
+    letter-spacing: 5px;
+}
+
+h2 span{
+    transition: 0.5s;
+}
+
+h2:hover span:nth-child(1){
+    margin-left: 30px;
+
+}
+
+h2:hover span:nth-child(4):after{
+    content: " ' ";
+}
+
+h2:hover span{
+    color: #fff;
+    text-shadow: 0 0 10px #fff,
+                 0 0 20px #fff,
+                 0 0 40px #fff,
+                 0 0 80px #fff,
+                 0 0 120px #fff;
+}
+
+h4{
+    font-style: italic;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    color: #FED049;
+    font-size: 2em;
+}
+
+a{
+    position: absolute;
+    display: inline-block;
+    padding: 15px 30px;
+    border: 2px solid #AF0069;
+    text-transform: uppercase;
+    color: #0A043C;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 20px;
+    bottom: 0px;
+    cursor: none;
+    bottom: 20px;
+}
+
+a:before{
+    content: '';
+    position: absolute;
+    top:6px;
+    left: -2px;
+    width: calc(100% + 4px);
+    height: calc(100% - 12px);
+    background: #AF0069;
+    transition: 0.5s ease-in-out;
+    transform: scaleY(1);
+    transition-delay: 0.5s;
+    
+
+}
+
+a:hover:before{
+    transform: scaleY(0);
+
+}
+
+a:after{
+    content: '';
+    position: absolute;
+    left:6px;
+    top: -2px;
+    height: calc(100% + 4px);
+    width: calc(100% - 12px);
+    background: #AF0069;
+    transition: 0.5s ease-in-out;
+    transform: scaleX(1);
+
+}
+
+a:hover:after{
+    transform: scaleX(0);
+}
+
+a span{
+    position: relative;
+    z-index: 3;
+
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e170c0b..8f39762 100644
--- a/index.html
+++ b/index.html
@@ -326,7 +326,40 @@ <h3>Message Animation</h3>
         </div>
       </div>
 
-      <!--    Spinner Loaders Animation  -->
+
+    
+    <!--   Product Cards      -->
+
+    <div class="card" style="width: 18rem">
+      <div class="card-body">
+        <h5 class="card-title text-dark">Product Cards</h5>
+        <p class="card-text">Name: <br /> Sahil khan</p>
+
+        <p class="card-text">
+          Github :<a href="https://github.com/thesahindia" class="text-white"
+            style="text-decoration: underline">Thesahindia</a>
+        </p>
+        <a href="/animated-components/Product_Cards/Product.html"
+          class="card-link text-warning"><strong>Demo</strong></a>
+      </div>
+    </div>
+      
+      
+    <!-- Custom Cursor -->
+
+    <div class="card" style="width: 18rem;">
+      <div class="card-body">
+        <h5 class="card-title text-dark">Cursor</h5>
+        <h6 class="card-subtitle mb-2 text-white">Component : Cursor</h6>
+        <p class="card-text">Name : Siddharth Poddar</p>
+        <p>Github :<a href="https://github.com/sterlingSid04" class="text-white" style="text-decoration: underline;">sterlingSid04</a></p>
+        <a href="/animated-components/Cursor/Cursor.html" class="card-link text-warning"><strong>Link</strong></a>
+        
+      </div>
+    </div>
+    
+    
+     <!--    Spinner Loaders Animation  -->
 
       <div class="card">
         <div class="box">
@@ -341,6 +374,7 @@ <h3>Spinner Loaders Animation</h3>
 
       <!--    Parallax Animation  -->
 
+
       <div class="card">
         <div class="box">
           <div class="content">
@@ -377,7 +411,7 @@ <h3>Navbar</h3>
           </div>
         </div>
       </div>
-
+      
     <!-- Add your code above this line -->
   </div>