diff --git a/app.js b/app.js
index ea998da..cc11d1e 100644
--- a/app.js
+++ b/app.js
@@ -1,8 +1,8 @@
-document.addEventListener("DOMContentLoaded", () => {
-  const scoreDisplay = document.getElementById("score");
+document.addEventListener('DOMContentLoaded', () => {
+  const scoreDisplay = document.getElementById('score');
   const width = 28;
   let score = 0;
-  const grid = document.querySelector(".grid");
+  const grid = document.querySelector('.grid');
   const layout = [
     1,
     1,
@@ -800,19 +800,19 @@ document.addEventListener("DOMContentLoaded", () => {
   //create your board
   function createBoard() {
     for (let i = 0; i < layout.length; i++) {
-      const square = document.createElement("div");
+      const square = document.createElement('div');
       grid.appendChild(square);
       squares.push(square);
 
       //add layout to the board
       if (layout[i] === 0) {
-        squares[i].classList.add("pac-dot");
+        squares[i].classList.add('pac-dot');
       } else if (layout[i] === 1) {
-        squares[i].classList.add("wall");
+        squares[i].classList.add('wall');
       } else if (layout[i] === 2) {
-        squares[i].classList.add("ghost-lair");
+        squares[i].classList.add('ghost-lair');
       } else if (layout[i] === 3) {
-        squares[i].classList.add("power-pellet");
+        squares[i].classList.add('power-pellet');
       }
     }
   }
@@ -826,7 +826,7 @@ document.addEventListener("DOMContentLoaded", () => {
     y: 0,
   };
   const pacmanSpeed = 200;
-  squares[pacmanCurrentIndex].classList.add("pac-man");
+  squares[pacmanCurrentIndex].classList.add('pac-man');
   //get the coordinates of pacman on the grid with X and Y axis
   // function getCoordinates(index) {
   //   return [index % width, Math.floor(index / width)]
@@ -840,8 +840,8 @@ document.addEventListener("DOMContentLoaded", () => {
       case 37:
         if (
           pacmanCurrentIndex % width !== 0 &&
-          !squares[pacmanCurrentIndex - 1].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex - 1].classList.contains("ghost-lair")
+          !squares[pacmanCurrentIndex - 1].classList.contains('wall') &&
+          !squares[pacmanCurrentIndex - 1].classList.contains('ghost-lair')
         ) {
           pacmanVelocity.y = 0;
           pacmanVelocity.x = 1;
@@ -850,8 +850,8 @@ document.addEventListener("DOMContentLoaded", () => {
       case 38:
         if (
           pacmanCurrentIndex - width >= 0 &&
-          !squares[pacmanCurrentIndex - width].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex - width].classList.contains("ghost-lair")
+          !squares[pacmanCurrentIndex - width].classList.contains('wall') &&
+          !squares[pacmanCurrentIndex - width].classList.contains('ghost-lair')
         ) {
           pacmanVelocity.y = 0;
           pacmanVelocity.x = -1;
@@ -860,8 +860,8 @@ document.addEventListener("DOMContentLoaded", () => {
       case 39:
         if (
           pacmanCurrentIndex % width < width - 1 &&
-          !squares[pacmanCurrentIndex + 1].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex + 1].classList.contains("ghost-lair")
+          !squares[pacmanCurrentIndex + 1].classList.contains('wall') &&
+          !squares[pacmanCurrentIndex + 1].classList.contains('ghost-lair')
         ) {
           pacmanVelocity.y = 1;
           pacmanVelocity.x = 0;
@@ -870,8 +870,8 @@ document.addEventListener("DOMContentLoaded", () => {
       case 40:
         if (
           pacmanCurrentIndex + width < width * width &&
-          !squares[pacmanCurrentIndex + width].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex + width].classList.contains("ghost-lair")
+          !squares[pacmanCurrentIndex + width].classList.contains('wall') &&
+          !squares[pacmanCurrentIndex + width].classList.contains('ghost-lair')
         ) {
           pacmanVelocity.y = -1;
           pacmanVelocity.x = 0;
@@ -884,15 +884,15 @@ document.addEventListener("DOMContentLoaded", () => {
 
   //move pacman
   function movePacman() {
-    squares[pacmanCurrentIndex].classList.remove("pac-man");
+    squares[pacmanCurrentIndex].classList.remove('pac-man');
     setInterval(() => {
       if (pacmanVelocity.x === 1 && pacmanVelocity.y == 0) {
         if (
           pacmanCurrentIndex % width !== 0 &&
-          !squares[pacmanCurrentIndex - 1].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex - 1].classList.contains("ghost-lair")
+          !squares[pacmanCurrentIndex - 1].classList.contains('wall') &&
+          !squares[pacmanCurrentIndex - 1].classList.contains('ghost-lair')
         ) {
-          squares[pacmanCurrentIndex].classList.remove("pac-man");
+          squares[pacmanCurrentIndex].classList.remove('pac-man');
 
           pacmanCurrentIndex -= 1;
         }
@@ -903,10 +903,10 @@ document.addEventListener("DOMContentLoaded", () => {
       if (pacmanVelocity.x === -1 && pacmanVelocity.y == 0) {
         if (
           pacmanCurrentIndex - width >= 0 &&
-          !squares[pacmanCurrentIndex - width].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex - width].classList.contains("ghost-lair")
+          !squares[pacmanCurrentIndex - width].classList.contains('wall') &&
+          !squares[pacmanCurrentIndex - width].classList.contains('ghost-lair')
         ) {
-          squares[pacmanCurrentIndex].classList.remove("pac-man");
+          squares[pacmanCurrentIndex].classList.remove('pac-man');
 
           pacmanCurrentIndex -= width;
         }
@@ -914,10 +914,10 @@ document.addEventListener("DOMContentLoaded", () => {
       if (pacmanVelocity.x === 0 && pacmanVelocity.y == 1) {
         if (
           pacmanCurrentIndex % width < width - 1 &&
-          !squares[pacmanCurrentIndex + 1].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex + 1].classList.contains("ghost-lair")
+          !squares[pacmanCurrentIndex + 1].classList.contains('wall') &&
+          !squares[pacmanCurrentIndex + 1].classList.contains('ghost-lair')
         ) {
-          squares[pacmanCurrentIndex].classList.remove("pac-man");
+          squares[pacmanCurrentIndex].classList.remove('pac-man');
 
           pacmanCurrentIndex += 1;
         }
@@ -928,15 +928,15 @@ document.addEventListener("DOMContentLoaded", () => {
       if (pacmanVelocity.x === 0 && pacmanVelocity.y == -1) {
         if (
           pacmanCurrentIndex + width < width * width &&
-          !squares[pacmanCurrentIndex + width].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex + width].classList.contains("ghost-lair")
+          !squares[pacmanCurrentIndex + width].classList.contains('wall') &&
+          !squares[pacmanCurrentIndex + width].classList.contains('ghost-lair')
         ) {
-          squares[pacmanCurrentIndex].classList.remove("pac-man");
+          squares[pacmanCurrentIndex].classList.remove('pac-man');
           pacmanCurrentIndex += width;
         }
       }
 
-      squares[pacmanCurrentIndex].classList.add("pac-man");
+      squares[pacmanCurrentIndex].classList.add('pac-man');
       pacDotEaten();
       powerPelletEaten();
     }, pacmanSpeed);
@@ -944,28 +944,28 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // what happens when you eat a pac-dot
   function pacDotEaten() {
-    if (squares[pacmanCurrentIndex].classList.contains("pac-dot")) {
+    if (squares[pacmanCurrentIndex].classList.contains('pac-dot')) {
       score++;
       if (score < 50) {
-        document.getElementById("score").classList.add("low-score");
+        document.getElementById('score').classList.add('low-score');
       } else if (score > 100) {
-        document.getElementById("score").classList.add("mid-score");
+        document.getElementById('score').classList.add('mid-score');
       } else if (score > 200) {
-        document.getElementById("score").classList.add("high-score");
+        document.getElementById('score').classList.add('high-score');
       }
       scoreDisplay.innerHTML = score;
-      squares[pacmanCurrentIndex].classList.remove("pac-dot");
+      squares[pacmanCurrentIndex].classList.remove('pac-dot');
       checkForWin();
     }
   }
 
   //what happens when you eat a power-pellet
   function powerPelletEaten() {
-    if (squares[pacmanCurrentIndex].classList.contains("power-pellet")) {
+    if (squares[pacmanCurrentIndex].classList.contains('power-pellet')) {
       score += 10;
       ghosts.forEach((ghost) => (ghost.isScared = true));
       setTimeout(unScareGhosts, 10000);
-      squares[pacmanCurrentIndex].classList.remove("power-pellet");
+      squares[pacmanCurrentIndex].classList.remove('power-pellet');
       checkForWin();
     }
   }
@@ -989,55 +989,55 @@ document.addEventListener("DOMContentLoaded", () => {
 
   //all my ghosts
   ghosts = [
-    new Ghost("blinky", 348, 100),
-    new Ghost("stinky", 376, 400),
-    new Ghost("inky", 351, 300),
-    new Ghost("clyde", 379, 200),
+    new Ghost('blinky', 348, 100),
+    new Ghost('stinky', 376, 400),
+    new Ghost('inky', 351, 300),
+    new Ghost('clyde', 379, 200),
   ];
 
   //draw my ghosts onto the grid
   ghosts.forEach((ghost) => {
     squares[ghost.currentIndex].classList.add(ghost.className);
-    squares[ghost.currentIndex].classList.add("ghost");
+    squares[ghost.currentIndex].classList.add('ghost');
   });
 
   function moveGhost(ghost) {
     const directions = [-1, +1, width, -width];
     let direction = directions[Math.floor(Math.random() * directions.length)];
 
-    ghost.timerId = setInterval(function () {
+    ghost.timerId = setInterval(function() {
       //if the next square your ghost is going to go to does not have a ghost and does not have a wall
       if (
-        !squares[ghost.currentIndex + direction].classList.contains("ghost") &&
-        !squares[ghost.currentIndex + direction].classList.contains("wall")
+        !squares[ghost.currentIndex + direction].classList.contains('ghost') &&
+        !squares[ghost.currentIndex + direction].classList.contains('wall')
       ) {
         //remove the ghosts classes
         squares[ghost.currentIndex].classList.remove(ghost.className);
-        squares[ghost.currentIndex].classList.remove("ghost", "scared-ghost");
+        squares[ghost.currentIndex].classList.remove('ghost', 'scared-ghost');
         //move into that space
         ghost.currentIndex += direction;
-        squares[ghost.currentIndex].classList.add(ghost.className, "ghost");
+        squares[ghost.currentIndex].classList.add(ghost.className, 'ghost');
         //else find a new random direction to go in
       } else direction = directions[Math.floor(Math.random() * directions.length)];
 
       //if the ghost is currently scared
       if (ghost.isScared) {
-        squares[ghost.currentIndex].classList.add("scared-ghost");
+        squares[ghost.currentIndex].classList.add('scared-ghost');
       }
 
       //if the ghost is currently scared and pacman is on it
       if (
         ghost.isScared &&
-        squares[ghost.currentIndex].classList.contains("pac-man")
+        squares[ghost.currentIndex].classList.contains('pac-man')
       ) {
         squares[ghost.currentIndex].classList.remove(
           ghost.className,
-          "ghost",
-          "scared-ghost"
+          'ghost',
+          'scared-ghost',
         );
         ghost.currentIndex = ghost.startIndex;
         score += 100;
-        squares[ghost.currentIndex].classList.add(ghost.className, "ghost");
+        squares[ghost.currentIndex].classList.add(ghost.className, 'ghost');
       }
       checkForGameOver();
     }, ghost.speed);
@@ -1046,16 +1046,16 @@ document.addEventListener("DOMContentLoaded", () => {
   //check for a game over
   function checkForGameOver() {
     if (
-      squares[pacmanCurrentIndex].classList.contains("ghost") &&
-      !squares[pacmanCurrentIndex].classList.contains("scared-ghost")
+      squares[pacmanCurrentIndex].classList.contains('ghost') &&
+      !squares[pacmanCurrentIndex].classList.contains('scared-ghost')
     ) {
       ghosts.forEach((ghost) => clearInterval(ghost.timerId));
-      document.removeEventListener("keyup", movePacman);
+      document.removeEventListener('keyup', movePacman);
       pacmanVelocity.x = 0;
       pacmanVelocity.y = 0;
       //display game over screen and refresh after 3s to rest game
-      document.getElementById("game-over-screen").style.display = "flex";
-      setTimeout(function () {
+      document.getElementById('game-over-screen').style.display = 'flex';
+      setTimeout(function() {
         window.location.reload();
       }, 3000);
     }
@@ -1065,12 +1065,12 @@ document.addEventListener("DOMContentLoaded", () => {
   function checkForWin() {
     if (score === 274) {
       ghosts.forEach((ghost) => clearInterval(ghost.timerId));
-      document.removeEventListener("keyup", movePacman);
+      document.removeEventListener('keyup', movePacman);
       pacmanVelocity.x = 0;
       pacmanVelocity.y = 0;
       //display you won screen and refresh after 3s to rest game
-      document.getElementById("you-won-screen").style.display = "flex";
-      setTimeout(function () {
+      document.getElementById('you-won-screen').style.display = 'flex';
+      setTimeout(function() {
         window.location.reload();
       }, 3000);
     }
@@ -1079,16 +1079,24 @@ document.addEventListener("DOMContentLoaded", () => {
   //start the game when enter is pressed
   function startGame(event) {
     if (event.keyCode === 13) {
-      document.removeEventListener("keydown", startGame);
+      document.removeEventListener('keydown', startGame);
       //remove start screen
-      document.getElementById("start-screen").style.display = "none";
+      document.getElementById('start-screen').style.display = 'none';
       //set pacman velocity and enable movement
-      document.addEventListener("keyup", setPacmanVelocity);
+      document.addEventListener('keyup', setPacmanVelocity);
       movePacman();
       // move the Ghosts randomly
       ghosts.forEach((ghost) => moveGhost(ghost));
     }
   }
 
-  document.addEventListener("keydown", startGame);
+  document.addEventListener('keydown', startGame);
+
+  //Adjust Background Color
+  let colorAdjust = document.getElementById('colorChanger');
+  let bodyAdjust = document.getElementById('pacManBody');
+
+  colorAdjust.addEventListener('change', function() {
+    bodyAdjust.style.backgroundColor = this.value;
+  });
 });
diff --git a/index.html b/index.html
index 1760565..3581ee1 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="styles.css" />
     <script src="app.js" charset="utf-8"></script>
   </head>
-  <body>
+  <body id="pacManBody" class="bodyColor">
     <div class="overlay-screen" id="start-screen">
       <h1>PACMAN</h1>
       <h2 id="start-msg">Press ENTER to start</h2>
@@ -15,6 +15,13 @@ <h2>Use arrow keys to move</h2>
     <div class="game-container">
       <div class="grid"></div>
       <h2>Score:<span id="score">0</span></h2>
+      <label for="colorChanger">Choose a color:</label>
+      <select id="colorChanger" name="cars">
+        <option value="black">Black</option>
+        <option value="#808080">Grey</option>
+        <option value="#800000">Maroon</option>
+        <option value="#006400">Green</option>
+      </select>
     </div>
     <div class="overlay-screen" id="game-over-screen">
       <span>GAME OVER!</span>
diff --git a/styles.css b/styles.css
index 76ce086..9e52924 100644
--- a/styles.css
+++ b/styles.css
@@ -1,6 +1,6 @@
 @font-face {
-  font-family: "PressStart2P";
-  src: url("./fonts/PressStart2P.ttf");
+  font-family: 'PressStart2P';
+  src: url('./fonts/PressStart2P.ttf');
 }
 
 * {
@@ -9,7 +9,7 @@
 }
 
 body {
-  font-family: "PressStart2P", sans-serif;
+  font-family: 'PressStart2P', sans-serif;
   background-color: black;
   display: flex;
   flex-direction: column;
@@ -41,16 +41,16 @@ body {
 
 .power-pellet {
   background-color: rgb(14, 233, 14);
-  border: solid black 4px;
+  border: solid rgba(0, 0, 0, 1) 4px;
   box-sizing: border-box;
   border-radius: 10px;
 }
 
 .pac-dot {
   background-color: yellow;
-  border: solid black 7px;
+  border: solid rgba(0, 0, 0, 1) 7px;
   box-sizing: border-box;
-  border-radius: 10px;
+  border-radius: 50%;
 }
 
 .blinky {
@@ -94,6 +94,12 @@ h2 {
   text-align: center;
 }
 
+label {
+  color: white;
+  font-weight: lighter;
+  text-align: center;
+}
+
 .low-score {
   color: red;
 }