diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
index f23735c46..ecd15dc45 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
@@ -32,68 +32,71 @@
     <section id="info-wrapper">
         <div class="small-middle-container">
 
-            <div class="row justify-content-center justify-content-sm-start">
-
-                <media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
+            <div class="row justify-content-center justify-content-sm-start header-container">
+                <div class="details-poster-container">
+                    <media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
+                </div>
 
                 <!--Next to poster-->
-                <div class="col-12 col-lg-9 col-xl-9 media-row">
-                    <span *ngIf="movie.available">
-                        <a *ngIf="movie.plexUrl" href="{{movie.plexUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn plex">
-                            {{'Search.ViewOnPlex' | translate}} 
-                            <i class="far fa-play-circle fa-2x"></i>
-                        </a>
-                        <a *ngIf="movie.embyUrl" href="{{movie.embyUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn emby">
-                            {{'Search.ViewOnEmby' | translate}} 
-                            <i class="far fa-play-circle fa-2x"></i>
-                        </a>
-                        <a *ngIf="movie.jellyfinUrl" href="{{movie.jellyfinUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
-                            {{'Search.ViewOnJellyfin' | translate}} 
-                            <i class="far fa-play-circle fa-2x"></i>
-                        </a>
-                    </span>
-                        <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
-                            'Common.Available' | translate }}</button>
-                        <span *ngIf="!movie.available">
-                            <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
-                            <ng-template #requestedBtn>
-                                <button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]>
-                                    <i class="fas 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="fas fa-circle-notch fa-spin fa-fw"></i> 
-                                    <i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
-                                    <i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> 
-                                    {{'Common.Request' | translate }}
-                                </button>
-                            </ng-template>
+                <div class="details-button-container">
+                    <div class="col-12 media-row">
+                        <span *ngIf="movie.available">
+                            <a *ngIf="movie.plexUrl" href="{{movie.plexUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn plex">
+                                {{'Search.ViewOnPlex' | translate}} 
+                                <i class="far fa-play-circle fa-2x"></i>
+                            </a>
+                            <a *ngIf="movie.embyUrl" href="{{movie.embyUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn emby">
+                                {{'Search.ViewOnEmby' | translate}} 
+                                <i class="far fa-play-circle fa-2x"></i>
+                            </a>
+                            <a *ngIf="movie.jellyfinUrl" href="{{movie.jellyfinUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
+                                {{'Search.ViewOnJellyfin' | translate}} 
+                                <i class="far fa-play-circle fa-2x"></i>
+                            </a>
                         </span>
-                        <span *ngIf="isAdmin && hasRequest">
-                            <button *ngIf="!movie.approved" (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
-                            <i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
-                            </button>
-                            <button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
-                            color="accent">
-                            <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
-                            </button>
+                            <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
+                                'Common.Available' | translate }}</button>
+                            <span *ngIf="!movie.available">
+                                <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
+                                <ng-template #requestedBtn>
+                                    <button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]>
+                                        <i class="fas 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="fas fa-circle-notch fa-spin fa-fw"></i> 
+                                        <i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
+                                        <i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> 
+                                        {{'Common.Request' | translate }}
+                                    </button>
+                                </ng-template>
+                            </span>
+                            <span *ngIf="isAdmin && hasRequest">
+                                <button *ngIf="!movie.approved" (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
+                                <i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
+                                </button>
+                                <button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
+                                color="accent">
+                                <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
+                                </button>
 
-                            <button *ngIf="movieRequest && !movieRequest.denied && !movie.available" mat-raised-button class="btn-spacing" color="warn" (click)="deny()">
-                                <i class="fas fa-times"></i> {{'Requests.Deny' | translate }}
-                            </button>
-                            <button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
-                                <i class="fas fa-times"></i> {{'MediaDetails.Denied' | translate }}
-                            </button>
-                        </span>
+                                <button *ngIf="movieRequest && !movieRequest.denied && !movie.available" mat-raised-button class="btn-spacing" color="warn" (click)="deny()">
+                                    <i class="fas fa-times"></i> {{'Requests.Deny' | translate }}
+                                </button>
+                                <button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
+                                    <i class="fas fa-times"></i> {{'MediaDetails.Denied' | translate }}
+                                </button>
+                            </span>
 
-                        <button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
-                            <i class="fas fa-exclamation"></i> {{'Requests.ReportIssue' | translate }}
-                        </button>
-                        <button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing">
-                            <i class="fas fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}
-                        </button>
+                            <button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
+                                <i class="fas fa-exclamation"></i> {{'Requests.ReportIssue' | translate }}
+                            </button>
+                            <button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing">
+                                <i class="fas fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}
+                            </button>
+                    </div>
                 </div>
             </div>
 
@@ -134,11 +137,16 @@
 
                     <div class="row" *ngIf="movie.videos?.results?.length > 0">
                         <div class="col-12">
-                            <p-carousel class="no-indicator" [numVisible]="10" [numScroll]="10" [page]="0" [value]="movie.videos?.results">
-                                <ng-template let-result pTemplate="item">
-                                    <iframe width="98%" height="100%" [src]="'https://www.youtube.com/embed/' + result.key | safe" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-                                </ng-template>
-                            </p-carousel>
+                            <mat-card class="mat-elevation-z8">
+                                <mat-card-header>Trailers</mat-card-header>
+                                <mat-card-content>
+                                    <p-carousel class="no-indicator" [numVisible]="2" [numScroll]="10" [page]="0" [value]="movie.videos?.results">
+                                        <ng-template let-result pTemplate="item">
+                                            <iframe width="98%" height="315px" [src]="'https://www.youtube.com/embed/' + result.key | safe" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                                        </ng-template>
+                                    </p-carousel>
+                                </mat-card-content>
+                            </mat-card>
                         </div>
                     </div>
 
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html
index 565af2127..847f51491 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html
@@ -25,7 +25,7 @@
         <i matTooltip="Instagram" class="fab fa-instagram fa-2x grow-social"></i>
     </a>
     <!-- Setting/Configuration admin area -->
-    <button *ngIf="isAdmin" mat-icon-button [matMenuTriggerFor]="menu">
+    <button *ngIf="isAdmin" mat-icon-button [matMenuTriggerFor]="menu" class="admin-cog">
         <i class="fas fa-cog fa-2x "></i>
     </button>
     <mat-menu #menu="matMenu">
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss
index 6e611a04f..1da3e6841 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss
@@ -4,3 +4,7 @@ a.media-icons:hover{
     color:$ombi-active;
 }
 
+button.admin-cog{
+    margin-left:40px;
+    color:$ombi-active;
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html
index 5ab0ad228..570db9b9c 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html
@@ -1,7 +1,8 @@
 
     <section id="summary-wrapper">
         <div class="full-screenshot enabled" [style.background-image]="background"></div>
-        <div class="shadow-base" [ngClass]="available ? 'available-bottom-border' : ''"></div>
+        <div class="full-screenshot enabled overlay"></div>
+        <!--<div class="shadow-base" [ngClass]="available ? 'available-bottom-border' : ''"></div>-->
 
         <div class="container summary">
             <div class="container title-top-banner">
diff --git a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
index 8a3e5a7ed..6e752ce80 100644
--- a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
+++ b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
@@ -14,12 +14,6 @@
     }
 }
 
-@media (max-width: 767px) {
-    #summary-wrapper {
-        height: 350px !important;
-    }
-}
-
 #summary-wrapper .full-screenshot,
 .summary-wrapper .full-screenshot,
 #watching-wrapper .full-screenshot,
@@ -43,7 +37,7 @@
     background-size: cover;
     background-position: 50% 10%;
     transition: all .5s;
-    height: 300px;
+    height: 600px;
     color: #fff;
     position: relative;
 }
@@ -85,7 +79,7 @@
 #summary-wrapper .summary .container,
 .summary-wrapper .summary .container {
     position: absolute;
-    bottom: 0;
+    bottom: 300px;
     left: 0;
     right: 0;
 }
@@ -176,7 +170,8 @@
 }
 
 .media-row {
-    padding-top: 2%;
+    padding-top: 56px;
+    padding-left: 26px;
 }
 
 .cast-profile-img {
@@ -259,3 +254,23 @@
 ::ng-deep .p-carousel-indicators {
     display: none !important;
     }
+
+
+#info-wrapper{
+    margin-top:-200px;
+}
+.full-screenshot.enabled.overlay{
+    background-image: linear-gradient(to bottom, transparent, 50%, $ombi-background-primary);
+}
+
+.row.justify-content-center.justify-content-sm-start.header-container{
+    flex-wrap: nowrap;
+}
+
+.details-button-container{
+    width:100%;
+}
+
+.info-wrapper .row{
+    flex-wrap:wrap;
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/styles/Styles.scss b/src/Ombi/ClientApp/src/styles/Styles.scss
index 711a8878a..f34d199a0 100644
--- a/src/Ombi/ClientApp/src/styles/Styles.scss
+++ b/src/Ombi/ClientApp/src/styles/Styles.scss
@@ -37,6 +37,7 @@
 
     .mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent{
         color: $ombi-active-text;
+        background-color: $ombi-active;
     }
 
     .mat-menu-panel{
@@ -136,3 +137,7 @@
     .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
         background-color: $ombi-active;
     }
+
+    .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab{
+        background-color: $ombi-active;
+    }