diff --git a/angular.json b/angular.json
index f11a8c5..60cafcb 100644
--- a/angular.json
+++ b/angular.json
@@ -56,11 +56,17 @@
             "aot": false,
             "assets": [
               "projects/ng-hoepel-common-demo/src/favicon.ico",
-              "projects/ng-hoepel-common-demo/src/assets"
+              "projects/ng-hoepel-common-demo/src/assets",
+              { "glob": "mdi.svg", "input": "../node_modules/@mdi/angular-material", "output": "./assets" }
             ],
             "styles": [
               "projects/ng-hoepel-common-demo/src/styles.css"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "./projects/ng-hoepel-common/src/global-styles/"
+              ]
+            },
             "scripts": []
           },
           "configurations": {
diff --git a/package-lock.json b/package-lock.json
index b0602f5..19c232d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
-  "name": "@hoepel.app/angular-common",
-  "version": "0.0.0-development",
+  "name": "@hoepel.app/angular-common-root",
+  "version": "1.0.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -775,6 +775,11 @@
         "rimraf": "^2.5.2"
       }
     },
+    "@mdi/angular-material": {
+      "version": "3.7.95",
+      "resolved": "https://registry.npmjs.org/@mdi/angular-material/-/angular-material-3.7.95.tgz",
+      "integrity": "sha512-OdOTgmJw8eyqGItCPwn0tR5TZ98jpEbjaL8amsBvYEbJ57dClEZPKYZeWGC3DcWdnbtgPl+88DRWndbfYvdtzQ=="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -6407,6 +6412,11 @@
       "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
       "dev": true
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
diff --git a/package.json b/package.json
index 92ad4d0..8546295 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,8 @@
     "@angular/platform-browser": "~8.0.1",
     "@angular/platform-browser-dynamic": "~8.0.1",
     "@angular/router": "~8.0.1",
+    "@mdi/angular-material": "^3.7.95",
+    "hammerjs": "^2.0.8",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"
diff --git a/projects/ng-hoepel-common-demo/src/app/app.component.css b/projects/ng-hoepel-common-demo/src/app/app.component.css
index e69de29..65dd290 100644
--- a/projects/ng-hoepel-common-demo/src/app/app.component.css
+++ b/projects/ng-hoepel-common-demo/src/app/app.component.css
@@ -0,0 +1,4 @@
+.example-card {
+  max-width: 700px;
+  margin: 20px auto;
+}
diff --git a/projects/ng-hoepel-common-demo/src/app/app.component.html b/projects/ng-hoepel-common-demo/src/app/app.component.html
index 5226d57..e00961f 100644
--- a/projects/ng-hoepel-common-demo/src/app/app.component.html
+++ b/projects/ng-hoepel-common-demo/src/app/app.component.html
@@ -1,20 +1,6 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
 
+<mat-card class="example-card">
+  <h1>Tenant contact</h1>
+
+  <app-tenant-contact-example></app-tenant-contact-example>
+</mat-card>
diff --git a/projects/ng-hoepel-common-demo/src/app/app.component.ts b/projects/ng-hoepel-common-demo/src/app/app.component.ts
index 2f7560a..f3a373e 100644
--- a/projects/ng-hoepel-common-demo/src/app/app.component.ts
+++ b/projects/ng-hoepel-common-demo/src/app/app.component.ts
@@ -1,10 +1,9 @@
 import { Component } from '@angular/core';
+import { Tenant } from '@hoepel.app/types';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'ng-hoepel-common-demo';
-}
+export class AppComponent {}
diff --git a/projects/ng-hoepel-common-demo/src/app/app.module.ts b/projects/ng-hoepel-common-demo/src/app/app.module.ts
index 784cbd0..4e1f3b8 100644
--- a/projects/ng-hoepel-common-demo/src/app/app.module.ts
+++ b/projects/ng-hoepel-common-demo/src/app/app.module.ts
@@ -1,12 +1,20 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { TenantContactModule } from '../../../ng-hoepel-common/src/lib/tenant-contact';
+import { TenantContactExampleComponent } from './tenant-contact-example/tenant-contact-example.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatCardModule, MatIconRegistry } from '@angular/material';
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
+  declarations: [AppComponent, TenantContactExampleComponent],
+  imports: [BrowserModule, TenantContactModule, BrowserAnimationsModule, MatCardModule],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {
+  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
+    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
+  }
+}
diff --git a/projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.css b/projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.html b/projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.html
new file mode 100644
index 0000000..338a238
--- /dev/null
+++ b/projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.html
@@ -0,0 +1,8 @@
+<hoepel-tenant-contact-dumb
+  [tenant]="tenant"
+  (updated)="tenantContactUpdated($event)"
+></hoepel-tenant-contact-dumb>
+
+<pre *ngIf="result">
+  {{ result | json }}
+</pre>
diff --git a/projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.spec.ts b/projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.spec.ts
new file mode 100644
index 0000000..73375ab
--- /dev/null
+++ b/projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TenantContactExampleComponent } from './tenant-contact-example.component';
+
+describe('TenantContactExampleComponent', () => {
+  let component: TenantContactExampleComponent;
+  let fixture: ComponentFixture<TenantContactExampleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TenantContactExampleComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TenantContactExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.ts b/projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.ts
new file mode 100644
index 0000000..ec2d076
--- /dev/null
+++ b/projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Tenant } from '@hoepel.app/types';
+
+@Component({
+  selector: 'app-tenant-contact-example',
+  templateUrl: './tenant-contact-example.component.html',
+  styleUrls: ['./tenant-contact-example.component.css']
+})
+export class TenantContactExampleComponent implements OnInit {
+  tenant: Tenant = {
+    name: '',
+    email: '',
+    address: {},
+    contactPerson: {},
+    description: ''
+  };
+
+  result: Tenant;
+
+  tenantContactUpdated(tenant: Tenant) {
+    this.result = tenant;
+  }
+
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/projects/ng-hoepel-common-demo/src/index.html b/projects/ng-hoepel-common-demo/src/index.html
index c17b24c..732d20a 100644
--- a/projects/ng-hoepel-common-demo/src/index.html
+++ b/projects/ng-hoepel-common-demo/src/index.html
@@ -2,11 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>NgHoepelCommonDemo</title>
+  <title>Common hoepel.app components - demo</title>
   <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/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
diff --git a/projects/ng-hoepel-common-demo/src/main.ts b/projects/ng-hoepel-common-demo/src/main.ts
index fa4e0ae..5c0e754 100644
--- a/projects/ng-hoepel-common-demo/src/main.ts
+++ b/projects/ng-hoepel-common-demo/src/main.ts
@@ -1,6 +1,6 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import 'hammerjs';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
diff --git a/projects/ng-hoepel-common-demo/src/styles.css b/projects/ng-hoepel-common-demo/src/styles.css
index 90d4ee0..2cee0cf 100644
--- a/projects/ng-hoepel-common-demo/src/styles.css
+++ b/projects/ng-hoepel-common-demo/src/styles.css
@@ -1 +1,17 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+
+/* See https://www.npmjs.com/package/@mdi/angular-material#angular */
+button.mat-menu-item {
+  line-height: 24px !important;
+}
+a.mat-menu-item > mat-icon {
+  margin-bottom: 14px;
+}
+.mat-icon svg {
+  height: 24px;
+  width: 24px;
+}
+