diff --git a/ui/hv2-ui/src/app/flat-details/flat-details.component.css b/ui/hv2-ui/src/app/flat-details/flat-details.component.css
index e69de29..469ba71 100644
--- a/ui/hv2-ui/src/app/flat-details/flat-details.component.css
+++ b/ui/hv2-ui/src/app/flat-details/flat-details.component.css
@@ -0,0 +1,8 @@
+table {
+    width: 75%;
+}
+
+.spacer {
+    flex: 1 1 auto;
+}
+  
\ No newline at end of file
diff --git a/ui/hv2-ui/src/app/flat-details/flat-details.component.html b/ui/hv2-ui/src/app/flat-details/flat-details.component.html
index 27935be..7d185a0 100644
--- a/ui/hv2-ui/src/app/flat-details/flat-details.component.html
+++ b/ui/hv2-ui/src/app/flat-details/flat-details.component.html
@@ -37,4 +37,36 @@
             </div>
         </mat-card-content>
     </mat-card>
+    <mat-card class="defaultCard">
+        <mat-card-header>
+            <mat-card-title>
+                Betriebskostenzuordnungen
+            </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <div>
+                <table mat-table [dataSource]="dataSource" #zftable>
+                    <ng-container matColumnDef="description">
+                        <th mat-header-cell *matHeaderCellDef>Beschreibung</th>
+                        <td mat-cell *matCellDef="let element">{{element.description}}</td>
+                    </ng-container>
+                    <ng-container matColumnDef="amount">
+                        <th mat-header-cell *matHeaderCellDef>Betrag</th>
+                        <td mat-cell *matCellDef="let element">{{element.amount}} €</td>
+                    </ng-container>
+                    <ng-container matColumnDef="startdate">
+                        <th mat-header-cell *matHeaderCellDef>Beginn</th>
+                        <td mat-cell *matCellDef="let element">{{element.startdate}}</td>
+                    </ng-container>
+                    <ng-container matColumnDef="enddate">
+                        <th mat-header-cell *matHeaderCellDef>Ende</th>
+                        <td mat-cell *matCellDef="let element">{{element.enddate}}</td>
+                    </ng-container>
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/overheadadvance/', row.id]"></tr>
+                </table>
+            </div>
+
+        </mat-card-content>
+    </mat-card>
 </section>
diff --git a/ui/hv2-ui/src/app/flat-details/flat-details.component.ts b/ui/hv2-ui/src/app/flat-details/flat-details.component.ts
index 97b24bf..065cab5 100644
--- a/ui/hv2-ui/src/app/flat-details/flat-details.component.ts
+++ b/ui/hv2-ui/src/app/flat-details/flat-details.component.ts
@@ -1,8 +1,10 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatButton } from '@angular/material/button';
+import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FlatService, PremiseService } from '../data-object-service';
-import { Flat, Premise } from '../data-objects';
+import { FlatService, OverheadAdvanceFlatMappingService, PremiseService } from '../data-object-service';
+import { Flat, OverheadAdvance, OverheadAdvanceFlatMapping, Premise } from '../data-objects';
+import { ExtOverheadAdvanceService } from '../ext-data-object-service';
 import { MessageService } from '../message.service';
 
 @Component({
@@ -29,12 +31,16 @@ export class FlatDetailsComponent implements OnInit {
   }
 
   premises: Premise[]
+  overheadAdvances: OverheadAdvance[]
+  dataSource: MatTableDataSource<OverheadAdvance>
+  displayedColumns: string[] = [ "description", "amount", "startdate", "enddate" ]
 
   @ViewChild('submitButton') submitButton: MatButton
 
   constructor(
     private flatService: FlatService,
     private premiseService: PremiseService,
+    private extOverheadAdvanceService: ExtOverheadAdvanceService,
     private messageService: MessageService,
     private route: ActivatedRoute,
     private router: Router
@@ -46,8 +52,11 @@ export class FlatDetailsComponent implements OnInit {
       if (id != 0) {
         this.flat = await this.flatService.getFlat(id)
         this.premise = await this.premiseService.getPremise(this.flat.premise)
+        this.overheadAdvances = await this.extOverheadAdvanceService.getOverheadAdvancesByFlat(this.flat.id)
+        this.dataSource = new MatTableDataSource<OverheadAdvance>(this.overheadAdvances)
       }
     } catch (err) {
+      throw err
       this.messageService.add(JSON.stringify(err, undefined, 4))
     }
   }
@@ -62,6 +71,8 @@ export class FlatDetailsComponent implements OnInit {
     }
   }
 
+
+
   async saveFlat() {
     try {
       this.submitButton.disabled = true