diff --git a/hv-ui/angular.json b/hv-ui/angular.json
index 60b0e3a..d856043 100644
--- a/hv-ui/angular.json
+++ b/hv-ui/angular.json
@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -87,6 +88,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.css"
             ],
             "scripts": []
diff --git a/hv-ui/package-lock.json b/hv-ui/package-lock.json
index f9af83a..580d364 100644
--- a/hv-ui/package-lock.json
+++ b/hv-ui/package-lock.json
@@ -155,6 +155,23 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/cdk": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.0.4.tgz",
+      "integrity": "sha512-suhAhsZEv+lLwm8dc524cMvO7gHPi+z2+4tueNS+zDiIObdZc4fs+KoOlnRMdYwba++X/V8mHXuDEQetl3GFcw==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "11.0.7",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.0.7.tgz",
@@ -352,6 +369,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/material": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.0.4.tgz",
+      "integrity": "sha512-yjJEl3UbJxyKZFAbhvyZGphDfhtR1vo0AnDEE3KBxAOp9oD4r7paL6ER9rSXFoNRjST56tIDbNtG/wZNtH0XDQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "11.0.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.0.9.tgz",
diff --git a/hv-ui/package.json b/hv-ui/package.json
index a3ae6e5..ebbd5e2 100644
--- a/hv-ui/package.json
+++ b/hv-ui/package.json
@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~11.0.6",
+    "@angular/cdk": "^11.0.4",
     "@angular/common": "~11.0.6",
     "@angular/compiler": "~11.0.6",
     "@angular/core": "~11.0.6",
     "@angular/forms": "~11.0.6",
+    "@angular/material": "^11.0.4",
     "@angular/platform-browser": "~11.0.6",
     "@angular/platform-browser-dynamic": "~11.0.6",
     "@angular/router": "~11.0.6",
diff --git a/hv-ui/src/app/app.module.ts b/hv-ui/src/app/app.module.ts
index 7a724b3..0c66718 100644
--- a/hv-ui/src/app/app.module.ts
+++ b/hv-ui/src/app/app.module.ts
@@ -10,6 +10,7 @@ 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';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
@@ -24,7 +25,8 @@ import { FormsModule } from '@angular/forms';
     BrowserModule,
     FormsModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/hv-ui/src/app/zahlung.ts b/hv-ui/src/app/zahlung.ts
new file mode 100644
index 0000000..037a225
--- /dev/null
+++ b/hv-ui/src/app/zahlung.ts
@@ -0,0 +1,7 @@
+export interface Zahlung {
+    id: number;
+    mieter_id: number;
+    ref_wohnung: number;
+    datum: string;
+    betrag: number;
+}
diff --git a/hv-ui/src/index.html b/hv-ui/src/index.html
index 3f382e5..84cee4c 100644
--- a/hv-ui/src/index.html
+++ b/hv-ui/src/index.html
@@ -6,8 +6,10 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>
diff --git a/hv-ui/src/styles.css b/hv-ui/src/styles.css
index 6f80f40..49e9e2c 100644
--- a/hv-ui/src/styles.css
+++ b/hv-ui/src/styles.css
@@ -19,4 +19,6 @@ body, input[type="text"], button {
 /* everywhere else */
 * {
     font-family: Arial, Helvetica, sans-serif;
-}
\ No newline at end of file
+}
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }