diff --git a/support-portal-frontend/src/app/component/user/user.component.html b/support-portal-frontend/src/app/component/user/user.component.html
index d6ec990..9cc1100 100644
--- a/support-portal-frontend/src/app/component/user/user.component.html
+++ b/support-portal-frontend/src/app/component/user/user.component.html
@@ -154,7 +154,7 @@
                               login:
                               {{loggedInUser?.lastLoginDateDisplay | date:'medium'}}</small></div>
                             <div class="mt-2">
-                              <button class="btn btn-primary" type="button">
+                              <button (click)="updateProfileImage()" class="btn btn-primary" type="button">
                                 <i class="fa fa-fw fa-camera"></i>
                                 <span>Change Photo</span>
                               </button>
@@ -527,5 +527,12 @@
       </div>
     </div>
 
+    <!-- profile image change form -->
+    <form enctype="multipart/form-data" style="display:none;">
+      <input type="file"
+             (change)="onProfileImageChange($any($event).target.files); onUpdateProfileImage()"
+             name="profile-image-input" id="profile-image-input" placeholder="file" accept="image/*" />
+    </form>
+
   </div>
 </div>
diff --git a/support-portal-frontend/src/app/component/user/user.component.ts b/support-portal-frontend/src/app/component/user/user.component.ts
index ad608c6..91cd098 100644
--- a/support-portal-frontend/src/app/component/user/user.component.ts
+++ b/support-portal-frontend/src/app/component/user/user.component.ts
@@ -228,4 +228,12 @@ export class UserComponent implements OnInit, OnDestroy {
     this.router.navigate(['/login']);
     this.sendNotification(NotificationType.SUCCESS, 'You have been successfully logged out');
   }
+
+  public updateProfileImage(): void {
+    this.clickButton('profile-image-input');
+  }
+
+  public onUpdateProfileImage(): void {
+
+  }
 }