diff --git a/src/rpg/actors.html b/src/rpg/actors.html
index b567d8c..f2bedba 100644
--- a/src/rpg/actors.html
+++ b/src/rpg/actors.html
@@ -216,6 +216,22 @@
 <div id="canvas-wrapper"></div>
 
 <div id="controls">
+	<div class="panel">
+		<h3>Background</h3>
+		<div class="row">
+			<select id="background-type">
+				<option value="village">Village</option>
+				<option value="forest">Forest</option>
+				<option value="darkForest">Dark Forest</option>
+				<option value="dungeon">Dungeon</option>
+				<option value="swamp">Swamp</option>
+				<option value="mountains">Mountains</option>
+				<option value="graveyard">Graveyard</option>
+				<option value="volcano">Volcano</option>
+			</select>
+		</div>
+	</div>
+
 	<div class="panel">
 		<h3>Create Actor</h3>
 		<div class="row">
diff --git a/src/rpg/actors.ts b/src/rpg/actors.ts
index 3a9272b..d9ed3c0 100644
--- a/src/rpg/actors.ts
+++ b/src/rpg/actors.ts
@@ -1,4 +1,4 @@
-import {Application, Container, Graphics} from "pixi.js";
+import {Application, Container, Graphics, Sprite} from "pixi.js";
 import {standardHeight, standardWidth} from "./constants.ts";
 import {Actor} from "./Actor.ts";
 import {getWizardLevel, initWizard, Wizard} from "./Wizard.ts";
@@ -15,6 +15,7 @@ let world: Container;
 let currentActor: Actor | null = null;
 let dummyTarget: Actor | null = null;
 let wizardXp: number = 0;
+let currentBackground: Sprite | null = null;
 
 function $(id: string) {
 	return document.getElementById(id)!;
@@ -28,6 +29,16 @@ function log(msg: string) {
 	while (el.children.length > 20) el.removeChild(el.lastChild!);
 }
 
+async function switchBackground(type: BackgroundType) {
+	if (currentBackground && currentBackground.parent) {
+		world.removeChild(currentBackground);
+	}
+	const bg = await makeBackground(type);
+	// Insert background right after the mask (index 1)
+	world.addChildAt(bg, 1);
+	currentBackground = bg;
+}
+
 function updateStats(actor: Actor | null) {
 	if (!actor) {
 		$("stat-name").textContent = "-";
@@ -155,8 +166,17 @@ async function init() {
 	world.addChild(mask);
 
 	// Default background
-	const bg = await makeBackground(BackgroundType.Village);
-	world.addChild(bg);
+	await switchBackground(BackgroundType.Village);
+
+	// Background selector
+	($("background-type") as HTMLSelectElement).addEventListener(
+		"change",
+		async (e) => {
+			const type = (e.target as HTMLSelectElement).value as BackgroundType;
+			await switchBackground(type);
+			log(`Background changed to ${type}`);
+		},
+	);
 
 	// Animation loop
 	let sineToggle = true;