diff --git a/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts b/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts
index aba34bff9..4a06b22d8 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts
@@ -56,7 +56,8 @@ export class DiscoverActorComponent implements AfterViewInit {
                 overview: m.overview,
                 approved: false,
                 imdbid: "",
-                denied: false
+                denied: false,
+                background: ""
             });
         });
     }
diff --git a/src/Ombi/ClientApp/src/app/discover/components/collections/discover-collections.component.ts b/src/Ombi/ClientApp/src/app/discover/components/collections/discover-collections.component.ts
index 108db606c..9008dd8ca 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/collections/discover-collections.component.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/collections/discover-collections.component.ts
@@ -54,7 +54,8 @@ export class DiscoverCollectionsComponent implements OnInit {
                 overview: m.overview,
                 approved: m.approved,
                 imdbid: m.imdbId,
-                denied:false
+                denied:false,
+                background: ""
             });
         });
     }
diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
index cb95a7524..25a120304 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
@@ -1,6 +1,6 @@
 <div class="small-middle-container">
     <div class="row justify-content-end">
-        <div class="btn-group col-1 small-space" role="group">
+        <div class="btn-group col-12 col-md-3 small-space" style="float:left;" role="group">
             <mat-button-toggle-group *ngIf="displayOption">
                 <mat-button-toggle [ngClass]="displayOption === DisplayOption.Card ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.Card)"><mat-icon>dashboard</mat-icon></mat-button-toggle>
                 <mat-button-toggle [ngClass]="displayOption === DisplayOption.List ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.List)"><mat-icon>calendar_view_day</mat-icon></mat-button-toggle>
diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts
index c604a3b31..c42a0417d 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts
@@ -270,7 +270,8 @@ export class DiscoverComponent implements OnInit {
                 overview: m.overview,
                 approved: m.approved,
                 imdbid: m.imdbId,
-                denied: false
+                denied: false,
+                background: m.backdropPath
             });
         });
         return tempResults;
@@ -291,7 +292,8 @@ export class DiscoverComponent implements OnInit {
                 overview: m.overview,
                 approved: m.approved,
                 imdbid: m.imdbId,
-                denied: false
+                denied: false,
+                background: m.background
             });
         });
         return tempResults;
diff --git a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html
index a9e876c26..aac17c79c 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html
@@ -15,12 +15,12 @@
 
 
 <div class="top-spacing">
-    <mat-card class="mat-elevation-z8 dark-card">
+    <mat-card class="mat-elevation-z8 dark-card backdrop" [style.background-image]="result.background">
         <div class="row main-container">
-            <div class="col-2">
+            <div class="col-md-2 col-12">
                 <img src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
             </div>
-            <div class="col-8">
+            <div class="col-md-8 col-12">
                 <div class="row">
                     <h1>{{result.title}}</h1>
                 </div>
@@ -38,40 +38,57 @@
                             {{'Common.RequestDenied' | translate}}
                         </mat-chip>
 
-                        <mat-chip *ngIf="result.requested && !result.approved && !result.available && !result.denied" class="requested">
+                        <mat-chip *ngIf="result.requested && !result.approved && !result.available && !result.denied"
+                            class="requested">
                             {{'Common.PendingApproval' | translate}}
                         </mat-chip>
-                        <mat-chip *ngIf="movie && movie.plexUrl">  <a href="{{movie.plexUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}"
-                            >play_circle_outline</mat-icon></a></mat-chip>
-                            <mat-chip *ngIf="movie && movie.embyUrl"> <a href="{{movie.embyUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnEmby' | translate}}"
-                                >play_circle_outline</mat-icon></a></mat-chip>
+                        <mat-chip *ngIf="movie && movie.plexUrl"> <a href="{{movie.plexUrl}}" target="_blank">
+                                <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}">
+                                    play_circle_outline</mat-icon>
+                            </a></mat-chip>
+                        <mat-chip *ngIf="movie && movie.embyUrl"> <a href="{{movie.embyUrl}}" target="_blank">
+                                <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnEmby' | translate}}">
+                                    play_circle_outline</mat-icon>
+                            </a></mat-chip>
 
-                                <mat-chip *ngIf="tv && tv.plexUrl"> <a href="{{tv.plexUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}"
-                                    >play_circle_outline</mat-icon></a></mat-chip>
-                                    <mat-chip *ngIf="tv &&tv.embyUrl"> <a href="{{movie.embyUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnEmby' | translate}}"
-                                        >play_circle_outline</mat-icon></a></mat-chip>
+                        <mat-chip *ngIf="tv && tv.plexUrl"> <a href="{{tv.plexUrl}}" target="_blank">
+                                <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}">
+                                    play_circle_outline</mat-icon>
+                            </a></mat-chip>
+                        <mat-chip *ngIf="tv &&tv.embyUrl"> <a href="{{movie.embyUrl}}" target="_blank">
+                                <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnEmby' | translate}}">
+                                    play_circle_outline</mat-icon>
+                            </a></mat-chip>
                     </mat-chip-list>
                 </div>
                 <div class="row">
 
-<mat-chip-list class="top-spacing">
-        <mat-chip *ngIf="movie && movie.productionCompanies[0]?.name">{{'Discovery.CardDetails.Studio' | translate}}: {{movie.productionCompanies[0].name}}</mat-chip>
+                    <mat-chip-list class="top-spacing">
+                        <mat-chip *ngIf="movie && movie.productionCompanies[0]?.name">
+                            {{'Discovery.CardDetails.Studio' | translate}}: {{movie.productionCompanies[0].name}}
+                        </mat-chip>
 
-        <mat-chip *ngIf="tv && tv.network?.name">{{'Discovery.CardDetails.Network' | translate}}: {{tv.network.name}}</mat-chip>
+                        <mat-chip *ngIf="tv && tv.network?.name">{{'Discovery.CardDetails.Network' | translate}}:
+                            {{tv.network.name}}</mat-chip>
 
-        <mat-chip *ngIf="movie && movie.credits?.crew[0]?.name">{{'Discovery.CardDetails.Director' | translate}}: {{movie.credits.crew[0].name}}</mat-chip>
+                        <mat-chip *ngIf="movie && movie.credits?.crew[0]?.name">
+                            {{'Discovery.CardDetails.Director' | translate}}: {{movie.credits.crew[0].name}}</mat-chip>
 
-        <mat-chip *ngIf="tvCreator">Director: {{tvCreator}}</mat-chip>
+                        <mat-chip *ngIf="tvCreator">Director: {{tvCreator}}</mat-chip>
 
-        <mat-chip *ngIf="movie">{{'Discovery.CardDetails.InCinemas' | translate}}: {{movie.releaseDate | amLocal | amDateFormat: 'LL'}}</mat-chip>
+                        <mat-chip *ngIf="movie">{{'Discovery.CardDetails.InCinemas' | translate}}:
+                            {{movie.releaseDate | amLocal | amDateFormat: 'LL'}}</mat-chip>
 
-        <mat-chip *ngIf="tv">{{'Discovery.CardDetails.FirstAired' | translate}}: {{tv.firstAired | amLocal | amDateFormat: 'LL'}}</mat-chip>
+                        <mat-chip *ngIf="tv">{{'Discovery.CardDetails.FirstAired' | translate}}:
+                            {{tv.firstAired | amLocal | amDateFormat: 'LL'}}</mat-chip>
 
-        <mat-chip *ngIf="movie && movie.credits?.crew[1]?.name">{{'Discovery.CardDetails.Writer' | translate}}: {{movie.credits.crew[1].name}}</mat-chip>
+                        <mat-chip *ngIf="movie && movie.credits?.crew[1]?.name">
+                            {{'Discovery.CardDetails.Writer' | translate}}: {{movie.credits.crew[1].name}}</mat-chip>
 
-        <mat-chip *ngIf="tv">{{'Discovery.CardDetails.ExecProducer' | translate}}: {{tvProducer}}</mat-chip>
+                        <mat-chip *ngIf="tv">{{'Discovery.CardDetails.ExecProducer' | translate}}: {{tvProducer}}
+                        </mat-chip>
 
-</mat-chip-list>
+                    </mat-chip-list>
 
 
 
@@ -81,24 +98,26 @@
                 </div>
             </div>
 
-            <div class="col-2" >
-                <div  style="float:right;">
-                <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
+            <div class="col-md-2 col-12">
+                <div style="float:right;">
+                    <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
                     'Common.ViewDetails' | translate }}</button>
                     <div *ngIf="movie">
                         <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
                         'Common.Available' | translate }}</button>
                         <span *ngIf="!movie.available">
-                            <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
+                            <span
+                                *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
                             <ng-template #requestedBtn>
-                                <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i class="fa fa-check"></i>
+                                <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i
+                                        class="fa fa-check"></i>
                                     {{ 'Common.Requested' | translate }}</button>
                             </ng-template>
                             <ng-template #notRequestedBtn>
                                 <button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
-                        <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
-                          *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
-                        <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
+                                    <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i>
+                                    <i *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
+                                    <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
                         'Common.Request' | translate }}</button>
                             </ng-template>
                         </span>
@@ -113,24 +132,26 @@
                                 <span class="caret"></span>
                             </button>
                         </div>
-            
-                        <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent" [disabled]>
-                            <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
-                          <button *ngIf="tv.partlyAvailable && !tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent"
+
+                        <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent"
                             [disabled]>
+                            <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
+                        <button *ngIf="tv.partlyAvailable && !tv.fullyAvailable" mat-raised-button class="btn-spacing"
+                            color="accent" [disabled]>
                             <i class="fa fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
-            
+
                         <span *ngIf="tv.available">
-                            <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
-                                href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
+                            <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right"
+                                class="btn-spacing btn-greem" href="{{tv.plexUrl}}" target="_blank"><i
+                                    class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
                                 translate}}</a>
                             <a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
                                 target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
                                 translate}}</a>
                         </span>
                     </div>
+                </div>
             </div>
         </div>
-        </div>
     </mat-card>
 </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss
index 3e05e3c48..caecaddb0 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss
+++ b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss
@@ -129,4 +129,9 @@ small {
 
 .overview {
     font-size: 1.2em;
+}
+
+.backdrop {
+    background-position: 50% 33%;
+    background-size: cover;
 }
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts
index 6e51985ce..4c28c1174 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts
+++ b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts
@@ -1,13 +1,14 @@
 import { Component, OnInit, Input } from "@angular/core";
 import { IDiscoverCardResult } from "../../interfaces";
 import { RequestType, ISearchTvResult, ISearchMovieResult, ISearchMovieResultContainer } from "../../../interfaces";
-import { RequestService, SearchV2Service } from "../../../services";
+import { ImageService, RequestService, SearchV2Service } from "../../../services";
 import { MatDialog } from "@angular/material/dialog";
 import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
 import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
 import { EpisodeRequestComponent } from "../../../shared/episode-request/episode-request.component";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { Router } from "@angular/router";
+import { DomSanitizer } from "@angular/platform-browser";
 
 @Component({
     selector: "discover-grid",
@@ -27,7 +28,7 @@ export class DiscoverGridComponent implements OnInit {
 
     constructor(private searchService: SearchV2Service, private dialog: MatDialog,
                 private requestService: RequestService, private notification: MatSnackBar,
-                private router: Router) { }
+                private router: Router, private sanitizer: DomSanitizer, private imageService: ImageService) { }
 
     public ngOnInit() {
         if (this.result.type == RequestType.tvShow) {
@@ -54,7 +55,7 @@ export class DiscoverGridComponent implements OnInit {
         if (crewResult && crewResult.person) {
             this.tvProducer = crewResult.person.name;
         }
-
+        this.setTvBackground();
     }
 
     public openDetails() {
@@ -85,9 +86,30 @@ export class DiscoverGridComponent implements OnInit {
                     this.movie = m;
                     this.updateMovieItem(m);
                 });
+
+                this.setMovieBackground()
         // }
     }
 
+    private setMovieBackground(): void {
+                this.result.background = this.sanitizer.bypassSecurityTrustStyle
+                    ("linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(" + "https://image.tmdb.org/t/p/original" + this.result.background + ")");
+            }
+
+            private setTvBackground(): void {
+                        if (this.result.background != null) {
+                            this.result.background = this.sanitizer.bypassSecurityTrustStyle
+                                ("linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(https://image.tmdb.org/t/p/original" + this.result.background + ")");
+                        } else {
+                            this.imageService.getTvBanner(this.result.id).subscribe(x => {
+                                if (x) {
+                                    this.result.background = this.sanitizer.bypassSecurityTrustStyle
+                                        ("linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(" + x + ")");
+                                }
+                            });
+                        }
+                    }
+
     private updateMovieItem(updated: ISearchMovieResultV2) {
         this.result.url = "http://www.imdb.com/title/" + updated.imdbId + "/";
         this.result.available = updated.available;
diff --git a/src/Ombi/ClientApp/src/app/discover/interfaces.ts b/src/Ombi/ClientApp/src/app/discover/interfaces.ts
index f17cd9768..8a3276a2d 100644
--- a/src/Ombi/ClientApp/src/app/discover/interfaces.ts
+++ b/src/Ombi/ClientApp/src/app/discover/interfaces.ts
@@ -13,6 +13,7 @@ export interface IDiscoverCardResult {
     rating: number;
     overview: string;
     imdbid: string;
+    background: string|any;
 }
 
 export enum DiscoverOption {