diff --git a/pingpong.html b/pingpong.html
index 13b47ab..c587c0f 100644
--- a/pingpong.html
+++ b/pingpong.html
@@ -1,27 +1,256 @@
 <!DOCTYPE html>
-
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-<head>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
-    <title>PING PONG GAME</title>
-    <link rel="stylesheet" href="./static/css/pingpong.css">
-    <link rel="stylesheet" href="static/css/style.css" />
-    <link rel="icon" href="static/images/favicon.png">
-</head>
-
-<body>
-    <div class="banner">
-    <H1 style="color: rgb(93, 10, 126); text-align:center" >PING PONG!</H1>
-    <a href="index.html">  
-        <button id="btn_1">Home</button>  
-      </a>
-     </div>
-         <canvas id="pingpong" width="600" height="400"></canvas>
-   <script src="static/js/pingpong.js"></script>
-
-</body>
+    <title>PONG GAME</title>
 
-</html>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        height: 100vh;
+        width: 100vw;
+        background-image: linear-gradient(to top, #ffda77, #ffa45b);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .board {
+        height: 85vh;
+        width: 80vw;
+        background-image: linear-gradient(to right, #5c6e91, #839b97);
+        border-radius: 14px;
+      }
+
+      .ball {
+        height: 30px;
+        width: 30px;
+        border-radius: 50%;
+        position: fixed;
+        top: calc(50% - 15px);
+        left: calc(50% - 15px);
+      }
+
+      .ball_effect {
+        height: 100%;
+        width: 100%;
+        border-radius: 100px;
+        animation: spinBall 0.1s linear infinite;
+        box-shadow: inset 0 0 18px #fff, inset 6px 0 18px violet,
+          inset -6px 0 18px #0ff, inset 6px 0 30px violet,
+          inset -6px 0 30px #0ff, 0 0 18px #fff, -4px 0 18px violet,
+          4px 0 18px #0ff;
+      }
+
+      @keyframes spinBall {
+        100% {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      .paddle {
+        height: 100px;
+        width: 18px;
+        border-radius: 50%;
+        position: fixed;
+      }
+
+      .paddle_1 {
+        top: calc(7.5vh + 55px);
+        left: calc(10vw + 30px);
+        box-shadow: inset 0 0 18px #fff, inset -6px 0 18px #f3bad6,
+          inset 6px 0 18px #0ff, inset -6px 0 30px #f3bad6,
+          inset 6px 0 30px #0ff, 0 0 18px #fff, 4px 0 18px #f3bad6,
+          -4px 0 18px #0ff;
+      }
 
+      .paddle_2 {
+        top: calc(85vh + 7.5vh - 100px - 55px);
+        right: calc(10vw + 30px);
+        box-shadow: inset 0 0 18px #fff, inset 6px 0 18px #f3bad6,
+          inset -6px 0 18px #0ff, inset 6px 0 30px #f3bad6,
+          inset -6px 0 30px #0ff, 0 0 18px #fff, -4px 0 18px #f3bad6,
+          4px 0 18px #0ff;
+      }
+
+      .player_1_score {
+        height: 50px;
+        width: 50px;
+        color: chartreuse;
+        position: fixed;
+        left: 30vw;
+        margin-top: 30px;
+      }
+
+      .player_2_score {
+        height: 50px;
+        width: 50px;
+        color: chartreuse;
+        position: fixed;
+        left: 70vw;
+        margin-top: 30px;
+      }
+
+      .message {
+        position: fixed;
+        /* color: #48426d; */
+        height: 10vh;
+        width: 30vw;
+        color: #c9cbff;
+        left: 38vw;
+        margin: 30px auto auto auto;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="board">
+      <div class="ball">
+        <div class="ball_effect"></div>
+      </div>
+      <div class="paddle_1 paddle"></div>
+      <div class="paddle_2 paddle"></div>
+      <h1 class="player_1_score">0</h1>
+      <h1 class="player_2_score">0</h1>
+      <h1 class="message">
+        Press Enter to Play Pong<br />
+        W and S for player 1<br />
+        ⬆ and ⬇ for player 2
+      </h1>
+    </div>
+    <script>
+      let gameState = "start";
+      let paddle_1 = document.querySelector(".paddle_1");
+      let paddle_2 = document.querySelector(".paddle_2");
+      let board = document.querySelector(".board");
+      let initial_ball = document.querySelector(".ball");
+      let ball = document.querySelector(".ball");
+      let score_1 = document.querySelector(".player_1_score");
+      let score_2 = document.querySelector(".player_2_score");
+      let message = document.querySelector(".message");
+      let paddle_1_coord = paddle_1.getBoundingClientRect();
+      let paddle_2_coord = paddle_2.getBoundingClientRect();
+      let initial_ball_coord = ball.getBoundingClientRect();
+      let ball_coord = initial_ball_coord;
+      let board_coord = board.getBoundingClientRect();
+      let paddle_common = document
+        .querySelector(".paddle")
+        .getBoundingClientRect();
+      let dx = Math.floor(Math.random() * 4) + 3;
+      let dy = Math.floor(Math.random() * 4) + 3;
+      let dxd = Math.floor(Math.random() * 2);
+      let dyd = Math.floor(Math.random() * 2);
+
+      document.addEventListener("keydown", (e) => {
+        if (e.key == "Enter") {
+          gameState = gameState == "start" ? "play" : "start";
+          if (gameState == "play") {
+            message.innerHTML = "Game Started";
+            message.style.left = 42 + "vw";
+            requestAnimationFrame(() => {
+              dx = Math.floor(Math.random() * 4) + 3;
+              dy = Math.floor(Math.random() * 4) + 3;
+              dxd = Math.floor(Math.random() * 2);
+              dyd = Math.floor(Math.random() * 2);
+              moveBall(dx, dy, dxd, dyd);
+            });
+          }
+        }
+        if (gameState == "play") {
+          if (e.key == "w") {
+            paddle_1.style.top =
+              Math.max(
+                board_coord.top,
+                paddle_1_coord.top - window.innerHeight * 0.06
+              ) + "px";
+            paddle_1_coord = paddle_1.getBoundingClientRect();
+          }
+          if (e.key == "s") {
+            paddle_1.style.top =
+              Math.min(
+                board_coord.bottom - paddle_common.height,
+                paddle_1_coord.top + window.innerHeight * 0.06
+              ) + "px";
+            paddle_1_coord = paddle_1.getBoundingClientRect();
+          }
+
+          if (e.key == "ArrowUp") {
+            paddle_2.style.top =
+              Math.max(
+                board_coord.top,
+                paddle_2_coord.top - window.innerHeight * 0.1
+              ) + "px";
+            paddle_2_coord = paddle_2.getBoundingClientRect();
+          }
+          if (e.key == "ArrowDown") {
+            paddle_2.style.top =
+              Math.min(
+                board_coord.bottom - paddle_common.height,
+                paddle_2_coord.top + window.innerHeight * 0.1
+              ) + "px";
+            paddle_2_coord = paddle_2.getBoundingClientRect();
+          }
+        }
+      });
+
+      function moveBall(dx, dy, dxd, dyd) {
+        if (ball_coord.top <= board_coord.top) {
+          dyd = 1;
+        }
+        if (ball_coord.bottom >= board_coord.bottom) {
+          dyd = 0;
+        }
+        if (
+          ball_coord.left <= paddle_1_coord.right &&
+          ball_coord.top >= paddle_1_coord.top &&
+          ball_coord.bottom <= paddle_1_coord.bottom
+        ) {
+          dxd = 1;
+          dx = Math.floor(Math.random() * 4) + 3;
+          dy = Math.floor(Math.random() * 4) + 3;
+        }
+        if (
+          ball_coord.right >= paddle_2_coord.left &&
+          ball_coord.top >= paddle_2_coord.top &&
+          ball_coord.bottom <= paddle_2_coord.bottom
+        ) {
+          dxd = 0;
+          dx = Math.floor(Math.random() * 4) + 3;
+          dy = Math.floor(Math.random() * 4) + 3;
+        }
+        if (
+          ball_coord.left <= board_coord.left ||
+          ball_coord.right >= board_coord.right
+        ) {
+          if (ball_coord.left <= board_coord.left) {
+            score_2.innerHTML = +score_2.innerHTML + 1;
+          } else {
+            score_1.innerHTML = +score_1.innerHTML + 1;
+          }
+          gameState = "start";
+
+          ball_coord = initial_ball_coord;
+          ball.style = initial_ball.style;
+          message.innerHTML =
+            "Press Enter to Play Pong<br/>W and S for player 1<br/>⬆ and ⬇ for player 2";
+          message.style.left = 38 + "vw";
+          return;
+        }
+        ball.style.top = ball_coord.top + dy * (dyd == 0 ? -1 : 1) + "px";
+        ball.style.left = ball_coord.left + dx * (dxd == 0 ? -1 : 1) + "px";
+        ball_coord = ball.getBoundingClientRect();
+        requestAnimationFrame(() => {
+          moveBall(dx, dy, dxd, dyd);
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/css/memory-game.css b/static/css/memory-game.css
index 6634d53..2bd7fdb 100644
--- a/static/css/memory-game.css
+++ b/static/css/memory-game.css
@@ -1,60 +1,64 @@
-*{
-    /*Adding a reset to all items*/
-    padding: 0%;
-    margin: 0%;
-    box-sizing: border-box;
+* {
+  /*Adding a reset to all items*/
+  padding: 0%;
+  margin: 0%;
+  box-sizing: border-box;
 }
 
-body{
-    height: 100vh;
-    background-image:url("../images/memory-game/Gifs/Background.jpg");
-}
-.memory-game{
-    width: 680px;
-    height: 640px;
-    /*this bring the game in center of page*/
-    margin:auto; 
-    display: flex;
-    flex-wrap: wrap;
-    perspective: 1000px;
+body {
+  height: 100vh;
+  background-image: url("../images/memory-game/Gifs/Background.jpg");
+}
+.memory-game {
+  width: 680px;
+  height: 640px;
+  /*this bring the game in center of page*/
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+  perspective: 1000px;
+}
+
+.memory-game img {
+  object-fit: cover;
 }
 
-.memory-card{
-    width: calc(25%  - 10px); 
-    /*calc remove the margin area form the width*/
-    height: calc(33.33% - 10px);
-    /*calc remove the margin area form the height*/
-    position: relative;
-    margin: 5px;
-    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-    /*For the image to comeback to its original shape after it shrinked on clicking*/
-    transform: scale(1);
-    transform-style: preserve-3d;
-    transition: transform .5s;
+.memory-card {
+  width: calc(25% - 10px);
+  /*calc remove the margin area form the width*/
+  height: calc(33.33% - 10px);
+  /*calc remove the margin area form the height*/
+  position: relative;
+  margin: 5px;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+  /*For the image to comeback to its original shape after it shrinked on clicking*/
+  transform: scale(1);
+  transform-style: preserve-3d;
+  transition: transform 0.5s;
 }
 
 .memory-card.flip {
-    transform: rotateY(180deg);
-  }
+  transform: rotateY(180deg);
+}
 
-.memory-card:active{
-    /*Image shrinks to its 80%*/
-    transform: scale(.75);
-    /*Then comes back to its original shape after 2secs of shrinking*/
-    transition: transform.2s;
+.memory-card:active {
+  /*Image shrinks to its 80%*/
+  transform: scale(0.75);
+  /*Then comes back to its original shape after 2secs of shrinking*/
+  transition: transform.2s;
 }
 
 .front-face,
-.back-face{
-    width: 185px;
-    height: 200px;
-    padding: 27px;
-    position: absolute; /*One image on top of the other*/
-    border-radius: 5px;
-    /*To make the front-face image visible*/
-    backface-visibility: hidden;
+.back-face {
+  width: 185px;
+  height: 200px;
+  padding: 27px;
+  position: absolute; /*One image on top of the other*/
+  border-radius: 5px;
+  /*To make the front-face image visible*/
+  backface-visibility: hidden;
 }
 
-.front-face{
-    transform: rotateY(180deg);
+.front-face {
+  transform: rotateY(180deg);
 }
diff --git a/static/css/randomJoke.css b/static/css/randomJoke.css
index 5644ae7..395eab0 100644
--- a/static/css/randomJoke.css
+++ b/static/css/randomJoke.css
@@ -35,7 +35,7 @@ body {
   border-radius: 10px;
   padding: 40px 30px;
   width: 700px;
-  height: 400px;
+  height: 420px;
   align-items: center;
   justify-items: center;
   text-align: center;
@@ -53,12 +53,19 @@ h2 {
   padding: 20px 30px;
 }
 #joke {
+  position: absolute;
+  left: 7%;
+  top: 20%;
   font-size: 30px;
   line-height: 40px;
   margin: 50px 0;
   max-width: 600px;
 }
 .btn {
+  position: absolute;
+  left: 40%;
+  bottom: 0;
+  margin-bottom: 15px;
   background-color: white;
   color: #003b46;
   border: 0;
