diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.html b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.html
new file mode 100644
index 0000000..e69de29
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.scss b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.spec.ts b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.spec.ts
new file mode 100644
index 0000000..1b1811e
--- /dev/null
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReqFormFieldComponent } from './req-form-field.component';
+
+describe('ReqFormFieldComponent', () => {
+  let component: ReqFormFieldComponent;
+  let fixture: ComponentFixture<ReqFormFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReqFormFieldComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ReqFormFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.ts b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.ts
new file mode 100644
index 0000000..c42daef
--- /dev/null
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.ts
@@ -0,0 +1,41 @@
+import { Component, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { merge } from 'rxjs';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-req-form-field',
+  standalone: true,
+  imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, CommonModule],
+  templateUrl: './req-form-field.component.html',
+  styleUrl: './req-form-field.component.scss'
+})
+export class ReqFormFieldComponent {
+  readonly formControl = new FormControl('', [Validators.required, Validators.email]);
+
+  errorMessage = signal('');
+
+  public readonly formFieldBSClass: string = "col d-flex justify-content-center mx-1 my-2"
+  public readonly buttonBSClass: string = "d-flex justify-content-center mx-1 my-2"
+
+  constructor() {
+    merge(this.formControl.statusChanges, this.formControl.valueChanges)
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.updateErrorMessage());
+  }
+
+  updateErrorMessage() {
+    if (this.formControl.hasError('required')) {
+      this.errorMessage.set('You must enter a value');
+    } else if (this.formControl.hasError('email')) {
+      this.errorMessage.set('Not a valid email');
+    } else {
+      this.errorMessage.set('');
+    }
+  }
+}
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.html b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.html
index 2dd1b79..e06b9a2 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.html
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.html
@@ -1 +1,74 @@
-<p>user-form works!</p>
+<mat-tab-group>
+    <mat-tab label="Erstellen">
+        <div class="container my-3">
+            <div class="row">
+                <div [ngClass]="formFieldBSClass">
+                    <mat-form-field>
+                        <mat-label>Benutzername</mat-label>
+                        <input 
+                        matInput
+                        [formControl]="username"
+                        (blur)="updateErrorMessage()" 
+                        required />
+                        @if (email.invalid) {
+                        <mat-error>{{errorMessage()}}</mat-error>
+                        }
+                    </mat-form-field>
+                </div>
+                <div [ngClass]="formFieldBSClass">
+                    <mat-form-field>
+                        <mat-label>E-Mail</mat-label>
+                        <input 
+                        matInput placeholder="user@example.com"
+                        [formControl]="email"
+                        (blur)="updateErrorMessage()" 
+                        required />
+                        @if (email.invalid) {
+                        <mat-error>{{errorMessage()}}</mat-error>
+                        }
+                    </mat-form-field>
+                </div>
+                <div [ngClass]="formFieldBSClass">
+                    <div [ngClass]="buttonBSClass">
+                        <button mat-fab extended (click)="create()">
+                            <mat-icon>playlist_add</mat-icon>
+                            Erstellen
+                          </button>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div [ngClass]="formFieldBSClass">
+                    <mat-form-field>
+                        <mat-label>Vorname</mat-label>
+                        <input 
+                        matInput
+                        [formControl]="name"
+                        (blur)="updateErrorMessage()" 
+                        required />
+                        @if (email.invalid) {
+                        <mat-error>{{errorMessage()}}</mat-error>
+                        }
+                    </mat-form-field>
+                </div>
+                <div [ngClass]="formFieldBSClass">
+                    <mat-form-field>
+                        <mat-label>Nachname</mat-label>
+                        <input 
+                        matInput
+                        [formControl]="surname"
+                        (blur)="updateErrorMessage()" 
+                        required />
+                        @if (email.invalid) {
+                        <mat-error>{{errorMessage()}}</mat-error>
+                        }
+                    </mat-form-field>
+                </div>
+                <div [ngClass]="formFieldBSClass"></div>
+            </div>
+        </div>
+    </mat-tab>
+    <mat-tab label="Import über AD">
+        <app-user-group-dir-import></app-user-group-dir-import>
+    </mat-tab>
+</mat-tab-group>
\ No newline at end of file
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.scss b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.scss
index e69de29..2de8379 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.scss
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.scss
@@ -0,0 +1,3 @@
+.col{
+    margin: 50px;
+}
\ No newline at end of file
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.ts b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.ts
index 86ec97e..6a5792e 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.ts
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-form/user-form.component.ts
@@ -1,12 +1,63 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { merge } from 'rxjs';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import { MatTabsModule } from '@angular/material/tabs';
+import { UserGroupDirImportComponent } from "../../user-group-dir-import/user-group-dir-import.component";
+import { UserService } from '../../../services/user.service';
+import { RefreshService } from '../../../services/refresh.service';
 
 @Component({
   selector: 'app-user-form',
   standalone: true,
-  imports: [],
+  imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, CommonModule, MatTabsModule, UserGroupDirImportComponent],
   templateUrl: './user-form.component.html',
   styleUrl: './user-form.component.scss'
 })
 export class UserFormComponent {
+  readonly email = new FormControl('', [Validators.required, Validators.email]);
+  readonly username = new FormControl('', [Validators.required]);
+  readonly name = new FormControl('', [Validators.required]);
+  readonly surname = new FormControl('', [Validators.required]);
 
-}
+  errorMessage = signal('');
+
+  public readonly formFieldBSClass: string = "col d-flex justify-content-center mx-1 my-2"
+  public readonly buttonBSClass: string = "d-flex justify-content-center mx-1 my-2"
+
+  constructor(private uService: UserService, private rService: RefreshService) {
+    merge(
+      this.email.statusChanges, this.email.valueChanges,
+      this.username.statusChanges, this.username.valueChanges,
+      this.name.statusChanges, this.name.valueChanges,
+      this.surname.statusChanges, this.surname.valueChanges)
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.updateErrorMessage());
+  }
+
+  updateErrorMessage() {
+    if (this.email.hasError('required')) {
+      this.errorMessage.set('Wert eingeben');
+    } else if (this.email.hasError('email')) {
+      this.errorMessage.set('Ungültige E-Mail');
+    } else {
+      this.errorMessage.set('');
+    }
+  }
+
+  create() {
+    if (this.email.valid && this.username.valid && this.name.valid && this.surname.valid) {
+      this.uService.create({
+        email: this.email.value!,
+        prename: this.name.value!,
+        username: this.username.value!,
+        name: this.surname.value!,
+      }).subscribe()
+    }
+  }
+}
\ No newline at end of file
diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/user/user.component.ts b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/user/user.component.ts
index 45f004d..0868c39 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/user/user.component.ts
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/user/user.component.ts
@@ -5,6 +5,8 @@ import { RefreshService } from '../../services/refresh.service';
 import { MatTabsModule } from '@angular/material/tabs';
 import { GroupTableComponent } from '../../components/tables/group-table/group-table.component';
 import { ModuleTableComponent } from '../../components/tables/module-table/module-table.component';
+import { CreationService } from '../../services/creation.service';
+import { UserFormComponent } from '../../components/forms/user-form/user-form.component';
 
 @Component({
   standalone: true,
@@ -28,17 +30,20 @@ export class UserComponent implements AfterViewInit {
 
   private sUsername = null;
 
-  constructor(private refreshService: RefreshService) { }
+  constructor(private refreshService: RefreshService, private creationService: CreationService) { }
 
   ngAfterViewInit(): void {
     this.refreshService.removeAll()
     this.refreshService.add(() => {
       this.userTable.fetchData();
-      if (this.sUsername != null){
+      if (this.sUsername != null) {
         this.groupTable.fetchDataByUsername(this.sUsername);
         this.moduleTable.fetchDataByUsername(this.sUsername)
       }
     });
+
+    this.creationService.component = UserFormComponent;
+    this.creationService.openDialog()
   }
 
   @ViewChild("userTable") userTable!: UserTableComponent
@@ -49,7 +54,7 @@ export class UserComponent implements AfterViewInit {
     if (rows.length > 0) {
       this.sUsername = rows[0].source.username;
 
-      if (this.sUsername != null){
+      if (this.sUsername != null) {
         this.groupTable.fetchDataByUsername(this.sUsername);
         this.moduleTable.fetchDataByUsername(this.sUsername)
       }