diff --git a/public/css/login_style.css b/public/css/login_style.css
index abbe2ff..9d471b7 100644
--- a/public/css/login_style.css
+++ b/public/css/login_style.css
@@ -2,7 +2,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
 }
 
 body {
@@ -10,11 +10,11 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(to bottom right,#4e54c8, #8f94fb);
+  background: linear-gradient(to bottom right, #4e54c8, #8f94fb);
   color: #333;
 }
 
-.gtranslate_wrapper{
+.gtranslate_wrapper {
   background-color: white;
   position: absolute;
   bottom: 30px;
@@ -22,28 +22,26 @@ body {
   height: 47px;
   /* width: 40px;; */
   margin: auto;
-  padding: 10px;;
+  padding: 10px;
 }
 
-
-
-#icon{
+#icon {
   width: 30px;
   cursor: pointer;
   position: absolute;
-  top: 30px; 
+  top: 30px;
   right: 30px;
 }
-#icon:hover{
+#icon:hover {
   font-weight: 800;
 }
 
-:root{
+:root {
   --primary-color: #fff;
   --secondary-color: #0e0e0e;
 }
 
-.dark-theme{
+.dark-theme {
   --primary-color: #0e0e0e;
   --secondary-color: #fff;
 }
@@ -121,6 +119,24 @@ form input:focus {
   box-shadow: 0 0 8px rgba(142, 160, 240, 0.5);
 }
 
+.password-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.password-container input {
+  padding-right: 30px; /* Add some padding to avoid text overlap with the icon */
+}
+
+.password-container #togglePassword {
+  position: absolute;
+  right: 10px; /* Adjust as needed for spacing */
+  cursor: pointer;
+  top: 40%; /* Center vertically */
+  transform: translateY(-60%); /* Move it slightly up */
+}
+
 a {
   display: block;
   text-align: right;
@@ -144,7 +160,7 @@ button {
   border: none;
   border-radius: 8px;
   cursor: pointer;
-  transition:  0.4s ease-in;
+  transition: 0.4s ease-in;
 }
 
 button:hover {
@@ -157,7 +173,7 @@ button:hover {
   font-size: 15px;
 }
 
-.register p{
+.register p {
   color: var(--secondary-color);
 }
 
@@ -169,10 +185,13 @@ button:hover {
 
 .register a:hover {
   text-decoration: underline;
-  color:blue;
+  color: blue;
 }
 
-#box1, #box2, #box3, #box4 {
+#box1,
+#box2,
+#box3,
+#box4 {
   width: 100%;
   max-width: 500px;
   padding: 12px;
@@ -192,7 +211,9 @@ button:hover {
   display: none;
 }
 
-#box2, #box3, #box4 {
+#box2,
+#box3,
+#box4 {
   background-color: #f8d7da;
   color: #721c24;
   border: 1px solid #f5c6cb;
diff --git a/public/stk_login.html b/public/stk_login.html
index 4d2bdd9..e61d280 100644
--- a/public/stk_login.html
+++ b/public/stk_login.html
@@ -6,22 +6,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SignIn (stakeholder)</title>
     <link rel="stylesheet" href="css/login_style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 </head>
 
 <body>
     <div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
     <script>
-       window.gtranslateSettings = {
-         default_language: "en",
-         detect_browser_language: true,
-         wrapper_selector: ".gtranslate_wrapper",
-         font_size: 100,
-       };
-     </script>
-     <script
-     src="https://cdn.gtranslate.net/widgets/latest/popup.js"
-     defer
-   ></script>
+        window.gtranslateSettings = {
+            default_language: "en",
+            detect_browser_language: true,
+            wrapper_selector: ".gtranslate_wrapper",
+            font_size: 100,
+        };
+    </script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
     <img src="images/moon.webp" id="icon">
     <div class="container">
         <div class="image">
@@ -44,7 +42,10 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S
                 <input type="email" id="email" name="email" placeholder="Enter your email" required>
 
                 <label for="password">Password:</label>
-                <input type="password" id="password" name="password" placeholder="Enter your Password" required>
+                <div class="password-container">
+                    <input type="password" id="password" name="password" placeholder="Enter your password" required>
+                    <i id="togglePassword" class="fa-solid fa-eye-slash"></i>
+                </div>
                 <a href="">Forgot Password?</a>
                 <button type="button" onclick="register()">Login</button>
                 <div class="register">
@@ -57,16 +58,32 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S
         </div>
     </div>
 
+    <!-- Password toggle button-->
+    <script>
+        const togglePassword = document.getElementById('togglePassword');
+        const passwordInput = document.getElementById('password');
+
+        togglePassword.addEventListener('click', function () {
+            // Toggle the type attribute
+            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+            passwordInput.setAttribute('type', type);
+
+            // Toggle the icon
+            this.classList.toggle('fa-eye');
+            this.classList.toggle('fa-eye-slash');
+        });
+    </script>
+
     <!-- Updated register function starts here -->
     <script>
-        var icon =document.getElementById("icon");
-        icon.onclick = function(){
+        var icon = document.getElementById("icon");
+        icon.onclick = function () {
             document.body.classList.toggle("dark-theme");
-            if(document.body.classList.contains("dark-theme")){
-                icon.src="images/sun.png";
+            if (document.body.classList.contains("dark-theme")) {
+                icon.src = "images/sun.png";
             }
-            else{
-                icon.src="images/moon.png";
+            else {
+                icon.src = "images/moon.png";
             }
         }
 
@@ -80,13 +97,13 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S
         const register = async () => {
             const email = document.getElementById('email').value;
             const password = document.getElementById('password').value;
-            
+
             // Check if both fields are filled
             if (!email || !password) {
                 alert('Please fill in both the email and password fields.');
                 return; // Stop execution if fields are not filled
             }
-            
+
             const result1 = document.getElementById('box1');
             const result2 = document.getElementById('box2');
             const result3 = document.getElementById('box3');
@@ -97,7 +114,7 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S
                 alert('Please use a valid email from Gmail, Outlook, or other reputable providers.');
                 return;
             }
-            
+
             try {
                 const response = await fetch('/stk_holder_signin', {
                     method: "POST",
@@ -106,7 +123,7 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S
                     },
                     body: JSON.stringify({ email, password }),
                 });
-                
+
                 if (response.ok) {
                     const result = await response.json();
                     const token = result.accessToken;
@@ -153,4 +170,4 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/public/stk_signup.html b/public/stk_signup.html
index 4592d0b..271b7c4 100644
--- a/public/stk_signup.html
+++ b/public/stk_signup.html
@@ -6,22 +6,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SignUp (stakeholder)</title>
     <link rel="stylesheet" href="css/login_style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 </head>
 
 <body>
     <div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
     <script>
-       window.gtranslateSettings = {
-         default_language: "en",
-         detect_browser_language: true,
-         wrapper_selector: ".gtranslate_wrapper",
-         font_size: 100,
-       };
-     </script>
-     <script
-     src="https://cdn.gtranslate.net/widgets/latest/popup.js"
-     defer
-   ></script>
+        window.gtranslateSettings = {
+            default_language: "en",
+            detect_browser_language: true,
+            wrapper_selector: ".gtranslate_wrapper",
+            font_size: 100,
+        };
+    </script>
+    <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
     <img src="images/moon.webp" id="icon">
     <div id="box2">
         <p>Please Try Again! Account Already Exists</p>
@@ -43,7 +41,10 @@ <h2 style="text-align: center;">Sign Up</h2>
                 <input type="email" id="email" name="email" placeholder="Enter your email" required>
 
                 <label for="password">Password</label>
-                <input type="password" id="password" name="password" placeholder="Enter your password" required>
+                <div class="password-container">
+                    <input type="password" id="password" name="password" placeholder="Enter your password" required>
+                    <i id="togglePassword" class="fa-solid fa-eye-slash"></i>
+                </div>
 
                 <button type="button" onclick="register()">Sign Up</button>
                 <div class="register">
@@ -55,6 +56,23 @@ <h2 style="text-align: center;">Sign Up</h2>
             <p>Successfully Registered... Redirecting Please Wait...</p>
         </div>
     </div>
+
+    <!-- Password toggle button-->
+    <script>
+        const togglePassword = document.getElementById('togglePassword');
+        const passwordInput = document.getElementById('password');
+
+        togglePassword.addEventListener('click', function () {
+            // Toggle the type attribute
+            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+            passwordInput.setAttribute('type', type);
+
+            // Toggle the icon
+            this.classList.toggle('fa-eye');
+            this.classList.toggle('fa-eye-slash');
+        });
+    </script>
+
     <script>
         var icon = document.getElementById("icon");
         icon.onclick = function () {
@@ -129,4 +147,4 @@ <h2 style="text-align: center;">Sign Up</h2>
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
