diff --git a/packages/ui-react/src/components/Card/Card.module.scss b/packages/ui-react/src/components/Card/Card.module.scss
index c0e62bdcf..21bc00799 100644
--- a/packages/ui-react/src/components/Card/Card.module.scss
+++ b/packages/ui-react/src/components/Card/Card.module.scss
@@ -18,12 +18,7 @@
       position: relative;
       z-index: 1;
       outline: none !important;
-      box-shadow: none !important;
       transform: scale(1.05);
-
-      & .poster {
-        box-shadow: 0 0 0 3px var(--highlight-color, variables.$white), 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%);
-      }
     }
   }
 
@@ -67,10 +62,6 @@
     &:hover {
       transform: scale(1);
       cursor: default;
-
-      & .poster {
-        box-shadow: none;
-      }
     }
   }
 }
@@ -84,8 +75,6 @@
   background-position: center;
   background-size: cover;
   border-radius: 4px;
-  box-shadow: 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%);
-  transition: box-shadow 0.1s ease;
 
   &.current::after {
     position: absolute;
diff --git a/packages/ui-react/src/components/Hero/Hero.module.scss b/packages/ui-react/src/components/Hero/Hero.module.scss
index 192923975..a67c7a8d3 100644
--- a/packages/ui-react/src/components/Hero/Hero.module.scss
+++ b/packages/ui-react/src/components/Hero/Hero.module.scss
@@ -32,7 +32,7 @@
 }
 
 .poster {
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
   z-index: -1;
@@ -41,13 +41,14 @@
   max-height: 700px;
   object-fit: cover;
   object-position: center 30%;
+  transition: opacity ease-out 0.3s;
 
   -webkit-mask-image: radial-gradient(farthest-corner at 80% 30%, rgba(0, 0, 0, 0.8) 20%, rgb(0 0 0 / 21%) 45%, rgb(0 0 0 / 0%) 73%);
   mask-image: radial-gradient(farthest-corner at 80% 30%, rgba(0, 0, 0, 0.8) 20%, rgb(0 0 0 / 21%) 45%, rgb(0 0 0 / 0%) 73%);
 }
 
 .posterFade {
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
   left: 0;
diff --git a/packages/ui-react/src/components/Hero/Hero.tsx b/packages/ui-react/src/components/Hero/Hero.tsx
index 626b6d5f2..64f0f6a9c 100644
--- a/packages/ui-react/src/components/Hero/Hero.tsx
+++ b/packages/ui-react/src/components/Hero/Hero.tsx
@@ -1,6 +1,8 @@
-import React, { type PropsWithChildren } from 'react';
+import React, { useRef, type PropsWithChildren } from 'react';
 
 import Image from '../Image/Image';
+import { useScrolledDown } from '../../hooks/useScrolledDown';
+import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 
 import styles from './Hero.module.scss';
 
@@ -10,10 +12,17 @@ type Props = PropsWithChildren<{
 
 const Hero = ({ image, children }: Props) => {
   const alt = ''; // intentionally empty for a11y, because adjacent text alternative
+  const posterRef = useRef<HTMLImageElement>(null);
+  const breakpoint = useBreakpoint();
+  const isMobile = breakpoint <= Breakpoint.sm;
+
+  useScrolledDown(50, isMobile ? 150 : 500, (progress: number) => {
+    if (posterRef.current) posterRef.current.style.opacity = `${Math.max(1 - progress, 0.1)}`;
+  });
 
   return (
     <div className={styles.hero}>
-      <Image className={styles.poster} image={image} width={1280} alt={alt} />
+      <Image ref={posterRef} className={styles.poster} image={image} width={1280} alt={alt} />
       <div className={styles.posterFade} />
       <div className={styles.info}>{children}</div>
     </div>
diff --git a/packages/ui-react/src/components/HeroShelf/HeroShelf.module.scss b/packages/ui-react/src/components/HeroShelf/HeroShelf.module.scss
index d6e40e3d0..be328ccd5 100644
--- a/packages/ui-react/src/components/HeroShelf/HeroShelf.module.scss
+++ b/packages/ui-react/src/components/HeroShelf/HeroShelf.module.scss
@@ -8,7 +8,7 @@ $desktop-max-height: 700px;
 $desktop-min-height: 275px;
 
 $tablet-height: 70vw;
-$tablet-min-height: 375px;
+$tablet-min-height: 550px;
 
 $mobile-height: 70vh;
 $mobile-min-height: 450px;
@@ -47,12 +47,13 @@ $mobile-landscape-height: 100vh;
   }
 
   @include responsive.mobile-only() {
-    height: calc($mobile-height - variables.$header-height - var(--safe-area-top, 0));
+    height: calc($mobile-height - variables.$header-height - var(--safe-area-top, 0px));
     min-height: calc($mobile-min-height - variables.$header-height);
   }
 
   @include responsive.mobile-only-landscape() {
     height: calc($mobile-landscape-height - variables.$header-height);
+    min-height: initial;
     padding: 0;
   }
 }
@@ -106,22 +107,15 @@ $mobile-landscape-height: 100vh;
   @include responsive.mobile-only() {
     height: $mobile-height;
     min-height: $mobile-min-height;
+    margin-top: var(--safe-area-top, 0);
   }
 
   @include responsive.mobile-only-landscape() {
     height: $mobile-landscape-height;
+    min-height: initial;
   }
 }
 
-.undimmed {
-  opacity: 1;
-  transition: opacity ease-out 0.3s;
-}
-
-.dimmed {
-  opacity: 0.01;
-}
-
 .background {
   position: absolute;
   top: 0;
@@ -145,13 +139,13 @@ $mobile-landscape-height: 100vh;
   }
 
   @include responsive.tablet-small-only() {
-    -webkit-mask-image: linear-gradient(190deg, black, rgba(0, 0, 0, 0.8) 40%, transparent 90%);
-    mask-image: linear-gradient(190deg, black, rgba(0, 0, 0, 0.8) 40%, transparent 90%);
+    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0, 0, 0, 1) 30%, transparent 90%);
+    mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0, 0, 0, 1) 30%, transparent 90%);
   }
 
   @include responsive.mobile-only() {
-    -webkit-mask-image: linear-gradient(190deg, black, rgba(0, 0, 0, 0.8) 40%, transparent 85%);
-    mask-image: linear-gradient(190deg, black, rgba(0, 0, 0, 0.8) 40%, transparent 85%);
+    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0, 0, 0, 1) 30%, transparent 75%);
+    mask-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0, 0, 0, 1) 30%, transparent 75%);
   }
 }
 
@@ -184,7 +178,14 @@ $mobile-landscape-height: 100vh;
   }
 }
 
-.metadataMobile {
+.swipeSlider {
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  height: 100%;
+}
+
+.swipeSliderMobile {
   width: 100%;
   height: 100%;
 }
@@ -194,7 +195,8 @@ $mobile-landscape-height: 100vh;
   display: flex;
   flex-direction: column;
   gap: 24px;
-  max-width: 46%;
+  min-width: 50%;
+  max-width: 50%;
   padding-left: calc(variables.$base-spacing * 4);
 
   > h2 {
@@ -230,12 +232,23 @@ $mobile-landscape-height: 100vh;
   }
 
   @include responsive.mobile-only-landscape() {
-    max-width: 70%;
+    min-height: initial;
     padding: 0 calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3);
+
+    > h2 {
+      font-size: 24px;
+    }
+    > div {
+      font-size: 14px;
+    }
   }
 
   @include responsive.tablet-small-only() {
     padding: 0 calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3);
+
+    > div > button {
+      width: auto !important; // Override StartWatchingButton fullWidth prop
+    }
   }
 
   @include responsive.mobile-only() {
diff --git a/packages/ui-react/src/components/HeroShelf/HeroShelf.tsx b/packages/ui-react/src/components/HeroShelf/HeroShelf.tsx
index e6369283e..c580f8a6f 100644
--- a/packages/ui-react/src/components/HeroShelf/HeroShelf.tsx
+++ b/packages/ui-react/src/components/HeroShelf/HeroShelf.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, type CSSProperties, type TransitionEventHandler } from 'react';
+import React, { useCallback, useEffect, useRef, useState, type CSSProperties, type TransitionEventHandler } from 'react';
 import type { Playlist } from '@jwp/ott-common/types/playlist';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +13,7 @@ import styles from './HeroShelf.module.scss';
 import HeroShelfMetadata from './HeroShelfMetadata';
 import HeroShelfBackground from './HeroShelfBackground';
 import HeroShelfPagination from './HeroShelfPagination';
-import HeroShelfMetadataMobile from './HeroShelfMetadataMobile';
+import HeroSwipeSlider from './HeroSwipeSlider';
 
 type Props = {
   playlist: Playlist;
@@ -27,20 +27,28 @@ const HeroShelf = ({ playlist, loading = false, error = null }: Props) => {
   const { t } = useTranslation('common');
   const breakpoint = useBreakpoint();
   const isMobile = breakpoint <= Breakpoint.sm;
-  const scrolledDown = useScrolledDown(500, 200);
+  const posterRef = useRef<HTMLDivElement>(null);
   const [direction, setDirection] = useState<'left' | 'right' | null>(null);
   const [animationPhase, setAnimationPhase] = useState<'init' | 'start' | 'end' | null>(null);
+  const [isSwipeAnimation, setIsSwipeAnimation] = useState(false);
 
-  const slideTo = (toIndex: number) => {
+  useScrolledDown(50, isMobile ? 200 : 600, (progress: number) => {
+    if (posterRef.current) posterRef.current.style.opacity = `${Math.max(1 - progress, isMobile ? 0 : 0.1)}`;
+  });
+
+  const slideTo = (toIndex: number, isSwiping = false) => {
     if (animationPhase) return;
 
     setNextIndex(toIndex);
     setDirection(toIndex > index ? 'right' : 'left');
     setAnimationPhase('init');
+    setIsSwipeAnimation(isSwiping);
   };
 
-  const slideLeft = () => slideTo(index - 1);
-  const slideRight = () => slideTo(index + 1);
+  const handleSlideLeft = () => slideTo(index - 1);
+  const handleSlideRight = () => slideTo(index + 1);
+  const handleSwipeLeft = () => slideTo(index - 1, true);
+  const handleSwipeRight = () => slideTo(index + 1, true);
 
   const handleBackgroundAnimationEnd: TransitionEventHandler = useCallback(
     (event) => {
@@ -62,39 +70,60 @@ const HeroShelf = ({ playlist, loading = false, error = null }: Props) => {
       setIndex(nextIndex);
       setDirection(null);
       setAnimationPhase(null);
+      setIsSwipeAnimation(false);
     }
   }, [animationPhase, direction, nextIndex]);
 
   const isAnimating = animationPhase === 'start' || animationPhase === 'end';
   const directionFactor = direction === 'left' ? 1 : direction === 'right' ? -1 : 0;
 
-  // Background animation
-  const backgroundX = isMobile ? 10 : 40;
-  const backgroundCurrentStyle: CSSProperties = {
-    transform: `scale(1.2) translateX(${isAnimating ? backgroundX * directionFactor : 0}px)`,
-    opacity: isAnimating ? 0 : 1,
-    transition: isAnimating ? `opacity ${isMobile ? 0.3 : 0.1}s ease-out, transform 0.3s ease-in` : 'none',
-  };
-  const backgroundAltStyle: CSSProperties = {
-    transform: `scale(1.2) translateX(${animationPhase === 'init' ? backgroundX * directionFactor * -1 : 0}px)`,
-    opacity: isAnimating ? 1 : 0,
-    transition: isAnimating ? 'opacity 0.3s ease-out, transform 0.3s ease-out' : 'none',
-  };
+  const getBackgroundStyle = (side?: 'left' | 'right') => {
+    const backgroundX = isMobile ? 10 : 40;
 
-  // Metadata animation
-  const left = 60;
-  const metadataCurrentStyle: CSSProperties = {
-    left: isAnimating && direction ? left * directionFactor : 0,
-    opacity: isAnimating ? 0 : 1,
-    transition: isAnimating ? 'opacity 0.15s ease-out, left 0.15s ease-out' : 'none',
-    pointerEvents: isAnimating ? 'none' : 'initial',
+    if (side == 'left') {
+      return {
+        transform: `scale(1.2) translateX(${animationPhase === 'init' ? backgroundX * -1 : 0}px)`,
+        opacity: isAnimating ? 1 : 0,
+        transition: isAnimating ? 'opacity 0.3s ease-out, transform 0.3s ease-out' : 'none',
+      };
+    }
+    if (side == 'right') {
+      return {
+        transform: `scale(1.2) translateX(${animationPhase === 'init' ? backgroundX : 0}px)`,
+        opacity: isAnimating ? 1 : 0,
+        transition: isAnimating ? 'opacity 0.3s ease-out, transform 0.3s ease-out' : 'none',
+      };
+    }
+    return {
+      transform: `scale(1.2) translateX(${isAnimating ? backgroundX * directionFactor : 0}px)`,
+      opacity: isAnimating ? 0 : 1,
+      transition: isAnimating ? `opacity ${isMobile ? 0.3 : 0.1}s ease-out, transform 0.3s ease-in` : 'none',
+    };
   };
 
-  const metadataAltStyle: CSSProperties = {
-    left: animationPhase === 'init' ? left * directionFactor * -1 : 0,
-    opacity: isAnimating ? 1 : 0,
-    transition: isAnimating ? 'opacity 0.2s ease-out, left 0.2s ease-out' : 'none',
-    pointerEvents: 'none',
+  const getMetadataStyle = (side?: 'left' | 'right', isSwiping = false): CSSProperties => {
+    if (side === 'left') {
+      return {
+        left: isSwiping || isSwipeAnimation ? '-100%' : animationPhase === 'init' ? -60 : 0,
+        opacity: isSwiping || isSwipeAnimation || isAnimating ? 1 : 0,
+        transition: isAnimating ? 'opacity 0.2s ease-out, left 0.2s ease-out' : 'none',
+        pointerEvents: 'none',
+      };
+    }
+    if (side === 'right') {
+      return {
+        left: isSwiping || isSwipeAnimation ? '100%' : animationPhase === 'init' ? 60 : 0,
+        opacity: isSwiping || isSwipeAnimation || isAnimating ? 1 : 0,
+        transition: isAnimating ? 'opacity 0.2s ease-out, left 0.2s ease-out' : 'none',
+        pointerEvents: 'none',
+      };
+    }
+    return {
+      left: isAnimating && direction ? 60 * directionFactor : 0,
+      opacity: isAnimating ? 0 : 1,
+      transition: isAnimating ? 'opacity 0.15s ease-out, left 0.15s ease-out' : 'none',
+      pointerEvents: isAnimating ? 'none' : 'initial',
+    };
   };
 
   const item = playlist.playlist[index];
@@ -102,24 +131,23 @@ const HeroShelf = ({ playlist, loading = false, error = null }: Props) => {
   const rightItem = playlist.playlist[nextIndex > index ? nextIndex : index + 1] || null;
 
   const renderedItem = animationPhase !== 'end' ? item : direction === 'right' ? leftItem : rightItem;
-  const altItem = direction === 'right' ? rightItem : leftItem;
 
   if (error || !playlist?.playlist) return <h2 className={styles.error}>Could not load items</h2>;
 
   return (
     <div className={classNames(styles.shelf)}>
-      <div className={classNames(styles.poster, styles.undimmed, { [styles.dimmed]: scrolledDown })}>
+      <div className={styles.poster} ref={posterRef}>
         <div className={styles.background} id="background">
           <HeroShelfBackground
             item={leftItem}
-            style={backgroundAltStyle}
+            style={getBackgroundStyle('left')}
             key={renderedItem?.mediaid === leftItem?.mediaid ? 'left-item' : leftItem?.mediaid}
             hidden={direction !== 'left'}
           />
-          <HeroShelfBackground item={renderedItem} style={backgroundCurrentStyle} key={renderedItem?.mediaid} onTransitionEnd={handleBackgroundAnimationEnd} />
+          <HeroShelfBackground item={renderedItem} style={getBackgroundStyle()} key={renderedItem?.mediaid} onTransitionEnd={handleBackgroundAnimationEnd} />
           <HeroShelfBackground
             item={rightItem}
-            style={backgroundAltStyle}
+            style={getBackgroundStyle('right')}
             key={renderedItem?.mediaid === rightItem?.mediaid ? 'right-item' : rightItem?.mediaid}
             hidden={direction !== 'right'}
           />
@@ -128,46 +156,54 @@ const HeroShelf = ({ playlist, loading = false, error = null }: Props) => {
         <div className={styles.fade2} />
       </div>
       <button
-        className={classNames(styles.chevron, styles.chevronLeft, styles.undimmed, { [styles.dimmed]: scrolledDown })}
+        className={classNames(styles.chevron, styles.chevronLeft)}
         aria-label={t('slide_previous')}
         disabled={!leftItem}
-        onClick={leftItem ? slideLeft : undefined}
+        onClick={leftItem ? handleSlideLeft : undefined}
       >
         <Icon icon={ChevronLeft} />
       </button>
-      {isMobile ? (
-        <HeroShelfMetadataMobile
-          loading={loading}
-          item={item}
-          rightItem={rightItem}
-          leftItem={leftItem}
-          playlistId={playlist.feedid}
-          direction={direction}
-          onSlideLeft={slideLeft}
-          onSlideRight={slideRight}
-        />
-      ) : (
-        <>
-          <HeroShelfMetadata item={renderedItem} loading={loading} playlistId={playlist.feedid} style={metadataCurrentStyle} />
-          <HeroShelfMetadata item={altItem} loading={loading} playlistId={playlist.feedid} style={metadataAltStyle} hidden={!direction} />
-        </>
-      )}
+      <HeroSwipeSlider
+        direction={direction}
+        isSwipeAnimation={isSwipeAnimation}
+        loading={loading}
+        onSwipeLeft={handleSwipeLeft}
+        onSwipeRight={handleSwipeRight}
+        hasLeftItem={!!leftItem}
+        hasRightItem={!!rightItem}
+        renderLeftItem={(isSwiping: boolean) => (
+          <HeroShelfMetadata
+            loading={loading}
+            item={leftItem}
+            playlistId={playlist.feedid}
+            style={getMetadataStyle('left', isSwiping)}
+            key={renderedItem?.mediaid === leftItem?.mediaid ? 'left-item' : leftItem?.mediaid}
+            hidden={direction !== 'left' && !isSwiping}
+          />
+        )}
+        renderItem={() => (
+          <HeroShelfMetadata loading={loading} item={renderedItem} playlistId={playlist.feedid} key={renderedItem?.mediaid} style={getMetadataStyle()} />
+        )}
+        renderRightItem={(isSwiping: boolean) => (
+          <HeroShelfMetadata
+            loading={loading}
+            item={rightItem}
+            playlistId={playlist.feedid}
+            style={getMetadataStyle('right', isSwiping)}
+            key={renderedItem?.mediaid === rightItem?.mediaid ? 'right-item' : rightItem?.mediaid}
+            hidden={direction !== 'right' && !isSwiping}
+          />
+        )}
+      />
       <button
-        className={classNames(styles.chevron, styles.chevronRight, styles.undimmed, { [styles.dimmed]: scrolledDown })}
+        className={classNames(styles.chevron, styles.chevronRight)}
         aria-label={t('slide_next')}
         disabled={!rightItem}
-        onClick={rightItem ? slideRight : undefined}
+        onClick={rightItem ? handleSlideRight : undefined}
       >
         <Icon icon={ChevronRight} />
       </button>
-      <HeroShelfPagination
-        className={scrolledDown ? styles.dimmed : undefined}
-        playlist={playlist}
-        index={index}
-        setIndex={slideTo}
-        nextIndex={nextIndex}
-        direction={direction || false}
-      />
+      <HeroShelfPagination playlist={playlist} index={index} setIndex={slideTo} nextIndex={nextIndex} direction={direction || false} />
     </div>
   );
 };
diff --git a/packages/ui-react/src/components/HeroShelf/HeroShelfMetadata.tsx b/packages/ui-react/src/components/HeroShelf/HeroShelfMetadata.tsx
index 2fb04c94b..7e40db160 100644
--- a/packages/ui-react/src/components/HeroShelf/HeroShelfMetadata.tsx
+++ b/packages/ui-react/src/components/HeroShelf/HeroShelfMetadata.tsx
@@ -12,6 +12,7 @@ import TruncatedText from '../TruncatedText/TruncatedText';
 import StartWatchingButton from '../../containers/StartWatchingButton/StartWatchingButton';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
+import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 
 import styles from './HeroShelf.module.scss';
 
@@ -21,17 +22,17 @@ const HeroShelfMetadata = ({
   playlistId,
   style,
   hidden,
-  isMobile,
 }: {
   item: PlaylistItem | null;
   loading: boolean;
   playlistId: string | undefined;
-  style?: CSSProperties;
+  style: CSSProperties;
   hidden?: boolean;
-  isMobile?: boolean;
 }) => {
   const navigate = useNavigate();
   const { t } = useTranslation('common');
+  const breakpoint = useBreakpoint();
+  const isMobile = breakpoint < Breakpoint.sm;
 
   if (!item) return null;
 
diff --git a/packages/ui-react/src/components/HeroShelf/HeroShelfPagination.tsx b/packages/ui-react/src/components/HeroShelf/HeroShelfPagination.tsx
index b5832a0da..cd2e04575 100644
--- a/packages/ui-react/src/components/HeroShelf/HeroShelfPagination.tsx
+++ b/packages/ui-react/src/components/HeroShelf/HeroShelfPagination.tsx
@@ -35,19 +35,9 @@ type Props = {
   setIndex: (index: number) => void;
   range?: number;
   animationDuration?: number;
-  className?: string;
 };
 
-const HeroShelfPagination = ({
-  playlist,
-  index: indexIn,
-  direction,
-  nextIndex: nextIndexIn,
-  setIndex,
-  range = 3,
-  animationDuration = 200,
-  className,
-}: Props) => {
+const HeroShelfPagination = ({ playlist, index: indexIn, direction, nextIndex: nextIndexIn, setIndex, range = 3, animationDuration = 200 }: Props) => {
   const { t } = useTranslation('common');
   const placeholderCount = range + 1; // Placeholders are used to keep a stable amount of DOM elements
   const index = indexIn + placeholderCount;
@@ -60,7 +50,7 @@ const HeroShelfPagination = ({
   }, [playlist.playlist, placeholderCount]);
 
   return (
-    <nav className={classNames(styles.dots, styles.undimmed, className)}>
+    <nav className={styles.dots}>
       <div aria-live="polite" className="hidden">
         {t('slide_indicator', { page: indexIn + 1, pages: playlist.playlist.length })}
       </div>
diff --git a/packages/ui-react/src/components/HeroShelf/HeroShelfMetadataMobile.tsx b/packages/ui-react/src/components/HeroShelf/HeroSwipeSlider.tsx
similarity index 68%
rename from packages/ui-react/src/components/HeroShelf/HeroShelfMetadataMobile.tsx
rename to packages/ui-react/src/components/HeroShelf/HeroSwipeSlider.tsx
index 2ce509ce3..65f14f83e 100644
--- a/packages/ui-react/src/components/HeroShelf/HeroShelfMetadataMobile.tsx
+++ b/packages/ui-react/src/components/HeroShelf/HeroSwipeSlider.tsx
@@ -1,25 +1,40 @@
-import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+
+import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 
-import HeroShelfMetadata from './HeroShelfMetadata';
 import styles from './HeroShelf.module.scss';
 
 type Props = {
-  item: PlaylistItem;
-  leftItem: PlaylistItem | null;
-  rightItem: PlaylistItem | null;
-  playlistId: string | undefined;
+  hasLeftItem: boolean;
+  hasRightItem: boolean;
+  renderLeftItem: (isSwiping: boolean) => React.ReactNode;
+  renderItem: () => React.ReactNode;
+  renderRightItem: (isSwiping: boolean) => React.ReactNode;
   loading: boolean;
   direction: 'left' | 'right' | null;
-  onSlideLeft: () => void;
-  onSlideRight: () => void;
+  isSwipeAnimation: boolean;
+  onSwipeLeft: () => void;
+  onSwipeRight: () => void;
 };
 
-const HeroShelfMetadataMobile = ({ item, leftItem, rightItem, playlistId, loading, direction, onSlideLeft, onSlideRight }: Props) => {
+const HeroSwipeSlider = ({
+  hasLeftItem,
+  hasRightItem,
+  renderItem,
+  renderLeftItem,
+  renderRightItem,
+  direction,
+  isSwipeAnimation,
+  onSwipeLeft,
+  onSwipeRight,
+}: Props) => {
   const movementRef = useRef({ x: 0, y: 0, start: Date.now() });
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [swipeAction, setSwipeAction] = useState<'slide' | 'scroll' | null>(null);
+  const breakpoint = useBreakpoint();
+  const isMobile = breakpoint <= Breakpoint.sm;
 
   const handleTouchStart = useEventCallback((event: TouchEvent) => {
     if (direction) return;
@@ -43,8 +58,8 @@ const HeroShelfMetadataMobile = ({ item, leftItem, rightItem, playlistId, loadin
     event.stopPropagation();
 
     // Follow touch horizontally
-    const maxLeft = rightItem ? -window.innerWidth : 0;
-    const maxRight = leftItem ? window.innerWidth : 0;
+    const maxLeft = hasRightItem ? -window.innerWidth : 0;
+    const maxRight = hasLeftItem ? window.innerWidth : 0;
     const limitedMovementX = Math.max(Math.min(movementX, maxRight), maxLeft);
 
     containerRef.current.style.transform = `translateX(${limitedMovementX}px)`;
@@ -60,10 +75,10 @@ const HeroShelfMetadataMobile = ({ item, leftItem, rightItem, playlistId, loadin
     const velocity = Math.round((movementX / (Date.now() - movementRef.current.start)) * 100);
     const velocityTreshold = 80;
 
-    if (rightItem && (movementX > window.innerWidth / 2 || velocity > velocityTreshold)) {
-      onSlideRight();
-    } else if (leftItem && (movementX < -window.innerWidth / 2 || velocity < -velocityTreshold)) {
-      onSlideLeft();
+    if (hasRightItem && (movementX > window.innerWidth / 2 || velocity > velocityTreshold)) {
+      onSwipeRight();
+    } else if (hasLeftItem && (movementX < -window.innerWidth / 2 || velocity < -velocityTreshold)) {
+      onSwipeLeft();
     } else {
       containerRef.current.style.transition = 'transform 0.2s ease-out';
       containerRef.current.style.transform = 'translateX(0)';
@@ -73,18 +88,17 @@ const HeroShelfMetadataMobile = ({ item, leftItem, rightItem, playlistId, loadin
 
   useLayoutEffect(() => {
     if (!containerRef.current) return;
-
-    if (direction === 'left') {
+    if (isSwipeAnimation && direction === 'left') {
       containerRef.current.style.transition = 'transform 0.2s ease-out';
       containerRef.current.style.transform = `translateX(100%)`;
-    } else if (direction === 'right') {
+    } else if (isSwipeAnimation && direction === 'right') {
       containerRef.current.style.transition = 'transform 0.2s ease-out';
       containerRef.current.style.transform = `translateX(-100%)`;
     } else {
       containerRef.current.style.transform = 'translateX(0)';
       containerRef.current.style.transition = 'none';
     }
-  }, [direction]);
+  }, [direction, isSwipeAnimation]);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -102,26 +116,12 @@ const HeroShelfMetadataMobile = ({ item, leftItem, rightItem, playlistId, loadin
   }, [handleTouchStart, handleTouchMove, handleTouchEnd]);
 
   return (
-    <div ref={containerRef} className={styles.metadataMobile}>
-      <HeroShelfMetadata
-        loading={loading}
-        item={leftItem}
-        playlistId={playlistId}
-        style={{ left: '-100%' }}
-        hidden={direction !== 'left' && swipeAction !== 'slide'}
-        isMobile
-      />
-      <HeroShelfMetadata loading={loading} item={item} playlistId={playlistId} isMobile />
-      <HeroShelfMetadata
-        loading={loading}
-        item={rightItem}
-        playlistId={playlistId}
-        style={{ left: '100%' }}
-        hidden={direction !== 'right' && swipeAction !== 'slide'}
-        isMobile
-      />
+    <div ref={containerRef} className={classNames(styles.swipeSlider, isMobile && styles.swipeSliderMobile)}>
+      {renderLeftItem(swipeAction === 'slide')}
+      {renderItem()}
+      {renderRightItem(swipeAction === 'slide')}
     </div>
   );
 };
 
-export default HeroShelfMetadataMobile;
+export default HeroSwipeSlider;
diff --git a/packages/ui-react/src/components/Image/Image.tsx b/packages/ui-react/src/components/Image/Image.tsx
index 0e53c3c81..e25953882 100644
--- a/packages/ui-react/src/components/Image/Image.tsx
+++ b/packages/ui-react/src/components/Image/Image.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { logInfo } from '@jwp/ott-common/src/logger';
 
@@ -42,7 +42,7 @@ const resolveImageURL = async (imgUrl: string, width: number) => {
   return url;
 };
 
-const Image = ({ className, image, onLoad, alt = '', width = 640 }: Props) => {
+const Image = forwardRef<HTMLImageElement, Props>(({ className, image, onLoad, alt = '', width = 640 }, ref) => {
   const [src, setSrc] = useState<string | null>(null);
 
   useEffect(() => {
@@ -65,7 +65,7 @@ const Image = ({ className, image, onLoad, alt = '', width = 640 }: Props) => {
 
   if (!src) return null;
 
-  return <img className={`${className} ${styles.image}`} src={src} alt={alt} />;
-};
+  return <img ref={ref} className={`${className} ${styles.image}`} src={src} alt={alt} />;
+});
 
 export default React.memo(Image);
diff --git a/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx b/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx
index 6bac4e6b6..7069f68db 100644
--- a/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx
+++ b/packages/ui-react/src/components/TruncatedText/TruncatedText.tsx
@@ -18,6 +18,8 @@ const TruncatedText: React.FC<TruncatedTextProps> = ({ text, maximumLines, class
       style={{
         maxHeight: `calc(1.5em * ${maximumLines})`,
         WebkitLineClamp: maximumLines,
+        lineClamp: maximumLines,
+        display: '-webkit-box',
       }}
     >
       <MarkdownComponent markdownString={text} inline />
diff --git a/packages/ui-react/src/components/TruncatedText/__snapshots__/TruncatedText.test.tsx.snap b/packages/ui-react/src/components/TruncatedText/__snapshots__/TruncatedText.test.tsx.snap
index 4804b3fbe..54235e4b2 100644
--- a/packages/ui-react/src/components/TruncatedText/__snapshots__/TruncatedText.test.tsx.snap
+++ b/packages/ui-react/src/components/TruncatedText/__snapshots__/TruncatedText.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<TruncatedText> > renders and matches snapshot 1`] = `
 <div>
   <div
     class="_truncatedText_b1c064"
-    style="max-height: calc(1.5em * 8); -webkit-line-clamp: 8;"
+    style="max-height: calc(1.5em * 8); -webkit-line-clamp: 8; line-clamp: 8; display: -webkit-box;"
   >
     <div
       class="_markdown_e219e2 _inline_e219e2"
diff --git a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
index f4c5e25ef..6ec2d9804 100644
--- a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
+++ b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
           </div>
           <div
             class="_truncatedText_b1c064 _description_77f2c2 _description_d0c133"
-            style="max-height: calc(1.5em * 8); -webkit-line-clamp: 8;"
+            style="max-height: calc(1.5em * 8); -webkit-line-clamp: 8; line-clamp: 8; display: -webkit-box;"
           >
             <div
               class="_markdown_e219e2 _inline_e219e2"
diff --git a/packages/ui-react/src/hooks/useScrolledDown.ts b/packages/ui-react/src/hooks/useScrolledDown.ts
index fc373defe..17a7bfb7f 100644
--- a/packages/ui-react/src/hooks/useScrolledDown.ts
+++ b/packages/ui-react/src/hooks/useScrolledDown.ts
@@ -1,28 +1,22 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect } from 'react';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
 
-export const useScrolledDown = (scrollUpHeight = 300, scrollDownHeight = 30) => {
-  const scrollingElement = document.scrollingElement || document.body;
-  const scrollTopRef = useRef(scrollingElement.scrollTop);
-  const [scrolledDown, setScrolledDown] = useState(false);
-
+export const useScrolledDown = (start = 300, end = 30, onChange: (progress: number) => void) => {
   const handleScroll = useEventCallback(() => {
-    const scrollPosition = scrollingElement.scrollTop;
-    const direction = scrollTopRef.current > scrollPosition ? 'up' : 'down';
-
-    scrollTopRef.current = scrollPosition;
+    const scrollTarget = document.scrollingElement || document.body;
+    const scrollPosition = scrollTarget.scrollTop;
+    const progress = Math.max(0, Math.min(1, (scrollPosition - start) / (end - start)));
 
-    // toggle the scrolledDown based on the direction to
-    setScrolledDown((direction === 'up' && scrollPosition > scrollUpHeight) || (direction === 'down' && scrollPosition > scrollDownHeight));
+    onChange(progress);
   });
 
   useEffect(() => {
-    window.addEventListener('scroll', handleScroll, { passive: true });
+    const { scrollingElement, documentElement, body } = document;
+    const listenerElement = scrollingElement && scrollingElement !== documentElement && scrollingElement !== body ? scrollingElement : window;
 
+    listenerElement.addEventListener('scroll', handleScroll, { passive: true });
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      listenerElement.removeEventListener('scroll', handleScroll);
     };
   }, [handleScroll]);
-
-  return scrolledDown;
 };
diff --git a/platforms/web/src/styles/main.scss b/platforms/web/src/styles/main.scss
index 64743a413..4c2803120 100644
--- a/platforms/web/src/styles/main.scss
+++ b/platforms/web/src/styles/main.scss
@@ -19,10 +19,13 @@
   --card-tag-bg: #{theme.$card-tag-bg};
 
   // Safe area insets, can be overridden for specific platforms
-  --safe-area-top: 0;
-  --safe-area-right: 0;
-  --safe-area-bottom: 0;
-  --safe-area-left: 0;
+  /* stylelint-disable length-zero-no-unit */
+  --safe-area-top: 0px; 
+  --safe-area-right: 0px;
+  --safe-area-bottom: 0px;
+  --safe-area-left: 0px;
+  /* stylelint-enable length-zero-no-unit */
+
 }
 
 @include accessibility.globalClassNames;