diff --git a/frontend/xpirit-beerxchange/package-lock.json b/frontend/xpirit-beerxchange/package-lock.json
index cca1ae4..4677e55 100644
--- a/frontend/xpirit-beerxchange/package-lock.json
+++ b/frontend/xpirit-beerxchange/package-lock.json
@@ -653,6 +653,14 @@
         }
       }
     },
+    "@ng-bootstrap/ng-bootstrap": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-4.2.2.tgz",
+      "integrity": "sha512-v8QmC17bv9he5Ep6zutaI9aQ2w/2NqySP0fejOKe7cacKpGUqsLIakpyd2FD7mfZu7pSCCtHYpRWR+h6yq+Ngg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "7.3.9",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-7.3.9.tgz",
@@ -1109,7 +1117,6 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
       "dev": true,
-      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -2326,8 +2333,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -2726,8 +2732,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "depd": {
       "version": "1.1.2",
@@ -3672,8 +3677,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3694,14 +3698,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3716,20 +3718,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3846,8 +3845,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3859,7 +3857,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3874,7 +3871,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3882,14 +3878,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3908,7 +3902,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3989,8 +3982,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4002,7 +3994,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4088,8 +4079,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4125,7 +4115,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4145,7 +4134,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4189,14 +4177,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -4205,7 +4191,6 @@
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
       "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -4218,7 +4203,6 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
-      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -4256,8 +4240,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "get-stream": {
       "version": "3.0.0",
@@ -4437,8 +4420,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -5197,8 +5179,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "is-windows": {
       "version": "1.0.2",
@@ -5826,7 +5807,6 @@
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
-      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -5839,8 +5819,7 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -6113,8 +6092,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "map-visit": {
       "version": "1.0.0",
@@ -6766,7 +6744,6 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -7802,7 +7779,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
       "dev": true,
-      "optional": true,
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -7814,7 +7790,6 @@
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
-          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -7825,8 +7800,7 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -7835,7 +7809,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "dev": true,
-      "optional": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -7846,7 +7819,6 @@
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -7857,7 +7829,6 @@
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
-          "optional": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -9186,7 +9157,6 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
       "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
       "dev": true,
-      "optional": true,
       "requires": {
         "is-utf8": "^0.2.0"
       }
@@ -10526,7 +10496,6 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
       "dev": true,
-      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }
diff --git a/frontend/xpirit-beerxchange/package.json b/frontend/xpirit-beerxchange/package.json
index bb0438b..700946c 100644
--- a/frontend/xpirit-beerxchange/package.json
+++ b/frontend/xpirit-beerxchange/package.json
@@ -22,6 +22,7 @@
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
+    "@ng-bootstrap/ng-bootstrap": "4.2.2",
     "bootstrap": "^4.3.1",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
diff --git a/frontend/xpirit-beerxchange/src/app/app.component.html b/frontend/xpirit-beerxchange/src/app/app.component.html
index 67bf41f..83ba419 100644
--- a/frontend/xpirit-beerxchange/src/app/app.component.html
+++ b/frontend/xpirit-beerxchange/src/app/app.component.html
@@ -17,21 +17,25 @@
 
     <mat-list>
       <h3 mat-subheader>Beer</h3>
-      <a mat-list-item href="/">
+      <a mat-list-item href="/" (click)="closeNavBar()">
         <h3 matLine>Home</h3>
       </a>
-      <a mat-list-item href="/#add">
+      <a mat-list-item href="/#add" (click)="closeNavBar()">
         <h3 matLine>Add / Switch Beer</h3>
       </a>
-      <a mat-list-item href="/#take">
+      <a mat-list-item href="/#take" (click)="closeNavBar()">
         <h3 matLine>Take Beer</h3>
       </a>
-      <a mat-list-item href="/#transfer">
+      <a mat-list-item href="/#transfer" (click)="closeNavBar()">
         <h3 matLine>Transfer Credits</h3>
       </a>
     </mat-list>
   </mat-sidenav>
   <mat-sidenav-content>
-    <router-outlet></router-outlet>
+    <div class="container top-space">
+      <div class="col-12">
+          <router-outlet></router-outlet>
+      </div>
+    </div>
   </mat-sidenav-content>
 </mat-sidenav-container>
diff --git a/frontend/xpirit-beerxchange/src/app/app.component.ts b/frontend/xpirit-beerxchange/src/app/app.component.ts
index dc6e9c9..d9ac738 100644
--- a/frontend/xpirit-beerxchange/src/app/app.component.ts
+++ b/frontend/xpirit-beerxchange/src/app/app.component.ts
@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { MsalService } from '@azure/msal-angular';
-import { AppConfig } from './app.config';
+import { MatSidenav } from '@angular/material';
 
 @Component({
   selector: 'app-root',
@@ -8,14 +8,18 @@ import { AppConfig } from './app.config';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
+  @ViewChild('sidenav') drawer: MatSidenav;
   title = 'Xpirit Beer XChange';
+  user : any;
 
   constructor(private msal: MsalService) { }
 
-  user : any;
-
   ngOnInit() {
+    this.user = this.msal.getUser();
+  }
 
-    this.user = this.msal.getUser()
+  // Temp solution to close the navBar
+  closeNavBar(): void {
+    this.drawer.close();
   }
 }
diff --git a/frontend/xpirit-beerxchange/src/app/app.module.ts b/frontend/xpirit-beerxchange/src/app/app.module.ts
index a1346d4..19ab18a 100644
--- a/frontend/xpirit-beerxchange/src/app/app.module.ts
+++ b/frontend/xpirit-beerxchange/src/app/app.module.ts
@@ -1,34 +1,38 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+
+import { tap } from 'rxjs/operators';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatRadioModule, MatTableModule, MatPaginatorModule } from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
+import { MSAL_CONFIG, MsalService } from "@azure/msal-angular/dist/msal.service";
+import { MsalModule, MsalInterceptor, MsalConfig } from '@azure/msal-angular';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { MsalModule, MsalInterceptor, MsalConfig } from '@azure/msal-angular';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { AppConfig } from './app.config';
-import { MSAL_CONFIG, MsalService } from "@azure/msal-angular/dist/msal.service";
 import { IAppConfig } from './model/app-config';
-import { tap } from 'rxjs/operators';
 import { HomeComponent } from './components/home/home.component';
 import { AddBeerComponent } from './components/add-beer/add-beer.component';
 import { ViewCreditComponent } from './components/view-credit/view-credit.component';
 import { FridgeBeerlistCurrentComponent } from './components/fridge-beerlist-current/fridge-beerlist-current.component';
 import { FridgeBeerlistHistoryComponent } from './components/fridge-beerlist-history/fridge-beerlist-history.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {MatSelectModule} from '@angular/material/select';
-import { MatRadioModule } from '@angular/material';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+
 import { TransferCreditComponent } from './components/transfer-credit/transfer-credit.component';
 import { TakeBeerComponent } from './components/take-beer/take-beer.component';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatIconModule } from '@angular/material/icon';
-import {MatSidenavModule} from '@angular/material/sidenav';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatButtonModule} from '@angular/material/button';
-import {MatListModule} from '@angular/material/list';
 import { FridgeService } from './services/fridge.service';
 
 export function initializeApp(appConfig: AppConfig) {
@@ -75,11 +79,14 @@ export function msalConfigFactory() {
     MatSelectModule,
     MatMenuModule,
     MatIconModule,
+    MatTableModule,
+    MatPaginatorModule,
     BrowserAnimationsModule,
     MatSidenavModule,
     MatToolbarModule,
     MatButtonModule,
-    MatListModule
+    MatListModule,
+    NgbModule
   ],
   providers: [ 
     FridgeService,
diff --git a/frontend/xpirit-beerxchange/src/app/components/add-beer/add-beer.component.html b/frontend/xpirit-beerxchange/src/app/components/add-beer/add-beer.component.html
index aeb682e..bc5646c 100644
--- a/frontend/xpirit-beerxchange/src/app/components/add-beer/add-beer.component.html
+++ b/frontend/xpirit-beerxchange/src/app/components/add-beer/add-beer.component.html
@@ -2,16 +2,19 @@
   <div class="card-body">
     <form [formGroup]="angForm" (ngSubmit)="onSubmit()">
       <div class="form-group">
-        <label class="col-md-4">Beer Name</label>
-        <input type="text" class="form-control" formControlName="beer_name" />
+        <mat-form-field class="w-100">
+            <input matInput placeholder="Beer name" formControlName="beer_name" />
+        </mat-form-field>
       </div>
       <div class="form-group">
-        <label class="col-md-4">Brewery</label>
-        <input type="text" class="form-control" formControlName="brewery"/>
+        <mat-form-field class="w-100">
+          <input matInput placeholder="Brewery" formControlName="brewery"/>
+        </mat-form-field>
       </div>
       <div class="form-group">
-        <label class="col-md-4">Country</label>
-        <input type="text" class="form-control" formControlName="country"/>
+        <mat-form-field class="w-100">
+          <input matInput placeholder="Country" formControlName="country"/>
+        </mat-form-field>
       </div>
       <mat-form-field>
         <mat-label>Added By</mat-label>
diff --git a/frontend/xpirit-beerxchange/src/app/components/add-beer/add-beer.component.ts b/frontend/xpirit-beerxchange/src/app/components/add-beer/add-beer.component.ts
index 163e664..9bb238a 100644
--- a/frontend/xpirit-beerxchange/src/app/components/add-beer/add-beer.component.ts
+++ b/frontend/xpirit-beerxchange/src/app/components/add-beer/add-beer.component.ts
@@ -54,18 +54,23 @@ export class AddBeerComponent implements OnInit {
   }
 
   onSubmit(){
-    if(this.selectedBeer == -1)
-    {
+    if(this.selectedBeer == -1) {
       this.selectedBeer = null;
     }
     
-    var beer = {beerName: this.angForm.value.beer_name,
-                   brewery: this.angForm.value.brewery,
-                   country: this.angForm.value.country,
-                   addedBy: this.angForm.value.added_by,
-                   switchedBeer: this.angForm.value.switched_for_beer,
-                   } as BeerAddition;
-    this.fridgeService.addBeer(beer);
-    this.router.navigate(["/"]);
+    var beer = {
+      beerName: this.angForm.value.beer_name,
+      brewery: this.angForm.value.brewery,
+      country: this.angForm.value.country,
+      addedBy: this.angForm.value.added_by,
+      switchedBeer: this.angForm.value.switched_for_beer,
+    } as BeerAddition;
+
+    this.fridgeService.addBeer(beer).subscribe(() => {
+      this.router.navigate(["/"]);
+    },(err) => {
+      // TODO: Nette foutmelding tonen
+      alert('Something went wrong');
+    })
   }
 }
diff --git a/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-current/fridge-beerlist-current.component.html b/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-current/fridge-beerlist-current.component.html
index 38e6194..00d3155 100644
--- a/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-current/fridge-beerlist-current.component.html
+++ b/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-current/fridge-beerlist-current.component.html
@@ -1,23 +1,32 @@
-
 <h2>Current beers <span  *ngIf="beers.length > 0">({{beers.length}})</span></h2>
 <p *ngIf="!(beers.length > 0)"><em>Loading beers...</em></p>
-<table class='table table-striped' *ngIf="beers.length > 0">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Brewery</th>
-      <th>Country</th>
-      <th>Added by</th>
-      <th>Added date</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let beer of beers">
-      <td>{{ beer.name }}</td>
-      <td>{{ beer.brewery }}</td>
-      <td>{{ beer.country }}</td>
-      <td>{{ beer.createdBy }}</td>
-      <td>{{ beer.addedDate | date : 'd-M-yyyy' }}</td>
-    </tr>
-  </tbody>
-</table>
\ No newline at end of file
+
+<table mat-table [dataSource]="beers" class="mat-elevation-z8 col-12" *ngIf="beers.length > 0">
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
+  <ng-container matColumnDef="brewery">
+    <th mat-header-cell *matHeaderCellDef> Brewery </th>
+    <td mat-cell *matCellDef="let element"> {{element.brewery}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="country">
+    <th mat-header-cell *matHeaderCellDef> Country </th>
+    <td mat-cell *matCellDef="let element"> {{element.country}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="createdBy">
+    <th mat-header-cell *matHeaderCellDef> Added by </th>
+    <td mat-cell *matCellDef="let element"> {{element.createdBy}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="addedDate">
+    <th mat-header-cell *matHeaderCellDef> Added date </th>
+    <td mat-cell *matCellDef="let element"> {{element.addedDate | date : 'dd-MM-yyyy'}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
+<mat-paginator [pageSizeOptions]="[25, 50, 100]" showFirstLastButtons></mat-paginator>
\ No newline at end of file
diff --git a/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-current/fridge-beerlist-current.component.ts b/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-current/fridge-beerlist-current.component.ts
index b8f4c9c..7c991f0 100644
--- a/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-current/fridge-beerlist-current.component.ts
+++ b/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-current/fridge-beerlist-current.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FridgeService } from 'src/app/services/fridge.service';
 import { Beer } from 'src/app/model/beer';
 import { Subscription, timer } from 'rxjs';
@@ -8,7 +8,8 @@ import { Subscription, timer } from 'rxjs';
   templateUrl: './fridge-beerlist-current.component.html',
   styleUrls: ['./fridge-beerlist-current.component.css']
 })
-export class FridgeBeerlistCurrentComponent implements OnInit {
+export class FridgeBeerlistCurrentComponent implements OnInit, OnDestroy {
+  displayedColumns: string[] = ['name', 'brewery', 'country', 'createdBy', 'createdBy', 'addedDate'];
   private readonly _subscription: Subscription = new Subscription();
 
   constructor(private fridgeService: FridgeService) { }
@@ -27,4 +28,7 @@ export class FridgeBeerlistCurrentComponent implements OnInit {
     }));
   }
 
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
 }
diff --git a/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-history/fridge-beerlist-history.component.html b/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-history/fridge-beerlist-history.component.html
index 7a118fb..9288926 100644
--- a/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-history/fridge-beerlist-history.component.html
+++ b/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-history/fridge-beerlist-history.component.html
@@ -1,27 +1,36 @@
-
 <h2>Fridge history <span  *ngIf="beers.length > 0">({{beers.length}})</span></h2>
-<p *ngIf="!(beers.length > 0)"><em>Loading beers...</em></p>
-<table class='table table-striped' *ngIf="beers.length > 0">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Brewery</th>
-      <th>Country</th>
-      <th>Added by</th>
-      <th>Added date</th>
-      <th>removed by</th>
-      <th>removed date</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngFor="let beer of beers">
-      <td>{{ beer.name }}</td>
-      <td>{{ beer.brewery }}</td>
-      <td>{{ beer.country }}</td>
-      <td>{{ beer.createdBy }}</td>
-      <td>{{ beer.addedDate | date : 'd-M-yyyy' }}</td>
-      <td>{{ beer.removedBy }}</td>
-      <td>{{ beer.removedDate }}</td>
-    </tr>
-  </tbody>
-</table>
\ No newline at end of file
+
+<table mat-table [dataSource]="beers" class="mat-elevation-z8 col-12" *ngIf="beers.length > 0">
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+    <ng-container matColumnDef="brewery">
+      <th mat-header-cell *matHeaderCellDef> Brewery </th>
+      <td mat-cell *matCellDef="let element"> {{element.brewery}} </td>
+    </ng-container>
+    <ng-container matColumnDef="country">
+      <th mat-header-cell *matHeaderCellDef> Country </th>
+      <td mat-cell *matCellDef="let element"> {{element.country}} </td>
+    </ng-container>
+    <ng-container matColumnDef="createdBy">
+      <th mat-header-cell *matHeaderCellDef> Added by </th>
+      <td mat-cell *matCellDef="let element"> {{element.createdBy}} </td>
+    </ng-container>
+    <ng-container matColumnDef="addedDate">
+      <th mat-header-cell *matHeaderCellDef> Added date </th>
+      <td mat-cell *matCellDef="let element"> {{element.addedDate | date : 'dd-MM-yyyy'}} </td>
+    </ng-container>
+    <ng-container matColumnDef="removedBy">
+      <th mat-header-cell *matHeaderCellDef> Removed by </th>
+      <td mat-cell *matCellDef="let element"> {{element.removedBy}} </td>
+    </ng-container>
+    <ng-container matColumnDef="removedDate">
+      <th mat-header-cell *matHeaderCellDef> Removed date </th>
+      <td mat-cell *matCellDef="let element"> {{element.removedDate | date : 'dd-MM-yyyy'}} </td>
+    </ng-container>
+    
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+  <mat-paginator [pageSizeOptions]="[25, 50, 100]" showFirstLastButtons></mat-paginator>
\ No newline at end of file
diff --git a/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-history/fridge-beerlist-history.component.ts b/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-history/fridge-beerlist-history.component.ts
index 9fb0591..9faa0e0 100644
--- a/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-history/fridge-beerlist-history.component.ts
+++ b/frontend/xpirit-beerxchange/src/app/components/fridge-beerlist-history/fridge-beerlist-history.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription, timer } from 'rxjs';
 import { FridgeService } from 'src/app/services/fridge.service';
 import { Beer } from 'src/app/model/beer';
@@ -8,8 +8,9 @@ import { Beer } from 'src/app/model/beer';
   templateUrl: './fridge-beerlist-history.component.html',
   styleUrls: ['./fridge-beerlist-history.component.css']
 })
-export class FridgeBeerlistHistoryComponent implements OnInit {
-
+export class FridgeBeerlistHistoryComponent implements OnInit, OnDestroy {
+  displayedColumns: string[] = ['name', 'brewery', 'country', 'createdBy', 'createdBy', 'addedDate', 'removedBy', 'removedDate'];
+  
   private readonly _subscription: Subscription = new Subscription();
 
   constructor(private fridgeService: FridgeService) { }
@@ -28,4 +29,7 @@ export class FridgeBeerlistHistoryComponent implements OnInit {
     }));
   }
 
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
 }
diff --git a/frontend/xpirit-beerxchange/src/app/components/home/home.component.html b/frontend/xpirit-beerxchange/src/app/components/home/home.component.html
index 012cdfe..2d9b548 100644
--- a/frontend/xpirit-beerxchange/src/app/components/home/home.component.html
+++ b/frontend/xpirit-beerxchange/src/app/components/home/home.component.html
@@ -1,4 +1,6 @@
-
-<app-fridge-beerlist-current></app-fridge-beerlist-current>
-
-<app-fridge-beerlist-history></app-fridge-beerlist-history>
+<div class="bottom-space">
+    <app-fridge-beerlist-current></app-fridge-beerlist-current>
+</div>
+<div class="bottom-space">
+    <app-fridge-beerlist-history></app-fridge-beerlist-history>
+</div>
diff --git a/frontend/xpirit-beerxchange/src/app/components/view-credit/view-credit.component.html b/frontend/xpirit-beerxchange/src/app/components/view-credit/view-credit.component.html
index da85cba..7250af5 100644
--- a/frontend/xpirit-beerxchange/src/app/components/view-credit/view-credit.component.html
+++ b/frontend/xpirit-beerxchange/src/app/components/view-credit/view-credit.component.html
@@ -1 +1 @@
-{{credits}} credits
+{{credits}} credits
\ No newline at end of file
diff --git a/frontend/xpirit-beerxchange/src/app/components/view-credit/view-credit.component.ts b/frontend/xpirit-beerxchange/src/app/components/view-credit/view-credit.component.ts
index f1fe3ad..aab9b13 100644
--- a/frontend/xpirit-beerxchange/src/app/components/view-credit/view-credit.component.ts
+++ b/frontend/xpirit-beerxchange/src/app/components/view-credit/view-credit.component.ts
@@ -1,25 +1,30 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FridgeService } from '../../services/fridge.service';
 import { Subscription } from 'rxjs';
+import { MsalService } from '@azure/msal-angular';
 
 @Component({
   selector: 'app-view-credit',
   templateUrl: './view-credit.component.html',
   styleUrls: ['./view-credit.component.css']
 })
-export class ViewCreditComponent implements OnInit {
+export class ViewCreditComponent implements OnInit, OnDestroy {
   private readonly _subscription: Subscription = new Subscription();
   credits: number;
 
-  constructor(private fridgeService: FridgeService) { }
+  constructor(private fridgeService: FridgeService,
+              private msal: MsalService) { }
 
   ngOnInit() {
+    const user = this.msal.getUser();
 
     this._subscription.add(
-        this.fridgeService.getCreditsForCurrentUser("geert van der Cruijsen").subscribe((credits: number) => {
+        this.fridgeService.getCreditsForCurrentUser(user.name).subscribe((credits: number) => {
             this.credits = credits;
         })
     );
   }
-
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
 }
diff --git a/frontend/xpirit-beerxchange/src/app/services/fridge.service.ts b/frontend/xpirit-beerxchange/src/app/services/fridge.service.ts
index 8d01b63..77cd94c 100644
--- a/frontend/xpirit-beerxchange/src/app/services/fridge.service.ts
+++ b/frontend/xpirit-beerxchange/src/app/services/fridge.service.ts
@@ -28,13 +28,10 @@ export class FridgeService {
     return this.http.get<Array<Beer>>(`${AppConfig.settings.apiUrl}/beer`).map(beers => beers.filter(b => b.removedBy != null));
   }
 
-  addBeer(beer: BeerAddition){
-    console.log(beer);
-    this.http.post(`${AppConfig.settings.apiUrl}/beeraddition`, beer)
-        .subscribe(res => console.log('Done'));
+  addBeer(beer: BeerAddition): Observable<void>{
+    return this.http.post<void>(`${AppConfig.settings.apiUrl}/beeraddition`, beer);
   }
 
-
   takeBeer(beerRemoval: BeerRemoval): Observable<void>{
     return this.http.post<void>(`${AppConfig.settings.apiUrl}/beerremoval`, beerRemoval);
   }
@@ -46,5 +43,4 @@ export class FridgeService {
   getFridgeUsers(): Observable<Array<string>>{
     return this.http.get<Array<string>>(`${AppConfig.settings.apiUrl}/user`);
   }
-
 }
diff --git a/frontend/xpirit-beerxchange/src/styles.css b/frontend/xpirit-beerxchange/src/styles.css
index 828efb7..6fc4dd1 100644
--- a/frontend/xpirit-beerxchange/src/styles.css
+++ b/frontend/xpirit-beerxchange/src/styles.css
@@ -1,6 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import "~bootstrap/dist/css/bootstrap.css";
 
 html,
 body {
@@ -17,8 +18,20 @@ mat-sidenav-content, mat-sidenav-container {
   height: 100%;
 }
 
+mat-sidenav {
+  width: 300px;
+}
+
 .example-fill-remaining-space {
   /* This fills the remaining space, by using flexbox. 
        Every toolbar row uses a flexbox row layout. */
   flex: 1 1 auto;
 }
+
+.bottom-space {
+  margin-bottom: 25px;
+}
+
+.top-space { 
+  margin-top: 25px;
+}
\ No newline at end of file