diff --git a/contributors.js b/contributors.js
new file mode 100644
index 00000000..10f90397
--- /dev/null
+++ b/contributors.js
@@ -0,0 +1,59 @@
+const cont = document.getElementById('contributor');
+
+// Replace these with the owner and repository name of the repository
+const owner = 'vikhyatsingh123';
+const repoName = 'Naruto-Shippuden';
+
+// Function to fetch contributors for a given page number
+async function fetchContributors(pageNumber) {
+    const perPage = 100; // You can adjust this based on your needs
+    const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`;
+
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch contributors data. Status code: ${response.status}`);
+    }
+
+    const contributorsData = await response.json();
+    return contributorsData;
+}
+
+// Function to fetch all contributors
+async function fetchAllContributors() {
+    let allContributors = [];
+    let pageNumber = 1;
+
+    try {
+        while (true) {
+            const contributorsData = await fetchContributors(pageNumber);
+            if (contributorsData.length === 0) {
+                break;
+            }
+            allContributors = allContributors.concat(contributorsData);
+            pageNumber++;
+        }
+
+        // Display contributors in the honeycomb-like layout
+        allContributors.forEach((contributor) => {
+            const contributorCard = document.createElement('div');
+            contributorCard.classList.add('contributor-card');
+
+            const avatarImg = document.createElement('img');
+            avatarImg.src = contributor.avatar_url;
+            avatarImg.alt = `${contributor.login}'s Picture`;
+
+            const loginLink = document.createElement('a');
+            loginLink.href = contributor.html_url;
+            loginLink.appendChild(avatarImg);
+
+            contributorCard.appendChild(loginLink);
+
+            cont.appendChild(contributorCard); // Append the contributor card to the container
+        });
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+// Call the function to fetch all contributors and display them in the honeycomb-like layout
+fetchAllContributors();
diff --git a/index.css b/index.css
index 60d4b6fd..a6d412da 100644
--- a/index.css
+++ b/index.css
@@ -157,3 +157,44 @@ main{
     transition: all ease-in-out 0.7s;
 
   }
+.contributors {
+    margin: 0;
+    padding: 0;
+}
+
+.contributors h1 {
+    font: 5.5vw/1 Permanent Marker;
+    text-align: center;
+    color: white;
+    font-size: 2.5rem;
+    margin-bottom: 4%;
+}
+
+.contributors h1:hover {
+    text-decoration: underline;
+}
+
+#contributor {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.contributor-card {
+    width: 165px;
+    height: 165px;
+    clip-path: polygon(50% 0%, 91% 25%, 91% 75%, 50% 100%, 9% 75%, 9% 25%);
+    margin: 5px;
+}
+
+.contributor-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.contributor-card:nth-child(4n+1),
+.contributor-card:nth-child(4n+3) {
+    margin-top: -30px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 6d0f4b61..85e91167 100644
--- a/index.html
+++ b/index.html
@@ -4004,13 +4004,13 @@ <h2 class="card-title">Danzo Shimura</h2>
                         </div>
                     </div>
                 </div>
-
-
-
-
-
-
-        </main>
+                  
+            </main>
+     <div class="contributors">
+    <h1>Our Valuable Contributors</h1>
+    <div id="contributor"></div>
+  </div>
+  <script src="contributors.js"></script>
 
 
         <audio src="./sound/naruto.mp3"></audio>