diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js
index 3a1ec171b..3329d0aaa 100644
--- a/src/routes/Detail/Detail.js
+++ b/src/routes/Detail/Detail.js
@@ -5,51 +5,41 @@ const VideosList = require('./VideosList');
 const StreamsList = require('./StreamsList');
 const useMetaItem = require('./useMetaItem');
 const useInLibrary = require('./useInLibrary');
-require('./styles');
+const styles = require('./styles');
 
 const Detail = ({ urlParams }) => {
     const metaItem = useMetaItem(urlParams.type, urlParams.id, urlParams.videoId);
     const [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary] = useInLibrary(urlParams.id);
     return (
-        <div className={'detail-container'}>
+        <div className={styles['detail-container']}>
             <NavBar
-                className={'nav-bar'}
+                className={styles['nav-bar']}
                 backButton={true}
                 title={metaItem !== null ? metaItem.name : null}
             />
-            <div className={'detail-content'}>
-                <div className={'background-image-layer'}>
-                    <img
-                        className={'background-image'}
-                        src={metaItem !== null ? metaItem.background : null}
-                        alt={' '}
-                    />
-                </div>
+            <div className={styles['detail-content']}>
                 {
                     metaItem !== null ?
-                        <MetaPreview
-                            {...metaItem}
-                            className={'meta-preview'}
-                            background={null}
-                            inLibrary={inLibrary}
-                            toggleInLibrary={toggleInLibrary}
-                        />
+                        <React.Fragment>
+                            <div className={styles['background-image-layer']}>
+                                <img className={styles['background-image']} src={metaItem.background} alt={' '} />
+                            </div>
+                            <MetaPreview
+                                {...metaItem}
+                                className={styles['meta-preview']}
+                                background={null}
+                                inLibrary={inLibrary}
+                                toggleInLibrary={toggleInLibrary}
+                            />
+                        </React.Fragment>
                         :
-                        <MetaPreviewPlaceholder
-                            className={classnames('meta-preview', placeholderStyles['placeholder-container'])}
-                        />
+                        <MetaPreviewPlaceholder className={classnames(styles['meta-preview'], placeholderStyles['placeholder-container'])} />
                 }
                 {
                     typeof urlParams.videoId === 'string' && urlParams.videoId.length > 0 ?
-                        <StreamsList
-                            className={'streams-list'}
-                            metaItem={metaItem}
-                        />
+                        <StreamsList className={styles['streams-list']} metaItem={metaItem} />
                         :
-                        <VideosList
-                            className={'videos-list'}
-                            metaItem={metaItem}
-                        />
+                        <VideosList className={styles['videos-list']} metaItem={metaItem} />
                 }
             </div>
         </div>
diff --git a/src/routes/Detail/StreamsList/Stream/Stream.js b/src/routes/Detail/StreamsList/Stream/Stream.js
index 1fbf51ee4..ca9be0c57 100644
--- a/src/routes/Detail/StreamsList/Stream/Stream.js
+++ b/src/routes/Detail/StreamsList/Stream/Stream.js
@@ -3,26 +3,31 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { Button } = require('stremio/common');
-require('./styles');
+const styles = require('./styles');
 
 const Stream = ({ className, id, addon, description, progress, onClick }) => {
     return (
-        <Button className={classnames(className, 'stream-container')} title={typeof description === 'string' && description.length > 0 ? description : id} data-id={id} onClick={onClick}>
-            <div className={'addon-container'}>
-                <div className={'addon-name'}>{addon}</div>
-            </div>
-            <div className={'info-container'}>
-                <div className={'description-label'}>
+        <Button className={classnames(className, styles['stream-container'])} title={typeof description === 'string' && description.length > 0 ? description : id} data-id={id} onClick={onClick}>
+            {
+                typeof addon === 'string' && addon.length > 0 ?
+                    <div className={styles['addon-container']}>
+                        <div className={styles['addon-name']}>{addon}</div>
+                    </div>
+                    :
+                    null
+            }
+            <div className={styles['info-container']}>
+                <div className={styles['description-label']}>
                     {typeof description === 'string' && description.length > 0 ? description : id}
                 </div>
             </div>
-            <div className={'play-icon-container'}>
-                <Icon className={'play-icon'} icon={'ic_play'} />
+            <div className={styles['play-icon-container']}>
+                <Icon className={styles['play-icon']} icon={'ic_play'} />
             </div>
             {
                 progress !== null && !isNaN(progress) && progress > 0 ?
-                    <div className={'progress-bar-container'}>
-                        <div className={'progress-bar'} style={{ width: `${Math.min(progress, 1) * 100}%` }} />
+                    <div className={styles['progress-bar-container']}>
+                        <div className={styles['progress-bar']} style={{ width: `${Math.min(progress, 1) * 100}%` }} />
                     </div>
                     :
                     null
@@ -33,8 +38,8 @@ const Stream = ({ className, id, addon, description, progress, onClick }) => {
 
 Stream.propTypes = {
     className: PropTypes.string,
-    id: PropTypes.string.isRequired,
-    addon: PropTypes.string.isRequired,
+    id: PropTypes.string,
+    addon: PropTypes.string,
     description: PropTypes.string,
     progress: PropTypes.number,
     onClick: PropTypes.func
diff --git a/src/routes/Detail/StreamsList/StreamPlaceholder/StreamPlaceholder.js b/src/routes/Detail/StreamsList/StreamPlaceholder/StreamPlaceholder.js
index 3dc5015d9..6785417ba 100644
--- a/src/routes/Detail/StreamsList/StreamPlaceholder/StreamPlaceholder.js
+++ b/src/routes/Detail/StreamsList/StreamPlaceholder/StreamPlaceholder.js
@@ -2,20 +2,20 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-require('./styles');
+const styles = require('./styles');
 
 const StreamPlaceholder = ({ className }) => {
     return (
-        <div className={classnames(className, 'stream-placeholder-container')}>
-            <div className={'addon-container'}>
-                <div className={'addon-name'} />
+        <div className={classnames(className, styles['stream-placeholder-container'])}>
+            <div className={styles['addon-container']}>
+                <div className={styles['addon-name']} />
             </div>
-            <div className={'info-container'}>
-                <div className={'description-container'} />
-                <div className={'description-container'} />
+            <div className={styles['info-container']}>
+                <div className={styles['description-container']} />
+                <div className={styles['description-container']} />
             </div>
-            <div className={'play-icon-container'}>
-                <Icon className={'play-icon'} icon={'ic_play'} />
+            <div className={styles['play-icon-container']}>
+                <Icon className={styles['play-icon']} icon={'ic_play'} />
             </div>
         </div>
     );
diff --git a/src/routes/Detail/StreamsList/StreamsList.js b/src/routes/Detail/StreamsList/StreamsList.js
index b5586d546..1c93281fa 100644
--- a/src/routes/Detail/StreamsList/StreamsList.js
+++ b/src/routes/Detail/StreamsList/StreamsList.js
@@ -6,36 +6,32 @@ const { Button, placeholderStyles } = require('stremio/common');
 const Stream = require('./Stream');
 const StreamPlaceholder = require('./StreamPlaceholder');
 const useStreams = require('./useStreams');
-require('./styles');
+const styles = require('./styles');
 
 const StreamsList = ({ className, metaItem }) => {
     const streams = useStreams(metaItem);
     return (
-        <div className={classnames(className, 'streams-list-container')}>
-            <div className={classnames('streams-scroll-container', { [placeholderStyles['placeholder-container']]: streams.length === 0 })}>
+        <div className={classnames(className, styles['streams-list-container'])}>
+            <div className={classnames(styles['streams-scroll-container'], { [placeholderStyles['placeholder-container']]: streams.length === 0 })}>
                 {
                     streams.length > 0 ?
                         streams.map((stream) => (
-                            <Stream
-                                {...stream}
-                                key={stream.id}
-                                className={'stream'}
-                            />
+                            <Stream {...stream} key={stream.id} className={styles['stream']} />
                         ))
                         :
                         <React.Fragment>
-                            <StreamPlaceholder className={'stream'} />
-                            <StreamPlaceholder className={'stream'} />
-                            <StreamPlaceholder className={'stream'} />
-                            <StreamPlaceholder className={'stream'} />
-                            <StreamPlaceholder className={'stream'} />
-                            <StreamPlaceholder className={'stream'} />
+                            <StreamPlaceholder className={styles['stream']} />
+                            <StreamPlaceholder className={styles['stream']} />
+                            <StreamPlaceholder className={styles['stream']} />
+                            <StreamPlaceholder className={styles['stream']} />
+                            <StreamPlaceholder className={styles['stream']} />
+                            <StreamPlaceholder className={styles['stream']} />
                         </React.Fragment>
                 }
             </div>
-            <Button className={'install-addons-container'} title={'Install addons'} href={'#/addons'}>
-                <Icon className={'icon'} icon={'ic_addons'} />
-                <div className={'label'}>Install addons</div>
+            <Button className={styles['install-addons-container']} title={'Install addons'} href={'#/addons'}>
+                <Icon className={styles['icon']} icon={'ic_addons'} />
+                <div className={styles['label']}>Install addons</div>
             </Button>
         </div>
     );
diff --git a/src/routes/Detail/VideosList/SeasonsBar/SeasonsBar.js b/src/routes/Detail/VideosList/SeasonsBar/SeasonsBar.js
index eea185574..705e23988 100644
--- a/src/routes/Detail/VideosList/SeasonsBar/SeasonsBar.js
+++ b/src/routes/Detail/VideosList/SeasonsBar/SeasonsBar.js
@@ -3,22 +3,22 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { Button, Popup, useBinaryState } = require('stremio/common');
-require('./styles');
+const styles = require('./styles');
 
 const SeasonsBar = ({ className, season, seasons, onSeasonChange }) => {
     const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
     const setPrevSeason = React.useCallback(() => {
-        if (Array.isArray(seasons)) {
+        if (Array.isArray(seasons) && typeof onSeasonChange === 'function') {
             const seasonIndex = seasons.indexOf(season);
-            if (seasonIndex > 0 && typeof onSeasonChange === 'function') {
+            if (seasonIndex > 0) {
                 onSeasonChange(seasons[seasonIndex - 1]);
             }
         }
     }, [season, seasons, onSeasonChange]);
     const setNextSeason = React.useCallback(() => {
-        if (Array.isArray(seasons)) {
+        if (Array.isArray(seasons) && typeof onSeasonChange === 'function') {
             const seasonIndex = seasons.indexOf(season);
-            if (seasonIndex < seasons.length - 1 && typeof onSeasonChange === 'function') {
+            if (seasonIndex < seasons.length - 1) {
                 onSeasonChange(seasons[seasonIndex + 1]);
             }
         }
@@ -31,28 +31,38 @@ const SeasonsBar = ({ className, season, seasons, onSeasonChange }) => {
         }
     }, [onSeasonChange]);
     return (
-        <div className={classnames(className, 'seasons-bar-container')}>
-            <Button className={'prev-season-button'} onClick={setPrevSeason}>
-                <Icon className={'icon'} icon={'ic_arrow_left'} />
+        <div className={classnames(className, styles['seasons-bar-container'])}>
+            <Button className={styles['prev-season-button']} onClick={setPrevSeason}>
+                <Icon className={styles['icon']} icon={'ic_arrow_left'} />
             </Button>
             <Popup
                 open={menuOpen}
                 menuMatchLabelWidth={true}
                 onCloseRequest={closeMenu}
                 renderLabel={(ref) => (
-                    <Button ref={ref} className={classnames('seasons-popup-label-container', { 'active': menuOpen })} title={`Season ${season}`} onClick={toggleMenu}>
-                        <div className={'season-label'}>Season</div>
-                        <div className={'number-label'}>{season}</div>
+                    <Button ref={ref} className={classnames(styles['seasons-popup-label-container'], { 'active': menuOpen })} title={season !== null && !isNaN(season) ? `Season ${season}` : 'Season'} onClick={toggleMenu}>
+                        <div className={styles['season-label']}>Season</div>
+                        {
+                            season !== null && !isNaN(season) ?
+                                <div className={styles['number-label']}>{season}</div>
+                                :
+                                null
+                        }
                     </Button>
                 )}
                 renderMenu={() => (
-                    <div className={'seasons-menu-container'}>
+                    <div className={styles['seasons-menu-container']}>
                         {
                             Array.isArray(seasons) ?
                                 seasons.map((season) => (
-                                    <Button key={season} className={'season-option-container'} data-season={season} title={`Season ${season}`} onClick={seasonOnClick}>
-                                        <div className={'season-label'}>Season</div>
-                                        <div className={'number-label'}>{season}</div>
+                                    <Button key={season} className={styles['season-option-container']} data-season={season} title={season !== null && !isNaN(season) ? `Season ${season}` : 'Season'} onClick={seasonOnClick}>
+                                        <div className={styles['season-label']}>Season</div>
+                                        {
+                                            season !== null && !isNaN(season) ?
+                                                <div className={styles['number-label']}>{season}</div>
+                                                :
+                                                null
+                                        }
                                     </Button>
                                 ))
                                 :
@@ -61,8 +71,8 @@ const SeasonsBar = ({ className, season, seasons, onSeasonChange }) => {
                     </div>
                 )}
             />
-            <Button className={'next-season-button'} onClick={setNextSeason}>
-                <Icon className={'icon'} icon={'ic_arrow_right'} />
+            <Button className={styles['next-season-button']} onClick={setNextSeason}>
+                <Icon className={styles['icon']} icon={'ic_arrow_right'} />
             </Button>
         </div>
     );
diff --git a/src/routes/Detail/VideosList/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js b/src/routes/Detail/VideosList/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
index 37b6d1c08..3aca88864 100644
--- a/src/routes/Detail/VideosList/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
+++ b/src/routes/Detail/VideosList/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
@@ -2,19 +2,19 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-require('./styles');
+const styles = require('./styles');
 
 const SeasonsBarPlaceholder = ({ className }) => {
     return (
-        <div className={classnames(className, 'seasons-bar-placeholder-container')}>
-            <div className={'prev-season-button'}>
-                <Icon className={'icon'} icon={'ic_arrow_left'} />
+        <div className={classnames(className, styles['seasons-bar-placeholder-container'])}>
+            <div className={styles['prev-season-button']}>
+                <Icon className={styles['icon']} icon={'ic_arrow_left'} />
             </div>
-            <div className={'seasons-popup-label-container'}>
-                <div className={'seasons-popup-label'} />
+            <div className={styles['seasons-popup-label-container']}>
+                <div className={styles['seasons-popup-label']} />
             </div>
-            <div className={'next-season-button'}>
-                <Icon className={'icon'} icon={'ic_arrow_right'} />
+            <div className={styles['next-season-button']}>
+                <Icon className={styles['icon']} icon={'ic_arrow_right'} />
             </div>
         </div>
     );
diff --git a/src/routes/Detail/VideosList/Video/Video.js b/src/routes/Detail/VideosList/Video/Video.js
index b59e9c8f9..7a37fafc4 100644
--- a/src/routes/Detail/VideosList/Video/Video.js
+++ b/src/routes/Detail/VideosList/Video/Video.js
@@ -3,27 +3,27 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { Button } = require('stremio/common');
 const Icon = require('stremio-icons/dom');
-require('./styles');
+const styles = require('./styles');
 
 const Video = ({ className, id, name, poster, episode, released, watched, upcoming, progress, onClick }) => {
     return (
-        <Button className={classnames(className, 'video-container')} title={typeof name === 'string' && name.length > 0 ? name : id} data-id={id} onClick={onClick}>
+        <Button className={classnames(className, styles['video-container'])} title={typeof name === 'string' && name.length > 0 ? name : id} data-id={id} onClick={onClick}>
             {
                 typeof poster === 'string' && poster.length > 0 ?
-                    <div className={'poster-container'}>
-                        <img className={'poster'} src={poster} alt={' '} />
+                    <div className={styles['poster-container']}>
+                        <img className={styles['poster']} src={poster} alt={' '} />
                     </div>
                     :
                     null
             }
-            <div className={'info-container'}>
-                <div className={'name-container'}>
+            <div className={styles['info-container']}>
+                <div className={styles['name-container']}>
                     {episode !== null && !isNaN(episode) ? `${episode}. ` : null}
                     {typeof name === 'string' && name.length > 0 ? name : id}
                 </div>
                 {
-                    released instanceof Date && !isNaN(released.getFullYear()) ?
-                        <div className={'released-container'}>
+                    released instanceof Date && !isNaN(released.getTime()) ?
+                        <div className={styles['released-container']}>
                             {released.toLocaleString(undefined, { year: '2-digit', month: 'short', day: 'numeric' })}
                         </div>
                         :
@@ -31,28 +31,28 @@ const Video = ({ className, id, name, poster, episode, released, watched, upcomi
                 }
                 {
                     upcoming ?
-                        <div className={'upcoming-container'}>
-                            <div className={'flag-label'}>Upcoming</div>
+                        <div className={styles['upcoming-container']}>
+                            <div className={styles['flag-label']}>Upcoming</div>
                         </div>
                         :
                         null
                 }
                 {
                     watched ?
-                        <div className={'watched-container'}>
-                            <div className={'flag-label'}>Watched</div>
+                        <div className={styles['watched-container']}>
+                            <div className={styles['flag-label']}>Watched</div>
                         </div>
                         :
                         null
                 }
             </div>
-            <div className={'next-icon-container'}>
-                <Icon className={'next-icon'} icon={'ic_arrow_thin_right'} />
+            <div className={styles['next-icon-container']}>
+                <Icon className={styles['next-icon']} icon={'ic_arrow_thin_right'} />
             </div>
             {
                 progress !== null && !isNaN(progress) && progress > 0 ?
-                    <div className={'progress-bar-container'}>
-                        <div className={'progress-bar'} style={{ width: `${Math.min(progress, 1) * 100}%` }} />
+                    <div className={styles['progress-bar-container']}>
+                        <div className={styles['progress-bar']} style={{ width: `${Math.min(progress, 1) * 100}%` }} />
                     </div>
                     :
                     null
diff --git a/src/routes/Detail/VideosList/VideoPlaceholder/VideoPlaceholder.js b/src/routes/Detail/VideosList/VideoPlaceholder/VideoPlaceholder.js
index a0e58abc1..025f78647 100644
--- a/src/routes/Detail/VideosList/VideoPlaceholder/VideoPlaceholder.js
+++ b/src/routes/Detail/VideosList/VideoPlaceholder/VideoPlaceholder.js
@@ -2,17 +2,17 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-require('./styles');
+const styles = require('./styles');
 
 const VideoPlaceholder = ({ className }) => {
     return (
-        <div className={classnames(className, 'video-placeholder-container')}>
-            <div className={'info-container'}>
-                <div className={'name-container'} />
-                <div className={'released-container'} />
+        <div className={classnames(className, styles['video-placeholder-container'])}>
+            <div className={styles['info-container']}>
+                <div className={styles['name-container']} />
+                <div className={styles['released-container']} />
             </div>
-            <div className={'next-icon-container'}>
-                <Icon className={'next-icon'} icon={'ic_arrow_thin_right'} />
+            <div className={styles['next-icon-container']}>
+                <Icon className={styles['next-icon']} icon={'ic_arrow_thin_right'} />
             </div>
         </div>
     );
diff --git a/src/routes/Detail/VideosList/VideosList.js b/src/routes/Detail/VideosList/VideosList.js
index cbaebb859..3c5f3d737 100644
--- a/src/routes/Detail/VideosList/VideosList.js
+++ b/src/routes/Detail/VideosList/VideosList.js
@@ -7,19 +7,19 @@ const SeasonsBarPlaceholder = require('./SeasonsBarPlaceholder');
 const Video = require('./Video');
 const VideoPlaceholder = require('./VideoPlaceholder');
 const useSeasons = require('./useSeasons');
-require('./styles');
+const styles = require('./styles');
 
 const VideosList = ({ className, metaItem }) => {
     const [season, seasons, setSeason] = useSeasons(metaItem);
     return (
-        <div className={classnames(className, 'videos-list-container', { [placeholderStyles['placeholder-container']]: metaItem === null })}>
+        <div className={classnames(className, styles['videos-list-container'], { [placeholderStyles['placeholder-container']]: metaItem === null })}>
             {
                 metaItem !== null ?
                     <React.Fragment>
                         {
                             seasons.length > 1 ?
                                 <SeasonsBar
-                                    className={'seasons-bar'}
+                                    className={styles['seasons-bar']}
                                     season={season}
                                     seasons={seasons}
                                     onSeasonChange={setSeason}
@@ -27,7 +27,7 @@ const VideosList = ({ className, metaItem }) => {
                                 :
                                 null
                         }
-                        <div className={'videos-scroll-container'}>
+                        <div className={styles['videos-scroll-container']}>
                             {
                                 metaItem.videos
                                     .filter((video) => isNaN(season) || video.season === season)
@@ -35,7 +35,7 @@ const VideosList = ({ className, metaItem }) => {
                                         <Video
                                             {...video}
                                             key={video.id}
-                                            className={'video'}
+                                            className={styles['video']}
                                         />
                                     ))
                             }
@@ -43,16 +43,16 @@ const VideosList = ({ className, metaItem }) => {
                     </React.Fragment>
                     :
                     <React.Fragment>
-                        <SeasonsBarPlaceholder className={'seasons-bar'} />
-                        <div className={'videos-scroll-container'}>
-                            <VideoPlaceholder className={'video'} />
-                            <VideoPlaceholder className={'video'} />
-                            <VideoPlaceholder className={'video'} />
-                            <VideoPlaceholder className={'video'} />
-                            <VideoPlaceholder className={'video'} />
-                            <VideoPlaceholder className={'video'} />
-                            <VideoPlaceholder className={'video'} />
-                            <VideoPlaceholder className={'video'} />
+                        <SeasonsBarPlaceholder className={styles['seasons-bar']} />
+                        <div className={styles['videos-scroll-container']}>
+                            <VideoPlaceholder className={styles['video']} />
+                            <VideoPlaceholder className={styles['video']} />
+                            <VideoPlaceholder className={styles['video']} />
+                            <VideoPlaceholder className={styles['video']} />
+                            <VideoPlaceholder className={styles['video']} />
+                            <VideoPlaceholder className={styles['video']} />
+                            <VideoPlaceholder className={styles['video']} />
+                            <VideoPlaceholder className={styles['video']} />
                         </div>
                     </React.Fragment>
             }