diff --git a/public/contributor.html b/public/contributor.html
index 6142e87..60df69c 100644
--- a/public/contributor.html
+++ b/public/contributor.html
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Research Nexas</title>
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="/css/contributor.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <style>
         .homeBtn {
             position: fixed;
@@ -20,51 +22,104 @@
         }
     </style>
 </head>
+
 <body>
 
-  <a href="/" class="homeBtn">Home</a>
+    <a href="/" class="homeBtn">Home</a>
 
-  <div class="contributor-container">
-    <!-- Hero Section -->
-    <section class="contributor-hero">
-        <div class="contributor-hero-content">
-            <h1>Welcome toResearch Nexas</h1>
-            <p>Empowering writers, one commit at a time</p>
-            <button class="contributor-btn contributor-btn-primary" onclick="scrollToContribute()">Become a Contributor</button>
-        </div>
-    </section>
+    <div class="contributor-container">
+        <!-- Hero Section -->
+        <section class="contributor-hero">
+            <div class="contributor-hero-content">
+                <h1>Welcome to Research Nexas</h1>
+                <p>Empowering writers, one commit at a time</p>
+                <button class="contributor-btn contributor-btn-primary" onclick="scrollToContribute()">Become a
+                    Contributor</button>
+            </div>
+        </section>
 
-    <!-- Stats Section -->
-    <section class="contributor-stats">
-        <h2>Project Statistics</h2>
-        <div class="contributor-stats-grid" id="statsGrid">
-            <!-- Stats will be dynamically inserted here -->
-        </div>
-    </section>
+        <!-- Stats Section -->
+        <section class="contributor-stats">
+            <h2>Project Statistics</h2>
+            <div class="contributor-stats-grid" id="statsGrid">
+                <!-- Stats will be dynamically inserted here -->
+            </div>
+        </section>
 
-    <!-- Contributors Grid -->
-    <section class="contributor-contributors">
-        <h2>Meet Our Contributors</h2>
-        <div class="contributor-contributors-grid" id="contributorsGrid">
-            <!-- Contributors will be dynamically inserted here -->
-        </div>
-        <div id="loading" class="contributor-loading">
-            <div class="contributor-spinner"></div>
+        <!-- Contributors Grid -->
+        <section class="contributor-contributors">
+            <h2>Meet Our Contributors</h2>
+            <div class="contributor-contributors-grid" id="contributorsGrid">
+                <!-- Contributors will be dynamically inserted here -->
+            </div>
+            <div id="loading" class="contributor-loading">
+                <div class="contributor-spinner"></div>
+            </div>
+        </section>
+
+        <!-- Call to Action -->
+        <section id="contribute" class="contributor-cta">
+            <h2>Ready to Make an Impact?</h2>
+            <p>Join our community and help shape the future with us at Research Nexas</p>
+            <form id="subscribeForm">
+                <input type="email" id="emailInput" placeholder="Enter your email" required>
+                <button type="submit" class="contributor-btn contributor-btn-secondary">Get Started</button>
+            </form>
+            <div id="notification" class="contributor-notification contributor-hidden"></div>
+        </section>
+    </div>
+    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 72px;">
+        <div class="scroll-top-icon">
+            <i class="fa-solid fa-arrow-up"></i>
         </div>
-    </section>
+        <svg class="progress-ring" width="60" height="60">
+            <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
+                cy="30"></circle>
+        </svg>
+    </button>
+    <script>
+        // Get the button
+        const scrollToTopBtn = document.getElementById("scrollToTopBtn");
+        const progressCircle = document.querySelector(".progress-ring__circle");
+        const radius = progressCircle.r.baseVal.value;
+        const circumference = 2 * Math.PI * radius;
 
-    <!-- Call to Action -->
-    <section id="contribute" class="contributor-cta">
-        <h2>Ready to Make an Impact?</h2>
-        <p>Join our community and help shape the future with us at Research Nexas</p>
-        <form id="subscribeForm">
-            <input type="email" id="emailInput" placeholder="Enter your email" required>
-            <button type="submit" class="contributor-btn contributor-btn-secondary">Get Started</button>
-        </form>
-        <div id="notification" class="contributor-notification contributor-hidden"></div>
-    </section>
-  </div>
+        // Set the circle progress properties
+        progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
+        progressCircle.style.strokeDashoffset = circumference;
 
+        // Function to show or hide the button based on scroll position
+        function toggleScrollButton() {
+            if (window.scrollY > 100) {
+                scrollToTopBtn.classList.add("show");
+            } else {
+                scrollToTopBtn.classList.remove("show");
+            }
+        }
+
+        // Function to set the scroll progress on the button ring
+        function setProgress(percent) {
+            const offset = circumference - (percent / 100) * circumference;
+            progressCircle.style.strokeDashoffset = offset;
+        }
+
+        // Listen for scroll events to update button visibility and progress
+        window.addEventListener("scroll", () => {
+            toggleScrollButton();
+            const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
+            setProgress(scrollPercent);
+        });
+
+        // Smooth scroll to top when the button is clicked
+        scrollToTopBtn.addEventListener("click", () => {
+            window.scrollTo({
+                top: 0,
+                behavior: "smooth"
+            });
+        });
+
+    </script>
     <script src="/script/contributor.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/public/css/contributor.css b/public/css/contributor.css
index 1ad21ab..7d6e9cc 100644
--- a/public/css/contributor.css
+++ b/public/css/contributor.css
@@ -17,7 +17,7 @@ body {
 
 /* Hero Section */
 .contributor-hero {
-  background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2850&q=80');
+  background-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2850&q=80");
   background-size: cover;
   background-position: center;
   height: 70vh;
@@ -29,7 +29,7 @@ body {
 }
 
 .contributor-hero::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -153,11 +153,10 @@ body {
 
 .contributor-contributor-card:hover {
   transform: translateY(-5px);
-  
 
   background-color: aqua;
   box-shadow: 0.5px 0.5px 5px 3px blue;
-} 
+}
 
 .contributor-contributor-card img {
   width: 100px;
@@ -223,8 +222,12 @@ body {
 }
 
 @keyframes contributor-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* Call to Action Section */
@@ -262,16 +265,13 @@ body {
 
 .contributor-contributor-card:hover {
   transform: translateY(-5px);
-  
 
   background-color: aqua;
   box-shadow: 0.5px 0.5px 5px 3px blue;
-} 
-
-
+}
 
 .contributor-notification {
-  background-color: #4CAF50;
+  background-color: #4caf50;
   color: white;
   padding: 1rem;
   border-radius: 5px;
@@ -285,20 +285,115 @@ body {
 /* Responsive Design */
 @media (max-width: 768px) {
   .contributor-hero h1 {
-      font-size: 2.5rem;
+    font-size: 2.5rem;
   }
 
   .contributor-hero p {
-      font-size: 1.2rem;
+    font-size: 1.2rem;
   }
 
   .contributor-cta form {
-      flex-direction: column;
-      align-items: center;
+    flex-direction: column;
+    align-items: center;
   }
 
   .contributor-cta input[type="email"] {
-      width: 100%;
-      max-width: 300px;
+    width: 100%;
+    max-width: 300px;
   }
-}
\ No newline at end of file
+}
+
+.scroll-top {
+  position: fixed;
+  right: 1.6%;
+  background: linear-gradient(100deg, #4453b8, #328aa5, #0b97d3);
+  color: white;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+  overflow: visible;
+  z-index: 10;
+  /* Ensure button is on top */
+}
+
+.scroll-top.show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.scroll-top:hover {
+  transform: scale(1.1);
+  /* Subtle scaling instead of expanding */
+  box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
+  /* Slightly larger shadow */
+}
+
+.scroll-top:active {
+  transform: scale(1.05);
+  /* Minor scale reduction on click */
+}
+
+.scroll-top-icon {
+  position: relative;
+  z-index: 2;
+  transition: transform 0.3s ease;
+}
+
+.scroll-top:hover .scroll-top-icon {
+  transform: translateY(-3px);
+}
+
+/* Progress Ring Styling */
+.progress-ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+  /* To start from the top */
+}
+
+.progress-ring__circle {
+  transition: stroke-dashoffset 0.35s;
+  transform-origin: 50% 50%;
+}
+
+/* Pulse Animation */
+@keyframes pulse {
+  0% {
+    box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+  }
+
+  50% {
+    box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
+  }
+
+  100% {
+    box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
+  }
+}
+
+.scroll-top:hover {
+  animation: pulse 1.5s infinite;
+}
+
+.scroll-top.show {
+  animation: none;
+  /* No animation when showing the button */
+}
+
+.scroll-top.show:hover {
+  animation: pulse 1.5s infinite;
+  /* Pulse on hover */
+}
