diff --git a/.prettierrc b/.prettierrc
index 3e189a360..edcba88d1 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 140
+  "printWidth": 150
 }
diff --git a/public/config.json b/public/config.json
index 82192da25..e25db522a 100644
--- a/public/config.json
+++ b/public/config.json
@@ -4,18 +4,15 @@
   },
   "content": [
     {
-      "backgroundColor": "#C105FA",
       "enableText": true,
       "featured": true,
       "playlistId": "CJE23b5T"
     },
     {
-      "backgroundColor": "#C105FA",
       "enableText": true,
       "playlistId": "sR5VypYk"
     },
     {
-      "backgroundColor": "#C105FA",
       "enableText": true,
       "playlistId": "o45EkQBf"
     }
@@ -38,24 +35,13 @@
   "options": {
     "dynamicBlur": true,
     "posterFading": true,
-    "backgroundColor": "#D42828",
-    "enableAddToHome": false,
+    "backgroundColor": null,
+    "shelveTitles": true,
     "enableContinueWatching": true,
-    "enableCookieNotice": false,
-    "enableHeader": true,
-    "enableInVideoSearch": false,
-    "highlightColor": "#CCCCCC",
-    "rightRail": {
-      "enabled": true
-    },
-    "showcaseContentOnly": false,
-    "useRecommendationsPlaylist": true,
-    "videoTitlePosition": "above"
+    "highlightColor": null
   },
   "player": "7xMa4gNw",
   "recommendationsPlaylist": "fuD6TWcf",
   "searchPlaylist": "tQ832H1H",
-  "siteName": "Blender",
-  "theme": "dark",
-  "version": "2"
+  "siteName": "Blender"
 }
diff --git a/src/components/Animation/Animation.tsx b/src/components/Animation/Animation.tsx
index 7d8ad3ac2..a8966feca 100644
--- a/src/components/Animation/Animation.tsx
+++ b/src/components/Animation/Animation.tsx
@@ -26,26 +26,31 @@ const Animation = ({
   const seconds = duration / 1000;
   const transition = `transform ${seconds}s ease-out`; // todo: -webkit-transform;
 
-  const timeout = useRef<NodeJS.Timeout>();
-  const timeout2 = useRef<NodeJS.Timeout>();
+  const timeout = useRef<number>();
+  const timeout2 = useRef<number>();
 
   useEffect(() => {
     if (timeout.current) clearTimeout(timeout.current);
     if (timeout2.current) clearTimeout(timeout2.current);
     if (open) {
       setHasOpenedBefore(true);
-      timeout.current = setTimeout(() => setStatus('opening'), delay);
-      timeout2.current = setTimeout(() => {
+      timeout.current = window.setTimeout(() => setStatus('opening'), delay);
+      timeout2.current = window.setTimeout(() => {
         setStatus('open');
         onOpenAnimationEnd && onOpenAnimationEnd();
       }, duration + delay);
     } else if (hasOpenedBefore) {
-      timeout.current = setTimeout(() => setStatus('closing'), delay);
-      timeout2.current = setTimeout(() => {
+      timeout.current = window.setTimeout(() => setStatus('closing'), delay);
+      timeout2.current = window.setTimeout(() => {
         setStatus('closed');
         onCloseAnimationEnd && onCloseAnimationEnd();
       }, duration + delay);
     }
+
+    return () => {
+      clearTimeout(timeout.current);
+      clearTimeout(timeout2.current);
+    };
   }, [duration, delay, transition, open, onOpenAnimationEnd, onCloseAnimationEnd, hasOpenedBefore, setHasOpenedBefore]);
 
   if (!open && status === 'closed') {
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index 6c9e68770..a956ce570 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -25,6 +25,19 @@ $large-button-height: 40px;
   cursor: pointer;
   transition: background-color 0.1s ease, transform 0.1s ease;
 
+  @media (hover: hover) and (pointer: fine) {
+    &:hover,
+    &:focus {
+      transform: scale(1.1);
+    }
+    &:focus:not(:focus-visible):not(:hover) {
+      transform: scale(1);
+    }
+    &:focus-visible {
+      transform: scale(1.1);
+    }
+  }
+
   &.large {
     height: $large-button-height;
   }
@@ -35,15 +48,15 @@ $large-button-height: 40px;
   }
 
   &.primary {
-    color: var(--highlight-contrast-color, white);
-    background-color: var(--highlight-color, black);
+    color: var(--highlight-contrast-color, theme.$btn-primary-color);
+    background-color: var(--highlight-color, theme.$btn-primary-bg);
   }
 
   &.outlined {
     border: 1px solid rgba(255, 255, 255, 0.3);
 
     &.active,
-    &:focus {
+    &:focus-visible {
       color: var(--highlight-contrast-color, white);
       background-color: var(--highlight-color, black);
       border-color: var(--highlight-color);
@@ -54,10 +67,10 @@ $large-button-height: 40px;
     background: none;
     opacity: 0.7;
 
-    &.active {
+    &.active,
+    &:focus {
       opacity: 1;
     }
-
     &:hover {
       z-index: 1;
       background: theme.$btn-default-bg;
@@ -79,13 +92,6 @@ $large-button-height: 40px;
     width: 18px;
     height: 18px;
   }
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover,
-    &:focus {
-      transform: scale(1.06);
-    }
-  }
 }
 
 .startIcon {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 4b7cda075..c7349cfc5 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -21,6 +21,7 @@ type Props = {
   size?: 'medium' | 'large';
   to?: string;
   role?: string;
+  className?: string;
 } & React.AriaAttributes;
 
 const Button: React.FC<Props> = ({
@@ -34,9 +35,10 @@ const Button: React.FC<Props> = ({
   size = 'medium',
   to,
   onClick,
+  className,
   ...rest
 }: Props) => {
-  const className = classNames(styles.button, [styles[color]], [styles[variant]], {
+  const combinedClassNames = classNames(styles.button, className, [styles[color]], [styles[variant]], {
     [styles.active]: active,
     [styles.fullWidth]: fullWidth,
     [styles.large]: size === 'large',
@@ -46,13 +48,13 @@ const Button: React.FC<Props> = ({
   const span = <span className={styles.buttonLabel}>{label}</span>;
 
   return to ? (
-    <NavLink className={className} to={to} activeClassName={styles.active} {...rest} exact>
+    <NavLink className={combinedClassNames} to={to} activeClassName={styles.active} {...rest} exact>
       {icon}
       {span}
       {children}
     </NavLink>
   ) : (
-    <button className={className} onClick={onClick} {...rest}>
+    <button className={combinedClassNames} onClick={onClick} {...rest}>
       {icon}
       {span}
       {children}
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
index 000ca871e..d80ab1e92 100644
--- a/src/components/Card/Card.module.scss
+++ b/src/components/Card/Card.module.scss
@@ -25,7 +25,6 @@
   }
 
   &.featured {
-
     .title {
       height: 1.1em;
       padding-right: 8px;
@@ -129,7 +128,6 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
 }
 
 .title {
-
   height: 2.4em;
   overflow: hidden;
   color: var(--card-color);
@@ -170,6 +168,7 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   font-family: var(--body-font-family);
   font-weight: 600;
   font-size: 13px;
+  white-space: nowrap;
   background-color: rgba(variables.$black, 0.6);
   border-radius: 4px;
   @include responsive.mobile-only {
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index f88bd2fd1..2fd77d14d 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -22,6 +22,7 @@ type CardProps = {
   loading?: boolean;
   isCurrent?: boolean;
   currentLabel?: string;
+  enableTitle?: boolean;
 };
 
 function Card({
@@ -35,6 +36,7 @@ function Card({
   episodeNumber,
   progress,
   posterAspect = '16:9',
+  enableTitle = true,
   featured = false,
   disabled = false,
   loading = false,
@@ -82,7 +84,7 @@ function Card({
         {isCurrent && <div className={styles.currentLabel}>{currentLabel}</div>}
         {!loading && (
           <div className={styles.meta}>
-            {featured && !disabled && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
+            {featured && !disabled && enableTitle && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
             {renderTag()}
           </div>
         )}
@@ -92,7 +94,7 @@ function Card({
           </div>
         ) : null}
       </div>
-      {!featured && !disabled && (
+      {!featured && !disabled && enableTitle && (
         <div className={styles.titleContainer}>
           <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
         </div>
diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
index 3feb9ba6e..99cf79614 100644
--- a/src/components/CardGrid/CardGrid.tsx
+++ b/src/components/CardGrid/CardGrid.tsx
@@ -20,9 +20,10 @@ const defaultCols: Breakpoints = {
 type CardGridProps = {
   playlist: PlaylistItem[];
   onCardHover?: (item: PlaylistItem) => void;
-  onCardClick: (item: PlaylistItem) => void;
+  onCardClick: (item: PlaylistItem, playlistId?: string) => void;
   watchHistory?: { [key: string]: number };
   isLoading: boolean;
+  enableCardTitles?: boolean;
   cols?: Breakpoints;
   currentCardItem?: PlaylistItem;
   currentCardLabel?: string;
@@ -33,6 +34,7 @@ function CardGrid({
   onCardClick,
   onCardHover,
   watchHistory,
+  enableCardTitles = true,
   isLoading = false,
   cols = defaultCols,
   currentCardItem,
@@ -55,13 +57,14 @@ function CardGrid({
           <Card
             key={mediaid}
             title={title}
+            enableTitle={enableCardTitles}
             duration={duration}
             posterSource={findPlaylistImageForWidth(playlistItem, imageSourceWidth)}
             progress={watchHistory ? watchHistory[mediaid] : undefined}
             seriesId={seriesId}
             episodeNumber={episodeNumber}
             seasonNumber={seasonNumber}
-            onClick={() => onCardClick(playlistItem)}
+            onClick={() => onCardClick(playlistItem, playlistItem.feedid)}
             onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
             loading={isLoading}
             isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}
@@ -74,7 +77,7 @@ function CardGrid({
 
   return (
     <div className={styles.container}>
-      <VirtualizedGrid rowCount={rows.length} cols={cols} cellRenderer={cellRenderer} spacing={50} />
+      <VirtualizedGrid rowCount={rows.length} cols={cols} cellRenderer={cellRenderer} spacing={enableCardTitles ? 50 : 4} />
     </div>
   );
 }
diff --git a/src/components/CollapsibleText/CollapsibleText.module.scss b/src/components/CollapsibleText/CollapsibleText.module.scss
index 4bd6a8483..2432a8614 100644
--- a/src/components/CollapsibleText/CollapsibleText.module.scss
+++ b/src/components/CollapsibleText/CollapsibleText.module.scss
@@ -17,6 +17,7 @@
 
   &.collapsed {
     mask-image: linear-gradient(-180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%);
+    -webkit-mask-image: linear-gradient(-180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%); /* stylelint-disable-line */
   }
 }
 
diff --git a/src/components/CollapsibleText/CollapsibleText.tsx b/src/components/CollapsibleText/CollapsibleText.tsx
index 38e01cb93..4e648fd6b 100644
--- a/src/components/CollapsibleText/CollapsibleText.tsx
+++ b/src/components/CollapsibleText/CollapsibleText.tsx
@@ -21,10 +21,13 @@ const CollapsibleText: React.FC<Props> = ({ text, className, maxHeight = 'none'
 
   const ariaLabel = expanded ? 'Collapse' : 'Expand';
 
+  const clippablePixels = 4;
+
   useEffect(() => {
     divRef.current &&
       setDoesFlowOver(
-        divRef.current.scrollHeight > divRef.current.offsetHeight || (maxHeight < divRef.current.offsetHeight && maxHeight !== 'none'),
+        divRef.current.scrollHeight > divRef.current.offsetHeight + clippablePixels ||
+          (maxHeight < divRef.current.offsetHeight && maxHeight !== 'none'),
       );
   }, [maxHeight, text, breakpoint]);
 
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index f2dd208d2..71aba227e 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import React, { ReactFragment } from 'react';
+import React, { ReactFragment, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
@@ -38,6 +38,7 @@ const Header: React.FC<Props> = ({
   onCloseSearchButtonClick,
 }) => {
   const { t } = useTranslation('menu');
+  const [logoLoaded, setLogoLoaded] = useState(false);
   const breakpoint = useBreakpoint();
   const headerClassName = classNames(styles.header, styles[headerType], {
     [styles.mobileSearchActive]: searchActive && breakpoint <= Breakpoint.sm,
@@ -87,11 +88,11 @@ const Header: React.FC<Props> = ({
         </div>
         {logoSrc && (
           <div className={styles.brand}>
-            <Logo src={logoSrc} />
+            <Logo src={logoSrc} onLoad={() => setLogoLoaded(true)} />
           </div>
         )}
         <nav className={styles.nav} aria-label="menu">
-          {children}
+          {logoLoaded ? children : null}
         </nav>
         <div className={styles.search}>{searchEnabled ? search : null}</div>
       </div>
diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
index 3a6f29afb..9a0ccd814 100644
--- a/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -39,17 +39,7 @@ exports[`<Header /> renders header 1`] = `
       <nav
         aria-label="menu"
         class="nav"
-      >
-        <a
-          aria-current="page"
-          class="button default outlined active"
-          href="/"
-        >
-          <span>
-            Home
-          </span>
-        </a>
-      </nav>
+      />
       <div
         class="search"
       >
diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss
index b12e47905..ad5503883 100644
--- a/src/components/Layout/Layout.module.scss
+++ b/src/components/Layout/Layout.module.scss
@@ -4,7 +4,7 @@
 .layout {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: calc(100vh - calc(100vh - 100%));
 }
 .main {
   flex: 1;
diff --git a/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
index b857a41e7..a3e5c83c7 100644
--- a/src/components/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
@@ -45,17 +45,7 @@ exports[`<Layout /> renders layout 1`] = `
           <nav
             aria-label="menu"
             class="nav"
-          >
-            <a
-              aria-current="page"
-              class="button default text active"
-              href="/"
-            >
-              <span>
-                home
-              </span>
-            </a>
-          </nav>
+          />
           <div
             class="search"
           />
diff --git a/src/components/Logo/Logo.test.tsx b/src/components/Logo/Logo.test.tsx
index f968b767b..b4af2ae98 100644
--- a/src/components/Logo/Logo.test.tsx
+++ b/src/components/Logo/Logo.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { fireEvent } from '@testing-library/react';
 
 import { render } from '../../testUtils';
 
@@ -6,8 +7,26 @@ import Logo from './Logo';
 
 describe('<Logo/>', () => {
   it('renders and matches snapshot', () => {
-    const { container } = render(<Logo src="123" />);
+    const { container } = render(<Logo src="123" onLoad={jest.fn()} />);
 
     expect(container).toMatchSnapshot();
   });
+
+  it('calls the onLoad function after the image has been loaded', () => {
+    const onLoad = jest.fn();
+    const { getByAltText } = render(<Logo src="testimage" onLoad={onLoad} />);
+
+    fireEvent.load(getByAltText('logo'));
+
+    expect(onLoad).toBeCalledTimes(1);
+  });
+
+  it('calls the onLoad function when the image fails to load', () => {
+    const onLoad = jest.fn();
+    const { getByAltText } = render(<Logo src="testimage" onLoad={onLoad} />);
+
+    fireEvent.error(getByAltText('logo'));
+
+    expect(onLoad).toBeCalledTimes(1);
+  });
 });
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
index 6ae1701d2..fbe2d1b9e 100644
--- a/src/components/Logo/Logo.tsx
+++ b/src/components/Logo/Logo.tsx
@@ -5,12 +5,13 @@ import styles from './Logo.module.scss';
 
 type Props = {
   src: string;
+  onLoad: () => void;
 };
 
-const Logo: React.FC<Props> = ({ src }: Props) => {
+const Logo: React.FC<Props> = ({ src, onLoad }: Props) => {
   return (
     <Link to="/">
-      <img className={styles.logo} alt="logo" src={src} />
+      <img className={styles.logo} alt="logo" src={src} onLoad={onLoad} onError={onLoad} />
     </Link>
   );
 };
diff --git a/src/components/MenuButton/MenuButton.module.scss b/src/components/MenuButton/MenuButton.module.scss
index 12bf4b3d7..c8a63154f 100644
--- a/src/components/MenuButton/MenuButton.module.scss
+++ b/src/components/MenuButton/MenuButton.module.scss
@@ -21,7 +21,7 @@
   text-align: center;
   text-decoration: none;
   background: transparent;
-  outline-color: var(--highlight-color, white);
+  outline: none;
   cursor: pointer;
   opacity: 0.7;
   transition: background 0.1s ease;
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
index 566d7f3d0..f7ef0e1b7 100644
--- a/src/components/Modal/Modal.module.scss
+++ b/src/components/Modal/Modal.module.scss
@@ -54,6 +54,8 @@
   > svg {
     width: 28px;
     height: 28px;
+    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4)); /* stylelint-disable-line */
+    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
   }
   &.hidden {
     opacity: 0;
diff --git a/src/components/Root/__snapshots__/Root.test.tsx.snap b/src/components/Root/__snapshots__/Root.test.tsx.snap
index db75be57a..a322bcfb0 100644
--- a/src/components/Root/__snapshots__/Root.test.tsx.snap
+++ b/src/components/Root/__snapshots__/Root.test.tsx.snap
@@ -45,16 +45,7 @@ exports[`<Root /> renders and matches snapshot 1`] = `
           <nav
             aria-label="menu"
             class="nav"
-          >
-            <a
-              class="button default text"
-              href="/"
-            >
-              <span>
-                home
-              </span>
-            </a>
-          </nav>
+          />
           <div
             class="search"
           />
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
index e2a61fd31..4b7408fe0 100644
--- a/src/components/Shelf/Shelf.tsx
+++ b/src/components/Shelf/Shelf.tsx
@@ -33,6 +33,8 @@ export type ShelfProps = {
   onCardClick: (playlistItem: PlaylistItem, playlistId?: string) => void;
   onCardHover?: (playlistItem: PlaylistItem) => void;
   watchHistory?: { [key: string]: number };
+  enableTitle?: boolean;
+  enableCardTitles?: boolean;
   featured?: boolean;
   loading?: boolean;
   error?: unknown;
@@ -45,6 +47,8 @@ const Shelf: React.FC<ShelfProps> = ({
   onCardHover,
   title,
   watchHistory,
+  enableTitle = true,
+  enableCardTitles = true,
   featured = false,
   loading = false,
   error = null,
@@ -60,6 +64,7 @@ const Shelf: React.FC<ShelfProps> = ({
     (item, isInView) => (
       <Card
         title={item.title}
+        enableTitle={enableCardTitles}
         duration={item.duration}
         progress={watchHistory ? watchHistory[item.mediaid] : undefined}
         posterSource={findPlaylistImageForWidth(item, imageSourceWidth)}
@@ -119,7 +124,7 @@ const Shelf: React.FC<ShelfProps> = ({
 
   return (
     <div className={classNames(styles.shelf, { [styles.featured]: featured })} data-mediaid={playlist.feedid}>
-      {!featured && <h2 className={classNames(styles.title, { [styles.loading]: loading })}>{title || playlist.title}</h2>}
+      {!featured && enableTitle ? <h2 className={classNames(styles.title, { [styles.loading]: loading })}>{title || playlist.title}</h2> : null}
       <TileDock<PlaylistItem>
         items={playlist.playlist}
         tilesToShow={tilesToShow}
diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx
index 7c586a721..a2a2d905f 100644
--- a/src/components/TileDock/TileDock.tsx
+++ b/src/components/TileDock/TileDock.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import styles from './TileDock.module.scss';
 
@@ -73,10 +73,6 @@ const TileDock = <T extends unknown>({
   const [slideToIndex, setSlideToIndex] = useState<number>(0);
   const [transform, setTransform] = useState<number>(-100);
   const [doAnimationReset, setDoAnimationReset] = useState<boolean>(false);
-  const [touchPosition, setTouchPosition] = useState<Position>({
-    x: 0,
-    y: 0,
-  } as Position);
   const frameRef = useRef<HTMLUListElement>() as React.MutableRefObject<HTMLUListElement>;
   const tileWidth: number = 100 / tilesToShow;
   const isMultiPage: boolean = items?.length > tilesToShow;
@@ -92,45 +88,84 @@ const TileDock = <T extends unknown>({
   const showLeftControl: boolean = needControls && !(cycleMode === 'stop' && index === 0);
   const showRightControl: boolean = needControls && !(cycleMode === 'stop' && index === items.length - tilesToShow);
 
-  const slide = (direction: Direction): void => {
-    const directionFactor = direction === 'right' ? 1 : -1;
-    let nextIndex: number = index + tilesToShow * directionFactor;
+  const slide = useCallback(
+    (direction: Direction): void => {
+      const directionFactor = direction === 'right' ? 1 : -1;
+      let nextIndex: number = index + tilesToShow * directionFactor;
 
-    if (nextIndex < 0) {
-      if (cycleMode === 'stop') nextIndex = 0;
-      if (cycleMode === 'restart') nextIndex = index === 0 ? 0 - tilesToShow : 0;
-    }
-    if (nextIndex > items.length - tilesToShow) {
-      if (cycleMode === 'stop') nextIndex = items.length - tilesToShow;
-      if (cycleMode === 'restart') nextIndex = index >= items.length - tilesToShow ? items.length : items.length - tilesToShow;
-    }
+      if (nextIndex < 0) {
+        if (cycleMode === 'stop') nextIndex = 0;
+        if (cycleMode === 'restart') nextIndex = index === 0 ? 0 - tilesToShow : 0;
+      }
+      if (nextIndex > items.length - tilesToShow) {
+        if (cycleMode === 'stop') nextIndex = items.length - tilesToShow;
+        if (cycleMode === 'restart') nextIndex = index >= items.length - tilesToShow ? items.length : items.length - tilesToShow;
+      }
 
-    const steps: number = Math.abs(index - nextIndex);
-    const movement: number = steps * tileWidth * (0 - directionFactor);
+      const steps: number = Math.abs(index - nextIndex);
+      const movement: number = steps * tileWidth * (0 - directionFactor);
 
-    setSlideToIndex(nextIndex);
-    setTransform(-100 + movement);
-    if (!animated) setDoAnimationReset(true);
-  };
+      setSlideToIndex(nextIndex);
+      setTransform(-100 + movement);
+      if (!animated) setDoAnimationReset(true);
+    },
+    [animated, cycleMode, index, items.length, tileWidth, tilesToShow],
+  );
 
-  const handleTouchStart = (event: React.TouchEvent): void =>
-    setTouchPosition({
-      x: event.touches[0].clientX,
-      y: event.touches[0].clientY,
-    });
-  const handleTouchEnd = (event: React.TouchEvent): void => {
-    const newPosition = {
-      x: event.changedTouches[0].clientX,
-      y: event.changedTouches[0].clientY,
-    };
-    const movementX: number = Math.abs(newPosition.x - touchPosition.x);
-    const movementY: number = Math.abs(newPosition.y - touchPosition.y);
-    const direction: Direction = newPosition.x < touchPosition.x ? 'right' : 'left';
+  const handleTouchStart = useCallback(
+    (event: React.TouchEvent): void => {
+      const touchPosition: Position = {
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY,
+      };
 
-    if (movementX > minimalTouchMovement && movementX > movementY) {
-      slide(direction);
-    }
-  };
+      function handleTouchMove(this: HTMLDocument, event: TouchEvent): void {
+        const newPosition: Position = {
+          x: event.changedTouches[0].clientX,
+          y: event.changedTouches[0].clientY,
+        };
+        const movementX: number = Math.abs(newPosition.x - touchPosition.x);
+        const movementY: number = Math.abs(newPosition.y - touchPosition.y);
+
+        if (movementX > movementY && movementX > 10) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      }
+
+      function handleTouchEnd(this: HTMLDocument, event: TouchEvent): void {
+        const newPosition = {
+          x: event.changedTouches[0].clientX,
+          y: event.changedTouches[0].clientY,
+        };
+
+        const movementX: number = Math.abs(newPosition.x - touchPosition.x);
+        const movementY: number = Math.abs(newPosition.y - touchPosition.y);
+        const direction: Direction = newPosition.x < touchPosition.x ? 'right' : 'left';
+
+        if (movementX > minimalTouchMovement && movementX > movementY) {
+          slide(direction);
+        }
+
+        cleanup();
+      }
+
+      function handleTouchCancel() {
+        cleanup();
+      }
+
+      function cleanup() {
+        document.removeEventListener('touchmove', handleTouchMove);
+        document.removeEventListener('touchend', handleTouchEnd);
+        document.removeEventListener('touchcancel', handleTouchCancel);
+      }
+
+      document.addEventListener('touchmove', handleTouchMove, { passive: false });
+      document.addEventListener('touchend', handleTouchEnd);
+      document.addEventListener('touchcancel', handleTouchCancel);
+    },
+    [minimalTouchMovement, slide],
+  );
 
   useLayoutEffect(() => {
     const resetAnimation = (): void => {
@@ -175,7 +210,7 @@ const TileDock = <T extends unknown>({
   return (
     <div className={styles.tileDock}>
       {showLeftControl && !!renderLeftControl && <div className={styles.leftControl}>{renderLeftControl(() => slide('left'))}</div>}
-      <ul ref={frameRef} style={ulStyle} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd} onTransitionEnd={handleTransitionEnd}>
+      <ul ref={frameRef} style={ulStyle} onTouchStart={handleTouchStart} onTransitionEnd={handleTransitionEnd}>
         {wrapWithEmptyTiles ? (
           <li
             className={styles.emptyTile}
diff --git a/src/components/Video/Video.module.scss b/src/components/Video/Video.module.scss
index e8924d162..fde332867 100644
--- a/src/components/Video/Video.module.scss
+++ b/src/components/Video/Video.module.scss
@@ -23,6 +23,8 @@
 
 .main {
   display: flex;
+  max-width: 100vw;
+  overflow: hidden;
 
   &.hidden {
     display: none;
@@ -122,18 +124,28 @@
     margin-right: 0;
   }
 
+  @include responsive.mobile-and-tablet() {
+    > button {
+      padding: 0 12px;
+    }
+  }
+
   @include responsive.mobile-only() {
     flex-wrap: wrap;
+
     > button:first-child {
-      margin-right: 0;
       margin-bottom: 8px;
     }
-    > button:not(:first-child) {
+
+    > button:not(.trailerButton) {
       flex: 1;
     }
+
+    .trailerButton {
+      margin-right: 0;
+    }
   }
 }
-
 .poster {
   position: absolute;
   top: 0;
@@ -167,14 +179,19 @@
   }
 
   &.fading {
-    width: 100vw;
-    height: 100vh;
-    mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%);
-    -webkit-mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%); /* stylelint-disable-line */
+    width: 80vw;
+    height: calc(85vw / 16 * 9);
+    mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 60%);
+    -webkit-mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 60%); /* stylelint-disable-line */
+
+    @include responsive.tablet-only() {
+      width: 80vw;
+      height: calc(140vw / 16 * 9);
+    }
 
     @include responsive.mobile-only() {
-      mask-image: radial-gradient(farthest-corner at 70% 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 65%);
-      -webkit-mask-image: radial-gradient(farthest-corner at 70% 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 65%); /* stylelint-disable-line */
+      width: 110vw;
+      height: calc(180vw / 16 * 9);
     }
   }
 }
@@ -198,7 +215,7 @@
   top: 0;
   left: 0;
   width: 100vw;
-  height: 100vh;
+  height: calc(100vh - calc(100vh - 100%));
   overflow: hidden;
   background-color: variables.$black;
 }
@@ -211,7 +228,7 @@
   justify-content: center;
   align-items: center;
   width: 100vw;
-  height: 100vh;
+  height: calc(100vh - calc(100vh - 100%));
 }
 
 .playerOverlay {
@@ -219,8 +236,9 @@
   top: 0;
   left: 0;
   width: 100%;
+  min-height: 100px;
   padding: 24px 56px;
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.4) 100%);
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.25) 100%);
   pointer-events: none;
 
   @include responsive.mobile-only() {
@@ -245,6 +263,8 @@
   > svg {
     width: 36px;
     height: 36px;
+    -webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.4)); /* stylelint-disable-line */
+    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.4));
   }
 }
 
@@ -266,12 +286,12 @@
   bottom: 0;
   left: 0;
   height: 4px;
-  background-color: rgba(variables.$black, 0.4);
+  background-color: rgba(variables.$black, 0.3);
 }
 
 .progress {
   position: absolute;
   left: 0;
   height: 4px;
-  background-color: variables.$white;
+  background-color: var(--highlight-contrast-color, rgba(variables.$black, 0.4));
 }
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
index 9fb11bcd2..509441579 100644
--- a/src/components/Video/Video.tsx
+++ b/src/components/Video/Video.tsx
@@ -141,6 +141,7 @@ const Video: React.FC<Props> = ({
           <div className={styles.otherButtons}>
             {trailerItem && (
               <Button
+                className={styles.trailerButton}
                 label={t('video:trailer')}
                 aria-label={t('video:watch_trailer')}
                 startIcon={<PlayTrailer />}
@@ -212,9 +213,7 @@ const Video: React.FC<Props> = ({
             isTrailer
           />
           <div className={classNames(styles.playerOverlay, { [styles.hidden]: isPlaying && !userActive })} />
-          <div
-            className={classNames(styles.trailerMeta, styles.title, { [styles.hidden]: isPlaying && !userActive })}
-          >{`${title} - Trailer`}</div>
+          <div className={classNames(styles.trailerMeta, styles.title, { [styles.hidden]: isPlaying && !userActive })}>{`${title} - Trailer`}</div>
         </Modal>
       )}
     </div>
diff --git a/src/containers/Cinema/Cinema.module.scss b/src/containers/Cinema/Cinema.module.scss
index 6851e3444..5fca536b8 100644
--- a/src/containers/Cinema/Cinema.module.scss
+++ b/src/containers/Cinema/Cinema.module.scss
@@ -2,6 +2,6 @@
   &.fill {
     display: flex;
     width: 100vw;
-    height: 100vh;
+    height: calc(100vh - calc(100vh - 100%));
   }
 }
diff --git a/src/i18n/locales/en_US/video.json b/src/i18n/locales/en_US/video.json
index 95063104f..32e8860e9 100644
--- a/src/i18n/locales/en_US/video.json
+++ b/src/i18n/locales/en_US/video.json
@@ -4,7 +4,7 @@
   "continue_watching": "Continue watching",
   "copied_url": "Copied url",
   "current_episode": "Current episode",
-  "currently_playing": "Currently playing",
+  "currently_playing": "Current video",
   "episodes": "Episodes",
   "favorite": "Favorite",
   "remove_from_favorites": "Remove from favorites",
diff --git a/src/providers/ConfigProvider.tsx b/src/providers/ConfigProvider.tsx
index 67f8ddb9b..3b217bdf3 100644
--- a/src/providers/ConfigProvider.tsx
+++ b/src/providers/ConfigProvider.tsx
@@ -32,13 +32,7 @@ export type ProviderProps = {
   onValidationCompleted: (config: Config) => void;
 };
 
-const ConfigProvider: FunctionComponent<ProviderProps> = ({
-  children,
-  configLocation,
-  onLoading,
-  onValidationError,
-  onValidationCompleted,
-}) => {
+const ConfigProvider: FunctionComponent<ProviderProps> = ({ children, configLocation, onLoading, onValidationError, onValidationCompleted }) => {
   const [config, setConfig] = useState<Config>(defaultConfig);
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -72,7 +66,7 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
     const root = document.querySelector(':root') as HTMLElement;
 
     if (root && backgroundColor) {
-      root.style.setProperty('--background-color', backgroundColor);
+      root.style.setProperty('--body-background-color', backgroundColor);
       root.style.setProperty('--background-contrast-color', calculateContrastColor(backgroundColor));
     }
 
diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
index b0f92150f..5d5a98c3f 100644
--- a/src/screens/Home/Home.tsx
+++ b/src/screens/Home/Home.tsx
@@ -48,9 +48,12 @@ const Home = (): JSX.Element => {
   const { data: { playlist } = { playlist: [] } } = usePlaylist(content[0]?.playlistId);
   const updateBlurImage = useBlurImageUpdater(playlist);
 
-  const onCardClick = useCallback((playlistItem: PlaylistItem, playlistId?: string) => history.push(cardUrl(playlistItem, playlistId)), [
-    history,
-  ]);
+  const onCardClick = useCallback(
+    (playlistItem: PlaylistItem, playlistId?: string) => {
+      history.push(cardUrl(playlistItem, playlistId, playlistId === PersonalShelf.ContinueWatching));
+    },
+    [history],
+  );
   const onCardHover = useCallback((playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image), [updateBlurImage]);
 
   const itemData: ItemData = createItemData(content);
@@ -63,12 +66,7 @@ const Home = (): JSX.Element => {
     return (
       <PlaylistContainer key={contentItem.playlistId} playlistId={contentItem.playlistId} style={style}>
         {({ playlist, error, isLoading, style }) => (
-          <div
-            key={key}
-            style={style}
-            role="row"
-            className={classNames(styles.shelfContainer, { [styles.featured]: contentItem.featured })}
-          >
+          <div key={key} style={style} role="row" className={classNames(styles.shelfContainer, { [styles.featured]: contentItem.featured })}>
             <div role="cell">
               <ShelfComponent
                 loading={isLoading}
@@ -77,6 +75,8 @@ const Home = (): JSX.Element => {
                 watchHistory={playlist.feedid === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
                 onCardClick={onCardClick}
                 onCardHover={onCardHover}
+                enableTitle={contentItem.enableText}
+                enableCardTitles={config.options.shelveTitles}
                 title={playlist.title}
                 featured={contentItem.featured === true}
               />
@@ -107,9 +107,9 @@ const Home = (): JSX.Element => {
     };
     const calculateRegular = () => {
       const tilesToShow = tileBreakpoints[breakpoint];
-      const shelfTitlesHeight = config.options.shelveTitles ? 40 : 0;
+      const shelfTitlesHeight = item.enableText ? 40 : 0;
       const shelfMetaHeight = shelfTitlesHeight + 12;
-      const cardMetaHeight = 40;
+      const cardMetaHeight = config.options.shelveTitles ? 40 : 0;
       const shelfHorizontalMargin = isMobile ? 76 : 0;
       const cardWidth = (document.body.offsetWidth - shelfHorizontalMargin) / tilesToShow;
       const cardHeight = cardWidth * (9 / 16);
diff --git a/src/screens/Movie/Movie.module.scss b/src/screens/Movie/Movie.module.scss
index f5d975dc0..baf4faede 100644
--- a/src/screens/Movie/Movie.module.scss
+++ b/src/screens/Movie/Movie.module.scss
@@ -4,8 +4,8 @@
 .related {
   display: flex;
   align-items: center;
-  margin: 16px 0;
   > h3 {
+    padding-bottom: 16px;
     font-family: var(--body-alt-font-family);
     font-weight: 700;
     font-size: 24px;
diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
index f0a8f4eef..be2a57e2e 100644
--- a/src/screens/Movie/Movie.tsx
+++ b/src/screens/Movie/Movie.tsx
@@ -78,9 +78,9 @@ const Movie = ({
   };
 
   useEffect(() => {
-    if (play) document.body.style.overflowY = 'hidden';
+    document.body.style.overflowY = play ? 'hidden' : '';
     return () => {
-      if (play) document.body.style.overflowY = '';
+      document.body.style.overflowY = '';
     };
   }, [play]);
 
@@ -162,6 +162,7 @@ const Movie = ({
               isLoading={isLoading}
               currentCardItem={item}
               currentCardLabel={t('currently_playing')}
+              enableCardTitles={config.options.shelveTitles}
             />
           </>
         ) : undefined}
diff --git a/src/screens/Playlist/Playlist.tsx b/src/screens/Playlist/Playlist.tsx
index c632af9dc..dce7c6b42 100644
--- a/src/screens/Playlist/Playlist.tsx
+++ b/src/screens/Playlist/Playlist.tsx
@@ -57,12 +57,16 @@ function Playlist({
       </Helmet>
       <header className={styles.header}>
         <h2>{isLoading || isPlaceholderData ? 'Loading' : title}</h2>
-        {!isLoading && !isPlaceholderData && (
-          <Filter name="categories" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />
-        )}
+        {!isLoading && !isPlaceholderData && <Filter name="categories" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />}
       </header>
       <main className={styles.main}>
-        <CardGrid playlist={filteredPlaylist} onCardClick={onCardClick} onCardHover={onCardHover} isLoading={isLoading} />
+        <CardGrid
+          playlist={filteredPlaylist}
+          onCardClick={onCardClick}
+          onCardHover={onCardHover}
+          isLoading={isLoading}
+          enableCardTitles={config.options.shelveTitles}
+        />
       </main>
     </div>
   );
diff --git a/src/screens/Search/Search.tsx b/src/screens/Search/Search.tsx
index 6a3c578e3..7ec121025 100644
--- a/src/screens/Search/Search.tsx
+++ b/src/screens/Search/Search.tsx
@@ -27,7 +27,7 @@ const Search: React.FC<RouteComponentProps<SearchRouteParams>> = ({
   },
 }) => {
   const { t } = useTranslation('search');
-  const { siteName, searchPlaylist } = useContext(ConfigContext);
+  const { siteName, searchPlaylist, options } = useContext(ConfigContext);
   const firstRender = useFirstRender();
   const searchQuery = UIStore.useState((s) => s.searchQuery);
   const { updateSearchQuery } = useSearchQueryUpdater();
@@ -94,7 +94,13 @@ const Search: React.FC<RouteComponentProps<SearchRouteParams>> = ({
         <h2>{t('heading')}</h2>
       </header>
       <main className={styles.main}>
-        <CardGrid playlist={playlist} onCardClick={onCardClick} onCardHover={onCardHover} isLoading={firstRender} />
+        <CardGrid
+          playlist={playlist}
+          onCardClick={onCardClick}
+          onCardHover={onCardHover}
+          isLoading={firstRender}
+          enableCardTitles={options.shelveTitles}
+        />
       </main>
     </div>
   );
diff --git a/src/screens/Series/Series.module.scss b/src/screens/Series/Series.module.scss
index 4af3dea86..f0c6ee78e 100644
--- a/src/screens/Series/Series.module.scss
+++ b/src/screens/Series/Series.module.scss
@@ -5,8 +5,8 @@
 .episodes {
   display: flex;
   align-items: center;
-  margin: 16px 0;
   > h3 {
+    padding-bottom: 16px;
     font-family: var(--body-alt-font-family);
     font-weight: 700;
     font-size: 24px;
diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
index ae66a0885..1d7bd7151 100644
--- a/src/screens/Series/Series.tsx
+++ b/src/screens/Series/Series.tsx
@@ -117,13 +117,12 @@ const Series = ({
     (document.scrollingElement || document.body).scrollTop = 0;
   }, []);
 
-  if (isLoading || playlistIsLoading) return <LoadingOverlay />;
+  if (isLoading || playlistIsLoading || !searchParams.has('e')) return <LoadingOverlay />;
   if (error || !item) return <ErrorPage title="Episode not found!" />;
   if (playlistError || !seriesPlaylist) return <ErrorPage title="Series not found!" />;
 
   const pageTitle = `${item.title} - ${config.siteName}`;
-  const canonicalUrl =
-    seriesPlaylist && item ? `${window.location.origin}${episodeURL(seriesPlaylist, item.mediaid)}` : window.location.href;
+  const canonicalUrl = seriesPlaylist && item ? `${window.location.origin}${episodeURL(seriesPlaylist, item.mediaid)}` : window.location.href;
 
   return (
     <React.Fragment>
@@ -194,6 +193,7 @@ const Series = ({
             isLoading={isLoading}
             currentCardItem={item}
             currentCardLabel={t('current_episode')}
+            enableCardTitles={config.options.shelveTitles}
           />
         </>
       </VideoComponent>
diff --git a/src/services/config.service.ts b/src/services/config.service.ts
index d69e117b2..cefa93789 100644
--- a/src/services/config.service.ts
+++ b/src/services/config.service.ts
@@ -10,6 +10,7 @@ import { PersonalShelf } from '../enum/PersonalShelf';
 const contentSchema: SchemaOf<Content> = object({
   playlistId: string().defined(),
   featured: boolean().notRequired(),
+  enableText: boolean().notRequired(),
 }).defined();
 
 const menuSchema: SchemaOf<Menu> = object().shape({
@@ -69,6 +70,7 @@ const loadConfig = async (configLocation: string) => {
   const data = await response.json();
 
   addPersonalShelves(data);
+  addContentDefaultOptions(data);
 
   if (data.version) {
     return parseDeprecatedConfig(data);
@@ -85,6 +87,7 @@ const addPersonalShelves = (data: Config) => {
   if (!data.content.some(({ playlistId }) => playlistId === PersonalShelf.Favorites)) {
     data.content.push({ playlistId: PersonalShelf.Favorites });
   }
+
   if (data.options.enableContinueWatching) {
     if (!data.content.some(({ playlistId }) => playlistId === PersonalShelf.ContinueWatching)) {
       data.content.splice(1, 0, { playlistId: PersonalShelf.ContinueWatching });
@@ -92,6 +95,14 @@ const addPersonalShelves = (data: Config) => {
   }
 };
 
+/**
+ * Add content default options
+ * @param {Config} data
+ */
+const addContentDefaultOptions = (data: Config) => {
+  data.content = data.content.map((content) => Object.assign({ enableText: true, featured: false }, content));
+};
+
 /**
  * Serialize deprecated config to v3 config
  * @param {Config} config
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 88aa23176..530fe5174 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -26,8 +26,8 @@ $body-alt-font-family: Trebuchet MS, Helvetica, Arial, sans-serif !default;
 $btn-default-bg: rgba(0, 0, 0, 0.6) !default;
 $btn-default-color: variables.$white !default;
 
-$btn-primary-bg: $secondary-color !default;
-$btn-primary-color: variables.$white !default;
+$btn-primary-bg: variables.$white !default;
+$btn-primary-color: variables.$black !default;
 
 $btn-facebook-bg: #3b5998 !default;
 $btn-twitter-bg: #55acee !default;
diff --git a/src/utils/formatting.ts b/src/utils/formatting.ts
index d02185784..0de17ac69 100644
--- a/src/utils/formatting.ts
+++ b/src/utils/formatting.ts
@@ -60,13 +60,13 @@ const slugify = (text: string, whitespaceChar: string = '-') =>
     .replace(/-+$/, '')
     .replace(/-/g, whitespaceChar);
 
-const movieURL = (item: PlaylistItem, playlistId?: string | null) =>
-  addQueryParams(`/m/${item.mediaid}/${slugify(item.title)}`, { r: playlistId });
+const movieURL = (item: PlaylistItem, playlistId?: string | null, play: boolean = false) =>
+  addQueryParams(`/m/${item.mediaid}/${slugify(item.title)}`, { r: playlistId, play: play ? '1' : null });
 
-const seriesURL = (item: PlaylistItem, playlistId?: string | null) => {
+const seriesURL = (item: PlaylistItem, playlistId?: string | null, play: boolean = false) => {
   const seriesId = getSeriesId(item);
 
-  return addQueryParams(`/s/${seriesId}/${slugify(item.title)}`, { r: playlistId });
+  return addQueryParams(`/s/${seriesId}/${slugify(item.title)}`, { r: playlistId, play: play ? '1' : null });
 };
 
 const episodeURL = (seriesPlaylist: Playlist, episodeId?: string, play: boolean = false, playlistId?: string | null) =>
@@ -76,7 +76,7 @@ const episodeURL = (seriesPlaylist: Playlist, episodeId?: string, play: boolean
     play: play ? '1' : null,
   });
 
-const episodeURLFromEpisode = (item: PlaylistItem, seriesId: string, play: boolean = false, playlistId?: string | null) => {
+const episodeURLFromEpisode = (item: PlaylistItem, seriesId: string, playlistId?: string | null, play: boolean = false) => {
   // generated URL does not match the canonical URL. We need the series playlist in order to generate the slug. For
   // now the item title is used instead. The canonical link isn't affected by this though.
   return addQueryParams(`/s/${seriesId}/${slugify(item.title)}`, {
@@ -86,14 +86,14 @@ const episodeURLFromEpisode = (item: PlaylistItem, seriesId: string, play: boole
   });
 };
 
-const cardUrl = (item: PlaylistItem, playlistId?: string | null) => {
+const cardUrl = (item: PlaylistItem, playlistId?: string | null, play: boolean = false) => {
   if (isEpisode(item)) {
     const seriesId = getSeriesIdFromEpisode(item);
 
-    return seriesId ? episodeURLFromEpisode(item, seriesId, false, playlistId) : movieURL(item);
+    return seriesId ? episodeURLFromEpisode(item, seriesId, playlistId, play) : movieURL(item);
   }
 
-  return isSeriesPlaceholder(item) ? seriesURL(item, playlistId) : movieURL(item, playlistId);
+  return isSeriesPlaceholder(item) ? seriesURL(item, playlistId, play) : movieURL(item, playlistId, play);
 };
 
 const videoUrl = (item: PlaylistItem, playlistId?: string | null, play: boolean = false) =>
diff --git a/types/Config.d.ts b/types/Config.d.ts
index a86cb5252..db1b9c4dc 100644
--- a/types/Config.d.ts
+++ b/types/Config.d.ts
@@ -27,6 +27,7 @@ export type Simple = {
 export type Content = {
   playlistId: string;
   featured?: boolean;
+  enableText?: boolean;
 };
 
 export type Menu = {