diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
index f84db0ca2..68175a5f2 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
@@ -314,10 +314,14 @@ button.cardContent {
     width: 14.285714285714285714285714285714%;
 }
 
-.scalableCard.backdropCard, .scalableCard.smallBackdropCard {
+.scalableCard.backdropCard {
     width: 100%;
 }
 
+.scalableCard.smallBackdropCard {
+    width: 50%;
+}
+
 .scalableCard.squareCard {
     width: 50%;
 }
@@ -342,7 +346,7 @@ button.cardContent {
 
 @media all and (min-width: 420px) {
 
-    .scalableCard.backdropCard, .scalableCard.smallBackdropCard {
+    .scalableCard.backdropCard {
         width: 50%;
     }
 }
diff --git a/dashboard-ui/components/favoriteitems.js b/dashboard-ui/components/favoriteitems.js
index 6346c7402..3bb7da501 100644
--- a/dashboard-ui/components/favoriteitems.js
+++ b/dashboard-ui/components/favoriteitems.js
@@ -25,7 +25,7 @@
             { name: 'HeaderFavoriteGames', types: "Game", id: "favoriteGames", shape: getSquareShape(), preferThumb: false, showTitle: true },
             { name: 'HeaderFavoriteArtists', types: "MusicArtist", id: "favoriteArtists", shape: getSquareShape(), preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayPlayButton: true },
             { name: 'HeaderFavoriteAlbums', types: "MusicAlbum", id: "favoriteAlbums", shape: getSquareShape(), preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayPlayButton: true },
-            { name: 'HeaderFavoriteSongs', types: "Audio", id: "favoriteSongs", shape: getSquareShape(), preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayMoreButton: true, defaultAction: 'instantmix' }
+            { name: 'HeaderFavoriteSongs', types: "Audio", id: "favoriteSongs", shape: getSquareShape(), preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayMoreButton: true, action: 'instantmix' }
         ];
     }
 
@@ -98,7 +98,7 @@
                     scalable: true,
                     overlayPlayButton: section.overlayPlayButton,
                     overlayMoreButton: section.overlayMoreButton,
-                    action: section.defaultAction
+                    action: section.action
                 });
 
                 html += '</div>';
diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html
index 9efea097d..37490c085 100644
--- a/dashboard-ui/movies.html
+++ b/dashboard-ui/movies.html
@@ -88,7 +88,7 @@
         <div class="alphaPicker alphabetPicker vertical">
         </div>
 
-        <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;">
+        <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker centered" style="text-align:center;">
         </div>
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
             <div class="paging"></div>
diff --git a/dashboard-ui/photos.html b/dashboard-ui/photos.html
index 5fb52d952..2805a7f5b 100644
--- a/dashboard-ui/photos.html
+++ b/dashboard-ui/photos.html
@@ -5,6 +5,6 @@
             <div class="listTopPaging">
             </div>
         </div>
-        <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        <div is="emby-itemscontainer" class="itemsContainer paddedItemsContainer vertical-wrap centered"></div>
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/scripts/itembynamedetailpage.js b/dashboard-ui/scripts/itembynamedetailpage.js
index 0a7b4cd02..caca00fff 100644
--- a/dashboard-ui/scripts/itembynamedetailpage.js
+++ b/dashboard-ui/scripts/itembynamedetailpage.js
@@ -1,4 +1,4 @@
-define(['listView', 'emby-itemscontainer'], function (listView) {
+define(['listView', 'cardBuilder', 'emby-itemscontainer'], function (listView, cardBuilder) {
 
     function renderItems(page, item) {
 
@@ -246,14 +246,18 @@
             }
 
             listOptions.items = result.Items;
+            var itemsContainer = element.querySelector('.itemsContainer');
 
             if (type == 'Audio') {
                 html = listView.getListViewHtml(listOptions);
+                itemsContainer.classList.remove('vertical-wrap');
+                itemsContainer.classList.add('vertical-list');
             } else {
-                html = LibraryBrowser.getPosterViewHtml(listOptions);
+                html = cardBuilder.getCardsHtml(listOptions);
+                itemsContainer.classList.add('vertical-wrap');
+                itemsContainer.classList.remove('vertical-list');
             }
 
-            var itemsContainer = element.querySelector('.itemsContainer');
             itemsContainer.innerHTML = html;
 
             ImageLoader.lazyChildren(itemsContainer);
diff --git a/dashboard-ui/scripts/livetvrecordings.js b/dashboard-ui/scripts/livetvrecordings.js
index 51cec3d3e..d7f73dd73 100644
--- a/dashboard-ui/scripts/livetvrecordings.js
+++ b/dashboard-ui/scripts/livetvrecordings.js
@@ -1,4 +1,4 @@
-define(['components/categorysyncbuttons', 'scripts/livetvcomponents', 'emby-button', 'listViewStyle', 'emby-itemscontainer'], function (categorysyncbuttons) {
+define(['components/categorysyncbuttons', 'cardBuilder', 'scripts/livetvcomponents', 'emby-button', 'listViewStyle', 'emby-itemscontainer'], function (categorysyncbuttons, cardBuilder) {
 
     function getRecordingGroupHtml(group) {
 
@@ -70,11 +70,13 @@
 
         if (enableScrollX()) {
             recordingItems.classList.add('hiddenScrollX');
+            recordingItems.classList.remove('vertical-wrap');
         } else {
             recordingItems.classList.remove('hiddenScrollX');
+            recordingItems.classList.add('vertical-wrap');
         }
 
-        recordingItems.innerHTML = LibraryBrowser.getPosterViewHtml({
+        recordingItems.innerHTML = cardBuilder.getCardsHtml({
             items: recordings,
             shape: (enableScrollX() ? 'autooverflow' : 'auto'),
             showTitle: true,
diff --git a/dashboard-ui/scripts/photos.js b/dashboard-ui/scripts/photos.js
index 34ad242c9..f096928a8 100644
--- a/dashboard-ui/scripts/photos.js
+++ b/dashboard-ui/scripts/photos.js
@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'cardBuilder', 'emby-itemscontainer'], function ($, cardBuilder) {
 
     var view = 'Poster';
 
@@ -58,7 +58,7 @@
 
             if (view == "Poster") {
                 // Poster
-                html = LibraryBrowser.getPosterViewHtml({
+                html = cardBuilder.getCardsHtml({
                     items: result.Items,
                     shape: "square",
                     context: getParameterByName('context') || 'photos',