diff --git a/contributor.html b/contributor.html
new file mode 100644
index 0000000..4863eb3
--- /dev/null
+++ b/contributor.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../assets/images/favicon/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="./css/faq.css">
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+        integrity="sha512-zylVviXvY3s/jybGKHrJgy1NdxDwA6/sP1m3ymUedL+XXKkBhZMKdeLRPhMb2DfykP4XK6eWCT9w1TmD4Ek1TA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="./css/contributor.css">
+    <title>Contributors - Conway's Game of Life</title>
+</head>
+
+<body>
+    <div class="back-button">
+        <a href="index.html" title="Home">
+            <img src="./images/home1.png" alt="Back to Home" class="home-icon">
+        </a>
+    </div>
+
+    <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">🤝Our Contributors</h1>
+            <div id="contributors" class="contributors"></div>
+        </div>
+    </div>
+    <div class="back-up">
+        <a class="gotopbtn" href="javascript:void(0);"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
+      </div>
+      <script>
+        document.addEventListener('DOMContentLoaded', function() {
+          const faqToggles = document.querySelectorAll('.faq-toggle');
+          
+          faqToggles.forEach(toggle => {
+            toggle.addEventListener('change', function() {
+              if (this.checked) {
+                // Close all other FAQ items
+                faqToggles.forEach(otherToggle => {
+                  if (otherToggle !== this) {
+                    otherToggle.checked = false;
+                  }
+                });
+              }
+            });
+          });
+        });
+      
+        const topButton = document.querySelector('.gotopbtn');
+        window.onscroll = function() {scrollFunction()};
+        function scrollFunction() {
+          if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.parentElement.style.display = "block"; 
+          } else {
+            topButton.parentElement.style.display = "none"; 
+          }
+        }
+        topButton.addEventListener('click', function(event) {
+          event.preventDefault();
+          window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+      </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const contributorsContainer = document.getElementById('contributors');
+
+            async function fetchContributors() {
+                try {
+                    const response = await fetch('https://api.github.com/repos/EternoSeeker/gameoflife/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>${contributor.login}</h2>
+                            <p>Contributions: ${contributor.contributions}</p>
+                            <p><i class="fa-brands fa-github mr-2"></i> GitHub Profile</p>
+                        `;
+                        contributorsContainer.appendChild(contributorCard);
+                    });
+                } catch (error) {
+                    console.error('Error fetching contributors:', error);
+                }
+            }
+
+            fetchContributors();
+        });
+    </script>
+
+    <div class="back-up">
+        <a class="gotopbtn" href="javascript:void(0);"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
+    </div>
+
+    <!-- Tawk.to Script -->
+    <script type="text/javascript">
+        var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
+        (function () {
+            var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
+            s1.async = true;
+            s1.src = 'https://embed.tawk.to/66891af8eaf3bd8d4d18ca2d/1i24gr9s5';
+            s1.charset = 'UTF-8';
+            s1.setAttribute('crossorigin', '*');
+            s0.parentNode.insertBefore(s1, s0);
+        })();
+    </script>
+    <!-- End of Tawk.to Script -->
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"
+        integrity="sha512-jYByi51d2A2YvZq8h7CEyghZ+DrDRzzU2sDCQK4ldAFffMJZbCQrVxQuUkZ7V58gHsKyp0S0EaHPUA39RgG1zw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</body>
+
+</html>
diff --git a/css/contributor.css b/css/contributor.css
new file mode 100644
index 0000000..cb0d60c
--- /dev/null
+++ b/css/contributor.css
@@ -0,0 +1,147 @@
+body {
+    color: #ffffff;
+    font-family: 'Poppins', sans-serif;
+}
+
+.back-button {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+}
+
+.back-button img {
+    width: 40px;
+    height: 40px;
+}
+
+.content {
+    min-height: 100vh;
+    padding: 20px;
+}
+
+.contributors {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+}
+
+.contributor-card {
+    background: linear-gradient(135deg, #6a93ff, #a9c7ff);
+    color: #ffffff;
+    border: 1px solid #333;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+    margin: 10px;
+    transition: transform 0.3s, box-shadow 0.3s;
+    width: calc(25% - 40px); 
+}
+
+.contributor-card img {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    object-fit: cover;
+    margin-bottom: 10px;
+}
+
+.contributor-card h2 {
+    font-size: 1.2em;
+    margin-bottom: 5px;
+}
+
+.contributor-card p {
+    font-size: 0.9em;
+    margin-bottom: 5px;
+}
+
+.contributor-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .contributor-card {
+        width: calc(33.33% - 40px); 
+    }
+}
+
+@media (max-width: 768px) {
+    .contributor-card {
+        width: calc(50% - 40px); 
+    }
+}
+
+@media (max-width: 480px) {
+    .contributor-card {
+        width: calc(100% - 40px); 
+    }
+}
+
+.back-up {
+    display: none; 
+    position: fixed;
+    left: 4%;
+    text-align: center;
+    width: 50px;
+    height: 50px;
+    background: #7582b2;
+    bottom: 40px;
+    right: 50px;
+    line-height: 50px;
+    font-size: 22px;
+}
+
+.back-up:hover {
+    cursor: pointer;
+}
+
+.back-button {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+}
+
+.back-button img {
+    width: 40px;
+    height: 40px;
+}
+
+.content {
+    min-height: 100vh;
+    padding: 20px;
+}
+
+.container h1 {
+    font-size: 2.5rem; 
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 20px;
+    color: #ffffff;
+    text-shadow: none; 
+    animation: none;
+}
+
+@media (max-width: 1024px) {
+    .container h1 {
+        font-size: 2rem; /
+    }
+}
+
+@media (max-width: 768px) {
+    .container h1 {
+        font-size: 1.75rem; 
+    }
+}
+
+@media (max-width: 480px) {
+    .container h1 {
+        font-size: 1.5rem; 
+    }
+}
+
+
+
diff --git a/index.html b/index.html
index 0043015..c112dc6 100644
--- a/index.html
+++ b/index.html
@@ -1069,6 +1069,13 @@ <h4>Rules</h4>
             <i class="fa-solid fa-question-circle"></i> FAQ
             </button>
         </div>
+        <div class="contributor has-dropdown animate" style="cursor: pointer">
+          <a href="contributor.html" style="text-decoration: none;">
+            <button class="about has-dropdown animate" style="cursor: pointer">
+              <i class="fa fa-user-plus" aria-hidden="true"></i> Contributors
+            </button>
+          </a>
+        </div>
       </div>
       <div class="snowflakes">
         <div class="snowflake">❅</div>
