diff --git a/frontend/public/bg/gryffindor.png b/frontend/public/bg/gryffindor.png
new file mode 100644
index 0000000..9b34434
Binary files /dev/null and b/frontend/public/bg/gryffindor.png differ
diff --git a/frontend/public/bg/hufflepuff.png b/frontend/public/bg/hufflepuff.png
new file mode 100644
index 0000000..e9a84ee
Binary files /dev/null and b/frontend/public/bg/hufflepuff.png differ
diff --git a/frontend/public/bg/ravenclaw.png b/frontend/public/bg/ravenclaw.png
new file mode 100644
index 0000000..b6f2d70
Binary files /dev/null and b/frontend/public/bg/ravenclaw.png differ
diff --git a/frontend/public/bg/slytherin.png b/frontend/public/bg/slytherin.png
new file mode 100644
index 0000000..949e3de
Binary files /dev/null and b/frontend/public/bg/slytherin.png differ
diff --git a/frontend/src/styles/styles.js b/frontend/src/styles/styles.js
index 6c57952..a7b4deb 100644
--- a/frontend/src/styles/styles.js
+++ b/frontend/src/styles/styles.js
@@ -421,7 +421,7 @@ export const styles = {
   bgMap: {
     position: "absolute",
     inset: 0,
-    backgroundImage: 'url("/bg/marauders-map-blur.jpg")',
+    backgroundImage: stylesTokens.bgImage,
     backgroundSize: "cover",
     backgroundPosition: "center",
     backgroundRepeat: "no-repeat",
diff --git a/frontend/src/styles/theme.js b/frontend/src/styles/theme.js
index 3c21f72..25e9a70 100644
--- a/frontend/src/styles/theme.js
+++ b/frontend/src/styles/theme.js
@@ -30,4 +30,7 @@ export const stylesTokens = {
   rowEmptyBg: "var(--hp-rowEmptyBg)",
   rowEmptyText: "var(--hp-rowEmptyText)",
   rowEmptyBorder: "var(--hp-rowEmptyBorder)",
+
+  // Background
+  bgImage: "var(--hp-bgImage)",
 };
diff --git a/frontend/src/styles/themes.js b/frontend/src/styles/themes.js
index 1d79ca5..b71b02d 100644
--- a/frontend/src/styles/themes.js
+++ b/frontend/src/styles/themes.js
@@ -34,6 +34,9 @@ export const THEMES = {
       rowEmptyBg: "rgba(255,255,255,0.06)",
       rowEmptyText: "rgba(233,216,166,0.75)",
       rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/marauders-map-blur.jpg')",
     },
   },
 
@@ -69,6 +72,9 @@ export const THEMES = {
       rowEmptyBg: "rgba(255,255,255,0.06)",
       rowEmptyText: "rgba(255,210,170,0.75)",
       rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/gryffindor.png')",
     },
   },
 
@@ -104,6 +110,9 @@ export const THEMES = {
       rowEmptyBg: "rgba(255,255,255,0.06)",
       rowEmptyText: "rgba(175,240,210,0.75)",
       rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/slytherin.png')",
     },
   },
 
@@ -139,6 +148,9 @@ export const THEMES = {
       rowEmptyBg: "rgba(255,255,255,0.06)",
       rowEmptyText: "rgba(180,205,255,0.78)",
       rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/ravenclaw.png')",
     },
   },
 
@@ -174,6 +186,9 @@ export const THEMES = {
       rowEmptyBg: "rgba(255,255,255,0.06)",
       rowEmptyText: "rgba(255,240,180,0.78)",
       rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/hufflepuff.png')",
     },
   },
 };