diff --git a/server/application-server/openapi.yaml b/server/application-server/openapi.yaml
index 0c2e89a8..eecdda44 100644
--- a/server/application-server/openapi.yaml
+++ b/server/application-server/openapi.yaml
@@ -46,12 +46,7 @@ paths:
         content:
           application/json:
             schema:
-              type: object
-              properties:
-                name:
-                  type: string
-                color:
-                  type: string
+              $ref: "#/components/schemas/TeamDTO"
         required: true
       responses:
         "200":
diff --git a/server/application-server/src/main/java/de/tum/in/www1/hephaestus/admin/AdminController.java b/server/application-server/src/main/java/de/tum/in/www1/hephaestus/admin/AdminController.java
index 65d8364d..7ccd7bfd 100644
--- a/server/application-server/src/main/java/de/tum/in/www1/hephaestus/admin/AdminController.java
+++ b/server/application-server/src/main/java/de/tum/in/www1/hephaestus/admin/AdminController.java
@@ -79,8 +79,8 @@ public ResponseEntity<UserDTO> removeTeamFromUser(@PathVariable String login, @P
     }
 
     @PutMapping("/teams")
-    public ResponseEntity<TeamDTO> createTeam(@RequestBody String name, @RequestBody String color) {
-        return ResponseEntity.ok(adminService.createTeam(name, color));
+    public ResponseEntity<TeamDTO> createTeam(@RequestBody TeamDTO team) {
+        return ResponseEntity.ok(adminService.createTeam(team.name(), team.color()));
     }
 
     @DeleteMapping("/teams/{teamId}")
diff --git a/webapp/src/app/admin/teams/table/teams-table.component.html b/webapp/src/app/admin/teams/table/teams-table.component.html
index 00d961d5..496141fe 100644
--- a/webapp/src/app/admin/teams/table/teams-table.component.html
+++ b/webapp/src/app/admin/teams/table/teams-table.component.html
@@ -65,8 +65,13 @@
   <brn-column-def name="color" class="w-20 flex-1">
     <hlm-th *brnHeaderDef>Color</hlm-th>
     <hlm-td class="font-medium tabular-nums flex gap-4" *brnCellDef="let element">
-      <div class="w-4 h-4 rounded-full" [style.backgroundColor]="element.color"></div>
-      <span>{{ element.color }}</span>
+      @if (this.isLoading()) {
+        <hlm-skeleton class="w-4 h-4 rounded-full" [style.backgroundColor]="'#69feff'" />
+        <hlm-skeleton class="h-6 w-12" />
+      } @else {
+        <div class="w-4 h-4 rounded-full" [style.backgroundColor]="element.color"></div>
+        <span>{{ element.color }}</span>
+      }
     </hlm-td>
   </brn-column-def>
   <brn-column-def name="actions" class="w-16">
@@ -122,15 +127,13 @@
   </div>
 </div>
 <!-- Card to add new team -->
-<div hlmCard class="size-fit">
+<div hlmCard class="size-fit mt-4">
   <div hlmCardHeader class="pb-0">
     <h3 hlmCardTitle>Create new team</h3>
   </div>
-  <div hlmCardContent class="flex gap-4">
+  <div hlmCardContent class="flex items-center gap-4">
     <input hlmInput placeholder="Team name" [formControl]="_newTeamName" />
-    <input hlmInput placeholder="Team color" [formControl]="_newTeamColor" />
-  </div>
-  <div hlmCardFooter class="justify-end">
-    <button hlmBtn>Create</button>
+    <input hlmInput placeholder="Team color" type="color" [formControl]="_newTeamColor" />
+    <button hlmBtn class="ml-4" (click)="createTeam()">Create</button>
   </div>
 </div>
diff --git a/webapp/src/app/admin/teams/table/teams-table.component.ts b/webapp/src/app/admin/teams/table/teams-table.component.ts
index f38a85a3..59ab843d 100644
--- a/webapp/src/app/admin/teams/table/teams-table.component.ts
+++ b/webapp/src/app/admin/teams/table/teams-table.component.ts
@@ -169,16 +169,6 @@ export class AdminTeamsTableComponent {
     navigator.clipboard.writeText(element.name!);
   }
 
-  protected invalidateTeams() {
-    if (this.isLoading()) {
-      return;
-    }
-    for (const team of this._selected()) {
-      this._selectionModel.deselect(team);
-    }
-    this.queryClient.invalidateQueries({ queryKey: ['admin', 'teams'] });
-  }
-
   _newTeamName = new FormControl('');
   _newTeamColor = new FormControl('');
 
@@ -186,15 +176,24 @@ export class AdminTeamsTableComponent {
     if (this.isLoading() || !this._newTeamName.value || !this._newTeamColor.value) {
       return;
     }
-    this.adminService
-      .createTeam({
-        name: this._newTeamName.value,
-        color: this._newTeamColor.value
-      })
-      .subscribe({
-        next: () => console.log('Team created'),
-        error: (err) => console.error('Error creating team', err)
-      });
+    const newTeam = {
+      name: this._newTeamName.value,
+      color: this._newTeamColor.value
+    } as TeamDTO;
+    this.adminService.createTeam(newTeam).subscribe({
+      next: () => console.log('Team created'),
+      error: (err) => console.error('Error creating team', err)
+    });
     this.invalidateTeams();
   }
+
+  protected invalidateTeams() {
+    if (this.isLoading()) {
+      return;
+    }
+    for (const team of this._selected()) {
+      this._selectionModel.deselect(team);
+    }
+    this.queryClient.invalidateQueries({ queryKey: ['admin', 'teams'] });
+  }
 }
diff --git a/webapp/src/app/core/modules/openapi/.openapi-generator/FILES b/webapp/src/app/core/modules/openapi/.openapi-generator/FILES
index 13a41b4b..60f91ad0 100644
--- a/webapp/src/app/core/modules/openapi/.openapi-generator/FILES
+++ b/webapp/src/app/core/modules/openapi/.openapi-generator/FILES
@@ -20,7 +20,6 @@ encoder.ts
 git_push.sh
 index.ts
 model/admin-config.ts
-model/create-team-request.ts
 model/issue-comment-dto.ts
 model/issue-comment.ts
 model/leaderboard-entry.ts
diff --git a/webapp/src/app/core/modules/openapi/api/admin.service.ts b/webapp/src/app/core/modules/openapi/api/admin.service.ts
index 10d8a32e..1eb4bb85 100644
--- a/webapp/src/app/core/modules/openapi/api/admin.service.ts
+++ b/webapp/src/app/core/modules/openapi/api/admin.service.ts
@@ -21,8 +21,6 @@ import { Observable }                                        from 'rxjs';
 // @ts-ignore
 import { AdminConfig } from '../model/admin-config';
 // @ts-ignore
-import { CreateTeamRequest } from '../model/create-team-request';
-// @ts-ignore
 import { TeamDTO } from '../model/team-dto';
 // @ts-ignore
 import { UserDTO } from '../model/user-dto';
@@ -232,16 +230,16 @@ export class AdminService implements AdminServiceInterface {
     }
 
     /**
-     * @param createTeamRequest 
+     * @param teamDTO 
      * @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 createTeam(createTeamRequest: CreateTeamRequest, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<TeamDTO>;
-    public createTeam(createTeamRequest: CreateTeamRequest, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<TeamDTO>>;
-    public createTeam(createTeamRequest: CreateTeamRequest, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<TeamDTO>>;
-    public createTeam(createTeamRequest: CreateTeamRequest, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
-        if (createTeamRequest === null || createTeamRequest === undefined) {
-            throw new Error('Required parameter createTeamRequest was null or undefined when calling createTeam.');
+    public createTeam(teamDTO: TeamDTO, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<TeamDTO>;
+    public createTeam(teamDTO: TeamDTO, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<TeamDTO>>;
+    public createTeam(teamDTO: TeamDTO, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<TeamDTO>>;
+    public createTeam(teamDTO: TeamDTO, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+        if (teamDTO === null || teamDTO === undefined) {
+            throw new Error('Required parameter teamDTO was null or undefined when calling createTeam.');
         }
 
         let localVarHeaders = this.defaultHeaders;
@@ -293,7 +291,7 @@ export class AdminService implements AdminServiceInterface {
         return this.httpClient.request<TeamDTO>('put', `${this.configuration.basePath}${localVarPath}`,
             {
                 context: localVarHttpContext,
-                body: createTeamRequest,
+                body: teamDTO,
                 responseType: <any>responseType_,
                 withCredentials: this.configuration.withCredentials,
                 headers: localVarHeaders,
diff --git a/webapp/src/app/core/modules/openapi/api/admin.serviceInterface.ts b/webapp/src/app/core/modules/openapi/api/admin.serviceInterface.ts
index aae7480f..cee923f6 100644
--- a/webapp/src/app/core/modules/openapi/api/admin.serviceInterface.ts
+++ b/webapp/src/app/core/modules/openapi/api/admin.serviceInterface.ts
@@ -14,7 +14,6 @@ import { HttpHeaders }                                       from '@angular/comm
 import { Observable }                                        from 'rxjs';
 
 import { AdminConfig } from '../model/models';
-import { CreateTeamRequest } from '../model/models';
 import { TeamDTO } from '../model/models';
 import { UserDTO } from '../model/models';
 import { UserInfoDto } from '../model/models';
@@ -46,9 +45,9 @@ export interface AdminServiceInterface {
     /**
      * 
      * 
-     * @param createTeamRequest 
+     * @param teamDTO 
      */
-    createTeam(createTeamRequest: CreateTeamRequest, extraHttpRequestParams?: any): Observable<TeamDTO>;
+    createTeam(teamDTO: TeamDTO, extraHttpRequestParams?: any): Observable<TeamDTO>;
 
     /**
      * 
diff --git a/webapp/src/app/core/modules/openapi/model/create-team-request.ts b/webapp/src/app/core/modules/openapi/model/create-team-request.ts
deleted file mode 100644
index 5368a823..00000000
--- a/webapp/src/app/core/modules/openapi/model/create-team-request.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Hephaestus API
- * API documentation for the Hephaestus application server.
- *
- * The version of the OpenAPI document: 0.0.1
- * Contact: felixtj.dietrich@tum.de
- *
- * 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 CreateTeamRequest { 
-    name?: string;
-    color?: string;
-}
-
diff --git a/webapp/src/app/core/modules/openapi/model/models.ts b/webapp/src/app/core/modules/openapi/model/models.ts
index ff2e98a0..7f51ca77 100644
--- a/webapp/src/app/core/modules/openapi/model/models.ts
+++ b/webapp/src/app/core/modules/openapi/model/models.ts
@@ -1,5 +1,4 @@
 export * from './admin-config';
-export * from './create-team-request';
 export * from './issue-comment';
 export * from './issue-comment-dto';
 export * from './leaderboard-entry';