diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx
index 5440f7d3e..c605a8264 100644
--- a/src/components/Root/Root.tsx
+++ b/src/components/Root/Root.tsx
@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
+import Series from '../../screens/Series/Series';
 import Layout from '../Layout/Layout';
 import Home from '../../screens/Home/Home';
 import Playlist from '../../screens/Playlist/Playlist';
 import Settings from '../../screens/Settings/Settings';
-import Video from '../../screens/Video/Video';
-import Series from '../../screens/Series/Series';
+import Movie from '../../screens/Movie/Movie';
 
 type Props = {
   error?: Error | null;
@@ -23,8 +23,8 @@ const Root: FC<Props> = ({ error }: Props) => {
         <Route path="/" component={Home} exact />
         <Route path="/p/:id" component={Playlist} exact />
         <Route path="/u" component={Settings} exact />
-        <Route path="/m/:id/:slug" component={Video} exact />
-        <Route path="/s/:seriesId/:seriesSlug/:episodeId/:episodeSlug" component={Series} exact />
+        <Route path="/m/:id/:slug" component={Movie} exact />
+        <Route path="/s/:id/:slug" component={Series} />
       </Switch>
     </Layout>
   );
diff --git a/src/components/Video/Video.module.scss b/src/components/Video/Video.module.scss
new file mode 100644
index 000000000..c7169e385
--- /dev/null
+++ b/src/components/Video/Video.module.scss
@@ -0,0 +1,91 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.video {
+  padding: 50px;
+  color: white;
+}
+.main {
+  display: flex;
+}
+.info {
+  width: 50%;
+}
+.title {
+  font-weight: 900;
+  font-size: larger;
+  margin: 20px 0px;
+}
+.meta {
+  margin: 20px 0px;
+  > ul {
+    padding-inline-start: 0px;
+    display: flex;
+    > li {
+      margin-right: 30px;
+    }
+    > li:first-child {
+      list-style-type: none;
+    }
+  }
+}
+.buttons {
+  margin: 20px 0px;
+  > button {
+    margin-right: 20px;
+  }
+}
+.banner {
+  width: 50%;
+  position: relative;
+  opacity: 0.7;
+  > img {
+    width: 100%;
+  }
+  &:hover {
+    cursor: pointer;
+    opacity: 1;
+  }
+}
+.playIcon {
+  position: absolute;
+  left: calc(50% - 35px);
+  top: calc(50% - 60px);
+  font-size: xx-large;
+  border: 3px solid white;
+  padding: 25px 30px;
+  border-radius: 100%;
+}
+.other {
+  margin: 50px 0px;
+}
+.playerContainer {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background-color: black;
+}
+.background {
+  width: 100vw;
+  height: 100vh;
+  background-size: cover;
+  background-position: center;
+  opacity: 0.7;
+}
+.playerInfo {
+  position: absolute;
+  top: 0;
+  margin: 50px;
+  max-width: 50%;
+  display: flex;
+
+  > h2 {
+    font-size: x-large;
+  }
+}
+.backButton {
+  padding: 10px;
+  font-size: x-large;
+}
diff --git a/src/components/Video/Video.test.tsx b/src/components/Video/Video.test.tsx
new file mode 100644
index 000000000..bc07cb0bf
--- /dev/null
+++ b/src/components/Video/Video.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import type { PlaylistItem } from 'types/playlist';
+
+import Video from './Video';
+
+describe('<Video>', () => {
+  test('renders and matches snapshot', () => {
+    const item = {
+      description: 'Test item description',
+      duration: 354,
+      feedid: 'ax85aa',
+      image: 'http://test/img.jpg',
+      images: [],
+      link: 'http://test/link',
+      genre: 'Tester',
+      mediaid: 'zp50pz',
+      pubdate: 26092021,
+      rating: 'CC_CC',
+      sources: [],
+      seriesId: 'ag94ag',
+      tags: 'Test tag',
+      title: 'Test item title',
+      tracks: [],
+    } as PlaylistItem;
+    const { container } = render(<Video item={item} startPlay={() => null} goBack={() => null} play />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
new file mode 100644
index 000000000..5a2ad5985
--- /dev/null
+++ b/src/components/Video/Video.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import type { PlaylistItem } from 'types/playlist';
+
+import Button from '../Button/Button';
+import IconButton from '../IconButton/IconButton';
+
+import styles from './Video.module.scss';
+
+type Props = {
+  item: PlaylistItem;
+  play: boolean;
+  startPlay: () => void;
+  goBack: () => void;
+};
+
+const Video: React.FC<Props> = ({ item, play, startPlay, goBack }: Props) => {
+  const fullYear: number = new Date(item.pubdate).getFullYear();
+  const duration: string = `${Math.floor(item.duration / 60)}h ${item.duration % 60}m`;
+  return (
+    <div className={styles.video}>
+      <div className={styles.main}>
+        <div className={styles.info}>
+          <h2 className={styles.title}>{item.title}</h2>
+          <div className={styles.meta}>
+            <ul>
+              <li>{fullYear}</li>
+              <li>{duration}</li>
+              <li>{item.genre}</li>
+              <li>{item.rating}</li>
+            </ul>
+          </div>
+          <div className={styles.description}>{item.description}</div>
+          <div className={styles.buttons}>
+            <Button label={'Favorite'} onClick={() => null} active />
+            <Button label={'Trailer'} onClick={() => null} active />
+            <Button label={'Share'} onClick={() => null} active />
+          </div>
+        </div>
+        <div className={styles.banner} onClick={startPlay}>
+          <img src={item.image} />
+          <div className={styles.playIcon}>&#9658;</div>
+        </div>
+      </div>
+      <div className={styles.other}>
+        <h3>Resting shelf</h3>
+      </div>
+      {play && (
+        <div className={styles.playerContainer}>
+          <div className={styles.background} style={{ backgroundImage: `url('${item.image}')` }} />
+          <div className={styles.player}></div>
+          <div className={styles.playerInfo}>
+            <div className={styles.backButton}>
+              <IconButton aria-label="Back" onClick={goBack}>
+                <p>&#8592;</p>
+              </IconButton>
+            </div>
+            <div>
+              <h2 className={styles.title}>{item.title}</h2>
+              <div className={styles.meta}>
+                <ul>
+                  <li>{fullYear}</li>
+                  <li>{duration}</li>
+                  <li>{item.genre}</li>
+                  <li>{item.rating}</li>
+                </ul>
+              </div>
+              <div className={styles.description}>{item.description}</div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Video;
diff --git a/src/components/Video/__snapshots__/Video.test.tsx.snap b/src/components/Video/__snapshots__/Video.test.tsx.snap
new file mode 100644
index 000000000..d572f7bb4
--- /dev/null
+++ b/src/components/Video/__snapshots__/Video.test.tsx.snap
@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Video> renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="video"
+  >
+    <div
+      class="main"
+    >
+      <div
+        class="info"
+      >
+        <h2
+          class="title"
+        >
+          Test item title
+        </h2>
+        <div
+          class="meta"
+        >
+          <ul>
+            <li>
+              1970
+            </li>
+            <li>
+              5h 54m
+            </li>
+            <li>
+              Tester
+            </li>
+            <li>
+              CC_CC
+            </li>
+          </ul>
+        </div>
+        <div>
+          Test item description
+        </div>
+        <div
+          class="buttons"
+        >
+          <button
+            class="button active"
+          >
+            <span>
+              Favorite
+            </span>
+          </button>
+          <button
+            class="button active"
+          >
+            <span>
+              Trailer
+            </span>
+          </button>
+          <button
+            class="button active"
+          >
+            <span>
+              Share
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="banner"
+      >
+        <img
+          src="http://test/img.jpg"
+        />
+        <div
+          class="playIcon"
+        >
+          ►
+        </div>
+      </div>
+    </div>
+    <div
+      class="other"
+    >
+      <h3>
+        Resting shelf
+      </h3>
+    </div>
+    <div
+      class="playerContainer"
+    >
+      <div
+        class="background"
+        style="background-image: url(http://test/img.jpg);"
+      />
+      <div />
+      <div
+        class="playerInfo"
+      >
+        <div
+          class="backButton"
+        >
+          <div
+            aria-label="Back"
+            class="iconButton"
+            role="button"
+          >
+            <p>
+              ←
+            </p>
+          </div>
+        </div>
+        <div>
+          <h2
+            class="title"
+          >
+            Test item title
+          </h2>
+          <div
+            class="meta"
+          >
+            <ul>
+              <li>
+                1970
+              </li>
+              <li>
+                5h 54m
+              </li>
+              <li>
+                Tester
+              </li>
+              <li>
+                CC_CC
+              </li>
+            </ul>
+          </div>
+          <div>
+            Test item description
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/container/Shelf/Shelf.test.tsx b/src/containers/Shelf/Shelf.test.tsx
similarity index 100%
rename from src/container/Shelf/Shelf.test.tsx
rename to src/containers/Shelf/Shelf.test.tsx
diff --git a/src/container/Shelf/Shelf.tsx b/src/containers/Shelf/Shelf.tsx
similarity index 100%
rename from src/container/Shelf/Shelf.tsx
rename to src/containers/Shelf/Shelf.tsx
diff --git a/src/containers/Video/Video.tsx b/src/containers/Video/Video.tsx
new file mode 100644
index 000000000..a924d8421
--- /dev/null
+++ b/src/containers/Video/Video.tsx
@@ -0,0 +1,42 @@
+import { useHistory, useLocation } from 'react-router';
+import React from 'react';
+
+import VideoComponent from '../../components/Video/Video';
+import { videoUrl } from '../../utils/formatting';
+import usePlaylist, { UsePlaylistResult } from '../../hooks/usePlaylist';
+
+export type VideoType = 'movie' | 'series';
+
+export type VideoProps = {
+  playlistId: string;
+  videoType: VideoType;
+  episodeId?: string | null;
+  mediaId?: string | null;
+};
+
+const Video = ({ playlistId, videoType, episodeId, mediaId }: VideoProps): JSX.Element => {
+  const history = useHistory();
+  const location = useLocation();
+  const play = new URLSearchParams(location.search).get('play') === '1';
+
+  const { isLoading, error, data: playlist }: UsePlaylistResult = usePlaylist(playlistId);
+
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>Error loading list</p>;
+  if (!playlist) return <p>List not found</p>;
+
+  const getMovieItem = () => playlist.playlist.find((item) => item.mediaid === mediaId);
+  const getSeriesItem = () => playlist.playlist[0];
+  const item = videoType === 'movie' ? getMovieItem() : getSeriesItem();
+
+  if (!item) return <p>Can not find medium</p>;
+
+  const startPlay = () => history.push(videoUrl(item, playlistId, true));
+  const goBack = () => history.push(videoUrl(item, playlistId, false));
+
+  console.info({ videoType, play, episodeId });
+
+  return <VideoComponent item={item} play={play} startPlay={startPlay} goBack={goBack} />;
+};
+
+export default Video;
diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
index cfc3489c5..ab33f351d 100644
--- a/src/screens/Home/Home.tsx
+++ b/src/screens/Home/Home.tsx
@@ -8,12 +8,13 @@ import type { PlaylistItem } from 'types/playlist';
 
 import { featuredTileBreakpoints, tileBreakpoints } from '../../components/Shelf/Shelf';
 import { UIStateContext } from '../../providers/uiStateProvider';
-import Shelf from '../../container/Shelf/Shelf';
+import Shelf from '../../containers/Shelf/Shelf';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import type { UsePlaylistResult } from '../../hooks/usePlaylist';
 import usePlaylist from '../../hooks/usePlaylist';
 import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 import scrollbarSize from '../../utils/dom';
+import { cardUrl } from '../../utils/formatting';
 
 import styles from './Home.module.scss';
 
@@ -25,33 +26,9 @@ type rowData = {
 };
 type ItemData = {
   content: Content[];
-  onCardClick: (playlistItem: PlaylistItem) => void;
-  onCardHover: (playlistItem: PlaylistItem) => void;
 };
 
-const renderRow = ({ index, key, style, itemData }: rowData) => {
-  const { content, onCardClick, onCardHover } = itemData;
-  const contentItem: Content = content[index];
-  if (!contentItem) return null;
-
-  return (
-    <div key={key} style={style}>
-      <Shelf
-        key={contentItem.playlistId}
-        playlistId={contentItem.playlistId}
-        onCardClick={onCardClick}
-        onCardHover={onCardHover}
-        featured={contentItem.featured === true}
-      />
-    </div>
-  );
-};
-
-const createItemData = memoize((content, onCardClick, onCardHover) => ({
-  content,
-  onCardClick,
-  onCardHover,
-}));
+const createItemData = memoize((content) => ({ content }));
 
 const Home = (): JSX.Element => {
   const history = useHistory();
@@ -64,10 +41,28 @@ const Home = (): JSX.Element => {
   const usePlaylistArg: string | undefined = content.length ? content[0]?.playlistId : undefined;
   const { data: firstPlaylist }: UsePlaylistResult = usePlaylist(usePlaylistArg || '');
 
-  const onCardClick = (playlistItem: PlaylistItem) => history.push(`/play/${playlistItem.mediaid}`);
-  const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
+  const itemData: ItemData = createItemData(content);
+
+  const rowRenderer = ({ index, key, style, itemData }: rowData) => {
+    if (!itemData?.content?.[index]) return null;
+
+    const contentItem: Content = itemData.content[index];
 
-  const itemData: ItemData = createItemData(content, onCardClick, onCardHover);
+    const onCardClick = (playlistItem: PlaylistItem) => history.push(cardUrl(playlistItem, contentItem.playlistId));
+    const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
+
+    return (
+      <div key={key} style={style}>
+        <Shelf
+          key={contentItem.playlistId}
+          playlistId={contentItem.playlistId}
+          onCardClick={onCardClick}
+          onCardHover={onCardHover}
+          featured={contentItem.featured === true}
+        />
+      </div>
+    );
+  };
 
   const calculateHeight = (index: number): number => {
     const item = content[index];
@@ -80,8 +75,7 @@ const Home = (): JSX.Element => {
     const shelfMetaHeight = item.featured ? 24 : shelfTitlesHeight + 24;
     const cardMetaHeight = item.featured ? 0 : 40;
     const shelfHorizontalMargin = (isMobile && item.featured ? 20 : 56) * featuredTileBreakpoints[breakpoint];
-    const cardHorizontalMargin = 0;
-    const cardWidth = (document.body.offsetWidth - shelfHorizontalMargin) / tilesToShow - cardHorizontalMargin;
+    const cardWidth = (document.body.offsetWidth - shelfHorizontalMargin) / tilesToShow;
     const cardHeight = cardWidth * (9 / 16);
 
     return cardHeight + shelfMetaHeight + cardMetaHeight;
@@ -105,7 +99,7 @@ const Home = (): JSX.Element => {
             rowCount={content.length}
             getScrollbarSize={scrollbarSize}
             rowHeight={({ index }) => calculateHeight(index)}
-            rowRenderer={({ index, key, style }) => renderRow({ index, key, style, itemData })}
+            rowRenderer={({ index, key, style }) => rowRenderer({ index, key, style, itemData })}
             scrollTop={scrollTop}
             width={document.body.offsetWidth}
             isScrollingOptOut
diff --git a/src/screens/Video/Video.module.scss b/src/screens/Movie/Movie.module.scss
similarity index 100%
rename from src/screens/Video/Video.module.scss
rename to src/screens/Movie/Movie.module.scss
diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
new file mode 100644
index 000000000..c7a480a9d
--- /dev/null
+++ b/src/screens/Movie/Movie.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { RouteComponentProps, useLocation } from 'react-router-dom';
+
+import Video from '../../containers/Video/Video';
+
+type MovieRouteParams = {
+  id: string;
+};
+
+const Movie = ({
+  match: {
+    params: { id },
+  },
+}: RouteComponentProps<MovieRouteParams>): JSX.Element => {
+  const listId: string | null = new URLSearchParams(useLocation().search).get('list');
+
+  if (!listId) return <p>No playlist id</p>;
+
+  return <Video videoType={'movie'} playlistId={listId} mediaId={id} />;
+};
+
+export default Movie;
diff --git a/src/screens/Playlist/Playlist.tsx b/src/screens/Playlist/Playlist.tsx
index 013dbacbe..89552a521 100644
--- a/src/screens/Playlist/Playlist.tsx
+++ b/src/screens/Playlist/Playlist.tsx
@@ -3,6 +3,7 @@ import { RouteComponentProps, useHistory } from 'react-router-dom';
 import type { GridCellProps } from 'react-virtualized';
 import type { PlaylistItem } from 'types/playlist';
 
+import { cardUrl } from '../../utils/formatting';
 import VirtualizedGrid from '../../components/VirtualizedGrid/VirtualizedGrid';
 import usePlaylist from '../../hooks/usePlaylist';
 import {
@@ -47,7 +48,7 @@ function Playlist({
   const filteredPlaylist = useMemo(() => filterPlaylistCategory(playlist, filter), [playlist, filter]);
   const playlistRows = chunk<PlaylistItem>(filteredPlaylist, cols[breakpoint]);
 
-  const onCardClick = (playlistItem: PlaylistItem) => history.push(`/play/${playlistItem.mediaid}`);
+  const onCardClick = (playlistItem: PlaylistItem) => history.push(cardUrl(playlistItem, id));
   const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
 
   useEffect(() => {
diff --git a/src/screens/Series/Series.test.tsx b/src/screens/Series/Series.test.tsx
deleted file mode 100644
index 0ed5d331d..000000000
--- a/src/screens/Series/Series.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Series from './Series';
-
-describe('<Series>', () => {
-  test('renders and matches snapshot', () => {
-    const { container } = render(<Series />);
-
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
index 082704ad4..bbb3c5c98 100644
--- a/src/screens/Series/Series.tsx
+++ b/src/screens/Series/Series.tsx
@@ -1,17 +1,21 @@
 import React from 'react';
+import { RouteComponentProps, useLocation } from 'react-router-dom';
 
-import styles from './Series.module.scss';
+import Video from '../../containers/Video/Video';
 
-type Props = {
-  prop?: string;
+type SeriesRouteParams = {
+  id: string;
+  episodeId: string;
 };
 
-const Series: React.FC<Props> = ({ prop }: Props) => {
-  return (
-    <div className={styles.Series}>
-      <p>{prop}</p>
-    </div>
-  );
+const Series = ({
+  match: {
+    params: { id },
+  },
+}: RouteComponentProps<SeriesRouteParams>): JSX.Element => {
+  const episodeId: string | null = new URLSearchParams(useLocation().search).get('episodeId');
+
+  return <Video videoType={'series'} playlistId={id} episodeId={episodeId} />;
 };
 
 export default Series;
diff --git a/src/screens/Series/__snapshots__/Series.test.tsx.snap b/src/screens/Series/__snapshots__/Series.test.tsx.snap
deleted file mode 100644
index 95cbc9226..000000000
--- a/src/screens/Series/__snapshots__/Series.test.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Series> renders and matches snapshot 1`] = `
-<div>
-  <div>
-    <p />
-  </div>
-</div>
-`;
diff --git a/src/screens/Video/Video.test.tsx b/src/screens/Video/Video.test.tsx
deleted file mode 100644
index fcc710bba..000000000
--- a/src/screens/Video/Video.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Video from './Video';
-
-describe('<Video>', () => {
-  test('renders and matches snapshot', () => {
-    const { container } = render(<Video />);
-
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/src/screens/Video/Video.tsx b/src/screens/Video/Video.tsx
deleted file mode 100644
index a10a1ce6d..000000000
--- a/src/screens/Video/Video.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-import styles from './Video.module.scss';
-
-type Props = {
-  prop?: string;
-};
-
-const Video: React.FC<Props> = ({ prop }: Props) => {
-  return (
-    <div className={styles.Video}>
-      <p>{prop}</p>
-    </div>
-  );
-};
-
-export default Video;
diff --git a/src/screens/Video/__snapshots__/Video.test.tsx.snap b/src/screens/Video/__snapshots__/Video.test.tsx.snap
deleted file mode 100644
index 694e10f54..000000000
--- a/src/screens/Video/__snapshots__/Video.test.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Video> renders and matches snapshot 1`] = `
-<div>
-  <div>
-    <p />
-  </div>
-</div>
-`;
diff --git a/src/utils/formatting.ts b/src/utils/formatting.ts
index 03e04ed23..546974043 100644
--- a/src/utils/formatting.ts
+++ b/src/utils/formatting.ts
@@ -1,3 +1,5 @@
+import type { PlaylistItem } from 'types/playlist';
+
 const formatDurationTag = (seconds: number): string | null => {
   if (!seconds || typeof seconds !== 'number') return null;
 
@@ -6,4 +8,29 @@ const formatDurationTag = (seconds: number): string | null => {
   return `${minutes} min`;
 };
 
-export { formatDurationTag };
+const slugify = (text: string, whitespaceChar: string = '-') =>
+  text
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '')
+    .replace(/-/g, whitespaceChar);
+
+const movieURL = (item: PlaylistItem, playlistId: string = '') =>
+  `/m/${item.mediaid}/${slugify(item.title)}?list=${playlistId}`;
+
+const seriesURL = (item: PlaylistItem, playlistId: string = '') => `/s/${playlistId}/${slugify(item.title)}`;
+
+const cardUrl = (item: PlaylistItem, playlistId: string = '') =>
+  item.seriesId ? seriesURL(item, playlistId) : movieURL(item, playlistId);
+
+const videoUrl = (item: PlaylistItem, playlistId: string = '', play: boolean = false) => {
+  const url = item.seriesId ? seriesURL(item, playlistId) : movieURL(item, playlistId);
+
+  return `${url}${play ? '&play=1' : ''}`;
+};
+
+export { formatDurationTag, cardUrl, movieURL, seriesURL, videoUrl };