diff --git a/assets/css/contributor-flip.css b/assets/css/contributor-flip.css
index ad419f1..b176747 100644
--- a/assets/css/contributor-flip.css
+++ b/assets/css/contributor-flip.css
@@ -28,7 +28,7 @@
   height: 100%;
   backface-visibility: hidden;
   border-radius: 1rem;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
   background: #fff;
   display: flex;
   flex-direction: column;
@@ -53,3 +53,47 @@
   font-weight: bold;
   text-decoration: underline;
 }
+
+/* Dynamic CSS Grid Layout */
+#contributors-container {
+  display: grid;
+  gap: 1.5rem;
+  justify-content: center;
+  /* Default for mobile: 1 column */
+  grid-template-columns: repeat(1, minmax(280px, 1fr));
+}
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) {
+  #contributors-container {
+    grid-template-columns: repeat(2, minmax(280px, 1fr));
+  }
+}
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+  #contributors-container {
+    grid-template-columns: repeat(2, minmax(280px, 1fr));
+  }
+}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+  #contributors-container {
+    grid-template-columns: repeat(3, minmax(280px, 1fr));
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+  #contributors-container {
+    grid-template-columns: repeat(4, minmax(280px, 1fr));
+  }
+}
+
+/* Extra extra large devices (larger screens, 1400px and up) */
+@media (min-width: 1400px) {
+  #contributors-container {
+    grid-template-columns: repeat(5, minmax(280px, 1fr));
+  }
+}
diff --git a/contributors.html b/contributors.html
index 8b22c76..850a33b 100644
--- a/contributors.html
+++ b/contributors.html
@@ -22,21 +22,17 @@
     <title>DevBlog - Blog for Developers</title>
     <link rel="stylesheet" href="assets/css/style.css" id="theme-sheet" />
     <link rel="stylesheet" href="assets/css/contributor-flip.css" />
-
   </head>
   <body>
-
-  <div id="navbar-placeholder"></div>
-
+    <div id="navbar-placeholder"></div>
 
     <div class="container my-5 pt-5">
       <h2 class="text-center mb-5">Our Contributors</h2>
-      <div id="contributors-container" class="row g-4">
+      <div id="contributors-container">
         <!-- Contributors will be dynamically loaded here -->
       </div>
     </div>
 
-
     <!-- Footer -->
     <div class="footer-dark">
       <footer>
@@ -86,7 +82,7 @@ <h3>DevBlog</h3>
   <script type="module">
     import { Octokit } from "https://cdn.pika.dev/@octokit/core@1.3.2";
     const octokit = new Octokit();
-    
+
     // Function to get user details for additional info
     async function getUserDetails(username) {
       try {
@@ -99,7 +95,7 @@ <h3>DevBlog</h3>
         return null;
       }
     }
-    
+
     octokit
       .request("GET /repos/:owner/:repo/contributors", {
         owner: "jineshnagori",
@@ -109,42 +105,62 @@ <h3>DevBlog</h3>
         const contributorsHtml = await Promise.all(
           response.data.map(async (user) => {
             const userDetails = await getUserDetails(user.login);
-            const bio = userDetails?.bio || "Developer and open source contributor";
+            const bio =
+              userDetails?.bio || "Developer and open source contributor";
             const name = userDetails?.name || user.login;
             const location = userDetails?.location || "";
             const company = userDetails?.company || "";
-            
+
             return `
-              <div class="col-lg-3 col-md-4 col-sm-6">
-                <div class="contributor-card" onclick="toggleFlip(this)">
-                  <div class="contributor-card-inner">
-                    <div class="contributor-card-front">
-                      <img src="${user.avatar_url}" class="rounded-circle p-3" style="width: 120px; height: 120px; object-fit: cover;" alt="${user.login}">
-                      <div class="text-center p-3">
-                        <h5 class="mb-2">${name}</h5>
-                        <p class="text-muted mb-2">@${user.login}</p>
-                        <p class="text-primary fw-bold">${user.contributions} contributions</p>
-                      </div>
+              <div class="contributor-card" onclick="toggleFlip(this)">
+                <div class="contributor-card-inner">
+                  <div class="contributor-card-front">
+                    <img src="${
+                      user.avatar_url
+                    }" class="rounded-circle p-3" style="width: 120px; height: 120px; object-fit: cover;" alt="${
+              user.login
+            }">
+                    <div class="text-center p-3">
+                      <h5 class="mb-2">${name}</h5>
+                      <p class="text-muted mb-2">@${user.login}</p>
+                      <p class="text-primary fw-bold">${
+                        user.contributions
+                      } contributions</p>
                     </div>
-                    <div class="contributor-card-back">
-                      <div class="text-center h-100 d-flex flex-column justify-content-center">
-                        <img src="${user.avatar_url}" class="rounded-circle mb-3 mx-auto" style="width: 80px; height: 80px; object-fit: cover;" alt="${user.login}">
-                        <h6 class="mb-2">${name}</h6>
-                        <p class="small text-muted mb-2">${bio}</p>
-                        ${location ? `<p class="small mb-1"><i class="fas fa-map-marker-alt me-1"></i>${location}</p>` : ''}
-                        ${company ? `<p class="small mb-2"><i class="fas fa-building me-1"></i>${company}</p>` : ''}
-                        <a href="${user.html_url}" target="_blank" class="btn btn-primary btn-sm mt-2">
-                          <i class="fab fa-github me-1"></i>View Profile
-                        </a>
-                      </div>
+                  </div>
+                  <div class="contributor-card-back">
+                    <div class="text-center h-100 d-flex flex-column justify-content-center">
+                      <img src="${
+                        user.avatar_url
+                      }" class="rounded-circle mb-3 mx-auto" style="width: 80px; height: 80px; object-fit: cover;" alt="${
+              user.login
+            }">
+                      <h6 class="mb-2">${name}</h6>
+                      <p class="small text-muted mb-2">${bio}</p>
+                      ${
+                        location
+                          ? `<p class="small mb-1"><i class="fas fa-map-marker-alt me-1"></i>${location}</p>`
+                          : ""
+                      }
+                      ${
+                        company
+                          ? `<p class="small mb-2"><i class="fas fa-building me-1"></i>${company}</p>`
+                          : ""
+                      }
+                      <a href="${
+                        user.html_url
+                      }" target="_blank" class="btn btn-primary btn-sm mt-2">
+                        <i class="fab fa-github me-1"></i>View Profile
+                      </a>
                     </div>
                   </div>
                 </div>
               </div>`;
           })
         );
-        
-        document.getElementById("contributors-container").innerHTML = contributorsHtml.join("");
+
+        document.getElementById("contributors-container").innerHTML =
+          contributorsHtml.join("");
       });
   </script>
   <script>
@@ -175,43 +191,48 @@ <h6 class="mb-2">${name}</h6>
     function toggleFlip(card) {
       // Only toggle on click for mobile devices
       if (window.innerWidth <= 768) {
-        card.classList.toggle('flipped');
+        card.classList.toggle("flipped");
       }
     }
 
     // Add event listeners for better mobile interaction
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener("DOMContentLoaded", function () {
       // Reset flip state when clicking outside cards on mobile
-      document.addEventListener('click', function(e) {
-        if (window.innerWidth <= 768 && !e.target.closest('.contributor-card')) {
-          document.querySelectorAll('.contributor-card.flipped').forEach(card => {
-            card.classList.remove('flipped');
-          });
+      document.addEventListener("click", function (e) {
+        if (
+          window.innerWidth <= 768 &&
+          !e.target.closest(".contributor-card")
+        ) {
+          document
+            .querySelectorAll(".contributor-card.flipped")
+            .forEach((card) => {
+              card.classList.remove("flipped");
+            });
         }
       });
     });
   </script>
-<script>
-window.addEventListener("scroll", function() {
-  const navbar = document.querySelector(".navbar-frosted");
-  if (window.scrollY > 50) {
-    navbar.classList.add("scrolled");
-  } else {
-    navbar.classList.remove("scrolled");
-  }
-});
-</script>
-<script>
-fetch("templates/navbar.html")
-  .then(response => response.text())
-  .then(data => {
-    document.getElementById("navbar-placeholder").innerHTML = data;
-  });
-</script>
+  <script>
+    window.addEventListener("scroll", function () {
+      const navbar = document.querySelector(".navbar-frosted");
+      if (window.scrollY > 50) {
+        navbar.classList.add("scrolled");
+      } else {
+        navbar.classList.remove("scrolled");
+      }
+    });
+  </script>
+  <script>
+    fetch("templates/navbar.html")
+      .then((response) => response.text())
+      .then((data) => {
+        document.getElementById("navbar-placeholder").innerHTML = data;
+      });
+  </script>
 
   <!-- Fontawesome Script -->
   <script
     src="https://kit.fontawesome.com/6d2226036d.js"
     crossorigin="anonymous"
   ></script>
-</html>
\ No newline at end of file
+</html>
