diff --git a/app.js b/app.js
index ea998da..8f6bd82 100644
--- a/app.js
+++ b/app.js
@@ -790,8 +790,8 @@ document.addEventListener("DOMContentLoaded", () => {
     1,
   ];
   // 0 - pac-dots
-  // 1 - wall
-  // 2 - ghost-lair
+  // 1 - wl
+  // 2 - ghost-lairal
   // 3 - power-pellet
   // 4 - empty
 
@@ -835,51 +835,50 @@ document.addEventListener("DOMContentLoaded", () => {
   // console.log(getCoordinates(pacmanCurrentIndex))
 
   // set pacman velocity
-  function setPacmanVelocity(e) {
-    switch (e.keyCode) {
-      case 37:
-        if (
-          pacmanCurrentIndex % width !== 0 &&
-          !squares[pacmanCurrentIndex - 1].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex - 1].classList.contains("ghost-lair")
-        ) {
-          pacmanVelocity.y = 0;
-          pacmanVelocity.x = 1;
-        }
-        break;
-      case 38:
-        if (
-          pacmanCurrentIndex - width >= 0 &&
-          !squares[pacmanCurrentIndex - width].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex - width].classList.contains("ghost-lair")
-        ) {
-          pacmanVelocity.y = 0;
-          pacmanVelocity.x = -1;
-        }
-        break;
-      case 39:
-        if (
-          pacmanCurrentIndex % width < width - 1 &&
-          !squares[pacmanCurrentIndex + 1].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex + 1].classList.contains("ghost-lair")
-        ) {
-          pacmanVelocity.y = 1;
-          pacmanVelocity.x = 0;
-        }
-        break;
-      case 40:
-        if (
-          pacmanCurrentIndex + width < width * width &&
-          !squares[pacmanCurrentIndex + width].classList.contains("wall") &&
-          !squares[pacmanCurrentIndex + width].classList.contains("ghost-lair")
-        ) {
-          pacmanVelocity.y = -1;
-          pacmanVelocity.x = 0;
-        }
-        break;
+  //changed some parameters and if / else conditions
+  function setPacmanVelocity(key, button) {
+    let keyPressed = key;
+    let buttonPressed = button;
+
+    //check wich key or button got pressed
+    if ( //left
+      (keyPressed == 37 || buttonPressed == "left") &&
+      pacmanCurrentIndex % width !== 0 &&
+      !squares[pacmanCurrentIndex - 1].classList.contains("wall") &&
+      !squares[pacmanCurrentIndex - 1].classList.contains("ghost-lair")
+    ) {
+      pacmanVelocity.y = 0;
+      pacmanVelocity.x = 1;
+    }
+    else if ( //up
+      (keyPressed == 38 || buttonPressed == "up") &&
+      pacmanCurrentIndex - width >= 0 &&
+      !squares[pacmanCurrentIndex - width].classList.contains("wall") &&
+      !squares[pacmanCurrentIndex - width].classList.contains("ghost-lair")
+    ) {
+      pacmanVelocity.y = 0;
+      pacmanVelocity.x = -1;
+    }
+    else if ( //right
+      (keyPressed == 39 || buttonPressed == "right") &&
+      pacmanCurrentIndex % width < width - 1 &&
+      !squares[pacmanCurrentIndex + 1].classList.contains("wall") &&
+      !squares[pacmanCurrentIndex + 1].classList.contains("ghost-lair")
+    ) {
+      pacmanVelocity.y = 1;
+      pacmanVelocity.x = 0;
+    }
+    else if ( //down
+      (keyPressed == 40 || buttonPressed == "down") &&
+      pacmanCurrentIndex + width < width * width &&
+      !squares[pacmanCurrentIndex + width].classList.contains("wall") &&
+      !squares[pacmanCurrentIndex + width].classList.contains("ghost-lair")
+    ) {
+      pacmanVelocity.y = -1;
+      pacmanVelocity.x = 0;
     }
     checkForGameOver();
-    console.log(pacmanVelocity, e.keyCode);
+    //console.log(pacmanVelocity, e.keyCode);
   }
 
   //move pacman
@@ -1082,9 +1081,20 @@ document.addEventListener("DOMContentLoaded", () => {
       document.removeEventListener("keydown", startGame);
       //remove start screen
       document.getElementById("start-screen").style.display = "none";
-      //set pacman velocity and enable movement
-      document.addEventListener("keyup", setPacmanVelocity);
+      //check if the moviment is being made by the pad
+
+      //set pacman velocity
+      //get key pressed
+      document.addEventListener("keyup", (event) => { setPacmanVelocity(event.keyCode, "") });
+
+      //get on-screen button pressed
+      document.querySelectorAll(".pad-button").forEach(button => {
+        button.onclick = function (e) {
+          setPacmanVelocity(0, this.id);
+        }
+      });
       movePacman();
+
       // move the Ghosts randomly
       ghosts.forEach((ghost) => moveGhost(ghost));
     }
diff --git a/index.html b/index.html
index 1760565..3e2594b 100644
--- a/index.html
+++ b/index.html
@@ -1,26 +1,50 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
-  <head>
-    <meta charset="utf-8" />
-    <title>PacMan</title>
-    <link rel="stylesheet" href="styles.css" />
-    <script src="app.js" charset="utf-8"></script>
-  </head>
-  <body>
-    <div class="overlay-screen" id="start-screen">
-      <h1>PACMAN</h1>
-      <h2 id="start-msg">Press ENTER to start</h2>
-      <h2>Use arrow keys to move</h2>
+
+<head>
+  <meta charset="utf-8" />
+  <title>PacMan</title>
+  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="pad-controller.css" />
+  <script src="app.js" charset="utf-8"></script>
+</head>
+
+<body>
+  <div class="overlay-screen" id="start-screen">
+    <h1>PACMAN</h1>
+    <h2 id="start-msg">Press ENTER to start</h2>
+    <h2>Use arrow keys to move</h2>
+  </div>
+  <div class="game-container">
+    <div class="grid"></div>
+
+    <!--PAD CONTROLLER-->
+    <div id="pad-controller">
+      <button id="up" class="pad-button">
+        <h4> &#8593;</h4>
+      </button>
+      <div class="left-right">
+        <button id="left" class="pad-button">
+          <h4> &#8592;</h4>
+        </button>
+        <button id="right" class="pad-button">
+          <h4> &#8594;</h4>
+        </button>
+      </div>
+      <button id="down" class="pad-button">
+        <h4>&#8595;</h4>
+      </button>
     </div>
-    <div class="game-container">
-      <div class="grid"></div>
-      <h2>Score:<span id="score">0</span></h2>
-    </div>
-    <div class="overlay-screen" id="game-over-screen">
-      <span>GAME OVER!</span>
-    </div>
-    <div class="overlay-screen" id="you-won-screen">
-      <span>YOU WON!</span>
-    </div>
-  </body>
-</html>
+    <!--/PAD CONTROLLER-->
+
+    <h2>Score:<span id="score">0</span></h2>
+  </div>
+  <div class="overlay-screen" id="game-over-screen">
+    <span>GAME OVER!</span>
+  </div>
+  <div class="overlay-screen" id="you-won-screen">
+    <span>YOU WON!</span>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/pad-controller.css b/pad-controller.css
new file mode 100644
index 0000000..ef32586
--- /dev/null
+++ b/pad-controller.css
@@ -0,0 +1,40 @@
+#pad-controller {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100px;
+}
+
+.pad-button {
+    color: rgb(1, 17, 17);
+    text-decoration: none;
+    user-select: none;
+    border-radius: 100%;
+}
+
+.pad-button h4 {
+    padding: 10px;
+}
+
+#up {
+    background-color: #ecdb33;
+}
+
+#down {
+    background-color: #3cdb4e;
+}
+
+#left {
+    background-color: #40ccd0;
+    margin-right: 15px;
+}
+
+#right {
+    background-color: #d04242;
+    margin-left: 15px;
+}
+
+.left-right {
+    display: flex;
+    flex-direction: row;
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 76ce086..3bf7b55 100644
--- a/styles.css
+++ b/styles.css
@@ -88,6 +88,7 @@ body {
   background-color: rgb(247, 232, 22);
   border-radius: 10px;
 }
+
 h2 {
   color: white;
   font-weight: normal;
@@ -188,4 +189,4 @@ h2 {
   99% {
     opacity: 0;
   }
-}
+}
\ No newline at end of file