diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
index ea22f0f81b..bc2adb4456 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
@@ -6,7 +6,6 @@
     padding: 0;
     display: block;
     color: inherit !important;
-    box-shadow: none !important;
     outline: none !important;
     cursor: pointer;
     contain: style;
@@ -75,7 +74,6 @@ button.card {
     padding: 0 !important;
     margin: 0;
     transition: none !important;
-    border-radius: 0 !important;
     border: 3px solid transparent;
     /* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
     overflow: hidden;
@@ -174,6 +172,10 @@ button.cardContent {
     bottom: 0;
 }
 
+.round .cardContent {
+    overflow: visible;
+}
+
 .scalableCard .cardImageContainer {
     height: 100%;
 }
@@ -199,18 +201,20 @@ button.cardContent {
         opacity: .6;
     }
 
-.visualCardBox .cardScalable {
-    background-color: #222326;
-}
-
-.visualCardBox .cardFooter {
+/*.visualCardBox {
     -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     -ms-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}*/
+
+.visualCardBox .cardScalable, .visualCardBox .cardFooter {
+    background-color: #222326;
+}
+
+.visualCardBox .cardFooter {
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
-    background-color: #222326;
 }
 
 .innerCardFooter {
@@ -267,8 +271,6 @@ button.cardContent {
     height: 12vh;
     font-size: 12vh;
     color: #fff;
-    position: relative;
-    top: -8%;
 }
 
 .card .indicators {
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 5efd439c80..cb66f955d9 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -584,18 +584,12 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 
 .detailImageProgressContainer {
     position: absolute;
-    bottom: 2px;
-    right: 0;
-    left: 0;
+    bottom: 4px;
+    right: 1px;
+    left: 1px;
     text-align: center;
 }
 
-    .detailImageProgressContainer progress {
-        width: 100%;
-        margin: 0 auto;
-        height: 6px;
-    }
-
 .viewControls, .listTopPaging {
     display: inline-block;
 }
@@ -1062,3 +1056,19 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         vertical-align: top;
         margin: 0 4px 0 0;
     }
+
+
+@media all and (min-width: 1000px) {
+
+    .itemDetailPage .scalableCard.portraitCard {
+        width: 25% !important;
+    }
+
+    .itemDetailPage .scalableCard.squareCard {
+        width: 25% !important;
+    }
+
+    .itemDetailPage .scalableCard.backdropCard, .itemDetailPage .scalableCard.smallBackdropCard {
+        width: 33.3333333333333333% !important;
+    }
+}
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index 90a0a73873..6508ef2445 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -1,4 +1,4 @@
-define(['layoutManager', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom) {
+define(['layoutManager', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'indicators', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom, indicators) {
 
     var currentItem;
 
@@ -329,11 +329,9 @@
 
     function refreshDetailImageUserData(elem, item) {
 
-        var progressHtml = item.IsFolder || !item.UserData ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
-
         var detailImageProgressContainer = elem.querySelector('.detailImageProgressContainer');
 
-        detailImageProgressContainer.innerHTML = progressHtml || '';
+        detailImageProgressContainer.innerHTML = indicators.getProgressBarHtml(item);
     }
 
     function refreshImage(page, item, user) {
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index d8088659ae..43833fed22 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -891,24 +891,6 @@
                 });
             },
 
-            getItemProgressBarHtml: function (item) {
-
-
-                if (item.Type == "Recording" && item.CompletionPercentage) {
-
-                    return '<progress class="itemProgressBar recordingProgressBar" min="0" max="100" value="' + item.CompletionPercentage + '"></progress>';
-                }
-
-                var pct = item.PlayedPercentage;
-
-                if (pct && pct < 100) {
-
-                    return '<progress class="itemProgressBar" min="0" max="100" value="' + pct + '"></progress>';
-                }
-
-                return null;
-            },
-
             renderDetailImage: function (elem, item, editable, preferThumb) {
 
                 var imageTags = item.ImageTags || {};
@@ -1025,7 +1007,7 @@
                     html += "</a>";
                 }
 
-                var progressHtml = item.IsFolder || !item.UserData ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
+                var progressHtml = item.IsFolder || !item.UserData ? '' : indicators.getProgressBarHtml(item);
 
                 html += '<div class="detailImageProgressContainer">';
                 if (progressHtml) {