diff --git a/src/view/components/ItemsContainer.tsx b/src/view/components/ItemsContainer.tsx
index 1d389eda41..8cc2992cca 100644
--- a/src/view/components/ItemsContainer.tsx
+++ b/src/view/components/ItemsContainer.tsx
@@ -103,7 +103,6 @@ const ItemsContainer: FunctionComponent<ItemsContainerProps> = ({ getCurrentView
     return (
         <div ref={element}>
             <ItemsContainerElement
-                id=''
                 className={`itemsContainer ${cssClass} centered padded-left padded-right`}
             />
         </div>
diff --git a/src/view/components/RecentlyAddedItemsContainer.tsx b/src/view/components/RecentlyAddedItemsContainer.tsx
index c252b917c0..60c6571bd6 100644
--- a/src/view/components/RecentlyAddedItemsContainer.tsx
+++ b/src/view/components/RecentlyAddedItemsContainer.tsx
@@ -6,6 +6,7 @@ import React, { FunctionComponent, useEffect, useRef } from 'react';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import globalize from '../../scripts/globalize';
 import ItemsContainerElement from '../../elements/ItemsContainerElement';
+import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
 
 type RecentlyAddedItemsContainerProps = {
     getPortraitShape: () => string;
@@ -17,21 +18,13 @@ const RecentlyAddedItemsContainer: FunctionComponent<RecentlyAddedItemsContainer
     const element = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-        const section = element.current?.querySelector('#recentlyAddedItemsSection') as HTMLDivElement;
-        if (items?.length) {
-            section.classList.remove('hide');
-        } else {
-            section.classList.add('hide');
-        }
-
-        const allowBottomPadding = !enableScrollX();
-        const container = element.current?.querySelector('#recentlyAddedItems');
         cardBuilder.buildCards(items, {
-            itemsContainer: container,
+            itemsContainer: element.current?.querySelector('.itemsContainer'),
+            parentContainer: element.current?.querySelector('#recentlyAddedItemsSection'),
             shape: getPortraitShape(),
             scalable: true,
             overlayPlayButton: true,
-            allowBottomPadding: allowBottomPadding,
+            allowBottomPadding: true,
             showTitle: true,
             showYear: true,
             centerText: true
@@ -47,10 +40,14 @@ const RecentlyAddedItemsContainer: FunctionComponent<RecentlyAddedItemsContainer
                     </h2>
                 </div>
 
-                <ItemsContainerElement
-                    id='recentlyAddedItems'
-                    className='itemsContainer padded-left padded-right'
-                />
+                {enableScrollX() ? <ItemsScrollerContainerElement
+                    scrollerclassName='padded-top-focusscale padded-bottom-focusscale'
+                    dataMousewheel='false'
+                    dataCenterfocus='true'
+                    className='itemsContainer scrollSlider focuscontainer-x'
+                /> : <ItemsContainerElement
+                    className='itemsContainer focuscontainer-x padded-left padded-right vertical-wrap'
+                />}
 
             </div>
         </div>
diff --git a/src/view/components/RecommendationContainer.tsx b/src/view/components/RecommendationContainer.tsx
index 2fbef7b20e..7501585a5d 100644
--- a/src/view/components/RecommendationContainer.tsx
+++ b/src/view/components/RecommendationContainer.tsx
@@ -43,7 +43,6 @@ const RecommendationContainer: FunctionComponent<RecommendationContainerProps> =
     useEffect(() => {
         cardBuilder.buildCards(recommendation.Items || [], {
             itemsContainer: element.current?.querySelector('.itemsContainer'),
-            parentContainer: element.current,
             shape: getPortraitShape(),
             scalable: true,
             overlayPlayButton: true,
diff --git a/src/view/components/ResumableItemsContainer.tsx b/src/view/components/ResumableItemsContainer.tsx
index cb11ea7d45..b26b8613fa 100644
--- a/src/view/components/ResumableItemsContainer.tsx
+++ b/src/view/components/ResumableItemsContainer.tsx
@@ -6,6 +6,7 @@ import React, { FunctionComponent, useEffect, useRef } from 'react';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import globalize from '../../scripts/globalize';
 import ItemsContainerElement from '../../elements/ItemsContainerElement';
+import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
 
 type ResumableItemsContainerProps = {
     getThumbShape: () => string;
@@ -17,17 +18,10 @@ const ResumableItemsContainer: FunctionComponent<ResumableItemsContainerProps> =
     const element = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-        const section = element.current?.querySelector('#resumableSection') as HTMLDivElement;
-        if (itemsResult.Items?.length) {
-            section.classList.remove('hide');
-        } else {
-            section.classList.add('hide');
-        }
-
         const allowBottomPadding = !enableScrollX();
-        const container = element.current?.querySelector('#resumableItems') as HTMLDivElement;
         cardBuilder.buildCards(itemsResult.Items || [], {
-            itemsContainer: container,
+            itemsContainer: element.current?.querySelector('.itemsContainer'),
+            parentContainer: element.current?.querySelector('#resumableSection'),
             preferThumb: true,
             shape: getThumbShape(),
             scalable: true,
@@ -49,10 +43,14 @@ const ResumableItemsContainer: FunctionComponent<ResumableItemsContainerProps> =
                     </h2>
                 </div>
 
-                <ItemsContainerElement
-                    id='resumableItems'
-                    className='itemsContainer padded-left padded-right'
-                />
+                {enableScrollX() ? <ItemsScrollerContainerElement
+                    scrollerclassName='padded-top-focusscale padded-bottom-focusscale'
+                    dataMousewheel='false'
+                    dataCenterfocus='true'
+                    className='itemsContainer scrollSlider focuscontainer-x'
+                /> : <ItemsContainerElement
+                    className='itemsContainer focuscontainer-x padded-left padded-right vertical-wrap'
+                />}
 
             </div>
         </div>
diff --git a/src/view/movies/SuggestionsView.tsx b/src/view/movies/SuggestionsView.tsx
index 7cecd56167..34a049783f 100644
--- a/src/view/movies/SuggestionsView.tsx
+++ b/src/view/movies/SuggestionsView.tsx
@@ -113,41 +113,6 @@ const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
         loadSuggestions(view, userId);
     }, [loadLatest, loadResume, loadSuggestions, props.topParentId]);
 
-    const setScrollClasses = useCallback((elem, scrollX) => {
-        const page = element.current;
-
-        if (!page) {
-            console.error('Unexpected null reference');
-            return;
-        }
-
-        if (scrollX) {
-            elem.classList.add('hiddenScrollX');
-
-            if (layoutManager.tv) {
-                elem.classList.add('smoothScrollX');
-                elem.classList.add('padded-top-focusscale');
-                elem.classList.add('padded-bottom-focusscale');
-            }
-
-            elem.classList.add('scrollX');
-            elem.classList.remove('vertical-wrap');
-        } else {
-            elem.classList.remove('hiddenScrollX');
-            elem.classList.remove('smoothScrollX');
-            elem.classList.remove('scrollX');
-            elem.classList.add('vertical-wrap');
-        }
-    }, []);
-
-    const initSuggestedTab = useCallback((view) => {
-        const containers = view.querySelectorAll('.itemsContainer');
-
-        for (const container of containers) {
-            setScrollClasses(container, enableScrollX());
-        }
-    }, [enableScrollX, setScrollClasses]);
-
     useEffect(() => {
         const page = element.current;
 
@@ -156,9 +121,8 @@ const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
             return;
         }
 
-        initSuggestedTab(page);
         loadSuggestionsTab(page);
-    }, [initSuggestedTab, loadSuggestionsTab]);
+    }, [loadSuggestionsTab]);
 
     return (
         <div ref={element}>
@@ -173,7 +137,6 @@ const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
                 </div> : recommendations.map((recommendation, index) => {
                     return <RecommendationContainer key={index} getPortraitShape={getPortraitShape} enableScrollX={enableScrollX} recommendation={recommendation} />;
                 })}
-                {}
             </div>
         </div>
     );