diff --git a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html
index f6103bd..dc4b694 100644
--- a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html
+++ b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html
@@ -3,11 +3,46 @@
     <mat-spinner></mat-spinner>
   </div>
 }
-
 <h2 mat-dialog-title>Übergaben {{ data.name }}</h2>
 <mat-dialog-content>
+<mat-tab-group mat-stretch-tabs="true" mat-align-tabs="start" [dynamicHeight]="true" >
+  <mat-tab label="Neue Übergabe"  >
+    <form [formGroup]="handoverForm" class="flex-column" style="margin-top: 12px;">
+      <!-- <h6>Neue Übergabe anlegen:</h6> -->
+  
+      <mat-form-field>
+        <mat-label>Kunde</mat-label>
+        <input type="text"
+               matInput
+               formControlName="customer"
+               [matAutocomplete]="auto">
+        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+          @for (option of filteredCustomers | async; track option) {
+            <mat-option [value]="option.name">{{option.name}}</mat-option>
+          }
+        </mat-autocomplete>
+        <mat-hint>Wähle den Empfänger oder tippe einen neuen Namen ein</mat-hint>
+      </mat-form-field>
+  
+      <div style="margin: 24px 0;">
+        Der Schlüssel wurde
+        <mat-radio-group formControlName="direction" class="flex-column" style="align-items: flex-start; justify-content: flex-start;">
+          <mat-radio-button  [value]="'out'">Ausgegeben</mat-radio-button>
+          <mat-radio-button [value]="'return'">Zurückgegeben</mat-radio-button>
+        </mat-radio-group>
+      </div>
+  
+      <mat-form-field>
+        <mat-label>Datum der Übergabe</mat-label>
+        <input matInput [matDatepicker]="picker" formControlName="timestamp">
+        <mat-hint>TT/MM/JJJJ</mat-hint>
+        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+      </mat-form-field>
+    </form>
+  </mat-tab>
 
-  <h6>Historie:</h6>
+  <mat-tab label="Historie">
     <table class="handouts">
       <tr>
         <th>Kunde</th>
@@ -34,40 +69,8 @@
 
         
     </table>
-
-  <form [formGroup]="handoverForm" class="flex-column" style="margin-top: 48px;">
-    <h6>Neue Übergabe anlegen:</h6>
-
-    <mat-form-field>
-      <mat-label>Kunde</mat-label>
-      <input type="text"
-             matInput
-             formControlName="customer"
-             [matAutocomplete]="auto">
-      <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
-        @for (option of filteredCustomers | async; track option) {
-          <mat-option [value]="option.name">{{option.name}}</mat-option>
-        }
-      </mat-autocomplete>
-      <mat-hint>Wähle den Empfänger oder tippe einen neuen Namen ein</mat-hint>
-    </mat-form-field>
-
-    <div style="margin: 24px 0;">
-      Der Schlüssel wurde
-      <mat-radio-group formControlName="direction" class="flex-column" style="align-items: flex-start; justify-content: flex-start;">
-        <mat-radio-button  [value]="'out'">Ausgegeben</mat-radio-button>
-        <mat-radio-button [value]="'return'">Zurückgegeben</mat-radio-button>
-      </mat-radio-group>
-    </div>
-
-    <mat-form-field>
-      <mat-label>Datum der Übergabe</mat-label>
-      <input matInput [matDatepicker]="picker" formControlName="timestamp">
-      <mat-hint>TT/MM/JJJJ</mat-hint>
-      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-datepicker #picker></mat-datepicker>
-    </mat-form-field>
-  </form>
+  </mat-tab>
+</mat-tab-group> 
 
   
 </mat-dialog-content>
diff --git a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts
index 2a99d34..00d450b 100644
--- a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts
+++ b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, LOCALE_ID } from '@angular/core';
+import { Component, inject, LOCALE_ID, signal } from '@angular/core';
 import { ApiService } from '../../../../shared/api.service';
 import { IKey } from '../../../../model/interface/key.interface';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -20,11 +20,13 @@ import {MatListModule} from '@angular/material/list';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatRadioModule} from '@angular/material/radio';
 import { HotToastService } from '@ngxpert/hot-toast';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatTabsModule} from '@angular/material/tabs';
 
 @Component({
   selector: 'app-handover-dialog',
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule],
+  imports: [FormsModule, MatExpansionModule, MatTabsModule, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule],
   providers: [
     provideNativeDateAdapter(),
     { provide: LOCALE_ID, useValue: 'de-DE' },
@@ -42,6 +44,7 @@ export class HandoverDialogComponent {
   private toast: HotToastService = inject(HotToastService);
 
   isLoading: boolean = false;
+  readonly panelOpenState = signal(false);
 
   customers: { name: string, id: string }[] = [];
   filteredCustomers: Observable<any[]> = new Observable();