diff --git a/hv-ui/src/app/app.component.css b/hv-ui/src/app/app.component.css
index 00a1e5e..e69de29 100644
--- a/hv-ui/src/app/app.component.css
+++ b/hv-ui/src/app/app.component.css
@@ -1,23 +0,0 @@
-/* AppComponent's private CSS styles */
-h1 {
-    font-size: 1.2em;
-    margin-bottom: 0;
-  }
-  nav a {
-    padding: 5px 10px;
-    text-decoration: none;
-    margin-top: 10px;
-    display: inline-block;
-    background-color: #eee;
-    border-radius: 4px;
-  }
-  nav a:visited, a:link {
-    color: #334953;
-  }
-  nav a:hover {
-    color: #039be5;
-    background-color: #cfd8dc;
-  }
-  nav a.active {
-    color: #039be5;
-  }
\ No newline at end of file
diff --git a/hv-ui/src/app/app.component.html b/hv-ui/src/app/app.component.html
index df17cd8..f787dc7 100644
--- a/hv-ui/src/app/app.component.html
+++ b/hv-ui/src/app/app.component.html
@@ -4,5 +4,8 @@
     <a routerLink="/objekte">Meine Objekte</a>
     <a routerLink="/mieters">Meine Mieter</a>
 </nav>
+
+<mat-slider min="1" max="100" step="1" value="1"></mat-slider>
+
 <router-outlet></router-outlet>
 <app-messages></app-messages>
\ No newline at end of file
diff --git a/hv-ui/src/app/app.module.ts b/hv-ui/src/app/app.module.ts
index 0c66718..1b66956 100644
--- a/hv-ui/src/app/app.module.ts
+++ b/hv-ui/src/app/app.module.ts
@@ -12,6 +12,8 @@ import { MieterDetailComponent } from './mieter-detail/mieter-detail.component';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
+import { MatSliderModule } from '@angular/material/slider'
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -26,7 +28,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     FormsModule,
     AppRoutingModule,
     HttpClientModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    MatSliderModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/hv-ui/src/app/messages/messages.component.css b/hv-ui/src/app/messages/messages.component.css
index 13018f0..e69de29 100644
--- a/hv-ui/src/app/messages/messages.component.css
+++ b/hv-ui/src/app/messages/messages.component.css
@@ -1,20 +0,0 @@
-/* MessagesComponent's private CSS styles */
-h2 {
-    color: red;
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: lighter;
-  }
-  
-  button.clear {
-    font-family: Arial, sans-serif;
-    color: #333;
-    background-color: #eee;
-    margin-bottom: 12px;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  button:hover {
-    background-color: #cfd8dc;
-  }
\ No newline at end of file
diff --git a/hv-ui/src/app/messages/messages.component.html b/hv-ui/src/app/messages/messages.component.html
index 4d2794e..3bbab1f 100644
--- a/hv-ui/src/app/messages/messages.component.html
+++ b/hv-ui/src/app/messages/messages.component.html
@@ -1,8 +1,5 @@
 <div *ngIf="messageService.messages.length">
-
     <h2>Messages</h2>
-    <button class="clear"
-            (click)="messageService.clear()">clear</button>
+    <button (click)="messageService.clear()">clear</button>
     <div *ngFor='let message of messageService.messages'> {{message}} </div>
-  
 </div>
\ No newline at end of file
diff --git a/hv-ui/src/app/mieters/mieters.component.css b/hv-ui/src/app/mieters/mieters.component.css
index 1a5bd0c..e69de29 100644
--- a/hv-ui/src/app/mieters/mieters.component.css
+++ b/hv-ui/src/app/mieters/mieters.component.css
@@ -1,57 +0,0 @@
-/* HeroesComponent's private CSS styles */
-.mieters {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-    width: 15em;
-}
-.mieters li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-}
-.mieters li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    left: .1em;
-}
-.mieters li.selected {
-    background-color: #CFD8DC;
-    color: white;
-}
-.mieters li.selected:hover {
-    background-color: #BBD8DC;
-    color: white;
-}
-.mieters .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color:#405061;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-}
-
-
-.mieters a {
-  color: #333;
-  text-decoration: none;
-  position: relative;
-  display: block;
-  width: 250px;
-}
-
-.mieters a:hover {
-  color:#607D8B;
-}
diff --git a/hv-ui/src/app/objekte/objekte.component.css b/hv-ui/src/app/objekte/objekte.component.css
index 524b124..e69de29 100644
--- a/hv-ui/src/app/objekte/objekte.component.css
+++ b/hv-ui/src/app/objekte/objekte.component.css
@@ -1,57 +0,0 @@
-/* HeroesComponent's private CSS styles */
-.objekte {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-    width: 15em;
-}
-.objekte li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-}
-.objekte li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    left: .1em;
-}
-.objekte li.selected {
-    background-color: #CFD8DC;
-    color: white;
-}
-.objekte li.selected:hover {
-    background-color: #BBD8DC;
-    color: white;
-}
-.objekte .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color:#405061;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-}
-
-
-.objekte a {
-  color: #333;
-  text-decoration: none;
-  position: relative;
-  display: block;
-  width: 250px;
-}
-
-.objekte a:hover {
-  color:#607D8B;
-}
diff --git a/hv-ui/src/app/wohnungen/wohnungen.component.css b/hv-ui/src/app/wohnungen/wohnungen.component.css
index 22953ec..e69de29 100644
--- a/hv-ui/src/app/wohnungen/wohnungen.component.css
+++ b/hv-ui/src/app/wohnungen/wohnungen.component.css
@@ -1,57 +0,0 @@
-/* HeroesComponent's private CSS styles */
-.wohnungen {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-    width: 15em;
-}
-.wohnungen li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-}
-.wohnungen li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    left: .1em;
-}
-.wohnungen li.selected {
-    background-color: #CFD8DC;
-    color: white;
-}
-.wohnungen li.selected:hover {
-    background-color: #BBD8DC;
-    color: white;
-}
-.wohnungen .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color:#405061;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-}
-
-
-.wohnungen a {
-  color: #333;
-  text-decoration: none;
-  position: relative;
-  display: block;
-  width: 250px;
-}
-
-.wohnungen a:hover {
-  color:#607D8B;
-}
diff --git a/hv-ui/src/styles.css b/hv-ui/src/styles.css
index 49e9e2c..e69de29 100644
--- a/hv-ui/src/styles.css
+++ b/hv-ui/src/styles.css
@@ -1,24 +0,0 @@
-/* Application-wide Styles */
-h1 {
-    color: #369;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 250%;
-  }
-h2, h3 {
-    color: #444;
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: lighter;
-}
-body {
-    margin: 2em;
-}
-body, input[type="text"], button {
-    color: #333;
-    font-family: Cambria, Georgia, serif;
-}
-/* everywhere else */
-* {
-    font-family: Arial, Helvetica, sans-serif;
-}
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }