diff --git a/Website/HomePage.css b/Website/HomePage.css
index 59a3eef..73490fc 100644
--- a/Website/HomePage.css
+++ b/Website/HomePage.css
@@ -17,7 +17,7 @@ body {
 }
 
 
-nav {
+/* nav {
   justify-content: center;
   align-items: center;
   width: 100%;
@@ -72,10 +72,24 @@ nav {
 
 .nav-links li a:hover:before {
   width: 100%;
+} */
+
+.navbar-toggler{
+  width: 60px;
+}
+
+.navbar-toggler:hover{
+  background-color: #aedcf3;
+}
+
+.btn-outline-info{
+  --bs-btn-border-color: #c5dee2;
+  --bs-btn-color: #9bf9da;
 }
 
 section {
-  padding: 80px 0;
+  padding-top: 30px;
+  /* padding: 80px 0; */
   text-align: center;
 }
 
@@ -161,9 +175,9 @@ h2 {
     margin: 10px 0;
   }
 
-  body{
+  /* body{
     padding-top: 236px;
-  }
+  } */
 
 
   .contributor-grid {
@@ -173,9 +187,9 @@ h2 {
   }
 
   
-  section {
-    padding: 50px 20px;
-  }
+  /* section {
+    padding-top: 230px;
+  } */
 
   
   h2 {
@@ -202,9 +216,9 @@ h2 {
   }
 
   
-  section {
-    padding: 40px 15px;
-  }
+  /* section {
+    padding-top: 230px;
+  } */
 
  
   h2 {
@@ -365,4 +379,26 @@ button:hover {
 #action {
   color: #000000;
   text-align: justify;
+}
+
+
+.contributorCard {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 8px;
+  display: inline-block;
+  text-align: center;
+  width: 150px;
+  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s, box-shadow 0.3s; /* Add transition for smooth effect */
+}
+.contributorCard img {
+  border-radius: 50%;
+  margin-bottom: 8px;
+}
+.contributorCard:hover {
+  transform: translateY(-8px); /* Move the card up on hover */
+  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/Website/dashboard.html b/Website/dashboard.html
index f653a06..238557c 100644
--- a/Website/dashboard.html
+++ b/Website/dashboard.html
@@ -1,23 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Hacktoberfest Contributors</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="./HomePage.css">
-  
+
   <!-- Google API for Google Sign-In -->
   <script src="https://apis.google.com/js/platform.js" async defer></script>
   <meta name="google-signin-client_id" content="YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com">
 
   <!-- Facebook SDK -->
   <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
-  
+
   <style>
     /* Ensure navbar elements are styled properly */
-    nav {
+    /* nav {
       background-color: #333;
-      padding: 10px;
     }
 
     .nav-links {
@@ -41,14 +42,15 @@
 
     .nav-links li a:hover {
       background-color: #575757;
-    }
+    } */
 
     /* Ensure login buttons are visible and aligned properly */
     #login-buttons {
       float: right;
     }
 
-    #login-buttons button, #g-signin2 {
+    #login-buttons button,
+    #g-signin2 {
       background-color: #4CAF50;
       border: none;
       color: white;
@@ -85,8 +87,10 @@
     }
 
     .contributor:hover {
-      transform: translateY(-15px);  /* Float up effect */
-      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Enhance shadow */
+      transform: translateY(-15px);
+      /* Float up effect */
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+      /* Enhance shadow */
     }
 
     .contributor img {
@@ -105,37 +109,43 @@
     }
   </style>
 </head>
+
 <body>
 
   <!-- Navbar -->
-  <nav>
-    <ul class="nav-links">
-      <li><a href="#">Dashboard</a></li>
-      <li class="center"><a href="#contributors">Contributors</a></li>
-      <li class="upward"><a href="#kittens">Kittens</a></li>
-      <li class="forward"><a href="#puppies">Puppies</a></li>
-      <li class="forward"><a href="./pet.html">Name Your Pet</a></li>
-
-      <!-- Login buttons (Google and Facebook) -->
-      <li id="login-buttons">
-        <button onclick="fbLogin()">Login with Facebook</button> <!-- Facebook login button -->
-      </li>
-
-      <!-- Display logged-in user name -->
-      <li id="user-name" style="float: right; margin-right: 20px;"></li>
-    </ul>
-
-    <!-- Dark Mode Toggle
-    <button id="dark-mode-toggle" class="dark-mode-toggle">
-      🌙/☀️
-    </button> -->
+  <nav class="navbar navbar-expand-lg" style="background-color: #28a4ff;">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Dashboard</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#contributors">Contributors</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" aria-current="page" href="#kittens">Kittens</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" aria-current="page" href="#puppies">Puppies</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" aria-current="page" href="./pet.html">Name Your Pet</a>
+          </li>
+        </ul>
+        <form class="d-flex" role="search">
+          <button class="btn btn-outline-info" type="submit" onclick="fbLogin()">Login with Facebook</button>
+        </form>
+      </div>
+    </div>
   </nav>
 
   <!-- Contributors Section -->
   <section id="contributors">
     <h2>Hacktoberfest Contributors</h2>
     <div class="contributor-grid" id="contributor-grid">
-      <!-- Contributors will be dynamically injected here by JavaScript -->
+      <div id="contributors-container"></div>
     </div>
   </section>
 
@@ -173,6 +183,9 @@ <h2>Cute Puppies</h2>
     <p> &copy; <span id="year"></span> Hacktoberfest. All rights reserved.</p>
   </footer>
 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+
+
   <!-- JavaScript for Contributors and Dark Mode -->
   <script>
     document.addEventListener('DOMContentLoaded', function () {
@@ -185,7 +198,7 @@ <h2>Cute Puppies</h2>
           data.forEach(contributor => {
             const contributorElement = document.createElement('div');
             contributorElement.className = 'contributor';
-            
+
             const githubUrl = contributor.github_url;
             const username = githubUrl.match(/https:\/\/github\.com\/([^\/]+)/)[1];
 
@@ -226,27 +239,27 @@ <h2>Cute Puppies</h2>
 
   <!-- Facebook Login Logic -->
   <script>
-    window.fbAsyncInit = function() {
+    window.fbAsyncInit = function () {
       FB.init({
-        appId      : 'YOUR_FACEBOOK_APP_ID',
-        cookie     : true,
-        xfbml      : true,
-        version    : 'v16.0'
+        appId: 'YOUR_FACEBOOK_APP_ID',
+        cookie: true,
+        xfbml: true,
+        version: 'v16.0'
       });
 
-      FB.AppEvents.logPageView();   
+      FB.AppEvents.logPageView();
     };
 
     function fbLogin() {
-      FB.login(function(response) {
+      FB.login(function (response) {
         if (response.status === 'connected') {
           // Logged into your webpage and Facebook.
-          FB.api('/me', { fields: 'first_name' }, function(response) {
+          FB.api('/me', { fields: 'first_name' }, function (response) {
             var firstName = response.first_name;
 
             // Display the user's first name in the navbar
             document.getElementById('user-name').innerHTML = `Welcome, ${firstName}`;
-            
+
             // Hide the Facebook login button after successful login
             document.querySelector('button[onclick="fbLogin()"]').style.display = 'none';
           });
@@ -256,5 +269,48 @@ <h2>Cute Puppies</h2>
       });
     }
   </script>
+
+  <!-- Contributors lists Logic -->
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // Replace 'owner' and 'repo' with the actual owner and repository name
+      const owner = 'cocomantis';
+      const repo = 'Hacktoberfest2024';
+
+      // GitHub API URL for fetching contributors
+      const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contributors`;
+
+      // Fetch contributors data
+      fetch(apiUrl)
+        .then(response => response.json())
+        .then(data => {
+          const container = document.getElementById('contributors-container');
+          data.forEach(contributor => {
+            // Create a card div
+            const contributorCard = document.createElement('div');
+            contributorCard.className = 'contributorCard';
+
+            // Create an image element for the contributor's avatar
+            const avatar = document.createElement('img');
+            avatar.src = contributor.avatar_url;
+            avatar.alt = `${contributor.login}'s avatar`;
+            avatar.width = 50; // Set the width of the image
+            avatar.height = 50; // Set the height of the image
+
+            // Set the text content for the contributor's details
+            const text = document.createTextNode(` ${contributor.login} (${contributor.contributions} contributions)`);
+
+            // Append the avatar and text to the contributorCard
+            contributorCard.appendChild(avatar);
+            contributorCard.appendChild(text);
+
+            // Append the contributorCard to the container
+            container.appendChild(contributorCard);
+          });
+        })
+        .catch(error => console.error('Error fetching contributors:', error));
+    });
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/Website/pet.html b/Website/pet.html
index a7717ca..4711644 100644
--- a/Website/pet.html
+++ b/Website/pet.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Name Your Pets</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="./HomePage.css">
 
     <style>
@@ -79,15 +80,33 @@
 <body>
 
     <!-- Navbar -->
-    <nav>
-        <ul class="nav-links">
-            <li><a href="./dashboard.html">Dashboard</a></li>
-            <li class="center"><a href="./dashboard.html#contributors">Contributors</a></li>
-            <li class="upward"><a href="./dashboard.html#kittens">Kittens</a></li>
-            <li class="forward"><a href="./dashboard.html#puppies">Puppies</a></li>
-            <li class="forward"><a href="./pet.html">Name Your Pet</a></li> <!-- Link to the new page -->
-        </ul>
-    </nav>
+    <nav class="navbar navbar-expand-lg" style="background-color: #28a4ff;">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="./dashboard.html">Dashboard</a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="./dashboard.html#contributors">Contributors</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" aria-current="page" href="./dashboard.html#kittens">Kittens</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" aria-current="page" href="./dashboard.html#puppies">Puppies</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" aria-current="page" href="./pet.html">Name Your Pet</a>
+              </li>
+            </ul>
+            <form class="d-flex" role="search">
+              <button class="btn btn-outline-info" type="submit" onclick="fbLogin()">Login with Facebook</button>
+            </form>
+          </div>
+        </div>
+      </nav>
 
     <section id="name-your-pet">
         <h2>Pet Name Generator</h2>
@@ -138,6 +157,9 @@ <h3 id="generated-name"></h3>
         <p style="text-align: center;">&copy; <span id="year"></span> Hacktoberfest. All rights reserved.</p>
     </footer>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+
+
     <!-- <script src="pet-name.js"></script> -->
     <script src="pet-name-generator.js"></script>
 
