diff --git a/src/assets/background.jpg b/src/assets/background.jpg
index 0aedc3d9..f37bf172 100644
Binary files a/src/assets/background.jpg and b/src/assets/background.jpg differ
diff --git a/src/marketplace.css b/src/marketplace.css
index f01628ea..7e51cbef 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -13,21 +13,20 @@
 
   /* Full screen Background image located in root-folder/src/assets */
   --backgroundImage: {
-      background-image: url("../../assets/background.jpg");
-      background-color: var(--matterColor);
-      background-size: cover;
-      background-position-y: center;
 
-      /*
-       This value is specific to the given image. The value is the
-       relative position of the interesting area in the x axis, counted
-       from the left side of the image.
+    /* Gradient direction and overlaying the black color on top of the image for better readability */
+    background:
+      linear-gradient(-45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),
+      url("../../assets/background.jpg");
 
-       In the default image, this means the person sitting in the
-       sauna. This value ensures the person is approximately centered in
-       the viewport when the browser width changes.
-      */
-      background-position-x: 80%;
+    /* Add loading color for the div */
+    background-color: var(--matterColor);
+
+    /* Cover the whole screen with the background image */
+    background-size: cover;
+
+    /* Align the image within the container */
+    background-position: center center;
   }