diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index f352f71c06..dbe3e4e5f0 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -1028,9 +1028,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         if (!people.length) return void page.querySelector("#castCollapsible").classList.add("hide");
         page.querySelector("#castCollapsible").classList.remove("hide");
         var castContent = page.querySelector("#castContent");
-        enableScrollX() ? (castContent.classList.add("scrollX"), limit = 32) : castContent.classList.add("vertical-wrap");
-        var limitExceeded = limit && people.length > limit;
-        limitExceeded && (people = people.slice(0), people.length = Math.min(limit, people.length)), require(["peoplecardbuilder"], function(peoplecardbuilder) {
+        require(["peoplecardbuilder"], function(peoplecardbuilder) {
             peoplecardbuilder.buildPeopleCards(people, {
                 itemsContainer: castContent,
                 coverImage: !0,
@@ -1038,9 +1036,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
                 width: 160,
                 shape: getPortraitShape()
             })
-        });
-        var morePeopleButton = page.querySelector(".morePeople");
-        morePeopleButton && (limitExceeded && !enableScrollX() ? morePeopleButton.classList.remove("hide") : morePeopleButton.classList.add("hide"))
+        })
     }
 
     function itemDetailPage() {
diff --git a/src/itemdetails.html b/src/itemdetails.html
index 30d6171f43..0a8c02eb4a 100644
--- a/src/itemdetails.html
+++ b/src/itemdetails.html
@@ -251,12 +251,13 @@
         </div>
 
         <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
-            <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left">
+            <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">
                 ${HeaderCastCrew}
             </h2>
-            <div id="castContent" is="emby-itemscontainer" class="itemsContainer padded-left padded-right"></div>
-            <div class="padded-left">
-                <button is="emby-button" type="button" class="raised more morePeople hide">${ButtonMore}</button>
+            <div is="emby-scroller" class="emby-scroller" data-mousewheel="false" data-centerfocus="true" data-horizontal="true">
+                <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale">
+                    <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer padded-left padded-right"></div>
+                </div>
             </div>
         </div>
         <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
@@ -312,4 +313,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>