diff --git a/src/Ombi/ClientApp/angular.json b/src/Ombi/ClientApp/angular.json
index 24b0a4c8e..867fd9a87 100644
--- a/src/Ombi/ClientApp/angular.json
+++ b/src/Ombi/ClientApp/angular.json
@@ -1,103 +1,104 @@
 {
-    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-    "version": 1,
-    "newProjectRoot": "projects",
-    "projects": {
-      "ombi": {
-        "root": "",
-        "sourceRoot": "src",
-        "projectType": "application",
-        "prefix": "app",
-        "schematics": {},
-        "architect": {
-          "build": {
-            "builder": "@angular-devkit/build-angular:browser",
-            "options": {
-              "progress": true,
-              "extractCss": true,
-              "outputPath": "dist",
-              "index": "src/index.html",
-              "main": "src/main.ts",
-              "polyfills": "src/polyfills.ts",
-              "tsConfig": "src/tsconfig.app.json",
-              "assets": [
-                "src/assets"
-              ],
-              "styles": [
-                "node_modules/pace/themes/orange/pace-theme-flash.css",
-                "node_modules/primeng/resources/primeng.min.css",
-                "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
-                "node_modules/font-awesome/scss/font-awesome.scss",
-                "node_modules/bootswatch/superhero/bootstrap.min.css"
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ombi": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "progress": true,
+            "extractCss": true,
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles/styles.scss",
+              "node_modules/bootstrap/scss/bootstrap.scss",
+              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
+              "node_modules/pace/themes/orange/pace-theme-flash.css",
+              "node_modules/font-awesome/scss/font-awesome.scss"
+            ],
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/chart.js/dist/Chart.js",
+              "node_modules/hammerjs/hammer.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
               ],
-              "scripts": [
-                "node_modules/jquery/dist/jquery.min.js"
-              ]
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
             },
-            "configurations": {
-              "production": {
-                "fileReplacements": [
-                  {
-                    "replace": "src/environments/environment.ts",
-                    "with": "src/environments/environment.prod.ts"
-                  }
-                ],
-                "optimization": true,
-                "outputHashing": "all",
-                "sourceMap": false,
-                "extractCss": true,
-                "namedChunks": false,
-                "aot": true,
-                "extractLicenses": true,
-                "vendorChunk": false,
-                "buildOptimizer": true
-              },
-              "hmr": {
-                "fileReplacements": [
-                  {
-                    "replace": "src/environments/environment.ts",
-                    "with": "src/environments/environment.hmr.ts"
-                  }
-                ]
-              }
+            "hmr": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.hmr.ts"
+                }
+              ]
             }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "ombi:build"
           },
-          "serve": {
-            "builder": "@angular-devkit/build-angular:dev-server",
-            "options": {
-              "browserTarget": "ombi:build"
+          "configurations": {
+            "production": {
+              "browserTarget": "ombi:build:production"
             },
-            "configurations": {
-              "production": {
-                "browserTarget": "ombi:build:production"
-              },
-              "hmr": {
-                "hmr": true,
-                "browserTarget": "ombi:build:hmr",
-                "hmrWarning": false
-              }
-            }
-          },
-          "extract-i18n": {
-            "builder": "@angular-devkit/build-angular:extract-i18n",
-            "options": {
-              "browserTarget": "ombi:build"
-            }
-          },
-          "lint": {
-            "builder": "@angular-devkit/build-angular:tslint",
-            "options": {
-              "tsConfig": [
-                "src/tsconfig.app.json"
-              ],
-              "exclude": [
-                "**/node_modules/**"
-              ]
+            "hmr": {
+              "hmr": true,
+              "browserTarget": "ombi:build:hmr",
+              "hmrWarning": false
             }
           }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ombi:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
         }
       }
-    },
-    "defaultProject": "ombi"
-  }
-  
\ No newline at end of file
+    }
+  },
+  "defaultProject": "ombi"
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/package.json b/src/Ombi/ClientApp/package.json
index 8ecf15a56..f2515bc07 100644
--- a/src/Ombi/ClientApp/package.json
+++ b/src/Ombi/ClientApp/package.json
@@ -24,18 +24,19 @@
     "@angularclass/hmr": "^2.1.3",
     "@aspnet/signalr": "^1.1.0",
     "@auth0/angular-jwt": "^2.1.0",
-    "@ng-bootstrap/ng-bootstrap": "^3.3.1",
+    "@ng-bootstrap/ng-bootstrap": "^4.0.1",
     "@ngu/carousel": "^1.4.9-beta-2",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
     "@types/jquery": "^3.3.29",
     "@yellowspot/ng-truncate": "^1.4.0",
+    "angular-bootstrap-md": "^7.3.0",
     "angular-router-loader": "^0.8.5",
     "angular2-template-loader": "^0.6.2",
     "aspnet-prerendering": "^3.0.1",
     "awesome-typescript-loader": "^5.2.0",
-    "bootstrap": "3.4.0",
-    "bootswatch": "3.4.0",
+    "bootstrap": "^4.2.1",
+    "chart.js": "2.5.0",
     "core-js": "^2.5.4",
     "eventemitter2": "^5.0.1",
     "font-awesome": "^4.7.0",
diff --git a/src/Ombi/ClientApp/src/app/app.component.html b/src/Ombi/ClientApp/src/app/app.component.html
index 08c153f31..8a6474993 100644
--- a/src/Ombi/ClientApp/src/app/app.component.html
+++ b/src/Ombi/ClientApp/src/app/app.component.html
@@ -1,5 +1,5 @@
 <div [ngClass]="user.name && roleClass()">
-    <p-growl [value]="notificationService.messages" [life]="3000"></p-growl>
+    <!-- <p-growl [value]="notificationService.messages" [life]="3000"></p-growl>
     <nav *ngIf="showNav" class="navbar navbar-default navbar-fixed-top">
         <div class="container-fluid">
             <div class="navbar-header">
@@ -162,8 +162,10 @@
                 </ul>
             </div>
         </div>
-    </nav>
+    </nav> -->
+    
 
+<app-nav></app-nav>
 
     <div [ngClass]="{'container top-spacing': showNav}" id="{{currentUrl}}">
         <router-outlet></router-outlet>
diff --git a/src/Ombi/ClientApp/src/app/app.component.ts b/src/Ombi/ClientApp/src/app/app.component.ts
index 971fce50b..934a6151e 100644
--- a/src/Ombi/ClientApp/src/app/app.component.ts
+++ b/src/Ombi/ClientApp/src/app/app.component.ts
@@ -10,7 +10,7 @@ import { JobService, SettingsService } from "./services";
 import { ICustomizationSettings, ICustomPage } from "./interfaces";
 
 @Component({
-    selector: "ombi",
+    selector: "app-ombi",
     templateUrl: "./app.component.html",
     styleUrls: ["./app.component.scss"],
 })
diff --git a/src/Ombi/ClientApp/src/app/app.module.ts b/src/Ombi/ClientApp/src/app/app.module.ts
index 6917cc85b..4620a8017 100644
--- a/src/Ombi/ClientApp/src/app/app.module.ts
+++ b/src/Ombi/ClientApp/src/app/app.module.ts
@@ -3,7 +3,6 @@ import { HttpClient, HttpClientModule } from "@angular/common/http";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { HttpModule } from "@angular/http";
-import { MatButtonModule, MatCardModule, MatInputModule, MatTabsModule } from "@angular/material";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { RouterModule, Routes } from "@angular/router";
@@ -19,6 +18,12 @@ import { GrowlModule } from "primeng/components/growl/growl";
 import { ButtonModule, CaptchaModule, ConfirmationService, ConfirmDialogModule, DataTableModule, DialogModule, OverlayPanelModule, SharedModule, SidebarModule,
     TooltipModule } from "primeng/primeng";
 
+    import {
+        MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule} from '@angular/material';
+        import {  MatCardModule, MatInputModule, MatTabsModule } from "@angular/material";
+
+import { MDBBootstrapModule, CardsFreeModule, NavbarModule } from "angular-bootstrap-md";
+
 // Components
 import { AppComponent } from "./app.component";
 
@@ -34,16 +39,16 @@ import { TokenResetPasswordComponent } from "./login/tokenresetpassword.componen
 // Services
 import { AuthGuard } from "./auth/auth.guard";
 import { AuthService } from "./auth/auth.service";
-import { IdentityService } from "./services";
 import { ImageService } from "./services";
 import { LandingPageService } from "./services";
 import { NotificationService } from "./services";
 import { SettingsService } from "./services";
-import { IssuesService, JobService, PlexTvService, StatusService } from "./services";
+import { IssuesService, JobService, PlexTvService, StatusService, SearchService, IdentityService } from "./services";
+import { NavComponent } from "./nav/nav.component";
 
 const routes: Routes = [
     { path: "*", component: PageNotFoundComponent },
-    { path: "", redirectTo: "/search", pathMatch: "full" },
+    { path: "", redirectTo: "/home", pathMatch: "full" },
     { path: "login", component: LoginComponent },
     { path: "Login/OAuth/:pin", component: LoginOAuthComponent },
     { path: "Custom", component: CustomPageComponent },
@@ -52,6 +57,7 @@ const routes: Routes = [
     { path: "token", component: TokenResetPasswordComponent },
     { path: "landingpage", component: LandingPageComponent },
     { path: "auth/cookie", component: CookieComponent },
+    { loadChildren: "./home/home.module#HomeModule", path: "home" },
     { loadChildren: "./issues/issues.module#IssuesModule", path: "issues" },
     { loadChildren: "./settings/settings.module#SettingsModule", path: "Settings" },
     { loadChildren: "./wizard/wizard.module#WizardModule", path: "Wizard" },
@@ -95,6 +101,7 @@ export function JwtTokenGetter() {
         NgxEditorModule,
         DialogModule,
         MatButtonModule,
+        NavbarModule,
         NgbModule.forRoot(),
         MatCardModule,
         MatInputModule,
@@ -105,6 +112,8 @@ export function JwtTokenGetter() {
         ConfirmDialogModule,
         OverlayPanelModule,
         CommonModule,
+        CardsFreeModule,
+        MDBBootstrapModule.forRoot(),
         JwtModule.forRoot({
             config: {
                 tokenGetter: JwtTokenGetter,
@@ -118,6 +127,7 @@ export function JwtTokenGetter() {
             },
         }),
         SidebarModule,
+        MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule,
     ],
     declarations: [
         AppComponent,
@@ -129,6 +139,7 @@ export function JwtTokenGetter() {
         CustomPageComponent,
         CookieComponent,
         LoginOAuthComponent,
+        NavComponent,
     ],
     providers: [
         NotificationService,
@@ -144,6 +155,7 @@ export function JwtTokenGetter() {
         JobService,
         IssuesService,
         PlexTvService,
+        SearchService,
     ],
     bootstrap: [AppComponent],
 })
diff --git a/src/Ombi/ClientApp/src/app/home/home.component.html b/src/Ombi/ClientApp/src/app/home/home.component.html
new file mode 100644
index 000000000..c055c8cb5
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/home/home.component.html
@@ -0,0 +1,6 @@
+<h3>Movies</h3>
+<popular-movies></popular-movies>
+    <mat-divider></mat-divider>
+<h3>TV Shows</h3>
+
+<popular-tv></popular-tv>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/home/home.component.ts b/src/Ombi/ClientApp/src/app/home/home.component.ts
new file mode 100644
index 000000000..0e9dee3f7
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/home/home.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from "@angular/core";
+import { SearchService } from "../services";
+import { ISearchMovieResult, ISearchTvResult } from "../interfaces";
+
+@Component({
+    templateUrl: "./home.component.html",
+})
+export class HomeComponent implements OnInit {
+
+    public movies: ISearchMovieResult[];
+    public tvShows: ISearchTvResult[];
+
+    public defaultTvPoster: string;
+
+    constructor(private searchService: SearchService) {
+
+    }
+    public ngOnInit() {
+        this.defaultTvPoster = "../../../images/default_tv_poster.png";
+        this.searchService.popularMovies().subscribe(x => this.movies = x);
+        this.searchService.popularTv().subscribe(x => this.tvShows = x);
+    }
+}
diff --git a/src/Ombi/ClientApp/src/app/home/home.module.ts b/src/Ombi/ClientApp/src/app/home/home.module.ts
new file mode 100644
index 000000000..cd66988cb
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/home/home.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { SearchService } from "../services";
+
+import { AuthGuard } from "../auth/auth.guard";
+
+import { SharedModule } from "../shared/shared.module";
+import { HomeComponent } from "./home.component";
+import { PopularMoviesComponent } from "./movies/popular-movies.component";
+import { PopularTvComponent } from "./tv/popular-tv.component";
+
+const routes: Routes = [
+    { path: "", component: HomeComponent, canActivate: [AuthGuard] },
+];
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes),
+        SharedModule,
+    ],
+    declarations: [
+        HomeComponent,
+        PopularMoviesComponent,
+        PopularTvComponent,
+    ],
+    exports: [
+        RouterModule,
+    ],
+    providers: [
+        SearchService
+        ],
+
+})
+export class HomeModule { }
diff --git a/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.html b/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.html
new file mode 100644
index 000000000..2e98006cd
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.html
@@ -0,0 +1,16 @@
+
+<div *ngIf="movies" class="row">
+        <div class="col-lg-2 col-md-4 col-6" *ngFor="let movie of movies">
+            <mat-card>
+    
+                <img mat-card-image src="https://image.tmdb.org/t/p/w300/{{movie.posterPath}}" alt="{{movie.title}}">
+                <mat-card-content>
+    
+                    <h5>{{movie.title}}</h5>
+                </mat-card-content>
+                <mat-card-actions>
+                    <button mat-raised-button color="primary">Request</button>
+                </mat-card-actions>
+            </mat-card>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.ts b/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.ts
new file mode 100644
index 000000000..0c31a4acc
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/home/movies/popular-movies.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from "@angular/core";
+import { SearchService } from "../../services";
+import { ISearchMovieResult, ISearchTvResult } from "../../interfaces";
+
+@Component({
+    selector:"popular-movies",
+    templateUrl: "./popular-movies.component.html",
+})
+export class PopularMoviesComponent implements OnInit {
+
+    public movies: ISearchMovieResult[];
+
+    constructor(private searchService: SearchService) {
+
+    }
+    public ngOnInit() {
+        this.searchService.popularMovies().subscribe(x => this.movies = x);
+    }
+}
diff --git a/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.html b/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.html
new file mode 100644
index 000000000..99eadbd90
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.html
@@ -0,0 +1,15 @@
+<div *ngIf="tvShows" class="row">
+        <div class="col-lg-2 col-md-4 col-6" *ngFor="let tv of tvShows">
+            <mat-card>
+    
+                <img mat-card-image src="{{tv.banner}}" alt="{{tv.title}}">
+                <mat-card-content>
+    
+                    <h5>{{tv.title}}</h5>
+                </mat-card-content>
+                <mat-card-actions>
+                    <button mat-raised-button color="primary">Request</button>
+                </mat-card-actions>
+            </mat-card>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.ts b/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.ts
new file mode 100644
index 000000000..dadda24a9
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/home/tv/popular-tv.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit } from "@angular/core";
+import { SearchService } from "../../services";
+import { ISearchTvResult } from "../../interfaces";
+
+@Component({
+    selector: "popular-tv",
+    templateUrl: "./popular-tv.component.html",
+})
+export class PopularTvComponent implements OnInit {
+
+    public tvShows: ISearchTvResult[];
+
+    public defaultPoster: string;
+
+    constructor(private searchService: SearchService) {
+
+    }
+
+    public ngOnInit() {
+        this.defaultPoster = "../../../images/default_tv_poster.png";
+        this.searchService.popularTv().subscribe(x => {this.tvShows = x; this.getExtraInfo();});
+    }
+
+    public getExtraInfo() {
+        this.tvShows.forEach((val, index) => {
+            this.searchService.getShowInformation(val.id)
+                .subscribe(x => {
+                    if (x) {
+                        this.setDefaults(x);
+                        this.updateItem(val, x);
+                    } else {
+                        const index = this.tvShows.indexOf(val, 0);
+                        if (index > -1) {
+                            this.tvShows.splice(index, 1);
+                        }
+                    }
+                });
+        });
+    }
+
+    private setDefaults(x: ISearchTvResult) {
+        if (x.banner === null) {
+            x.banner = this.defaultPoster;
+        }
+
+        if (x.imdbId === null) {
+            x.imdbId = "https://www.tvmaze.com/shows/" + x.seriesId;
+        } else {
+            x.imdbId = "http://www.imdb.com/title/" + x.imdbId + "/";
+        }
+    }
+
+    private updateItem(key: ISearchTvResult, updated: ISearchTvResult) {
+        const index = this.tvShows.indexOf(key, 0);
+        if (index > -1) {
+            // Update certain properties, otherwise we will loose some data
+            this.tvShows[index].title = updated.title;
+            this.tvShows[index].banner = updated.banner;
+            this.tvShows[index].imdbId = updated.imdbId;
+            this.tvShows[index].seasonRequests = updated.seasonRequests;
+            this.tvShows[index].seriesId = updated.seriesId;
+            this.tvShows[index].fullyAvailable = updated.fullyAvailable;
+            this.tvShows[index].background = updated.banner;
+        }
+    }
+}
diff --git a/src/Ombi/ClientApp/src/app/nav/nav.component.html b/src/Ombi/ClientApp/src/app/nav/nav.component.html
new file mode 100644
index 000000000..b39a3e2bc
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/nav/nav.component.html
@@ -0,0 +1,22 @@
+<mat-sidenav-container class="sidenav-container">
+  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="isHandset ? 'dialog' : 'navigation'"
+      [mode]="(isHandset | async)!.matches ? 'over' : 'side'" [opened]="!(isHandset | async)!.matches">
+      <mat-toolbar color="primary">Ombi</mat-toolbar>
+      <mat-nav-list>
+          <a mat-list-item routerLink="/">Home</a>
+          <a mat-list-item routerLink="/search">Search</a>
+          <a mat-list-item routerLink="/settings">Settings</a>
+      </mat-nav-list>
+  </mat-sidenav>
+  <mat-sidenav-content>
+      <mat-toolbar color="primary">
+          <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="(isHandset | async)!.matches">
+              <mat-icon aria-label="Side nav toggle icon"></mat-icon>
+          </button>
+
+
+          <span class="example-fill-remaining-space"></span>
+
+      </mat-toolbar>
+  </mat-sidenav-content>
+</mat-sidenav-container>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/nav/nav.component.scss b/src/Ombi/ClientApp/src/app/nav/nav.component.scss
new file mode 100644
index 000000000..727f7191f
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/nav/nav.component.scss
@@ -0,0 +1,17 @@
+.sidenav-container {
+    height: 100%;
+  }
+  
+  .sidenav {
+    width: 200px;
+    box-shadow: 3px 0 6px rgba(0,0,0,.24);
+  }
+  .example-fill-remaining-space {
+    /* This fills the remaining space, by using flexbox. 
+       Every toolbar row uses a flexbox row layout. */
+    flex: 1 1 auto;
+  }
+  
+  .right-spacing {
+    margin-right:2%;
+  }
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/nav/nav.component.ts b/src/Ombi/ClientApp/src/app/nav/nav.component.ts
new file mode 100644
index 000000000..2b0f79ca1
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/nav/nav.component.ts
@@ -0,0 +1,21 @@
+import { BreakpointObserver, Breakpoints, BreakpointState } from "@angular/cdk/layout";
+import { Component } from "@angular/core";
+import { Observable } from "rxjs";
+
+@Component({
+    selector: "app-nav",
+    templateUrl: "./nav.component.html",
+    styleUrls: ["./nav.component.scss"],
+})
+export class NavComponent {
+    public isHandset: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.HandsetPortrait);
+
+    constructor(private breakpointObserver: BreakpointObserver) {
+                    // this.checkLogin();
+                    // this.authService.userLoggedIn.subscribe(x => {
+                    //     this.checkLogin();
+                    // });
+                 }
+
+    
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/search/moviesearch.component.html b/src/Ombi/ClientApp/src/app/search/moviesearch.component.html
index 7d8a4653a..c66cd6383 100644
--- a/src/Ombi/ClientApp/src/app/search/moviesearch.component.html
+++ b/src/Ombi/ClientApp/src/app/search/moviesearch.component.html
@@ -1,4 +1,24 @@
-<!-- Movie tab -->
+<mdb-card>
+    <!--Card image-->
+    <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg" alt="Card image cap"></mdb-card-img>
+    <!--Card content-->
+    <mdb-card-body>
+  
+      <!--Title-->
+      <mdb-card-title>
+        <h4>Card Title</h4>
+      </mdb-card-title>
+  
+      <!--Text-->
+      <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
+        content.
+      </mdb-card-text>
+  
+      <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
+    </mdb-card-body>
+  </mdb-card>
+
+<!-- Movie tab
 <div role="tabpanel" class="tab-pane active" id="MoviesTab">
 
     <div class="input-group search-bar-background">
@@ -25,7 +45,7 @@
             <i class="fa fa-search"></i>
         </div>
     </div>
-    <!-- Refine search options -->
+
     <div class="row top-spacing form-group vcenter" *ngIf="refineSearchEnabled">
         <div class="col-md-1">
             <div class="form-group">
@@ -35,7 +55,6 @@
             </div>
         </div>
 
-        <!-- <label for="name" class="col-xs-2 col-md-1">Language:</label> -->
         <div class="col-md-2">
             <div class="form-group">
                 <label for="select" class="control-label">Language</label>
@@ -63,7 +82,6 @@
 
     <remaining-requests [movie]="true" [quotaRefreshEvents]="movieRequested.asObservable()" #remainingFilms></remaining-requests>
 
-    <!-- Movie content -->
     <div id="movieList">
         <div *ngIf="searchApplied && movieResults?.length <= 0" class='no-search-results'>
             <i class='fa fa-film no-search-results-icon'></i>
@@ -181,4 +199,4 @@
 
 
 <issue-report [movie]="true" [visible]="issuesBarVisible" (visibleChange)="issuesBarVisible = $event;" [title]="issueRequestTitle"
-    [issueCategory]="issueCategorySelected" [id]="issueRequestId" [providerId]="issueProviderId"></issue-report>
\ No newline at end of file
+    [issueCategory]="issueCategorySelected" [id]="issueRequestId" [providerId]="issueProviderId"></issue-report> -->
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/search/search.module.ts b/src/Ombi/ClientApp/src/app/search/search.module.ts
index 4e87940f5..6490076af 100644
--- a/src/Ombi/ClientApp/src/app/search/search.module.ts
+++ b/src/Ombi/ClientApp/src/app/search/search.module.ts
@@ -14,6 +14,8 @@ import { SearchComponent } from "./search.component";
 import { SeriesInformationComponent } from "./seriesinformation.component";
 import { TvSearchComponent } from "./tvsearch.component";
 
+import { CardsFreeModule } from "angular-bootstrap-md";
+
 import { SidebarModule, TooltipModule, TreeTableModule } from "primeng/primeng";
 
 import { RequestService } from "../services";
@@ -38,6 +40,7 @@ const routes: Routes = [
         SharedModule,
         SidebarModule,
         TooltipModule,
+        CardsFreeModule,
     ],
     declarations: [
         SearchComponent,
diff --git a/src/Ombi/ClientApp/src/app/shared/shared.module.ts b/src/Ombi/ClientApp/src/app/shared/shared.module.ts
index e6f7139e2..e6009475d 100644
--- a/src/Ombi/ClientApp/src/app/shared/shared.module.ts
+++ b/src/Ombi/ClientApp/src/app/shared/shared.module.ts
@@ -9,6 +9,10 @@ import { IssuesReportComponent } from "./issues-report.component";
 
 import { InputSwitchModule, SidebarModule } from "primeng/primeng";
 
+import {
+  MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule} from '@angular/material';
+  import {  MatCardModule, MatInputModule, MatTabsModule } from "@angular/material";
+
 @NgModule({
   declarations: [
     IssuesReportComponent,
@@ -20,6 +24,15 @@ import { InputSwitchModule, SidebarModule } from "primeng/primeng";
     InputSwitchModule,
     TruncateModule,
     MomentModule,
+    MatCardModule,
+    MatInputModule,
+    MatTabsModule,
+    MatButtonModule,
+    MatNativeDateModule,
+    MatIconModule, 
+    MatSidenavModule, 
+    MatListModule, 
+    MatToolbarModule,
   ],
   exports: [
       TranslateModule,
@@ -29,7 +42,15 @@ import { InputSwitchModule, SidebarModule } from "primeng/primeng";
       IssuesReportComponent,
       TruncateModule,
       InputSwitchModule,
-      MomentModule,
+      MomentModule,MatCardModule,
+      MatInputModule,
+      MatTabsModule,
+      MatButtonModule,
+      MatNativeDateModule,
+      MatIconModule, 
+      MatSidenavModule, 
+      MatListModule, 
+      MatToolbarModule,
     ],
 })
 export class SharedModule {}
diff --git a/src/Ombi/ClientApp/src/index.html b/src/Ombi/ClientApp/src/index.html
index 6fab48b14..8ec531e73 100644
--- a/src/Ombi/ClientApp/src/index.html
+++ b/src/Ombi/ClientApp/src/index.html
@@ -5,12 +5,13 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Wallboard</title>
+  <title>Ombi</title>
   <base href="/" />
   <link rel="stylesheet" href="/loading.css" />
   <script src="//maps.google.com/maps/api/js?libraries=visualization&key=AIzaSyBDar8LXU5vbURGTMcNLI0f9AsoSnpiV3I" async defer></script>
+  
 </head>
 <body>
-  <ombi><p class="loading">Loading<span>.</span><span>.</span><span>.</span></p></ombi>
+  <app-ombi><p class="loading">Loading<span>.</span><span>.</span><span>.</span></p></app-ombi>
 </body>
 </html>
diff --git a/src/Ombi/ClientApp/src/main.ts b/src/Ombi/ClientApp/src/main.ts
index 944811f45..738e001df 100644
--- a/src/Ombi/ClientApp/src/main.ts
+++ b/src/Ombi/ClientApp/src/main.ts
@@ -7,8 +7,7 @@ import "jquery";
 
 import "bootstrap/dist/js/bootstrap";
 
-import "./styles/base.scss";
-import "./styles/Themes/plex.scss";
+import "./styles/_imports.scss";
 
 import { environment } from "./environments/environment";
 
diff --git a/src/Ombi/ClientApp/src/styles/Styles.scss b/src/Ombi/ClientApp/src/styles/Styles.scss
index e90fde9c3..cfb71f7d0 100644
--- a/src/Ombi/ClientApp/src/styles/Styles.scss
+++ b/src/Ombi/ClientApp/src/styles/Styles.scss
@@ -1,67 +1 @@
-$primary-colour: #df691a;
-$primary-colour-outline: #ff761b;
-$bg-colour: #333333;
-$bg-colour-disabled: #252424;
-
-#customInputSwitch > div > .ui-inputswitch-off {
-    border: 1px solid $bg-colour !important;
-    background: $bg-colour-disabled !important;
-    color: white;
-}
-
-#customInputSwitch > div > .ui-inputswitch-on {
-    border: 1px solid $primary-colour-outline !important;
-    background: $primary-colour !important;
-    color: white;
-}
-
-#dialogOverride > div > .ui-dialog-content {
-    border: 1px solid $bg-colour-disabled !important;
-    background: $bg-colour !important;
-    color: white;
-}
-/*#dialogOverride > div > .ui-dialog-titlebar {
-    background: $primary-colour !important;
-    color: white;
-}*/
-
-.label {
-    margin: 3px;
-}
-
-@media (max-width: 924px) {
-    .navbar-header {
-        float: none;
-    }
-    .navbar-left,.navbar-right {
-        float: none !important;
-    }
-    .navbar-toggle {
-        display: block;
-    }
-    .navbar-collapse {
-        border-top: 1px solid transparent;
-        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
-    }
-    .navbar-fixed-top {
-        top: 0;
-        border-width: 0 0 1px;
-    }
-    .navbar-collapse.collapse {
-        display: none!important;
-    }
-    .navbar-nav {
-        float: none!important;
-        margin-top: 7.5px;
-    }
-    .navbar-nav>li {
-        float: none;
-    }
-    .navbar-nav>li>a {
-        padding-top: 10px;
-        padding-bottom: 10px;
-    }
-    .collapse.in{
-        display:block !important;
-    }
-}
\ No newline at end of file
+@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/styles/_imports.scss b/src/Ombi/ClientApp/src/styles/_imports.scss
index 5b22e1ac4..f59cadf3b 100644
--- a/src/Ombi/ClientApp/src/styles/_imports.scss
+++ b/src/Ombi/ClientApp/src/styles/_imports.scss
@@ -1,2 +1 @@
-@import './Styles.scss';
-@import './scrollbar.scss';
+@import "./styles.scss"
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/tslint.json b/src/Ombi/ClientApp/tslint.json
index 9ff2f5f77..2af1fd722 100644
--- a/src/Ombi/ClientApp/tslint.json
+++ b/src/Ombi/ClientApp/tslint.json
@@ -23,6 +23,7 @@
     "no-internal-module": false,
     "quotemark": [ true, "double", "avoid-template" ],
     "no-console": false,
-    "no-non-null-assertion": false
+    "no-non-null-assertion": false,
+    "experimentalDecorators":true,
   }
 }
diff --git a/src/Ombi/ClientApp/yarn.lock b/src/Ombi/ClientApp/yarn.lock
index d442be033..ba9a63da0 100644
--- a/src/Ombi/ClientApp/yarn.lock
+++ b/src/Ombi/ClientApp/yarn.lock
@@ -224,9 +224,10 @@
   dependencies:
     url "^0.11.0"
 
-"@ng-bootstrap/ng-bootstrap@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-3.3.1.tgz#435eebc57dd4a371d02f342f1e919d1c4bb522a2"
+"@ng-bootstrap/ng-bootstrap@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-4.0.1.tgz#75a6b881b24d869624caa5b5f8a4070650ad5bc4"
+  integrity sha512-COQ6MgZ+HD27pGz2sVPB2ttCZozrjHPs0sayuZkleMvzTllYX/eQEPAOiS+yRsXNkDApi5/XGlIFVWBjxTtwoA==
   dependencies:
     tslib "^1.9.0"
 
@@ -547,6 +548,11 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
+angular-bootstrap-md@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/angular-bootstrap-md/-/angular-bootstrap-md-7.3.0.tgz#cc0db9035553ffe0168049bfac9de92cfe5ee268"
+  integrity sha512-FACXdj+fGe7aA1yNBoFFV6I8Gs9+ithMdGAl4ZJ7DxqD5JudtWqlAwapNpqXzf7r17b9+vIGAAMmVTfcc+i2Dw==
+
 angular-router-loader@^0.8.5:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/angular-router-loader/-/angular-router-loader-0.8.5.tgz#42b378d0914c1ce412b851c1d92b80dbbe4f2fc5"
@@ -969,13 +975,10 @@ bonjour@^3.5.0:
     multicast-dns "^6.0.1"
     multicast-dns-service-types "^1.1.0"
 
-bootstrap@3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.0.tgz#f8d77540dd3062283d2ae7687e21c1e691961640"
-
-bootswatch@3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/bootswatch/-/bootswatch-3.4.0.tgz#712ecbda714fe365e7310a0e20f89829eaea0ffa"
+bootstrap@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.2.1.tgz#8f8bdca024dbf0e8644da32e918c8a03a90a5757"
+  integrity sha512-tt/7vIv3Gm2mnd/WeDx36nfGGHleil0Wg8IeB7eMrVkY0fZ5iTaBisSh8oNANc2IBsCc6vCgCNTIM/IEN0+50Q==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -1226,6 +1229,29 @@ chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
 
+chart.js@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.5.0.tgz#fe6e751a893769f56e72bee5ad91207e1c592957"
+  integrity sha1-/m51Gok3afVucr7lrZEgfhxZKVc=
+  dependencies:
+    chartjs-color "^2.0.0"
+    moment "^2.10.6"
+
+chartjs-color-string@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
+  integrity sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
+  integrity sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=
+  dependencies:
+    chartjs-color-string "^0.5.0"
+    color-convert "^0.5.3"
+
 chokidar@2.0.4, chokidar@^2.0.0, chokidar@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
@@ -1361,6 +1387,11 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
+color-convert@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+  integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -1371,6 +1402,11 @@ color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
 
+color-name@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
 combined-stream@^1.0.6, combined-stream@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
@@ -2361,6 +2397,7 @@ follow-redirects@^1.0.0:
 font-awesome@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+  integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=
 
 for-in@^0.1.3:
   version "0.1.8"
@@ -2608,6 +2645,7 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
 hammerjs@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+  integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
 
 handle-thing@^1.2.5:
   version "1.2.5"
@@ -3849,7 +3887,7 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
   dependencies:
     minimist "0.0.8"
 
-moment@^2.23.0:
+moment@^2.10.6, moment@^2.23.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"