diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 465c3c185c..076ce927eb 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -135,7 +135,7 @@
 }
 
 .detailButtonsContainer {
-    padding: 0 0 .5em;
+    padding: 0 0 1em;
     text-align: center;
 }
 
@@ -370,7 +370,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     background-size: cover;
     background-position: center 15%;
     background-repeat: no-repeat;
-    height: 500px;
+    height: 550px;
     position: relative;
 }
 
@@ -421,10 +421,15 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 
 .detailImageContainer {
     position: absolute;
+    top: -66px;
 }
 
-.detailImageContainer {
-    top: -66px;
+.portraitDetailImageContainer {
+    top: -26px;
+}
+
+.thumbDetailImageContainer {
+    top: -26px;
 }
 
 .itemDetailImage {
@@ -434,19 +439,19 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     border: solid 1px #222;
 }
 
-.thumbDetailImage {
+.thumbDetailImageContainer img {
     max-width: 360px;
     max-height: 360px;
 }
 
-.squareDetailImage {
+.squareDetailImageContainer img {
     max-width: 240px;
     max-height: 240px;
 }
 
-.portraitDetailImage {
+.portraitDetailImageContainer img {
     max-width: 240px;
-    max-height: 360px;
+    max-height: 300px;
 }
 
 .itemDetailGalleryLink img:hover {
@@ -464,7 +469,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 }
 
 .detailContentEffectedByPortraitImage {
-    margin-left: 260px;
+    margin-left: 220px;
 }
 
 .detailContentEffectedByImage a {
@@ -479,7 +484,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 }
 
 .lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage {
-    min-height: 140px;
+    min-height: 115px;
 }
 
 .parentName {
@@ -499,20 +504,20 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         margin-left: 20px;
     }
 
-    .thumbDetailImage {
+    .thumbDetailImageContainer img {
         max-width: 340px;
     }
 
-    .squareDetailImage {
+    .squareDetailImageContainer img {
         max-width: 220px;
     }
 
-    .portraitDetailImage {
+    .portraitDetailImageContainer img {
         max-width: 220px;
     }
 
     .lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage {
-        min-height: 110px;
+        min-height: 85px;
     }
 }
 
@@ -532,6 +537,9 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         padding: 0 1em;
     }
 
+    .lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage {
+        min-height: initial;
+    }
 
 
     .parentName {
diff --git a/dashboard-ui/itembynamedetails.html b/dashboard-ui/itembynamedetails.html
index c571139772..9386d9fad2 100644
--- a/dashboard-ui/itembynamedetails.html
+++ b/dashboard-ui/itembynamedetails.html
@@ -140,8 +140,8 @@
                         <p id="itemLinks"></p>
                         <div class="detailButtonsContainer desktopDetailButtons" style="text-align: left;">
                             <button class="btnPlay hide" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonPlay}</button>
-                            <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonOptions}</button>
                             <a class="btnSync hide" data-role="button" data-icon="cloud" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
+                            <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonMore}</button>
                         </div>
                     </td>
                 </tr>
@@ -149,8 +149,8 @@
         </div>
         <div class="detailButtonsContainer mobileDetailButtons">
             <button class="btnPlay hide" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonPlay}</button>
-            <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonOptions}</button>
             <a class="btnSync hide" data-role="button" data-icon="cloud" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
+            <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonMore}</button>
         </div>
         <p class="itemOverview mobileOverview"></p>
         <div data-role="content" style="padding-top: 0;">
diff --git a/dashboard-ui/livetvprogram.html b/dashboard-ui/livetvprogram.html
index 3603ac3242..e1057a9901 100644
--- a/dashboard-ui/livetvprogram.html
+++ b/dashboard-ui/livetvprogram.html
@@ -13,12 +13,12 @@
             <a href="livetvtimers.html">${TabScheduled}</a>
             <a href="livetvseriestimers.html">${TabSeries}</a>
         </div>
-        <div>
+        <div style="padding: 1em 0;">
             <div>
                 <table class="detailPageContent primaryDetailPageContent">
                     <tr>
                         <td style="vertical-align: top; padding: 0 1em 0 0;">
-                            <div id="itemImage" class="itemImageContainer"></div>
+                            <div id="itemImage" class="itemImageContainer smallDetailImageContainer"></div>
                         </td>
                         <td style="vertical-align: top; padding: 0;">
                             <p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
diff --git a/dashboard-ui/livetvrecording.html b/dashboard-ui/livetvrecording.html
index f1a02a72f4..e7d3b140dc 100644
--- a/dashboard-ui/livetvrecording.html
+++ b/dashboard-ui/livetvrecording.html
@@ -18,7 +18,7 @@
                 <table class="detailPageContent primaryDetailPageContent">
                     <tr>
                         <td style="vertical-align: top; padding: 0 1em 0 0;">
-                            <div id="itemImage" class="itemImageContainer"></div>
+                            <div id="itemImage" class="itemImageContainer smallDetailImageContainer"></div>
                         </td>
                         <td style="vertical-align: top; padding: 0;">
                             <p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 3029016714..5375f8b378 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -2334,24 +2334,14 @@
 
             if (detectRatio && item.PrimaryImageAspectRatio) {
 
-                if (Math.abs(item.PrimaryImageAspectRatio - 1.777777778) < .3) {
+                if (item.PrimaryImageAspectRatio >= 1.48) {
                     shape = 'thumb';
-                } else if (Math.abs(item.PrimaryImageAspectRatio - 1) < .2) {
+                } else if (item.PrimaryImageAspectRatio >= .85 && item.PrimaryImageAspectRatio <= 1.34) {
                     shape = 'square';
                 }
             }
 
-            var imgCssClass = 'itemDetailImage';
-            if (shape == 'thumb') {
-                imgCssClass += ' thumbDetailImage';
-            }
-            else if (shape == 'square') {
-                imgCssClass += ' squareDetailImage';
-            } else {
-                imgCssClass += ' portraitDetailImage';
-            }
-
-            html += "<img class='" + imgCssClass + "' src='" + url + "' />";
+            html += "<img class='itemDetailImage' src='" + url + "' />";
 
             if (linkToGallery) {
                 html += "</a>";
@@ -2378,20 +2368,26 @@
                 detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
                 detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
 
-                detailContentEffectedByImage.addClass('detailContentEffectedByThumbImage');
-                detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
-                detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
+                elem.addClass('thumbDetailImageContainer');
+                elem.removeClass('portraitDetailImageContainer');
+                elem.removeClass('squareDetailImageContainer');
             }
             else if (shape == 'square') {
                 detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage');
                 detailContentEffectedByImage.addClass('detailContentEffectedBySquareImage');
                 detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
 
+                elem.removeClass('thumbDetailImageContainer');
+                elem.removeClass('portraitDetailImageContainer');
+                elem.addClass('squareDetailImageContainer');
             } else {
                 detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage');
                 detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
                 detailContentEffectedByImage.addClass('detailContentEffectedByPortraitImage');
 
+                elem.removeClass('thumbDetailImageContainer');
+                elem.addClass('portraitDetailImageContainer');
+                elem.removeClass('squareDetailImageContainer');
             }
         },