diff --git a/src/common/Video/Video.js b/src/common/Video/Video.js
index 1aae7e478..ebe91e3f7 100644
--- a/src/common/Video/Video.js
+++ b/src/common/Video/Video.js
@@ -16,9 +16,7 @@ const renderPoster = (poster) => {
     };
 
     return (
-        <div className={styles['poster-container']}>
-            <div style={imageStyle} className={styles['poster']} />
-        </div>
+        <div style={imageStyle} className={styles['poster']} />
     );
 }
 
@@ -64,6 +62,19 @@ const renderWatchedLabel = (isWatched) => {
     );
 }
 
+const renderLabels = (isUpcoming, isWatched) => {
+    if (!isWatched && !isUpcoming) {
+        return null;
+    }
+
+    return (
+        <div className={styles['label-container']}>
+            {renderUpcomingLabel(isUpcoming)}
+            {renderWatchedLabel(isWatched)}
+        </div>
+    );
+}
+
 const renderProgress = (progress) => {
     if (progress <= 0) {
         return null;
@@ -78,18 +89,13 @@ const renderProgress = (progress) => {
 
 const Video = (props) => {
     return (
-        <div onClick={props.onVideoClicked} className={classnames(styles['video-container'], { [styles['active']]: props.progress > 0 })}>
+        <div onClick={props.onVideoClicked} className={classnames(styles['video-container'], { [styles['active']]: props.progress > 0 }, props.className)}>
             <div className={styles['flex-row-container']}>
                 {renderPoster(props.poster)}
-                <div className={styles['text-container']}>
-                    <div className={styles['text-content']}>
-                        {renderTitle(props.number, props.title)}
-                        {renderReleasedDate(props.released)}
-                        <div className={styles['label-container']}>
-                            {renderUpcomingLabel(props.isUpcoming)}
-                            {renderWatchedLabel(props.isWatched)}
-                        </div>
-                    </div>
+                <div className={styles['info-container']}>
+                    {renderTitle(props.number, props.title)}
+                    {renderReleasedDate(props.released)}
+                    {renderLabels(props.isUpcoming, props.isWatched)}
                 </div>
                 <div className={styles['arrow-container']}>
                     <Icon className={styles['arrow']} icon={'ic_arrow_left'} />
@@ -101,6 +107,7 @@ const Video = (props) => {
 }
 
 Video.propTypes = {
+    className: PropTypes.string,
     poster: PropTypes.string.isRequired,
     number: PropTypes.number.isRequired,
     title: PropTypes.string.isRequired,
diff --git a/src/common/Video/styles.less b/src/common/Video/styles.less
index 9a1c91da9..8dcdc26ea 100644
--- a/src/common/Video/styles.less
+++ b/src/common/Video/styles.less
@@ -1,14 +1,19 @@
 @import 'stremio-colors';
 
-@video-width: 340px;
-@icon-width: round((@video-width * 0.14));
+@video-width: 360px;
+@spacing: min(8px, ceil((@video-width * 0.02)));
 @progress-height: 3px;
 
 .video-container {
     width: @video-width;
 
-    .text-container {
-        min-height: round((@video-width * 0.2));
+    .poster {
+        margin: @spacing 0 @spacing @spacing;
+    }
+
+    .info-container {
+        min-height: ceil((@video-width * 0.2));
+        padding: @spacing;
 
         .title {
             font-size: 12px;
@@ -18,14 +23,23 @@
             font-size: 11px;
         }
 
-        .watched-label, .upcoming-label {
+        .upcoming-label, .watched-label {
             font-size: 10px;
             border-radius: 2px;
         }
+
+        .upcoming-label {
+            margin-right: @spacing;
+        }
+
+        >:not(:last-child) {
+            margin-bottom: (@spacing * 0.5);
+        }
     }
 
     .arrow-container {
-        width: @icon-width;
+        width: floor((@video-width * 0.07));
+        padding: @spacing @spacing @spacing 0;
     }
 
     .progress {
@@ -34,65 +48,53 @@
 }
 
 .video-container {
-    margin: 10px; //remove
     background-color: @colorglass;
 
     .flex-row-container {
         display: flex;
         flex-direction: row;
-        align-items: center;
 
-        .poster-container {
+        .poster {
             flex: 1;
             display: flex;
-            align-self: stretch;
             align-items: center;
-            justify-content: flex-end;
-
-            .poster {
-                height: 70%;
-                width: 90%;
-                background-position: center;
-                background-size: cover, auto;
-                background-repeat: no-repeat;
-            }
+            justify-content: center;
+            align-self: stretch;
+            background-position: center;
+            background-size: cover, auto;
+            background-repeat: no-repeat;
         }
 
-        .text-container {
-            flex: 2;
+        .info-container {
+            flex: 3;
             display: flex;
             flex-direction: column;
             justify-content: center;
 
-            .text-content {
-                margin: 2% 4%;
+            .title {
+                color: @colorwhite;
+                word-break: break-word;
+            }
 
-                .title {
+            .released-date {
+                color: @colorwhite60;
+            }
+
+            .label-container {
+                display: flex;
+
+                .upcoming-label, .watched-label {
+                    padding: 0 0.6em;
+                    font-weight: 600;
                     color: @colorwhite;
-                    word-break: break-word;
                 }
 
-                .released-date {
-                    color: @colorwhite60;
+                .upcoming-label {
+                    background-color: @colorsignal5;
                 }
 
-                .label-container {
-                    display: flex;
-
-                    .upcoming-label, .watched-label {
-                        padding: 0em 0.6em;
-                        font-weight: 600;
-                        color: @colorwhite;
-                    }
-
-                    .upcoming-label {
-                        margin-right: 8%;
-                        background-color: @colorsignal5;
-                    }
-
-                    .watched-label {
-                        background-color: @colorprimlight;
-                    }
+                .watched-label {
+                    background-color: @colorprimlight;
                 }
             }
         }
@@ -100,12 +102,9 @@
         .arrow-container {
             display: flex;
             align-items: center;
-            justify-content: center;
-            transform: rotate(180deg);
 
             .arrow {
-                width: 30%;
-                margin: auto;
+                width: 100%;
                 fill: @colorwhite60;
             }
         }
@@ -121,9 +120,6 @@
 
     &:hover {
         cursor: pointer;
-
-        .flex-row-container {
-            background-color: @colorwhite20;
-        }
+        background-color: @colorwhite20;
     }
 }
\ No newline at end of file
diff --git a/stories/index.stories.js b/stories/index.stories.js
index 950787559..37c304437 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -218,13 +218,27 @@ storiesOf('UserPanel', module)
     ));
 
 storiesOf('Video', module)
+    .add('poster-upcoming-watched-long-title', () => (
+        <div style={storyStyle} className={appStyles['app']}>
+            <Video
+                className={styles['video']}
+                poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'}
+                number={2}
+                title={'The Bing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis'}
+                released={new Date(2018, 4, 23)}
+                isUpcoming={true}
+                isWatched={true}
+                onVideoClicked={function() { alert(8) }}
+            />
+        </div>
+    ))
     .add('poster-watched', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <Video
+                className={styles['video']}
                 poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'}
                 number={2}
                 title={'The Bing Bran Hypothesis'}
-                duration={23}
                 isWatched={true}
                 onVideoClicked={function() { alert(8) }}
             />
@@ -233,27 +247,28 @@ storiesOf('Video', module)
     .add('no-poster-progress', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <Video
+                className={styles['video']}
                 number={4}
                 title={'The Luminous Fish Effect'}
                 progress={50}
-                duration={22}
             />
         </div>
     ))
     .add('poster-progress', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <Video
+                className={styles['video']}
                 poster={'5'}
                 number={5}
                 title={'The Dumpling Paradox'}
                 progress={50}
-                duration={22}
             />
         </div>
     ))
     .add('no-poster-upcoming', () => (
         <div style={storyStyle} className={appStyles['app']}>
             <Video
+                className={styles['video']}
                 number={8}
                 title={'The Loobendfeld Decay'}
                 released={new Date(2018, 4, 23)}
diff --git a/stories/styles.less b/stories/styles.less
index 9a2987fe9..b56f6dc8c 100644
--- a/stories/styles.less
+++ b/stories/styles.less
@@ -1,4 +1,7 @@
 .checkbox-size {
     height: 16px;
     width: 16px;
+}
+.video {
+    margin: 10px;
 }
\ No newline at end of file