diff --git a/sonarQuest-frontend/.angular-cli.json b/sonarQuest-frontend/.angular-cli.json
deleted file mode 100644
index 73a42eb0..00000000
--- a/sonarQuest-frontend/.angular-cli.json
+++ /dev/null
@@ -1,61 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "sonarquest-frontend"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "./dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.scss",
-        "styles.css",
-        "theme.scss",
-        "../node_modules/rpg-awesome/css/rpg-awesome.css",
-        "../node_modules/@covalent/core/common/platform.scss"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json"
-    },
-    {
-      "project": "src/tsconfig.spec.json"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "component": {}
-  }
-}
diff --git a/sonarQuest-frontend/angular.json b/sonarQuest-frontend/angular.json
new file mode 100644
index 00000000..ea7b922c
--- /dev/null
+++ b/sonarQuest-frontend/angular.json
@@ -0,0 +1,136 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "sonarquest-frontend": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "./dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.scss",
+              "src/styles.css",
+              "src/theme.scss",
+              "node_modules/rpg-awesome/css/rpg-awesome.css",
+              "node_modules/@covalent/core/common/platform.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "sonarquest-frontend:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "sonarquest-frontend:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "sonarquest-frontend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.scss",
+              "src/styles.css",
+              "src/theme.scss",
+              "node_modules/rpg-awesome/css/rpg-awesome.css",
+              "node_modules/@covalent/core/common/platform.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "sonarquest-frontend-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "sonarquest-frontend:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "sonarquest-frontend",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
\ No newline at end of file
diff --git a/sonarQuest-frontend/karma.conf.js b/sonarQuest-frontend/karma.conf.js
index 4d9ab9d9..063e6789 100644
--- a/sonarQuest-frontend/karma.conf.js
+++ b/sonarQuest-frontend/karma.conf.js
@@ -4,24 +4,22 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
+    
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
diff --git a/sonarQuest-frontend/package.json b/sonarQuest-frontend/package.json
index ba35b92d..1e4f3627 100644
--- a/sonarQuest-frontend/package.json
+++ b/sonarQuest-frontend/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve -H 0.0.0.0",
+    "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
@@ -13,33 +13,36 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.0.0",
-    "@angular/cdk": "^5.0.0",
-    "@angular/common": "^5.0.0",
-    "@angular/compiler": "^5.0.0",
-    "@angular/core": "^5.0.0",
-    "@angular/forms": "^5.0.0",
-    "@angular/http": "^5.0.0",
-    "@angular/material": "^5.0.0",
-    "@angular/material-moment-adapter": "^5.0.0",
-    "@angular/platform-browser": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^5.0.0",
-    "@angular/router": "^5.0.0",
-    "@covalent/core": "^1.0.0",
-    "@ngx-translate/core": "^9.1.1",
-    "@ngx-translate/http-loader": "^2.0.1",
+    "@angular/animations": "7.2.7",
+    "@angular/cdk": "^7.3.3",
+    "@angular/common": "7.2.7",
+    "@angular/compiler": "7.2.7",
+    "@angular/core": "7.2.7",
+    "@angular/forms": "7.2.7",
+    "@angular/http": "7.2.7",
+    "@angular/material": "^7.3.3",
+    "@angular/material-moment-adapter": "^7.3.3",
+    "@angular/platform-browser": "7.2.7",
+    "@angular/platform-browser-dynamic": "7.2.7",
+    "@angular/platform-server": "7.2.7",
+    "@angular/router": "7.2.7",
+    "@covalent/core": "^2.0.1",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
     "ajv": "^6.2.0",
-    "moment": "2.20.1",
     "core-js": "^2.4.1",
+    "moment": "2.24.0",
     "rpg-awesome": "^0.1.1",
-    "rxjs": "^5.1.0",
-    "webpack": "^3.11.0",
-    "zone.js": "^0.8.4"
+    "rxjs": "^6.4.0",
+    "tslib": "^1.9.0",
+    "webpack": "^4.6.0",
+    "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular/cli": "^1.7.0",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/language-service": "^5.0.0",
+    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular/cli": "7.3.3",
+    "@angular/compiler-cli": "7.2.7",
+    "@angular/language-service": "7.2.7",
     "@types/jasmine": "2.5.45",
     "@types/node": "~6.0.60",
     "codelyzer": "^4.0.0",
@@ -51,9 +54,10 @@
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "mini-css-extract-plugin": "^0.5.0",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",
-    "typescript": "2.4.2"
+    "typescript": "3.2.4"
   }
 }
diff --git a/sonarQuest-frontend/src/app/login/authentication.interceptor.ts b/sonarQuest-frontend/src/app/login/authentication.interceptor.ts
index a34ccb2a..084d9df9 100644
--- a/sonarQuest-frontend/src/app/login/authentication.interceptor.ts
+++ b/sonarQuest-frontend/src/app/login/authentication.interceptor.ts
@@ -1,12 +1,14 @@
-import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
-import {Observable} from 'rxjs/Observable';
-import {Injectable} from '@angular/core';
-import {LocalStorageService} from './local-storage.service';
-import {Token} from './Token';
-import {Router} from '@angular/router';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/observable/throw';
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { of } from 'rxjs';
+import { tap, catchError } from 'rxjs/operators';
+import { Injectable } from '@angular/core';
+import { LocalStorageService } from './local-storage.service';
+import { Token } from './Token';
+import { Router } from '@angular/router';
+
+
+
 
 @Injectable()
 export class AuthenticationInterceptor implements HttpInterceptor {
@@ -23,19 +25,28 @@ export class AuthenticationInterceptor implements HttpInterceptor {
       });
     }
 
-    return next.handle(request).do((event: HttpEvent<any>) => {
-        if (event instanceof HttpResponse) {
-          // do stuff with response if you want
-        }
-      }, (err: any) => {
-        if (err instanceof HttpErrorResponse) {
-          if (err.status === 401) {
-            console.log('Session timeout');
-            this.router.navigate(['/'], {skipLocationChange: true});
-          }
-        }
-      }
+    return next.handle(request).pipe(tap(
+      event => this.handleResponse(request, event),
+      error => this.handleError(request, error)
+      )
     );
+  }
+
+  handleResponse(req: HttpRequest<any>, event) {
+    console.log('Handling response for ', req.url, event);
+    if (event instanceof HttpResponse) {
+      console.log('Request for ', req.url,
+        ' Response Status ', event.status,
+        ' With body ', event.body);
+    }
+  }
 
+  handleError(req: HttpRequest<any>, event) {
+    if (event.status === 401) {
+      console.log('Session timeout');
+      this.router.navigate(['/'], {skipLocationChange: true});
+    }
   }
 }
+
+
diff --git a/sonarQuest-frontend/src/app/login/authentication.service.ts b/sonarQuest-frontend/src/app/login/authentication.service.ts
index f327ec88..29243518 100644
--- a/sonarQuest-frontend/src/app/login/authentication.service.ts
+++ b/sonarQuest-frontend/src/app/login/authentication.service.ts
@@ -1,13 +1,12 @@
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 
-import {Observable} from 'rxjs/Observable';
-
+import {Observable, Subscriber} from 'rxjs';
+import {shareReplay} from 'rxjs/operators';
 import {environment} from './../../environments/environment';
 import {LocalStorageService} from './local-storage.service';
-import {Subscriber} from 'rxjs/Subscriber';
 import {Token} from './Token';
-import 'rxjs/add/operator/shareReplay';
+
 import { Router } from '@angular/router';
 
 @Injectable()
@@ -29,7 +28,7 @@ export class AuthenticationService {
         headers: new HttpHeaders().set('Content-Type', 'application/json'),
         responseType: 'json',
         observe: 'response'
-      }).shareReplay().subscribe((response) => {
+      }).pipe(shareReplay()).subscribe((response) => {
         if (response.body && response.status === 200) {
           const token = response.body as Token;
           this.storageService.saveJWTToken(token);
diff --git a/sonarQuest-frontend/src/app/pages/admin-page/admin-page.component.ts b/sonarQuest-frontend/src/app/pages/admin-page/admin-page.component.ts
index bd207b24..f8fa596b 100644
--- a/sonarQuest-frontend/src/app/pages/admin-page/admin-page.component.ts
+++ b/sonarQuest-frontend/src/app/pages/admin-page/admin-page.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Wizard } from '../../Interfaces/Wizard';
 import { WizardService } from '../../services/wizard.service';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-admin-page',
diff --git a/sonarQuest-frontend/src/app/pages/admin-page/components/admin-developer/components/admin-developer-create/admin-developer-create.component.html b/sonarQuest-frontend/src/app/pages/admin-page/components/admin-developer/components/admin-developer-create/admin-developer-create.component.html
index 067e7b90..f156875a 100644
--- a/sonarQuest-frontend/src/app/pages/admin-page/components/admin-developer/components/admin-developer-create/admin-developer-create.component.html
+++ b/sonarQuest-frontend/src/app/pages/admin-page/components/admin-developer/components/admin-developer-create/admin-developer-create.component.html
@@ -4,21 +4,21 @@ <h2 mat-dialog-title>{{'ADMIN_PAGE.CREATE_DEVELOPER' | translate}}</h2>
 <mat-dialog-content>
   <div layout="column" layout-padding>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input class="form-control" formControlName="name" matInput placeholder="{{'DEVELOPER.DEVELOPER' | translate}}">   
         <mat-error>{{getErrorMessage()}}</mat-error>            
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input class="form-control" formControlName="password" matInput placeholder="{{'LOGIN.PASSWORD' | translate}}" [type]="'password'">
         <mat-error>{{getErrorMessage()}}</mat-error>
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea class="form-control" formControlName="about" matInput placeholder="{{'DEVELOPER.ABOUTME' | translate}}"></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
       <mat-select placeholder="{{'TABLE.COLUMNS.ROLE' | translate}}" matInput formControlName="role">
@@ -45,9 +45,9 @@ <h2 mat-dialog-title>{{'ADMIN_PAGE.CREATE_DEVELOPER' | translate}}</h2>
       </mat-select>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input class="form-control" formControlName="picture" matInput placeholder="{{'GLOBAL.FILENAME_IMAGE' | translate}}">
-      </mat-input-container>
+      </mat-form-field>
     </div>
   </div>
   <mat-divider></mat-divider>
diff --git a/sonarQuest-frontend/src/app/pages/admin-page/components/admin-developer/components/admin-developer-edit/admin-developer-edit.component.html b/sonarQuest-frontend/src/app/pages/admin-page/components/admin-developer/components/admin-developer-edit/admin-developer-edit.component.html
index 469023e4..4efec4dc 100644
--- a/sonarQuest-frontend/src/app/pages/admin-page/components/admin-developer/components/admin-developer-edit/admin-developer-edit.component.html
+++ b/sonarQuest-frontend/src/app/pages/admin-page/components/admin-developer/components/admin-developer-edit/admin-developer-edit.component.html
@@ -2,14 +2,14 @@ <h2 mat-dialog-title>{{'ADMIN_PAGE.EDIT_DEVELOPER' | translate}}</h2>
 <mat-dialog-content>
   <div layout="column" layout-padding>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="{{'DEVELOPER.DEVELOPER' | translate}}" [(ngModel)]="user.username">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea matInput placeholder="{{'DEVELOPER.ABOUTME' | translate}}" [(ngModel)]="user.aboutMe"></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
       <mat-select [placeholder]="user.role.name" matInput [(ngModel)]="user.role">
@@ -23,9 +23,9 @@ <h2 mat-dialog-title>{{'ADMIN_PAGE.EDIT_DEVELOPER' | translate}}</h2>
       <img [src]="imageToShow">
     </div>
     <div>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="{{'GLOBAL.FILENAME_IMAGE' | translate}}" [(ngModel)]="user.picture">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div>
       <td-data-table #dataTable [data]="userToWorlds" [sortable]="true" [columns]="columns">
diff --git a/sonarQuest-frontend/src/app/pages/admin-page/components/admin-sonar-cube/admin-sonar-cube.component.html b/sonarQuest-frontend/src/app/pages/admin-page/components/admin-sonar-cube/admin-sonar-cube.component.html
index d6ec7f7c..3e45adf7 100644
--- a/sonarQuest-frontend/src/app/pages/admin-page/components/admin-sonar-cube/admin-sonar-cube.component.html
+++ b/sonarQuest-frontend/src/app/pages/admin-page/components/admin-sonar-cube/admin-sonar-cube.component.html
@@ -1,27 +1,27 @@
 <mat-card-content>
   <div flex>
-    <mat-input-container>
+    <mat-form-field>
       <input matInput placeholder="Configname" [(ngModel)]="configName">
-    </mat-input-container>
+    </mat-form-field>
   </div>
 
   <div flex>
-    <mat-input-container>
+    <mat-form-field>
       <input matInput placeholder="SonarQube URL" [(ngModel)]="sonarQubeUrl">
-    </mat-input-container>
+    </mat-form-field>
     <button mat-mini-fab color="primary" (click)="checkSonarCubeUrl()">Check</button>
   </div>
 
   <div flex>
-    <mat-input-container>
+    <mat-form-field>
       <input matInput placeholder="Http Basic Auth Username" [(ngModel)]="httpBasicAuthUsername">
-    </mat-input-container>
+    </mat-form-field>
   </div>
 
   <div flex>
-    <mat-input-container>
+    <mat-form-field>
         <input matInput placeholder="Http Basic Auth Password" [(ngModel)]="httpBasicAuthPassword" type="password">
-    </mat-input-container>
+    </mat-form-field>
   </div>
 
   <div>
diff --git a/sonarQuest-frontend/src/app/pages/admin-page/components/admin-world/components/edit-world/edit-world.component.html b/sonarQuest-frontend/src/app/pages/admin-page/components/admin-world/components/edit-world/edit-world.component.html
index 2fd76282..e2d41bfd 100644
--- a/sonarQuest-frontend/src/app/pages/admin-page/components/admin-world/components/edit-world/edit-world.component.html
+++ b/sonarQuest-frontend/src/app/pages/admin-page/components/admin-world/components/edit-world/edit-world.component.html
@@ -2,9 +2,9 @@ <h2 mat-dialog-title>{{world.name}}</h2>
 <mat-dialog-content>
   <div layout="column">
     <div flex>
-      <mat-input-container>
+      <mat-form-field>
         <input matInput placeholder="Name" [(ngModel)]="world.name">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
       <mat-checkbox [(ngModel)]="world.active" 
@@ -20,9 +20,9 @@ <h2 mat-dialog-title>{{world.name}}</h2>
     </div>    
     <div flex>&nbsp;</div>
     <div flex>
-      <mat-input-container>
+      <mat-form-field>
         <input matInput placeholder="Background" [(ngModel)]="world.image" (click)="selectBackground()">
-      </mat-input-container>
+      </mat-form-field>
       <button mat-mini-fab color="primary" (click)="selectBackground()">Select</button>
     </div>
   </div>
diff --git a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-adventure/components/gamemaster-adventure-create/gamemaster-adventure-create.component.html b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-adventure/components/gamemaster-adventure-create/gamemaster-adventure-create.component.html
index 2726ba1a..1d09833b 100644
--- a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-adventure/components/gamemaster-adventure-create/gamemaster-adventure-create.component.html
+++ b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-adventure/components/gamemaster-adventure-create/gamemaster-adventure-create.component.html
@@ -16,24 +16,24 @@ <h2 mat-dialog-title>{{"ADVENTURE.NEW_ADVENTURE" | translate}}</h2>
     <mat-divider></mat-divider>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'TABLE.COLUMNS.TITLE' | translate" [(ngModel)]="title">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.GOLD' | translate" type="number" [(ngModel)]="gold">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.XP' | translate" type="number" [(ngModel)]="xp">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea matInput [placeholder]="'TABLE.COLUMNS.STORY' | translate" [(ngModel)]="story"></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
   </div>
 
diff --git a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-adventure/components/gamemaster-adventure-edit/gamemaster-adventure-edit.component.html b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-adventure/components/gamemaster-adventure-edit/gamemaster-adventure-edit.component.html
index 297eade6..f082e8ca 100644
--- a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-adventure/components/gamemaster-adventure-edit/gamemaster-adventure-edit.component.html
+++ b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-adventure/components/gamemaster-adventure-edit/gamemaster-adventure-edit.component.html
@@ -5,24 +5,24 @@ <h2 mat-dialog-title>{{"GAMEMASTER_PAGE.ADVENTURE.EDIT_ADVENTURE" | translate}}<
 <mat-dialog-content>
   <div layout="column" layout-padding>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'TABLE.COLUMNS.TITLE' | translate" [(ngModel)]="adventure.title">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.GOLD' | translate" type="number" [(ngModel)]="adventure.gold">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.XP' | translate" type="number" [(ngModel)]="adventure.xp">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea matInput [placeholder]="'TABLE.COLUMNS.STORY' | translate" [(ngModel)]="adventure.story"></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
   </div>
 
diff --git a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-create/components/gamemaster-skill-create/gamemaster-skill-create.component.html b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-create/components/gamemaster-skill-create/gamemaster-skill-create.component.html
index ecbb8ccc..b1a05137 100644
--- a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-create/components/gamemaster-skill-create/gamemaster-skill-create.component.html
+++ b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-create/components/gamemaster-skill-create/gamemaster-skill-create.component.html
@@ -6,9 +6,9 @@ <h2 mat-dialog-title>{{"SKILL.NEW_SKILL" | translate}}</h2>
   <div layout="column" layout-padding>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'SKILL.NAME' | translate" [(ngModel)]="name">
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
@@ -18,9 +18,9 @@ <h2 mat-dialog-title>{{"SKILL.NEW_SKILL" | translate}}</h2>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'SKILL.VALUE' | translate" type="number" min="0" [(ngModel)]="value">
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
   </div>
diff --git a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-create/gamemaster-artefact-create.component.html b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-create/gamemaster-artefact-create.component.html
index e749af89..ba4eac74 100644
--- a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-create/gamemaster-artefact-create.component.html
+++ b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-create/gamemaster-artefact-create.component.html
@@ -13,29 +13,29 @@ <h2 mat-dialog-title>{{"ARTEFACT.NEW_ARTEFACT" | translate}}</h2>
 <mat-dialog-content>
   <div layout="column" layout-padding>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'ARTEFACT.NAME' | translate" [(ngModel)]="name">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'ARTEFACT.MIN_LEVEL' | translate" type="number" min="1" [(ngModel)]="min">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'ARTEFACT.PRICE' | translate" type="number" min="0" [(ngModel)]="price">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'ARTEFACT.QUANTITY' | translate" type="number" min="0" [(ngModel)]="quantity">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea matInput [placeholder]="'ARTEFACT.DESCRIPTION' | translate" maxlength="255" [(ngModel)]="description"></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
   </div>
 </mat-dialog-content>
diff --git a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-edit/gamemaster-artefact-edit.component.html b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-edit/gamemaster-artefact-edit.component.html
index 129dde9a..3e5dc761 100644
--- a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-edit/gamemaster-artefact-edit.component.html
+++ b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-marketplace/components/gamemaster-artefact-edit/gamemaster-artefact-edit.component.html
@@ -15,33 +15,33 @@ <h2 mat-dialog-title>{{"ARTEFACT.EDIT_ARTEFACT" | translate}}</h2>
   <div layout="column" layout-padding>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="Name" [(ngModel)]="name">
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="min. Level" type="number" min="1" [(ngModel)]="min">
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="Price" type="number" min="0" [(ngModel)]="price">
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="available quantity" type="number" min="0" [(ngModel)]="quantity">
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea matInput placeholder="Description" maxlength="255" [(ngModel)]="description"></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
   </div>
diff --git a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-create/components/gamemaster-suggest-tasks/gamemaster-suggest-tasks.component.html b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-create/components/gamemaster-suggest-tasks/gamemaster-suggest-tasks.component.html
index a9f93743..60f196dd 100644
--- a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-create/components/gamemaster-suggest-tasks/gamemaster-suggest-tasks.component.html
+++ b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-create/components/gamemaster-suggest-tasks/gamemaster-suggest-tasks.component.html
@@ -12,9 +12,9 @@ <h2 mat-dialog-title>{{"GAMEMASTER_PAGE.QUEST.SUGGEST_TASKS" | translate}}</h2>
       </mat-select>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'GAMEMASTER_PAGE.TASK.AMOUNT' | translate" type="number" [(ngModel)]="amount">
-      </mat-input-container>
+      </mat-form-field>
     </div>
   </div>
 </mat-dialog-content>
diff --git a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-create/gamemaster-quest-create.component.html b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-create/gamemaster-quest-create.component.html
index 233e5c3e..d92d6390 100644
--- a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-create/gamemaster-quest-create.component.html
+++ b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-create/gamemaster-quest-create.component.html
@@ -21,9 +21,9 @@ <h2 mat-dialog-title>{{"QUEST.NEW_QUEST" | translate}}</h2>
     <mat-divider></mat-divider>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'TABLE.COLUMNS.TITLE' | translate" [(ngModel)]="title">
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
@@ -33,21 +33,21 @@ <h2 mat-dialog-title>{{"QUEST.NEW_QUEST" | translate}}</h2>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.GOLD' | translate" type="number" [(ngModel)]="gold">
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.XP' | translate" type="number" [(ngModel)]="xp">
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea matInput [placeholder]="'TABLE.COLUMNS.STORY' | translate" [(ngModel)]="story"></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex layout="row">
diff --git a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-edit/gamemaster-quest-edit.component.html b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-edit/gamemaster-quest-edit.component.html
index afff04a4..52dac186 100644
--- a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-edit/gamemaster-quest-edit.component.html
+++ b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-quest/components/gamemaster-quest-edit/gamemaster-quest-edit.component.html
@@ -10,9 +10,9 @@ <h2 mat-dialog-title>{{"GAMEMASTER_PAGE.QUEST.EDIT_QUEST" | translate}}</h2>
       <p>{{"GAMEMASTER_PAGE.QUEST.EDIT_SOLVED_QUEST" | translate}}</p>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'TABLE.COLUMNS.TITLE' | translate" [(ngModel)]="quest.title" [disabled]="isSolved">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
       <mat-checkbox 
@@ -20,19 +20,19 @@ <h2 mat-dialog-title>{{"GAMEMASTER_PAGE.QUEST.EDIT_QUEST" | translate}}</h2>
         [(ngModel)]="quest.visible">{{"QUEST.VISIBLE"| translate}}</mat-checkbox>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.GOLD' | translate" type="number" [(ngModel)]="quest.gold" [disabled]="isSolved">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.XP' | translate" type="number" [(ngModel)]="quest.xp" [disabled]="isSolved">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea matInput [placeholder]="'TABLE.COLUMNS.STORY' | translate" [(ngModel)]="quest.story" [disabled]="isSolved"></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex layout="row">
diff --git a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-special-task/components/gamemaster-special-task-create/gamemaster-special-task-create.component.html b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-special-task/components/gamemaster-special-task-create/gamemaster-special-task-create.component.html
index 4c1be4a3..a8c003b4 100644
--- a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-special-task/components/gamemaster-special-task-create/gamemaster-special-task-create.component.html
+++ b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-special-task/components/gamemaster-special-task-create/gamemaster-special-task-create.component.html
@@ -4,24 +4,24 @@ <h2 mat-dialog-title>{{"TASK.NEW_SPECIALTASK" | translate}}</h2>
 <mat-dialog-content>
   <div layout="column" layout-padding>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'TABLE.COLUMNS.TITLE' | translate" [(ngModel)]="title">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.GOLD' | translate" type="number" [(ngModel)]="gold">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.XP' | translate"  type="number" [(ngModel)]="xp">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea matInput [placeholder]="'TASK.MISSION' | translate" [(ngModel)]="message"></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
   </div>
 </mat-dialog-content>
diff --git a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-special-task/components/gamemaster-special-task-edit/gamemaster-special-task-edit.component.html b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-special-task/components/gamemaster-special-task-edit/gamemaster-special-task-edit.component.html
index 6e604a0f..1a92e086 100644
--- a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-special-task/components/gamemaster-special-task-edit/gamemaster-special-task-edit.component.html
+++ b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-special-task/components/gamemaster-special-task-edit/gamemaster-special-task-edit.component.html
@@ -2,24 +2,24 @@ <h2 mat-dialog-title>{{"GAMEMASTER_PAGE.TASK.EDIT_SPECIALTASK" | translate}}</h2
 <mat-dialog-content>
   <div layout="column" layout-padding>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'TABLE.COLUMNS.TITLE' | translate" [(ngModel)]="specialTask.title">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.GOLD' | translate" type="number" [(ngModel)]="specialTask.gold">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'DEVELOPER.XP' | translate"  type="number" [(ngModel)]="specialTask.xp">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea matInput [placeholder]="'TASK.MISSION' | translate" [(ngModel)]="specialTask.message"></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
   </div>
 </mat-dialog-content>
diff --git a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-standard-task/components/gamemaster-standard-task-edit/gamemaster-standard-task-edit.component.html b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-standard-task/components/gamemaster-standard-task-edit/gamemaster-standard-task-edit.component.html
index 4d87c20d..dc4229eb 100644
--- a/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-standard-task/components/gamemaster-standard-task-edit/gamemaster-standard-task-edit.component.html
+++ b/sonarQuest-frontend/src/app/pages/gamemaster-page/components/gamemaster-task/components/gamemaster-standard-task/components/gamemaster-standard-task-edit/gamemaster-standard-task-edit.component.html
@@ -5,19 +5,19 @@ <h2 mat-dialog-title>{{"GAMEMASTER_PAGE.TASK.EDIT_STANDARDTASK" | translate}}</h
 <mat-dialog-content>
   <div layout="column" layout-padding>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="Titel" [(ngModel)]="standardTask.title">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="Gold" type="number" [(ngModel)]="standardTask.gold">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="XP"  type="number" [(ngModel)]="standardTask.xp">
-      </mat-input-container>
+      </mat-form-field>
     </div>
   </div>
 </mat-dialog-content>
diff --git a/sonarQuest-frontend/src/app/pages/marketplace-page/components/marketplace-artefact-view/marketplace-artefact-view.component.html b/sonarQuest-frontend/src/app/pages/marketplace-page/components/marketplace-artefact-view/marketplace-artefact-view.component.html
index 67dce5de..f9b50ece 100644
--- a/sonarQuest-frontend/src/app/pages/marketplace-page/components/marketplace-artefact-view/marketplace-artefact-view.component.html
+++ b/sonarQuest-frontend/src/app/pages/marketplace-page/components/marketplace-artefact-view/marketplace-artefact-view.component.html
@@ -12,33 +12,33 @@ <h2 mat-dialog-title>{{"ARTEFACT_VIEW_PAGE.TITLE" | translate}}</h2>
   <div layout="column" layout-padding>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'ARTEFACT.NAME' | translate" [(ngModel)]="name" disabled>
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'ARTEFACT.MIN_LEVEL' | translate" type="number" min="1" [(ngModel)]="min" disabled>
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'ARTEFACT.PRICE' | translate" type="number" min="0" [(ngModel)]="price" disabled>
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput [placeholder]="'ARTEFACT.QUANTITY' | translate" type="number" min="0" [(ngModel)]="quantity" disabled>
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea matInput [placeholder]="'ARTEFACT.DESCRIPTION' | translate" maxlength="255" [(ngModel)]="description" disabled></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
 
   </div>
diff --git a/sonarQuest-frontend/src/app/pages/my-avatar-page/components/my-avatar-edit/my-avatar-edit.component.html b/sonarQuest-frontend/src/app/pages/my-avatar-page/components/my-avatar-edit/my-avatar-edit.component.html
index feb30240..591bebc3 100644
--- a/sonarQuest-frontend/src/app/pages/my-avatar-page/components/my-avatar-edit/my-avatar-edit.component.html
+++ b/sonarQuest-frontend/src/app/pages/my-avatar-page/components/my-avatar-edit/my-avatar-edit.component.html
@@ -4,24 +4,24 @@ <h2 mat-dialog-title>{{'ADMIN_PAGE.EDIT_DEVELOPER' | translate}}</h2>
 <mat-dialog-content>
   <div layout="column" layout-padding>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="{{'LOGIN.USERNAME' | translate}}" [(ngModel)]="user.username">
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="{{'LOGIN.PASSWORD' | translate}}" [(ngModel)]="user.password" [type]="'password'" size="15">
-      </mat-input-container>
+      </mat-form-field>
     </div>    
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <textarea matInput placeholder="{{'DEVELOPER.ABOUTME' | translate}}" [(ngModel)]="user.aboutMe"></textarea>
-      </mat-input-container>
+      </mat-form-field>
     </div>
     <div flex>
-      <mat-input-container class="full-width">
+      <mat-form-field class="full-width">
         <input matInput placeholder="{{'GLOBAL.FILENAME_IMAGE' | translate}}" [(ngModel)]="user.picture">
-      </mat-input-container>
+      </mat-form-field>
     </div>
   </div>
 </mat-dialog-content>
diff --git a/sonarQuest-frontend/src/app/services/adventure.service.ts b/sonarQuest-frontend/src/app/services/adventure.service.ts
index 614304c5..e70cd06f 100644
--- a/sonarQuest-frontend/src/app/services/adventure.service.ts
+++ b/sonarQuest-frontend/src/app/services/adventure.service.ts
@@ -1,11 +1,9 @@
-import {Subject} from 'rxjs/Subject';
+import {Subject, Observable, ReplaySubject} from 'rxjs';
 import {Adventure} from './../Interfaces/Adventure';
 import {Injectable} from '@angular/core';
 import {Response} from '@angular/http';
 import {environment} from '../../environments/environment';
-import {Observable} from 'rxjs/Observable';
 import {World} from '../Interfaces/World';
-import {ReplaySubject} from 'rxjs/ReplaySubject';
 import {HttpClient} from '@angular/common/http';
 
 @Injectable()
diff --git a/sonarQuest-frontend/src/app/services/artefact.service.ts b/sonarQuest-frontend/src/app/services/artefact.service.ts
index 14194d09..0861ea5a 100644
--- a/sonarQuest-frontend/src/app/services/artefact.service.ts
+++ b/sonarQuest-frontend/src/app/services/artefact.service.ts
@@ -1,8 +1,6 @@
 import {Response} from '@angular/http';
-import {ReplaySubject} from 'rxjs/ReplaySubject';
-import {Subject} from 'rxjs/Subject';
+import {ReplaySubject, Subject, Observable} from 'rxjs';
 import {Artefact} from './../Interfaces/Artefact';
-import {Observable} from 'rxjs/Observable';
 import {Injectable} from '@angular/core';
 import {environment} from '../../environments/environment';
 import {HttpClient} from '@angular/common/http';
diff --git a/sonarQuest-frontend/src/app/services/image.service.ts b/sonarQuest-frontend/src/app/services/image.service.ts
index 8cfbd770..8ab838bf 100644
--- a/sonarQuest-frontend/src/app/services/image.service.ts
+++ b/sonarQuest-frontend/src/app/services/image.service.ts
@@ -1,6 +1,4 @@
-import {ReplaySubject} from 'rxjs/ReplaySubject';
-import {Subject} from 'rxjs/Subject';
-import {Observable} from 'rxjs/Observable';
+import {ReplaySubject, Subject, Observable} from 'rxjs';
 import {DomSanitizer} from '@angular/platform-browser';
 import {Injectable} from '@angular/core';
 
@@ -15,7 +13,7 @@ export class ImageService {
   createImageFromBlob(image: Blob): Observable<any> {
     const reader = new FileReader();
     reader.addEventListener('load', () => {
-      this.imageSubject.next(this.domSanitizer.bypassSecurityTrustUrl(reader.result));
+      this.imageSubject.next(this.domSanitizer.bypassSecurityTrustUrl(reader.result.toString()));
     }, false);
 
     if (image) {
diff --git a/sonarQuest-frontend/src/app/services/participation.service.ts b/sonarQuest-frontend/src/app/services/participation.service.ts
index b8beab9f..2deec94a 100644
--- a/sonarQuest-frontend/src/app/services/participation.service.ts
+++ b/sonarQuest-frontend/src/app/services/participation.service.ts
@@ -1,4 +1,4 @@
-import {Subject} from 'rxjs/Subject';
+import {Subject} from 'rxjs';
 import {Response} from '@angular/http';
 import {Injectable} from '@angular/core';
 import {Quest} from '../Interfaces/Quest';
diff --git a/sonarQuest-frontend/src/app/services/permission.service.ts b/sonarQuest-frontend/src/app/services/permission.service.ts
index b1fb3b05..8bdb1b5c 100644
--- a/sonarQuest-frontend/src/app/services/permission.service.ts
+++ b/sonarQuest-frontend/src/app/services/permission.service.ts
@@ -2,7 +2,8 @@ import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {environment} from '../../environments/environment';
 import {Permission} from '../Interfaces/Permission';
-import {Observable} from 'rxjs/Observable';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
 import {AuthenticationService} from '../login/authentication.service';
 
 @Injectable()
@@ -27,7 +28,7 @@ export class PermissionService {
   }
 
   private loadPermittedUrls(): Promise<string[]> {
-    return this.getPermissions().map(permissions => permissions.map(permission => permission.permission)).toPromise();
+    return this.getPermissions().pipe(map(permissions => permissions.map(permission => permission.permission))).toPromise();
   }
 
   public isUrlPermitted(url: string): boolean | Promise<boolean> {
diff --git a/sonarQuest-frontend/src/app/services/quest.service.ts b/sonarQuest-frontend/src/app/services/quest.service.ts
index 7761e3d6..dc7aa912 100644
--- a/sonarQuest-frontend/src/app/services/quest.service.ts
+++ b/sonarQuest-frontend/src/app/services/quest.service.ts
@@ -1,11 +1,10 @@
 import {Adventure} from './../Interfaces/Adventure';
-import {Subject} from 'rxjs/Subject';
+import {Subject, Observable} from 'rxjs';
 import {Injectable} from '@angular/core';
 import {Response} from '@angular/http';
 import {environment} from '../../environments/environment';
 import {Quest} from '../Interfaces/Quest';
 import {World} from '../Interfaces/World';
-import {Observable} from 'rxjs/Observable';
 import {HttpClient} from '@angular/common/http';
 import {Task} from '../Interfaces/Task';
 import {ParticipationService} from './participation.service';
diff --git a/sonarQuest-frontend/src/app/services/skill.service.ts b/sonarQuest-frontend/src/app/services/skill.service.ts
index 65d2c75f..aa7044d0 100644
--- a/sonarQuest-frontend/src/app/services/skill.service.ts
+++ b/sonarQuest-frontend/src/app/services/skill.service.ts
@@ -1,6 +1,4 @@
-import {ReplaySubject} from 'rxjs/ReplaySubject';
-import {Subject} from 'rxjs/Subject';
-import {Observable} from 'rxjs/Observable';
+import {ReplaySubject, Subject, Observable} from 'rxjs';
 import {Response} from '@angular/http';
 import {environment} from '../../environments/environment';
 import {Skill} from './../Interfaces/Skill';
diff --git a/sonarQuest-frontend/src/app/services/special-task.service.ts b/sonarQuest-frontend/src/app/services/special-task.service.ts
index c4920c16..953103b4 100644
--- a/sonarQuest-frontend/src/app/services/special-task.service.ts
+++ b/sonarQuest-frontend/src/app/services/special-task.service.ts
@@ -3,8 +3,7 @@ import {Injectable} from '@angular/core';
 import {Response} from '@angular/http';
 import {environment} from '../../environments/environment';
 import {SpecialTask} from '../Interfaces/SpecialTask';
-import {ReplaySubject} from 'rxjs/ReplaySubject';
-import {Observable} from 'rxjs/Observable';
+import {ReplaySubject, Observable} from 'rxjs';
 import {HttpClient} from '@angular/common/http';
 import {Task} from '../Interfaces/Task';
 import {StandardTask} from '../Interfaces/StandardTask';
diff --git a/sonarQuest-frontend/src/app/services/standard-task.service.ts b/sonarQuest-frontend/src/app/services/standard-task.service.ts
index ae7eccf1..d3063855 100644
--- a/sonarQuest-frontend/src/app/services/standard-task.service.ts
+++ b/sonarQuest-frontend/src/app/services/standard-task.service.ts
@@ -2,12 +2,9 @@ import {World} from './../Interfaces/World';
 import {Injectable} from '@angular/core';
 import {Response} from '@angular/http';
 import {environment} from '../../environments/environment';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
-import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/operator/publishLast';
-import 'rxjs/add/operator/share';
-import {ReplaySubject} from 'rxjs/ReplaySubject';
+
+
+import {Observable, ReplaySubject} from 'rxjs';
 import {StandardTask} from '../Interfaces/StandardTask';
 import {HttpClient} from '@angular/common/http';
 import {Task} from '../Interfaces/Task';
diff --git a/sonarQuest-frontend/src/app/services/task.service.ts b/sonarQuest-frontend/src/app/services/task.service.ts
index 8475eccc..ab181d61 100644
--- a/sonarQuest-frontend/src/app/services/task.service.ts
+++ b/sonarQuest-frontend/src/app/services/task.service.ts
@@ -5,8 +5,8 @@ import {Response} from '@angular/http';
 
 import {environment} from '../../environments/environment';
 import {World} from '../Interfaces/World';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
+
+
 import {StandardTaskService} from './standard-task.service';
 import {SpecialTaskService} from './special-task.service';
 import {HttpClient} from '@angular/common/http';
diff --git a/sonarQuest-frontend/src/app/services/user.service.ts b/sonarQuest-frontend/src/app/services/user.service.ts
index fb2334b8..fecebe98 100644
--- a/sonarQuest-frontend/src/app/services/user.service.ts
+++ b/sonarQuest-frontend/src/app/services/user.service.ts
@@ -2,9 +2,8 @@ import {Injectable} from '@angular/core';
 import {User} from '../Interfaces/User';
 import {HttpClient} from '@angular/common/http';
 import {environment} from '../../environments/environment';
-import {Observable} from 'rxjs/Observable';
+import {Observable, Subscriber} from 'rxjs';
 import {AuthenticationService} from '../login/authentication.service';
-import {Subscriber} from 'rxjs/Subscriber';
 
 @Injectable()
 export class UserService {
diff --git a/sonarQuest-frontend/src/app/services/wizard.service.ts b/sonarQuest-frontend/src/app/services/wizard.service.ts
index 1e524c69..4240729a 100644
--- a/sonarQuest-frontend/src/app/services/wizard.service.ts
+++ b/sonarQuest-frontend/src/app/services/wizard.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../environments/environment';
 import { Wizard } from '../Interfaces/Wizard';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { WorldService } from './world.service';
 import { World } from '../Interfaces/World';
 
diff --git a/sonarQuest-frontend/src/app/services/world.service.ts b/sonarQuest-frontend/src/app/services/world.service.ts
index 14d37a8e..d07fa817 100644
--- a/sonarQuest-frontend/src/app/services/world.service.ts
+++ b/sonarQuest-frontend/src/app/services/world.service.ts
@@ -1,9 +1,8 @@
-import {Observable} from 'rxjs/Observable';
+import {Observable, Subscriber} from 'rxjs';
 import {Injectable} from '@angular/core';
 import {World} from '../Interfaces/World';
 import {environment} from '../../environments/environment';
 import {HttpClient} from '@angular/common/http';
-import {Subscriber} from 'rxjs/Subscriber';
 import {UserService} from './user.service';
 import {User} from '../Interfaces/User';
 
diff --git a/sonarQuest-frontend/src/polyfills.ts b/sonarQuest-frontend/src/polyfills.ts
index fd01cc9f..8dbf0988 100644
--- a/sonarQuest-frontend/src/polyfills.ts
+++ b/sonarQuest-frontend/src/polyfills.ts
@@ -43,7 +43,6 @@
 
 /** Evergreen browsers require these. **/
 import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
 
 
 /** ALL Firefox browsers require the following to support `@angular/animation`. **/
diff --git a/sonarQuest-frontend/src/tsconfig.spec.json b/sonarQuest-frontend/src/tsconfig.spec.json
index 510e3f1f..15458edb 100644
--- a/sonarQuest-frontend/src/tsconfig.spec.json
+++ b/sonarQuest-frontend/src/tsconfig.spec.json
@@ -11,7 +11,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",
diff --git a/sonarQuest-frontend/tsconfig.json b/sonarQuest-frontend/tsconfig.json
index a35a8ee3..39644c97 100644
--- a/sonarQuest-frontend/tsconfig.json
+++ b/sonarQuest-frontend/tsconfig.json
@@ -1,6 +1,8 @@
 {
   "compileOnSave": false,
+  "preserveWhitespaces": "off",
   "compilerOptions": {
+    "importHelpers": true,
     "outDir": "./dist/out-tsc",
     "baseUrl": "src",
     "sourceMap": true,
@@ -15,6 +17,7 @@
     "lib": [
       "es2016",
       "dom"
-    ]
+    ],
+    "module": "es2015"
   }
-}
+}
\ No newline at end of file
diff --git a/sonarQuest-frontend/tslint.json b/sonarQuest-frontend/tslint.json
index dd117b38..e0ac4557 100644
--- a/sonarQuest-frontend/tslint.json
+++ b/sonarQuest-frontend/tslint.json
@@ -14,8 +14,7 @@
     "eofline": true,
     "forin": true,
     "import-blacklist": [
-      true,
-      "rxjs"
+      true
     ],
     "import-spacing": true,
     "indent": [