diff --git a/Website/HomePage.css b/Website/HomePage.css
index e4808e1..231aca0 100644
--- a/Website/HomePage.css
+++ b/Website/HomePage.css
@@ -152,14 +152,7 @@ h2 {
 /* Responsive Media Queries */
 @media (max-width: 768px) {
   /* Navbar */
-  .nav-links {
-    flex-direction: column;
-    padding: 10px;
-  }
-
-  .nav-links li {
-    margin: 10px 0;
-  }
+  
 
   body{
     padding-top: 236px;
@@ -185,14 +178,7 @@ h2 {
 
 @media (max-width: 480px) {
   /* Navbar */
-  .nav-links {
-    flex-direction: column;
-    padding: 8px;
-  }
-
-  .nav-links li {
-    margin: 8px 0;
-  }
+  
 
 
   .contributor-grid {
@@ -308,7 +294,7 @@ button:hover {
 }
 
 
-<style>
+
   /* Basic contributor grid styling */
   .contributor-grid {
     display: flex;
@@ -349,6 +335,4 @@ button:hover {
 
   .contributor a:hover {
     color: #007BFF;
-  }
-</style>
- main
+  }
\ No newline at end of file
diff --git a/Website/HomePage.html b/Website/HomePage.html
index 00f0b27..af76004 100644
--- a/Website/HomePage.html
+++ b/Website/HomePage.html
@@ -9,61 +9,14 @@
   <!-- 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">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 
   <!-- 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 {
-      background-color: #333;
-      padding: 10px;
-    }
-
-    .nav-links {
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-    }
-
-    .nav-links li {
-      float: left;
-      margin-right: 15px;
-    }
-
-    .nav-links li a {
-      color: white;
-      text-decoration: none;
-      padding: 14px 16px;
-      display: block;
-    }
-
-    .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 {
-      background-color: #4CAF50;
-      border: none;
-      color: white;
-      padding: 10px 20px;
-      margin-right: 10px;
-      text-align: center;
-      text-decoration: none;
-      display: inline-block;
-      font-size: 16px;
-      cursor: pointer;
-    }
 
-    #login-buttons button:hover {
-      background-color: #45a049;
-    }
 
     /* Contributor grid and hover effect */
     .contributor-grid {
@@ -108,28 +61,42 @@
 <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="auth"><a href="./login.html">Login</a></li> <!-- Login Page Working -->
-      <li class="forward"><a href="./nameGenerator.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 bg-body-tertiary">
+    <div class="container-fluid nav-links">
+      <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" aria-current="page" href="#">Dashboard</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Contributors</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Kittens</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Puppies</a>
+          </li>
+         
+          <li class="nav-item">
+            <a class="nav-link" href="./nameGenerator.html">Name Your Pet</a>
+          </li>
+          
+        </ul>
+        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <a class="nav-link" href="./login.html">Login</a>
+            <li class="nav-item" id="login-buttons">
+              <button onclick="fbLogin()">Login with Facebook</button> <!-- Facebook login button -->
+            </li>
+          </li>
+        </ul>
+        
+      </div>
+    </div>
   </nav>
 
   <!-- Contributors Section -->
@@ -173,7 +140,8 @@ <h2>Cute Puppies</h2>
   <footer>
     <p> &copy; <span id="year"></span> Hacktoberfest. All rights reserved.</p>
   </footer>
-
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
   <!-- JavaScript for Contributors and Dark Mode -->
   <script>
     document.addEventListener('DOMContentLoaded', function () {
