diff --git a/database/auth.db b/database/auth.db
index 26b28c4..7598b13 100644
Binary files a/database/auth.db and b/database/auth.db differ
diff --git a/database/live.db b/database/live.db
index db1b7c4..68229c9 100644
Binary files a/database/live.db and b/database/live.db differ
diff --git a/public/assets/css/dragon.css b/public/assets/css/dragon.css
index 43e0c3e..4d126aa 100644
--- a/public/assets/css/dragon.css
+++ b/public/assets/css/dragon.css
@@ -531,6 +531,31 @@ body::-webkit-scrollbar-thumb {
 		image-rendering: pixelated;
 		image-rendering: crisp-edges;
 		image-rendering: -webkit-optimize-contrast;
-		background-color: rgba(0, 0, 0, 0.5);
+	}
+}
+
+.char-icon {
+	width: 32px;
+	height: 32px;
+	background-image: url('/assets/img/world/rogues.png');
+
+	&.index-0 {
+		background-position: 0 0;
+	}
+
+	&.index-1 {
+		background-position: -32px 0;
+	}
+
+	&.index-2 {
+		background-position: -64px 0;
+	}
+
+	&.index-3 {
+		background-position: -96px 0;
+	}
+
+	&.index-4 {
+		background-position: -128px 0;
 	}
 }
diff --git a/public/assets/css/forms.css b/public/assets/css/forms.css
index 7ae6c25..23d733d 100644
--- a/public/assets/css/forms.css
+++ b/public/assets/css/forms.css
@@ -87,6 +87,10 @@
 		& > span.selected {
 			display: none;
 		}
+
+		& > .char-icon {
+			margin-right: 0.25rem;
+		}
 	}
 
 	&.active > label {
diff --git a/public/assets/img/world/rogues.png b/public/assets/img/world/rogues.png
new file mode 100644
index 0000000..9106ecb
Binary files /dev/null and b/public/assets/img/world/rogues.png differ
diff --git a/public/assets/img/world/tiles.jpg b/public/assets/img/world/tiles.jpg
new file mode 100644
index 0000000..d304965
Binary files /dev/null and b/public/assets/img/world/tiles.jpg differ
diff --git a/templates/pages/world/base.php b/templates/pages/world/base.php
index af5964a..ff176f6 100644
--- a/templates/pages/world/base.php
+++ b/templates/pages/world/base.php
@@ -12,22 +12,37 @@
 		csrf: '<?= csrf() ?>',
 		tiles: {
 			size: 32,
-			colors: {
-				0: '#fff',
-				1: '#f00'
-			}
+			img: new Image(),
+			cols: 3
+		},
+		sprites: {
+			size: 32,
+			img: new Image(),
+			cols: 6
 		}
 	}
 
 	const map = [
 		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-		[0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-		[0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-		[0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-		[0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-		[0, 0, 0, 2, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-		[0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 1, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 1, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
@@ -40,10 +55,19 @@
 		y: document.getElementById('char_y')
 	}
 
-	let player = { x: <?= location('x') ?>, y: <?= location('y') ?> }
+	let player = { x: <?= location('x') ?>, y: <?= location('y') ?>, char: 23, sprite: { x: 0, y: 0 } }
 	let camera = { x: 0, y: 0 }
 	let visible = { x: 0, y: 0 }
 
+	game.tiles.img.src = '/assets/img/world/tiles.jpg';
+	game.sprites.img.src = '/assets/img/world/rogues.png';
+
+	function getPlayerSprite() {
+		let col = player.char % game.sprites.cols
+		let row = Math.floor(player.char / game.sprites.cols)
+		player.sprite = { x: col * game.sprites.size, y: row * game.sprites.size }
+	}
+
 	function updateCanvasSize() {
 		game.canvas.width = game.canvas.clientWidth
 		game.canvas.height = game.canvas.clientHeight
@@ -75,18 +99,19 @@
 			'ArrowRight': 3
 		}[e.key];
 
-		if (direction !== undefined) {
-			// If player would move outside map bounds, return early
-			if (direction === 0 && player.y === 0) return;
-			if (direction === 1 && player.y === map.length - 1) return;
-			if (direction === 2 && player.x === 0) return;
-			if (direction === 3 && player.x === map[0].length - 1) return;
+		// Direction vectors: [up, down, left, right]
+		const dx = [0, 0, -1, 1];
+		const dy = [-1, 1, 0, 0];
 
-			// Return early if the player is trying to move into a wall
-			if (direction === 0 && map[player.y - 1][player.x] === 2) return;
-			if (direction === 1 && map[player.y + 1][player.x] === 2) return;
-			if (direction === 2 && map[player.y][player.x - 1] === 2) return;
-			if (direction === 3 && map[player.y][player.x + 1] === 2) return;
+		// Calculate new position
+		const newX = player.x + dx[direction];
+		const newY = player.y + dy[direction];
+
+		if (direction !== undefined) {
+			// Check if the new position is outside the map bounds
+			if (newX < 0 || newX >= map[0].length || newY < 0 || newY >= map.length) return;
+
+			if (map[newY][newX] !== 0) return;
 
 			// Execute a POST request to /move. If successful, the server will return a new x,y position
 			fetch('/move', {
@@ -99,9 +124,8 @@
 			}).then(response => {
 				if (response.ok) {
 					response.json().then(data => {
-						map[player.y][player.x] = 0
-						map[data.y][data.x] = 1
-						player = data
+						player.x = data.x
+						player.y = data.y
 						loc_span.x.textContent = player.x
 						loc_span.y.textContent = player.y
 						updateCamera()
@@ -148,27 +172,19 @@
 				const screenX = x * game.tiles.size - camera.x
 				const screenY = y * game.tiles.size - camera.y
 
-				if (map[y][x] === 1) {
-					// Draw player
-					ctx.fillStyle = 'red';
-					ctx.fillRect(screenX, screenY, game.tiles.size, game.tiles.size)
-				} else if (map[y][x] === 2) {
-					// Draw wall
-					ctx.fillStyle = 'black';
-					ctx.fillRect(screenX, screenY, game.tiles.size, game.tiles.size)
-				} else {
-					// Draw empty tile
-					ctx.strokeStyle = 'gray';
-					ctx.fillStyle = 'white';
-					ctx.fillRect(screenX, screenY, game.tiles.size, game.tiles.size)
-					ctx.strokeRect(screenX, screenY, game.tiles.size, game.tiles.size)
-				}
+				ctx.drawImage(game.tiles.img, map[y][x] * game.tiles.size, 0, game.tiles.size, game.tiles.size,
+					screenX, screenY, game.tiles.size, game.tiles.size)
 			}
 		}
+
+		// Render the player on top of the map using their current position
+		ctx.drawImage(game.sprites.img, player.sprite.x, player.sprite.y, game.sprites.size, game.sprites.size,
+			(player.x * game.sprites.size) - camera.x, (player.y * game.sprites.size) - camera.y,
+			game.sprites.size, game.sprites.size)
 	}
 
 	window.addEventListener('load', () => {
-		map[player.y][player.x] = 1
+		getPlayerSprite()
 		updateCanvasSize()
 		setupEventListeners()
 		render()