diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 89617e1..c38ca0a 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,5 +1,5 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import {async, TestBed} from '@angular/core/testing';
+import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f332f7b..5e15e30 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { User } from './models/user';
-import { DatasharingService } from './services/datasharing.service';
-import { SelfService } from './services/selfservice/self.service';
+import {Component, OnInit} from '@angular/core';
+import {DatasharingService} from './services/datasharing.service';
+import {SelfService} from './services/selfservice/self.service';
 
 @Component({
   selector: 'app-root',
@@ -10,12 +9,13 @@ import { SelfService } from './services/selfservice/self.service';
 })
 export class AppComponent implements OnInit {
 
-  constructor(private data: DatasharingService, private selfservice: SelfService) { }
+  constructor(private data: DatasharingService, private selfservice: SelfService) {
+  }
 
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
       if (user.loggedIn !== true) {
-        this.selfservice.checkIfLoggedIn();
+        this.selfservice.checkIfLoggedIn().subscribe();
       }
     });
   }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e696687..6a32cee 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,43 +1,40 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterModule, Routes } from '@angular/router';
-import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
-import { HttpModule } from '@angular/http';
+import {BrowserModule, DomSanitizer} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {RouterModule, Routes} from '@angular/router';
+import {SocketIoConfig, SocketIoModule} from 'ngx-socket-io';
+import {HttpModule} from '@angular/http';
 
-import { AppComponent } from './app.component';
-import { DocumentListComponent } from './components/document-list/document-list.component';
-import { DocumentComponent } from './components/document/document.component';
-import { RegisterComponent } from './components/register/register.component';
-import { LoginComponent } from './components/login/login.component';
-import { ChatComponent } from './components/chat/chat.component';
-import { FriendsComponent } from './components/social/friends/friends.component';
-import { FeedComponent } from './components/feed/feed.component';
-import { HomeComponent } from './components/home/home.component';
-import { SocialComponent } from './components/social/social.component';
-import { GroupsComponent } from './components/social/groups/groups.component';
-import { DialogCreateGroupComponent } from './components/social/groups/groups.component';
-import { DialogCreateEventComponent } from './components/group/group.component';
-import { ChatmanagerComponent } from './components/chatmanager/chatmanager.component';
-import { ChatlistComponent } from './components/chatlist/chatlist.component';
-import { PostlistComponent } from './components/feed/postlist/postlist.component';
-import { GraphQLModule } from './graphql.module';
-import { HttpClientModule } from '@angular/common/http';
-import { ProfileComponent } from './components/profile/profile.component';
-import { GroupComponent } from './components/group/group.component';
-import { ImprintComponent } from './components/imprint/imprint.component';
-import { AboutComponent } from './components/about/about.component';
-import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {AppComponent} from './app.component';
+import {DocumentListComponent} from './components/document-list/document-list.component';
+import {DocumentComponent} from './components/document/document.component';
+import {RegisterComponent} from './components/register/register.component';
+import {LoginComponent} from './components/login/login.component';
+import {ChatComponent} from './components/chat/chat.component';
+import {FriendsComponent} from './components/social/friends/friends.component';
+import {FeedComponent} from './components/feed/feed.component';
+import {HomeComponent} from './components/home/home.component';
+import {SocialComponent} from './components/social/social.component';
+import {DialogCreateGroupComponent, GroupsComponent} from './components/social/groups/groups.component';
+import {DialogCreateEventComponent, GroupComponent} from './components/group/group.component';
+import {ChatmanagerComponent} from './components/chatmanager/chatmanager.component';
+import {ChatlistComponent} from './components/chatlist/chatlist.component';
+import {PostlistComponent} from './components/feed/postlist/postlist.component';
+import {GraphQLModule} from './graphql.module';
+import {HttpClientModule} from '@angular/common/http';
+import {ProfileComponent} from './components/profile/profile.component';
+import {ImprintComponent} from './components/imprint/imprint.component';
+import {AboutComponent} from './components/about/about.component';
+import {ChatcontactsComponent} from './components/chatmanager/chatcontacts/chatcontacts.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatTableModule} from '@angular/material/table';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import {InfiniteScrollModule} from 'ngx-infinite-scroll';
 import {UserlistComponent} from './components/userlist/userlist.component';
 
-import { MatSliderModule } from '@angular/material/slider';
-import { MatFormFieldModule  } from '@angular/material/form-field';
+import {MatSliderModule} from '@angular/material/slider';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
-import { ReactiveFormsModule} from '@angular/forms';
-import {MatIconModule} from '@angular/material/icon';
+import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatTabsModule} from '@angular/material/tabs';
@@ -45,40 +42,39 @@ import {MatCardModule} from '@angular/material/card';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatSelectModule} from '@angular/material/select';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import { OverlayModule} from '@angular/cdk/overlay';
+import {OverlayModule} from '@angular/cdk/overlay';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatRippleModule} from '@angular/material/core';
 import {MatBadgeModule} from '@angular/material/badge';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
-import { LayoutModule } from '@angular/cdk/layout';
-import { MatButtonModule } from '@angular/material/button';
-import { MatListModule } from '@angular/material/list';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {MainNavigationComponent} from './components/main-navigation/main-navigation.component';
+import {LayoutModule} from '@angular/cdk/layout';
+import {MatButtonModule} from '@angular/material/button';
+import {MatListModule} from '@angular/material/list';
 import {MatSortModule} from '@angular/material/sort';
-import { SearchComponent } from './components/search/search.component';
-import {DomSanitizer} from '@angular/platform-browser';
-import {MatIconRegistry} from '@angular/material/icon';
+import {SearchComponent} from './components/search/search.component';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatNativeDateModule} from '@angular/material/';
+import {MatNativeDateModule, MatProgressBarModule} from '@angular/material/';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {DialogFileUploadComponent} from './components/profile/fileUpload/fileUpload.component';
 
 
-const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
+const config: SocketIoConfig = {url: 'http://localhost:4444', options: {}};
 
 const appRoutes: Routes = [
-  { path: '', component: HomeComponent },
-  { path: 'profile/:id', component: ProfileComponent },
-  { path: 'group/:id', component: GroupComponent },
-  { path: 'login', component: LoginComponent },
-  { path: 'register', component: RegisterComponent },
-  { path: 'about', component: AboutComponent },
-  { path: 'imprint', component: ImprintComponent },
+  {path: '', component: HomeComponent},
+  {path: 'profile/:id', component: ProfileComponent},
+  {path: 'group/:id', component: GroupComponent},
+  {path: 'login', component: LoginComponent},
+  {path: 'register', component: RegisterComponent},
+  {path: 'about', component: AboutComponent},
+  {path: 'imprint', component: ImprintComponent},
 ];
 
 @NgModule({
@@ -107,6 +103,7 @@ const appRoutes: Routes = [
     GroupComponent,
     DialogCreateEventComponent,
     UserlistComponent,
+    DialogFileUploadComponent,
   ],
   imports: [
     BrowserModule,
@@ -124,7 +121,7 @@ const appRoutes: Routes = [
     MatIconModule,
     BrowserAnimationsModule,
     MatSliderModule,
-    MatFormFieldModule ,
+    MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule,
     MatToolbarModule,
@@ -151,8 +148,13 @@ const appRoutes: Routes = [
     MatExpansionModule,
     MatDatepickerModule,
     MatSnackBarModule,
+    MatProgressBarModule,
+  ],
+  entryComponents: [
+    DialogCreateGroupComponent,
+    DialogCreateEventComponent,
+    DialogFileUploadComponent
   ],
-  entryComponents: [ DialogCreateGroupComponent, DialogCreateEventComponent ],
   providers: [],
   bootstrap: [AppComponent]
 })
@@ -163,4 +165,4 @@ export class AppModule {
     iconRegistry.addSvgIcon(
       'logo_green', sanitizer.bypassSecurityTrustResourceUrl('assets/images/gv-logo-flat.svg'));
   }
- }
+}
diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html
index 13f59fa..5bf352e 100644
--- a/src/app/components/about/about.component.html
+++ b/src/app/components/about/about.component.html
@@ -1,72 +1,74 @@
 <div id="about">
-<div id="text0" style="text-align: center;">
-  
-  <h1>Greenvironment</h1>
-  <br> <br> <br> <br> <br>
-  <h1 class="mat-display-3">Keep it clean and green!</h1>
-  <button mat-icon-button>
-    <mat-icon class="big-icon" color="primary">keyboard_arrow_down</mat-icon>
-  </button>
-</div>
-<div id="text1" style="text-align: center;">
-  <h1>What's Greenvironment?</h1>
-  <p>We, the greenviroment team want to create a network for environmentalists who care for our nature and our planet as much as we do.</p>
-  <br>
-  <h1>What does the level mean?</h1>
-      <p>There are different levels you can reach through green behaviour.
-          Collect 100 points to level up! The levels are called: 
-      </p>
-      <table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
-          <ng-container matColumnDef="level">
-              <th mat-header-cell *matHeaderCellDef> level </th>
-              <td mat-cell *matCellDef="let level"> {{level.level}} </td>
-          </ng-container>
-          <ng-container matColumnDef="name">
-              <th mat-header-cell *matHeaderCellDef> level name </th>
-              <td mat-cell *matCellDef="let level"> {{level.name}} </td>
-          </ng-container>
-          <tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
-      </table>
-      <br>
-  <h1>How to level up?</h1>
-      <p>There is an always growing list of things you can do,
-          to support your environment
-          and earn points to level up at the same time.
-          You can get a different amount of points
-          for differnet actions you can see in the list below:
-      </p>
-      <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
-          <!--- Note that these columns can be defined in any order.
-                  The actual rendered columns are set as a property on the row definition" -->
-          
-          <!-- Position Column -->
-          <ng-container matColumnDef="points">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header> points </th>
-              <td mat-cell *matCellDef="let action"> {{action.points}} </td>
-          </ng-container>
+  <div id="text0" style="text-align: center;">
 
-          <!-- Name Column -->
-          <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
-            <td mat-cell *matCellDef="let action"> {{action.name}} </td>
-        </ng-container>
+    <h1>Greenvironment</h1>
+    <br> <br> <br> <br> <br>
+    <h1 class="mat-display-3">Keep it clean and green!</h1>
+    <button mat-icon-button>
+      <mat-icon class="big-icon" color="primary">keyboard_arrow_down</mat-icon>
+    </button>
+  </div>
+  <div id="text1" style="text-align: center;">
+    <h1>What's Greenvironment?</h1>
+    <p>We, the greenviroment team want to create a network for environmentalists who care for our nature and our planet
+      as much as we do.</p>
+    <br>
+    <h1>What does the level mean?</h1>
+    <p>There are different levels you can reach through green behaviour.
+      Collect 100 points to level up! The levels are called:
+    </p>
+    <table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
+      <ng-container matColumnDef="level">
+        <th mat-header-cell *matHeaderCellDef> level</th>
+        <td mat-cell *matCellDef="let level"> {{level.level}} </td>
+      </ng-container>
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> level name</th>
+        <td mat-cell *matCellDef="let level"> {{level.name}} </td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
+    </table>
+    <br>
+    <h1>How to level up?</h1>
+    <p>There is an always growing list of things you can do,
+      to support your environment
+      and earn points to level up at the same time.
+      You can get a different amount of points
+      for differnet actions you can see in the list below:
+    </p>
+    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+      <!--- Note that these columns can be defined in any order.
+              The actual rendered columns are set as a property on the row definition" -->
 
-        <!-- decriotion Column -->
-        <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> description </th>
-            <td mat-cell *matCellDef="let action"> {{action.description}} </td>
-        </ng-container>
+      <!-- Position Column -->
+      <ng-container matColumnDef="points">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> points</th>
+        <td mat-cell *matCellDef="let action"> {{action.points}} </td>
+      </ng-container>
 
-          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-      </table>
-</div>
-<div id="text2" style="text-align: center;">
-  <p class="mat-display-1">We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>
-  <p class="mat-display-1">You aren't part of greenvironment yet? - join us now!</p>
-  <a mat-stroked-button color="primary" class="link-button" routerLink="/register" >Register</a>
-  <br>
-  <a mat-stroked-button color="primary" class="link-button" routerLink="/login">Login</a>
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> action</th>
+        <td mat-cell *matCellDef="let action"> {{action.name}} </td>
+      </ng-container>
+
+      <!-- decriotion Column -->
+      <ng-container matColumnDef="description">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> description</th>
+        <td mat-cell *matCellDef="let action"> {{action.description}} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+  <div id="text2" style="text-align: center;">
+    <p class="mat-display-1">We believe, that together we can do amazing things to protect our environment and keep it
+      clean and green.</p>
+    <p class="mat-display-1">You aren't part of greenvironment yet? - join us now!</p>
+    <a mat-stroked-button color="primary" class="link-button" routerLink="/register">Register</a>
+    <br>
+    <a mat-stroked-button color="primary" class="link-button" routerLink="/login">Login</a>
+  </div>
 </div>
-</div>
\ No newline at end of file
diff --git a/src/app/components/about/about.component.sass b/src/app/components/about/about.component.sass
index d8cea49..699ab55 100644
--- a/src/app/components/about/about.component.sass
+++ b/src/app/components/about/about.component.sass
@@ -16,7 +16,7 @@
   padding: 2em
   min-height: 50%
   max-width: 100%
-    
+
 .big-icon
   //color: white
   transform: scale(2)
@@ -31,5 +31,6 @@
   max-width: 690px
   margin: 0 auto
   text-align: left
+
 .mat-header-cell
   padding-right: 0.5em
diff --git a/src/app/components/about/about.component.spec.ts b/src/app/components/about/about.component.spec.ts
index 6b77344..3035231 100644
--- a/src/app/components/about/about.component.spec.ts
+++ b/src/app/components/about/about.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { AboutComponent } from './about.component';
+import {AboutComponent} from './about.component';
 
 describe('AboutComponent', () => {
   let component: AboutComponent;
@@ -8,9 +8,9 @@ describe('AboutComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AboutComponent ]
+      declarations: [AboutComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/about/about.component.ts b/src/app/components/about/about.component.ts
index c891813..3983dc3 100644
--- a/src/app/components/about/about.component.ts
+++ b/src/app/components/about/about.component.ts
@@ -1,9 +1,9 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Activitylist } from 'src/app/models/activity';
-import { Levellist } from 'src/app/models/levellist';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {Activitylist} from 'src/app/models/activity';
+import {Levellist} from 'src/app/models/levellist';
 import {MatSort} from '@angular/material/sort';
 import {MatTableDataSource} from '@angular/material/table';
-import { ActivityService } from 'src/app/services/activity/activity.service';
+import {ActivityService} from 'src/app/services/activity/activity.service';
 
 @Component({
   selector: 'app-about',
@@ -19,9 +19,11 @@ export class AboutComponent implements OnInit {
   displayedLevelColumns = ['level', 'name'];
   levelSource = this.levellist.levels;
 
-  constructor(private activityService: ActivityService) { }
+  constructor(private activityService: ActivityService) {
+  }
 
   @ViewChild(MatSort, {static: true}) sort: MatSort;
+
   ngOnInit() {
     this.activityService.getActivities();
     this.activityService.activitylist.subscribe(response => {
diff --git a/src/app/components/chat/chat.component.spec.ts b/src/app/components/chat/chat.component.spec.ts
index 1f642f2..bfbbddf 100644
--- a/src/app/components/chat/chat.component.spec.ts
+++ b/src/app/components/chat/chat.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ChatComponent } from './chat.component';
+import {ChatComponent} from './chat.component';
 
 describe('ChatComponent', () => {
   let component: ChatComponent;
@@ -8,9 +8,9 @@ describe('ChatComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ChatComponent ]
+      declarations: [ChatComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/chat/chat.component.ts b/src/app/components/chat/chat.component.ts
index 7727629..e39259d 100644
--- a/src/app/components/chat/chat.component.ts
+++ b/src/app/components/chat/chat.component.ts
@@ -1,8 +1,7 @@
-import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
-import { Chatmessage } from 'src/app/models/chatmessage';
-import { Chatinfo } from 'src/app/models/chatinfo';
-import { ChatService } from 'src/app/services/chat/chat.service';
-import { Chat } from 'src/app/models/chat';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Chatmessage} from 'src/app/models/chatmessage';
+import {ChatService} from 'src/app/services/chat/chat.service';
+import {Chat} from 'src/app/models/chat';
 
 @Component({
   selector: 'chatmanager-chat',
@@ -16,7 +15,8 @@ export class ChatComponent implements OnInit {
   @Output() goBackEvent = new EventEmitter<boolean>();
   @Input() childChat: Chat;
 
-  constructor(private chatService: ChatService) { }
+  constructor(private chatService: ChatService) {
+  }
 
   ngOnInit() {
     this.refresh();
@@ -28,16 +28,16 @@ export class ChatComponent implements OnInit {
 
   sendMessage(pElement) {
     this.chatService.sendMessage(this.childChat.id, pElement.value)
-    .subscribe(response => {
-      console.log('Message sent');
-      pElement.value = '';
-      this.refresh();
-    });
+      .subscribe(response => {
+        console.log('Message sent');
+        pElement.value = '';
+        this.refresh();
+      });
   }
 
   refresh() {
     this.chatService.getMessagesRaw(this.childChat.id)
-    .subscribe(response => {
+      .subscribe(response => {
         console.log('Downloading messages ...');
         this.messages = this.chatService.renderMessages(response.json());
       });
diff --git a/src/app/components/chatlist/chatlist.component.html b/src/app/components/chatlist/chatlist.component.html
index 793c220..eab8653 100644
--- a/src/app/components/chatlist/chatlist.component.html
+++ b/src/app/components/chatlist/chatlist.component.html
@@ -5,11 +5,11 @@
   </div>-->
   <mat-toolbar><span>Chat</span></mat-toolbar>
   <div id="chats">
-    <div class="chatitem" *ngFor="let chat of childChats" 
-    [class.selected]="chat === selectedChat" (click)="showChat(chat)">
+    <div class="chatitem" *ngFor="let chat of childChats"
+         [class.selected]="chat === selectedChat" (click)="showChat(chat)">
       <div class="picture">Pic</div>
       <div class="name"><span>{{chat.memberName}}</span></div>
-      <div class="date"> <a>Date of last message</a></div>
+      <div class="date"><a>Date of last message</a></div>
     </div>
   </div>
 </div>
diff --git a/src/app/components/chatlist/chatlist.component.spec.ts b/src/app/components/chatlist/chatlist.component.spec.ts
index 19e8849..ff3de58 100644
--- a/src/app/components/chatlist/chatlist.component.spec.ts
+++ b/src/app/components/chatlist/chatlist.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ChatlistComponent } from './chatlist.component';
+import {ChatlistComponent} from './chatlist.component';
 
 describe('ChatlistComponent', () => {
   let component: ChatlistComponent;
@@ -8,9 +8,9 @@ describe('ChatlistComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ChatlistComponent ]
+      declarations: [ChatlistComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/chatlist/chatlist.component.ts b/src/app/components/chatlist/chatlist.component.ts
index f648e12..138346f 100644
--- a/src/app/components/chatlist/chatlist.component.ts
+++ b/src/app/components/chatlist/chatlist.component.ts
@@ -1,7 +1,6 @@
-import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
-import { Chatinfo } from 'src/app/models/chatinfo';
-import { Chat } from 'src/app/models/chat';
-import { ChatService } from 'src/app/services/chat/chat.service';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Chat} from 'src/app/models/chat';
+import {ChatService} from 'src/app/services/chat/chat.service';
 
 @Component({
   selector: 'chatmanager-chatlist',
@@ -15,7 +14,8 @@ export class ChatlistComponent implements OnInit {
   @Output() showCreateChatEvent = new EventEmitter<boolean>();
   selectedChat: Chat;
 
-  constructor(private chatService: ChatService) { }
+  constructor(private chatService: ChatService) {
+  }
 
   ngOnInit() {
 
diff --git a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.html b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.html
index a55f166..2fb7dc5 100644
--- a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.html
+++ b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.html
@@ -1,15 +1,16 @@
 <div id="contacts">
-    <div id='header'>
-        <button id="goback" (click)="goBack()"><span><i class="fa fa-arrow-left fa-3x" aria-hidden="true"></i></span></button>
-        <span class='title'>Contacts</span>
-    </div>
-    <div class="search-container">
-    </div>
-    <div class="data-container">
-        <div class="contact-item" *ngFor="let contact of contactList"
-          [class.selected]="contact === selectedContact" (click)="createChat(contact.id)">  
-            <div class="picture">Pic</div>
-            <div class="name"><span>{{contact.name}}</span></div>
-        </div>
+  <div id='header'>
+    <button id="goback" (click)="goBack()"><span><i class="fa fa-arrow-left fa-3x" aria-hidden="true"></i></span>
+    </button>
+    <span class='title'>Contacts</span>
+  </div>
+  <div class="search-container">
+  </div>
+  <div class="data-container">
+    <div class="contact-item" *ngFor="let contact of contactList"
+         [class.selected]="contact === selectedContact" (click)="createChat(contact.id)">
+      <div class="picture">Pic</div>
+      <div class="name"><span>{{contact.name}}</span></div>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.spec.ts b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.spec.ts
index f94d884..a7a9415 100644
--- a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.spec.ts
+++ b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ChatcontactsComponent } from './chatcontacts.component';
+import {ChatcontactsComponent} from './chatcontacts.component';
 
 describe('ChatcontactsComponent', () => {
   let component: ChatcontactsComponent;
@@ -8,9 +8,9 @@ describe('ChatcontactsComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ChatcontactsComponent ]
+      declarations: [ChatcontactsComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.ts b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.ts
index 2ccfa3b..006a5b6 100644
--- a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.ts
+++ b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { FriendInfo } from 'src/app/models/friendinfo';
-import { ChatService } from 'src/app/services/chat/chat.service';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {FriendInfo} from 'src/app/models/friendinfo';
+import {ChatService} from 'src/app/services/chat/chat.service';
 
 @Component({
   selector: 'chatmanager-chatcontacts',
@@ -12,7 +12,8 @@ export class ChatcontactsComponent implements OnInit {
   @Output() goBackEvent = new EventEmitter<boolean>();
   selectedContact: FriendInfo;
 
-  constructor(private chatService: ChatService) { }
+  constructor(private chatService: ChatService) {
+  }
 
   ngOnInit() {
   }
diff --git a/src/app/components/chatmanager/chatmanager.component.sass b/src/app/components/chatmanager/chatmanager.component.sass
index f74a631..6694562 100644
--- a/src/app/components/chatmanager/chatmanager.component.sass
+++ b/src/app/components/chatmanager/chatmanager.component.sass
@@ -1,6 +1,6 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
 
-div 
-    width: 100%
-    height: 100%
\ No newline at end of file
+div
+  width: 100%
+  height: 100%
diff --git a/src/app/components/chatmanager/chatmanager.component.spec.ts b/src/app/components/chatmanager/chatmanager.component.spec.ts
index d222640..4518c76 100644
--- a/src/app/components/chatmanager/chatmanager.component.spec.ts
+++ b/src/app/components/chatmanager/chatmanager.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ChatmanagerComponent } from './chatmanager.component';
+import {ChatmanagerComponent} from './chatmanager.component';
 
 describe('ChatmanagerComponent', () => {
   let component: ChatmanagerComponent;
@@ -8,9 +8,9 @@ describe('ChatmanagerComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ChatmanagerComponent ]
+      declarations: [ChatmanagerComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/chatmanager/chatmanager.component.ts b/src/app/components/chatmanager/chatmanager.component.ts
index db1550a..45216f2 100644
--- a/src/app/components/chatmanager/chatmanager.component.ts
+++ b/src/app/components/chatmanager/chatmanager.component.ts
@@ -1,9 +1,7 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { ChatService } from '../../services/chat/chat.service';
-import { ChatComponent } from '../chat/chat.component';
-import { Chatinfo } from 'src/app/models/chatinfo';
-import { DatasharingService } from 'src/app/services/datasharing.service';
-import { Chat } from 'src/app/models/chat';
+import {Component, OnInit} from '@angular/core';
+import {ChatService} from '../../services/chat/chat.service';
+import {DatasharingService} from 'src/app/services/datasharing.service';
+import {Chat} from 'src/app/models/chat';
 
 @Component({
   selector: 'home-chatmanager',
@@ -19,7 +17,8 @@ export class ChatmanagerComponent implements OnInit {
   parentSelectedChat: Chat;
   parentChats: Array<Chat>;
 
-  constructor(private data: DatasharingService, private chatService: ChatService) { }
+  constructor(private data: DatasharingService, private chatService: ChatService) {
+  }
 
   ngOnInit() {
     /*this.data.currentChatIDs.subscribe(chatIDs => {
@@ -51,7 +50,7 @@ export class ChatmanagerComponent implements OnInit {
 
   refresh() {
     this.chatService.getAllChatsRaw()
-    .subscribe(response => {
+      .subscribe(response => {
         console.log(response);
         this.parentChats = this.chatService.renderAllChats(response.json());
       });
diff --git a/src/app/components/document-list/document-list.component.html b/src/app/components/document-list/document-list.component.html
index 6a57b17..d99fd52 100644
--- a/src/app/components/document-list/document-list.component.html
+++ b/src/app/components/document-list/document-list.component.html
@@ -1,4 +1,5 @@
 <div class='sidenav'>
   <span (click)='newDoc()'>New Document</span>
-  <span [class.selected]='docId === currentDoc' (click)='loadDoc(docId)' *ngFor='let docId of documents | async'>{{ docId }}</span>
+  <span [class.selected]='docId === currentDoc' (click)='loadDoc(docId)'
+        *ngFor='let docId of documents | async'>{{ docId }}</span>
 </div>
diff --git a/src/app/components/document-list/document-list.component.scss b/src/app/components/document-list/document-list.component.scss
index 506aa38..10001b7 100644
--- a/src/app/components/document-list/document-list.component.scss
+++ b/src/app/components/document-list/document-list.component.scss
@@ -1,24 +1,28 @@
 .sidenav {
-    position: fixed;
-    height: 100%;
-    width: 220px;
-    top: 0;
-    left: 0;
-    background-color: #111111;
-    overflow-x: hidden;
-    padding-top: 20px;
+  position: fixed;
+  height: 100%;
+  width: 220px;
+  top: 0;
+  left: 0;
+  background-color: #111111;
+  overflow-x: hidden;
+  padding-top: 20px;
 
-    span {
-        padding: 6px 8px 6px 16px;
-        text-decoration: none;
-        font-size: 25px;
-        font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
-        color: #818181;
-        display: block;
-    }.selected {
-        color: #e1e1e1;
-    }:hover {
-        color: #f1f1f1;
-        cursor: pointer;
-    }
+  span {
+    padding: 6px 8px 6px 16px;
+    text-decoration: none;
+    font-size: 25px;
+    font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
+    color: #818181;
+    display: block;
+  }
+
+  .selected {
+    color: #e1e1e1;
+  }
+
+  :hover {
+    color: #f1f1f1;
+    cursor: pointer;
+  }
 }
diff --git a/src/app/components/document-list/document-list.component.spec.ts b/src/app/components/document-list/document-list.component.spec.ts
index f8c7635..2ba5f52 100644
--- a/src/app/components/document-list/document-list.component.spec.ts
+++ b/src/app/components/document-list/document-list.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { DocumentListComponent } from './document-list.component';
+import {DocumentListComponent} from './document-list.component';
 
 describe('DocumentListComponent', () => {
   let component: DocumentListComponent;
@@ -8,9 +8,9 @@ describe('DocumentListComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DocumentListComponent ]
+      declarations: [DocumentListComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/document-list/document-list.component.ts b/src/app/components/document-list/document-list.component.ts
index 10faac9..6a68c2f 100644
--- a/src/app/components/document-list/document-list.component.ts
+++ b/src/app/components/document-list/document-list.component.ts
@@ -1,7 +1,7 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Observable, Subscription} from 'rxjs';
 
-import { DocumentService } from 'src/app/services/document.service';
+import {DocumentService} from 'src/app/services/document.service';
 
 @Component({
   selector: 'app-document-list',
@@ -13,7 +13,8 @@ export class DocumentListComponent implements OnInit, OnDestroy {
   currentDoc: string;
   private _docSub: Subscription;
 
-  constructor(private documentService: DocumentService) { }
+  constructor(private documentService: DocumentService) {
+  }
 
   ngOnInit() {
     this.documents = this.documentService.documents;
diff --git a/src/app/components/document/document.component.scss b/src/app/components/document/document.component.scss
index 67d5275..f97544b 100644
--- a/src/app/components/document/document.component.scss
+++ b/src/app/components/document/document.component.scss
@@ -1,12 +1,12 @@
 textarea {
-    position: fixed;
-    width: calc(100% - 235px);
-    height: 100%;
-    right: 0;
-    top: 0;
-    font-size: 18pt;
-    padding-top: 20px;
-    resize: none;
-    border: none;
-    padding: 20px 0px 20px 15px;
+  position: fixed;
+  width: calc(100% - 235px);
+  height: 100%;
+  right: 0;
+  top: 0;
+  font-size: 18pt;
+  padding-top: 20px;
+  resize: none;
+  border: none;
+  padding: 20px 0px 20px 15px;
 }
diff --git a/src/app/components/document/document.component.spec.ts b/src/app/components/document/document.component.spec.ts
index 6780d19..5f113c4 100644
--- a/src/app/components/document/document.component.spec.ts
+++ b/src/app/components/document/document.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { DocumentComponent } from './document.component';
+import {DocumentComponent} from './document.component';
 
 describe('DocumentComponent', () => {
   let component: DocumentComponent;
@@ -8,9 +8,9 @@ describe('DocumentComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DocumentComponent ]
+      declarations: [DocumentComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/document/document.component.ts b/src/app/components/document/document.component.ts
index a5c4c04..8bb37ba 100644
--- a/src/app/components/document/document.component.ts
+++ b/src/app/components/document/document.component.ts
@@ -1,8 +1,8 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { DocumentService } from 'src/app/services/document.service';
-import { Subscription } from 'rxjs';
-import { Document } from 'src/app/models/document';
-import { startWith } from 'rxjs/operators';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {DocumentService} from 'src/app/services/document.service';
+import {Subscription} from 'rxjs';
+import {Document} from 'src/app/models/document';
+import {startWith} from 'rxjs/operators';
 
 @Component({
   selector: 'app-document',
@@ -12,11 +12,13 @@ import { startWith } from 'rxjs/operators';
 export class DocumentComponent implements OnInit, OnDestroy {
   document: Document;
   private _docSub: Subscription;
-  constructor(private documentService: DocumentService) { }
+
+  constructor(private documentService: DocumentService) {
+  }
 
   ngOnInit() {
     this._docSub = this.documentService.currentDocument.pipe(
-      startWith({ id: '', doc: 'Select an existing document or create a new one to get started'})
+      startWith({id: '', doc: 'Select an existing document or create a new one to get started'})
     ).subscribe(document => this.document = document);
   }
 
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index dac9442..3f7bb97 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -1,31 +1,35 @@
 <div id="home"
-infinite-scroll
-[infiniteScrollDistance]="0.5"
-[scrollWindow]="false"
-(scrolled)="onScroll()">
+     infinite-scroll
+     [infiniteScrollDistance]="0.5"
+     [scrollWindow]="false"
+     (scrolled)="onScroll()">
   <div [hidden]="!loggedIn">
-    <mat-card >
+    <mat-card>
       <mat-card-content>
         <mat-form-field id="input">
-          <textarea matInput #content type="text" [(ngModel)]="textInputValue" mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
+          <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue"
+                    mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
           <button mat-button matSuffix mat-icon-button>
             <mat-icon>add</mat-icon>
           </button>
         </mat-form-field>
         <p id="check">
-          <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked">I protected the environment.</mat-checkbox>
+          <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked">I protected the environment.
+          </mat-checkbox>
         </p>
         <mat-form-field id="action-chooser" *ngIf="checked">
           <mat-label>What did you do?</mat-label>
           <mat-select [(ngModel)]="activityId" name="action">
             <mat-option>nothing ;)</mat-option>
-            <mat-option *ngFor="let action of actionlist.Actions" [value]="action.id" [matTooltip]="action.description" matTooltipShowDelay="200">
+            <mat-option *ngFor="let action of actionlist.Actions" [value]="action.id" [matTooltip]="action.description"
+                        matTooltipShowDelay="200">
               {{action.name}} ({{action.description}})
             </mat-option>
           </mat-select>
         </mat-form-field>
         <mat-error *ngIf="errorOccurred && textInputValue">{{getErrorMessage()}}</mat-error>
-        <button mat-raised-button *ngIf="textInputValue" color="primary" id="post-button" (click)=createPost(content,activityId)>
+        <button mat-raised-button *ngIf="textInputValue" color="primary" id="post-button"
+                (click)=createPost(content,activityId)>
           POST
         </button>
       </mat-card-content>
@@ -34,26 +38,27 @@ infinite-scroll
   <div [hidden]="loggedIn">
     <mat-card id="info">
       <mat-card-header>
-        <mat-card-title >
+        <mat-card-title>
           You need to <a routerLink="/login" class="primary-color">login</a> to post something.
         </mat-card-title>
       </mat-card-header>
     </mat-card>
   </div>
 
-<div id="chooser-div" style="text-align: center; margin-top: 1em;">
+  <div id="chooser-div" style="text-align: center; margin-top: 1em;">
     <mat-button-toggle-group id="feedchooser" [(ngModel)]="view" value="view">
-    <mat-button-toggle (click)="showNew()" value="new">New</mat-button-toggle>
-    <mat-button-toggle (click)="showMostLiked()" value="mostliked">Most Liked</mat-button-toggle>
-  </mat-button-toggle-group>
-</div>
-<div id="complete-feed">
-  <div id="feedlist">
-    <feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist>
-    <div style="height: 60px;" [hidden]='(!loadingNew && view === "new") || (!loadingMostLiked && view === "mostliked") '>
-      <!--<mat-spinner *ngIf='loadingNew && view === "mostLiked"' style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>-->
+      <mat-button-toggle (click)="showNew()" value="new">New</mat-button-toggle>
+      <mat-button-toggle (click)="showMostLiked()" value="mostliked">Most Liked</mat-button-toggle>
+    </mat-button-toggle-group>
+  </div>
+  <div id="complete-feed">
+    <div id="feedlist">
+      <feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist>
+      <div style="height: 60px;"
+           [hidden]='(!loadingNew && view === "new") || (!loadingMostLiked && view === "mostliked") '>
+        <!--<mat-spinner *ngIf='loadingNew && view === "mostLiked"' style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>-->
         <mat-spinner style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>
+      </div>
     </div>
   </div>
 </div>
-</div>
diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass
index c3d660c..40e1094 100644
--- a/src/app/components/feed/feed.component.sass
+++ b/src/app/components/feed/feed.component.sass
@@ -3,43 +3,44 @@
 
 
 .primary-color
-    color: $primary-color
+  color: $primary-color
 
-#home 
-    width: 100% 
-    height: 100%
-    overflow-y: scroll
+#home
+  width: 100%
+  height: 100%
+  overflow-y: scroll
 
 #complete-feed
-    box-sizing: border-box
-    display: flex
-    width: 100%
-    padding: 0.5em
+  box-sizing: border-box
+  display: flex
+  width: 100%
+  padding: 0.5em
+
 #info
-    ::ng-deep .mat-card-header-text
-        margin: 0px
+  ::ng-deep .mat-card-header-text
+    margin: 0px
 
 #feedlist
-    width: 100%
+  width: 100%
 
 #input
-    width: 100%
-    padding-left: 0.5em
-    padding-right: 0.5em
+  width: 100%
+  padding-left: 0.5em
+  padding-right: 0.5em
 
 #action-chooser
-    width: 100%
-    padding-left: 0.5em
-    padding-right: 0.5em
+  width: 100%
+  padding-left: 0.5em
+  padding-right: 0.5em
 
 #check
-    margin: 0
-    padding-left: 0.5em
+  margin: 0
+  padding-left: 0.5em
 
 #post-button
-    width: 100%
-    padding-left: 0.5em
-    padding-right: 0.5em
-    margin-top: 0.5em
+  width: 100%
+  padding-left: 0.5em
+  padding-right: 0.5em
+  margin-top: 0.5em
 
 
diff --git a/src/app/components/feed/feed.component.spec.ts b/src/app/components/feed/feed.component.spec.ts
index 4101160..322f1ef 100644
--- a/src/app/components/feed/feed.component.spec.ts
+++ b/src/app/components/feed/feed.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { FeedComponent } from './feed.component';
+import {FeedComponent} from './feed.component';
 
 describe('FeedComponent', () => {
   let component: FeedComponent;
@@ -8,9 +8,9 @@ describe('FeedComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FeedComponent ]
+      declarations: [FeedComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts
index ff21e52..baf1aa8 100644
--- a/src/app/components/feed/feed.component.ts
+++ b/src/app/components/feed/feed.component.ts
@@ -49,9 +49,6 @@ export class FeedComponent implements OnInit {
     });
     this.feedService.getPosts('NEW');
     this.feedService.posts.subscribe(response => {
-      if (response.length > 0) {
-        // this.loading = false;
-      }
       this.parentSelectedPostList = response;
     });
     this.feedService.newPostsAvailable.subscribe(response => {
@@ -104,4 +101,14 @@ export class FeedComponent implements OnInit {
   getErrorMessage() {
     return this.errorMessage;
   }
+
+  /**
+   * Executed when the text in the input field changes.
+   */
+  onTextInputChange() {
+    if (this.errorOccurred) {
+      this.errorOccurred = false;
+      this.errorMessage = '';
+    }
+  }
 }
diff --git a/src/app/components/feed/postlist/postlist.component.html b/src/app/components/feed/postlist/postlist.component.html
index 6b0db0d..fcf28eb 100644
--- a/src/app/components/feed/postlist/postlist.component.html
+++ b/src/app/components/feed/postlist/postlist.component.html
@@ -19,10 +19,10 @@
   </div>
 </div>-->
 
-<mat-card class="post" *ngFor = "let post of childPostList" [class.selected]="post === selectedPost" tabindex="0">
+<mat-card class="post" *ngFor="let post of childPostList" [class.selected]="post === selectedPost" tabindex="0">
   <mat-card-header>
     <div mat-card-avatar>
-      <img class="profile-picture" [src]="post.author.profilePicture"/>  
+      <img class="profile-picture" [src]="post.author.profilePicture"/>
     </div>
     <div id="button-box">
       <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button" *ngIf="post.deletable">
@@ -34,7 +34,7 @@
         </button>
       </mat-menu>
     </div>
-  <!-- <div mat-card-avatar class="example-header-image"></div> -->
+    <!-- <div mat-card-avatar class="example-header-image"></div> -->
     <mat-card-title>
       {{post.author.name}}
       <!--<a class="mat-card-subtitle" routerLink="/profile/{{post.author.id}}">@{{post.author.handle}}</a>-->
@@ -46,7 +46,7 @@
   </mat-card-header>
   <!--<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">-->
   <mat-card-content>
-      <p [innerHTML]="post.htmlContent"></p>
+    <p [innerHTML]="post.htmlContent"></p>
   </mat-card-content>
   <mat-card-actions>
     <button mat-button (click)="voteUp(post)" matTooltip="vote up" matTooltipShowDelay="500">
diff --git a/src/app/components/feed/postlist/postlist.component.sass b/src/app/components/feed/postlist/postlist.component.sass
index 9ad0f8b..433d17b 100644
--- a/src/app/components/feed/postlist/postlist.component.sass
+++ b/src/app/components/feed/postlist/postlist.component.sass
@@ -3,38 +3,47 @@
 
 $mat-card-header-size: 40px !default
 .post
-    box-sizing: border-box
-    width: 100%
-    margin-top: 0.5em
-    outline: none
-    user-select: none
-    ::ng-deep .mat-card-header-text
-        margin-top: 10px
-    .mat-card-subtitle 
-        display: contents
-    .mat-card-content
-        overflow: auto
-    a:hover
-        cursor: pointer
-    #button-box
-        text-align: right
-        margin-left: auto
-    ::ng-deep img
-        max-width: 100%
-        height: auto
-        border-radius: 4px
-    .mat-button
-        min-width: 32px !important
-        padding: 0
-        margin: 0
-        margin-left: 8px
-    .profile-picture
-        border-radius: 50%
-        width: $mat-card-header-size
-        height: $mat-card-header-size
-
-    .activity-info
-        display: contents
-        .span
-            margin-left: 32px
+  box-sizing: border-box
+  width: 100%
+  margin-top: 0.5em
+  outline: none
+  user-select: none
+
+  ::ng-deep .mat-card-header-text
+    margin-top: 10px
+
+  .mat-card-subtitle
+    display: contents
+
+  .mat-card-content
+    overflow: auto
+
+  a:hover
+    cursor: pointer
+
+  #button-box
+    text-align: right
+    margin-left: auto
+
+  ::ng-deep img
+    max-width: 100%
+    height: auto
+    border-radius: 4px
+
+  .mat-button
+    min-width: 32px !important
+    padding: 0
+    margin: 0
+    margin-left: 8px
+
+  .profile-picture
+    border-radius: 50%
+    width: $mat-card-header-size
+    height: $mat-card-header-size
+
+  .activity-info
+    display: contents
+
+    .span
+      margin-left: 32px
 
diff --git a/src/app/components/feed/postlist/postlist.component.spec.ts b/src/app/components/feed/postlist/postlist.component.spec.ts
index 7218d0e..6750f6b 100644
--- a/src/app/components/feed/postlist/postlist.component.spec.ts
+++ b/src/app/components/feed/postlist/postlist.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { PostlistComponent } from './postlist.component';
+import {PostlistComponent} from './postlist.component';
 
 describe('PostlistComponent', () => {
   let component: PostlistComponent;
@@ -8,9 +8,9 @@ describe('PostlistComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ PostlistComponent ]
+      declarations: [PostlistComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/feed/postlist/postlist.component.ts b/src/app/components/feed/postlist/postlist.component.ts
index b16794d..a6175b2 100644
--- a/src/app/components/feed/postlist/postlist.component.ts
+++ b/src/app/components/feed/postlist/postlist.component.ts
@@ -1,7 +1,7 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { Post } from 'src/app/models/post';
-import { FeedService } from 'src/app/services/feed/feed.service';
-import { Router } from '@angular/router';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Post} from 'src/app/models/post';
+import {FeedService} from 'src/app/services/feed/feed.service';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'feed-postlist',
@@ -14,7 +14,8 @@ export class PostlistComponent implements OnInit {
   @Output() voteEvent = new EventEmitter<boolean>();
   selectedPost: Post;
 
-  constructor(private feedService: FeedService, private router: Router) { }
+  constructor(private feedService: FeedService, private router: Router) {
+  }
 
   ngOnInit() {
   }
diff --git a/src/app/components/group/group.component.html b/src/app/components/group/group.component.html
index dadc9de..7192c66 100644
--- a/src/app/components/group/group.component.html
+++ b/src/app/components/group/group.component.html
@@ -1,118 +1,121 @@
 <div id="profile-page">
-    <div id="profilecontainer" *ngIf="!groupNotFound && !loading">
-        <!--on small screen-->
-        <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
-            <mat-toolbar-row>
-                <div class="profile-picture"></div>
-                <span id="username">{{groupProfile.name}}</span>
+  <div id="profilecontainer" *ngIf="!groupNotFound && !loading">
+    <!--on small screen-->
+    <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
+      <mat-toolbar-row>
+        <div class="profile-picture"></div>
+        <span id="username">{{groupProfile.name}}</span>
+        <div class="button-box">
+          <button mat-icon-button
+                  class="request-button"
+                  matTooltip="join group" matTooltipShowDelay="500"
+                  (click)="joinGroup(groupProfile)"
+                  [disabled]="!groupProfile.allowedToJoinGroup">
+            <mat-icon>group_add</mat-icon>
+          </button>
+          <button mat-icon-button
+                  class="request-button"
+                  matTooltip="create event" matTooltipShowDelay="500"
+                  (click)="openDialog()"
+                  [disabled]="!isAdmin">
+            <mat-icon>event</mat-icon>
+          </button>
+        </div>
+      </mat-toolbar-row>
+      <mat-toolbar-row>
+        <div class="info-box">
+          <span id="handle" class="pointer"
+                (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}}
+            @{{groupProfile.creator.handle}}</span>
+        </div>
+      </mat-toolbar-row>
+      <mat-toolbar-row>
+        <div class="info-box">
+          <span class="info">{{groupProfile.members.length}} member(s)</span>
+        </div>
+      </mat-toolbar-row>
+    </mat-toolbar>
+    <!--on big screen-->
+    <mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
+      <mat-toolbar-row>
+        <div class="profile-picture"></div>
+        <span id="username">{{groupProfile.name}}</span>
+        <span id="handle" class="pointer"
+              (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}}
+          @{{groupProfile.creator.handle}}</span>
+        <div class="button-box">
+          <button mat-icon-button
+                  class="request-button"
+                  matTooltip="join group" matTooltipShowDelay="500"
+                  (click)="joinGroup(groupProfile)"
+                  [disabled]="!groupProfile.allowedToJoinGroup">
+            <mat-icon>group_add</mat-icon>
+          </button>
+          <button mat-icon-button
+                  class="request-button"
+                  matTooltip="create event" matTooltipShowDelay="500"
+                  (click)="openDialog()"
+                  [disabled]="!isAdmin">
+            <mat-icon>event</mat-icon>
+          </button>
+        </div>
+      </mat-toolbar-row>
+      <mat-toolbar-row>
+        <div class="info-box">
+          <span class="info">{{groupProfile.members.length}} member(s)</span>
+        </div>
+      </mat-toolbar-row>
+    </mat-toolbar>
+    <div id="accordion">
+      <mat-accordion>
+        <mat-expansion-panel *ngIf="groupProfile.events.length > 0" expanded>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Events
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div class="list">
+            <mat-card class="card" *ngFor="let event of groupProfile.events"
+                      [class.selected]="event === selectedEvent"
+                      tabindex="0">
+              <mat-card-header>
+                <mat-card-title>{{event.name}}</mat-card-title>
+                <mat-card-subtitle>{{event.date}}</mat-card-subtitle>
                 <div class="button-box">
-                    <button mat-icon-button 
-                        class="request-button" 
-                        matTooltip="join group" matTooltipShowDelay="500"
-                        (click)="joinGroup(groupProfile)" 
-                        [disabled]="!groupProfile.allowedToJoinGroup">
-                        <mat-icon>group_add</mat-icon>
-                    </button>
-                    <button mat-icon-button 
-                        class="request-button" 
-                        matTooltip="create event" matTooltipShowDelay="500"
-                        (click)="openDialog()" 
-                        [disabled]="!isAdmin">
-                        <mat-icon>event</mat-icon>
-                    </button>
+                  <button mat-icon-button class="request-button"
+                          matTooltip="join event" matTooltipShowDelay="500"
+                          (click)="joinEvent(event)"
+                          [disabled]="event.joined">
+                    <mat-icon *ngIf="event.joined" color="primary">event_available</mat-icon>
+                    <mat-icon *ngIf="!event.joined">event_available</mat-icon>
+                  </button>
+                  <button mat-icon-button class="request-button"
+                          matTooltip="leave event" matTooltipShowDelay="500"
+                          (click)="leaveEvent(event)"
+                          [disabled]="!event.joined">
+                    <mat-icon>event_busy</mat-icon>
+                  </button>
                 </div>
-            </mat-toolbar-row>
-            <mat-toolbar-row>
-                <div class="info-box">
-                    <span id="handle" class="pointer" (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
-                </div>
-            </mat-toolbar-row>
-            <mat-toolbar-row>
-                <div class="info-box">
-                    <span class="info">{{groupProfile.members.length}} member(s)</span>
-                </div>
-            </mat-toolbar-row>
-        </mat-toolbar>
-        <!--on big screen-->
-        <mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
-            <mat-toolbar-row>
-                <div class="profile-picture"></div>
-                <span id="username">{{groupProfile.name}}</span>
-                <span id="handle" class="pointer" (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
-                <div class="button-box">
-                    <button mat-icon-button 
-                        class="request-button" 
-                        matTooltip="join group" matTooltipShowDelay="500"
-                        (click)="joinGroup(groupProfile)" 
-                        [disabled]="!groupProfile.allowedToJoinGroup">
-                        <mat-icon>group_add</mat-icon>
-                    </button>
-                    <button mat-icon-button 
-                        class="request-button" 
-                        matTooltip="create event" matTooltipShowDelay="500"
-                        (click)="openDialog()" 
-                        [disabled]="!isAdmin">
-                        <mat-icon>event</mat-icon>
-                    </button>
-                </div>
-            </mat-toolbar-row>
-            <mat-toolbar-row>
-                <div class="info-box">
-                    <span class="info">{{groupProfile.members.length}} member(s)</span>
-                </div>
-            </mat-toolbar-row>
-        </mat-toolbar>
-        <div id="accordion">
-        <mat-accordion>
-            <mat-expansion-panel *ngIf="groupProfile.events.length > 0" expanded>
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  Events
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <div class="list">
-                <mat-card class="card" *ngFor="let event of groupProfile.events" 
-                [class.selected]="event === selectedEvent"
-                tabindex="0">
-                  <mat-card-header>
-                    <mat-card-title>{{event.name}}</mat-card-title>
-                    <mat-card-subtitle >{{event.date}}</mat-card-subtitle>
-                    <div class="button-box">
-                      <button mat-icon-button class="request-button" 
-                        matTooltip="join event" matTooltipShowDelay="500"
-                        (click)="joinEvent(event)" 
-                        [disabled]="event.joined">
-                        <mat-icon *ngIf="event.joined" color="primary">event_available</mat-icon>
-                        <mat-icon *ngIf="!event.joined">event_available</mat-icon>
-                      </button>
-                      <button mat-icon-button class="request-button" 
-                        matTooltip="leave event" matTooltipShowDelay="500"
-                        (click)="leaveEvent(event)" 
-                        [disabled]="!event.joined">
-                        <mat-icon>event_busy</mat-icon>
-                      </button>
-                    </div>
-                  </mat-card-header>
-                </mat-card>
-              </div>
-            </mat-expansion-panel>
-            <mat-expansion-panel [expanded]="groupProfile.events.length < 1">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  Members  
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <div class="list">
-                <user-list [userList]="groupProfile.members"></user-list>
-              </div>
-            </mat-expansion-panel>
-          </mat-accordion> 
+              </mat-card-header>
+            </mat-card>
           </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel [expanded]="groupProfile.events.length < 1">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Members
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div class="list">
+            <user-list [userList]="groupProfile.members"></user-list>
+          </div>
+        </mat-expansion-panel>
+      </mat-accordion>
     </div>
-    <div id="profilecontainer" *ngIf="groupNotFound">
-        <h1>Group not found :(</h1>
-    </div>
-    <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
+  </div>
+  <div id="profilecontainer" *ngIf="groupNotFound">
+    <h1>Group not found :(</h1>
+  </div>
+  <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
 </div>
 
-  
\ No newline at end of file
diff --git a/src/app/components/group/group.component.sass b/src/app/components/group/group.component.sass
index 0de5d38..d153814 100644
--- a/src/app/components/group/group.component.sass
+++ b/src/app/components/group/group.component.sass
@@ -26,22 +26,30 @@ $mat-card-header-size: 100px !default
 .button-box
   text-align: right
   margin-left: auto
+
 .request-button
   margin: auto 0
+
 #toolbar
   margin-top: 32px
+
   .mat-toolbar-row
     max-height: 40px
+
   .info-box
     font-size: 14px
     margin-left: calc(100px + 0.5em)
+
     .info
       margin-right: 3em
+
   #username
     margin: 0 0.5em
     overflow: auto
+
   #handle
     font-size: 14px
+
   .profile-picture
     background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
     height: $mat-card-header-size
@@ -49,6 +57,7 @@ $mat-card-header-size: 100px !default
     border-radius: 50%
     flex-shrink: 0
     background-size: cover
+
     &:hover
       height: 200
     // Makes `<img>` tags behave like `background-size: cover`. Not supported
@@ -61,27 +70,35 @@ $mat-card-header-size: 100px !default
   margin-top: 0.5em
   outline: none
   user-select: none
+
   ::ng-deep .mat-card-header-text
     margin: 0
     margin-left: 16px
+
   .mat-card-subtitle
     margin: 0
     word-break: break-all
+
   .mat-card-title
     margin: 0
     word-break: break-all
+
   .request-button
     margin-top: 0.5em
     margin-bottom: 0.5em
+
   .profile-picture
     background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
     background-size: cover
+
   .profile-picture:hover
     cursor: pointer
+
 .pointer
   cursor: pointer
 
 ::ng-deep .mat-expansion-panel
   background: #e6e6e6
+
 ::ng-deep.dark-theme .mat-expansion-panel
   background: #121212
diff --git a/src/app/components/group/group.component.spec.ts b/src/app/components/group/group.component.spec.ts
index 50601d0..8d9ff1d 100644
--- a/src/app/components/group/group.component.spec.ts
+++ b/src/app/components/group/group.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { GroupComponent } from './group.component';
+import {GroupComponent} from './group.component';
 
 describe('GroupComponent', () => {
   let component: GroupComponent;
@@ -8,9 +8,9 @@ describe('GroupComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ GroupComponent ]
+      declarations: [GroupComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/group/group.component.ts b/src/app/components/group/group.component.ts
index 6e5af39..de4ad53 100644
--- a/src/app/components/group/group.component.ts
+++ b/src/app/components/group/group.component.ts
@@ -1,12 +1,12 @@
-import { Component, OnInit, ViewChild} from '@angular/core';
-import {Router, NavigationEnd} from '@angular/router';
-import { User } from 'src/app/models/user';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+import {User} from 'src/app/models/user';
 import {MatSort} from '@angular/material/sort';
-import { RequestService } from 'src/app/services/request/request.service';
-import { DatasharingService } from '../../services/datasharing.service';
-import { GroupService } from 'src/app/services/group/group.service';
-import { Group } from 'src/app/models/group';
-import { Event } from 'src/app/models/event';
+import {RequestService} from 'src/app/services/request/request.service';
+import {DatasharingService} from '../../services/datasharing.service';
+import {GroupService} from 'src/app/services/group/group.service';
+import {Group} from 'src/app/models/group';
+import {Event} from 'src/app/models/event';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 
 // DIALOG COMPONENT to create events
@@ -21,8 +21,8 @@ export class DialogCreateEventComponent {
     public dialogRef: MatDialogRef<DialogCreateEventComponent>,
     private group: GroupService,
     private router: Router) {
-      this.groupId = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
-    }
+    this.groupId = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
+  }
 
   onNoClick(): void {
     this.dialogRef.close();
@@ -63,20 +63,21 @@ export class GroupComponent implements OnInit {
     private requestService: RequestService,
     private data: DatasharingService,
     private groupService: GroupService) {
-      router.events.forEach((event) => {
-        // check if url changes
-        if (event instanceof NavigationEnd) {
-          const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
-          if (this.id !== possibleID && this.id && this.router.url.includes('group/')) {
-            // reload the group
-            console.log('search for group id: ' + this.router.url.substr(this.router.url.lastIndexOf('/') + 1));
-            this.ngOnInit();
-          }
+    router.events.forEach((event) => {
+      // check if url changes
+      if (event instanceof NavigationEnd) {
+        const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
+        if (this.id !== possibleID && this.id && this.router.url.includes('group/')) {
+          // reload the group
+          console.log('search for group id: ' + this.router.url.substr(this.router.url.lastIndexOf('/') + 1));
+          this.ngOnInit();
         }
-      });
+      }
+    });
   }
 
   @ViewChild(MatSort, {static: true}) sort: MatSort;
+
   ngOnInit() {
     this.loading = true;
     this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
@@ -98,7 +99,9 @@ export class GroupComponent implements OnInit {
         for (const member of this.groupProfile.members) {
           member.allowedToSendRequest = this.requestService.isAllowedToSendRequest(member.userID, this.self);
         }
-      } else { this.groupNotFound = true; }
+      } else {
+        this.groupNotFound = true;
+      }
       this.loading = false;
     });
   }
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index e274fc6..cee7549 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -1,8 +1,16 @@
 <div id="content" fxShow="true" fxHide.lt-md="true">
-    <div id="chat"><home-chatmanager [hidden]="!loggedIn"></home-chatmanager></div>
-    <div id="feed"><home-feed></home-feed></div>
-    <div class="social" [hidden]="!loggedIn"><home-social></home-social></div>
-    <div class="social" [hidden]="loggedIn"><home-search></home-search></div>
+  <div id="chat">
+    <home-chatmanager [hidden]="!loggedIn"></home-chatmanager>
+  </div>
+  <div id="feed">
+    <home-feed></home-feed>
+  </div>
+  <div class="social" [hidden]="!loggedIn">
+    <home-social></home-social>
+  </div>
+  <div class="social" [hidden]="loggedIn">
+    <home-search></home-search>
+  </div>
 </div>
 <!--
 <mat-tab-group headerPosition="below" position="0" id="bottom-menu" fxShow="true" fxHide.gt-sm="true">
@@ -11,33 +19,33 @@
     <mat-tab label="Third"> <home-social ></home-social></mat-tab>
 </mat-tab-group>
 -->
-<div class="bottom-menu"  fxShow="true" fxHide.gt-sm="true">
-    <mat-tab-group id="tab-group" selectedIndex="1" mat-stretch-tabs headerPosition="below">
-        <mat-tab disabled>    
-            <ng-template mat-tab-label>
-                <mat-icon>chat</mat-icon>
-            </ng-template> 
-            <home-chatmanager class="tab-content"></home-chatmanager>
-        </mat-tab>
-        <mat-tab>    
-            <ng-template mat-tab-label>
-                <mat-icon>home</mat-icon>
-            </ng-template> 
-            <home-feed class="tab-content"></home-feed>
-        </mat-tab>
-        <mat-tab [disabled]="!loggedIn">    
-            <ng-template mat-tab-label>
-                <mat-icon>people</mat-icon>
-            </ng-template> 
-            <home-social class="tab-content"></home-social>
-        </mat-tab>
-        <mat-tab >    
-            <ng-template mat-tab-label>
-                <mat-icon>search</mat-icon>
-            </ng-template> 
-            <home-search class="tab-content"></home-search>
-        </mat-tab>
-    </mat-tab-group>
+<div class="bottom-menu" fxShow="true" fxHide.gt-sm="true">
+  <mat-tab-group id="tab-group" selectedIndex="1" mat-stretch-tabs headerPosition="below">
+    <mat-tab disabled>
+      <ng-template mat-tab-label>
+        <mat-icon>chat</mat-icon>
+      </ng-template>
+      <home-chatmanager class="tab-content"></home-chatmanager>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <mat-icon>home</mat-icon>
+      </ng-template>
+      <home-feed class="tab-content"></home-feed>
+    </mat-tab>
+    <mat-tab [disabled]="!loggedIn">
+      <ng-template mat-tab-label>
+        <mat-icon>people</mat-icon>
+      </ng-template>
+      <home-social class="tab-content"></home-social>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <mat-icon>search</mat-icon>
+      </ng-template>
+      <home-search class="tab-content"></home-search>
+    </mat-tab>
+  </mat-tab-group>
 </div>
 
 
diff --git a/src/app/components/home/home.component.spec.ts b/src/app/components/home/home.component.spec.ts
index 490e81b..482c23c 100644
--- a/src/app/components/home/home.component.spec.ts
+++ b/src/app/components/home/home.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { HomeComponent } from './home.component';
+import {HomeComponent} from './home.component';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
@@ -8,9 +8,9 @@ describe('HomeComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HomeComponent ]
+      declarations: [HomeComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 22abaab..7df509d 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { DatasharingService } from 'src/app/services/datasharing.service';
-import { FeedService } from 'src/app/services/feed/feed.service';
+import {Component, OnInit} from '@angular/core';
+import {DatasharingService} from 'src/app/services/datasharing.service';
+import {FeedService} from 'src/app/services/feed/feed.service';
 
 @Component({
   selector: 'app-home',
@@ -11,7 +11,8 @@ export class HomeComponent implements OnInit {
 
   loggedIn: boolean;
 
-  constructor(private data: DatasharingService, private feedService: FeedService) { }
+  constructor(private data: DatasharingService, private feedService: FeedService) {
+  }
 
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
diff --git a/src/app/components/imprint/imprint.component.sass b/src/app/components/imprint/imprint.component.sass
index 6d771cc..571666b 100644
--- a/src/app/components/imprint/imprint.component.sass
+++ b/src/app/components/imprint/imprint.component.sass
@@ -8,8 +8,8 @@
   margin: 0 auto
 
 h1.mat-display-1
-    margin: 0
+  margin: 0
+
 
-    
 
 
diff --git a/src/app/components/imprint/imprint.component.spec.ts b/src/app/components/imprint/imprint.component.spec.ts
index 49b68ae..79721d0 100644
--- a/src/app/components/imprint/imprint.component.spec.ts
+++ b/src/app/components/imprint/imprint.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ImprintComponent } from './imprint.component';
+import {ImprintComponent} from './imprint.component';
 
 describe('ImprintComponent', () => {
   let component: ImprintComponent;
@@ -8,9 +8,9 @@ describe('ImprintComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ImprintComponent ]
+      declarations: [ImprintComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/imprint/imprint.component.ts b/src/app/components/imprint/imprint.component.ts
index ba755c1..aa45e45 100644
--- a/src/app/components/imprint/imprint.component.ts
+++ b/src/app/components/imprint/imprint.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-imprint',
@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ImprintComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit() {
   }
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index 0d2f145..d0de276 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1,24 +1,25 @@
 <div id="login">
-<mat-card style="text-align: center;" >   
-  <mat-card-title>
-    Login
-  </mat-card-title>   
-  <mat-card-content>
-    <div class="example-container" (keyup.enter)="onClickSubmit(email.value,password.value)">
-      <mat-error *ngIf="errorOccurred">{{getErrorMessage()}}</mat-error>
-      <mat-form-field>
-        <input matInput placeholder="Enter your email" #email  >
-      </mat-form-field>
-      <mat-form-field>
-        <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" #password>
-        <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
-        <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
-        </button>
-      </mat-form-field>
-    </div>
-    <button mat-raised-button color="primary" (click)="onClickSubmit(email.value,password.value)">Login</button>
-    <p>You aren't part of greenvironment yet?</p>
-    <a mat-stroked-button color="primary" routerLink="/register">Register</a>
-  </mat-card-content>
-</mat-card>
+  <mat-card style="text-align: center;">
+    <mat-card-title>
+      Login
+    </mat-card-title>
+    <mat-card-content>
+      <div class="example-container" (keyup.enter)="onClickSubmit(email.value,password.value)">
+        <mat-error *ngIf="errorOccurred">{{getErrorMessage()}}</mat-error>
+        <mat-form-field>
+          <input matInput placeholder="Enter your email" #email>
+        </mat-form-field>
+        <mat-form-field>
+          <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" #password>
+          <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
+                  [attr.aria-pressed]="hide">
+            <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
+          </button>
+        </mat-form-field>
+      </div>
+      <button mat-raised-button color="primary" (click)="onClickSubmit(email.value,password.value)">Login</button>
+      <p>You aren't part of greenvironment yet?</p>
+      <a mat-stroked-button color="primary" routerLink="/register">Register</a>
+    </mat-card-content>
+  </mat-card>
 </div>
diff --git a/src/app/components/login/login.component.sass b/src/app/components/login/login.component.sass
index 131accc..d4f5c5c 100644
--- a/src/app/components/login/login.component.sass
+++ b/src/app/components/login/login.component.sass
@@ -6,21 +6,21 @@
   max-width: 35em
   margin: 0 auto
 
-.example-container 
+.example-container
   display: flex
   flex-direction: column
 
-.example-container > * 
+.example-container > *
   width: 100%
 
-.example-right-align 
+.example-right-align
   text-align: right
 
 input.example-right-align::-webkit-outer-spin-button,
-input.example-right-align::-webkit-inner-spin-button 
+input.example-right-align::-webkit-inner-spin-button
   display: none
 
-input.example-right-align 
+input.example-right-align
   -moz-appearance: textfield
 
 .mat-error
@@ -35,7 +35,7 @@ input.example-right-align
 
 .mat-stroked-button
   width: 100%
-  
+
 
 
 
diff --git a/src/app/components/login/login.component.spec.ts b/src/app/components/login/login.component.spec.ts
index d6d85a8..28a5704 100644
--- a/src/app/components/login/login.component.spec.ts
+++ b/src/app/components/login/login.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { LoginComponent } from './login.component';
+import {LoginComponent} from './login.component';
 
 describe('LoginComponent', () => {
   let component: LoginComponent;
@@ -8,9 +8,9 @@ describe('LoginComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ LoginComponent ]
+      declarations: [LoginComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
index 6c26301..bb6313d 100644
--- a/src/app/components/login/login.component.ts
+++ b/src/app/components/login/login.component.ts
@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
-import { Login } from 'src/app/models/login';
-import { LoginService } from 'src/app/services/login/login.service';
+import {Login} from 'src/app/models/login';
+import {LoginService} from 'src/app/services/login/login.service';
 import {Router} from '@angular/router';
 import * as sha512 from 'js-sha512';
 import {IErrorResponse} from '../../models/interfaces/IErrorResponse';
@@ -16,6 +16,7 @@ export class LoginComponent implements OnInit {
   constructor(private loginService: LoginService, private router: Router) {
     this.login = {passwordHash: null, email: null};
   }
+
   login: Login;
   hide = true;
   errorOccurred = false;
@@ -43,7 +44,7 @@ export class LoginComponent implements OnInit {
     this.errorMessage = ' ';
     this.login.email = pEmail.trim().toLowerCase();
     this.login.passwordHash = sha512.sha512(pPasswordHash);
-    this.loginService.login(this.login).subscribe( () => {
+    this.loginService.login(this.login).subscribe(() => {
       this.router.navigateByUrl('').catch((error) => {
         this.errorMessage = error.message;
         this.errorOccurred = true;
@@ -55,6 +56,7 @@ export class LoginComponent implements OnInit {
     });
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
 
diff --git a/src/app/components/main-navigation/main-navigation.component.html b/src/app/components/main-navigation/main-navigation.component.html
index 80caa1f..acc8103 100644
--- a/src/app/components/main-navigation/main-navigation.component.html
+++ b/src/app/components/main-navigation/main-navigation.component.html
@@ -1,20 +1,22 @@
-<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <!-- getting the google material fonts -->
-<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <!-- diables zoom -->
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
+      rel="stylesheet"> <!-- getting the google material fonts -->
+<meta name="viewport"
+      content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <!-- diables zoom -->
 <mat-sidenav-container class="mat-typography">
 
   <!-- SIDENAV -->
-  <mat-sidenav #drawer class="sidenav" 
-      fxShow="true" fxHide.gt-sm="true"
-      fixedInViewport="false"
-      autoFocus="false">
+  <mat-sidenav #drawer class="sidenav"
+               fxShow="true" fxHide.gt-sm="true"
+               fixedInViewport="false"
+               autoFocus="false">
     <mat-toolbar class="menu-bar" *ngIf="!loggedIn">Menu</mat-toolbar>
     <mat-toolbar *ngIf="loggedIn" class="menu-bar">
-        <div mat-card-avatar>
-          <img class="profile-picture" [src]="user.profilePicture"/>  
-        </div>
-        <div class="hello-text-box">
-          <span class="hello-text">Hello, {{user.username}}</span>
-        </div>
+      <div mat-card-avatar>
+        <img class="profile-picture" [src]="user.profilePicture"/>
+      </div>
+      <div class="hello-text-box">
+        <span class="hello-text">Hello, {{user.username}}</span>
+      </div>
     </mat-toolbar>
     <mat-nav-list>
       <a mat-list-item routerLink="" (click)="drawer.close()">Home</a>
@@ -24,8 +26,10 @@
       <mat-divider></mat-divider>
       <div id="link-box">
         <a mat-stroked-button *ngIf="!loggedIn" class="link-button" routerLink="/register" (click)="drawer.close()">Register</a>
-        <a mat-stroked-button *ngIf="!loggedIn" class="link-button" routerLink="/login" (click)="drawer.toggle()">Login</a>
-        <a mat-stroked-button *ngIf="loggedIn" class="link-button" (click)="logout()" (click)="drawer.toggle()">log out</a>
+        <a mat-stroked-button *ngIf="!loggedIn" class="link-button" routerLink="/login"
+           (click)="drawer.toggle()">Login</a>
+        <a mat-stroked-button *ngIf="loggedIn" class="link-button" (click)="logout()" (click)="drawer.toggle()">log
+          out</a>
       </div>
     </mat-nav-list>
   </mat-sidenav>
@@ -46,26 +50,27 @@
       <mat-icon *ngIf="lighttheme" svgIcon="logo" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
       <mat-icon *ngIf="!lighttheme" svgIcon="logo_green" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
       <span routerLink="" class="link">Greenvironment</span>
-      <nav mat-tab-nav-bar backgroundColor="accent" color="accent" fxShow="true" fxHide.lt-md="true" routerLinkActive #rla="">
+      <nav mat-tab-nav-bar backgroundColor="accent" color="accent" fxShow="true" fxHide.lt-md="true" routerLinkActive
+           #rla="">
         <div *ngIf="loggedIn">
           <a mat-tab-link class="link"
-          *ngFor="let link of navLinksLoggedIn"
-          [routerLink]="link.path"
-          (click)="activeLink = link"
-          routerLinkActive #rla="routerLinkActive"
-          [routerLinkActiveOptions]="{exact:true}"
-          [active]="rla.isActive">
+             *ngFor="let link of navLinksLoggedIn"
+             [routerLink]="link.path"
+             (click)="activeLink = link"
+             routerLinkActive #rla="routerLinkActive"
+             [routerLinkActiveOptions]="{exact:true}"
+             [active]="rla.isActive">
             {{link.label}}
           </a>
         </div>
         <div *ngIf="!loggedIn">
           <a mat-tab-link class="link"
-          *ngFor="let link of navLinks"
-          [routerLink]="link.path"
-          (click)="activeLink = link"
-          routerLinkActive #rla="routerLinkActive"
-          [routerLinkActiveOptions]="{exact:true}"
-          [active]="rla.isActive">
+             *ngFor="let link of navLinks"
+             [routerLink]="link.path"
+             (click)="activeLink = link"
+             routerLinkActive #rla="routerLinkActive"
+             [routerLinkActiveOptions]="{exact:true}"
+             [active]="rla.isActive">
             {{link.label}}
           </a>
         </div>
@@ -73,10 +78,13 @@
 
       <!--content on BIG SCREEN-->
       <div id="menu-button-box">
-        <span class="mat-button" *ngIf="loggedIn" fxShow="true" fxHide.lt-md="true" routerLink={{profileUrl}}>Hello, {{user.username}}</span>
+        <span class="mat-button" *ngIf="loggedIn" fxShow="true" fxHide.lt-md="true"
+              routerLink={{profileUrl}}>Hello, {{user.username}}</span>
         <span class="mat-button" *ngIf="!loggedIn" fxShow="true" fxHide.lt-md="true" routerLink="/login"><span>Hello, Sign in</span></span>
         <button mat-icon-button [matMenuTriggerFor]="requestMenu" [disabled]="!loggedIn" id="menu-button">
-          <mat-icon [matBadge]="user.receivedRequests.length" [matBadgeHidden]="!(user.receivedRequests.length > 0)" matBadgeColor="accent">notifications</mat-icon>
+          <mat-icon [matBadge]="user.receivedRequests.length" [matBadgeHidden]="!(user.receivedRequests.length > 0)"
+                    matBadgeColor="accent">notifications
+          </mat-icon>
         </button>
 
         <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
@@ -86,7 +94,8 @@
 
       <mat-menu #requestMenu="matMenu">
         <span mat-menu-item disableRipple="true" disabled="true">friend requests:</span>
-        <button mat-menu-item *ngFor = "let request of user.receivedRequests" [class.selected]="request === selectedRequest" (click)="$event.stopPropagation();" disableRipple="true">
+        <button mat-menu-item *ngFor="let request of user.receivedRequests"
+                [class.selected]="request === selectedRequest" (click)="$event.stopPropagation();" disableRipple="true">
           <button mat-icon-button (click)=acceptRequest(request.senderUserID) (click)="$event.stopPropagation();">
             <mat-icon>check</mat-icon>
           </button>
@@ -95,7 +104,7 @@
           </button>
           <span>{{request.senderUsername}}</span>
           <span>&nbsp; @{{request.senderHandle}}</span>
-        </button> 
+        </button>
       </mat-menu>
       <mat-menu #menu="matMenu">
         <button mat-menu-item (click)="$event.stopPropagation();">
@@ -108,16 +117,16 @@
           </mat-slide-toggle>
         </button>
         <div [hidden]="!loggedIn">
-          <button mat-menu-item (click)="logout()" >
+          <button mat-menu-item (click)="logout()">
             <mat-icon>exit_to_app</mat-icon>
             <span>log out</span>
-          </button> 
+          </button>
         </div>
         <div [hidden]="loggedIn">
           <button mat-menu-item routerLink="/login">
             <mat-icon>exit_to_app</mat-icon>
             <span>login</span>
-          </button> 
+          </button>
         </div>
       </mat-menu>
 
diff --git a/src/app/components/main-navigation/main-navigation.component.sass b/src/app/components/main-navigation/main-navigation.component.sass
index 82177c4..4025e03 100644
--- a/src/app/components/main-navigation/main-navigation.component.sass
+++ b/src/app/components/main-navigation/main-navigation.component.sass
@@ -6,15 +6,19 @@
 
 .menu-bar
   position: inherit !important
+
 .mat-card-avatar
   display: contents
+
 .profile-picture
   width: 52px
   height: 52px
   border-radius: 50%
   flex-shrink: 0
+
 .hello-text-box
   margin-left: 8px
+
   .hello-text
     white-space: normal
     font-size: initial
@@ -26,7 +30,7 @@
 
 
 .sidenav .mat-toolbar
-  //background: inherit
+//background: inherit
 
 .mat-toolbar
   height: 56px
@@ -34,10 +38,13 @@
   //position: sticky
   top: 0
   z-index: 999
+
   .mat-tab-nav-bar
     height: 56px
+
   .mat-tab-links
     height: 56px
+
   .mat-tab-link
     height: 56px
 
@@ -53,7 +60,7 @@
   margin-bottom: 0.5em
 
 ::ng-deep .mat-tab-link
-  min-width: 5em!important
+  min-width: 5em !important
 
 #menu-button-box
   text-align: right
diff --git a/src/app/components/main-navigation/main-navigation.component.spec.ts b/src/app/components/main-navigation/main-navigation.component.spec.ts
index ec62b9c..37f2d64 100644
--- a/src/app/components/main-navigation/main-navigation.component.spec.ts
+++ b/src/app/components/main-navigation/main-navigation.component.spec.ts
@@ -1,13 +1,13 @@
-import { LayoutModule } from '@angular/cdk/layout';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatListModule } from '@angular/material/list';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatToolbarModule } from '@angular/material/toolbar';
+import {LayoutModule} from '@angular/cdk/layout';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatListModule} from '@angular/material/list';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatToolbarModule} from '@angular/material/toolbar';
 
-import { MainNavigationComponent } from './main-navigation.component';
+import {MainNavigationComponent} from './main-navigation.component';
 
 describe('MainNavigationComponent', () => {
   let component: MainNavigationComponent;
diff --git a/src/app/components/main-navigation/main-navigation.component.ts b/src/app/components/main-navigation/main-navigation.component.ts
index a3243a3..4e67c2b 100644
--- a/src/app/components/main-navigation/main-navigation.component.ts
+++ b/src/app/components/main-navigation/main-navigation.component.ts
@@ -1,14 +1,14 @@
-import { Component, OnInit, HostBinding  } from '@angular/core';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { DatasharingService } from '../../services/datasharing.service';
-import { RequestService } from '../../services/request/request.service';
-import { SettingsService } from '../../services/settings/settings.service';
-import { environment } from 'src/environments/environment';
-import { Levellist } from 'src/app/models/levellist';
-import { Http } from '@angular/http';
-import { Router } from '@angular/router';
-import { User } from 'src/app/models/user';
-import { OverlayContainer} from '@angular/cdk/overlay';
+import {Component, HostBinding, OnInit} from '@angular/core';
+import {BreakpointObserver} from '@angular/cdk/layout';
+import {DatasharingService} from '../../services/datasharing.service';
+import {RequestService} from '../../services/request/request.service';
+import {SettingsService} from '../../services/settings/settings.service';
+import {environment} from 'src/environments/environment';
+import {Levellist} from 'src/app/models/levellist';
+import {Http} from '@angular/http';
+import {Router} from '@angular/router';
+import {User} from 'src/app/models/user';
+import {OverlayContainer} from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-main-navigation',
@@ -27,6 +27,7 @@ export class MainNavigationComponent implements OnInit {
   ) {
     this.overlay = overlayContainer.getContainerElement();
   }
+
   loggedIn = false;
   userId: number;
   username: string;
@@ -41,18 +42,19 @@ export class MainNavigationComponent implements OnInit {
   overlay;
 
   navLinksLoggedIn = [
-    { path: '', label: 'Home' },
-    { path: this.profileUrl, label: 'Profile' },
-    { path: '/about', label: 'About' },
-    { path: '/imprint', label: 'Imprint' },
+    {path: '', label: 'Home'},
+    {path: this.profileUrl, label: 'Profile'},
+    {path: '/about', label: 'About'},
+    {path: '/imprint', label: 'Imprint'},
   ];
   navLinks = [
-    { path: '', label: 'Home' },
-    { path: '/about', label: 'About' },
-    { path: '/imprint', label: 'Imprint' },
+    {path: '', label: 'Home'},
+    {path: '/about', label: 'About'},
+    {path: '/imprint', label: 'Imprint'},
   ];
 
   @HostBinding('class') componentCssClass;
+
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
       this.user = user;
@@ -75,47 +77,52 @@ export class MainNavigationComponent implements OnInit {
 
   toggleTheme() {
     if (this.overlay.classList.contains('dark-theme')) {
-        this.overlay.classList.remove('dark-theme');
-        this.overlay.classList.add('light-theme');
-        this.onSetTheme('light-theme');
-        this.lighttheme = true;
-        this.settingsService.setDarkModeActive(false);
+      this.overlay.classList.remove('dark-theme');
+      this.overlay.classList.add('light-theme');
+      this.onSetTheme('light-theme');
+      this.lighttheme = true;
+      this.settingsService.setDarkModeActive(false);
     } else if (this.overlay.classList.contains('light-theme')) {
-        this.overlay.classList.remove('light-theme');
-        this.overlay.classList.add('dark-theme');
-        this.onSetTheme('dark-theme');
-        this.lighttheme = false;
-        this.settingsService.setDarkModeActive(true);
+      this.overlay.classList.remove('light-theme');
+      this.overlay.classList.add('dark-theme');
+      this.onSetTheme('dark-theme');
+      this.lighttheme = false;
+      this.settingsService.setDarkModeActive(true);
     } else {
-        this.overlay.classList.add('dark-theme');
-        this.onSetTheme('dark-theme');
-        this.lighttheme = false;
-        this.settingsService.setDarkModeActive(true);
+      this.overlay.classList.add('dark-theme');
+      this.onSetTheme('dark-theme');
+      this.lighttheme = false;
+      this.settingsService.setDarkModeActive(true);
     }
   }
 
   updateLinks() {
     this.navLinksLoggedIn = [
-      { path: '', label: 'Home' },
-      { path: this.profileUrl, label: 'Profile' },
-      { path: '/about', label: 'About' },
-      { path: '/imprint', label: 'Imprint' },
+      {path: '', label: 'Home'},
+      {path: this.profileUrl, label: 'Profile'},
+      {path: '/about', label: 'About'},
+      {path: '/imprint', label: 'Imprint'},
     ];
   }
+
   onSetTheme(theme) {
     this.overlayContainer.getContainerElement().classList.add(theme);
     this.componentCssClass = theme;
   }
+
   logout() {
     const url = environment.graphQLUrl;
 
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
-    const body = {query: `mutation {
+    const body = {
+      query: `mutation {
         logout
-      }`};
+      }`
+    };
     this.http.post(url, body).subscribe(response => {
-        console.log(response.text()); });
+      console.log(response.text());
+    });
     this.loggedIn = false;
     const user = new User();
     user.loggedIn = false;
diff --git a/src/app/components/profile/fileUpload/fileUpload.component.sass b/src/app/components/profile/fileUpload/fileUpload.component.sass
new file mode 100644
index 0000000..a515920
--- /dev/null
+++ b/src/app/components/profile/fileUpload/fileUpload.component.sass
@@ -0,0 +1,23 @@
+@import '../../../../styles/greenvironment-material-theme'
+
+.dialogFormField
+  width: 100%
+
+.confirmationButton
+  background-color: $primary-color
+
+.uploadDialogContent
+  overflow: hidden
+  text-align: center
+
+#inputPreview
+  max-width: 75%
+  max-height: 100%
+  width: auto
+  clip-path: circle()
+  mask-mode: luminance
+
+#inputPreviewWrapper
+  margin: auto
+  text-align: center
+  max-height: 512px
diff --git a/src/app/components/profile/fileUpload/fileUpload.component.ts b/src/app/components/profile/fileUpload/fileUpload.component.ts
new file mode 100644
index 0000000..b86767c
--- /dev/null
+++ b/src/app/components/profile/fileUpload/fileUpload.component.ts
@@ -0,0 +1,79 @@
+import {Component} from '@angular/core';
+import {MatDialogRef} from '@angular/material/dialog';
+import {SelfService} from '../../../services/selfservice/self.service';
+import {environment} from '../../../../environments/environment';
+import {BehaviorSubject} from 'rxjs';
+
+@Component({
+  selector: 'file-upload-dialog',
+  templateUrl: 'fileUploadDialog.component.html',
+  styleUrls: ['./fileUpload.component.sass'],
+})
+export class DialogFileUploadComponent {
+  public errorOccurred = false;
+  public uploading = false;
+  private errorMessage: string;
+  public profilePictureUrl: BehaviorSubject<string | null>;
+  private file;
+  public localFileUrl;
+
+  constructor(public dialogRef: MatDialogRef<DialogFileUploadComponent>, private selfService: SelfService) {
+    this.profilePictureUrl = new BehaviorSubject<string | null>(null);
+  }
+
+  /**
+   * Getter for the error message
+   */
+  getErrorMessage() {
+    return this.errorMessage;
+  }
+
+  /**
+   * Fired when the cancel button of the dialog is pressed
+   */
+  onCancelClicked() {
+    this.dialogRef.close();
+  }
+
+  /**
+   * Fired when the ok button was pressed
+   */
+  onOkClicked() {
+    this.errorOccurred = false;
+    this.uploading = true;
+    this.selfService.changeProfilePicture(this.file).subscribe((response) => {
+      this.uploading = false;
+      if (response.success) {
+        this.profilePictureUrl.next(environment.greenvironmentUrl + response.fileName);
+        this.dialogRef.close();
+      } else {
+        this.errorMessage = response.error;
+        this.errorOccurred = true;
+      }
+    }, (error) => {
+      this.uploading = false;
+      this.errorOccurred = true;
+      console.log(error);
+      if (error.error) {
+        this.errorMessage = error.error.error;
+      } else {
+        this.errorMessage = 'Failed to upload the profile picture.';
+      }
+    });
+  }
+
+  /**
+   * Fired when the input of the file select changes.
+   * @param event
+   */
+  onFileInputChange(event) {
+    this.errorOccurred = false;
+    this.errorMessage = '';
+    this.file = event.target.files[0];
+    const reader = new FileReader();
+    reader.onload = (e: any) => {
+      this.localFileUrl = e.target.result;
+    };
+    reader.readAsDataURL(this.file);
+  }
+}
diff --git a/src/app/components/profile/fileUpload/fileUploadDialog.component.html b/src/app/components/profile/fileUpload/fileUploadDialog.component.html
new file mode 100644
index 0000000..7edfd5c
--- /dev/null
+++ b/src/app/components/profile/fileUpload/fileUploadDialog.component.html
@@ -0,0 +1,16 @@
+<div id="file-upload-dialog">
+  <h1 mat-dialog-title align="center">Upload a new Profile picture!</h1>
+  <div class="uploadDialogContent" mat-dialog-content>
+    <input type="file" accept="image/*" (change)="onFileInputChange($event)" #name>
+    <div id="inputPreviewWrapper">
+      <h2 *ngIf="localFileUrl">Preview:</h2>
+      <img *ngIf="localFileUrl" id="inputPreview" [src]="localFileUrl"/>
+    </div>
+    <mat-progress-bar *ngIf="uploading" mode="indeterminate"></mat-progress-bar>
+  </div>
+  <mat-error *ngIf="errorOccurred">{{getErrorMessage()}}</mat-error>
+  <div mat-dialog-actions align="end">
+    <button mat-button (click)="onCancelClicked()">Cancel</button>
+    <button class="confirmationButton" mat-raised-button cdkFocusInitial (click)="onOkClicked()">Upload</button>
+  </div>
+</div>
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index cc5263c..7d3b3d0 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -1,97 +1,83 @@
 <div id="profile-page">
-    <div id="profilecontainer" *ngIf="!profileNotFound && !loading">
-        <!--on small screen-->
-        <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
-            <mat-toolbar-row>
-                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
-                    <img class="profile-picture" [src]="userProfile.profilePicture"/>  
-                    <mat-icon id="icon">camera_alt</mat-icon>
-                    <input #fileInput type="file" accept="image/*" (change)="onFileInput($event)" style="display:none;" />
-                </div>
-                <div *ngIf="!ownProfile">
-                    <img class="profile-picture" [src]="userProfile.profilePicture"/>
-                </div>
-                
-                <span id="username">{{userProfile.username}}</span>
-                <button mat-icon-button 
-                class="request-button" 
-                (click)="sendFriendRequest(userProfile)" 
+  <div id="profilecontainer" *ngIf="!profileNotFound && !loading">
+    <!--on small screen-->
+    <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
+      <mat-toolbar-row>
+        <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()">
+          <img class="profile-picture" [src]="userProfile.profilePicture"/>
+          <mat-icon id="icon">camera_alt</mat-icon>
+        </div>
+        <div *ngIf="!ownProfile">
+          <img class="profile-picture" [src]="userProfile.profilePicture"/>
+        </div>
+
+        <span id="username">{{userProfile.username}}</span>
+        <button mat-icon-button
+                class="request-button"
+                (click)="sendFriendRequest(userProfile)"
                 [disabled]="!userProfile.allowedToSendRequest">
-                    <mat-icon>person_add</mat-icon>
-                </button>
-            </mat-toolbar-row>
-            <mat-toolbar-row> 
-                <div class="info-box"> 
-                    <span id="handle">@{{userProfile.handle}}</span>
-                </div>  
-            </mat-toolbar-row>
-            <mat-toolbar-row>
-                <div>
-                    <span class="info">{{rankname}} ({{userProfile.points}} points)</span>
-                </div>
-            </mat-toolbar-row>
-            <mat-toolbar-row>
-                <div>
-                    <span class="info">{{userProfile.friendCount}} friends</span>
-                    <span class="info">{{userProfile.groupCount}} groups</span>
-                </div>
-            </mat-toolbar-row>
-            <mat-toolbar-row>
-                <div>
-                    <span class="info">joined on {{userProfile.joinedAt}}</span>
-                </div>
-            </mat-toolbar-row>
-        </mat-toolbar>
-        <!--on big screen-->
-        <mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
-            <mat-toolbar-row>
-                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
-                    <img class="profile-picture" [src]="userProfile.profilePicture"/>  
-                    <mat-icon id="icon">camera_alt</mat-icon>
-                    <input #fileInput type="file" accept="image/*" (change)="onFileInput($event)" style="display:none;" />
-                </div>
-                <div *ngIf="!ownProfile">
-                    <img class="profile-picture" [src]="userProfile.profilePicture"/>
-                </div>
-                <span id="username">{{userProfile.username}}</span>
-                <span id="handle">@{{userProfile.handle}}</span>
-                <button mat-icon-button 
-                    class="request-button" 
-                    (click)="sendFriendRequest(userProfile)" 
-                    [disabled]="!userProfile.allowedToSendRequest">
-                    <mat-icon>person_add</mat-icon>
-                </button>
-            </mat-toolbar-row>
-            <mat-toolbar-row>
-                <div class="info-box">
-                    <span class="info">{{rankname}} ({{userProfile.points}} points)</span>
-                    <span class="info">{{userProfile.friendCount}} friends</span>
-                    <span class="info">{{userProfile.groupCount}} groups</span>
-                    <span class="info">joined on {{userProfile.joinedAt}}</span>
-                </div>
-            </mat-toolbar-row>
-        </mat-toolbar>
-        <div id="postlist">
-            <feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>  
+          <mat-icon>person_add</mat-icon>
+        </button>
+      </mat-toolbar-row>
+      <mat-toolbar-row>
+        <div class="info-box">
+          <span id="handle">@{{userProfile.handle}}</span>
+        </div>
+      </mat-toolbar-row>
+      <mat-toolbar-row>
+        <div>
+          <span class="info">{{rankname}} ({{userProfile.points}} points)</span>
+        </div>
+      </mat-toolbar-row>
+      <mat-toolbar-row>
+        <div>
+          <span class="info">{{userProfile.friendCount}} friends</span>
+          <span class="info">{{userProfile.groupCount}} groups</span>
         </div>
-        <div id="profile">
-                
-                    <!--<table style="width:100%">
-                        <tr>
-                            <th>points </th>
-                            <th>action</th>
-                        </tr>
-                        <tr *ngFor= "let action of actionlist.actions">
-                            <td>{{action.points}}</td>
-                            <td>{{action.name}}</td>
-                        </tr>
-                    </table>-->
+      </mat-toolbar-row>
+      <mat-toolbar-row>
+        <div>
+          <span class="info">joined on {{userProfile.joinedAt}}</span>
+        </div>
+      </mat-toolbar-row>
+    </mat-toolbar>
+    <!--on big screen-->
+    <mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
+      <mat-toolbar-row>
+        <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()">
+          <img class="profile-picture" [src]="userProfile.profilePicture"/>
+          <mat-icon id="icon">camera_alt</mat-icon>
+        </div>
+        <div *ngIf="!ownProfile">
+          <img class="profile-picture" [src]="userProfile.profilePicture"/>
+        </div>
+        <span id="username">{{userProfile.username}}</span>
+        <span id="handle">@{{userProfile.handle}}</span>
+        <button mat-icon-button
+                class="request-button"
+                (click)="sendFriendRequest(userProfile)"
+                [disabled]="!userProfile.allowedToSendRequest">
+          <mat-icon>person_add</mat-icon>
+        </button>
+      </mat-toolbar-row>
+      <mat-toolbar-row>
+        <div class="info-box">
+          <span class="info">{{rankname}} ({{userProfile.points}} points)</span>
+          <span class="info">{{userProfile.friendCount}} friends</span>
+          <span class="info">{{userProfile.groupCount}} groups</span>
+          <span class="info">joined on {{userProfile.joinedAt}}</span>
         </div>
+      </mat-toolbar-row>
+    </mat-toolbar>
+    <div id="postlist">
+      <feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>
     </div>
-    <div id="profilecontainer" *ngIf="profileNotFound">
-        <h1>Profile not found :(</h1>
+    <div id="profile">
     </div>
-    <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
+  </div>
+  <div id="profilecontainer" *ngIf="profileNotFound">
+    <h1>Profile not found :(</h1>
+  </div>
+  <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
 </div>
 
-  
\ No newline at end of file
diff --git a/src/app/components/profile/profile.component.sass b/src/app/components/profile/profile.component.sass
index c6f8e7e..81986bd 100644
--- a/src/app/components/profile/profile.component.sass
+++ b/src/app/components/profile/profile.component.sass
@@ -8,7 +8,7 @@
   overflow: scroll
   overflow-x: hidden
 
-#profile 
+#profile
   padding: 2em
   max-width: 1200px
   margin: 0 auto
@@ -17,29 +17,37 @@
   margin: 0 auto
   width: 100%
   max-width: 690px
+
   .icon-box
     text-align: right
     width: 100%
+
 .request-button
   margin-top: 0.5em
   margin-bottom: 0.5em
   margin-left: auto
+
 #toolbar
   margin-top: 32px
+
   .mat-toolbar-row
     max-height: 40px
+
   .info-box
     font-size: 14px
     margin-left: calc(100px + 0.5em)
+
   .info
-    margin-right: 1em 
+    margin-right: 1em
     font-size: 14px
+
   #username
     margin: 0 0.5em
+
   #handle
     font-size: 14px
 
-#icon 
+#icon
   display: none
   position: absolute
   z-index: 11
@@ -52,28 +60,28 @@ $mat-card-header-size: 100px !default
   display: flex
   justify-content: center
   align-items: center
+
   &:hover
     .profile-picture
       filter: brightness(70%)
+
     #icon
       display: block
       filter: none
-    // Makes `<img>` tags behave like `background-size: cover`. Not supported
-    // in IE, but we're using it as a progressive enhancement.
+// Makes `<img>` tags behave like `background-size: cover`. Not supported
+// in IE, but we're using it as a progressive enhancement.
 
 .profile-picture
-    height: $mat-card-header-size
-    width: $mat-card-header-size
-    border-radius: 50%
-    flex-shrink: 0
-    background-size: cover
-    transition-duration: 0.5s
-    z-index: 10
-    object-fit: cover
-
-
+  height: $mat-card-header-size
+  width: $mat-card-header-size
+  border-radius: 50%
+  flex-shrink: 0
+  background-size: cover
+  transition-duration: 0.5s
+  z-index: 10
+  object-fit: cover
 
 #postlist
   margin: 0.5em auto
   padding: 0
-  max-width: 690px
\ No newline at end of file
+  max-width: 690px
diff --git a/src/app/components/profile/profile.component.spec.ts b/src/app/components/profile/profile.component.spec.ts
index 692b234..f713f69 100644
--- a/src/app/components/profile/profile.component.spec.ts
+++ b/src/app/components/profile/profile.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ProfileComponent } from './profile.component';
+import {ProfileComponent} from './profile.component';
 
 describe('ProfileComponent', () => {
   let component: ProfileComponent;
@@ -8,9 +8,9 @@ describe('ProfileComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProfileComponent ]
+      declarations: [ProfileComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index b1a9aba..41b8e57 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -1,21 +1,21 @@
-import { Component, OnInit} from '@angular/core';
-import {Router, NavigationEnd} from '@angular/router';
-import { User } from 'src/app/models/user';
-import { Levellist } from 'src/app/models/levellist';
-import { RequestService } from 'src/app/services/request/request.service';
-import { DatasharingService } from '../../services/datasharing.service';
-import { ProfileService } from 'src/app/services/profile/profile.service';
-import { HttpClient } from '@angular/common/http';
-import { environment } from 'src/environments/environment';
+import {Component, OnInit} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+import {User} from 'src/app/models/user';
+import {Levellist} from 'src/app/models/levellist';
+import {RequestService} from 'src/app/services/request/request.service';
+import {DatasharingService} from '../../services/datasharing.service';
+import {ProfileService} from 'src/app/services/profile/profile.service';
+import {HttpClient} from '@angular/common/http';
 import {MatSnackBar} from '@angular/material/snack-bar';
-import { reduce } from 'rxjs/operators';
+import {SelfService} from '../../services/selfservice/self.service';
+import {MatDialog} from '@angular/material';
+import {DialogFileUploadComponent} from './fileUpload/fileUpload.component';
 
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
   styleUrls: ['./profile.component.sass']
 })
-
 export class ProfileComponent implements OnInit {
   levellist: Levellist = new Levellist();
   ownProfile = false;
@@ -33,17 +33,19 @@ export class ProfileComponent implements OnInit {
     private router: Router,
     private requestService: RequestService,
     private data: DatasharingService,
-    private profileService: ProfileService) {
-      router.events.forEach((event) => {
-        // check if the user is on the profile page (of userY) and routes to the page of userY (e.g. his own page)
-        if (event instanceof NavigationEnd) {
-          const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
-          if (this.id !== possibleID && this.id && this.router.url.includes('profile/')) {
-            // reload the user
-            this.ngOnInit();
-          }
+    private profileService: ProfileService,
+    private selfService: SelfService,
+    public dialog: MatDialog) {
+    router.events.forEach((event) => {
+      // check if the user is on the profile page (of userY) and routes to the page of userY (e.g. his own page)
+      if (event instanceof NavigationEnd) {
+        const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
+        if (this.id !== possibleID && this.id && this.router.url.includes('profile/')) {
+          // reload the user
+          this.ngOnInit();
         }
-      });
+      }
+    });
   }
 
   ngOnInit() {
@@ -54,36 +56,35 @@ export class ProfileComponent implements OnInit {
     });
     this.profileService.getUserData(this.id);
     this.profileService.proflile.subscribe(response => {
-        if (response) {
-          this.userProfile = response;
-          // tslint:disable-next-line:max-line-length
-          this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(this.userProfile.userID, this.self);
-          if (this.userProfile.userID === this.self.userID) {
-            this.ownProfile = true;
-          } else {this.ownProfile = false; }
-          this.rankname = this.levellist.getLevelName(this.userProfile.level);
-        } else { this.profileNotFound = true; }
-        this.loading = false;
-      });
+      if (response) {
+        this.userProfile = response;
+        // tslint:disable-next-line:max-line-length
+        this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(this.userProfile.userID, this.self);
+        this.ownProfile = this.userProfile.userID === this.self.userID;
+        this.rankname = this.levellist.getLevelName(this.userProfile.level);
+      } else {
+        this.profileNotFound = true;
+      }
+      this.loading = false;
+    });
   }
 
   public sendFriendRequest(user: User) {
     user.allowedToSendRequest = false;
     this.requestService.sendFriendRequest(user);
   }
-  onFileInput(event) {
-    console.log(event.target.files[0]);
-    const formData: any = new FormData();
-    formData.append('profilePicture', event.target.files[0]);
 
-    this.http.post(environment.greenvironmentUrl + '/upload', formData).subscribe(
-     (response: any) => {
-      this.userProfile.profilePicture = environment.greenvironmentUrl + response.fileName;
-    },
-    (error) => {
-      this._snackBar.open('failed to upload picture', 'okay', {
-      duration: 3000
-      });
+  /**
+   * Opens the file upload dialog
+   */
+  openFileUploadDialog() {
+    const dialogRef = this.dialog.open(DialogFileUploadComponent, {
+      width: '400px'
+    });
+    dialogRef.componentInstance.profilePictureUrl.subscribe((profilePictureUrl) => {
+      if (profilePictureUrl) {
+        this.userProfile.profilePicture = profilePictureUrl;
+      }
     });
   }
 }
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html
index 730401b..fb5b370 100644
--- a/src/app/components/register/register.component.html
+++ b/src/app/components/register/register.component.html
@@ -1,33 +1,38 @@
 <div id="register">
-    <mat-card style="text-align: center;" >   
-        <mat-card-title>
-          Register
-        </mat-card-title>   
-        <mat-card-content>
-    <div class="example-container" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
+  <mat-card style="text-align: center;">
+    <mat-card-title>
+      Register
+    </mat-card-title>
+    <mat-card-content>
+      <div class="example-container"
+           (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
         <mat-error *ngIf="errorOccurred">{{errorMessage}}</mat-error>
         <mat-form-field>
-            <input matInput placeholder="Enter your email" #email  >
+          <input matInput placeholder="Enter your email" #email>
         </mat-form-field>
         <mat-form-field>
-            <input matInput placeholder="Enter your username" #username  >
+          <input matInput placeholder="Enter your username" #username>
         </mat-form-field>
         <mat-form-field>
           <input matInput placeholder="Enter your password" [type]="hide1 ? 'password' : 'text'" #password>
-          <button mat-icon-button matSuffix (click)="hide1 = !hide1" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide1">
-          <mat-icon>{{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon>
+          <button mat-icon-button matSuffix (click)="hide1 = !hide1" [attr.aria-label]="'Hide password'"
+                  [attr.aria-pressed]="hide1">
+            <mat-icon>{{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon>
           </button>
         </mat-form-field>
         <mat-form-field>
           <input matInput placeholder="Repeat your password" [type]="hide2 ? 'password' : 'text'" #repeatpassword>
-          <button mat-icon-button matSuffix (click)="hide2 = !hide2" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide2">
-          <mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
+          <button mat-icon-button matSuffix (click)="hide2 = !hide2" [attr.aria-label]="'Hide password'"
+                  [attr.aria-pressed]="hide2">
+            <mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
           </button>
         </mat-form-field>
       </div>
-      <button mat-raised-button color="primary" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button>
+      <button mat-raised-button color="primary"
+              (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register
+      </button>
       <p>You are already part of greenvironment?</p>
       <a mat-stroked-button color="primary" routerLink="/login">Login</a>
     </mat-card-content>
   </mat-card>
-    </div>
+</div>
diff --git a/src/app/components/register/register.component.sass b/src/app/components/register/register.component.sass
index 2daa683..96133b0 100644
--- a/src/app/components/register/register.component.sass
+++ b/src/app/components/register/register.component.sass
@@ -6,21 +6,21 @@
   max-width: 35em
   margin: 0 auto
 
-.example-container 
+.example-container
   display: flex
   flex-direction: column
 
-.example-container > * 
+.example-container > *
   width: 100%
 
-.example-right-align 
+.example-right-align
   text-align: right
 
 input.example-right-align::-webkit-outer-spin-button,
-input.example-right-align::-webkit-inner-spin-button 
+input.example-right-align::-webkit-inner-spin-button
   display: none
 
-input.example-right-align 
+input.example-right-align
   -moz-appearance: textfield
 
 .mat-error
@@ -32,6 +32,6 @@ input.example-right-align
 
 .mat-button
   margin: 0.25em
-  
+
 .mat-stroked-button
-  width: 100%
\ No newline at end of file
+  width: 100%
diff --git a/src/app/components/register/register.component.spec.ts b/src/app/components/register/register.component.spec.ts
index 6c19551..782d69a 100644
--- a/src/app/components/register/register.component.spec.ts
+++ b/src/app/components/register/register.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { RegisterComponent } from './register.component';
+import {RegisterComponent} from './register.component';
 
 describe('RegisterComponent', () => {
   let component: RegisterComponent;
@@ -8,9 +8,9 @@ describe('RegisterComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ RegisterComponent ]
+      declarations: [RegisterComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/register/register.component.ts b/src/app/components/register/register.component.ts
index bc3c815..abd544e 100644
--- a/src/app/components/register/register.component.ts
+++ b/src/app/components/register/register.component.ts
@@ -1,9 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {RegisterService} from '../../services/register/register.service';
 import {Registration} from '../../models/registration';
-import {Router} from '@angular/router';
-import {Md5} from 'ts-md5/dist/md5';
-import { parseWebDriverCommand } from 'blocking-proxy/built/lib/webdriver_commands';
 import * as sha512 from 'js-sha512';
 
 @Component({
@@ -28,7 +25,7 @@ export class RegisterComponent implements OnInit {
     this.errorMessage = error.errors[0].message;
   }
 
-  onClickSubmit(pUsername: string, pEmail: string, pPasswordHash: string, pPasswordHashRepeat: string ) {
+  onClickSubmit(pUsername: string, pEmail: string, pPasswordHash: string, pPasswordHashRepeat: string) {
     this.errorOccurred = false;
     this.errorMessage = ' ';
     if (this.passwordSame(pPasswordHash, pPasswordHashRepeat)) {
@@ -50,7 +47,8 @@ export class RegisterComponent implements OnInit {
     }
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 
 }
 
diff --git a/src/app/components/search/search.component.html b/src/app/components/search/search.component.html
index 055ca2e..3b600fe 100644
--- a/src/app/components/search/search.component.html
+++ b/src/app/components/search/search.component.html
@@ -1,13 +1,13 @@
 <div id="search">
   <mat-toolbar>
     <mat-form-field id="input"
-    floatLabel="never" >
+                    floatLabel="never">
       <input matInput #searchWord
-      placeholder="search"
-      [ngModel]="searchWord.value"
-      (ngModelChange)="search(searchWord.value)">
+             placeholder="search"
+             [ngModel]="searchWord.value"
+             (ngModelChange)="search(searchWord.value)">
       <button mat-button matSuffix mat-icon-button>
-        <mat-icon>search </mat-icon>
+        <mat-icon>search</mat-icon>
       </button>
     </mat-form-field>
   </mat-toolbar>
@@ -23,23 +23,26 @@
     <mat-expansion-panel *ngIf="foundGroups.length > 0" [expanded]="foundUsers.length < 1">
       <mat-expansion-panel-header>
         <mat-panel-title>
-          Groups  
+          Groups
         </mat-panel-title>
       </mat-expansion-panel-header>
       <div class="list">
-        <mat-card class="card" *ngFor="let group of foundGroups" 
-        [class.selected]="group === selectedGroup"
-        tabindex="0">
+        <mat-card class="card" *ngFor="let group of foundGroups"
+                  [class.selected]="group === selectedGroup"
+                  tabindex="0">
           <mat-card-header>
             <div mat-card-avatar class="profile-picture" (click)="showGroupProfile(group)"></div>
             <mat-card-title class="pointer" (click)="showGroupProfile(group)">{{group.name}}</mat-card-title>
             <div class="icon-box">
-              <button mat-icon-button class="request-button" (click)="joinGroup(group)" [disabled]="!group.allowedToJoinGroup"><mat-icon>group_add</mat-icon></button>
+              <button mat-icon-button class="request-button" (click)="joinGroup(group)"
+                      [disabled]="!group.allowedToJoinGroup">
+                <mat-icon>group_add</mat-icon>
+              </button>
             </div>
           </mat-card-header>
         </mat-card>
       </div>
     </mat-expansion-panel>
-  </mat-accordion> 
+  </mat-accordion>
   <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/components/search/search.component.sass b/src/app/components/search/search.component.sass
index 365e59b..fd7da37 100644
--- a/src/app/components/search/search.component.sass
+++ b/src/app/components/search/search.component.sass
@@ -22,16 +22,20 @@
   margin-top: 0.5em
   outline: none
   user-select: none
+
   ::ng-deep .mat-card-header-text
     width: 1000%
     margin: 0
     margin-left: 16px
+
   .mat-card-subtitle
     margin: 0
     word-break: break-all
+
   .mat-card-title
     margin: 0
     word-break: break-all
+
   .request-button
     margin-top: 0.5em
     margin-bottom: 0.5em
@@ -39,6 +43,7 @@
 .profile-picture
   background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
   background-size: cover
+
 .profile-picture:hover
   cursor: pointer
 
@@ -51,6 +56,7 @@
 
 ::ng-deep .mat-expansion-panel
   background: #e6e6e6
+
 ::ng-deep.dark-theme .mat-expansion-panel
   background: #121212
 
diff --git a/src/app/components/search/search.component.spec.ts b/src/app/components/search/search.component.spec.ts
index 101d71d..aa4ef23 100644
--- a/src/app/components/search/search.component.spec.ts
+++ b/src/app/components/search/search.component.spec.ts
@@ -1,5 +1,5 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { SearchComponent } from './search.component';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {SearchComponent} from './search.component';
 
 describe('ChatComponent', () => {
   let component: SearchComponent;
@@ -7,9 +7,9 @@ describe('ChatComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SearchComponent ]
+      declarations: [SearchComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/search/search.component.ts b/src/app/components/search/search.component.ts
index dd87acc..732371e 100644
--- a/src/app/components/search/search.component.ts
+++ b/src/app/components/search/search.component.ts
@@ -1,12 +1,10 @@
-import { Component, OnInit} from '@angular/core';
-import { SearchService } from 'src/app/services/search/search.service';
-import { RequestService } from 'src/app/services/request/request.service';
-import {Headers, Http} from '@angular/http';
-import { User } from 'src/app/models/user';
-import {environment} from 'src/environments/environment';
-import { Router } from '@angular/router';
-import { DatasharingService } from '../../services/datasharing.service';
-import { GroupInfo } from 'src/app/models/groupinfo';
+import {Component, OnInit} from '@angular/core';
+import {SearchService} from 'src/app/services/search/search.service';
+import {RequestService} from 'src/app/services/request/request.service';
+import {User} from 'src/app/models/user';
+import {Router} from '@angular/router';
+import {DatasharingService} from '../../services/datasharing.service';
+import {GroupInfo} from 'src/app/models/groupinfo';
 
 @Component({
   selector: 'home-search',
@@ -25,7 +23,9 @@ export class SearchComponent implements OnInit {
     private searchService: SearchService,
     private requestService: RequestService,
     private router: Router,
-    private data: DatasharingService) { }
+    private data: DatasharingService) {
+  }
+
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
       this.user = user;
diff --git a/src/app/components/social/friends/friends.component.html b/src/app/components/social/friends/friends.component.html
index 9a36969..6347cc4 100644
--- a/src/app/components/social/friends/friends.component.html
+++ b/src/app/components/social/friends/friends.component.html
@@ -3,16 +3,16 @@
 </mat-toolbar>
 
 <div id="friendlist">
-    <mat-card class="friend-card" *ngFor="let friend of user.friends" 
-    [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"
-    tabindex="0"
-    matRipple>
-      <mat-card-header>
-        <div mat-card-avatar>
-          <img class="profile-picture" [src]="friend.profilePicture"/>  
-        </div>
-        <mat-card-title>{{friend.name}}</mat-card-title>
-        <mat-card-subtitle>{{friend.rankname}}</mat-card-subtitle>
-      </mat-card-header>
-    </mat-card>
+  <mat-card class="friend-card" *ngFor="let friend of user.friends"
+            [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"
+            tabindex="0"
+            matRipple>
+    <mat-card-header>
+      <div mat-card-avatar>
+        <img class="profile-picture" [src]="friend.profilePicture"/>
+      </div>
+      <mat-card-title>{{friend.name}}</mat-card-title>
+      <mat-card-subtitle>{{friend.rankname}}</mat-card-subtitle>
+    </mat-card-header>
+  </mat-card>
 </div>
diff --git a/src/app/components/social/friends/friends.component.sass b/src/app/components/social/friends/friends.component.sass
index 23b0fc0..10919ea 100644
--- a/src/app/components/social/friends/friends.component.sass
+++ b/src/app/components/social/friends/friends.component.sass
@@ -10,21 +10,23 @@
   width: 100%
   margin-top: 0.5em
   cursor: pointer
+
   ::ng-deep .mat-card-header-text
     margin: 0 24px
+
   .mat-card-subtitle
     margin: 0
-  
+
 $mat-card-header-size: 52px !default
 .profile-picture
-    height: $mat-card-header-size
-    width: $mat-card-header-size
-    border-radius: 50%
-    flex-shrink: 0
-    background-size: cover
-    transition-duration: 0.5s
-    z-index: 10
-    object-fit: cover
+  height: $mat-card-header-size
+  width: $mat-card-header-size
+  border-radius: 50%
+  flex-shrink: 0
+  background-size: cover
+  transition-duration: 0.5s
+  z-index: 10
+  object-fit: cover
 
 
 #button-box
@@ -32,4 +34,4 @@ $mat-card-header-size: 52px !default
   width: 100%
 
 .mat-toolbar
-  height: 40px
\ No newline at end of file
+  height: 40px
diff --git a/src/app/components/social/friends/friends.component.spec.ts b/src/app/components/social/friends/friends.component.spec.ts
index c11e515..679ba11 100644
--- a/src/app/components/social/friends/friends.component.spec.ts
+++ b/src/app/components/social/friends/friends.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { FriendsComponent } from './friends.component';
+import {FriendsComponent} from './friends.component';
 
 describe('FriendsComponent', () => {
   let component: FriendsComponent;
@@ -8,9 +8,9 @@ describe('FriendsComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FriendsComponent ]
+      declarations: [FriendsComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/social/friends/friends.component.ts b/src/app/components/social/friends/friends.component.ts
index cf2b0e4..6ef08f0 100644
--- a/src/app/components/social/friends/friends.component.ts
+++ b/src/app/components/social/friends/friends.component.ts
@@ -1,8 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import { DatasharingService } from 'src/app/services/datasharing.service';
-import { FriendInfo } from 'src/app/models/friendinfo';
-import { Router } from '@angular/router';
-import { User } from 'src/app/models/user';
+import {Component, OnInit} from '@angular/core';
+import {DatasharingService} from 'src/app/services/datasharing.service';
+import {FriendInfo} from 'src/app/models/friendinfo';
+import {Router} from '@angular/router';
+import {User} from 'src/app/models/user';
 
 @Component({
   selector: 'social-friends',
@@ -11,11 +11,14 @@ import { User } from 'src/app/models/user';
 })
 export class FriendsComponent implements OnInit {
   user: User;
-  constructor(private data: DatasharingService, private router: Router) { }
+
+  constructor(private data: DatasharingService, private router: Router) {
+  }
 
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
-    this.user = user; });
+      this.user = user;
+    });
   }
 
   public showFriendProfile(pFriend: FriendInfo) {
diff --git a/src/app/components/social/groups/groups.component.html b/src/app/components/social/groups/groups.component.html
index 286c13d..a097d8e 100644
--- a/src/app/components/social/groups/groups.component.html
+++ b/src/app/components/social/groups/groups.component.html
@@ -1,16 +1,19 @@
 <mat-toolbar>
   <span>Groups</span>
   <div id="button-box">
-    <button mat-icon-button (click)="openDialog()" matTooltip="create group" matTooltipPosition="left" matTooltipShowDelay="500"><mat-icon>group_add</mat-icon></button>
+    <button mat-icon-button (click)="openDialog()" matTooltip="create group" matTooltipPosition="left"
+            matTooltipShowDelay="500">
+      <mat-icon>group_add</mat-icon>
+    </button>
   </div>
 </mat-toolbar>
 
 <div id="grouplist">
-    <mat-card class="group-card" *ngFor="let group of user.groups" 
-    [class.selected]="group === selectedGroup" (click)="showGroupProfile(group)">
-      <mat-card-header>
-        <div mat-card-avatar class="group-picture"></div>
-        <mat-card-title>{{group.name}}</mat-card-title>
-      </mat-card-header>
-    </mat-card>
+  <mat-card class="group-card" *ngFor="let group of user.groups"
+            [class.selected]="group === selectedGroup" (click)="showGroupProfile(group)">
+    <mat-card-header>
+      <div mat-card-avatar class="group-picture"></div>
+      <mat-card-title>{{group.name}}</mat-card-title>
+    </mat-card-header>
+  </mat-card>
 </div>
diff --git a/src/app/components/social/groups/groups.component.sass b/src/app/components/social/groups/groups.component.sass
index 16ab88d..5a10cc5 100644
--- a/src/app/components/social/groups/groups.component.sass
+++ b/src/app/components/social/groups/groups.component.sass
@@ -10,6 +10,7 @@
   width: 100%
   margin-top: 0.5em
   cursor: pointer
+
   .mat-card-subtitle
     margin: 0
 
@@ -22,4 +23,4 @@
   width: 100%
 
 .mat-toolbar
-  height: 40px
\ No newline at end of file
+  height: 40px
diff --git a/src/app/components/social/groups/groups.component.spec.ts b/src/app/components/social/groups/groups.component.spec.ts
index b34cad1..ff768be 100644
--- a/src/app/components/social/groups/groups.component.spec.ts
+++ b/src/app/components/social/groups/groups.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { GroupsComponent } from './groups.component';
+import {GroupsComponent} from './groups.component';
 
 describe('GroupsComponent', () => {
   let component: GroupsComponent;
@@ -8,9 +8,9 @@ describe('GroupsComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ GroupsComponent ]
+      declarations: [GroupsComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/social/groups/groups.component.ts b/src/app/components/social/groups/groups.component.ts
index 56a481f..4448a75 100644
--- a/src/app/components/social/groups/groups.component.ts
+++ b/src/app/components/social/groups/groups.component.ts
@@ -5,8 +5,6 @@ import {SocialService} from 'src/app/services/social/social.service';
 import {User} from 'src/app/models/user';
 import {DatasharingService} from 'src/app/services/datasharing.service';
 import {Router} from '@angular/router';
-import {GraphQLError} from 'graphql';
-import {IGraphqlError} from '../../../models/interfaces/IGraphqlError';
 import {IErrorResponse} from '../../../models/interfaces/IErrorResponse';
 
 // DIALOG COMPONENT to create groups
diff --git a/src/app/components/social/social.component.html b/src/app/components/social/social.component.html
index 493cc55..31f5c5f 100644
--- a/src/app/components/social/social.component.html
+++ b/src/app/components/social/social.component.html
@@ -1,25 +1,25 @@
 <div id="content" fxShow="true" fxHide.lt-md="true">
-    <mat-tab-group selectedIndex="0" mat-stretch-tabs id="tabs">
-        <mat-tab>    
-            <ng-template mat-tab-label>
-                <mat-icon>people</mat-icon>
-            </ng-template> 
-            <div id="friendscontainer">
-                <social-friends></social-friends>
-            </div>
-            <social-groups id="groupscontainer"></social-groups>
-        </mat-tab>
-        <mat-tab>    
-            <ng-template mat-tab-label>
-                <mat-icon>search</mat-icon>
-            </ng-template> 
-            <home-search class="tab-content"></home-search>
-        </mat-tab>
-    </mat-tab-group>
+  <mat-tab-group selectedIndex="0" mat-stretch-tabs id="tabs">
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <mat-icon>people</mat-icon>
+      </ng-template>
+      <div id="friendscontainer">
+        <social-friends></social-friends>
+      </div>
+      <social-groups id="groupscontainer"></social-groups>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <mat-icon>search</mat-icon>
+      </ng-template>
+      <home-search class="tab-content"></home-search>
+    </mat-tab>
+  </mat-tab-group>
 </div>
 <div fxShow="true" fxHide.gt-sm="true">
-    <social-friends id="friendscontainer"></social-friends>
-    <social-groups id="groupscontainer"></social-groups>
+  <social-friends id="friendscontainer"></social-friends>
+  <social-groups id="groupscontainer"></social-groups>
 </div>
 
 
diff --git a/src/app/components/social/social.component.spec.ts b/src/app/components/social/social.component.spec.ts
index 8f1a812..2ffdd1e 100644
--- a/src/app/components/social/social.component.spec.ts
+++ b/src/app/components/social/social.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { SocialComponent } from './social.component';
+import {SocialComponent} from './social.component';
 
 describe('SocialComponent', () => {
   let component: SocialComponent;
@@ -8,9 +8,9 @@ describe('SocialComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SocialComponent ]
+      declarations: [SocialComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/social/social.component.ts b/src/app/components/social/social.component.ts
index 88f8495..fc5ce33 100644
--- a/src/app/components/social/social.component.ts
+++ b/src/app/components/social/social.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'home-social',
@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SocialComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit() {
   }
diff --git a/src/app/components/userlist/userlist.component.html b/src/app/components/userlist/userlist.component.html
index 1e64bd5..9db6ec0 100644
--- a/src/app/components/userlist/userlist.component.html
+++ b/src/app/components/userlist/userlist.component.html
@@ -1,12 +1,15 @@
-  <mat-card class="card" *ngFor = "let user of userList" [class.selected]="user === selectedUser" tabindex="0">
-    <mat-card-header>
-      <div mat-card-avatar>
-        <img class="profile-picture" [src]="user.profilePicture"/>  
-      </div>
-      <mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
-      <mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
-      <div class="icon-box">
-        <button mat-icon-button class="request-button" (click)="sendFriendRequest(user)" [disabled]="!user.allowedToSendRequest"><mat-icon>person_add</mat-icon></button>
-      </div>
-    </mat-card-header>
-  </mat-card>
+<mat-card class="card" *ngFor="let user of userList" [class.selected]="user === selectedUser" tabindex="0">
+  <mat-card-header>
+    <div mat-card-avatar>
+      <img class="profile-picture" [src]="user.profilePicture"/>
+    </div>
+    <mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
+    <mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
+    <div class="icon-box">
+      <button mat-icon-button class="request-button" (click)="sendFriendRequest(user)"
+              [disabled]="!user.allowedToSendRequest">
+        <mat-icon>person_add</mat-icon>
+      </button>
+    </div>
+  </mat-card-header>
+</mat-card>
diff --git a/src/app/components/userlist/userlist.component.sass b/src/app/components/userlist/userlist.component.sass
index 24bb128..c7d258a 100644
--- a/src/app/components/userlist/userlist.component.sass
+++ b/src/app/components/userlist/userlist.component.sass
@@ -7,15 +7,19 @@
   margin-top: 0.5em
   outline: none
   user-select: none
+
   ::ng-deep .mat-card-header-text
     width: 1000%
     margin: auto 0 auto 24px
+
   .mat-card-subtitle
     margin: 0
     word-break: break-all
+
   .mat-card-title
     margin: 0
     word-break: break-all
+
   .request-button
     margin-top: 0.5em
     margin-bottom: 0.5em
@@ -29,11 +33,11 @@
 
 $mat-card-header-size: 54px !default
 .profile-picture
-    height: $mat-card-header-size
-    width: $mat-card-header-size
-    border-radius: 50%
-    flex-shrink: 0
-    background-size: cover
-    transition-duration: 0.5s
-    z-index: 10
-    object-fit: cover
+  height: $mat-card-header-size
+  width: $mat-card-header-size
+  border-radius: 50%
+  flex-shrink: 0
+  background-size: cover
+  transition-duration: 0.5s
+  z-index: 10
+  object-fit: cover
diff --git a/src/app/components/userlist/userlist.component.spec.ts b/src/app/components/userlist/userlist.component.spec.ts
index 2977612..fe7b4b8 100644
--- a/src/app/components/userlist/userlist.component.spec.ts
+++ b/src/app/components/userlist/userlist.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { UserlistComponent } from './userlist.component';
+import {UserlistComponent} from './userlist.component';
 
 describe('UserlistComponent', () => {
   let component: UserlistComponent;
@@ -8,9 +8,9 @@ describe('UserlistComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ UserlistComponent ]
+      declarations: [UserlistComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/components/userlist/userlist.component.ts b/src/app/components/userlist/userlist.component.ts
index 937131b..b76ec91 100644
--- a/src/app/components/userlist/userlist.component.ts
+++ b/src/app/components/userlist/userlist.component.ts
@@ -1,7 +1,7 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { User } from 'src/app/models/user';
-import { RequestService } from 'src/app/services/request/request.service';
-import { Router } from '@angular/router';
+import {Component, Input, OnInit} from '@angular/core';
+import {User} from 'src/app/models/user';
+import {RequestService} from 'src/app/services/request/request.service';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'user-list',
@@ -13,7 +13,8 @@ export class UserlistComponent implements OnInit {
   @Input() userList: Array<User>;
   selectedUser: User;
 
-  constructor(private requestService: RequestService, private router: Router) { }
+  constructor(private requestService: RequestService, private router: Router) {
+  }
 
   ngOnInit() {
   }
diff --git a/src/app/graphql.module.ts b/src/app/graphql.module.ts
index 24eaacf..113f535 100644
--- a/src/app/graphql.module.ts
+++ b/src/app/graphql.module.ts
@@ -1,9 +1,10 @@
 import {NgModule} from '@angular/core';
-import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
-import {HttpLinkModule, HttpLink} from 'apollo-angular-link-http';
+import {APOLLO_OPTIONS, ApolloModule} from 'apollo-angular';
+import {HttpLink, HttpLinkModule} from 'apollo-angular-link-http';
 import {InMemoryCache} from 'apollo-cache-inmemory';
 
 const uri = 'https://o5x5jzoo7z.sse.codesandbox.io/graphql';
+
 // 'https://greenvironment.net/graphql:443'; // <-- add the URL of the GraphQL server here
 export function createApollo(httpLink: HttpLink) {
   return {
@@ -22,4 +23,5 @@ export function createApollo(httpLink: HttpLink) {
     },
   ],
 })
-export class GraphQLModule {}
+export class GraphQLModule {
+}
diff --git a/src/app/models/activity.ts b/src/app/models/activity.ts
index 9751b0e..46bdd68 100644
--- a/src/app/models/activity.ts
+++ b/src/app/models/activity.ts
@@ -1,4 +1,3 @@
-
 export class Activity {
   id: number;
   name: string;
@@ -14,5 +13,5 @@ export class Activity {
 }
 
 export class Activitylist {
-  Actions: Activity[] = new Array();
+  Actions: Activity[] = [];
 }
diff --git a/src/app/models/author.ts b/src/app/models/author.ts
index cc5f07a..0f80434 100644
--- a/src/app/models/author.ts
+++ b/src/app/models/author.ts
@@ -1,13 +1,13 @@
 export class Author {
-    id: number;
-    name: string;
-    handle: string;
-    profilePicture: string;
+  id: number;
+  name: string;
+  handle: string;
+  profilePicture: string;
 
-    constructor(pId: number, pName: string, pHandle: string, pic: string) {
-        this.id = pId;
-        this.name = pName;
-        this.handle = pHandle;
-        this.profilePicture = pic;
-    }
+  constructor(pId: number, pName: string, pHandle: string, pic: string) {
+    this.id = pId;
+    this.name = pName;
+    this.handle = pHandle;
+    this.profilePicture = pic;
+  }
 }
diff --git a/src/app/models/chat.ts b/src/app/models/chat.ts
index b35ed7c..2f4cc12 100644
--- a/src/app/models/chat.ts
+++ b/src/app/models/chat.ts
@@ -1,16 +1,16 @@
-import { Chatmessage } from './chatmessage';
+import {Chatmessage} from './chatmessage';
 
 export class Chat {
-    id: number;
-    memberID: number;
-    memberName: string;
-    messages: Array<Chatmessage>;
+  id: number;
+  memberID: number;
+  memberName: string;
+  messages: Array<Chatmessage>;
 
 
-    constructor(pId: number, pMemberID: number, pMemberName: string, pMessages: Array<Chatmessage>) {
-        this.id = pId;
-        this.memberID = pMemberID;
-        this.memberName = pMemberName;
-        this.messages = pMessages;
-    }
+  constructor(pId: number, pMemberID: number, pMemberName: string, pMessages: Array<Chatmessage>) {
+    this.id = pId;
+    this.memberID = pMemberID;
+    this.memberName = pMemberName;
+    this.messages = pMessages;
+  }
 }
diff --git a/src/app/models/chatinfo.ts b/src/app/models/chatinfo.ts
index 89a13eb..2076af2 100644
--- a/src/app/models/chatinfo.ts
+++ b/src/app/models/chatinfo.ts
@@ -1,9 +1,9 @@
 export class Chatinfo {
-    id: string;
-    date: string;
+  id: string;
+  date: string;
 
-    constructor(pId: string, pDate: string) {
-        this.id = pId;
-        this.date = pDate;
-    }
+  constructor(pId: string, pDate: string) {
+    this.id = pId;
+    this.date = pDate;
+  }
 }
diff --git a/src/app/models/chatmessage.ts b/src/app/models/chatmessage.ts
index 291a840..8ae77ab 100644
--- a/src/app/models/chatmessage.ts
+++ b/src/app/models/chatmessage.ts
@@ -1,11 +1,11 @@
 export class Chatmessage {
-    content: string;
-    date: string;
-    myself: boolean;
+  content: string;
+  date: string;
+  myself: boolean;
 
-    constructor(pContent: string, pDate: string, pMyself: boolean) {
-        this.content = pContent;
-        this.date = pDate;
-        this.myself = pMyself;
-    }
+  constructor(pContent: string, pDate: string, pMyself: boolean) {
+    this.content = pContent;
+    this.date = pDate;
+    this.myself = pMyself;
+  }
 }
diff --git a/src/app/models/document.ts b/src/app/models/document.ts
index 4f6e928..cd3b6a1 100644
--- a/src/app/models/document.ts
+++ b/src/app/models/document.ts
@@ -1,4 +1,4 @@
 export class Document {
-    id: string;
-    doc: string;
+  id: string;
+  doc: string;
 }
diff --git a/src/app/models/event.ts b/src/app/models/event.ts
index d2e2804..054b9df 100644
--- a/src/app/models/event.ts
+++ b/src/app/models/event.ts
@@ -1,13 +1,13 @@
 export class Event {
-    id: string;
-    name: string;
-    date: string;
-    joined: boolean;
+  id: string;
+  name: string;
+  date: string;
+  joined: boolean;
 
-    constructor(pId: string, pName: string, pdate: string, pjoined: boolean) {
-        this.id = pId;
-        this.name = pName;
-        this.date = pdate;
-        this.joined = pjoined;
-    }
+  constructor(pId: string, pName: string, pdate: string, pjoined: boolean) {
+    this.id = pId;
+    this.name = pName;
+    this.date = pdate;
+    this.joined = pjoined;
+  }
 }
diff --git a/src/app/models/friendRequest.ts b/src/app/models/friendRequest.ts
index c272c1c..e273d2a 100644
--- a/src/app/models/friendRequest.ts
+++ b/src/app/models/friendRequest.ts
@@ -1,15 +1,13 @@
-import { User } from 'src/app/models/user';
-
 export class FriendRequest {
-    id: number;
-    senderUserID: number;
-    senderHandle: string;
-    senderUsername: string;
+  id: number;
+  senderUserID: number;
+  senderHandle: string;
+  senderUsername: string;
 
-    constructor(id?: number, senderUserId?: number, senderHandle?: string, senderName?: string) {
-        this.id = id;
-        this.senderUserID = senderUserId;
-        this.senderHandle = senderHandle;
-        this.senderUsername = senderName;
-    }
+  constructor(id?: number, senderUserId?: number, senderHandle?: string, senderName?: string) {
+    this.id = id;
+    this.senderUserID = senderUserId;
+    this.senderHandle = senderHandle;
+    this.senderUsername = senderName;
   }
+}
diff --git a/src/app/models/friendinfo.ts b/src/app/models/friendinfo.ts
index 3acee4a..bfca61c 100644
--- a/src/app/models/friendinfo.ts
+++ b/src/app/models/friendinfo.ts
@@ -1,16 +1,16 @@
-import { Levellist } from 'src/app/models/levellist';
+import {Levellist} from 'src/app/models/levellist';
 
 export class FriendInfo {
-    levellist: Levellist = new Levellist();
-    id: number;
-    name: string;
-    rankname: string;
-    profilePicture: string;
+  levellist: Levellist = new Levellist();
+  id: number;
+  name: string;
+  rankname: string;
+  profilePicture: string;
 
-    constructor(pId: number, pName: string, pLevel: number, pic: string) {
-        this.id = pId;
-        this.name = pName;
-        this.rankname = this.levellist.getLevelName(pLevel);
-        this.profilePicture = pic;
-    }
+  constructor(pId: number, pName: string, pLevel: number, pic: string) {
+    this.id = pId;
+    this.name = pName;
+    this.rankname = this.levellist.getLevelName(pLevel);
+    this.profilePicture = pic;
+  }
 }
diff --git a/src/app/models/group.ts b/src/app/models/group.ts
index 9c0ff55..77c0d96 100644
--- a/src/app/models/group.ts
+++ b/src/app/models/group.ts
@@ -1,14 +1,14 @@
-import { User } from 'src/app/models/user';
-import { Event } from 'src/app/models/event';
+import {User} from 'src/app/models/user';
+import {Event} from 'src/app/models/event';
 
 export class Group {
   id: number;
   name: string;
   handle: string;
   creator: User = new User();
-  members: User[] = new Array();
-  admins: User[] = new Array();
-  events: Event[] = new Array();
+  members: User[] = [];
+  admins: User[] = [];
+  events: Event[] = [];
   joined: boolean;
   allowedToJoinGroup = false;
 }
diff --git a/src/app/models/groupinfo.ts b/src/app/models/groupinfo.ts
index 1a39a7c..d44761b 100644
--- a/src/app/models/groupinfo.ts
+++ b/src/app/models/groupinfo.ts
@@ -1,10 +1,10 @@
 export class GroupInfo {
-    id: number;
-    name: string;
-    allowedToJoinGroup = false;
+  id: number;
+  name: string;
+  allowedToJoinGroup = false;
 
-    constructor(pId: number, pName: string) {
-        this.id = pId;
-        this.name = pName;
-    }
+  constructor(pId: number, pName: string) {
+    this.id = pId;
+    this.name = pName;
+  }
 }
diff --git a/src/app/models/interfaces/IFileUploadResult.ts b/src/app/models/interfaces/IFileUploadResult.ts
new file mode 100644
index 0000000..fe564c6
--- /dev/null
+++ b/src/app/models/interfaces/IFileUploadResult.ts
@@ -0,0 +1,5 @@
+export interface IFileUploadResult {
+  success: boolean;
+  fileName?: string;
+  error?: string;
+}
diff --git a/src/app/models/interfaces/IGraphqlError.ts b/src/app/models/interfaces/IGraphqlError.ts
index 10e7733..349999c 100644
--- a/src/app/models/interfaces/IGraphqlError.ts
+++ b/src/app/models/interfaces/IGraphqlError.ts
@@ -4,5 +4,5 @@ export interface IGraphqlError {
 
   path: string[];
 
-  location: {line: number; column: number}[];
+  location: { line: number; column: number }[];
 }
diff --git a/src/app/models/interfaces/IUser.ts b/src/app/models/interfaces/IUser.ts
index 052e736..ca39305 100644
--- a/src/app/models/interfaces/IUser.ts
+++ b/src/app/models/interfaces/IUser.ts
@@ -1,5 +1,4 @@
 import {IGroup} from './IGroup';
-import {ISettings} from './ISettings';
 import {IChat} from './IChat';
 import {IRequest} from './IRequest';
 
diff --git a/src/app/models/levellist.ts b/src/app/models/levellist.ts
index cb28476..09be30c 100644
--- a/src/app/models/levellist.ts
+++ b/src/app/models/levellist.ts
@@ -1,13 +1,13 @@
 export class Levellist {
-    levels: {level: number, name: string, points: number}[] = [
-      {level: 0, name: 'Green Horn', points: 0},
-      {level: 1, name: 'Good Willed', points: 100 },
-      {level: 2, name: 'Helper', points: 200 },
-      {level: 3, name: 'World Saver', points: 300 },
-      {level: 4, name: 'Hero of the Green Country', points: 400 },
-      {level: 5, name: 'Champion of the Earth', points: 500 },
-      {level: 6, name: 'Intergallactic Superhero', points: 600 },
-    ];
+  levels: { level: number, name: string, points: number }[] = [
+    {level: 0, name: 'Green Horn', points: 0},
+    {level: 1, name: 'Good Willed', points: 100},
+    {level: 2, name: 'Helper', points: 200},
+    {level: 3, name: 'World Saver', points: 300},
+    {level: 4, name: 'Hero of the Green Country', points: 400},
+    {level: 5, name: 'Champion of the Earth', points: 500},
+    {level: 6, name: 'Intergallactic Superhero', points: 600},
+  ];
 
   getLevelName(level: number): any {
     let name = 'not defined';
diff --git a/src/app/models/login.ts b/src/app/models/login.ts
index 709d49b..f58a238 100644
--- a/src/app/models/login.ts
+++ b/src/app/models/login.ts
@@ -1,6 +1,4 @@
-import { Hash } from 'crypto';
-
 export interface Login {
-    email: string;
-    passwordHash: string;
-  }
+  email: string;
+  passwordHash: string;
+}
diff --git a/src/app/models/post.ts b/src/app/models/post.ts
index 68ddec1..1ba01c3 100644
--- a/src/app/models/post.ts
+++ b/src/app/models/post.ts
@@ -1,40 +1,40 @@
-import { Author } from './author';
-import { Activity } from './activity';
+import {Author} from './author';
+import {Activity} from './activity';
 
 export class Post {
-    id: number;
-    content: string;
-    htmlContent: string;
-    date: string;
-    upvotes: number;
-    downvotes: number;
-    userVote: string;
-    deletable: boolean;
-    author: Author;
-    activity: Activity;
+  id: number;
+  content: string;
+  htmlContent: string;
+  date: string;
+  upvotes: number;
+  downvotes: number;
+  userVote: string;
+  deletable: boolean;
+  author: Author;
+  activity: Activity;
 
-    // TODO: constructor properties need normal names
-    constructor(
-      pId: number,
-      pContent: string,
-      pHtmlContent: string,
-      pUpvotes: number,
-      pDownvotes: number,
-      pUserVote: string,
-      pDeletable: boolean,
-      pDate: string,
-      pAuthor: Author,
-      pactivity: Activity
-    ) {
-        this.id = pId;
-        this.content = pContent;
-        this.htmlContent = pHtmlContent;
-        this.upvotes = pUpvotes;
-        this.downvotes = pDownvotes;
-        this.userVote = pUserVote;
-        this.deletable = pDeletable;
-        this.date = pDate;
-        this.author = pAuthor;
-        this.activity = pactivity;
-    }
+  // TODO: constructor properties need normal names
+  constructor(
+    pId: number,
+    pContent: string,
+    pHtmlContent: string,
+    pUpvotes: number,
+    pDownvotes: number,
+    pUserVote: string,
+    pDeletable: boolean,
+    pDate: string,
+    pAuthor: Author,
+    pactivity: Activity
+  ) {
+    this.id = pId;
+    this.content = pContent;
+    this.htmlContent = pHtmlContent;
+    this.upvotes = pUpvotes;
+    this.downvotes = pDownvotes;
+    this.userVote = pUserVote;
+    this.deletable = pDeletable;
+    this.date = pDate;
+    this.author = pAuthor;
+    this.activity = pactivity;
+  }
 }
diff --git a/src/app/models/registration.ts b/src/app/models/registration.ts
index 96166b5..b251759 100644
--- a/src/app/models/registration.ts
+++ b/src/app/models/registration.ts
@@ -1,5 +1,5 @@
 export interface Registration {
-    username: string;
-    email: string;
-    passwordHash: string;
-  }
+  username: string;
+  email: string;
+  passwordHash: string;
+}
diff --git a/src/app/models/user.ts b/src/app/models/user.ts
index 25c1773..2562d45 100644
--- a/src/app/models/user.ts
+++ b/src/app/models/user.ts
@@ -1,9 +1,9 @@
-import { FriendRequest } from 'src/app/models/friendRequest';
-import { FriendInfo } from 'src/app/models/friendinfo';
-import { GroupInfo } from 'src/app/models/groupinfo';
-import { Post } from 'src/app/models/post';
+import {FriendRequest} from 'src/app/models/friendRequest';
+import {FriendInfo} from 'src/app/models/friendinfo';
+import {GroupInfo} from 'src/app/models/groupinfo';
+import {Post} from 'src/app/models/post';
 import {IUser} from './interfaces/IUser';
-import { environment } from 'src/environments/environment';
+import {environment} from 'src/environments/environment';
 
 export class User {
   loggedIn = false;
@@ -46,19 +46,29 @@ export class User {
     } catch (err) {
       console.error(err);
     }
-    this.friends = userDataResponse.friends
-      .map(friend => new FriendInfo(
-        friend.id, friend.name,
-        friend.level,
-        this.buildProfilePictureUrl(friend.profilePicture)
-      ));
-    this.groups = userDataResponse.groups
-      .map(group => new GroupInfo(group.id, group.name));
-    this.chatIDs = userDataResponse.chats.map(chat => chat.id);
-    this.sentRequestUserIDs = userDataResponse.sentRequests
-      .map(request => request.receiver.id);
-    this.receivedRequests = userDataResponse.receivedRequests
-      .map(request => new FriendRequest(request.id, request.sender.id, request.sender.handle, request.sender.name));
+    if (userDataResponse.friends) {
+      this.friends = userDataResponse.friends
+        .map(friend => new FriendInfo(
+          friend.id, friend.name,
+          friend.level,
+          this.buildProfilePictureUrl(friend.profilePicture)
+        ));
+    }
+    if (userDataResponse.groups) {
+      this.groups = userDataResponse.groups
+        .map(group => new GroupInfo(group.id, group.name));
+    }
+    if (userDataResponse.chats) {
+      this.chatIDs = userDataResponse.chats.map(chat => chat.id);
+    }
+    if (userDataResponse.sentRequests) {
+      this.sentRequestUserIDs = userDataResponse.sentRequests
+        .map(request => request.receiver.id);
+    }
+    if (userDataResponse.receivedRequests) {
+      this.receivedRequests = userDataResponse.receivedRequests
+        .map(request => new FriendRequest(request.id, request.sender.id, request.sender.handle, request.sender.name));
+    }
   }
 
   buildProfilePictureUrl(path: string): string {
diff --git a/src/app/services/activity/activity.service.spec.ts b/src/app/services/activity/activity.service.spec.ts
index e67f50a..f6e88b8 100644
--- a/src/app/services/activity/activity.service.spec.ts
+++ b/src/app/services/activity/activity.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { ActivityService } from './activity.service';
+import {ActivityService} from './activity.service';
 
 describe('ActivityService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/activity/activity.service.ts b/src/app/services/activity/activity.service.ts
index 526bfd0..df2246d 100644
--- a/src/app/services/activity/activity.service.ts
+++ b/src/app/services/activity/activity.service.ts
@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { Activitylist, Activity } from 'src/app/models/activity';
-import { environment } from 'src/environments/environment';
-import { Http } from '@angular/http';
+import {Injectable} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+import {Activity, Activitylist} from 'src/app/models/activity';
+import {environment} from 'src/environments/environment';
+import {Http} from '@angular/http';
 
 
 @Injectable({
@@ -12,7 +12,8 @@ export class ActivityService {
 
   public activitylist = new BehaviorSubject<Activitylist>(new Activitylist());
 
-  constructor(private http: Http) { }
+  constructor(private http: Http) {
+  }
 
   changeUserInfo(pActivitylist: Activitylist) {
     this.activitylist.next(pActivitylist);
@@ -30,11 +31,11 @@ export class ActivityService {
   }
 
   public buildJson(): any {
-    const body =  {query: `query{getActivities{
+    const body = {
+      query: `query{getActivities{
       id name description points
-    }}`, variables: {
-
-      }};
+    }}`, variables: {}
+    };
     return body;
   }
 
diff --git a/src/app/services/chat/chat.service.spec.ts b/src/app/services/chat/chat.service.spec.ts
index f9d1b52..f56ea3a 100644
--- a/src/app/services/chat/chat.service.spec.ts
+++ b/src/app/services/chat/chat.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { ChatService } from './chat.service';
+import {ChatService} from './chat.service';
 
 describe('ChatService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/chat/chat.service.ts b/src/app/services/chat/chat.service.ts
index 988f7b5..be92ac2 100644
--- a/src/app/services/chat/chat.service.ts
+++ b/src/app/services/chat/chat.service.ts
@@ -1,10 +1,10 @@
-import { Injectable } from '@angular/core';
-import {Http, URLSearchParams, Headers} from '@angular/http';
-import { Chat } from 'src/app/models/chat';
-import { Chatmessage } from 'src/app/models/chatmessage';
-import { FriendInfo } from 'src/app/models/friendinfo';
-import { DatasharingService } from '../datasharing.service';
-import { environment } from 'src/environments/environment';
+import {Injectable} from '@angular/core';
+import {Headers, Http} from '@angular/http';
+import {Chat} from 'src/app/models/chat';
+import {Chatmessage} from 'src/app/models/chatmessage';
+import {FriendInfo} from 'src/app/models/friendinfo';
+import {DatasharingService} from '../datasharing.service';
+import {environment} from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root'
@@ -17,8 +17,9 @@ export class ChatService {
 
   constructor(private http: Http, private data: DatasharingService) {
     this.data.currentUserInfo.subscribe(user => {
-      this.ownID = user.userID; });
-   }
+      this.ownID = user.userID;
+    });
+  }
 
   public getAllChats(): Array<Chat> {
     const url = environment.graphQLUrl;
@@ -27,7 +28,7 @@ export class ChatService {
     headers.set('Content-Type', 'application/json');
 
     this.http.post(url, this.getBodyForGetAllChats())
-    .subscribe(response => {
+      .subscribe(response => {
         this.chats = this.renderAllChats(response.json());
       });
     return this.chats;
@@ -52,9 +53,9 @@ export class ChatService {
       headers.set('Content-Type', 'application/json');
 
       this.http.post(url, this.getBodyForGetChatsByID(chatId))
-      .subscribe(response => {
-        this.updateChat(response.json());
-      });
+        .subscribe(response => {
+          this.updateChat(response.json());
+        });
     }
     return this.chats;
   }
@@ -68,9 +69,9 @@ export class ChatService {
       headers.set('Content-Type', 'application/json');
 
       this.http.post(url, this.getBodyForGetChatsByID(chatId))
-      .subscribe(response => {
-        this.updateChat(response.json());
-      });
+        .subscribe(response => {
+          this.updateChat(response.json());
+        });
     }
     return this.chats;
   }
@@ -97,9 +98,9 @@ export class ChatService {
     headers.set('Content-Type', 'application/json');
 
     this.http.post(url, this.getBodyForRequestOfAllChatPartners())
-    .subscribe(response => {
-      temp = response.json();
-    });
+      .subscribe(response => {
+        temp = response.json();
+      });
 
     for (const chat of temp.data.getSelf.chats) {
       let memberID: number;
@@ -137,8 +138,8 @@ export class ChatService {
     headers.set('Content-Type', 'application/json');
 
     this.http.post(url, this.getBodyForGetMessagesInChat(pChatID)).subscribe(response => {
-        messages = this.renderMessages(response.json());
-      });
+      messages = this.renderMessages(response.json());
+    });
     return messages;
   }
 
@@ -153,13 +154,13 @@ export class ChatService {
 
   public renderMessages(pResponse: any): Array<Chatmessage> {
     const messages = new Array<Chatmessage>();
-      for (const message of pResponse.data.getChat.messages) {
-        if (message.author.id === this.ownID) {
-          messages.push(new Chatmessage(message.content, message.createdAt, true));
-        } else {
-          messages.push(new Chatmessage(message.content, message.createdAt, false));
-        }
+    for (const message of pResponse.data.getChat.messages) {
+      if (message.author.id === this.ownID) {
+        messages.push(new Chatmessage(message.content, message.createdAt, true));
+      } else {
+        messages.push(new Chatmessage(message.content, message.createdAt, false));
       }
+    }
     return messages;
   }
 
@@ -210,38 +211,44 @@ export class ChatService {
 
   getBodyForNewChat(pUserID: number) {
     this.arr = [pUserID];
-    const body =  {query: `mutation($userID: number[]) {
+    const body = {
+      query: `mutation($userID: number[]) {
         createChat(members: $userID) {id}
       }`, variables: {
-          members: this.arr
-      }};
+        members: this.arr
+      }
+    };
 
-      return body;
+    return body;
   }
 
   getBodyForRequestOfAllChatPartners() {
-    const body =  {query: `query {
+    const body = {
+      query: `query {
         getSelf {
           chats(first: 1000, offset: 0) {members{name, id, level}}
         }}`
-      };
+    };
 
-      return body;
+    return body;
   }
 
   getBodyForSendMessage(pchatID: number, pContent: string) {
-    const body =  {query: `mutation($chatId: ID!, $content: String!) {
+    const body = {
+      query: `mutation($chatId: ID!, $content: String!) {
         sendMessage(chatId: $chatId, content: $content) {id}
       }`, variables: {
-          chatId: pchatID,
-          content: pContent
-      }};
+        chatId: pchatID,
+        content: pContent
+      }
+    };
 
-      return body;
+    return body;
   }
 
   getBodyForGetAllChats() {
-    const body =  {query: `query {
+    const body = {
+      query: `query {
         getSelf {
           chats(first: 10, offset: 0) {
             id, members{name, id, level},
@@ -251,29 +258,33 @@ export class ChatService {
           }
         }
       }`
-      };
+    };
     return body;
   }
 
   getBodyForGetChatsByID(pChatID: number) {
-    const body =  {query: `query($chatID: ID!) {
+    const body = {
+      query: `query($chatID: ID!) {
         getChat(chatId: $chatID) {id, members{name, id, level},
           messages(first: 1000, offset: 0) {author {id}, createdAt, content}}
         }
       }`, variables: {
-          chatId: pChatID
-      }};
+        chatId: pChatID
+      }
+    };
     return body;
   }
 
   getBodyForGetMessagesInChat(pChatID: number) {
-    const body =  {query: `query($chatId: ID!) {
+    const body = {
+      query: `query($chatId: ID!) {
         getChat(chatId: $chatId) {
           messages(first: 1000, offset: 0) {author {id}, createdAt, content}
         }
       }`, variables: {
-          chatId: pChatID
-      }};
+        chatId: pChatID
+      }
+    };
     return body;
   }
 }
diff --git a/src/app/services/datasharing.service.spec.ts b/src/app/services/datasharing.service.spec.ts
index 6c24291..f03b9fb 100644
--- a/src/app/services/datasharing.service.spec.ts
+++ b/src/app/services/datasharing.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { DatasharingService } from './datasharing.service';
+import {DatasharingService} from './datasharing.service';
 
 describe('DatasharingService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/datasharing.service.ts b/src/app/services/datasharing.service.ts
index 92cf5b8..160cc66 100644
--- a/src/app/services/datasharing.service.ts
+++ b/src/app/services/datasharing.service.ts
@@ -1,6 +1,6 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { User } from '../models/user';
+import {Injectable} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+import {User} from '../models/user';
 
 @Injectable({
   providedIn: 'root'
@@ -12,7 +12,8 @@ export class DatasharingService {
   currentUserInfo = this.userInfoSource.asObservable();
   currentChatIDs = this.chatIDsSource.asObservable();
 
-  constructor() { }
+  constructor() {
+  }
 
   changeUserInfo(pUserInfo: User) {
     this.userInfoSource.next(pUserInfo);
diff --git a/src/app/services/document.service.spec.ts b/src/app/services/document.service.spec.ts
index 186f71a..3e2e3ca 100644
--- a/src/app/services/document.service.spec.ts
+++ b/src/app/services/document.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { DocumentService } from './document.service';
+import {DocumentService} from './document.service';
 
 describe('DocumentService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/document.service.ts b/src/app/services/document.service.ts
index a511832..4c6c917 100644
--- a/src/app/services/document.service.ts
+++ b/src/app/services/document.service.ts
@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 
-import { Socket } from 'ngx-socket-io';
+import {Socket} from 'ngx-socket-io';
 
-import { Document } from '../models/document';
+import {Document} from '../models/document';
 
 @Injectable({
   providedIn: 'root'
@@ -11,14 +11,15 @@ export class DocumentService {
   currentDocument = this.socket.fromEvent<Document>('document');
   documents = this.socket.fromEvent<string[]>('documents');
 
-  constructor(private socket: Socket) { }
+  constructor(private socket: Socket) {
+  }
 
   getDocument(id: string) {
     this.socket.emit('getDoc', id);
   }
 
   newDocument() {
-    this.socket.emit('addDoc', { id: this.docId(), doc: '' });
+    this.socket.emit('addDoc', {id: this.docId(), doc: ''});
   }
 
   editDocument(document: Document) {
diff --git a/src/app/services/feed/feed.service.spec.ts b/src/app/services/feed/feed.service.spec.ts
index a8a5cfb..7eca027 100644
--- a/src/app/services/feed/feed.service.spec.ts
+++ b/src/app/services/feed/feed.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { FeedService } from './feed.service';
+import {FeedService} from './feed.service';
 
 describe('FeedService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts
index dc10fd5..b6755a2 100644
--- a/src/app/services/feed/feed.service.ts
+++ b/src/app/services/feed/feed.service.ts
@@ -1,10 +1,10 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Post } from 'src/app/models/post';
-import { Author } from 'src/app/models/author';
-import { environment } from 'src/environments/environment';
-import { Activity } from 'src/app/models/activity';
-import { BehaviorSubject } from 'rxjs';
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Post} from 'src/app/models/post';
+import {Author} from 'src/app/models/author';
+import {environment} from 'src/environments/environment';
+import {Activity} from 'src/app/models/activity';
+import {BehaviorSubject} from 'rxjs';
 import {tap} from 'rxjs/operators';
 
 @Injectable({
@@ -21,13 +21,15 @@ export class FeedService {
   private mostLikedOffset = 0;
   private newOffset = 0;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   public createPost(pContent: String) {
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
 
-    const body = {query: `mutation($content: String!) {
+    const body = {
+      query: `mutation($content: String!) {
         createPost(content: $content) {
           id,
           content,
@@ -49,21 +51,23 @@ export class FeedService {
             id},
           createdAt}
       }`, variables: {
-          content: pContent
-      }};
-      return this.http.post(environment.graphQLUrl, body).pipe(tap(response => {
-        const updatedposts = this.newPosts.getValue();
-        updatedposts.unshift(this.renderPost(response));
-        this.newPosts.next(updatedposts);
-        this.setPost('NEW');
-      }));
+        content: pContent
+      }
+    };
+    return this.http.post(environment.graphQLUrl, body).pipe(tap(response => {
+      const updatedposts = this.newPosts.getValue();
+      updatedposts.unshift(this.renderPost(response));
+      this.newPosts.next(updatedposts);
+      this.setPost('NEW');
+    }));
   }
 
   public createPostActivity(pContent: String, activityId: String) {
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
 
-    const body = {query: `mutation($content: String!, $id: ID) {
+    const body = {
+      query: `mutation($content: String!, $id: ID) {
         createPost(content: $content activityId: $id) {
           id,
           content,
@@ -85,28 +89,31 @@ export class FeedService {
             id},
           createdAt}
       }`, variables: {
-          content: pContent,
-          id: activityId
-      }};
-      return this.http.post(environment.graphQLUrl, body).pipe(tap(response => {
-        const updatedposts = this.newPosts.getValue();
-        updatedposts.unshift(this.renderPost(response));
-        this.newPosts.next(updatedposts);
-        this.setPost('NEW');
-      }));
+        content: pContent,
+        id: activityId
+      }
+    };
+    return this.http.post(environment.graphQLUrl, body).pipe(tap(response => {
+      const updatedposts = this.newPosts.getValue();
+      updatedposts.unshift(this.renderPost(response));
+      this.newPosts.next(updatedposts);
+      this.setPost('NEW');
+    }));
   }
 
   public upvote(postId: number): any {
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
 
-    const body = {query: `mutation($postId: ID!) {
+    const body = {
+      query: `mutation($postId: ID!) {
         vote(postId: $postId, type: UPVOTE) {
           post{userVote upvotes downvotes}
         }
       }`, variables: {
-          postId
-      }};
+        postId
+      }
+    };
 
     return this.http.post(environment.graphQLUrl, body);
   }
@@ -115,13 +122,15 @@ export class FeedService {
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
 
-    const body = {query: `mutation($postId: ID!) {
+    const body = {
+      query: `mutation($postId: ID!) {
         vote(postId: $postId, type: DOWNVOTE) {
           post{userVote upvotes downvotes}
         }
       }`, variables: {
-          postId: pPostID
-      }};
+        postId: pPostID
+      }
+    };
 
     return this.http.post(environment.graphQLUrl, body);
   }
@@ -130,30 +139,33 @@ export class FeedService {
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
 
-    const body = {query: `mutation($postId: ID!) {
+    const body = {
+      query: `mutation($postId: ID!) {
         deletePost(postId: $postId)
       }`, variables: {
-          postId: pPostID
-      }};
+        postId: pPostID
+      }
+    };
 
     return this.http.post(environment.graphQLUrl, body);
   }
 
   public getPosts(sort: string) {
     if ((sort === 'NEW' && this.newPosts.getValue().length === 0) ||
-    (sort === 'TOP' && this.mostLikedPosts.getValue().length === 0)) {
+      (sort === 'TOP' && this.mostLikedPosts.getValue().length === 0)) {
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
       this.http.post(environment.graphQLUrl, this.buildJson(sort, 0))
-      .subscribe(response => {
-        if (sort === 'NEW') {
-          this.newPosts.next(this.renderAllPosts(response));
-        } else if (sort === 'TOP') {
-          this.mostLikedPosts.next(this.renderAllPosts(response));
-        }
-        this.setPost(sort);
-      });
-    } this.setPost(sort);
+        .subscribe(response => {
+          if (sort === 'NEW') {
+            this.newPosts.next(this.renderAllPosts(response));
+          } else if (sort === 'TOP') {
+            this.mostLikedPosts.next(this.renderAllPosts(response));
+          }
+          this.setPost(sort);
+        });
+    }
+    this.setPost(sort);
   }
 
   public getNextPosts() {
@@ -162,29 +174,29 @@ export class FeedService {
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
       this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.newOffset))
-      .subscribe(response => {
-        let updatedposts = this.newPosts.getValue();
-        updatedposts = updatedposts.concat(this.renderAllPosts(response));
-        if (this.renderAllPosts(response).length < 1) {
-          this.newPostsAvailable.next(false);
-        }
-        this.newPosts.next(updatedposts);
-        this.setPost('NEW');
-      });
+        .subscribe(response => {
+          let updatedposts = this.newPosts.getValue();
+          updatedposts = updatedposts.concat(this.renderAllPosts(response));
+          if (this.renderAllPosts(response).length < 1) {
+            this.newPostsAvailable.next(false);
+          }
+          this.newPosts.next(updatedposts);
+          this.setPost('NEW');
+        });
     } else if (this.activePostList === 'TOP' && this.topPostsAvailable) {
       this.mostLikedOffset += 10;
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
       this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.mostLikedOffset))
-      .subscribe(response => {
-        let updatedposts = this.mostLikedPosts.getValue();
-        updatedposts = updatedposts.concat(this.renderAllPosts(response));
-        if (this.renderAllPosts(response).length < 1) {
-          this.topPostsAvailable.next(false);
-        }
-        this.mostLikedPosts.next(updatedposts);
-        this.setPost('TOP');
-      });
+        .subscribe(response => {
+          let updatedposts = this.mostLikedPosts.getValue();
+          updatedposts = updatedposts.concat(this.renderAllPosts(response));
+          if (this.renderAllPosts(response).length < 1) {
+            this.topPostsAvailable.next(false);
+          }
+          this.mostLikedPosts.next(updatedposts);
+          this.setPost('TOP');
+        });
     }
   }
 
@@ -198,7 +210,8 @@ export class FeedService {
   }
 
   buildJson(sort: string, offset: number) {
-    const body =  {query: `query($offset: Int, $sort: SortType){
+    const body = {
+      query: `query($offset: Int, $sort: SortType){
         getPosts (first: 10, offset: $offset, sort: $sort) {
           id,
           content,
@@ -222,8 +235,9 @@ export class FeedService {
       }`, variables: {
         offset,
         sort
-      }};
-      return body;
+      }
+    };
+    return body;
   }
 
   public renderPost(response: any): Post {
@@ -236,11 +250,11 @@ export class FeedService {
     const userVote: string = post.userVote;
     const deletable: boolean = post.deletable;
     let profilePicture: string;
-      if (post.author.profilePicture) {
-        profilePicture = environment.greenvironmentUrl + post.author.profilePicture;
-      } else {
-        profilePicture = 'assets/images/default-profilepic.svg';
-      }
+    if (post.author.profilePicture) {
+      profilePicture = environment.greenvironmentUrl + post.author.profilePicture;
+    } else {
+      profilePicture = 'assets/images/default-profilepic.svg';
+    }
     const author = new Author(post.author.id, post.author.name, post.author.handle, profilePicture);
     const temp = new Date(Number(post.createdAt));
     const date = temp.toLocaleString('en-GB');
@@ -251,7 +265,9 @@ export class FeedService {
         post.activity.name,
         post.activity.description,
         post.activity.points);
-      } else { activity = null; }
+    } else {
+      activity = null;
+    }
 
     return new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, date, author, activity);
   }
@@ -278,12 +294,14 @@ export class FeedService {
       const date = temp.toLocaleString('en-GB');
       let activity: Activity;
       if (post.activity) {
-      activity = new Activity(
-        post.activity.id,
-        post.activity.name,
-        post.activity.description,
-        post.activity.points);
-      } else { activity = null; }
+        activity = new Activity(
+          post.activity.id,
+          post.activity.name,
+          post.activity.description,
+          post.activity.points);
+      } else {
+        activity = null;
+      }
       posts.push(new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, date, author, activity));
     }
     return posts;
diff --git a/src/app/services/group/group.service.spec.ts b/src/app/services/group/group.service.spec.ts
index 877b360..bba0937 100644
--- a/src/app/services/group/group.service.spec.ts
+++ b/src/app/services/group/group.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { GroupService } from './group.service';
+import {GroupService} from './group.service';
 
 describe('GroupService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/group/group.service.ts b/src/app/services/group/group.service.ts
index 181a388..433a16f 100644
--- a/src/app/services/group/group.service.ts
+++ b/src/app/services/group/group.service.ts
@@ -1,11 +1,10 @@
-import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
-import { Author } from 'src/app/models/author';
-import { environment } from 'src/environments/environment';
-import { User } from 'src/app/models/user';
-import { Event } from 'src/app/models/event';
-import { Observable, BehaviorSubject } from 'rxjs';
-import { Group } from 'src/app/models/group';
+import {Injectable} from '@angular/core';
+import {Http} from '@angular/http';
+import {environment} from 'src/environments/environment';
+import {User} from 'src/app/models/user';
+import {Event} from 'src/app/models/event';
+import {BehaviorSubject} from 'rxjs';
+import {Group} from 'src/app/models/group';
 
 @Injectable({
   providedIn: 'root'
@@ -14,7 +13,8 @@ export class GroupService {
 
   public group: BehaviorSubject<Group> = new BehaviorSubject(new Group());
 
-  constructor(private http: Http) { }
+  constructor(private http: Http) {
+  }
 
   public getGroupData(groupId: string) {
     const headers = new Headers();
@@ -39,7 +39,7 @@ export class GroupService {
           events{id name dueDate joined}
       }
     }`, variables: {
-      groupId: id
+        groupId: id
       }
     };
     return body;
@@ -83,7 +83,8 @@ export class GroupService {
   public createEvent(name: string, date: string, groupId: string) {
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
-    const body = {query: `mutation($groupId: ID!, $name: String, $date: String) {
+    const body = {
+      query: `mutation($groupId: ID!, $name: String, $date: String) {
         createEvent(name: $name, dueDate: $date, groupId: $groupId) {
           id
           name
@@ -91,10 +92,11 @@ export class GroupService {
           joined
         }
       }`, variables: {
-          name: name,
-          date: date,
-          groupId: groupId
-      }};
+        name: name,
+        date: date,
+        groupId: groupId
+      }
+    };
 
     this.http.post(environment.graphQLUrl, body).subscribe(response => {
       const event = response.json().data.createEvent;
@@ -109,26 +111,30 @@ export class GroupService {
   public joinEvent(eventId: string) {
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
-    const body = {query: `mutation($eventId: ID!) {
+    const body = {
+      query: `mutation($eventId: ID!) {
       joinEvent(eventId: $eventId) {
         joined
       }
     }`, variables: {
-          eventId: eventId
-      }};
+        eventId: eventId
+      }
+    };
     return this.http.post(environment.graphQLUrl, body);
   }
 
   public leaveEvent(eventId: string) {
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
-    const body = {query: `mutation($eventId: ID!) {
+    const body = {
+      query: `mutation($eventId: ID!) {
       leaveEvent(eventId: $eventId) {
         joined
       }
     }`, variables: {
-          eventId: eventId
-      }};
+        eventId: eventId
+      }
+    };
     return this.http.post(environment.graphQLUrl, body);
   }
 
diff --git a/src/app/services/login/login.service.spec.ts b/src/app/services/login/login.service.spec.ts
index 024e696..bb3c799 100644
--- a/src/app/services/login/login.service.spec.ts
+++ b/src/app/services/login/login.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { LoginService } from './login.service';
+import {LoginService} from './login.service';
 
 describe('LoginService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/profile/profile.service.spec.ts b/src/app/services/profile/profile.service.spec.ts
index 95b6988..77becfc 100644
--- a/src/app/services/profile/profile.service.spec.ts
+++ b/src/app/services/profile/profile.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { ProfileService } from './profile.service';
+import {ProfileService} from './profile.service';
 
 describe('ProfileService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/profile/profile.service.ts b/src/app/services/profile/profile.service.ts
index 1eecb07..c198c43 100644
--- a/src/app/services/profile/profile.service.ts
+++ b/src/app/services/profile/profile.service.ts
@@ -1,92 +1,97 @@
-import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
-import { Post } from 'src/app/models/post';
-import { Author } from 'src/app/models/author';
-import { environment } from 'src/environments/environment';
-import { User } from 'src/app/models/user';
-import { Observable, Subject } from 'rxjs';
-import { Activity } from 'src/app/models/activity';
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Post} from 'src/app/models/post';
+import {Author} from 'src/app/models/author';
+import {environment} from 'src/environments/environment';
+import {User} from 'src/app/models/user';
+import {Subject} from 'rxjs';
+import {Activity} from 'src/app/models/activity';
+import {BaseService} from '../base.service';
+
+const graphqlGetProfileQuery = `query($userId: ID) {
+  getUser(userId:$userId){
+    id
+    handle
+    name
+    profilePicture
+    points
+    level
+    friendCount
+    groupCount
+    joinedAt
+    friends{
+      id
+    }
+    posts{
+      id,
+      content,
+      htmlContent,
+      upvotes,
+      downvotes,
+      userVote,
+      deletable,
+      activity{
+        id
+        name
+        description
+        points
+      },
+      author{
+        name,
+        handle,
+        profilePicture
+        id},
+      createdAt
+    }
+  }
+}`;
 
 @Injectable({
   providedIn: 'root'
 })
-export class ProfileService {
+export class ProfileService extends BaseService {
+
+  constructor(private http: HttpClient) {
+    super();
+  }
 
   public proflile: Subject<any> = new Subject();
 
-  constructor(private http: Http) { }
+  /**
+   * Builds the request body of a getProfile request
+   * @param id
+   */
+  private static buildGetProfileBody(id: string): any {
+    return {
+      query: graphqlGetProfileQuery,
+      variables: {
+        userId: id,
+      }
+    };
+  }
 
+  /**
+   * Returns the data for the specified user.
+   * @param userId
+   */
   public getUserData(userId: string) {
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
-    // return this.renderProfile(this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId)));
-    this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId)).subscribe(result => {
-      // push onto subject
-      this.proflile.next(this.renderProfile(result.json()));
+    this.http.post(environment.graphQLUrl, ProfileService.buildGetProfileBody(userId)).subscribe(result => {
+      this.proflile.next(this.getProfileData(result));
       return this.proflile;
     });
   }
 
-  public buildGetProfileJson(id: string): any {
-    const body =  {query: `query($userId: ID) {
-      getUser(userId:$userId){
-        id
-        handle
-        name
-        profilePicture
-        points
-        level
-        friendCount
-        groupCount
-        joinedAt
-        friends{
-          id
-        }
-        posts{
-          id,
-          content,
-          htmlContent,
-          upvotes,
-          downvotes,
-          userVote,
-          deletable,
-          activity{
-            id
-            name
-            description
-            points
-          },
-          author{
-            name,
-            handle,
-            profilePicture
-            id},
-          createdAt
-        }
-      }
-    }`, variables: {
-        userId: id,
-      }};
-    return body;
-  }
-
-  public renderProfile(response: any): User {
+  /**
+   * Returns a userinstance filled with profile data
+   * @param response
+   */
+  public getProfileData(response: any): User {
     const posts = new Array<Post>();
     const profile = new User();
-    if (response.data.getUser != null) {
-
-      profile.userID = response.data.getUser.id;
-      profile.username = response.data.getUser.name;
-      profile.handle = response.data.getUser.handle;
-      profile.points = response.data.getUser.points;
-      profile.level = response.data.getUser.level;
-      profile.friendCount = response.data.getUser.friendCount;
-      profile.groupCount = response.data.getUser.groupCount;
-      if (response.data.getUser.profilePicture) {
-        profile.profilePicture = environment.greenvironmentUrl + response.data.getUser.profilePicture;
-      } else {
-        profile.profilePicture = 'assets/images/default-profilepic.svg';
-      }
+    if (response.data.getUser) {
+      profile.assignFromResponse(response.data.getUser);
       const temp = new Date(Number(response.data.getUser.joinedAt));
       const date = temp.toLocaleString('en-GB');
       profile.joinedAt = date;
@@ -110,11 +115,13 @@ export class ProfileService {
         let activity: Activity;
         if (post.activity) {
           activity = new Activity(
-          post.activity.id,
-          post.activity.name,
-          post.activity.description,
-          post.activity.points);
-        } else { activity = null; }
+            post.activity.id,
+            post.activity.name,
+            post.activity.description,
+            post.activity.points);
+        } else {
+          activity = null;
+        }
 
         // tslint:disable-next-line: max-line-length
         posts.push(new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, pdate, author, activity));
diff --git a/src/app/services/register/register.service.spec.ts b/src/app/services/register/register.service.spec.ts
index 3df5990..b796155 100644
--- a/src/app/services/register/register.service.spec.ts
+++ b/src/app/services/register/register.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { RegisterService } from './register.service';
+import {RegisterService} from './register.service';
 
 describe('RegisterService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/register/register.service.ts b/src/app/services/register/register.service.ts
index 325be66..6eb16af 100644
--- a/src/app/services/register/register.service.ts
+++ b/src/app/services/register/register.service.ts
@@ -1,19 +1,20 @@
-import { Injectable } from '@angular/core';
-import {Http, URLSearchParams, Headers} from '@angular/http';
-import { Registration } from '../../models/registration';
+import {Injectable} from '@angular/core';
+import {Headers, Http} from '@angular/http';
+import {Registration} from '../../models/registration';
 import {Router} from '@angular/router';
-import { DatasharingService } from '../datasharing.service';
-import { User } from 'src/app/models/user';
-import { environment } from 'src/environments/environment';
-import { FriendRequest } from 'src/app/models/friendRequest';
-import { FriendInfo } from 'src/app/models/friendinfo';
+import {DatasharingService} from '../datasharing.service';
+import {User} from 'src/app/models/user';
+import {environment} from 'src/environments/environment';
+import {FriendRequest} from 'src/app/models/friendRequest';
+import {FriendInfo} from 'src/app/models/friendinfo';
 
 @Injectable({
   providedIn: 'root'
 })
 export class RegisterService {
 
-  constructor(private http: Http, private data: DatasharingService, private router: Router) { }
+  constructor(private http: Http, private data: DatasharingService, private router: Router) {
+  }
 
   public register(registration: Registration, errorCb: any) {
 
@@ -25,10 +26,10 @@ export class RegisterService {
 
     return this.http.post(url, this.buildJson(registration))
       .subscribe(response => {
-        console.log(response.text());
-        this.registerSuccess();
-        this.updateUserInfo(response.json());
-      }, errorCb
+          console.log(response.text());
+          this.registerSuccess();
+          this.updateUserInfo(response.json());
+        }, errorCb
       );
   }
 
@@ -72,7 +73,8 @@ export class RegisterService {
   }
 
   public buildJson(registration: Registration): any {
-    const body =  {query: `mutation($username: String, $email: String, $pwHash: String) {
+    const body = {
+      query: `mutation($username: String, $email: String, $pwHash: String) {
       register(username: $username, email: $email, passwordHash: $pwHash) {
         id,
         name,
@@ -95,7 +97,8 @@ export class RegisterService {
         email: registration.email,
         pwHash: registration.passwordHash,
         username: registration.username,
-      }};
+      }
+    };
     return body;
   }
 }
diff --git a/src/app/services/request/request.service.spec.ts b/src/app/services/request/request.service.spec.ts
index 2b8616a..720f839 100644
--- a/src/app/services/request/request.service.spec.ts
+++ b/src/app/services/request/request.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { RequestService } from './request.service';
+import {RequestService} from './request.service';
 
 describe('RequestService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/request/request.service.ts b/src/app/services/request/request.service.ts
index 5c8b632..9fe0d81 100644
--- a/src/app/services/request/request.service.ts
+++ b/src/app/services/request/request.service.ts
@@ -3,8 +3,8 @@ import {Headers, Http} from '@angular/http';
 import {DatasharingService} from '../datasharing.service';
 import {Router} from '@angular/router';
 import {environment} from 'src/environments/environment';
-import { User } from 'src/app/models/user';
-import { GroupInfo } from 'src/app/models/groupinfo';
+import {User} from 'src/app/models/user';
+import {GroupInfo} from 'src/app/models/groupinfo';
 
 
 @Injectable({
@@ -16,7 +16,9 @@ export class RequestService {
   }
 
   public isAllowedToSendRequest(userID: number, self: User): boolean {
-    if (!self.loggedIn) { return false; } else {
+    if (!self.loggedIn) {
+      return false;
+    } else {
       for (const receiverID of self.sentRequestUserIDs) {
         if (userID === receiverID ||
           userID === self.userID) {
diff --git a/src/app/services/search/search.service.spec.ts b/src/app/services/search/search.service.spec.ts
index 5571a32..9496323 100644
--- a/src/app/services/search/search.service.spec.ts
+++ b/src/app/services/search/search.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { SearchService } from './search.service';
+import {SearchService} from './search.service';
 
 describe('SearchService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/search/search.service.ts b/src/app/services/search/search.service.ts
index 3b44396..095089d 100644
--- a/src/app/services/search/search.service.ts
+++ b/src/app/services/search/search.service.ts
@@ -8,7 +8,6 @@ import {Observable} from 'rxjs';
 import {ISearchResult} from '../../models/interfaces/ISearchResult';
 import {environment} from '../../../environments/environment';
 import {BaseService} from '../base.service';
-import {tap} from 'rxjs/operators';
 
 interface ISearchRequestResult {
   data: {
@@ -69,19 +68,19 @@ export class SearchService extends BaseService {
    */
   public getUsersForResponse(response: ISearchRequestResult): User[] {
     const users = new Array<User>();
-      for (const foundUser of response.data.search.users) {
-        const user = new User();
-        user.profilePicture = user.buildProfilePictureUrl(foundUser.profilePicture);
-        user.username = foundUser.name;
-        user.userID = foundUser.id;
-        user.handle = foundUser.handle;
-        user.points = foundUser.points;
-        user.level = foundUser.level;
-        // @ts-ignore
-        user.friends = foundUser.friends;
-        users.push(user);
-      }
-      return users;
+    for (const foundUser of response.data.search.users) {
+      const user = new User();
+      user.profilePicture = user.buildProfilePictureUrl(foundUser.profilePicture);
+      user.username = foundUser.name;
+      user.userID = foundUser.id;
+      user.handle = foundUser.handle;
+      user.points = foundUser.points;
+      user.level = foundUser.level;
+      // @ts-ignore
+      user.friends = foundUser.friends;
+      users.push(user);
+    }
+    return users;
   }
 
   /**
@@ -90,10 +89,10 @@ export class SearchService extends BaseService {
    */
   public getGroupsForResponse(response: ISearchRequestResult): Array<GroupInfo> {
     const groups = new Array<GroupInfo>();
-      for (const group of response.data.search.groups) {
-        groups.push(new GroupInfo(group.id, group.name));
-      }
-      return groups;
+    for (const group of response.data.search.groups) {
+      groups.push(new GroupInfo(group.id, group.name));
+    }
+    return groups;
   }
 
   /**
diff --git a/src/app/services/selfservice/self.service.spec.ts b/src/app/services/selfservice/self.service.spec.ts
index 7e958ec..a2aca1a 100644
--- a/src/app/services/selfservice/self.service.spec.ts
+++ b/src/app/services/selfservice/self.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { SelfService } from './self.service';
+import {SelfService} from './self.service';
 
 describe('Selfservice', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/selfservice/self.service.ts b/src/app/services/selfservice/self.service.ts
index efb8fb6..7f56a7b 100644
--- a/src/app/services/selfservice/self.service.ts
+++ b/src/app/services/selfservice/self.service.ts
@@ -1,98 +1,89 @@
-import { Injectable, EventEmitter, Output } from '@angular/core';
-import {Http, URLSearchParams, Headers} from '@angular/http';
-import { User } from 'src/app/models/user';
-import { DatasharingService } from '../datasharing.service';
-import {Router} from '@angular/router';
-import { environment } from 'src/environments/environment';
-import { FriendRequest } from 'src/app/models/friendRequest';
-import { FriendInfo } from 'src/app/models/friendinfo';
-import { GroupInfo } from 'src/app/models/groupinfo';
+import {Injectable} from '@angular/core';
+import {User} from 'src/app/models/user';
+import {DatasharingService} from '../datasharing.service';
+import {environment} from 'src/environments/environment';
+import {HttpClient} from '@angular/common/http';
+import {tap} from 'rxjs/operators';
+import {BaseService} from '../base.service';
+import {IFileUploadResult} from '../../models/interfaces/IFileUploadResult';
+
+const getSelfGraphqlQuery = `{
+  getSelf{
+    id,
+    name,
+    email,
+    handle,
+    points,
+    level,
+    profilePicture,
+    receivedRequests{id, sender{name, handle, id}},
+    sentRequests{receiver{id}},
+    friends {
+     id,
+     name,
+     level,
+     profilePicture,
+    },
+    groups {
+      id,
+      name
+    },
+    chats{
+      id
+    },
+    settings
+  }
+}`;
 
 @Injectable({
   providedIn: 'root'
 })
-export class SelfService {
+export class SelfService extends BaseService {
 
-  constructor(private http: Http, private data: DatasharingService, private router: Router) { }
+  constructor(private http: HttpClient, private data: DatasharingService) {
+    super();
+  }
 
+  /**
+   * Builds the getself request body
+   */
+  private static buildGetSelfBody(): any {
+    return {
+      query: getSelfGraphqlQuery, variables: {}
+    };
+  }
+
+  /**
+   * Checks if the user is still logged in
+   */
   public checkIfLoggedIn() {
     const url = environment.graphQLUrl;
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
 
-    return this.http.post(url, this.buildJson())
-      .subscribe(response => {
-        this.stillLoggedIn();
-        this.updateUserInfo(response.json());
-      }, error => {
-        this.notLoggedIn();
-        // this.fakeLogin();
-      }
-      );
-  }
-  public stillLoggedIn() {
+    return this.http.post(url, SelfService.buildGetSelfBody(), {headers: this.headers})
+      .pipe(tap(response => {
+        this.updateUserInfo(response);
+      }));
   }
 
-  public notLoggedIn() {
+  /**
+   * Uploads a file as a profile picture
+   * @param file
+   */
+  public changeProfilePicture(file: any) {
+    const formData: any = new FormData();
+    formData.append('profilePicture', file);
+    return this.http.post<IFileUploadResult>(environment.greenvironmentUrl + '/upload', formData);
   }
 
+  /**
+   * Updates the info on a user
+   * @param response
+   */
   public updateUserInfo(response: any) {
     const user = new User();
     user.assignFromResponse(response.data.getSelf);
     this.data.changeUserInfo(user);
   }
-
-  public fakeLogin() {
-    const user: User = new User();
-    let friendRequest: FriendRequest = new FriendRequest();
-    user.loggedIn = true;
-    user.userID = 1;
-    user.username = 'Rapier';
-    user.handle = 'rapier123';
-    user.email = 'r@r.com';
-    user.points = 100;
-    user.level = 3;
-    user.friends.push(new FriendInfo(1, 'Freund77', 4, 'lalala'));
-
-    friendRequest = new FriendRequest();
-    friendRequest.id = 10;
-    friendRequest.senderUserID = 99;
-    friendRequest.senderUsername = 'Löwe';
-    friendRequest.senderHandle = 'loewe123';
-    user.receivedRequests.push(friendRequest);
-
-    this.data.changeUserInfo(user);
-  }
-
-  public buildJson(): any {
-    const body =  {query: `{
-      getSelf{
-        id,
-        name,
-        email,
-        handle,
-        points,
-        level,
-        profilePicture,
-        receivedRequests{id, sender{name, handle, id}},
-        sentRequests{receiver{id}},
-        friends {
-         id,
-         name,
-         level,
-         profilePicture,
-        },
-        groups {
-          id,
-          name
-        },
-        chats{
-          id
-        },
-        settings
-      }
-    }`, variables: {
-      }};
-    return body;
-  }
 }
diff --git a/src/app/services/settings/settings.service.spec.ts b/src/app/services/settings/settings.service.spec.ts
index 81a7ca2..dd0fd03 100644
--- a/src/app/services/settings/settings.service.spec.ts
+++ b/src/app/services/settings/settings.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { SettingsService } from './settings.service';
+import {SettingsService} from './settings.service';
 
 describe('SettingsService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/settings/settings.service.ts b/src/app/services/settings/settings.service.ts
index 00eca51..00c590f 100644
--- a/src/app/services/settings/settings.service.ts
+++ b/src/app/services/settings/settings.service.ts
@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {Http} from '@angular/http';
-import { User } from 'src/app/models/user';
-import { environment } from 'src/environments/environment';
+import {User} from 'src/app/models/user';
+import {environment} from 'src/environments/environment';
 import {DatasharingService} from '../datasharing.service';
 
 @Injectable({
@@ -9,7 +9,8 @@ import {DatasharingService} from '../datasharing.service';
 })
 export class SettingsService {
 
-  users:  Array<User>;
+  users: Array<User>;
+
   constructor(private http: Http, private data: DatasharingService) {
   }
 
@@ -20,7 +21,8 @@ export class SettingsService {
     headers.set('Content-Type', 'application/json');
     const body = this.buildJsonDarkMode('darkmode: ' + '\'' + active + '\'');
     this.http.post(url, body).subscribe(response => {
-        console.log(response.text()); });
+      console.log(response.text());
+    });
   }
 
   public buildJsonDarkMode(setting_: string): any {
diff --git a/src/app/services/social/social.service.spec.ts b/src/app/services/social/social.service.spec.ts
index 6bcfcff..a1f5dc9 100644
--- a/src/app/services/social/social.service.spec.ts
+++ b/src/app/services/social/social.service.spec.ts
@@ -1,6 +1,6 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { SocialService } from './social.service';
+import {SocialService} from './social.service';
 
 describe('SocialService', () => {
   beforeEach(() => TestBed.configureTestingModule({}));
diff --git a/src/app/services/social/social.service.ts b/src/app/services/social/social.service.ts
index c6efe7a..3148ad8 100644
--- a/src/app/services/social/social.service.ts
+++ b/src/app/services/social/social.service.ts
@@ -23,7 +23,7 @@ export class SocialService extends BaseService {
    * @param name
    */
   private static buildGroupCreateBody(name: String): any {
-     return {
+    return {
       query: graphqlCreateGroupQuery, variables: {
         name
       }
diff --git a/src/assets/images/default-profilepic.svg b/src/assets/images/default-profilepic.svg
index fa37d4d..69b9c4c 100755
--- a/src/assets/images/default-profilepic.svg
+++ b/src/assets/images/default-profilepic.svg
@@ -2,64 +2,63 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="256px"
-   height="256px"
-   viewBox="0 0 256 256"
-   version="1.1"
-   id="SVGRoot"
-   inkscape:version="0.92.4 5da689c313, 2019-01-14"
-   sodipodi:docname="default-profilepic.svg">
+  xmlns:dc="http://purl.org/dc/elements/1.1/"
+  xmlns:cc="http://creativecommons.org/ns#"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+  width="256px"
+  height="256px"
+  viewBox="0 0 256 256"
+  version="1.1"
+  id="SVGRoot"
+  inkscape:version="0.92.4 5da689c313, 2019-01-14"
+  sodipodi:docname="default-profilepic.svg">
   <defs
-     id="defs3721" />
+    id="defs3721"/>
   <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="2.8284271"
-     inkscape:cx="118.92496"
-     inkscape:cy="134.69222"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer2"
-     showgrid="false"
-     inkscape:window-width="1920"
-     inkscape:window-height="1131"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:grid-bbox="true" />
+    id="base"
+    pagecolor="#ffffff"
+    bordercolor="#666666"
+    borderopacity="1.0"
+    inkscape:pageopacity="0.0"
+    inkscape:pageshadow="2"
+    inkscape:zoom="2.8284271"
+    inkscape:cx="118.92496"
+    inkscape:cy="134.69222"
+    inkscape:document-units="px"
+    inkscape:current-layer="layer2"
+    showgrid="false"
+    inkscape:window-width="1920"
+    inkscape:window-height="1131"
+    inkscape:window-x="0"
+    inkscape:window-y="0"
+    inkscape:window-maximized="1"
+    inkscape:grid-bbox="true"/>
   <metadata
-     id="metadata3724">
+    id="metadata3724">
     <rdf:RDF>
       <cc:Work
-         rdf:about="">
+        rdf:about="">
         <dc:format>image/svg+xml</dc:format>
         <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+          rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
         <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
   <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     style="display:none;opacity:0.40200004">
+    inkscape:label="Layer 1"
+    inkscape:groupmode="layer"
+    id="layer1"
+    style="display:none;opacity:0.40200004">
     <image
-       y="-7.7781744"
-       x="0.32620794"
-       id="image3742"
-       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAABHNCSVQICAgIfAhkiAAAGLZJREFU
+      y="-7.7781744"
+      x="0.32620794"
+      id="image3742"
+      xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAABHNCSVQICAgIfAhkiAAAGLZJREFU
 eJzt3Xm0b2dd3/F3phsSEiAkYUhNCMgUIIAgo2EUQQVxQCvgUC1VsKWtqw5LXav6j13L6Q9dtMUR
 HFBbFdGKtAytiBCUSaaAhiAJEEBITEIgw01y0z/2wXUIGe7NPec8e//267XWd/1ukj/uJ+e3z36+
 +9nPfnYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
@@ -173,28 +172,28 @@ AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
 AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYKf8f8Z4oRIF
 bxOuAAAAAElFTkSuQmCC
 "
-       style="image-rendering:optimizeSpeed"
-       preserveAspectRatio="none"
-       height="278.08777"
-       width="270.16949" />
+      style="image-rendering:optimizeSpeed"
+      preserveAspectRatio="none"
+      height="278.08777"
+      width="270.16949"/>
   </g>
   <g
-     inkscape:groupmode="layer"
-     id="layer2"
-     inkscape:label="Layer 2"
-     style="display:inline">
+    inkscape:groupmode="layer"
+    id="layer2"
+    inkscape:label="Layer 2"
+    style="display:inline">
     <circle
-       style="fill:#8bc34a;fill-opacity:1;stroke:none;stroke-width:6.62765312;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="path4571"
-       cx="127.37563"
-       cy="65.066956"
-       r="55.672287" />
+      style="fill:#8bc34a;fill-opacity:1;stroke:none;stroke-width:6.62765312;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+      id="path4571"
+      cx="127.37563"
+      cy="65.066956"
+      r="55.672287"/>
     <ellipse
-       style="fill:#8bc34a;fill-opacity:1;stroke:none;stroke-width:5.33326387;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="path4620"
-       cx="127.37563"
-       cy="191.32233"
-       rx="90"
-       ry="43.803303" />
+      style="fill:#8bc34a;fill-opacity:1;stroke:none;stroke-width:5.33326387;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+      id="path4620"
+      cx="127.37563"
+      cy="191.32233"
+      rx="90"
+      ry="43.803303"/>
   </g>
 </svg>
diff --git a/src/assets/images/gv-logo-flat.svg b/src/assets/images/gv-logo-flat.svg
index b23d0b4..670a4c1 100755
--- a/src/assets/images/gv-logo-flat.svg
+++ b/src/assets/images/gv-logo-flat.svg
@@ -2,75 +2,74 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="64px"
-   height="64px"
-   viewBox="0 0 64 64"
-   version="1.1"
-   id="SVGRoot"
-   inkscape:version="0.92.4 5da689c313, 2019-01-14"
-   sodipodi:docname="gv-flat-logo.svg">
+  xmlns:dc="http://purl.org/dc/elements/1.1/"
+  xmlns:cc="http://creativecommons.org/ns#"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+  width="64px"
+  height="64px"
+  viewBox="0 0 64 64"
+  version="1.1"
+  id="SVGRoot"
+  inkscape:version="0.92.4 5da689c313, 2019-01-14"
+  sodipodi:docname="gv-flat-logo.svg">
   <defs
-     id="defs3412" />
+    id="defs3412"/>
   <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="8"
-     inkscape:cx="-2.5119393"
-     inkscape:cy="36.206241"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer2"
-     showgrid="false"
-     inkscape:window-width="1920"
-     inkscape:window-height="1131"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:grid-bbox="true" />
+    id="base"
+    pagecolor="#ffffff"
+    bordercolor="#666666"
+    borderopacity="1.0"
+    inkscape:pageopacity="0.0"
+    inkscape:pageshadow="2"
+    inkscape:zoom="8"
+    inkscape:cx="-2.5119393"
+    inkscape:cy="36.206241"
+    inkscape:document-units="px"
+    inkscape:current-layer="layer2"
+    showgrid="false"
+    inkscape:window-width="1920"
+    inkscape:window-height="1131"
+    inkscape:window-x="0"
+    inkscape:window-y="0"
+    inkscape:window-maximized="1"
+    inkscape:grid-bbox="true"/>
   <metadata
-     id="metadata3415">
+    id="metadata3415">
     <rdf:RDF>
       <cc:Work
-         rdf:about="">
+        rdf:about="">
         <dc:format>image/svg+xml</dc:format>
         <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+          rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
         <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
   <g
-     inkscape:groupmode="layer"
-     id="layer2"
-     inkscape:label="Layer 2"
-     style="display:inline">
+    inkscape:groupmode="layer"
+    id="layer2"
+    inkscape:label="Layer 2"
+    style="display:inline">
     <path
-       style="fill:none;stroke:#8bc34a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 59.638425,10.982918 c -2.598034,1.65974 -5.164767,1.536797 -6.79245,1.598268 -1.627684,0.06147 -7.89147,-0.248912 -10.548644,-0.307359 -2.031158,-0.04467 -10.408921,-0.634292 -18.029729,3.227272 -6.189793,3.136452 -10.030686,7.78418 -11.299883,11.09567 -1.095556,2.858442 -1.721588,5.317315 -1.095556,9.896969 0.334798,2.449172 0.916715,4.631314 0.829032,5.615672 -0.07744,0.869314 0.04741,1.638006 -2.331509,4.035408 -2.3789231,2.397403 -7.5630585,6.702992 -7.5630585,6.702992"
-       id="path3986"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="csssssssc" />
+      style="fill:none;stroke:#8bc34a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+      d="m 59.638425,10.982918 c -2.598034,1.65974 -5.164767,1.536797 -6.79245,1.598268 -1.627684,0.06147 -7.89147,-0.248912 -10.548644,-0.307359 -2.031158,-0.04467 -10.408921,-0.634292 -18.029729,3.227272 -6.189793,3.136452 -10.030686,7.78418 -11.299883,11.09567 -1.095556,2.858442 -1.721588,5.317315 -1.095556,9.896969 0.334798,2.449172 0.916715,4.631314 0.829032,5.615672 -0.07744,0.869314 0.04741,1.638006 -2.331509,4.035408 -2.3789231,2.397403 -7.5630585,6.702992 -7.5630585,6.702992"
+      id="path3986"
+      inkscape:connector-curvature="0"
+      sodipodi:nodetypes="csssssssc"/>
     <path
-       style="fill:none;stroke:#8bc34a;stroke-width:2.81999993;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 17.040936,45.75125 c 0,0 5.71124,1.10058 9.863991,0.923511 4.152753,-0.177069 10.503177,-1.963537 14.640251,-4.074381 2.654809,-1.354554 8.010685,-4.452479 10.623857,-9.671077 1.545586,-3.086589 2.392221,-6.933871 2.615983,-8.836099 0.374688,-3.185266 0.215574,-5.492636 0.858958,-6.968217"
-       id="path3988"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cssssc" />
+      style="fill:none;stroke:#8bc34a;stroke-width:2.81999993;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+      d="m 17.040936,45.75125 c 0,0 5.71124,1.10058 9.863991,0.923511 4.152753,-0.177069 10.503177,-1.963537 14.640251,-4.074381 2.654809,-1.354554 8.010685,-4.452479 10.623857,-9.671077 1.545586,-3.086589 2.392221,-6.933871 2.615983,-8.836099 0.374688,-3.185266 0.215574,-5.492636 0.858958,-6.968217"
+      id="path3988"
+      inkscape:connector-curvature="0"
+      sodipodi:nodetypes="cssssc"/>
     <path
-       style="fill:none;stroke:#8bc34a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 16.515165,41.68934 c 0,0 3.942744,-4.483925 8.75,-9 3.732038,-3.505984 5.757466,-5.519577 10.967068,-8.580806 3.85598,-2.265823 12.426015,-6.277728 15.87316,-7.736136"
-       id="path3990"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cssc" />
+      style="fill:none;stroke:#8bc34a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+      d="m 16.515165,41.68934 c 0,0 3.942744,-4.483925 8.75,-9 3.732038,-3.505984 5.757466,-5.519577 10.967068,-8.580806 3.85598,-2.265823 12.426015,-6.277728 15.87316,-7.736136"
+      id="path3990"
+      inkscape:connector-curvature="0"
+      sodipodi:nodetypes="cssc"/>
   </g>
 </svg>
diff --git a/src/assets/images/gv-logo-white.svg b/src/assets/images/gv-logo-white.svg
index 1e81ce0..5e434ee 100755
--- a/src/assets/images/gv-logo-white.svg
+++ b/src/assets/images/gv-logo-white.svg
@@ -2,75 +2,74 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="64px"
-   height="64px"
-   viewBox="0 0 64 64"
-   version="1.1"
-   id="SVGRoot"
-   inkscape:version="0.92.4 5da689c313, 2019-01-14"
-   sodipodi:docname="gv-new-logo-white.svg">
+  xmlns:dc="http://purl.org/dc/elements/1.1/"
+  xmlns:cc="http://creativecommons.org/ns#"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+  width="64px"
+  height="64px"
+  viewBox="0 0 64 64"
+  version="1.1"
+  id="SVGRoot"
+  inkscape:version="0.92.4 5da689c313, 2019-01-14"
+  sodipodi:docname="gv-new-logo-white.svg">
   <defs
-     id="defs3412" />
+    id="defs3412"/>
   <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="5.656854"
-     inkscape:cx="-16.580479"
-     inkscape:cy="40.712852"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer2"
-     showgrid="false"
-     inkscape:window-width="1920"
-     inkscape:window-height="1003"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:grid-bbox="true" />
+    id="base"
+    pagecolor="#ffffff"
+    bordercolor="#666666"
+    borderopacity="1.0"
+    inkscape:pageopacity="0.0"
+    inkscape:pageshadow="2"
+    inkscape:zoom="5.656854"
+    inkscape:cx="-16.580479"
+    inkscape:cy="40.712852"
+    inkscape:document-units="px"
+    inkscape:current-layer="layer2"
+    showgrid="false"
+    inkscape:window-width="1920"
+    inkscape:window-height="1003"
+    inkscape:window-x="0"
+    inkscape:window-y="0"
+    inkscape:window-maximized="1"
+    inkscape:grid-bbox="true"/>
   <metadata
-     id="metadata3415">
+    id="metadata3415">
     <rdf:RDF>
       <cc:Work
-         rdf:about="">
+        rdf:about="">
         <dc:format>image/svg+xml</dc:format>
         <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+          rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
       </cc:Work>
     </rdf:RDF>
   </metadata>
   <g
-     inkscape:groupmode="layer"
-     id="layer2"
-     inkscape:label="Layer 2"
-     style="display:inline">
+    inkscape:groupmode="layer"
+    id="layer2"
+    inkscape:label="Layer 2"
+    style="display:inline">
     <path
-       style="fill:none;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 59.638425,10.982918 c -2.598034,1.65974 -5.164767,1.536797 -6.79245,1.598268 -1.627684,0.06147 -7.89147,-0.248912 -10.548644,-0.307359 -2.031158,-0.04467 -10.408921,-0.634292 -18.029729,3.227272 -6.189793,3.136452 -10.030686,7.78418 -11.299883,11.09567 -1.095556,2.858442 -1.721588,5.317315 -1.095556,9.896969 0.334798,2.449172 0.916715,4.631314 0.829032,5.615672 -0.07744,0.869314 0.04741,1.638006 -2.331509,4.035408 -2.3789231,2.397403 -7.5630585,6.702992 -7.5630585,6.702992"
-       id="path3986"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="csssssssc" />
+      style="fill:none;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+      d="m 59.638425,10.982918 c -2.598034,1.65974 -5.164767,1.536797 -6.79245,1.598268 -1.627684,0.06147 -7.89147,-0.248912 -10.548644,-0.307359 -2.031158,-0.04467 -10.408921,-0.634292 -18.029729,3.227272 -6.189793,3.136452 -10.030686,7.78418 -11.299883,11.09567 -1.095556,2.858442 -1.721588,5.317315 -1.095556,9.896969 0.334798,2.449172 0.916715,4.631314 0.829032,5.615672 -0.07744,0.869314 0.04741,1.638006 -2.331509,4.035408 -2.3789231,2.397403 -7.5630585,6.702992 -7.5630585,6.702992"
+      id="path3986"
+      inkscape:connector-curvature="0"
+      sodipodi:nodetypes="csssssssc"/>
     <path
-       style="fill:none;stroke:#ffffff;stroke-width:2.81999993;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 17.040936,45.75125 c 0,0 5.71124,1.10058 9.863991,0.923511 4.152753,-0.177069 10.503177,-1.963537 14.640251,-4.074381 2.654809,-1.354554 8.010685,-4.452479 10.623857,-9.671077 1.545586,-3.086589 2.392221,-6.933871 2.615983,-8.836099 0.374688,-3.185266 0.215574,-5.492636 0.858958,-6.968217"
-       id="path3988"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cssssc" />
+      style="fill:none;stroke:#ffffff;stroke-width:2.81999993;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+      d="m 17.040936,45.75125 c 0,0 5.71124,1.10058 9.863991,0.923511 4.152753,-0.177069 10.503177,-1.963537 14.640251,-4.074381 2.654809,-1.354554 8.010685,-4.452479 10.623857,-9.671077 1.545586,-3.086589 2.392221,-6.933871 2.615983,-8.836099 0.374688,-3.185266 0.215574,-5.492636 0.858958,-6.968217"
+      id="path3988"
+      inkscape:connector-curvature="0"
+      sodipodi:nodetypes="cssssc"/>
     <path
-       style="fill:none;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 16.515165,41.68934 c 0,0 3.942744,-4.483925 8.75,-9 3.732038,-3.505984 5.757466,-5.519577 10.967068,-8.580806 3.85598,-2.265823 12.426015,-6.277728 15.87316,-7.736136"
-       id="path3990"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cssc" />
+      style="fill:none;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+      d="m 16.515165,41.68934 c 0,0 3.942744,-4.483925 8.75,-9 3.732038,-3.505984 5.757466,-5.519577 10.967068,-8.580806 3.85598,-2.265823 12.426015,-6.277728 15.87316,-7.736136"
+      id="path3990"
+      inkscape:connector-curvature="0"
+      sodipodi:nodetypes="cssc"/>
   </g>
 </svg>
diff --git a/src/index.html b/src/index.html
index 108d36c..24372da 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,6 +11,6 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
-  <app-root></app-root>
+<app-root></app-root>
 </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index a4a1bf9..a742d37 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,9 +1,9 @@
 import 'hammerjs';
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import {AppModule} from './app/app.module';
+import {environment} from './environments/environment';
 import 'rxjs';
 
 if (environment.production) {
diff --git a/src/polyfills.ts b/src/polyfills.ts
index 8179d14..6d72951 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -61,20 +61,20 @@
  * user can disable parts of macroTask/DomEvents patch by setting following flags
  */
 
- // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 
- /*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
+/*
+* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+* with the following flag, it will bypass `zone.js` patch for IE/Edge
+*/
 // (window as any).__Zone_enable_cross_context_check = true;
 
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js/dist/zone'; // Included with Angular CLI.
 
 
 /***************************************************************************************************
diff --git a/src/styles/greenvironment-material-theme.scss b/src/styles/greenvironment-material-theme.scss
index d3a6b58..f0dc209 100644
--- a/src/styles/greenvironment-material-theme.scss
+++ b/src/styles/greenvironment-material-theme.scss
@@ -1,36 +1,36 @@
 @import '~@angular/material/theming';
 // Plus imports for other components in your app.
 $mat-black: (
-    50 : #e4e4e4,
-    100 : #bcbcbc,
-    200 : #909090,
-    300 : #646464,
-    400 : #424242,
-    500 : #212121,
-    600 : #1d1d1d,
-    700 : #181818,
-    800 : #141414,
-    900 : #0b0b0b,
-    A100 : #e76c6c,
-    A200 : #e04040,
-    A400 : #ec0000,
-    A700 : #d30000,
-    contrast: (
-        50 : #000000,
-        100 : #000000,
-        200 : #000000,
-        300 : #ffffff,
-        400 : #ffffff,
-        500 : #ffffff,
-        600 : #ffffff,
-        700 : #ffffff,
-        800 : #ffffff,
-        900 : #ffffff,
-        A100 : #000000,
-        A200 : #ffffff,
-        A400 : #ffffff,
-        A700 : #ffffff,
-    )
+  50 : #e4e4e4,
+  100 : #bcbcbc,
+  200 : #909090,
+  300 : #646464,
+  400 : #424242,
+  500 : #212121,
+  600 : #1d1d1d,
+  700 : #181818,
+  800 : #141414,
+  900 : #0b0b0b,
+  A100 : #e76c6c,
+  A200 : #e04040,
+  A400 : #ec0000,
+  A700 : #d30000,
+  contrast: (
+    50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #ffffff,
+    400 : #ffffff,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #000000,
+    A200 : #ffffff,
+    A400 : #ffffff,
+    A700 : #ffffff,
+  )
 );
 
 
@@ -44,9 +44,9 @@ $mat-black: (
 // hue. Available color palettes: https://material.io/design/color/
 $primary: mat-palette($mat-light-green);
 $primary-color: mat-color($primary);
-$accent:  mat-palette($mat-light-green);
+$accent: mat-palette($mat-light-green);
 // The warn palette is optional (defaults to red).
-$warn:    mat-palette($mat-red);
+$warn: mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
 $light-theme: mat-light-theme($primary, $accent, $warn);
@@ -59,10 +59,9 @@ $background: map_merge($background, (background: $background-color));
 $light-theme: map_merge($light-theme, (background: $background));
 
 
-
 $dark-primary: mat-palette($mat-light-green);
-$dark-accent:  mat-palette($mat-black);
-$dark-warn:    mat-palette($mat-red);
+$dark-accent: mat-palette($mat-black);
+$dark-warn: mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
 $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
@@ -74,13 +73,14 @@ $dark-background: map_merge($dark-background, (background: $dark-background-colo
 $dark-theme: map_merge($dark-theme, (background: $dark-background));
 
 .dark-theme {
-    @include angular-material-theme($dark-theme);
+  @include angular-material-theme($dark-theme);
 }
 
 .light-theme {
-    @include angular-material-theme($light-theme)
+  @include angular-material-theme($light-theme)
 }
+
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($light-theme);
\ No newline at end of file
+@include angular-material-theme($light-theme);
diff --git a/src/test.ts b/src/test.ts
index 1631789..ee6a363 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -1,11 +1,8 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+import {getTestBed} from '@angular/core/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
 
 declare const require: any;
 
diff --git a/src/tslint.json b/src/tslint.json
index cc64294..fbb6bc7 100644
--- a/src/tslint.json
+++ b/src/tslint.json
@@ -1,19 +1,19 @@
 {
-    "extends": "../tslint.json",
-    "rules": {
-        "directive-selector": [
-            true,
-            "attribute",
-            "app",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "kebab-case"
-        ],
-        "indent": {
-          "options": "spaces"
-        }
+  "extends": "../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "kebab-case"
+    ],
+    "indent": {
+      "options": "spaces"
     }
+  }
 }
diff --git a/src/typings.d.ts b/src/typings.d.ts
index 3eed867..80a3ab9 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -1,5 +1,4 @@
-
 declare module '*.svg' {
-    const svg: string;
-    export default svg;
+  const svg: string;
+  export default svg;
 }