diff --git a/src/common/AddonDetailsModal/AddonDetailsModal.js b/src/common/AddonDetailsModal/AddonDetailsModal.js
index 3f2fe8c52..ec3e65233 100644
--- a/src/common/AddonDetailsModal/AddonDetailsModal.js
+++ b/src/common/AddonDetailsModal/AddonDetailsModal.js
@@ -28,6 +28,7 @@ function withRemoteAndLocalAddon(AddonDetails) {
                 id={addon.manifest.id}
                 name={addon.manifest.name}
                 version={addon.manifest.version}
+                background={addon.manifest.background}
                 logo={addon.manifest.logo}
                 description={addon.manifest.description}
                 types={addon.manifest.types}
@@ -133,7 +134,7 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
         return toggleButton !== null ? configureButton ? [cancelButton, configureButton, toggleButton] : [cancelButton, toggleButton] : [cancelButton];
     }, [addonDetails, onCloseRequest]);
     return (
-        <ModalDialog className={styles['addon-details-modal-container']} title={'Stremio addon'} buttons={modalButtons} onCloseRequest={onCloseRequest}>
+        <ModalDialog className={styles['addon-details-modal-container']} title={'Stremio addon'} buttons={modalButtons} onCloseRequest={onCloseRequest} background={addonDetails.remoteAddon?.content.type === 'Ready' ? addonDetails.remoteAddon.content.content.manifest.background || '' : ''}>
             {
                 addonDetails.selected === null ?
                     <div className={styles['addon-details-message-container']}>
diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index e7e2e8056..aaf4cded7 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -9,7 +9,7 @@ const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Modal } = require('stremio-router');
 const styles = require('./styles');
 
-const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequest, ...props }) => {
+const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequest, background, ...props }) => {
     const routeFocused = useRouteFocused();
     const modalsContainer = useModalsContainer();
     const modalContainerRef = React.useRef(null);
@@ -58,7 +58,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
     }, [routeFocused, dataset, onCloseRequest]);
     return (
         <Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}>
-            <div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}>
+            <div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown} style={{backgroundImage: `url('${background}')`}}>
                 <Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
                     <Icon className={styles['icon']} name={'close'} />
                 </Button>
@@ -102,6 +102,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
 ModalDialog.propTypes = {
     className: PropTypes.string,
     title: PropTypes.string,
+    background: PropTypes.string,
     buttons: PropTypes.arrayOf(PropTypes.shape({
         className: PropTypes.string,
         label: PropTypes.string,
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 796685b38..9cad2571a 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -19,6 +19,9 @@
         padding: 0 2rem;
         border-radius: var(--border-radius);
         background-color: var(--modal-background-color);
+        background-size: cover;
+        background-position: center;
+        background-blend-mode: overlay; // set to 'color' on desktop version
         box-shadow: var(--outer-glow);
 
         .close-button-container {
@@ -38,7 +41,8 @@
                 opacity: 0.4;
             }
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
                 .icon {
                     opacity: 1;
                     color: var(--primary-foreground-color);