diff --git a/dashboard-ui/music.html b/dashboard-ui/music.html
index cf8f1a019d..aaa18e8b62 100644
--- a/dashboard-ui/music.html
+++ b/dashboard-ui/music.html
@@ -98,7 +98,7 @@
             <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
 
-        <div is="emby-itemscontainer" id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
+        <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-list" style="max-width:1000px;margin: 0 auto;"></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/scripts/musicalbums.js b/dashboard-ui/scripts/musicalbums.js
index 7f2a1a1131..e80621f901 100644
--- a/dashboard-ui/scripts/musicalbums.js
+++ b/dashboard-ui/scripts/musicalbums.js
@@ -1,4 +1,4 @@
-define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder) {
 
     return function (view, params, tabContent) {
 
@@ -46,6 +46,25 @@
             return context.savedQueryKey;
         }
 
+        function onViewStyleChange() {
+
+            var viewStyle = self.getCurrentViewStyle();
+
+            var itemsContainer = tabContent.querySelector('.itemsContainer');
+
+            if (viewStyle == "List") {
+
+                itemsContainer.classList.add('vertical-list');
+                itemsContainer.classList.remove('vertical-wrap');
+            }
+            else {
+
+                itemsContainer.classList.remove('vertical-list');
+                itemsContainer.classList.add('vertical-wrap');
+            }
+            itemsContainer.innerHTML = '';
+        }
+
         function reloadItems(page) {
 
             Dashboard.showLoadingMsg();
@@ -83,7 +102,7 @@
                 }
                 else if (viewStyle == "PosterCard") {
 
-                    html = libraryBrowser.getPosterViewHtml({
+                    html = cardBuilder.getCardsHtml({
                         items: result.Items,
                         shape: "square",
                         context: 'music',
@@ -97,7 +116,7 @@
                 else {
 
                     // Poster
-                    html = libraryBrowser.getPosterViewHtml({
+                    html = cardBuilder.getCardsHtml({
                         items: result.Items,
                         shape: "square",
                         context: 'music',
@@ -237,6 +256,7 @@
                 getPageData(tabContent).view = viewStyle;
                 libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
                 getQuery(tabContent).StartIndex = 0;
+                onViewStyleChange();
                 reloadItems(tabContent);
             });
         }
@@ -246,6 +266,7 @@
         };
 
         initPage(tabContent);
+        onViewStyleChange();
 
         self.renderTab = function () {
 
diff --git a/dashboard-ui/scripts/musicartists.js b/dashboard-ui/scripts/musicartists.js
index f2c9720d70..d06257cdf8 100644
--- a/dashboard-ui/scripts/musicartists.js
+++ b/dashboard-ui/scripts/musicartists.js
@@ -1,4 +1,4 @@
-define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) {
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder) {
 
     return function (view, params, tabContent) {
 
@@ -44,6 +44,25 @@
             return context.savedQueryKey;
         }
 
+        function onViewStyleChange() {
+
+            var viewStyle = self.getCurrentViewStyle();
+
+            var itemsContainer = tabContent.querySelector('.itemsContainer');
+
+            if (viewStyle == "List") {
+
+                itemsContainer.classList.add('vertical-list');
+                itemsContainer.classList.remove('vertical-wrap');
+            }
+            else {
+
+                itemsContainer.classList.remove('vertical-list');
+                itemsContainer.classList.add('vertical-wrap');
+            }
+            itemsContainer.innerHTML = '';
+        }
+
         function reloadItems(page) {
 
             Dashboard.showLoadingMsg();
@@ -84,7 +103,7 @@
                 }
                 else if (viewStyle == "PosterCard") {
 
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = cardBuilder.getCardsHtml({
                         items: result.Items,
                         shape: "square",
                         context: 'music',
@@ -98,7 +117,7 @@
                 else {
 
                     // Poster
-                    html = LibraryBrowser.getPosterViewHtml({
+                    html = cardBuilder.getCardsHtml({
                         items: result.Items,
                         shape: "square",
                         context: 'music',
@@ -203,6 +222,7 @@
                 getPageData(tabContent).view = viewStyle;
                 libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
                 getQuery(tabContent).StartIndex = 0;
+                onViewStyleChange();
                 reloadItems(tabContent);
             });
         }
@@ -212,6 +232,7 @@
         };
 
         initPage(tabContent);
+        onViewStyleChange();
 
         self.renderTab = function () {