diff --git a/frontend/src/api/.openapi-generator/FILES b/frontend/src/api/.openapi-generator/FILES
index 25f6fa7..8f617f7 100644
--- a/frontend/src/api/.openapi-generator/FILES
+++ b/frontend/src/api/.openapi-generator/FILES
@@ -5,6 +5,7 @@ api/account.service.ts
 api/api.ts
 api/login.service.ts
 api/properties.service.ts
+api/taskgroup.service.ts
 api/users.service.ts
 configuration.ts
 encoder.ts
@@ -24,6 +25,8 @@ model/propertiesInfo.ts
 model/propertyInfo.ts
 model/propertyUpdateRequest.ts
 model/signUpRequest.ts
+model/taskgroupEntityInfo.ts
+model/taskgroupFieldInfo.ts
 model/userAddInfo.ts
 model/userInfo.ts
 model/userUpdateInfo.ts
diff --git a/frontend/src/api/api.module.ts b/frontend/src/api/api.module.ts
index 187ee74..a695643 100644
--- a/frontend/src/api/api.module.ts
+++ b/frontend/src/api/api.module.ts
@@ -5,6 +5,7 @@ import { HttpClient } from '@angular/common/http';
 import { AccountService } from './api/account.service';
 import { LoginService } from './api/login.service';
 import { PropertiesService } from './api/properties.service';
+import { TaskgroupService } from './api/taskgroup.service';
 import { UsersService } from './api/users.service';
 
 @NgModule({
diff --git a/frontend/src/api/api/api.ts b/frontend/src/api/api/api.ts
index af6d936..e3102eb 100644
--- a/frontend/src/api/api/api.ts
+++ b/frontend/src/api/api/api.ts
@@ -4,6 +4,8 @@ export * from './login.service';
 import { LoginService } from './login.service';
 export * from './properties.service';
 import { PropertiesService } from './properties.service';
+export * from './taskgroup.service';
+import { TaskgroupService } from './taskgroup.service';
 export * from './users.service';
 import { UsersService } from './users.service';
-export const APIS = [AccountService, LoginService, PropertiesService, UsersService];
+export const APIS = [AccountService, LoginService, PropertiesService, TaskgroupService, UsersService];
diff --git a/frontend/src/api/api/taskgroup.service.ts b/frontend/src/api/api/taskgroup.service.ts
new file mode 100644
index 0000000..2d00598
--- /dev/null
+++ b/frontend/src/api/api/taskgroup.service.ts
@@ -0,0 +1,341 @@
+/**
+ * API Title
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+
+import { Inject, Injectable, Optional }                      from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams,
+         HttpResponse, HttpEvent, HttpParameterCodec, HttpContext 
+        }       from '@angular/common/http';
+import { CustomHttpParameterCodec }                          from '../encoder';
+import { Observable }                                        from 'rxjs';
+
+import { InlineResponse200 } from '../model/models';
+import { InlineResponse403 } from '../model/models';
+import { TaskgroupEntityInfo } from '../model/models';
+import { TaskgroupFieldInfo } from '../model/models';
+
+import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
+import { Configuration }                                     from '../configuration';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TaskgroupService {
+
+    protected basePath = 'http://localhost:8080/api';
+    public defaultHeaders = new HttpHeaders();
+    public configuration = new Configuration();
+    public encoder: HttpParameterCodec;
+
+    constructor(protected httpClient: HttpClient, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+
+
+    private addToHttpParams(httpParams: HttpParams, value: any, key?: string): HttpParams {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        } else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return httpParams;
+    }
+
+    private addToHttpParamsRecursive(httpParams: HttpParams, value?: any, key?: string): HttpParams {
+        if (value == null) {
+            return httpParams;
+        }
+
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                (value as any[]).forEach( elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            } else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key,
+                        (value as Date).toISOString().substr(0, 10));
+                } else {
+                   throw Error("key may not be null if value is Date");
+                }
+            } else {
+                Object.keys(value).forEach( k => httpParams = this.addToHttpParamsRecursive(
+                    httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
+        } else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        } else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
+    }
+
+    /**
+     * list all taskgroups of authorized user
+     * list all taskgroups of authorized user
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public taskgroupsGet(observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<Array<TaskgroupEntityInfo>>;
+    public taskgroupsGet(observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpResponse<Array<TaskgroupEntityInfo>>>;
+    public taskgroupsGet(observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpEvent<Array<TaskgroupEntityInfo>>>;
+    public taskgroupsGet(observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<any> {
+
+        let localVarHeaders = this.defaultHeaders;
+
+        let localVarCredential: string | undefined;
+        // authentication (API_TOKEN) required
+        localVarCredential = this.configuration.lookupCredential('API_TOKEN');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+
+        let localVarHttpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        let localVarHttpContext: HttpContext | undefined = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+
+
+        let responseType_: 'text' | 'json' = 'json';
+        if(localVarHttpHeaderAcceptSelected && localVarHttpHeaderAcceptSelected.startsWith('text')) {
+            responseType_ = 'text';
+        }
+
+        return this.httpClient.get<Array<TaskgroupEntityInfo>>(`${this.configuration.basePath}/taskgroups`,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * creates taskgroup
+     * creates taskgroup
+     * @param taskgroupFieldInfo 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public taskgroupsPut(taskgroupFieldInfo?: TaskgroupFieldInfo, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<TaskgroupEntityInfo>;
+    public taskgroupsPut(taskgroupFieldInfo?: TaskgroupFieldInfo, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpResponse<TaskgroupEntityInfo>>;
+    public taskgroupsPut(taskgroupFieldInfo?: TaskgroupFieldInfo, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpEvent<TaskgroupEntityInfo>>;
+    public taskgroupsPut(taskgroupFieldInfo?: TaskgroupFieldInfo, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<any> {
+
+        let localVarHeaders = this.defaultHeaders;
+
+        let localVarCredential: string | undefined;
+        // authentication (API_TOKEN) required
+        localVarCredential = this.configuration.lookupCredential('API_TOKEN');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+
+        let localVarHttpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        let localVarHttpContext: HttpContext | undefined = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+        const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+
+        let responseType_: 'text' | 'json' = 'json';
+        if(localVarHttpHeaderAcceptSelected && localVarHttpHeaderAcceptSelected.startsWith('text')) {
+            responseType_ = 'text';
+        }
+
+        return this.httpClient.put<TaskgroupEntityInfo>(`${this.configuration.basePath}/taskgroups`,
+            taskgroupFieldInfo,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * deletes taskgroup
+     * deletes taskgroup
+     * @param taskgroupID internal id of taskgroup
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public taskgroupsTaskgroupIDDelete(taskgroupID: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<InlineResponse200>;
+    public taskgroupsTaskgroupIDDelete(taskgroupID: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpResponse<InlineResponse200>>;
+    public taskgroupsTaskgroupIDDelete(taskgroupID: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpEvent<InlineResponse200>>;
+    public taskgroupsTaskgroupIDDelete(taskgroupID: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<any> {
+        if (taskgroupID === null || taskgroupID === undefined) {
+            throw new Error('Required parameter taskgroupID was null or undefined when calling taskgroupsTaskgroupIDDelete.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        let localVarCredential: string | undefined;
+        // authentication (API_TOKEN) required
+        localVarCredential = this.configuration.lookupCredential('API_TOKEN');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+
+        let localVarHttpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        let localVarHttpContext: HttpContext | undefined = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+
+
+        let responseType_: 'text' | 'json' = 'json';
+        if(localVarHttpHeaderAcceptSelected && localVarHttpHeaderAcceptSelected.startsWith('text')) {
+            responseType_ = 'text';
+        }
+
+        return this.httpClient.delete<InlineResponse200>(`${this.configuration.basePath}/taskgroups/${encodeURIComponent(String(taskgroupID))}`,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * edits taskgroup
+     * edits taskgroup
+     * @param taskgroupID internal id of taskgroup
+     * @param taskgroupFieldInfo 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public taskgroupsTaskgroupIDPost(taskgroupID: number, taskgroupFieldInfo?: TaskgroupFieldInfo, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<InlineResponse200>;
+    public taskgroupsTaskgroupIDPost(taskgroupID: number, taskgroupFieldInfo?: TaskgroupFieldInfo, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpResponse<InlineResponse200>>;
+    public taskgroupsTaskgroupIDPost(taskgroupID: number, taskgroupFieldInfo?: TaskgroupFieldInfo, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpEvent<InlineResponse200>>;
+    public taskgroupsTaskgroupIDPost(taskgroupID: number, taskgroupFieldInfo?: TaskgroupFieldInfo, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<any> {
+        if (taskgroupID === null || taskgroupID === undefined) {
+            throw new Error('Required parameter taskgroupID was null or undefined when calling taskgroupsTaskgroupIDPost.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        let localVarCredential: string | undefined;
+        // authentication (API_TOKEN) required
+        localVarCredential = this.configuration.lookupCredential('API_TOKEN');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+
+        let localVarHttpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        let localVarHttpContext: HttpContext | undefined = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+        const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+
+        let responseType_: 'text' | 'json' = 'json';
+        if(localVarHttpHeaderAcceptSelected && localVarHttpHeaderAcceptSelected.startsWith('text')) {
+            responseType_ = 'text';
+        }
+
+        return this.httpClient.post<InlineResponse200>(`${this.configuration.basePath}/taskgroups/${encodeURIComponent(String(taskgroupID))}`,
+            taskgroupFieldInfo,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+}
diff --git a/frontend/src/api/model/models.ts b/frontend/src/api/model/models.ts
index 653f5dc..adcbb18 100644
--- a/frontend/src/api/model/models.ts
+++ b/frontend/src/api/model/models.ts
@@ -11,6 +11,8 @@ export * from './propertiesInfo';
 export * from './propertyInfo';
 export * from './propertyUpdateRequest';
 export * from './signUpRequest';
+export * from './taskgroupEntityInfo';
+export * from './taskgroupFieldInfo';
 export * from './userAddInfo';
 export * from './userInfo';
 export * from './userUpdateInfo';
diff --git a/frontend/src/api/model/taskgroupEntityInfo.ts b/frontend/src/api/model/taskgroupEntityInfo.ts
new file mode 100644
index 0000000..bbec6ed
--- /dev/null
+++ b/frontend/src/api/model/taskgroupEntityInfo.ts
@@ -0,0 +1,24 @@
+/**
+ * API Title
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export interface TaskgroupEntityInfo { 
+    /**
+     * internal id of taskgroup
+     */
+    taskgroupID: number;
+    /**
+     * name of taskgroup
+     */
+    taskgroupName: string;
+}
+
diff --git a/frontend/src/api/model/taskgroupFieldInfo.ts b/frontend/src/api/model/taskgroupFieldInfo.ts
new file mode 100644
index 0000000..66c2b15
--- /dev/null
+++ b/frontend/src/api/model/taskgroupFieldInfo.ts
@@ -0,0 +1,20 @@
+/**
+ * API Title
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export interface TaskgroupFieldInfo { 
+    /**
+     * name of taskgroup
+     */
+    name: string;
+}
+
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 3bd5527..1a9d282 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { RegistrationComponent } from './auth/registration/registration.componen
 import { SettingsComponent } from './admin-dashboard/settings/settings.component';
 import {MatListModule} from "@angular/material/list";
 import { TaskgroupDashboardComponent } from './taskgroups/taskgroup-dashboard/taskgroup-dashboard.component';
+import { TaskgroupCreationComponent } from './taskgroups/taskgroup-creation/taskgroup-creation.component';
 
 @NgModule({
   declarations: [
@@ -54,7 +55,8 @@ import { TaskgroupDashboardComponent } from './taskgroups/taskgroup-dashboard/ta
     DeleteAccountComponent,
     RegistrationComponent,
     SettingsComponent,
-    TaskgroupDashboardComponent
+    TaskgroupDashboardComponent,
+    TaskgroupCreationComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.css b/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.css
new file mode 100644
index 0000000..820cdcf
--- /dev/null
+++ b/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.css
@@ -0,0 +1,3 @@
+.mat-form-field {
+  width: 100%;
+}
diff --git a/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.html b/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.html
new file mode 100644
index 0000000..266d467
--- /dev/null
+++ b/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.html
@@ -0,0 +1,13 @@
+<h1 mat-dialog-title>Create New Taskgroup</h1>
+<div mat-dialog-content>
+  <mat-form-field appearance="outline">
+    <mat-label>Name</mat-label>
+    <input matInput [formControl]="nameCtrl">
+    <mat-hint align="end">{{nameCtrl.value.length}} / 255</mat-hint>
+  </mat-form-field>
+</div>
+
+<div mat-dialog-actions align="end">
+  <button mat-raised-button (click)="cancel()">Cancel</button>
+  <button mat-raised-button color="primary" (click)="save()" [disabled]="nameCtrl.invalid"><mat-icon>save</mat-icon>Save<mat-icon *ngIf="pending"><mat-spinner diameter="20" style="margin-left: 10px"></mat-spinner></mat-icon></button>
+</div>
diff --git a/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.spec.ts b/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.spec.ts
new file mode 100644
index 0000000..52708f0
--- /dev/null
+++ b/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskgroupCreationComponent } from './taskgroup-creation.component';
+
+describe('TaskgroupCreationComponent', () => {
+  let component: TaskgroupCreationComponent;
+  let fixture: ComponentFixture<TaskgroupCreationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TaskgroupCreationComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TaskgroupCreationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.ts b/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.ts
new file mode 100644
index 0000000..45bc353
--- /dev/null
+++ b/frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.ts
@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import {FormControl, Validators} from "@angular/forms";
+import {MatDialogRef} from "@angular/material/dialog";
+import {TaskgroupService} from "../../../api";
+import {error} from "@angular/compiler/src/util";
+import {MatSnackBar} from "@angular/material/snack-bar";
+
+@Component({
+  selector: 'app-taskgroup-creation',
+  templateUrl: './taskgroup-creation.component.html',
+  styleUrls: ['./taskgroup-creation.component.css']
+})
+export class TaskgroupCreationComponent implements OnInit {
+
+  nameCtrl = new FormControl('', [Validators.required, Validators.maxLength(255)])
+  pending: boolean = false
+
+  constructor(private dialogRef: MatDialogRef<TaskgroupCreationComponent>,
+              private taskgroupService: TaskgroupService,
+              private snackbar: MatSnackBar) { }
+
+  ngOnInit(): void {
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+  save() {
+    this.pending = true;
+    this.taskgroupService.taskgroupsPut({
+      name: this.nameCtrl.value
+    }).subscribe({
+      next: resp => {
+        this.pending = false;
+        this.dialogRef.close(resp);
+      },
+      error: err => {
+        this.pending = false;
+        if(err.status == 409) {
+          this.snackbar.open("Taskgroup already exists", "", {duration: 2000});
+        } else {
+          this.snackbar.open("An unexpected error occured", "");
+        }
+      }
+    })
+
+  }
+}
diff --git a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css
index e69de29..01e110f 100644
--- a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css
+++ b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.css
@@ -0,0 +1,28 @@
+.container {
+  margin: 20px auto;
+  width: 60%;
+}
+
+.spacer {
+  margin-bottom: 2.5%;
+}
+
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100%;
+    margin: 20px 10px;
+  }
+}
+
+.navLink {
+  text-decoration: underline;
+  color: black;
+  margin-right: 5px;
+}
+
+.navLink-disabled {
+  text-decoration: none;
+  color: grey;
+
+}
diff --git a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html
index 1aae99a..f98e1c7 100644
--- a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html
+++ b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html
@@ -1 +1,10 @@
-<p>taskgroup-dashboard works!</p>
+<div class="container">
+  <mat-card>
+    <mat-card-content>
+      <a class="navLink" routerLink="/">Dashboard</a>
+      <a class="navLink-disabled">/ Taskgroups</a>
+    </mat-card-content>
+  </mat-card>
+
+  <button mat-raised-button color="primary" (click)="openTaskgroupCreation()">Create new Taskgroup</button>
+</div>
diff --git a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts
index c8f32eb..8b46a98 100644
--- a/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts
+++ b/frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import {MatDialog} from "@angular/material/dialog";
+import {TaskgroupCreationComponent} from "../taskgroup-creation/taskgroup-creation.component";
 
 @Component({
   selector: 'app-taskgroup-dashboard',
@@ -7,9 +9,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TaskgroupDashboardComponent implements OnInit {
 
-  constructor() { }
+  constructor(private dialog: MatDialog) { }
 
   ngOnInit(): void {
   }
 
+  openTaskgroupCreation() {
+    const dialogRef = this.dialog.open(TaskgroupCreationComponent, {minWidth: "400px"})
+  }
 }
diff --git a/openapi.yaml b/openapi.yaml
index ec92816..67f719f 100644
--- a/openapi.yaml
+++ b/openapi.yaml
@@ -588,6 +588,11 @@ paths:
         - taskgroup
       summary: creates taskgroup
       description: creates taskgroup
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/TaskgroupFieldInfo'
       responses:
         200: 
           description: Anfrage erfolgreich
@@ -626,6 +631,11 @@ paths:
           schema:
             type: number
             example: 1
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/TaskgroupFieldInfo'
       responses:
         200: 
           description: Anfrage erfolgreich