diff --git a/frontend/src/app/auth.service.ts b/frontend/src/app/auth.service.ts
index 8af1a6fd..09cdcab6 100644
--- a/frontend/src/app/auth.service.ts
+++ b/frontend/src/app/auth.service.ts
@@ -42,6 +42,18 @@ export class AuthService {
     return this.http.patch(`${this.api}/password-reset`, creds);
   }
 
+  updatePassword(
+    oldPassword: string,
+    newPassword: string,
+    confirmNewPassword: string
+  ) {
+    return this.http.patch(`${this.api}/user/password`, {
+      oldPassword,
+      newPassword,
+      confirmNewPassword,
+    });
+  }
+
   refreshSession() {
     const refreshToken = this.getRefreshToken();
     return this.http.post(`${this.api}/refresh`, { refreshToken });
diff --git a/frontend/src/app/user-profile/user-profile.component.html b/frontend/src/app/user-profile/user-profile.component.html
index dfc96695..451adad7 100644
--- a/frontend/src/app/user-profile/user-profile.component.html
+++ b/frontend/src/app/user-profile/user-profile.component.html
@@ -39,5 +39,45 @@ <h4>Your Profile</h4>
         </div>
       </div>
     </div>
+    <br />
+    <div class="card">
+      <div class="card-body">
+        <div class="row">
+          <div class="col-md-12">
+            <h4>Security</h4>
+            <hr />
+          </div>
+        </div>
+        <div id="securityFormContent">
+          <form [formGroup]="securityForm" (ngSubmit)="onSecuritySubmit(securityForm)" id="securityForm">
+            <div class="col-md-12">
+              <div class="form-group row">
+                <label for="oldPassword" class="col-4 col-form-label">Old Password:</label>
+                <div class="col-8">
+                  <input formControlName="oldPassword" type="password" id="oldPassword" class="form-control"
+                    name="oldPassword" style="margin-bottom: 5px;" />
+                </div>
+              </div>
+              <div class="form-group row">
+                <label for="newPassword" class="col-4 col-form-label">New Password:</label>
+                <div class="col-8">
+                  <input formControlName="newPassword" type="password" id="newPassword" class="form-control"
+                    name="newPassword" style="margin-bottom: 5px;" />
+                </div>
+              </div>
+              <div class="form-group row">
+                <label for="confirmNewPassword" class="col-4 col-form-label">Confirm New Password:</label>
+                <div class="col-8">
+                  <input formControlName="confirmNewPassword" type="password" id="confirmNewPassword"
+                    class="form-control" name="confirmNewPassword" style="margin-bottom: 5px;" />
+                </div>
+              </div>
+              <input [disabled]="isSecurityEdit ? !securityForm.valid : false" type="submit"
+                class="btn btn-primary float-right" [value]="isSecurityEdit ? 'Update' : 'Edit'" />
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/src/app/user-profile/user-profile.component.ts b/frontend/src/app/user-profile/user-profile.component.ts
index 2bb89738..a5b13e6b 100644
--- a/frontend/src/app/user-profile/user-profile.component.ts
+++ b/frontend/src/app/user-profile/user-profile.component.ts
@@ -13,7 +13,9 @@ import { UserService } from '../user.service';
 })
 export class UserProfileComponent implements OnInit {
   userForm: FormGroup;
+  securityForm: FormGroup;
   isEdit = false;
+  isSecurityEdit = false;
   user: User;
   constructor(
     private fb: FormBuilder,
@@ -23,7 +25,7 @@ export class UserProfileComponent implements OnInit {
     public activatedRoute: ActivatedRoute,
     public userService: UserService
   ) {
-    this.createForm();
+    this.createForms();
   }
 
   ngOnInit(): void {
@@ -31,16 +33,31 @@ export class UserProfileComponent implements OnInit {
       if (user) {
         this.user = user;
         this.rebuildForm();
+        this.rebuildSecurityForm();
       }
     });
   }
 
-  createForm() {
+  createForms() {
     this.userForm = this.fb.group({
       firstName: [{ value: '', disabled: !this.isEdit }, Validators.required],
       lastName: [{ value: '', disabled: !this.isEdit }, Validators.required],
       title: [{ value: '', disabled: !this.isEdit }, Validators.required],
     });
+    this.securityForm = this.fb.group({
+      oldPassword: [
+        { value: '', disabled: !this.isSecurityEdit },
+        Validators.required,
+      ],
+      newPassword: [
+        { value: '', disabled: !this.isSecurityEdit },
+        Validators.required,
+      ],
+      confirmNewPassword: [
+        { value: '', disabled: !this.isSecurityEdit },
+        Validators.required,
+      ],
+    });
   }
 
   rebuildForm() {
@@ -51,6 +68,14 @@ export class UserProfileComponent implements OnInit {
     });
   }
 
+  rebuildSecurityForm() {
+    this.userForm.reset({
+      oldPassword: '',
+      newPassword: '',
+      confirmNewPassword: '',
+    });
+  }
+
   onSubmit(form: FormGroup) {
     if (!this.isEdit) {
       this.isEdit = true;
@@ -69,4 +94,24 @@ export class UserProfileComponent implements OnInit {
       });
     }
   }
+
+  onSecuritySubmit(form: FormGroup) {
+    if (!this.isSecurityEdit) {
+      this.isSecurityEdit = true;
+      this.securityForm.enable();
+    } else {
+      this.authService
+        .updatePassword(
+          form.value.oldPassword,
+          form.value.newPassword,
+          form.value.confirmNewPassword
+        )
+        .subscribe((res: string) => {
+          this.alertService.success(res);
+          this.isSecurityEdit = false;
+          this.securityForm.disable();
+          this.securityForm.reset();
+        });
+    }
+  }
 }