diff --git a/pages/contributors.html b/pages/contributors.html
index 184918d..7b4ab3f 100644
--- a/pages/contributors.html
+++ b/pages/contributors.html
@@ -5,86 +5,31 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="../styles/mainstyle.css" />
-  <link rel="stylesheet" href="../styles/index.style.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-  <script defer src="../js/edge.js"></script>
-  <script defer src="../js/box.js"></script>
-  <script defer src="../js/board.js"></script>
-  <script defer src="../js/game.js"></script>
-  <script defer src="../js/validation.js"></script>
   <link rel="shortcut icon" href="../assets/favicon.ico" type="image/x-icon" />
+  <link rel="stylesheet" href="/styles/contributors.css">
   <title>Contributors</title>
-   <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    .contributors-list img {
-      max-width: 100%;
-      height: auto;
-      /* display: block; */
-      margin: 0 auto;
-    }
-
-    .contributors-list {
-      text-align: center;
-      padding: 3px;
-      background-color: rgba(255, 255, 255, 0.8);
-      border-radius: 10px;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      max-width: 100%;
-      margin: auto;
-    }
-
-    .whole-background {
-      width: 75%;
-      max-width: 85%;
-      text-align: center;
-      display: flex;
-      flex-direction: row;
-      height: 90%;
-  
-    }
-
-    .settings .form {
-      max-width: 100%;
-    }
-
-    .contributors-description {
-      padding: 10px;
-    }
-
-    .settings a {
-      background-color: initial;
+  <style>
+    .circle {
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      pointer-events: none;
+      background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 0.5));
+      transition: transform 0.1s, left 0.1s, top 0.1s;
     }
 
-    .form h1 { 
-      margin-top: 60px;
-      
+    .circle-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
     }
-    .circle {
-            position: absolute;
-            width: 25px;
-            height: 25px;
-            border-radius: 50%;
-            pointer-events: none;
-            background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 0.5));
-            transition: transform 0.1s, left 0.1s, top 0.1s;
-        }
-
-        .circle-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 9999;
-        } 
-
-        @media (max-width : 768px){
+    @media (max-width: 760px) {
       .circle-container{
         display: none;
       }
@@ -92,63 +37,11 @@
   </style>
 </head>
 
-<div class="settings">
-  <video autoplay muted class="video" loop id="myVideo">
-    <source src="../assets/videos/default.mp4" type="video/mp4" />
-  </video>
-  <div class="whole-background">
-    <nav class="navbarr">
-      <div class="logo">
-        <a href="../index.html">Dots & Boxes ⚄</a>
-      </div>
-      <ul class="nav-links">
-        <li><a href="../index.html">Home</a></li>
-        <li><a href="../pages/about.html">About Us</a></li>
-        <li><a href="../pages/FAQs.html">FAQs</a></li>
-
-        <li><a href="../pages/contributors.html">
-          Contributors
-        </a></li>
-        <button><a href="../pages/game.html">Let's Go</a></button>
-      </ul>
-      <div class="hamburger">
-        <i class="fas fa-bars"></i>
-      </div>
-    </nav>
-    <div class="form">
-      <h1 class="heading">
-        Our Contributors</h1>
-      <p class="contributors-description">
-        We are grateful to the following contributors for their hard work
-        and dedication in making this project a success:
-      </p>
-      <div class="contributors-list">
-
-        <a href="https://github.com/ChromeGaming/Dot-Box/graphs/contributors">
-
-          <img src="https://contrib.rocks/image?repo=ChromeGaming/Dot-Box" />
-        </a>
-
-      </div>
-    </div>
-  </div>
-  <div class="author">
-    <div class="fotbar">
-      <a href="../pages/howtoplay.html">HowToPlay?</a>
-      <a href="../pages/termsofservice.html">TermsOfService</a>
-      <a href="../pages/privacypolicy.html">PrivacyPolicy</a>
-    </div>
-    <p>
-      Created with ❤️ by <a href="https://github.com/ChromeGaming">Chrome Gaming</a>
-    </p>
-    <div class="social-icons">
-      <a href="https://github.com/ChromeGaming/Dot-Box" target="_blank"><i class="fab fa-github"></i></a>
-      <a href="https://discord.gg/2HTCFrSvPB" target="_blank"><i class="fab fa-discord"></i></a>
-    </div>
-  </div>
-</div>
+
+
 
 <body>
+
   <div class="circle-container">
     <div class="circle"></div>
     <div class="circle"></div>
@@ -180,46 +73,116 @@ <h1 class="heading">
     <div class="circle"></div>
     <div class="circle"></div>
     <div class="circle"></div>
-</div>
-<script>
+  </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;
+      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.3;
+          y += (nextCircle.y - y) * 0.3;
         });
 
-        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})`;
+        requestAnimationFrame(animateCircles);
+      }
 
-                const nextCircle = circles[index + 1] || circles[0];
-                circle.x = x;
-                circle.y = y;
+      animateCircles();
+    });
 
-                x += (nextCircle.x - x) * 0.3;
-                y += (nextCircle.y - y) * 0.3;
-            });
+  </script>
 
-            requestAnimationFrame(animateCircles);
+  <nav class="navbar">
+    <div class="logo">
+      <a href="../index.html">Dots & Boxes ⚄</a>
+    </div>
+    <ul class="navlinks">
+      <li><a href="../index.html">Home</a></li>
+      <li><a href="../pages/about.html">About Us</a></li>
+      <li><a href="../pages/FAQs.html">FAQs</a></li>
+      <li><a href="../pages/contributors.html">Contributors</a></li>
+      <li><a href="../pages/game.html">Let's Go</a></li>
+    </ul>
+
+  </nav>
+  <div class="content min-h-screen text-black dark:text-gray-200">
+    <div class="container mx-auto py-8">
+      <h1 class="text-center text-3xl font-semibold mb-8"
+        style="background-color: #333; color: white; padding: 10px; border-radius: 4px;">Our Contributors</h1>
+      <div id="contributors" class="contributors flex flex-wrap justify-center gap-8"></div>
+    </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const contributorsContainer = document.getElementById('contributors');
+
+      async function fetchContributors() {
+        try {
+          const response = await fetch('https://api.github.com/repos/ChromeGaming/Dot-Box/contributors');
+          const contributors = await response.json();
+
+          contributors.forEach(contributor => {
+            const contributorCard = document.createElement('a');
+            contributorCard.href = contributor.html_url;
+            contributorCard.target = '_blank';
+            contributorCard.className = 'contributor-card';
+            contributorCard.innerHTML = `
+              <img src="${contributor.avatar_url}" alt="${contributor.login}">
+              <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">${contributor.login}</h2>
+              <p class="text-gray-700 dark:text-gray-400">Contributions: ${contributor.contributions}</p>
+            `;
+            contributorsContainer.appendChild(contributorCard);
+          });
+        } catch (error) {
+          console.error('Error fetching contributors:', error);
         }
+      }
 
-        animateCircles();
+      fetchContributors();
     });
 
-</script>
+  </script>
+
+<div class="author">
+  <div class="fotbar">
+    <a href="/pages/howtoplay.html">HowToPlay?</a>
+    <a href="./pages/termsofservice.html">TermsOfService</a>
+    <a href="./pages/privacypolicy.html">PrivacyPolicy</a>
+    <a href="./pages/licensing.html">Licensing</a>
+  </div>
+  <p>
+    Created with ❤️ by
+    <a href="https://github.com/ChromeGaming">Chrome Gaming</a>
+  </p>
+  <div class="social-icons">
+    <a href="https://github.com/ChromeGaming/Dot-Box" target="_blank"><i class="fab fa-github"></i></a>
+    <a href="https://discord.gg/2HTCFrSvPB" target="_blank"><i class="fab fa-discord"></i></a>
+  </div>
+</div>
+</div>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/styles/contributors.css b/styles/contributors.css
new file mode 100644
index 0000000..e11562a
--- /dev/null
+++ b/styles/contributors.css
@@ -0,0 +1,351 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    overflow: auto !important;
+    background-color: #e7b537 !important;
+}
+
+.header-hero {
+    position: relative;
+    padding-top: 50px;
+    padding-bottom: 50px;
+}
+
+.header-hero .container {
+    position: relative;
+}
+
+.header-hero .header-hero-content {
+    position: relative;
+    color: #fff;
+}
+
+.header-hero .header-hero-image {
+    margin-top: 50px;
+}
+
+.header-sub-title {
+    font-size: 1.5rem;
+    font-weight: 500;
+}
+
+.header-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+}
+
+.text {
+    font-size: 1rem;
+    font-weight: 400;
+}
+
+.main-btn {
+    font-size: 1rem;
+    font-weight: 500;
+    padding: 12px 30px;
+    border-radius: 30px;
+    background-color: #ffffff;
+    color: #000;
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.main-btn:hover {
+    background-color: #000;
+    color: #ffffff;
+}
+
+.content {
+    position: relative;
+    padding-top: 0;
+}
+
+.navbar {
+    width: 100%;
+    background-color: #333;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 10px;
+    transition: color 0.3s ease-in-out;
+}
+
+.logo a {
+    text-decoration: none;
+    font-size: 30px;
+    font-family: "Arial", sans-serif;
+    font-weight: bold;
+    letter-spacing: 4px;
+    text-align: center;
+    color: #fff;
+    margin-left: 15px;
+}
+
+.navlinks {
+    display: inline-flex;
+    margin-right: 30px;
+    margin-top: 12px;
+    gap: 30px;
+    text-decoration: none;
+
+}
+
+.navlinks a {
+    text-decoration: none;
+    color: #fff;
+    font-size: 20px;
+    font-family: "Arial", sans-serif;
+    font-weight: bold;
+    letter-spacing: 4px;
+    text-align: center;
+}
+
+.navlinks a:hover {
+    color: #e7b537;
+}
+
+.logo a:hover {
+    color: yellow;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 16px;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-3xl {
+    font-size: 1.875rem;
+}
+
+.font-semibold {
+    font-weight: 600;
+}
+
+.mb-8 {
+    margin-bottom: 0.8rem;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.gap-8 {
+    gap: 2rem;
+}
+
+.contributors {
+    padding-top: 10px;
+}
+
+.contributor-card {
+    width: 100%;
+    max-width: calc(25% - 16px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    transition: transform 0.3s, box-shadow 0.3s;
+    text-decoration: none;
+    color: inherit;
+    margin-bottom: 16px;
+}
+
+.contributor-card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+}
+
+.contributor-card img {
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: 16px;
+}
+
+.text-lg {
+    font-size: 1.125rem;
+}
+
+.text-gray-900 {
+    color: #1a202c;
+}
+
+.text-gray-100 {
+    color: #f7fafc;
+}
+
+.mb-2 {
+    margin-bottom: 0.5rem;
+}
+
+.text-gray-700 {
+    color: #4a5568;
+}
+
+.text-gray-400 {
+    color: #cbd5e0;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+}
+
+.mr-1 {
+    margin-right: 0.1rem;
+}
+
+.bg_cover {
+    background-size: cover;
+    background-position: center;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    display: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .contributor-card {
+        max-width: 80%;
+    }
+}
+
+@media screen and (max-width: 769px) {
+    .navbar {
+        flex-direction: column;
+        align-items: center;
+        margin-top: 0px !important;
+    }
+
+    .logo a {
+        font-size: 20px;
+    }
+
+    .logo {
+        margin-bottom: 10px;
+    }
+
+    .navlinks {
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .navlinks a {
+        font-size: 16px;
+        margin: 10px 0;
+    }
+}
+
+@media screen and (max-width: 450px) {
+    .contributor-card {
+        max-width: 90%;
+    }
+
+    .navbar {
+        flex-direction: column;
+    }
+
+    .logo a {
+        font-size: 20px;
+    }
+
+    .navlinks {
+        flex-direction: column;
+        margin: 0;
+        gap: 10px;
+    }
+
+    .navlinks a {
+        font-size: 16px;
+        margin: 10px 0;
+    }
+}
+
+.author {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: linear-gradient(to right, #00093c, #2d0b00);
+    color: #fff;
+    padding: 15px;
+    position: sticky;
+    bottom: 0;
+    z-index: 1000;
+}
+
+.author .fotbar {
+    display: flex;
+    gap: 20px;
+}
+
+.author .fotbar a {
+    color: white;
+    text-decoration: none;
+    padding: 10px;
+    border-radius: 5px;
+    font-size: 18px;
+    background-color: transparent;
+}
+
+.author p {
+    color: white;
+    padding: 10px;
+    margin-right: 10px;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.author .social-icons {
+    display: flex;
+    gap: 10px;
+    margin-right: 20px;
+}
+
+.author a {
+    color: white !important;
+}
+
+.author .social-icons a {
+    color: white;
+    text-decoration: none;
+    font-size: 20px;
+}
+
+@media screen and (max-width:1190px) {
+    .author a {
+        font-size: small;
+    }
+}
+
+@media screen and (max-width:1065px) {
+    .author .fotbar {
+        gap: 5px;
+    }
+
+    .author {
+        flex-direction: column;
+        flex-wrap: wrap;
+    }
+}