diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
index 72a48d6b58..4cf725cf51 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
@@ -64,7 +64,7 @@
     padding-bottom: 18.5%;
 }
 
-.card .cardBox {
+.cardBox {
     padding: 0 !important;
     margin: 0;
     transition: none;
@@ -77,7 +77,7 @@
 
 @media all and (min-width: 600px) {
 
-    .layout-desktop .card .cardBox, .layout-mobile .card .cardBox {
+    .cardBox-mobile {
         margin: 3px;
     }
 }
@@ -92,14 +92,10 @@
         border-color: transparent;
     }
 
-.bottomPaddedCard .cardBox:not(.visualCardBox) {
+.cardBox-bottompadded {
     margin-bottom: 1em;
 }
 
-.hiddenScrollX .bottomPaddedCard .cardBox, .smoothScrollX .bottomPaddedCard .cardBox {
-    margin-bottom: 0;
-}
-
 .btnCardOptions {
     text-align: right;
     float: right;
@@ -107,18 +103,6 @@
     margin: 0 !important;
 }
 
-.dimunselected .card .cardImageContainer {
-    -webkit-filter: brightness(50%);
-    filter: brightness(50%);
-    transition: filter, -webkit-filter 600ms ease-out !important;
-}
-
-.dimunselected .card:focus .cardImageContainer {
-    -webkit-filter: initial;
-    filter: initial;
-    transition: filter, -webkit-filter 600ms ease-out !important;
-}
-
 .mediaSourceIndicator {
     display: flex;
     position: absolute;
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
index d85c9f6816..421c108f6c 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
@@ -1012,6 +1012,19 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             var imgInfo = getCardImageUrl(item, apiClient, options);
             var imgUrl = imgInfo.imgUrl;
 
+            var forceName = imgInfo.forceName;
+
+            var showTitle = options.showTitle == 'auto' ? true : (options.showTitle || item.Type == 'PhotoAlbum' || item.Type == 'Folder');
+            var overlayText = options.overlayText;
+
+            if (forceName && !options.cardLayout) {
+                showTitle = imgUrl;
+
+                if (overlayText == null) {
+                    overlayText = true;
+                }
+            }
+
             var cardImageContainerClass = 'cardImageContainer';
             if (options.coverImage || imgInfo.coverImage) {
                 cardImageContainerClass += ' coveredImage';
@@ -1027,6 +1040,47 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
             var separateCardBox = scalable;
             var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
+
+            if (!layoutManager.tv) {
+                cardBoxClass += ' cardBox-mobile';
+            }
+
+            var footerCssClass;
+            var progressHtml = indicators.getProgressBarHtml(item);
+
+            var innerCardFooter = '';
+
+            var footerOverlayed = false;
+
+            if (overlayText) {
+
+                footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
+                innerCardFooter += getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, false);
+                footerOverlayed = true;
+            }
+            else if (progressHtml) {
+                innerCardFooter += '<div class="innerCardFooter fullInnerCardFooter innerCardFooterClear">';
+                innerCardFooter += progressHtml;
+                innerCardFooter += '</div>';
+
+                progressHtml = '';
+            }
+
+            var mediaSourceCount = item.MediaSourceCount || 1;
+            if (mediaSourceCount > 1) {
+                innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
+            }
+
+            var outerCardFooter = '';
+            if (!overlayText && !footerOverlayed) {
+                footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter transparent';
+                outerCardFooter = getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, true);
+            }
+
+            if (outerCardFooter && !options.cardLayout) {
+                cardBoxClass += ' cardBox-bottompadded';
+            }
+
             if (!separateCardBox) {
                 cardImageContainerClass += " " + cardBoxClass;
             }
@@ -1110,56 +1164,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                 cardImageContainerOpen += '<div class="cardIndicators ' + options.shape + 'CardIndicators">' + indicatorsHtml + '</div>';
             }
 
-            var forceName = imgInfo.forceName;
-
-            var showTitle = options.showTitle == 'auto' ? true : (options.showTitle || item.Type == 'PhotoAlbum' || item.Type == 'Folder');
-            var overlayText = options.overlayText;
-
-            if (forceName && !options.cardLayout) {
-                showTitle = imgUrl;
-
-                if (overlayText == null) {
-                    overlayText = true;
-                }
-            }
-
             if (!imgUrl) {
                 var defaultName = item.EpisodeTitle ? item.Name : itemHelper.getDisplayName(item);
                 cardImageContainerOpen += '<div class="cardText cardCenteredText">' + defaultName + '</div>';
             }
 
-            var footerCssClass;
-            var progressHtml = indicators.getProgressBarHtml(item);
-
-            var innerCardFooter = '';
-
-            var footerOverlayed = false;
-
-            if (overlayText) {
-
-                footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
-                innerCardFooter += getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, false);
-                footerOverlayed = true;
-            }
-            else if (progressHtml) {
-                innerCardFooter += '<div class="innerCardFooter fullInnerCardFooter innerCardFooterClear">';
-                innerCardFooter += progressHtml;
-                innerCardFooter += '</div>';
-
-                progressHtml = '';
-            }
-
-            var mediaSourceCount = item.MediaSourceCount || 1;
-            if (mediaSourceCount > 1) {
-                innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
-            }
-
-            var outerCardFooter = '';
-            if (!overlayText && !footerOverlayed) {
-                footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter transparent';
-                outerCardFooter = getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, true);
-            }
-
             var tagName = (layoutManager.tv || !scalable) && !overlayButtons ? 'button' : 'div';
 
             var prefix = (item.SortName || item.Name || '')[0];
@@ -1185,10 +1194,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                 actionAttribute = '';
             }
 
-            if (outerCardFooter && !options.cardLayout) {
-                className += ' bottomPaddedCard';
-            }
-
             var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
             var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
             var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
diff --git a/dashboard-ui/scripts/autobackdrops.js b/dashboard-ui/scripts/autobackdrops.js
index f21bd7bf41..b511b58b93 100644
--- a/dashboard-ui/scripts/autobackdrops.js
+++ b/dashboard-ui/scripts/autobackdrops.js
@@ -12,7 +12,13 @@
 
     function enabled() {
 
-        var userId = Dashboard.getCurrentUserId();
+        var apiClient = window.ApiClient;
+
+        if (!apiClient) {
+            return false;
+        }
+
+        var userId = apiClient.getCurrentUserId();
 
         var val = appStorage.getItem('enableBackdrops-' + userId);
 
@@ -46,7 +52,7 @@
                 ParentId: parentId
             };
 
-            return apiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
+            return apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
 
                 var images = result.Items.map(function (i) {
                     return {
@@ -70,7 +76,7 @@
             return;
         }
 
-        getBackdropItemIds(apiClient, Dashboard.getCurrentUserId(), type, parentId).then(function (images) {
+        getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
 
             if (images.length) {
 
diff --git a/dashboard-ui/scripts/loginpage.js b/dashboard-ui/scripts/loginpage.js
index c19ad53f59..4688658663 100644
--- a/dashboard-ui/scripts/loginpage.js
+++ b/dashboard-ui/scripts/loginpage.js
@@ -129,7 +129,7 @@
         for (var i = 0, length = users.length; i < length; i++) {
             var user = users[i];
 
-            html += '<div class="card squareCard bottomPaddedCard scalableCard"><div class="cardBox visualCardBox">';
+            html += '<div class="card squareCard scalableCard"><div class="cardBox cardBox-bottompadded visualCardBox">';
 
             html += '<div class="cardScalable">';
 
diff --git a/dashboard-ui/scripts/plugincatalogpage.js b/dashboard-ui/scripts/plugincatalogpage.js
index 409b0c1ad3..68fce8f5db 100644
--- a/dashboard-ui/scripts/plugincatalogpage.js
+++ b/dashboard-ui/scripts/plugincatalogpage.js
@@ -186,9 +186,9 @@
         }
         var target = plugin.externalUrl ? ' target="_blank"' : '';
 
-        html += "<div class='card backdropCard bottomPaddedCard scalableCard'>";
+        html += "<div class='card backdropCard scalableCard'>";
 
-        html += '<div class="cardBox visualCardBox">';
+        html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
         html += '<div class="cardScalable">';
 
         html += '<div class="cardPadder cardPadder-backdrop"></div>';
diff --git a/dashboard-ui/scripts/pluginspage.js b/dashboard-ui/scripts/pluginspage.js
index 04979990d7..683f9d2abd 100644
--- a/dashboard-ui/scripts/pluginspage.js
+++ b/dashboard-ui/scripts/pluginspage.js
@@ -43,9 +43,9 @@
             configPageUrl :
             null;
 
-        html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard bottomPaddedCard scalableCard'>";
+        html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard scalableCard'>";
 
-        html += '<div class="cardBox visualCardBox">';
+        html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
         html += '<div class="cardScalable">';
 
         html += '<div class="cardPadder cardPadder-backdrop"></div>';
diff --git a/dashboard-ui/scripts/userprofilespage.js b/dashboard-ui/scripts/userprofilespage.js
index de563fda1e..84a1d38ee6 100644
--- a/dashboard-ui/scripts/userprofilespage.js
+++ b/dashboard-ui/scripts/userprofilespage.js
@@ -230,11 +230,11 @@
 
         var html = '';
 
-        var cssClass = "card squareCard bottomPaddedCard";
+        var cssClass = "card squareCard";
 
         html += "<div data-id='" + user.Id + "' class='" + cssClass + "'>";
 
-        html += '<div class="cardBox visualCardBox">';
+        html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
         html += '<div class="cardScalable">';
 
         html += '<div class="cardPadder cardPadder-square"></div>';