diff --git a/src/routes/Player/Error/Error.js b/src/routes/Player/Error/Error.js
new file mode 100644
index 000000000..6ebd9d3f1
--- /dev/null
+++ b/src/routes/Player/Error/Error.js
@@ -0,0 +1,43 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const { useTranslation } = require('react-i18next');
+const PropTypes = require('prop-types');
+const classNames = require('classnames');
+const { default: Icon } = require('@stremio/stremio-icons/react');
+const Button = require('stremio/common/Button');
+const styles = require('./styles');
+
+const Error = ({ className, code, message, stream }) => {
+    const { t } = useTranslation();
+
+    return (
+        <div className={classNames(className, styles['error'])}>
+            <div className={styles['error-label']} title={message}>{message}</div>
+            {
+                code === 2 ?
+                    <div className={styles['error-sub']} title={t('EXTERNAL_PLAYER_HINT')}>{t('EXTERNAL_PLAYER_HINT')}</div>
+                    :
+                    null
+            }
+            {
+                stream !== null ?
+                    <Button className={styles['playlist-button']} title={t('PLAYER_OPEN_IN_EXTERNAL')} href={stream.deepLinks.externalPlayer.href} download={stream.deepLinks.externalPlayer.fileName} target={'_blank'}>
+                        <Icon className={styles['icon']} name={'ic_downloads'} />
+                        <div className={styles['label']}>{t('PLAYER_OPEN_IN_EXTERNAL')}</div>
+                    </Button>
+                    :
+                    null
+            }
+        </div>
+    );
+};
+
+Error.propTypes = {
+    className: PropTypes.string,
+    code: PropTypes.number,
+    message: PropTypes.string,
+    stream: PropTypes.object,
+};
+
+module.exports = Error;
diff --git a/src/routes/Player/Error/index.js b/src/routes/Player/Error/index.js
new file mode 100644
index 000000000..92e90c19d
--- /dev/null
+++ b/src/routes/Player/Error/index.js
@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const Error = require('./Error');
+
+module.exports = Error;
diff --git a/src/routes/Player/Error/styles.less b/src/routes/Player/Error/styles.less
new file mode 100644
index 000000000..77ff064db
--- /dev/null
+++ b/src/routes/Player/Error/styles.less
@@ -0,0 +1,64 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+
+.error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 1);
+
+    .error-label {
+        flex: 0 1 auto;
+        padding: 0 8rem;
+        max-height: 4.8em;
+        font-size: 2rem;
+        color: var(--primary-foreground-color);
+        text-align: center;
+    }
+
+    .error-sub {
+        flex: 0 1 auto;
+        padding: 0 2rem;
+        max-height: 4.8em;
+        font-size: 1.3rem;
+        margin-top: 0.8rem;
+        color: var(--primary-foreground-color);
+        text-align: center;            
+    }
+
+    .playlist-button {
+        flex: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: 3.5rem;
+        border-radius: 3.5rem;
+        margin-top: 1.5rem;
+        padding: 0 2rem;
+        background-color: var(--secondary-accent-color);
+
+        &:hover {
+            outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+            background-color: transparent;
+        }
+
+        .icon {
+            flex: none;
+            width: 1.5rem;
+            height: 1.5rem;
+            margin-right: 1rem;
+            color: var(--primary-foreground-color);
+        }
+
+        .label {
+            flex: 1;
+            max-height: 2.4em;
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: var(--primary-foreground-color);
+            text-align: center;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 1a9d2a9c8..65bad79da 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -8,9 +8,9 @@ const langs = require('langs');
 const { useTranslation } = require('react-i18next');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
-const { HorizontalNavBar, Button, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
-const { default: Icon } = require('@stremio/stremio-icons/react');
+const { HorizontalNavBar, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
 const BufferingLoader = require('./BufferingLoader');
+const Error = require('./Error');
 const ControlBar = require('./ControlBar');
 const NextVideoPopup = require('./NextVideoPopup');
 const StatisticsMenu = require('./StatisticsMenu');
@@ -622,24 +622,11 @@ const Player = ({ urlParams, queryParams }) => {
             />
             {
                 error !== null ?
-                    <div className={classnames(styles['layer'], styles['error-layer'])}>
-                        <div className={styles['error-label']} title={error.message}>{error.message}</div>
-                        {
-                            error.code === 2 ?
-                                <div className={styles['error-sub']} title={t('EXTERNAL_PLAYER_HINT')}>{t('EXTERNAL_PLAYER_HINT')}</div>
-                                :
-                                null
-                        }
-                        {
-                            player.selected !== null ?
-                                <Button className={styles['playlist-button']} title={t('PLAYER_OPEN_IN_EXTERNAL')} href={player.selected.stream.deepLinks.externalPlayer.href} download={player.selected.stream.deepLinks.externalPlayer.fileName} target={'_blank'}>
-                                    <Icon className={styles['icon']} name={'ic_downloads'} />
-                                    <div className={styles['label']}>{t('PLAYER_OPEN_IN_EXTERNAL')}</div>
-                                </Button>
-                                :
-                                null
-                        }
-                    </div>
+                    <Error
+                        className={styles['layer']}
+                        stream={video.state.stream}
+                        {...error}
+                    />
                     :
                     null
             }
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 01b6a05ae..dbdf8bfac 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -40,67 +40,6 @@ html:not(.active-slider-within) {
         bottom: 0;
         z-index: 0;
 
-        &.error-layer {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            background-color: @background-color;
-
-            .error-label {
-                flex: 0 1 auto;
-                padding: 0 8rem;
-                max-height: 4.8em;
-                font-size: 2rem;
-                color: var(--primary-foreground-color);
-                text-align: center;
-            }
-
-            .error-sub {
-                flex: 0 1 auto;
-                padding: 0 2rem;
-                max-height: 4.8em;
-                font-size: 1.3rem;
-                margin-top: 0.8rem;
-                color: var(--primary-foreground-color);
-                text-align: center;            
-            }
-
-            .playlist-button {
-                flex: none;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                height: 3.5rem;
-                border-radius: 3.5rem;
-                margin-top: 1.5rem;
-                padding: 0 2rem;
-                background-color: var(--secondary-accent-color);
-
-                &:hover {
-                    outline: var(--focus-outline-size) solid var(--secondary-accent-color);
-                    background-color: transparent;
-                }
-
-                .icon {
-                    flex: none;
-                    width: 1.5rem;
-                    height: 1.5rem;
-                    margin-right: 1rem;
-                    color: var(--primary-foreground-color);
-                }
-
-                .label {
-                    flex: 1;
-                    max-height: 2.4em;
-                    font-size: 1.1rem;
-                    font-weight: 500;
-                    color: var(--primary-foreground-color);
-                    text-align: center;
-                }
-            }
-        }
-
         &.nav-bar-layer {
             bottom: initial;
             background: transparent;