diff --git a/src/Ombi/ClientApp/src/app/app.component.html b/src/Ombi/ClientApp/src/app/app.component.html
index f265c4320..c547721fa 100644
--- a/src/Ombi/ClientApp/src/app/app.component.html
+++ b/src/Ombi/ClientApp/src/app/app.component.html
@@ -168,7 +168,8 @@
 
     
 <div [ngClass]="user.name && roleClass()">
-    <app-my-nav [showNav]="showNav" [applicationName]="applicationName" [username]="user.name" (logoutClick)="logOut();"></app-my-nav>
+    <app-my-nav [showNav]="showNav" [applicationName]="applicationName" [username]="user.name" (logoutClick)="logOut();"
+    (themeChange)="onSetTheme($event)"></app-my-nav>
 
 
 </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/app.module.ts b/src/Ombi/ClientApp/src/app/app.module.ts
index 691ae1a61..d2b38d782 100644
--- a/src/Ombi/ClientApp/src/app/app.module.ts
+++ b/src/Ombi/ClientApp/src/app/app.module.ts
@@ -23,7 +23,7 @@ import {
 import {
     MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatAutocompleteModule, MatCheckboxModule, MatSnackBarModule
 } from '@angular/material';
-import { MatCardModule, MatInputModule, MatTabsModule } from "@angular/material";
+import { MatCardModule, MatInputModule, MatTabsModule, MatSlideToggleModule } from "@angular/material";
 
 import { MDBBootstrapModule, CardsFreeModule, NavbarModule } from "angular-bootstrap-md";
 
@@ -139,7 +139,7 @@ export function JwtTokenGetter() {
             },
         }),
         SidebarModule,
-        MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, LayoutModule,
+        MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, LayoutModule, MatSlideToggleModule
     ],
     declarations: [
         AppComponent,
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
index e1bca5542..75decb3de 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
@@ -8,11 +8,18 @@
         {{nav.name | translate}}
       </a>    
 
-      <a mat-list-item [routerLinkActive]="['active-list-item']" aria-label="Toggle sidenav" (click)="logOut();">
+      <a class="bottom-nav-link" mat-list-item [routerLinkActive]="['active-list-item']" aria-label="Toggle sidenav" (click)="logOut();">
         <mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
         {{ 'NavigationBar.Logout' | translate }}
       </a>
 
+      <a mat-list-item aria-label="Toggle sidenav" (click)="switchTheme();">
+        <mat-slide-toggle>
+          {{ 'NavigationBar.ChangeTheme' | translate }}
+      </mat-slide-toggle>
+        
+      </a>
+
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
index e2cffe077..763acbfdb 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
@@ -1,6 +1,6 @@
 @import "~styles/variables.scss";
 .sidenav-container {
-    height: 100%;
+    min-height: 100vh;
 }
 
 .sidenav {
@@ -44,4 +44,9 @@
 
 .active-list-item {
     background: $accent !important;
+}
+
+.bottom-nav-link {
+    bottom: 0;
+    position: absolute;
 }
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
index da7aabab6..183f81184 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -16,22 +16,41 @@ export class MyNavComponent {
       map(result => result.matches)
     );
 
-    @Input() public showNav: boolean;
-    @Input() public applicationName: string;
-    @Input() public username: string;
-    @Output() public logoutClick = new EventEmitter();
+  @Input() public showNav: boolean;
+  @Input() public applicationName: string;
+  @Input() public username: string;
+  @Output() public logoutClick = new EventEmitter();
+  @Output() public themeChange = new EventEmitter<string>();
+
 
   constructor(private breakpointObserver: BreakpointObserver) {
   }
 
   public navItems: INavBar[] = [
-    {name: "NavigationBar.Discover", icon: "find_replace", link: "/discover"},
-    {name: "NavigationBar.Search", icon: "search", link: "/search"},
-    {name: "NavigationBar.Requests", icon: "list", link: "/requests"},
-    {name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About"},
-  ] 
+    { name: "NavigationBar.Discover", icon: "find_replace", link: "/discover" },
+    { name: "NavigationBar.Search", icon: "search", link: "/search" },
+    { name: "NavigationBar.Requests", icon: "list", link: "/requests" },
+    { name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About" },
+  ]
 
   public logOut() {
     this.logoutClick.emit();
   }
+
+  public switchTheme() {
+    const theme = localStorage.getItem("theme");
+
+    if (theme) {
+      localStorage.removeItem("theme");
+      let newTheme = "";
+      if (theme === "dark") {
+        newTheme = "light";
+      } else {
+        newTheme = "dark";
+      }
+      localStorage.setItem("theme", newTheme)
+      this.themeChange.emit(newTheme);
+    }
+  }
+
 }
diff --git a/src/Ombi/ClientApp/src/app/request-grid/request-card.component.html b/src/Ombi/ClientApp/src/app/request-grid/request-card.component.html
deleted file mode 100644
index f51a9f898..000000000
--- a/src/Ombi/ClientApp/src/app/request-grid/request-card.component.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<style>
-    
-    /*$bg-colour: #333333;*/
-    .card {
-        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-        transition: 0.3s;
-        border-radius: 5px; /* 5px rounded corners */
-        background: #4f4e4e;
-        border-bottom: #333333 solid 1px;
-        margin-left: 10px;
-        margin-right: 10px;
-        margin-top: 5px;
-    }
-
-    img {
-        border-radius: 5px 5px 0 0;
-    }
-
-    /* On mouse-over, add a deeper shadow */
-    .card:hover {
-        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-    }
-
-    .card-container {
-        padding: 2px 16px;
-    }
-    
-    .image-fill {
-        overflow: hidden;
-        background-size: cover;
-        background-position: center;
-        position: relative;
-    }
-    
-    
-</style>
-
-<div *ngIf="request" class="card" style="color: white;">
-    <div style="position: relative; overflow: hidden;">
-        <img src="{{request.posterPath}}" alt="poster" class="image-fill">
-    </div>
-    <div class="card-container">
-        {{request.title}}
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/request-grid/request-card.component.ts b/src/Ombi/ClientApp/src/app/request-grid/request-card.component.ts
deleted file mode 100644
index aa267ecdb..000000000
--- a/src/Ombi/ClientApp/src/app/request-grid/request-card.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// import { Component, Input } from "@angular/core";
-
-// import { IMediaBase } from "../interfaces";
-
-// @Component({
-//     selector: "request-card",
-//     templateUrl: "./request-card.component.html",
-// })
-// export class RequestCardComponent {
-//     @Input() public request: IMediaBase;
-// }
diff --git a/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.html b/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.html
deleted file mode 100644
index eecd799ed..000000000
--- a/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.html
+++ /dev/null
@@ -1,54 +0,0 @@
-
-<style>
-    .landing-box {
-        background: #333333 !important;
-        border-radius: 2%;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        text-align: center;
-        box-shadow: 5px 3px 5px black;
-    }
-
-    .dragula-container {
-        padding-bottom: 30px;
-    }
-
-    .gu-mirror {
-        margin-left: 100px !important;
-        transform: rotate(4deg);
-        -moz-transform: rotate(4deg);
-        -webkit-transform: rotate(4deg);
-        text-align: center;
-    }
-
-</style>
-
-<div *ngIf="tvRequests">
-    <div class="col-md-4">
-        <h4 class="text-center">New Requests</h4>
-        <div class="landing-box">
-            <div class="dragula-container" [dragula]='"requests-bag"' [dragulaModel]="tvRequests.new">
-                <request-card *ngFor="let item of tvRequests.new" [request]="item"></request-card>
-            </div>
-        </div>
-    </div>
-
-    <div class="col-md-4">
-        <h4 class="text-center">Approved Requests</h4>
-        <div class="landing-box">
-            <div class="dragula-container" [dragula]='"requests-bag"' [dragulaModel]="tvRequests.approved">
-                <request-card *ngFor="let item of tvRequests.approved" [request]="item"></request-card>
-            </div>
-        </div>
-    </div>
-
-    <div class="col-md-4">
-        <h4 class="text-center">Available</h4>
-        <div class="landing-box">
-            <div class="dragula-container" [dragula]='"requests-bag"' [dragulaModel]="tvRequests.available">
-                <request-card *ngFor="let item of tvRequests.available" [request]="item"></request-card>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.ts b/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.ts
deleted file mode 100644
index 142bbf5a1..000000000
--- a/src/Ombi/ClientApp/src/app/request-grid/request-grid.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-//import { Component, OnInit } from '@angular/core';
-//import { DragulaService } from 'ng2-dragula/ng2-dragula';
-//import { RequestService } from '../services";
-//import { ITvRequests, IMovieRequests, IRequestGrid } from '../interfaces";
-
-//@Component({
-//    templateUrl: './request-grid.component.html'
-//})
-//export class RequestGridComponent implements OnInit {
-
-//    constructor(private dragulaService: DragulaService, private requestService: RequestService) {
-//        this.dragulaService.drop.subscribe((value: any) => {
-//        });
-//    }
-
-//    ngOnInit() {
-//        this.requestService.getMovieGrid().subscribe(x => {
-//            this.movieRequests = x;
-//        });
-//        this.requestService.getTvGrid().subscribe(x => {
-//            this.tvRequests = x;
-//        });
-//    }
-
-//    movieRequests: IRequestGrid<IMovieRequests>;
-//    tvRequests: IRequestGrid<ITvRequests>;
-
-//}
diff --git a/src/Ombi/ClientApp/src/styles/shared.scss b/src/Ombi/ClientApp/src/styles/shared.scss
index b9fc09046..14e94f4d0 100644
--- a/src/Ombi/ClientApp/src/styles/shared.scss
+++ b/src/Ombi/ClientApp/src/styles/shared.scss
@@ -1,45 +1,54 @@
 @media (max-width: 978px) {
-    .top-spacing {
-        padding-top: 10%;
-    }
+  .top-spacing {
+    padding-top: 10%;
+  }
 }
 
 @media (min-width: 979px) {
-    .top-spacing {
-        padding-top: 4%;
-    }
+  .top-spacing {
+    padding-top: 4%;
+  }
+}
+
+html, body{ 
+  min-height: 100vh;
+  overflow: auto;
 }
 
 .spinner-container {
-    position: relative;
-    margin-left: 50%;
+  position: relative;
+  margin-left: 50%;
 }
 
 .bottom-page-gap {
-    height: 50px;
+  height: 50px;
 }
 
 
 /* Scrollbar */
 ::-webkit-scrollbar {
-    width: 7px;
-    background: rgba(0, 0, 0, 0);
-  }
-  ::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0);
-  }
-  ::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    background: #41927b;
-  }
-  .sidenav ::-webkit-scrollbar-track {
-    display: none;
-  }
+  width: 7px;
+  background: rgba(0, 0, 0, 0);
+}
 
-  .grow {
-    transition: all .2s ease-in-out;
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
 }
+
+::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: #41927b;
+}
+
+.sidenav ::-webkit-scrollbar-track {
+  display: none;
+}
+
+.grow {
+  transition: all .2s ease-in-out;
+}
+
 .grow:hover {
-    transform: scale(1.1);
-    color: black;
+  transform: scale(1.1);
+  color: black;
 }
diff --git a/src/Ombi/wwwroot/translations/en.json b/src/Ombi/wwwroot/translations/en.json
index 513c67336..63facda83 100644
--- a/src/Ombi/wwwroot/translations/en.json
+++ b/src/Ombi/wwwroot/translations/en.json
@@ -60,7 +60,8 @@
     "UpdateDetails": "Update Details",
     "Logout": "Logout",
     "OpenMobileApp": "Open Mobile App",
-    "RecentlyAdded": "Recently Added"
+    "RecentlyAdded": "Recently Added",
+    "ChangeTheme":"Change Theme"
   },
   "Search": {
     "Title": "Search",