diff --git a/resources/views/layouts/adminnav.blade.php b/resources/views/layouts/adminnav.blade.php
index 1ae0fd8..13b43ed 100644
--- a/resources/views/layouts/adminnav.blade.php
+++ b/resources/views/layouts/adminnav.blade.php
@@ -231,9 +231,9 @@
         <div class="mobile-user-profile">
             @if(session()->has('admin_id'))
                 <div class="dropdown">
-                    <a class="text-white text-decoration-none dropdown-toggle d-flex align-items-center gap-2" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false">
-                        <i class="fa-solid fa-circle-user" style="font-size: 26px; color: var(--theme-yellow);"></i>
-                        <span class="fw-semibold small">{{ session('admin_name', 'Admin') }}</span>
+                    <a class="text-white text-decoration-none dropdown-toggle d-flex flex-column align-items-center justify-content-center gap-0" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false" style="line-height: 1.1;">
+                        <i class="fa-solid fa-circle-user" style="font-size: 24px; color: var(--theme-yellow);"></i>
+                        <span class="fst-italic" style="font-size: 11px;">{{ session('admin_name', 'Admin') }}</span>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="userMenuMobile">
                         <li>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index f66bae8..ab5df98 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -178,10 +178,13 @@
             cursor: pointer;
             color: white;
             display: flex;
+            flex-direction: column;
             align-items: center;
-            gap: 8px;
+            justify-content: center;
+            gap: 2px;
             user-select: none;
             text-decoration: none !important;
+            line-height: 1.1;
         }
         
         .user-dropdown-toggle:hover {
@@ -189,12 +192,14 @@
         }
 
         .user-profile-name {
-            font-weight: 600;
-            font-size: 14px;
-            max-width: 120px;
+            font-weight: 500;
+            font-style: italic;
+            font-size: 11px;
+            max-width: 110px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            text-align: center;
         }
 
         .dropdown-menu {
diff --git a/resources/views/layouts/studentportalnav.blade.php b/resources/views/layouts/studentportalnav.blade.php
index 33a4aa3..6b4dee2 100644
--- a/resources/views/layouts/studentportalnav.blade.php
+++ b/resources/views/layouts/studentportalnav.blade.php
@@ -221,9 +221,9 @@
         <div class="mobile-user-profile">
             @if(session()->has('student_id'))
                 <div class="dropdown">
-                    <a class="text-white text-decoration-none dropdown-toggle d-flex align-items-center gap-2" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false">
-                        <i class="fa-solid fa-circle-user" style="font-size: 26px; color: var(--theme-yellow);"></i>
-                        <span class="fw-semibold small">{{ session('student_name') }}</span>
+                    <a class="text-white text-decoration-none dropdown-toggle d-flex flex-column align-items-center justify-content-center gap-0" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false" style="line-height: 1.1;">
+                        <i class="fa-solid fa-circle-user" style="font-size: 24px; color: var(--theme-yellow);"></i>
+                        <span class="fst-italic" style="font-size: 11px;">{{ session('student_name') }}</span>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="userMenuMobile">
                         <li>
diff --git a/resources/views/students.blade.php b/resources/views/students.blade.php
index da6d1cb..5ed5738 100644
--- a/resources/views/students.blade.php
+++ b/resources/views/students.blade.php
@@ -578,6 +578,34 @@ h1, h2, h3, h4, h5, h6 {
     background-color: #ffffff;
 }
 
+.input-group .form-control:not(:last-child) {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.toggle-password-btn {
+    background-color: #F8FAFC;
+    border: 1px solid #CBD5E1;
+    border-left: none;
+    color: #64748B;
+    border-top-right-radius: 12px !important;
+    border-bottom-right-radius: 12px !important;
+    padding-left: 14px;
+    padding-right: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.toggle-password-btn:hover {
+    background-color: #E2E8F0;
+    color: #1E293B;
+    border-color: #CBD5E1;
+}
+
+.input-group:focus-within .toggle-password-btn {
+    border-color: var(--primary-light);
+}
+
 .modal-footer {
     border-top: none;
     padding: 0 30px 35px;
@@ -984,6 +1012,9 @@ h1, h2, h3, h4, h5, h6 {
                         <div class="input-group">
                             <span class="input-group-text"><i class="fa-solid fa-key"></i></span>
                             <input type="password" name="password" id="password" class="form-control" placeholder="Enter your password" required>
+                            <button class="btn toggle-password-btn" type="button" onclick="togglePasswordVisibility('password', 'togglePasswordIcon')">
+                                <i class="fa-solid fa-eye" id="togglePasswordIcon"></i>
+                            </button>
                         </div>
                     </div>
 
@@ -992,13 +1023,15 @@ h1, h2, h3, h4, h5, h6 {
                         <div class="input-group">
                             <span class="input-group-text"><i class="fa-solid fa-shield-halved"></i></span>
                             <input type="password" name="pin" id="pin" class="form-control" maxlength="6" placeholder="Enter 4-6 digit PIN" required>
+                            <button class="btn toggle-password-btn" type="button" onclick="togglePasswordVisibility('pin', 'togglePinIcon')">
+                                <i class="fa-solid fa-eye" id="togglePinIcon"></i>
+                            </button>
                         </div>
                     </div>
                 </div>
                 
-                <div class="modal-footer d-flex gap-2 justify-content-center">
-                    <button type="button" class="btn btn-modal-cancel flex-grow-1" data-bs-dismiss="modal">Cancel</button>
-                    <button type="submit" class="btn btn-modal-login flex-grow-1"> Authenticate & Login </button>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-modal-login w-100"> Authenticate & Login </button>
                 </div>
             </form>
         </div>
@@ -1006,6 +1039,22 @@ h1, h2, h3, h4, h5, h6 {
 </div>
 
 <script>
+function togglePasswordVisibility(inputId, iconId) {
+    const input = document.getElementById(inputId);
+    const icon = document.getElementById(iconId);
+    if (!input || !icon) return;
+    
+    if (input.type === 'password') {
+        input.type = 'text';
+        icon.classList.remove('fa-eye');
+        icon.classList.add('fa-eye-slash');
+    } else {
+        input.type = 'password';
+        icon.classList.remove('fa-eye-slash');
+        icon.classList.add('fa-eye');
+    }
+}
+
 function studentlogin(customMsg) {
     const subTitle = document.querySelector('#studentLoginModal .modal-header p');
     if (subTitle) {