diff --git a/dashboard-ui/css/dashboard.css b/dashboard-ui/css/dashboard.css
index 66a2bda18d..ca6044009a 100644
--- a/dashboard-ui/css/dashboard.css
+++ b/dashboard-ui/css/dashboard.css
@@ -23,6 +23,10 @@ paper-input + .fieldDescription {
     margin-bottom: 30px !important;
 }
 
+.ui-body-a .visualCardBox .cardScalable, .ui-body-a .visualCardBox .cardFooter {
+    background-color: #fff;
+}
+
 @media all and (min-width: 800px) {
 
     .type-interior > .ui-content, .type-interior > .ui-panel-content-wrap > .ui-content {
diff --git a/dashboard-ui/scripts/medialibrarypage.js b/dashboard-ui/scripts/medialibrarypage.js
index 5a8cc4d120..cefc9caaeb 100644
--- a/dashboard-ui/scripts/medialibrarypage.js
+++ b/dashboard-ui/scripts/medialibrarypage.js
@@ -1,4 +1,4 @@
-define(['jQuery', 'apphost'], function ($, appHost) {
+define(['jQuery', 'apphost', 'cardStyle'], function ($, appHost) {
 
     function changeCollectionType(page, virtualFolder) {
 
@@ -197,6 +197,8 @@
 
         var divVirtualFolders = page.querySelector('#divVirtualFolders');
         divVirtualFolders.innerHTML = html;
+        divVirtualFolders.classList.add('itemsContainer');
+        divVirtualFolders.classList.add('vertical-wrap');
 
         $('.btnCardMenu', divVirtualFolders).on('click', function () {
             showCardMenu(page, this, virtualFolders);
@@ -255,23 +257,23 @@
 
         switch (type) {
             case "movies":
-                return "local-movies";
+                return "local_movies";
             case "music":
-                return "library-music";
+                return "library_music";
             case "photos":
                 return "photo";
             case "livetv":
-                return "live-tv";
+                return "live_tv";
             case "tvshows":
-                return "live-tv";
+                return "live_tv";
             case "games":
                 return "folder";
             case "trailers":
-                return "local-movies";
+                return "local_movies";
             case "homevideos":
-                return "video-library";
+                return "video_library";
             case "musicvideos":
-                return "video-library";
+                return "video_library";
             case "books":
                 return "folder";
             case "channels":
@@ -293,7 +295,7 @@
             style += "min-width:33.3%;";
         }
 
-        html += '<div class="card backdropCard" style="' + style + '" data-index="' + index + '">';
+        html += '<div class="card backdropCard scalableCard" style="' + style + '" data-index="' + index + '">';
 
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
@@ -310,10 +312,10 @@
         }
 
         if (imgUrl) {
-            html += '<div class="cardImage editLibrary" style="cursor:pointer;background-image:url(\'' + imgUrl + '\');"></div>';
+            html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;background-image:url(\'' + imgUrl + '\');"></div>';
         } else if (!virtualFolder.showNameWithIcon) {
-            html += '<div class="cardImage editLibrary iconCardImage" style="cursor:pointer;">';
-            html += '<i class="md-icon">' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + '</i>';
+            html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;">';
+            html += '<i class="cardImageIcon md-icon" style="color:#444;">' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + '</i>';
 
             html += '</div>';
         }
@@ -325,17 +327,15 @@
         html += "</div>";
 
         if (!imgUrl && virtualFolder.showNameWithIcon) {
-            html += '<h1 class="cardImage iconCardImage addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;">';
+            html += '<h1 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">';
 
-            html += '<div>';
-            html += '<i class="md-icon" style="font-size:400%;color:#888;">' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + '</i>';
+            html += '<i class="cardImageIcon md-icon" style="font-size:400%;color:#888;">' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + '</i>';
 
             if (virtualFolder.showNameWithIcon) {
                 html += '<div style="margin:1.5em 0;position:width:100%;font-weight:500;color:#444;">';
                 html += virtualFolder.Name;
                 html += "</div>";
             }
-            html += "</div>";
 
             html += '</h1>';
         }
@@ -345,7 +345,7 @@
         if (virtualFolder.showMenu !== false) {
             var moreIcon = appHost.moreIcon == 'dots-horiz' ? '&#xE5D3;' : '&#xE5D4;';
 
-            html += '<div class="cardText" style="text-align:right; float:right;padding-top:5px;">';
+            html += '<div style="text-align:right; float:right;padding-top:5px;">';
             html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><i class="md-icon">' + moreIcon + '</i></button>';
             html += "</div>";
         }
diff --git a/dashboard-ui/scripts/userprofilespage.js b/dashboard-ui/scripts/userprofilespage.js
index 10f5afa006..0daf15112d 100644
--- a/dashboard-ui/scripts/userprofilespage.js
+++ b/dashboard-ui/scripts/userprofilespage.js
@@ -1,4 +1,4 @@
-define(['jQuery', 'paper-icon-button-light'], function ($) {
+define(['jQuery', 'paper-icon-button-light', 'cardStyle'], function ($) {
 
     function deleteUser(page, id) {
 
@@ -85,7 +85,7 @@
 
         var html = '';
 
-        var cssClass = "card squareCard bottomPaddedCard";
+        var cssClass = "card squareCard scalableCard";
 
         if (user.Policy.IsDisabled) {
             cssClass += ' grayscale';
@@ -135,7 +135,7 @@
 
         html += '<div class="cardFooter">';
 
-        html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
+        html += '<div style="text-align:right; float:right;padding:0;">';
         html += '<button type="button" is="paper-icon-button-light" class="btnUserMenu autoSize"><i class="md-icon">' + AppInfo.moreIcon.replace('-', '_') + '</i></button>';
         html += "</div>";
 
diff --git a/dashboard-ui/userprofiles.html b/dashboard-ui/userprofiles.html
index bc5eb158d7..4d45026b97 100644
--- a/dashboard-ui/userprofiles.html
+++ b/dashboard-ui/userprofiles.html
@@ -11,7 +11,7 @@
                     <span>${ButtonAdd}</span>
                 </button>
             </div>
-            <div class="localUsers" style="text-align:left;margin-top:.5em;"></div>
+            <div class="localUsers itemsContainer vertical-wrap" style="text-align:left;margin-top:.5em;"></div>
 
             <div class="detailSectionHeader" style="margin-top:2.5em;">
                 <h3 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
@@ -22,7 +22,7 @@
                     <span>${ButtonAdd}</span>
                 </button>
             </div>
-            <div class="connectUsers" style="text-align:left;margin-top:.5em;"></div>
+            <div class="connectUsers itemsContainer vertical-wrap" style="text-align:left;margin-top:.5em;"></div>
 
             <div class="sectionPendingGuests" style="display:none;margin-top:2.5em;">
                 <div class="detailSectionHeader" style="margin-top:2.5em;">
@@ -30,7 +30,7 @@
                         ${HeaderPendingInvitations}
                     </h3>
                 </div>
-                <div class="itemsContainer pending" style="text-align:left;margin-top:.5em;"></div>
+                <div class="itemsContainer vertical-wrap pending" style="text-align:left;margin-top:.5em;"></div>
             </div>
         </div>