diff --git a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts
index 6d0cbd9..1eacba2 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts
+++ b/apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts
@@ -1,6 +1,8 @@
 import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
+import { StaffService } from '@dafa-services/api/staff.service';
 import { RequiredValidator } from '@dafa-validators/required.validator';
 import { SocialSecurityNumberValidator } from '@dafa-validators/social-security-number.validator';
 import { BehaviorSubject } from 'rxjs';
@@ -16,7 +18,7 @@ export class CreateAccountComponent {
   formGroup: FormGroup;
   todaysDate = new Date();
 
-  constructor(private formBuilder: FormBuilder) {
+  constructor(private formBuilder: FormBuilder, private staffService: StaffService, private router: Router) {
     this.formGroup = this.formBuilder.group({
       firstName: this.formBuilder.control('', [RequiredValidator('Förnamn')]),
       lastName: this.formBuilder.control('', [RequiredValidator('Efternamn')]),
@@ -94,16 +96,23 @@ export class CreateAccountComponent {
     if (this.formGroup.valid) {
       const submittableValues = {
         ...this.formGroup.value,
+        fullName: `${this.firstNameControl.value} ${this.lastNameControl.value}`,
         outOfOffice: this.pendingOutOfOfficeDates,
       };
 
       delete submittableValues.outOfOfficeStart;
       delete submittableValues.outOfOfficeEnd;
 
-      console.warn('Should submit the form...');
-      console.table(submittableValues);
+      const post = this.staffService.createAccount(submittableValues).subscribe({
+        next: id => {
+          this.router.navigate(['/administration', 'personal', id]);
+        },
+        complete: () => {
+          post.unsubscribe();
+        },
+      });
 
-      this.formGroup.reset();
+      // this.formGroup.reset();
     } else {
       console.error('Form is invalid, do something...');
       this._markFormAsDirty();
diff --git a/apps/dafa-web/src/app/pages/administration/pages/staff-card/staff-card.component.html b/apps/dafa-web/src/app/pages/administration/pages/staff-card/staff-card.component.html
index 0523620..a974ff4 100644
--- a/apps/dafa-web/src/app/pages/administration/pages/staff-card/staff-card.component.html
+++ b/apps/dafa-web/src/app/pages/administration/pages/staff-card/staff-card.component.html
@@ -32,7 +32,7 @@
 
         <dl>
           <dt>Behörighet</dt>
-          <ng-container *ngIf="detailedStaffData.authorisations.length; else emptyDD">
+          <ng-container *ngIf="detailedStaffData.authorisations?.length; else emptyDD">
             <dd *ngFor="let item of detailedStaffData.authorisations">
               {{ item }}
             </dd>
@@ -40,7 +40,7 @@
           <dt>Aktivt i arbete</dt>
           <dd>{{ detailedStaffData.active ? 'Ja' : 'Nej' }}</dd>
           <dt>Frånvaroperiod</dt>
-          <ng-container *ngIf="detailedStaffData.outOfOffice.length; else emptyDD">
+          <ng-container *ngIf="detailedStaffData.outOfOffice?.length; else emptyDD">
             <dd *ngFor="let date of detailedStaffData.outOfOffice">
               {{ date.start | localDate }} - {{ date.end | localDate }}
             </dd>
@@ -72,9 +72,9 @@
       <div class="staff-card__column">
         <digi-ng-layout-expansion-panel>
           <h3 style="margin-bottom: 0" data-slot-trigger>
-            Tilldelade deltagare ({{ detailedStaffData.participants.length }})
+            Tilldelade deltagare ({{ detailedStaffData.participants?.length || 0 }})
           </h3>
-          <ng-container *ngIf="detailedStaffData.participants.length; else noParticipantsInfo">
+          <ng-container *ngIf="detailedStaffData.participants?.length; else noParticipantsInfo">
             <ul class="staff-card__participants">
               <li *ngIf="detailedStaffData.participants.length > 1" class="staff-card__participant">
                 <digi-form-checkbox
@@ -91,7 +91,7 @@
               <li *ngFor="let participant of detailedStaffData.participants" class="staff-card__participant">
                 <digi-form-checkbox
                   af-variation="primary"
-                  [afLabel]="participant.fullName + ' - ' + participant.id"
+                  [afLabel]="participant.fullName"
                   [afValue]="participant.id"
                   [afChecked]="pendingSelectedParticipants.includes(participant.id)"
                   (afOnChange)="handleChangeParticipant(participant.id, $event.detail.target.checked)"
diff --git a/apps/dafa-web/src/app/services/api/staff.service.ts b/apps/dafa-web/src/app/services/api/staff.service.ts
index 65b2bfd..dfdb173 100644
--- a/apps/dafa-web/src/app/services/api/staff.service.ts
+++ b/apps/dafa-web/src/app/services/api/staff.service.ts
@@ -2,10 +2,10 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { environment } from '@dafa-environment';
 import { SortBy } from '@dafa-models/sort-by.model';
-import { Staff } from '@dafa-models/staff.model';
+import { Staff, StaffDetail } from '@dafa-models/staff.model';
 import { sort } from '@dafa-utils/sort.util';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, Observable, throwError } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
 
 function filterStaff(staff: Staff[], searchFilter: string): Staff[] {
   return staff.filter(person => {
@@ -19,7 +19,8 @@ function filterStaff(staff: Staff[], searchFilter: string): Staff[] {
   providedIn: 'root',
 })
 export class StaffService {
-  private _allStaff$: Observable<Staff[]> = this.httpClient.get<Staff[]>(`${environment.apiBase}/staff`, {
+  private _staffApiUrl = `${environment.apiBase}/staff`;
+  private _allStaff$: Observable<Staff[]> = this.httpClient.get<Staff[]>(this._staffApiUrl, {
     params: { _embed: 'participants' },
   });
 
@@ -38,8 +39,10 @@ export class StaffService {
     })
   );
 
+  constructor(private httpClient: HttpClient) {}
+
   public getDetailedStaffData(id: string): Observable<Staff> {
-    return this.httpClient.get<Staff>(`${environment.apiBase}/staff/${id}`, { params: { _embed: 'participants' } });
+    return this.httpClient.get<Staff>(`${this._staffApiUrl}/${id}`, { params: { _embed: 'participants' } });
   }
 
   public setSearchFilter(value: string) {
@@ -52,5 +55,12 @@ export class StaffService {
     this._staffSortBy$.next({ key, reverse });
   }
 
-  constructor(private httpClient: HttpClient) {}
+  public createAccount(staffData: StaffDetail): Observable<string> {
+    return this.httpClient.post<StaffDetail>(this._staffApiUrl, staffData).pipe(
+      map(data => data.id),
+      catchError(error => {
+        return throwError(error);
+      })
+    );
+  }
 }
diff --git a/mock-api/dafa-web/scripts/generate-api.js b/mock-api/dafa-web/scripts/generate-api.js
index a32b5d3..d973a4d 100644
--- a/mock-api/dafa-web/scripts/generate-api.js
+++ b/mock-api/dafa-web/scripts/generate-api.js
@@ -5,7 +5,7 @@ import participants from './participants.js';
 import services from './services.js';
 import staff from './staff.js';
 
-const generatedStaff = staff.generate(20);
+const generatedStaff = staff.generate(5);
 
 const apiData = {
   services: services.generate(),