diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index 88598fb94d..ef25435dae 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -438,7 +438,7 @@
     background-repeat: no-repeat;
     background-position: center;
     background-attachment: fixed;
-    height: 50vh;
+    height: 40vh;
     position: relative;
 }
 
@@ -463,10 +463,15 @@
 .detailPageContent {
     display: flex;
     flex-direction: column;
-    padding-left: 2%;
+    padding-left: 32.45vw;
     padding-right: 2%;
 }
 
+.layout-desktop .detailPageContent .emby-scroller,
+.layout-tv .detailPageContent .emby-scroller {
+    margin-left: 0;
+}
+
 .layout-desktop .noBackdrop .detailPageContent,
 .layout-tv .noBackdrop .detailPageContent {
     margin-top: 2.5em;
@@ -569,6 +574,7 @@
 .layout-desktop .detailSticky,
 .layout-tv .detailSticky {
     margin-top: -7.2em;
+    height: 7.18em;
 }
 
 .layout-desktop .noBackdrop .detailSticky,
@@ -595,12 +601,20 @@
 }
 
 .detailImageContainer {
-    position: relative;
-    margin-top: -25vh;
-    margin-bottom: 10vh;
+    position: absolute;
+    top: 50%;
     float: left;
     width: 25vw;
     z-index: 3;
+    transform: translateY(-50%);
+}
+
+.thumbDetailImageContainer {
+    top: 35%;
+}
+
+.squareDetailImageContainer {
+    top: 40%;
 }
 
 .layout-desktop .noBackdrop .detailImageContainer,
@@ -613,11 +627,11 @@
 }
 
 .detailLogo {
-    width: 30vw;
-    height: 25vh;
+    width: 25vw;
+    height: 16vh;
     position: absolute;
     top: 10vh;
-    right: 20vw;
+    right: 25vw;
     background-size: contain;
 }
 
diff --git a/src/controllers/itemDetails.js b/src/controllers/itemDetails.js
index 67aa5f9407..7c53338d21 100644
--- a/src/controllers/itemDetails.js
+++ b/src/controllers/itemDetails.js
@@ -486,7 +486,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
                 index: 0,
                 tag: item.ImageTags.Thumb
             });
-            page.classList.remove('noBackdrop');
             imageLoader.lazyImage(itemBackdropElement, imgUrl);
             hasbackdrop = true;
         } else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) {
@@ -496,7 +495,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
                 index: 0,
                 tag: item.ImageTags.Primary
             });
-            page.classList.remove('noBackdrop');
             imageLoader.lazyImage(itemBackdropElement, imgUrl);
             hasbackdrop = true;
         } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
@@ -506,7 +504,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
                 index: 0,
                 tag: item.BackdropImageTags[0]
             });
-            page.classList.remove('noBackdrop');
             imageLoader.lazyImage(itemBackdropElement, imgUrl);
             hasbackdrop = true;
         } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
@@ -516,7 +513,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
                 index: 0,
                 tag: item.ParentBackdropImageTags[0]
             });
-            page.classList.remove('noBackdrop');
             imageLoader.lazyImage(itemBackdropElement, imgUrl);
             hasbackdrop = true;
         } else if (item.ImageTags && item.ImageTags.Thumb) {
@@ -526,21 +522,12 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
                 index: 0,
                 tag: item.ImageTags.Thumb
             });
-            page.classList.remove('noBackdrop');
             imageLoader.lazyImage(itemBackdropElement, imgUrl);
             hasbackdrop = true;
         } else {
             itemBackdropElement.style.backgroundImage = '';
         }
 
-        if ('Person' === item.Type) {
-            // FIXME: This hides the backdrop on all persons to fix a margin issue. Ideally, a proper fix should be made.
-            page.classList.add('noBackdrop');
-            itemBackdropElement.classList.add('personBackdrop');
-        } else {
-            itemBackdropElement.classList.remove('personBackdrop');
-        }
-
         return hasbackdrop;
     }
 
@@ -2126,9 +2113,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         view.addEventListener('viewshow', function (e) {
             var page = this;
 
-            if (layoutManager.mobile) {
-                libraryMenu.setTransparentMenu(true);
-            }
+            libraryMenu.setTransparentMenu(true);
 
             if (e.detail.isRestored) {
                 if (currentItem) {
diff --git a/src/itemdetails.html b/src/itemdetails.html
index 18de25845c..fff19827f8 100644
--- a/src/itemdetails.html
+++ b/src/itemdetails.html
@@ -1,4 +1,4 @@
-<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage noBackdrop" data-backbutton="true">
+<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
     <div id="itemBackdrop" class="itemBackdrop">
         <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
             <span class="material-icons play_arrow"></span>
@@ -110,7 +110,7 @@
         <div class="detailPageSecondaryContainer">
             <div class="detailImageContainer padded-left"></div>
             <div class="detailPageContent">
-                <div class="detailPagePrimaryContent padded-left padded-right">
+                <div class="detailPagePrimaryContent padded-right">
                     <div class="detailSection">
                         <div class="itemMiscInfo nativeName hide"></div>
 
@@ -164,15 +164,15 @@
                 </div>
 
                 <div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top:-3em;">
-                    <h2 class="sectionTitle padded-left">${HeaderSchedule}</h2>
-                    <div class="seriesTimerSchedule padded-left padded-right"></div>
+                    <h2 class="sectionTitle">${HeaderSchedule}</h2>
+                    <div class="seriesTimerSchedule padded-right"></div>
                 </div>
 
                 <div class="collectionItems"></div>
 
                 <div class="nextUpSection verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderNextUp}</h2>
-                    <div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-left padded-right"></div>
+                    <h2 class="sectionTitle sectionTitle-cards">${HeaderNextUp}</h2>
+                    <div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-right"></div>
                 </div>
 
                 <div class="programGuideSection hide verticalSection detailVerticalSection">
@@ -180,64 +180,64 @@
                 </div>
 
                 <div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
-                    <h2 class="childrenSectionHeader sectionTitle sectionTitle-cards padded-left">
+                    <h2 class="childrenSectionHeader sectionTitle sectionTitle-cards">
                         <span id="childrenTitle"></span>
                     </h2>
                     <div id="childrenContent">
-                        <div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-left padded-right" style="text-align: left;"></div>
+                        <div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-right" style="text-align: left;"></div>
                     </div>
                 </div>
 
                 <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderAdditionalParts}</h2>
-                    <div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
+                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderAdditionalParts}</h2>
+                    <div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-right"></div>
                 </div>
 
                 <div class="verticalSection itemVerticalSection moreFromSeasonSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
+                    <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
                         <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                     </div>
                 </div>
 
                 <div class="verticalSection itemVerticalSection moreFromArtistSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
+                    <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
                         <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                     </div>
                 </div>
 
                 <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderCastCrew}</h2>
+                    <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderCastCrew}</h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
                         <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                     </div>
                 </div>
 
                 <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle padded-left padded-right">${HeaderUpcomingOnTV}</h2>
-                    <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-left padded-right"></div>
+                    <h2 class="sectionTitle padded-right">${HeaderUpcomingOnTV}</h2>
+                    <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-right"></div>
                 </div>
 
                 <div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderSpecialFeatures}</h2>
-                    <div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
+                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderSpecialFeatures}</h2>
+                    <div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-right"></div>
                 </div>
 
                 <div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMusicVideos}</h2>
-                    <div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
+                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMusicVideos}</h2>
+                    <div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-right"></div>
                 </div>
 
                 <div id="scenesCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderScenes}</h2>
+                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderScenes}</h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
                         <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                     </div>
                 </div>
 
                 <div id="similarCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMoreLikeThis}</h2>
+                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMoreLikeThis}</h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
                         <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
                     </div>
diff --git a/src/scripts/itembynamedetailpage.js b/src/scripts/itembynamedetailpage.js
index 44eca55589..fd29724225 100644
--- a/src/scripts/itembynamedetailpage.js
+++ b/src/scripts/itembynamedetailpage.js
@@ -71,12 +71,12 @@ define(['connectionManager', 'listView', 'cardBuilder', 'imageLoader', 'libraryB
 
             html += '<div class="' + sectionClass + '" data-type="' + section.type + '">';
             html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
-            html += '<h2 class="sectionTitle sectionTitle-cards padded-left">';
+            html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += section.name;
             html += '</h2>';
             html += '<a is="emby-linkbutton" href="#" class="clearLink hide" style="margin-left:1em;vertical-align:middle;"><button is="emby-button" type="button" class="raised more raised-mini noIcon">' + globalize.translate('ButtonMore') + '</button></a>';
             html += '</div>';
-            html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer padded-right">';
             html += '</div>';
             return html += '</div>';
         }).join('');