diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
index ba7379a..336b23f 100644
--- a/src/app/shared/components/header/header.component.html
+++ b/src/app/shared/components/header/header.component.html
@@ -44,14 +44,14 @@
       <div class="d-flex align-items-center">
 
         <div class="d-none d-lg-inline-block me-3">
-          <label class="text-muted fw-normal mb-0" 
+          <label class="text-muted fw-normal mb-0 " 
                  [title]="mismatchedDates" 
                  [style]="{'color': dateColor}" 
-                 style="font-size: 14px;">
+                 style="font-size: 14px;" >
             {{'date' | translate}}: {{date}}
           </label>
         </div>
-
+        
         <div class="dropdown d-inline-block profile-dropdown">
           <button type="button"
                   class="btn header-item waves-effect p-0 d-flex align-items-center"
@@ -60,10 +60,10 @@
                   aria-haspopup="true"
                   [attr.aria-expanded]="isDropdownVisible ? 'true' : 'false'">
             <img class="rounded-circle header-profile-user" src="assets/images/user-icon.png" alt="user-icon" />
-            <span class="d-none d-xl-inline-block ms-2 text-muted">{{username}}</span>
+            <span class="d-none d-xl-inline-block ms-2 fw-sm">{{username}}</span>
             <i class="mdi mdi-chevron-down text-muted d-xl-inline-block font-size-22"></i>
           </button>
-
+          
           <div class="dropdown-menu dropdown-menu-end" [ngClass]="{'show': isDropdownVisible}">
             <a class="dropdown-item text-danger" (click)="logout()">
               <i class="bx bx-power-off font-size-16 align-middle me-1 text-danger"></i> {{ 'logout' | translate }}
diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts
index b6dd633..c8503ec 100644
--- a/src/app/shared/components/header/header.component.ts
+++ b/src/app/shared/components/header/header.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, Inject, PLATFORM_ID } from '@angular/core';
+import { Component, HostListener, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SidebarService } from '../../../services/sidebar.service';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
@@ -12,7 +12,7 @@ import { AuthenticationService } from '../../../services/authenticate.service';
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss'
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit{
   isDropdownVisible: boolean;
   isVacDropdownVisible: boolean;
   isNotificationsVisible: boolean;
@@ -25,9 +25,9 @@ export class HeaderComponent {
     },
   ];
   direction: string = 'ltr';
-  userString;
-  user;
-  username;
+  user: any;
+  userObj: any;
+  username : string = '';
   mismatchedDates: string = "";
   dateColor = "black";
   date: any;
@@ -42,9 +42,6 @@ export class HeaderComponent {
     this.isDropdownVisible = false;
     this.isVacDropdownVisible = false;
     this.isNotificationsVisible = false;
-    this.userString = this.storageService.getItem('user');
-    this.user = JSON.parse(this.userString as string);
-    this.username = this.user?.username;
     this.date = new Date().toISOString().split('T')[0];
   }
   ngOnInit(): void {
@@ -57,6 +54,8 @@ export class HeaderComponent {
         this.storageService.setItem('sidebarState', isCollapsed ? 'expanded' : 'collapsed');
       }
     }
+    this.userObj = JSON.parse(this.storageService.getItem('user') || '{}');
+    this.username = this.userObj?.user?.userFullname ?? '';
   }
 
   ngAfterViewInit(): void {
diff --git a/src/app/user-management/change-password/change-password.component.html b/src/app/user-management/change-password/change-password.component.html
index 663e705..7b66156 100644
--- a/src/app/user-management/change-password/change-password.component.html
+++ b/src/app/user-management/change-password/change-password.component.html
@@ -96,8 +96,8 @@
                                                                         {{ 'oldPassword' | translate }}<span
                                                                             class="mandatory">*</span>
                                                                     </label>
-                                                                    <div class="password-wrapper position-relative w-100">
-                                                                        <div class="d-flex flex-row align-items-stretch">
+                                                                    <div class="w-100">
+                                                                        <div class="password-wrapper">
                                                                         <input type="text" id="oldPassword"
                                                                             class="form-control"
                                                                             formControlName="oldPassword"
@@ -105,7 +105,8 @@
                                                                             placeholder="{{ 'oldPassword' | translate }}" appNoWhitespaces
                                                                             />
                                                                              <app-password-hide-show #psh class="password-eye align-items-stretch" [showPassword]="true" (onEyeClick)="togglePasswordType()"></app-password-hide-show>
-                                                                       </div>
+                                                                             </div>
+                                                                      
                                                                         <div class="text-danger" *ngIf="changePasswordForm.get('oldPassword')?.touched &&
                                                                                       changePasswordForm.get('oldPassword')?.invalid">
                                                                             {{ 'fieldRequired' | translate }}
@@ -120,22 +121,19 @@
                                                                         {{ 'enterNewPassword' | translate }}<span
                                                                             class="mandatory">*</span>
                                                                     </label>
-                                                                    <div class="password-wrapper position-relative w-100">
-                                                                        
-                                                                            <input id="newPassword"
-                                                                            class="form-control"
-                                                                            formControlName="newPassword"
-                                                                            type="{{passwordType1}}"
-                                                                            maxlength="500"
-                                                                            placeholder="{{ 'enterNewPassword' | translate }}" appNoWhitespaces
-                                                                            rows="3"  />
-                                                                            <app-password-hide-show #psh1 class="password-eye align-items-stretch" [showPassword]="true" (onEyeClick)="togglePasswordType1()"></app-password-hide-show>
-                                                                       
-                                                                        
-                                                                    </div>
-                                                                    <div class="text-danger" *ngIf="newPasswordError$">
+                                                                    <div class="w-100">
+                                                                        <div class="password-wrapper">
+                                                                        <input id="newPassword" class="form-control" formControlName="newPassword" type="{{passwordType1}}" maxlength="500"
+                                                                            placeholder="{{ 'enterNewPassword' | translate }}" appNoWhitespaces rows="3" />
+                                                                        <app-password-hide-show #psh1 class="password-eye align-items-stretch" [showPassword]="true"
+                                                                            (onEyeClick)="togglePasswordType1()"></app-password-hide-show>
+                                                                            </div>
+                                                                    
+                                                                    
+                                                                        <div class="text-danger" *ngIf="newPasswordError$">
                                                                             {{ newPasswordError$ | translate }}
                                                                         </div>
+                                                                    </div>
                                                                 </div>
                                                             </div>
 
@@ -147,22 +145,19 @@
                                                                         {{ 'confirmPassword' | translate }}<span
                                                                             class="mandatory">*</span>
                                                                     </label>
-                                                                    <div class="password-wrapper position-relative w-100">
-                                                                        
-                                                                            <input id="confirmPassword"
-                                                                            class="form-control"
-                                                                            formControlName="confirmPassword"
-                                                                            type="{{passwordType2}}"
-                                                                            maxlength="500"
-                                                                            placeholder="{{ 'confirmPassword' | translate }}" appNoWhitespaces
-                                                                            rows="3"  />
-                                                                            <app-password-hide-show #psh2 class="password-eye align-items-stretch" [showPassword]="true" (onEyeClick)="togglePasswordType2()"></app-password-hide-show>
-                                                                       
-                                                                        
-                                                                    </div>
-                                                                    <div class="text-danger" *ngIf="confirmPasswordError$">
+                                                                    <div class="w-100">
+                                                                        <div class="password-wrapper">
+                                                                        <input id="confirmPassword" class="form-control" formControlName="confirmPassword" type="{{passwordType2}}"
+                                                                            maxlength="500" placeholder="{{ 'confirmPassword' | translate }}" appNoWhitespaces rows="3" />
+                                                                        <app-password-hide-show #psh2 class="password-eye align-items-stretch" [showPassword]="true"
+                                                                            (onEyeClick)="togglePasswordType2()"></app-password-hide-show>
+                                                                            </div>
+                                                                    
+                                                                        <div class="text-danger" *ngIf="confirmPasswordError$">
                                                                             {{ confirmPasswordError$ | translate }}
                                                                         </div>
+                                                                    </div>
+                                                                    
                                                                 </div>
                                                             </div>
                                                             <div class="col-md-6">