diff --git a/src/common/Addon/Addon.js b/src/common/Addon/Addon.js
index dcd6bce92..2c4f09b8f 100644
--- a/src/common/Addon/Addon.js
+++ b/src/common/Addon/Addon.js
@@ -46,7 +46,7 @@ const renderDescription = (description) => {
 }
 
 const renderUrls = (urls) => {
-    if(urls.length === 0) {
+    if (urls.length === 0) {
         return null;
     }
 
diff --git a/src/common/Addon/styles.less b/src/common/Addon/styles.less
index 618d423f7..338d44751 100644
--- a/src/common/Addon/styles.less
+++ b/src/common/Addon/styles.less
@@ -1,4 +1,5 @@
 @import 'stremio-colors';
+
 .addon {
     width: 550px;
     padding: 18px;
@@ -6,62 +7,78 @@
     color: @colorwhite;
     font-family: LatoLight;
     background-color: @colorglass;
+
     .info-container {
         height: 80px;
         display: flex;
         margin-bottom: 26px;
+
         .logo-container {
             width: 80px;
             height: 80px;
             display: flex;
             margin-right: 14px;
             background-color: @colordarkest;
+
             .logo {
                 width: 40px;
                 margin: auto;
                 fill: @colorwhite;
             }
         }
+
         .info {
             width: 420px;
+
             .name {
                 font-size: 20px;
                 margin-right: 10px;
             }
+
             .version {
                 margin-right: 10px;
                 color: @colorwhite60;
             }
+
             .type {
                 color: @coloraccent;
             }
+
             .type, .description {
                 margin-top: 2px;
             }
         }
     }
+
     .urls-container {
         display: flex;
+        overflow: auto;
         flex-direction: column;
+
         .url {
             color: @colorwhite60;
         }
     }
+
     .buttons {
         display: flex;
         margin-top: 26px;
         justify-content: space-between;
+
         .share-container {
             border: 2px solid @coloraccent;
+
             .share-icon {
                 width: 18px;
                 margin-right: 6px;
                 fill: @coloraccent;
             }
+
             .share-label {
                 color: @coloraccent;
             }
         }
+
         .share-container, .install-label, .uninstall-label {
             width: 230px;
             display: flex;
@@ -72,10 +89,12 @@
             align-items: center;
             justify-content: center;
         }
+
         .install-label {
             border: 2px solid @colorsignal5;
             background-color: @colorsignal5;
         }
+
         .uninstall-label {
             border: 2px solid @colorwhite20;
         }
diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 30d1e4f71..f34093d9c 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -112,7 +112,7 @@ const MetaItem = (props) => {
     const posterSize = getShapeSize(props.posterShape, props.progress);
     const contentContainerStyle = {
         width: posterSize.width,
-        height: props.episode.length === 0 && props.title.length === 0 && props.releaseInfo.length === 0 && props.progress == 0? posterSize.height : posterSize.containerHeight
+        height: props.episode.length === 0 && props.title.length === 0 && props.releaseInfo.length === 0 && props.progress == 0 ? posterSize.height : posterSize.containerHeight
     };
     const placeholderIcon = getPlaceholderIcon(props.type);
     const placeholderIconUrl = iconDataUrl({ icon: placeholderIcon, fill: colors.accent, width: Math.round(RELATIVE_POSTER_SIZE / 2.2), height: Math.round(RELATIVE_POSTER_SIZE / 2.2) });
@@ -124,9 +124,9 @@ const MetaItem = (props) => {
     return (
         <div style={contentContainerStyle} className={styles['meta-item']}>
             <div style={imageStyle} className={styles['poster']}>
-            <div onClick={props.play} style={props.progress ? { visibility: 'visible' } : null} className={styles['play-container']}>
-                <Icon className={styles['play']} icon={'ic_play'} />
-            </div>
+                <div onClick={props.play} style={props.progress ? { visibility: 'visible' } : null} className={styles['play-container']}>
+                    <Icon className={styles['play']} icon={'ic_play'} />
+                </div>
             </div>
             {renderProgress(props.progress)}
             <div className={styles['info-container']}>
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index df808e05d..9d88bb32b 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -1,13 +1,16 @@
 @import 'stremio-colors';
+
 .meta-item {
     color: @colorwhite;
     font-family: LatoLight;
+
     .poster {
         display: flex;
         background-position: center;
         background-size: cover, auto;
         background-repeat: no-repeat;
         background-color: @colordarkest;
+
         .play-container {
             width: 70px;
             height: 70px;
@@ -16,6 +19,7 @@
             visibility: hidden;
             border-radius: 50%;
             background-color: @colorwhite;
+
             .play {
                 width: 26px;
                 height: 26px;
@@ -25,51 +29,64 @@
             }
         }
     }
+
     .progress-container {
         background-color: @colorneutral;
+
         .progress {
             height: 4px;
             background-color: @colorprimlight;
         }
     }
+
     .info-container {
         display: flex;
         margin-top: 6px;
         align-items: baseline;
+
         .info {
             width: 100%;
-            .title, .year{
+
+            .title, .year {
                 color: @colorwhite60;
             }
+
             :first-child {
                 color: @colorwhite;
             }
         }
     }
+
     .more-icon-container {
         cursor: pointer;
         fill: @colorwhite;
+
         .more-icon {
             width: 10px;
             height: 10px;
         }
     }
+
     &:hover {
         color: @colorblack;
         background-color: @colorwhite;
         outline: 2px solid @colorwhite;
+
         .play-container {
             cursor: pointer;
             visibility: visible;
-        } 
+        }
+
         .info {
             .title, .year {
                 color: @colorblack60;
             }
+
             :first-child {
                 color: @colorblack;
             }
         }
+
         .more-icon {
             fill: @colorblack40;
         }
diff --git a/src/common/ShareAddon/styles.less b/src/common/ShareAddon/styles.less
index 5e64a9f13..b3f9a50ea 100644
--- a/src/common/ShareAddon/styles.less
+++ b/src/common/ShareAddon/styles.less
@@ -1,46 +1,56 @@
 @import 'stremio-colors';
+
 .share-addon {
     width: 380px;
-    height: 200px;
     padding: 10px;
     color: @colorwhite;
     background-color: @colorwhite;
+
     .x-container {
         display: flex;
         justify-content: flex-end;
+
         .x-icon {
             cursor: pointer;
             background-position: center;
             background-repeat: no-repeat;
         }
     }
+
     .info-container {
-        padding: 6px 20px 0px 20px;
+        padding: 6px 20px 30px 20px;
+
         .share-label {
             color: @colorblack;
             font-weight: 600;
         }
+
         .buttons {
             display: flex;
             font-size: 11px;
             margin: 22px 0px;
             font-family: LatoLight;
             justify-content: space-between;
+
             .facebook-icon, .twitter-icon, .gplus-icon {
                 width: 14px;
                 height: 14px;
                 margin-right: 6px;
                 fill: @colorwhite;
             }
+
             .facebook-button {
                 background-color: @colorfb;
             }
+
             .twitter-button {
                 background-color: @coloraccent;
             }
+
             .gplus-button {
                 background-color: #dd4b39;
             }
+
             .facebook-button, .twitter-button, .gplus-button {
                 display: flex;
                 cursor: pointer;
@@ -50,16 +60,19 @@
                 justify-content: center;
             }
         }
+
         .url-container {
             display: flex;
             border-radius: 4px;
             text-align: center;
             border: 1px solid @colorneutrallight;
+
             .url, .copy-label {
                 padding: 10px;
                 font-weight: 600;
                 color: @colorblack40;
             }
+
             .url {
                 width: 90%;
                 outline: none;
@@ -69,6 +82,7 @@
                 padding-right: 30px;
                 text-overflow: ellipsis;
             }
+
             .copy-label {
                 width: 30%;
                 display: flex;
@@ -78,6 +92,7 @@
                 border-top-right-radius: 3px;
                 border-bottom-right-radius: 3px;
                 background-color: @colorblack20;
+
                 .copy-icon {
                     width: 16px;
                     height: 16px;
diff --git a/src/common/Stream/styles.less b/src/common/Stream/styles.less
index ab27391ed..e515ee364 100644
--- a/src/common/Stream/styles.less
+++ b/src/common/Stream/styles.less
@@ -1,4 +1,5 @@
 @import 'stremio-colors';
+
 .stream {
     width: 340px;
     display: flex;
@@ -7,17 +8,21 @@
     color: @colorwhite;
     justify-content: space-between;
     background-color: @colorblack20;
+
     .stream-info-container {
         width: 230px;
+
         .stream-info {
             height: 40px;
             display: flex;
             align-items: center;
             justify-content: space-between;
+
             .logo {
                 width: 74px;
                 fill: @colorwhite;
             }
+
             .source-name {
                 width: 80px;
                 font-size: 13px;
@@ -25,34 +30,42 @@
                 white-space: pre;
                 text-overflow: ellipsis;
             }
+
             .text-container {
                 width: 120px;
                 overflow: hidden;
+
                 .title {
                     overflow: hidden;
                     white-space: pre;
                     text-overflow: ellipsis;
+
                     &:hover {
                         margin-left: -180%;
                         text-overflow: initial;
                         transition: margin-left 3s linear;
                     }
                 }
+
                 .free-label, .subscription-label {
                     font-weight: 600;
                 }
+
                 .free-label {
                     padding: 1px 6px;
                     border-radius: 2px;
                     background-color: @colorprimlight;
                 }
+
                 .subscription-label {
                     color: @colorsignal1;
                 }
             }
         }
+
         .progress-container {
             background-color: @colorneutral;
+
             .progress {
                 height: 3px;
                 border-radius: 1px;
@@ -60,11 +73,13 @@
             }
         }
     }
+
     .play-container {
         width: 46px;
         height: 46px;
         display: flex;
         border-radius: 50%;
+
         .play {
             width: 18px;
             height: 18px;
@@ -73,6 +88,7 @@
             fill: @colorwhite60;
         }
     }
+
     &:hover {
         cursor: pointer;
         background-color: @colorwhite20;
diff --git a/src/common/UserPanel/styles.less b/src/common/UserPanel/styles.less
index 181dc016e..ad95b4440 100644
--- a/src/common/UserPanel/styles.less
+++ b/src/common/UserPanel/styles.less
@@ -1,12 +1,15 @@
 @import 'stremio-colors';
+
 .user-panel {
     width: 260px;
     font-family: LatoLight;
     background-color: @colordarkest;
+
     .user-info {
         display: flex;
         padding: 15px;
         align-items: center;
+
         .profile-picture {
             height: 50px;
             width: 50px;
@@ -16,48 +19,59 @@
             background-position: center;
             background-repeat: no-repeat;
         }
+
         .email {
             color: @colorwhite;
         }
+
         .log-out {
             color: @colorwhite40;
+
             &:hover {
                 cursor: pointer;
                 color: @colorwhite;
             }
         }
     }
+
     .fullscreen-option {
         border-top: 1px solid @colorwhite20;
         border-bottom: 1px solid @colorwhite20;
     }
+
     .fullscreen-option, .settings-option, .addons-option, .magnet-option, .help-option {
         display: flex;
         padding: 15px;
         align-items: center;
         color: @colorwhite80;
+
         .fullscreen-icon, .settings-icon, .addons-icon, .magnet-icon, .help-icon {
             height: 20px;
             width: 20px;
             margin-right: 12px;
             fill: @coloraccent;
         }
+
         &:hover {
             cursor: pointer;
             color: @colorwhite;
             background-color: @coloraccent20;
         }
     }
+
     .options, .footer {
         padding: 15px 0px;
     }
+
     .footer {
         display: flex;
         flex-direction: column;
         border-top: 1px solid @colorwhite20;
+
         .terms-label, .about-label {
             padding: 10px 20px;
             color: @colorwhite80;
+
             &:hover {
                 cursor: pointer;
                 color: @colorwhite;
diff --git a/src/common/Video/Video.js b/src/common/Video/Video.js
index c501b1fde..955e6dd06 100644
--- a/src/common/Video/Video.js
+++ b/src/common/Video/Video.js
@@ -55,7 +55,7 @@ const renderReleasedDate = (released) => {
     if (isNaN(released.getTime())) {
         return null;
     }
-    
+
     const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 
     return (
diff --git a/src/common/Video/styles.less b/src/common/Video/styles.less
index e42108878..fd9557504 100644
--- a/src/common/Video/styles.less
+++ b/src/common/Video/styles.less
@@ -1,38 +1,47 @@
 @import 'stremio-colors';
+
 .video {
     height: 62px;
     width: 340px;
     display: flex;
     padding: 10px 10px;
     background-color: @colorblack20;
+
     .poster {
         margin-right: 10px;
         background-position: center;
         background-size: cover, auto;
         background-repeat: no-repeat;
     }
+
     .video-container {
         width: 240px;
         color: @colorwhite;
+
         .main-info {
             font-size: 12px;
-            .number { 
+
+            .number {
                 margin-right: 6px;
             }
+
             .name {
                 overflow: hidden;
                 white-space: pre;
                 text-overflow: ellipsis;
             }
         }
+
         .duration, .released-date {
             font-size: 11px;
             padding-left: 1px;
             margin-right: 10px;
             color: @colorwhite60;
         }
+
         .progress-container {
             background-color: @colorwhite20;
+
             .progress {
                 height: 3px;
                 margin-top: 2px;
@@ -40,19 +49,23 @@
                 background-color: @colorprimlight;
             }
         }
+
         .watched-label, .upcoming-label {
             font-weight: 600;
             font-size: 10px;
             padding: 1px 6px;
             border-radius: 2px;
         }
+
         .watched-label {
             background-color: @colorprimlight;
         }
+
         .upcoming-label {
             background-color: @colorsignal5;
         }
     }
+
     &:hover, &:focus {
         cursor: pointer;
         background-color: @colorwhite20;
diff --git a/stories/index.stories.js b/stories/index.stories.js
index 5dab86f94..20a7fe0ff 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -9,8 +9,8 @@ import { Addon, Checkbox, LibraryItemList, MetaItem, ShareAddon, Stream, UserPan
 
 storiesOf('Addon', module)
   .add('addon', () => (
-    <div style={{padding: '10px'}} className={styles['app']}>
-      <Addon onToggleClicked={function() {alert('1')}} logo={'ic_series'} name={'Watch Hub'} version={'1.3.0'} isInstalled={false} types={['Movies', 'Series']} description={'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.'} urls={['http://nfxaddon.strem.io/stremioget', 'http://127.0.0.1:11470/addons/com.stremio.subtitles/stremioget', 'http://127.0.0.1:11470/addons/com.stremio.localfiles/stremioget']}></Addon>
+    <div style={{ padding: '10px' }} className={styles['app']}>
+      <Addon onToggleClicked={function() { alert('1') }} logo={'ic_series'} name={'Watch Hub'} version={'1.3.0'} isInstalled={false} types={['Movies', 'Series']} description={'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.'} urls={['http://nfxaddon.strem.io/stremioget', 'http://127.0.0.1:11470/addons/com.stremio.subtitles/stremioget', 'http://127.0.0.1:11470/addons/com.stremio.localfiles/stremioget']}></Addon>
       <Addon name={'Cinemeta'} version={'2.4.0'} isInstalled={true} types={['Movies', 'Series']} description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'} urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1']}></Addon>
       <Addon logo={'ic_youtube_small'} name={'YouTube'} version={'1.3.0'} isInstalled={true} types={['Channels', 'Videos']} description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'} urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1']}></Addon>
       <Addon name={'OpenSubtitles'} version={'1.3.0'} isInstalled={false} types={['Movies', 'Series']} description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'} urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1', 'http://127.0.0.1:11470/addons/com.stremio.subtitles/stremioget', 'https://channels.strem.io/stremioget/stremio/v1']}></Addon>
@@ -19,7 +19,7 @@ storiesOf('Addon', module)
 
 storiesOf('Checkbox', module)
   .add('checkbox', () => (
-    <div style={{padding: '10px'}} className={styles['app']}>
+    <div style={{ padding: '10px' }} className={styles['app']}>
       <Checkbox className={styles['checkbox-size']} checked={true} enabled={false}></Checkbox>
       <Checkbox className={styles['checkbox-size']} checked={false} enabled={false}></Checkbox>
       <Checkbox className={styles['checkbox-size']} checked={false} enabled={true}></Checkbox>
@@ -29,9 +29,9 @@ storiesOf('Checkbox', module)
 
 storiesOf('LibraryItemList', module)
   .add('library item list', () => (
-    <div style={{padding: '10px'}} className={styles['app']}>
+    <div style={{ padding: '10px' }} className={styles['app']}>
       <LibraryItemList poster={'http://t3.gstatic.com/images?q=tbn:ANd9GcST1uigGrukMvSAVUefFNuQ0NMZAR-FjfFIwSZFCR5ZkyMSgCyj'} title={'Thor Ragnarok'} type={'Movies'} releaseInfo={new Date(2018)} released={new Date(2018, 4, 23)} views={12} hours={1245} lastViewed={new Date(2018, 4, 23)}></LibraryItemList>
-      <LibraryItemList play={function() {alert('2')}} watchTrailer={function() {alert('4')}} addToLibrary={function() {alert('24')}} poster={'https://m.media-amazon.com/images/M/MV5BMTU5NDI1MjkwMF5BMl5BanBnXkFtZTgwNjIxNTY2MzI@._V1_UX182_CR0,0,182,268_AL_.jpg'} title={'Pitch Perfect 3'} type={'Series'} releaseInfo={new Date(2018)} released={new Date(2018, 4, 23)} views={1} hours={1245} lastViewed={new Date(2018, 4, 23)}></LibraryItemList>
+      <LibraryItemList play={function() { alert('2') }} watchTrailer={function() { alert('4') }} addToLibrary={function() { alert('24') }} poster={'https://m.media-amazon.com/images/M/MV5BMTU5NDI1MjkwMF5BMl5BanBnXkFtZTgwNjIxNTY2MzI@._V1_UX182_CR0,0,182,268_AL_.jpg'} title={'Pitch Perfect 3'} type={'Series'} releaseInfo={new Date(2018)} released={new Date(2018, 4, 23)} views={1} hours={1245} lastViewed={new Date(2018, 4, 23)}></LibraryItemList>
       <LibraryItemList poster={'https://m.media-amazon.com/images/M/MV5BODAxNDFhNGItMzdiMC00NDM1LWExYWUtZjNiMGIzYTc0MTM5XkEyXkFqcGdeQXVyMjYzMjA3NzI@._V1_UY268_CR3,0,182,268_AL_.jpg'} title={'Deadpool'} type={'Channel'} releaseInfo={new Date(2018)} released={new Date(2018, 4, 23)} views={3} hours={1245} lastViewed={new Date(2018, 4, 23)}></LibraryItemList>
       <LibraryItemList poster={'https://m.media-amazon.com/images/M/MV5BNGNiNWQ5M2MtNGI0OC00MDA2LWI5NzEtMmZiYjVjMDEyOWYzXkEyXkFqcGdeQXVyMjM4NTM5NDY@._V1_.jpg'} title={'The Shape of Water'} type={'Movies'} releaseInfo={new Date(2018)} released={new Date(2018, 4, 23)} views={8} hours={1245} lastViewed={new Date(2018, 4, 23)}></LibraryItemList>
     </div>
@@ -39,43 +39,43 @@ storiesOf('LibraryItemList', module)
 
 storiesOf('MetaItem', module)
   .add('meta item', () => (
-    <div style={{padding: '10px'}} className={styles['app']}>
+    <div style={{ padding: '10px' }} className={styles['app']}>
       <MetaItem poster={'https://m.media-amazon.com/images/M/MV5BODQ0NDhjYWItYTMxZi00NTk2LWIzNDEtOWZiYWYxZjc2MTgxXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg'}></MetaItem>
       <MetaItem title={'Red Sparrow'} poster={'https://m.media-amazon.com/images/M/MV5BMTk2Mjc2NzYxNl5BMl5BanBnXkFtZTgwMTA2OTA1NDM@._V1_.jpg'}></MetaItem>
-      <MetaItem play={function() {alert('32423')}} showInfo={function() {alert('222')}} progress={50} poster={'https://m.media-amazon.com/images/M/MV5BMTA3MDkxOTc4NDdeQTJeQWpwZ15BbWU4MDAxNzgyNTQz._V1_.jpg'}></MetaItem>
+      <MetaItem play={function() { alert('32423') }} showInfo={function() { alert('222') }} progress={50} poster={'https://m.media-amazon.com/images/M/MV5BMTA3MDkxOTc4NDdeQTJeQWpwZ15BbWU4MDAxNzgyNTQz._V1_.jpg'}></MetaItem>
       <MetaItem poster={'https://m.media-amazon.com/images/M/MV5BYWVhZjZkYTItOGIwYS00NmRkLWJlYjctMWM0ZjFmMDU4ZjEzXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg'}></MetaItem>
     </div>
   ));
 
 storiesOf('ShareAddon', module)
   .add('share addon', () => (
-    <div style={{padding: '10px'}} className={styles['app']}>
+    <div style={{ padding: '10px' }} className={styles['app']}>
       <ShareAddon url={'....'}></ShareAddon>
     </div>
   ));
 
 storiesOf('Stream', module)
   .add('stream', () => (
-    <div style={{padding: '10px'}} className={styles['app']}>
-      <Stream sourceName={'Amazon'} title={'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1'}/>
-      <Stream sourceName={'iTunes'} subtitle={'Aasdasd dsasa sad.'}/>
-      <Stream play={function() {alert(122)}} progress={40} logo={'ic_itunes'} title={'$1.99 purchase SD,$2.99 purchase HD'}/>
-      <Stream logo={'ic_amazon'} title={'HDTV'} isFree={true}/>
-      <Stream sourceName={'Amazon'} title={'SD'} isSubscription={true}/>
+    <div style={{ padding: '10px' }} className={styles['app']}>
+      <Stream sourceName={'Amazon'} title={'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1'} />
+      <Stream sourceName={'iTunes'} subtitle={'Aasdasd dsasa sad.'} />
+      <Stream play={function() { alert(122) }} progress={40} logo={'ic_itunes'} title={'$1.99 purchase SD,$2.99 purchase HD'} />
+      <Stream logo={'ic_amazon'} title={'HDTV'} isFree={true} />
+      <Stream sourceName={'Amazon'} title={'SD'} isSubscription={true} />
     </div>
   ));
 
 storiesOf('UserPanel', module)
   .add('user panel', () => (
-    <div style={{padding: '10px'}} className={styles['app']}>
-      <UserPanel resizeWindow={function() {alert('asdas')}} photo={'https://image.freepik.com/free-vector/wild-animals-cartoon_1196-361.jpg'} email={'animals@mail.com'}></UserPanel>
+    <div style={{ padding: '10px' }} className={styles['app']}>
+      <UserPanel resizeWindow={function() { alert('asdas') }} photo={'https://image.freepik.com/free-vector/wild-animals-cartoon_1196-361.jpg'} email={'animals@mail.com'}></UserPanel>
     </div>
   ));
 
 storiesOf('Video', module)
   .add('video', () => (
-    <div style={{padding: '10px'}} className={styles['app']}>
-      <Video poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'} episode={2} name={'The Bing Bran Hypothesis'} duration={23} isWatched={true} onVideoClicked={function() {alert(8)}}></Video>
+    <div style={{ padding: '10px' }} className={styles['app']}>
+      <Video poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'} episode={2} name={'The Bing Bran Hypothesis'} duration={23} isWatched={true} onVideoClicked={function() { alert(8) }}></Video>
       <Video poster={'5'} episode={4} name={'The Luminous Fish Effect'} duration={22}></Video>
       <Video poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'} episode={5} name={'The Dumpling Paradox'} progress={50} duration={22}></Video>
       <Video episode={8} name={'The Loobendfeld Decay'} released={new Date(2018, 4, 23)} isUpcoming={true}></Video>