diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.ts b/src/app/content/hemat-app/cost-management/cost-management.component.ts
index 9d36b8a..66d42cd 100644
--- a/src/app/content/hemat-app/cost-management/cost-management.component.ts
+++ b/src/app/content/hemat-app/cost-management/cost-management.component.ts
@@ -426,7 +426,7 @@ export class CostManagementComponent implements OnInit {
     );
   }
 
-  export(){
+  export() {
     this.spinnerExportActive = true;
     setTimeout(() => {
       const columnsToExport = [
diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html
index 99ed18c..47f4096 100644
--- a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html
+++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html
@@ -2,6 +2,8 @@
   <h4 style="color: #ffffff; margin-bottom: 20px !important">
     Comparison of Water and Electricity Costs > {{ dataRow.building }}
   </h4>
+  <p style="color: #ffffff">Room : {{ dataRow?.roomName }}</p>
+  <p style="color: #ffffff">Category : {{ dataRow?.categoryName }}</p>
 
   <div class="card-dashboard">
     <ngx-datatable
diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts
index fcedcf8..fade767 100644
--- a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts
+++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts
@@ -29,6 +29,10 @@ export class ModalExportComponent {
 
   ngOnInit() {
     this.formattedEndDate = this.dataRow.endDate.slice(0, 7);
+  }
+
+  ngAfterViewInit(): void {
+    console.log(this.dataRow);
     this.fetchData(
       this.dataRow.categoryId,
       this.dataRow.roomId,
@@ -75,7 +79,7 @@ export class ModalExportComponent {
         columnsToExport
       );
       this.spinnerExportActive = false;
-      this.activeModal.close('Export completed');
+      this.activeModal.close("Export completed");
     }, 3000);
   }
 }
diff --git a/src/app/content/hemat-app/user-profile/update-password/update-password.component.html b/src/app/content/hemat-app/user-profile/update-password/update-password.component.html
index bfe78b7..b7eafff 100644
--- a/src/app/content/hemat-app/user-profile/update-password/update-password.component.html
+++ b/src/app/content/hemat-app/user-profile/update-password/update-password.component.html
@@ -1 +1,170 @@
-<p>update-password works!</p>
+<section id="update-password">
+  <div class="row">
+    <div class="col-8">
+      <div class="card" style="background-color: #252525 !important">
+        <div class="card-content">
+          <div class="card-header" style="background-color: #252525 !important">
+            <h2 style="color: #ffffff">Update Password</h2>
+          </div>
+          <div class="card-body">
+            <form [formGroup]="profilInfo" (ngSubmit)="onProjectInfoSubmit()">
+              <div class="form-body">
+                <div class="row">
+                  <div class="col-md-12">
+                    <div class="form-group position-relative">
+                      <label for="currentPass" style="color: #ffffff"
+                        >Current Password</label
+                      >
+                      <input
+                        [type]="showCurrentPass ? 'text' : 'password'"
+                        id="currentPass"
+                        class="form-control"
+                        formControlName="currentPass"
+                        placeholder="********"
+                        [ngClass]="{
+                          'is-invalid': submitted && f.currentPass.errors
+                        }"
+                      />
+                      <small
+                        class="form-text text-muted danger"
+                        *ngIf="submitted && f.currentPass.errors"
+                        class="invalid-feedback"
+                      >
+                        <div *ngIf="f.currentPass.errors.required">
+                          Current Password is required
+                        </div>
+                      </small>
+                      <button
+                        type="button"
+                        class="btn btn-link position-absolute"
+                        (click)="toggleCurrentPassVisibility()"
+                        style="top: 30px; right: 10px; color: #c3f164 !important;"
+                      >
+                        <i
+                          [class]="
+                            showCurrentPass ? 'fa fa-eye-slash' : 'fa fa-eye'
+                          "
+                        ></i>
+                      </button>
+                    </div>
+                    <div class="form-group position-relative">
+                      <label for="newPass" style="color: #ffffff"
+                        >New Password</label
+                      >
+                      <input
+                        [type]="showNewPass ? 'text' : 'password'"
+                        id="newPass"
+                        class="form-control"
+                        formControlName="newPass"
+                        placeholder="********"
+                        [ngClass]="{
+                          'is-invalid': submitted && f.newPass.errors
+                        }"
+                      />
+                      <small
+                        class="form-text text-muted danger"
+                        *ngIf="submitted && f.newPass.errors"
+                        class="invalid-feedback"
+                      >
+                        <div *ngIf="f.newPass.errors.required">
+                          New Password is required
+                        </div>
+                        <div *ngIf="f.newPass.errors.minlength">
+                          New Password must be at least 8 characters long
+                        </div>
+                        <div *ngIf="f.newPass.errors.pattern">
+                          New Password must contain at least one uppercase
+                          letter, one lowercase letter, and one number
+                        </div>
+                      </small>
+                      <button
+                        type="button"
+                        class="btn btn-link position-absolute"
+                        (click)="toggleNewPassVisibility()"
+                        style="top: 30px; right: 10px; color: #c3f164 !important;"
+                      >
+                        <i
+                          [class]="
+                            showNewPass ? 'fa fa-eye-slash' : 'fa fa-eye'
+                          "
+                        ></i>
+                      </button>
+                    </div>
+                    <div class="form-group position-relative">
+                      <label for="confirmPass" style="color: #ffffff"
+                        >Confirm Password</label
+                      >
+                      <input
+                        [type]="showConfirmPass ? 'text' : 'password'"
+                        id="confirmPass"
+                        class="form-control"
+                        formControlName="confirmPass"
+                        placeholder="********"
+                        [ngClass]="{
+                          'is-invalid': submitted && f.confirmPass.errors
+                        }"
+                      />
+                      <small
+                        class="form-text text-muted danger"
+                        *ngIf="submitted && f.confirmPass.errors"
+                        class="invalid-feedback"
+                      >
+                        <div *ngIf="f.confirmPass.errors.required">
+                          Confirm Password is required
+                        </div>
+                        <div *ngIf="f.confirmPass.errors.matchPassword">
+                          Confirm Password must match the New Password
+                        </div>
+                      </small>
+                      <button
+                        type="button"
+                        class="btn btn-link position-absolute"
+                        (click)="toggleConfirmPassVisibility()"
+                        style="top: 30px; right: 10px; color: #c3f164 !important;"
+                      >
+                        <i
+                          [class]="
+                            showConfirmPass ? 'fa fa-eye-slash' : 'fa fa-eye'
+                          "
+                        ></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="form-actions text-right">
+                <button
+                  type="button"
+                  class="btn btn-warning mr-1"
+                  style="
+                    color: #ffffff !important;
+                    background-color: transparent !important;
+                    border-color: #ffffff !important;
+                    border-radius: 10px;
+                    width: 145px;
+                  "
+                  (click)="cancel()"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  class="btn btn-primary"
+                  style="
+                    color: #000000 !important;
+                    background-color: #c3f164 !important;
+                    border-radius: 10px;
+                    width: 145px;
+                  "
+                  (click)="saveEdit()"
+                >
+                  Save
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/app/content/hemat-app/user-profile/update-password/update-password.component.ts b/src/app/content/hemat-app/user-profile/update-password/update-password.component.ts
index 582c57e..bf83ab4 100644
--- a/src/app/content/hemat-app/user-profile/update-password/update-password.component.ts
+++ b/src/app/content/hemat-app/user-profile/update-password/update-password.component.ts
@@ -1,10 +1,98 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from "@angular/core";
+import { FormBuilder, FormGroup, NgForm, Validators, AbstractControl, ValidatorFn } from "@angular/forms";
+import { ActivatedRoute, Router } from "@angular/router";
 
 @Component({
-  selector: 'app-update-password',
-  templateUrl: './update-password.component.html',
-  styleUrls: ['./update-password.component.css']
+  selector: "app-update-password",
+  templateUrl: "./update-password.component.html",
+  styleUrls: ["./update-password.component.css"],
 })
 export class UpdatePasswordComponent {
+  @ViewChild("f", { read: true }) userProfileForm: NgForm;
+  public breadcrumb: any;
+  profilInfo: FormGroup;
+  activeTab: string = "profile-info2";
+  submitted = false;
+  showCurrentPass: boolean = false;
+  showNewPass: boolean = false;
+  showConfirmPass: boolean = false;
 
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit(): void {
+    this.profilInfo = this.formBuilder.group({
+      currentPass: ["", Validators.required],
+      newPass: ["", [Validators.required, Validators.minLength(8), Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/)]],
+      confirmPass: ["", [Validators.required, this.matchPassword('newPass')]],
+    });
+
+    this.profilInfo.get('newPass').valueChanges.subscribe(() => {
+      this.profilInfo.get('confirmPass').updateValueAndValidity();
+    });
+  }
+
+  selectTab(tabName: string) {
+    this.activeTab = tabName;
+  }
+
+  get f() {
+    return this.profilInfo.controls;
+  }
+
+  matchPassword(passwordControlName: string): ValidatorFn {
+    return (control: AbstractControl): { [key: string]: boolean } | null => {
+      if (!control.parent || !control) {
+        return null;
+      }
+
+      const passwordControl = control.parent.get(passwordControlName);
+      if (!passwordControl) {
+        return null;
+      }
+
+      if (passwordControl.value !== control.value) {
+        return { matchPassword: true };
+      }
+
+      return null;
+    };
+  }
+
+  onProjectInfoSubmit() {
+    this.submitted = true;
+
+    if (this.profilInfo.invalid) {
+      return;
+    }
+
+    // Handle form submission
+  }
+
+  cancel() {
+    // Handle cancel action
+  }
+
+  saveEdit() {
+    // Handle save action
+    console.log(this.profilInfo);
+    console.log(this.profilInfo.invalid);
+    console.log(this.profilInfo.valid);
+    
+  }
+
+  toggleCurrentPassVisibility() {
+    this.showCurrentPass = !this.showCurrentPass;
+  }
+
+  toggleNewPassVisibility() {
+    this.showNewPass = !this.showNewPass;
+  }
+
+  toggleConfirmPassVisibility() {
+    this.showConfirmPass = !this.showConfirmPass;
+  }
 }
diff --git a/src/app/content/hemat-app/user-profile/user-profile.component.css b/src/app/content/hemat-app/user-profile/user-profile.component.css
index fddb888..9c9d077 100644
--- a/src/app/content/hemat-app/user-profile/user-profile.component.css
+++ b/src/app/content/hemat-app/user-profile/user-profile.component.css
@@ -1,21 +1,25 @@
 .tabs {
   display: flex;
-  border-bottom: 1px solid #ccc;
+  margin-bottom: 20px;
+  /* border-bottom: 1px solid #ccc; */
 }
 
 .tab-link {
   background-color: #333;
-  color: #fff;
+  border-radius: 8px;
+  color: #C3F164;
   padding: 10px 20px;
   cursor: pointer;
   border: none;
   outline: none;
   transition: background-color 0.3s ease;
+  margin-right: 10px;
 }
 
 .tab-link:hover,
 .tab-link.active {
-  background-color: #555;
+  background-color: #C3F164;
+  color: black !important;
 }
 
 .tab-content {
diff --git a/src/app/content/hemat-app/user-profile/user-profile.component.html b/src/app/content/hemat-app/user-profile/user-profile.component.html
index 3d21d0b..d632aac 100644
--- a/src/app/content/hemat-app/user-profile/user-profile.component.html
+++ b/src/app/content/hemat-app/user-profile/user-profile.component.html
@@ -9,7 +9,6 @@
           <button class="tab-link hidden" (click)="selectTab('profile-info')" [class.active]="activeTab === 'profile-info'">Profile Information</button>
           <button class="tab-link" (click)="selectTab('profile-info2')" [class.active]="activeTab === 'profile-info2'">Profile Information</button>
           <button class="tab-link" (click)="selectTab('update-password')" [class.active]="activeTab === 'update-password'">Update Password</button>
-          
         </div>
 
         <div *ngIf="activeTab === 'profile-info'" class="hidden">