diff --git a/hv-ui/src/app/app.module.ts b/hv-ui/src/app/app.module.ts
index c95166a..7a724b3 100644
--- a/hv-ui/src/app/app.module.ts
+++ b/hv-ui/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { ObjekteComponent } from './objekte/objekte.component';
 import { MietersComponent } from './mieters/mieters.component';
 import { WohnungenComponent } from './wohnungen/wohnungen.component';
 import { MieterDetailComponent } from './mieter-detail/mieter-detail.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -21,6 +22,7 @@ import { MieterDetailComponent } from './mieter-detail/mieter-detail.component';
   ],
   imports: [
     BrowserModule,
+    FormsModule,
     AppRoutingModule,
     HttpClientModule
   ],
diff --git a/hv-ui/src/app/forderung.ts b/hv-ui/src/app/forderung.ts
index d12ef2c..42fac36 100644
--- a/hv-ui/src/app/forderung.ts
+++ b/hv-ui/src/app/forderung.ts
@@ -1,6 +1,6 @@
 export interface Forderung {
     id: number;
-    mieter_id: number;
+    mieter: number;
     ref_wohnung: number;
     datum: string;
     betrag: number;
diff --git a/hv-ui/src/app/mieter-detail/mieter-detail.component.html b/hv-ui/src/app/mieter-detail/mieter-detail.component.html
index deae049..4dab37c 100644
--- a/hv-ui/src/app/mieter-detail/mieter-detail.component.html
+++ b/hv-ui/src/app/mieter-detail/mieter-detail.component.html
@@ -1,8 +1,8 @@
 <h1>Mieter: {{mieter.vorname}} {{mieter.nachname}} ({{mieter.id}})</h1>
 
 <table>
-    <tr><td>Objekt:</td><td>{{mieter.objekt}} ({{mieter.objekt_id}})</td></tr>
-    <tr><td>Wohnung:</td><td>{{mieter.wohnung}} ({{mieter.wohnung_id}})</td></tr>
+    <tr><td>Objekt:</td><td>{{mieter.objekt_shortname}} ({{mieter.objekt}})</td></tr>
+    <tr><td>Wohnung:</td><td>{{mieter.wohnung_shortname}} ({{mieter.wohnung}})</td></tr>
     <tr><td>Vorname:</td><td>{{mieter.vorname}}</td></tr>
     <tr><td>Nachname:</td><td>{{mieter.nachname}}</td></tr>
     <tr><td>Anrede:</td><td>{{mieter.anrede}}</td></tr>
@@ -14,14 +14,25 @@
     <tr><td>Auszug:</td><td>{{mieter.auszug}}</td></tr>
 </table>
 
+<div>
+    <label>Jahr:
+        <input [(ngModel)]="year" (input)="onYearInput()" placeholder="Jahr"/>
+    </label>
+</div>
+
 <table>
     <tr>
-        <th>Datum</th>
+        <th>Datum soll</th>
+        <th>Datum ist</th>
         <th>Forderung</th>
         <th>Zahlung</th>
+        <th>Kommentar</th>
     </tr>
-    <tr *ngFor="let forderung of forderungen">
-        <td>{{forderung.datum}}</td>
-        <td>{{forderung.betrag}}<br/><span style="font-size: small;">{{forderung.kommentar}}</span></td>
+    <tr *ngFor="let zahlungForderung of zahlungenForderungen">
+        <td>{{zahlungForderung.datum_soll}}</td>
+        <td>{{zahlungForderung.datum_ist}}</td>
+        <td>{{zahlungForderung.betrag_forderung}}</td>
+        <td>{{zahlungForderung.betrag_zahlung}}</td>
+        <td>{{zahlungForderung.kommentar}}</td>
     </tr>
 </table>
\ No newline at end of file
diff --git a/hv-ui/src/app/mieter-detail/mieter-detail.component.ts b/hv-ui/src/app/mieter-detail/mieter-detail.component.ts
index 1bcded2..658a3cc 100644
--- a/hv-ui/src/app/mieter-detail/mieter-detail.component.ts
+++ b/hv-ui/src/app/mieter-detail/mieter-detail.component.ts
@@ -3,9 +3,9 @@ import { ActivatedRoute } from '@angular/router'
 import { Location } from '@angular/common'
 
 import { Mieter } from '../mieter'
-import { Forderung } from '../forderung'
+import { ZahlungForderung } from '../zahlung-forderung'
 import { MieterService} from '../mieter.service'
-import { ForderungService} from '../forderung.service'
+import { ZahlungForderungService} from '../zahlung-forderung.service'
 import { MessageService } from '../message.service'
 
 @Component({
@@ -16,12 +16,13 @@ import { MessageService } from '../message.service'
 export class MieterDetailComponent implements OnInit {
 
   mieter: Mieter
-  forderungen : Forderung[]
+  year: string
+  zahlungenForderungen : ZahlungForderung[]
 
 
   constructor(
     private mieterService: MieterService, 
-    private forderungService: ForderungService,
+    private zahlungForderungService: ZahlungForderungService,
     private messageService: MessageService,
     private route: ActivatedRoute,
     private location: Location ) { 
@@ -31,13 +32,28 @@ export class MieterDetailComponent implements OnInit {
     const id = +this.route.snapshot.paramMap.get('id')
     try {
       this.mieter = await this.mieterService.getMieter(id)
-      this.forderungen = await this.forderungService.getForderungenByMieter(id)
+      this.zahlungenForderungen = await this.zahlungForderungService.getZahlungenForderungenByMieterAndYear(id, +this.year)
     } catch (err) {
       this.messageService.add(JSON.stringify(err, undefined, 4))
     }
   }
 
-  ngOnInit(): void {
-    this.getMieter()
+  async getZahlungenForderungen() {
+    const id = this.mieter?.id ?? 0
+    try {
+      this.zahlungenForderungen = await this.zahlungForderungService.getZahlungenForderungenByMieterAndYear(id, +this.year)
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  onYearInput(): void {
+    this.getZahlungenForderungen()
+  }
+
+  async ngOnInit(): Promise<void> {
+    this.year = new Date().getFullYear().toString()
+    await this.getMieter()
+    await this.getZahlungenForderungen()
   }
 }
diff --git a/hv-ui/src/app/mieter.ts b/hv-ui/src/app/mieter.ts
index 211a8f5..fc83269 100644
--- a/hv-ui/src/app/mieter.ts
+++ b/hv-ui/src/app/mieter.ts
@@ -1,9 +1,9 @@
 export interface Mieter {
     id: number;
-    objekt_id: number;
-    wohnung_id: number;
-    wohnung: string;
-    objekt: string;
+    objekt: number;
+    wohnung: number;
+    wohnung_shortname: string;
+    objekt_shortname: string;
     anrede: string;
     vorname: string;
     nachname: string;
diff --git a/hv-ui/src/app/wohnung.ts b/hv-ui/src/app/wohnung.ts
index e1c517f..f82d5cd 100644
--- a/hv-ui/src/app/wohnung.ts
+++ b/hv-ui/src/app/wohnung.ts
@@ -1,8 +1,7 @@
 export interface Wohnung {
     id: number;
-    objekt_id: number;
-    wohnung_id: number;
-    wohnung: string;
-    objekt: string;
+    objekt: number;
+    shortname: string;
+    objekt_shortname: string;
     flaeche: number;
 }
diff --git a/hv-ui/src/app/wohnungen/wohnungen.component.html b/hv-ui/src/app/wohnungen/wohnungen.component.html
index ff8db98..42ffe1d 100644
--- a/hv-ui/src/app/wohnungen/wohnungen.component.html
+++ b/hv-ui/src/app/wohnungen/wohnungen.component.html
@@ -5,6 +5,6 @@
 </p>
 <ul class="wohnungen">
     <li *ngFor="let wohnung of wohnungen">
-        <span>{{wohnung.wohnung}}</span>: <span>{{wohnung.flaeche}}</span>m²
+        <span>{{wohnung.shortname}}</span>: <span>{{wohnung.flaeche}}</span>m²
     </li>
 </ul>
diff --git a/hv-ui/src/app/zahlung-forderung.service.ts b/hv-ui/src/app/zahlung-forderung.service.ts
index 7639302..1654370 100644
--- a/hv-ui/src/app/zahlung-forderung.service.ts
+++ b/hv-ui/src/app/zahlung-forderung.service.ts
@@ -15,7 +15,7 @@ export class ZahlungForderungService {
   
   getZahlungenForderungenByMieterAndYear(mieterId: number, year: number): Promise<ZahlungForderung[]> {
     this.messageService.add(`ZahlungForderungService: fetched zahlungen and forderungen by mieter ${mieterId} and year ${year}`)
-    return this.http.get<ZahlungForderung[]>(`${serviceBaseUrl}/hv/mieter/${mieterId}/zahlungforderung${year}`).toPromise()
+    return this.http.get<ZahlungForderung[]>(`${serviceBaseUrl}/hv/mieter/${mieterId}/zahlungforderung/${year}`).toPromise()
   }
 
   getForderung(id: number): Promise<Forderung> {