diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js
index 4419d232b..0fbe81419 100644
--- a/src/common/MetaPreview/MetaPreview.js
+++ b/src/common/MetaPreview/MetaPreview.js
@@ -68,12 +68,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
             {
                 typeof background === 'string' && background.length > 0 ?
                     <div className={styles['background-image-layer']}>
-                        <img
-                            key={background}
-                            className={styles['background-image']}
-                            src={background}
-                            alt={' '}
-                        />
+                        <Image className={styles['background-image']} src={background} alt={' '} />
                     </div>
                     :
                     null
diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index 4d8c7b879..7235d9964 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -39,13 +39,25 @@
         left: -10px;
         z-index: -1;
 
+        &::after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 1;
+            background: @color-background-dark2-60;
+            content: "";
+        }
+
         .background-image {
             display: block;
             width: 100%;
             height: 100%;
             object-fit: cover;
-            object-position: top left;
-            filter: blur(5px) brightness(50%);
+            object-position: center;
+            opacity: 0.9;
+            filter: blur(5px);
         }
     }