diff --git a/contributors.html b/contributors.html
new file mode 100644
index 0000000..7df01f5
--- /dev/null
+++ b/contributors.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contributors</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background: linear-gradient(to right, rgba(255, 238, 255, 0.8), rgba(238, 238, 238, 0.8));
+            color: #333;
+        }
+        h2 {
+            text-align: center;
+            margin-bottom: 40px;
+            font-size: 2.8em;
+            color: rgb(219, 127, 219);
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+        }
+        .contributors-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 30px;
+            padding: 0 10px;
+        }
+        .contributor-card {
+            background: #ffffff;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s, box-shadow 0.3s;
+            text-align: center;
+            overflow: hidden;
+            padding: 20px;
+            position: relative;
+        }
+        .contributor-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(219, 127, 219, 0.2);
+            border-radius: 12px;
+            z-index: 0;
+        }
+        .contributor-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+        }
+        .contributor-card img {
+            border-radius: 50%;
+            width: 120px;
+            height: 120px;
+            margin-top: 15px;
+            border: 3px solid rgb(219, 127, 219);
+            z-index: 1;
+            position: relative;
+        }
+        .contributor-card h3 {
+            margin: 15px 0 5px;
+            font-size: 1.6em;
+            color: rgb(219, 127, 219);
+            z-index: 1;
+            position: relative;
+        }
+        .contributor-card p {
+            margin: 0 0 10px;
+            color: #757575;
+            font-size: 1.1em;
+            z-index: 1;
+            position: relative;
+        }
+        .contributor-card a {
+            display: inline-block;
+            text-decoration: none;
+            color: #ffffff;
+            background: rgb(219, 127, 219);
+            padding: 10px 20px;
+            border-radius: 5px;
+            transition: background 0.3s, transform 0.3s;
+            z-index: 1;
+            position: relative;
+        }
+        .contributor-card a:hover {
+            background: rgba(219, 127, 219, 0.8);
+            transform: scale(1.05);
+        }
+    </style>
+</head>
+<body>
+    <h2>Contributors</h2>
+    <div class="contributors-container" id="contributors"></div>
+
+    <script>
+        async function fetchContributors() {
+            try {
+                const response = await fetch('https://api.github.com/repos/MastanSayyad/Visual-Sort/contributors');
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                const contributors = await response.json();
+                displayContributors(contributors);
+            } catch (error) {
+                console.error('There was a problem with the fetch operation:', error);
+            }
+        }
+
+        function displayContributors(contributors) {
+            const container = document.getElementById('contributors');
+
+            contributors.forEach(contributor => {
+                const card = document.createElement('div');
+                card.className = 'contributor-card';
+
+                card.innerHTML = `
+                    <img src="${contributor.avatar_url}" alt="${contributor.login}">
+                    <h3>${contributor.login}</h3>
+                    <p>Contributions: ${contributor.contributions}</p>
+                    <a href="${contributor.html_url}" target="_blank">View Profile</a>
+                `;
+                
+                container.appendChild(card);
+            });
+        }
+
+        fetchContributors();
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
index 7444989..443c8e2 100644
--- a/index.html
+++ b/index.html
@@ -1045,10 +1045,11 @@ <h5>Home</h5>
       <div class="col-6 col-md-2 mb-3">
         <h5>About</h5>
         <ul class="nav flex-column">
-          <li class="nav-item mb-2"><a href="#About-Us" class="nav-link p-0 text-body-secondary">About</a></li>
-          <li class="nav-item mb-2"><a href="https://github.com/MastanSayyad/Visual-Sort/graphs/contributors" class="nav-link p-0 text-body-secondary">Our Contributors</a></li>
+            <li class="nav-item mb-2"><a href="#About-Us" class="nav-link p-0 text-body-secondary">About</a></li>
+            <li class="nav-item mb-2"><a href="contributors.html" class="nav-link p-0 text-body-secondary">Our Contributors</a></li>
         </ul>
-      </div>
+    </div>
+    
 
       <div class="col-6 col-md-2 mb-3">
         <h5>Support</h5>
