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 050265c..4646de5 100644
--- a/support-portal-frontend/src/app/component/user/user.component.ts
+++ b/support-portal-frontend/src/app/component/user/user.component.ts
@@ -5,6 +5,7 @@ import {UserService} from "../../service/user.service";
 import {NotificationService} from "../../service/notification.service";
 import {NotificationType} from "../../notification/notification-type";
 import {HttpErrorResponse} from "@angular/common/http";
+import {NgForm} from "@angular/forms";
 
 @Component({
   selector: 'app-user',
@@ -20,8 +21,8 @@ export class UserComponent implements OnInit, OnDestroy {
   public refreshing: boolean;
   private subscriptions: Subscription[] = [];
   public selectedUser: User;
-  public profileImageFileName: string;
-  public profileImage: File;
+  public profileImageFileName: string | null;
+  public profileImage: File | null;
 
   constructor(private userService: UserService,
               private notificationService: NotificationService) {
@@ -75,6 +76,30 @@ export class UserComponent implements OnInit, OnDestroy {
     this.notificationService.notify(NotificationType.ERROR, message ? message : 'An error occurred. Please try again')
   }
 
+  public onAddNewUser(userForm: NgForm): void {
+    // TODO: test if profileImage is null (we are not passing it)
+    let formData = this.userService.createUserFormData('', userForm.value, this.profileImage!);
+    let subscription = this.userService.addUser(formData)
+      .subscribe(
+        (user: User) => {
+          document.getElementById('new-user-close')?.click();
+          this.getUsers(false);
+          this.invalidateVariables();
+          userForm.reset();
+          this.notificationService.notify(NotificationType.SUCCESS, `User ${user.username} added successfully`);
+        },
+        (errorResponse: HttpErrorResponse) => {
+          this.sendErrorNotification(errorResponse.error.message);
+        }
+      );
+    this.subscriptions.push(subscription);
+  }
+
+  private invalidateVariables(): void {
+    this.profileImage = null;
+    this.profileImageFileName = null;
+  }
+
   public saveNewUser(): void {
     document.getElementById('new-user-save')?.click();
   }
diff --git a/support-portal-frontend/src/app/service/user.service.ts b/support-portal-frontend/src/app/service/user.service.ts
index d5ba3db..4822017 100644
--- a/support-portal-frontend/src/app/service/user.service.ts
+++ b/support-portal-frontend/src/app/service/user.service.ts
@@ -21,9 +21,9 @@ export class UserService {
       .get<UserPage>(`${this.host}/user?size=2147483647`);
   }
 
-  public addUser(formData: FormData): Observable<User | HttpErrorResponse> {
+  public addUser(formData: FormData): Observable<User> {
     return this.httpClient
-      .post<User | HttpErrorResponse>(`${this.host}/user/add`, formData);
+      .post<User>(`${this.host}/user/add`, formData);
   }
 
   public updateUser(formData: FormData): Observable<User | HttpErrorResponse> {