diff --git a/visions/ui/src/client.ts b/visions/ui/src/client.ts
index e890180..0ae82bc 100644
--- a/visions/ui/src/client.ts
+++ b/visions/ui/src/client.ts
@@ -16,6 +16,6 @@ export class Client {
     }
 
     async playingField(): Promise<PlayingField> {
-        return { backgroundImage: "tower-in-mist.jpg" };
+        return { backgroundImage: "su-pearl.png" };
     }
 }
diff --git a/visions/ui/src/components/PlayingField/PlayingField.css b/visions/ui/src/components/PlayingField/PlayingField.css
index 6e64837..05514de 100644
--- a/visions/ui/src/components/PlayingField/PlayingField.css
+++ b/visions/ui/src/components/PlayingField/PlayingField.css
@@ -1,3 +1,11 @@
 .playing-field {
     display: flex;
 }
+
+.playing-field__background {
+    max-width: 50%;
+}
+
+.playing-field__background > img {
+    max-width: 100%;
+}
diff --git a/visions/ui/src/components/PlayingField/PlayingField.tsx b/visions/ui/src/components/PlayingField/PlayingField.tsx
index 96e9398..a15f1d5 100644
--- a/visions/ui/src/components/PlayingField/PlayingField.tsx
+++ b/visions/ui/src/components/PlayingField/PlayingField.tsx
@@ -15,7 +15,7 @@ export const PlayingFieldComponent = ({ client }: PlayingFieldProps) => {
     const backgroundUrl = field && client.imageUrl(field.backgroundImage);
     return (<div className="playing-field">
         <div> Left Panel </div>
-        <div> {backgroundUrl && <img src={backgroundUrl.toString()} alt="playing field" />} </div>
+        <div className="playing-field__background"> {backgroundUrl && <img src={backgroundUrl.toString()} alt="playing field" />} </div>
         <div> Right Panel </div>
     </div>)
 }