diff --git a/ProjectSourceCode/src/resources/css/navigation-bar/login.css b/ProjectSourceCode/src/resources/css/navigation-bar/login.css
new file mode 100644
index 0000000..d845822
--- /dev/null
+++ b/ProjectSourceCode/src/resources/css/navigation-bar/login.css
@@ -0,0 +1,13 @@
+#login-page {
+    width: 400px;
+    height: fit-content;
+    position: absolute;
+    top: 150px; /* Adjust this value as needed */
+    right: 20px; /* Adjust this value as needed */
+    z-index: 10;
+    background-color: white;
+    border: 1px solid gray;
+    border-radius: 8px;
+}
+
+  
\ No newline at end of file
diff --git a/ProjectSourceCode/src/resources/js/navigation-bar/user/login.js b/ProjectSourceCode/src/resources/js/navigation-bar/user/login.js
new file mode 100644
index 0000000..1afd585
--- /dev/null
+++ b/ProjectSourceCode/src/resources/js/navigation-bar/user/login.js
@@ -0,0 +1,12 @@
+// Function to render login.hbs when #user is clicked
+function renderLogin() {
+    // Assuming you're using jQuery
+    $('#user').on('click', function() {
+      // Load the login.hbs template content using AJAX
+      res.render('/login');
+    });
+  }
+  
+  // Call the function to enable rendering login.hbs
+  renderLogin();
+  
diff --git a/ProjectSourceCode/src/views/partials/footer.hbs b/ProjectSourceCode/src/views/partials/footer.hbs
index eb850b7..8e4b20d 100644
--- a/ProjectSourceCode/src/views/partials/footer.hbs
+++ b/ProjectSourceCode/src/views/partials/footer.hbs
@@ -3,8 +3,9 @@
             © 2024 - CSCI 3308 Group 6
         </p>
 
-        <!-- In your HTML file -->
+        <!-- Navigation Bar Scripts -->
         <script src="js/navigation-bar/navigation-bar-follow.js"></script>
+        <script src="js/navigation-bar/user/login.js"></script>
 
         <!-- Include Bootstrap JavaScript -->
         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
diff --git a/ProjectSourceCode/src/views/partials/head.hbs b/ProjectSourceCode/src/views/partials/head.hbs
index 5cdaea4..9dd1052 100644
--- a/ProjectSourceCode/src/views/partials/head.hbs
+++ b/ProjectSourceCode/src/views/partials/head.hbs
@@ -8,6 +8,7 @@
 
   <!-- Navigation Bar Stylesheets -->
   <link rel="stylesheet" type="text/css" href="css/navigation-bar/navigation-bar.css">
+  <link rel="stylesheet" type="text/css" href="css/navigation-bar/login.css">
 
     <!-- Scoreboard Header Stylesheets -->
     <link rel="stylesheet" type="text/css" href="css/navigation-bar/scoreboard-header/scoreboard.css">
diff --git a/ProjectSourceCode/src/views/pages/login.hbs b/ProjectSourceCode/src/views/partials/navigation-bar/login.hbs
similarity index 90%
rename from ProjectSourceCode/src/views/pages/login.hbs
rename to ProjectSourceCode/src/views/partials/navigation-bar/login.hbs
index 620a884..c671fb1 100644
--- a/ProjectSourceCode/src/views/pages/login.hbs
+++ b/ProjectSourceCode/src/views/partials/navigation-bar/login.hbs
@@ -1,6 +1,6 @@
     <!-- Linking forms.css -->
-    <div class="login-page">
-      <div class="form-container">
+    <div class="login-page" id="login-page">
+      <div class="form-container" id="login-form">
         <h1 class="mt-5 mb-4">Login</h1>
 
         <!-- Check if message variable is present to display message partial -->
diff --git a/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs b/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs
index b95fdd2..87c56bd 100644
--- a/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs
+++ b/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs
@@ -1,17 +1,17 @@
+<!-- Include jQuery library -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+<!-- HTML structure -->
 <nav class="navbar navbar-expand-lg navbar-dark" id="navigation-bar-container">
-
-  <div class="container-fluid d-flex justify-content-between align-items-center"> <!-- Added container-fluid for full-width -->
-
-    <div> <!-- Wrapped navbar brand and toggler in a div -->
+  <div class="container-fluid d-flex justify-content-between align-items-center">
+    <div>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation" style="margin-right: 20px;">
         <span class="navbar-toggler-icon"></span>
       </button>
       <a class="logo" id="logo" href="/home">ScoreSpot</a>
       <div id="line"></div>
     </div>
-
     <div class="collapse navbar-collapse" id="navbarToggler">
-      
       <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
 
         <li class="nav-item">
@@ -40,11 +40,26 @@
 
       </ul>
     </div>
-
-    <!-- Right-aligned image outside collapsing area -->
     <div id="user" class="d-sm-flex">
       <img src="img/navigation-bar/user.png" alt="Your Image" class="img-fluid" style="width: 30px;">
     </div>
-    
   </div>
 </nav>
+
+<!-- Container for login section -->
+<div id="login-container" class="container">
+  {{> navigation-bar/login}}
+</div>
+
+<!-- JavaScript to handle click event -->
+<script>
+  $(document).ready(function() {
+    // When #user is clicked
+    $('#user').click(function() {
+      // Toggle the visibility of the login container
+      $('#login-container').toggle();
+    });
+  });
+</script>
+
+