diff --git a/src/App.vue b/src/App.vue
index b668b4e..4e54a2d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,7 +18,7 @@ const backendUrl = import.meta.env.MODE === "production"
 interface Cell {
 	x: number
 	y: number
-	color: 'white' | 'red' | 'green'
+	color: '#242424' | 'red' | 'green'
 }
 
 interface Snake {
@@ -40,7 +40,7 @@ function genGrid(length: number, height: number) {
 			currentRow[j] = {
 				x: i,
 				y: j,
-				color: 'white'
+				color: '#242424'
 			}
 		}
 		grid[i] = currentRow
@@ -101,7 +101,7 @@ function moveSnake(x: number, y: number) {
 			const toDelete = snake.value.history.shift()
 
 			if (toDelete !== undefined) {
-				toDelete.color = 'white'
+				toDelete.color = '#242424'
 			}
 
 		}
@@ -133,13 +133,13 @@ function death() {
 function killSnake() {
 	snake.value.history
 	for (const cell of snake.value.history) {
-		cell.color = 'white'
+		cell.color = '#242424'
 	}
 }
 
 function killCoin() {
 	const coinCell = grid.value[currentCoin.value.x][currentCoin.value.y]
-	coinCell.color = 'white'
+	coinCell.color = '#242424'
 }
 
 const speed = computed(() => {
@@ -289,6 +289,7 @@ window.addEventListener('keydown', keydown)
 	-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
 	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
 	height: 100%;
+	background-color: black;
 }
 
 .row {
@@ -318,6 +319,7 @@ main {
 	-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
 	-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
 	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
+	background-color: black;
 }
 
 .scoreboard-list {