diff --git a/css/styles.css b/css/styles.css
index ce02636..7605083 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -13,7 +13,7 @@ header {
   background-size: cover;
   background-position: bottom;
   color: #fff;
-  padding: 100px;
+  padding: 130px;
   text-align: center;
 }
 
@@ -51,4 +51,16 @@ footer {
 
 .show {
   opacity: 1;
-}
\ No newline at end of file
+}
+
+.cursor {
+  position: absolute;
+  width: 70%;
+  height: 70%;
+  opacity: 0.05;
+  border-radius: 100%;
+  background: radial-gradient(circle, #fff, transparent 50%);
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition: width 0.15s, height 0.15s, opacity 0.15s;
+}
diff --git a/index.html b/index.html
index 0dcffb9..67f1919 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,7 @@ <h3>Luca Jost</h3>
       </section>
     </header>
     <main class="container-fluid">
+      <div class="cursor"></div>
       <!-- First Project -->
       <section class="hidden">
         <div class="row justify-content-center">
diff --git a/main.js b/main.js
index a4b8a24..81bba94 100644
--- a/main.js
+++ b/main.js
@@ -12,3 +12,21 @@ const observer = new IntersectionObserver(entries => {
 
 const hiddenElements = document.querySelectorAll('.hidden')
 hiddenElements.forEach(element => observer.observe(element))
+
+document.addEventListener('mousemove', (e) => {
+  // Update the cursor position to follow the mouse
+  cursor.style.left = e.pageX + 'px'
+  cursor.style.top = e.pageY + 'px'
+})
+
+document.addEventListener('mouseenter', () => {
+  // Show the cursor when it enters the document
+  cursor.style.opacity = 0.05
+})
+
+document.addEventListener('mouseleave', () => {
+  // Hide the cursor when it leaves the document
+  cursor.style.opacity = 0
+})
+
+const cursor = document.querySelector('.cursor')