diff --git a/src/meta/ScreenWrapper.tsx b/src/meta/ScreenWrapper.tsx
index 78040b2b67ab3cc5b101c6a966080a4281d3fbdf..f1353c36ada70920abc411f5e2e6bb5bd6097156 100644
--- a/src/meta/ScreenWrapper.tsx
+++ b/src/meta/ScreenWrapper.tsx
@@ -1,12 +1,25 @@
 import React from 'react';
 import ScreenBar from "./ScreenBar";
 
-const ScreenWrapper = (props: {children: any}) => {
+const ScreenWrapper = (props: {children: any, backgroundImage?: string}) => {
   return (
-    <div className={"h-full w-full flex flex-col"} style={{backgroundImage: "/logo512.png"}}>
-      <ScreenBar />
-      <div className={"layout-grid flex-1 px-8 pb-10"}>
-        {props.children}
+    <div className={"relative"}>
+      <div
+        className={"absolute inset-0 h-screen w-screen bg-cover blur-lg backdrop-brightness-75"}
+        style={{backgroundImage: `url('${props.backgroundImage}')`}}
+      >
+      </div>
+
+      <div className={"absolute inset-0 h-screen w-screen flex flex-col"}>
+        <ScreenBar />
+        <div
+          className={"grid layout-grid flex-1 px-8 pb-8 pt-4 bg-contain bg-no-repeat bg-center"}
+          style={{
+            backgroundImage: `url('${props.backgroundImage}')`
+          }}
+        >
+          {props.children}
+        </div>
       </div>
     </div>
   );