diff --git a/frontend/src/components/OriginalPong.js b/frontend/src/components/OriginalPong.js
index e13e868b4..73628f831 100644
--- a/frontend/src/components/OriginalPong.js
+++ b/frontend/src/components/OriginalPong.js
@@ -1,8 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import backgroundImage from "../images/pongCover.png";
+import settings from "../images/settings.png";
 
 const GameCanvas = () => {
   // Default Parameters
+  let resize = true;
   const defaultSpeedX = 300;
   const winScore = 2;
   const defaultSpeedY = 20;
@@ -142,7 +144,8 @@ const GameCanvas = () => {
   const handleResize = () => {
     if (canvasRef.current) {
       const screenWidth = window.innerWidth;
-      const canvasWidth = 0.8 * screenWidth;
+      let canvasWidth = screenWidth;
+      if (resize === true) canvasWidth = 0.8 * screenWidth;
       const canvasHeight = (canvasWidth / 16) * 9;
       canvasRef.current.width = canvasWidth;
       canvasRef.current.height = canvasHeight;
@@ -233,19 +236,55 @@ const GameCanvas = () => {
         );
       }
     };
+    // touchpad controlls
+    const handleTouchMove = (event) => {
+      if (canvasRef.current) {
+        const touches = event.touches;
+        const rect = canvasRef.current.getBoundingClientRect();
+        for (let i = 0; i < touches.length; i++) {
+          const touch = touches[i];
+          const touchY = event.touches[i].clientY - rect.top - window.scrollY;
+          // Left paddle controls
+          if (touch.clientX < window.innerWidth / 2) {
+            leftPaddleY = touchY - paddleHeight / 2;
+            leftPaddleY = Math.max(
+              0,
+              Math.min(leftPaddleY, canvasRef.current.height - paddleHeight)
+            );
+          }
+          // Right paddle controls
+          else {
+            rightPaddleY = touchY - paddleHeight / 2;
+            rightPaddleY = Math.max(
+              0,
+              Math.min(rightPaddleY, canvasRef.current.height - paddleHeight)
+            );
+          }
+        }
+      }
+    };
 
     document.addEventListener("keyup", handleKeyUp);
     document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("touchmove", handleTouchMove);
     window.addEventListener("resize", handleResize);
     handleResize();
     draw(0);
+
     return () => {
-      document.addEventListener("keyup", handleKeyUp);
+      document.removeEventListener("keyup", handleKeyUp);
       document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("touchmove", handleTouchMove);
       window.removeEventListener("resize", handleResize);
     };
   }, [canvasRef]);
 
+  const handleButtonClick = () => {
+    resize = !resize;
+    handleResize();
+    console.log("Something should have happened");
+  };
+
   return (
     <div className="flex justify-center items-center h-screen">
       {scoreLeftReact === winScore || scoreRightReact === winScore ? (
@@ -255,11 +294,23 @@ const GameCanvas = () => {
           <LoseScreen />
         )
       ) : (
-        <canvas
-          ref={canvasRef}
-          className="border-8 border-solid border-white"
-          style={{ backgroundColor: "#0F0F0F" }}
-        ></canvas>
+        <>
+          <canvas
+            ref={canvasRef}
+            className="border-8 border-solid border-white"
+            style={{ backgroundColor: "#0F0F0F" }}
+          ></canvas>
+          <button
+            className="absolute top-0 right-0 p-2 rounded"
+            onClick={handleButtonClick}
+          >
+            <img
+              src={settings}
+              alt="Image"
+              class="w-32 h-32 object-cover rounded-full"
+            />
+          </button>
+        </>
       )}
     </div>
   );
@@ -346,7 +397,7 @@ const Pong = () => {
         <div className="relative border-8 border-white">
           <img
             src={backgroundImage}
-            style={{ width: "80vw", height: "100%", objectFit: "cover" }}
+            style={{ width: "80vw", height: "45vw", objectFit: "cover" }}
             alt="Background"
           />
           <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
diff --git a/frontend/src/components/PongAi.js b/frontend/src/components/PongAi.js
index e6ff18aed..32d229097 100644
--- a/frontend/src/components/PongAi.js
+++ b/frontend/src/components/PongAi.js
@@ -1,9 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
 import backgroundImage from "../images/pongCover.png";
+import settings from "../images/settings.png";
 
 const GameCanvas = () => {
   // Default Parameters
   const defaultSpeedX = 300;
+  let resize = true;
   const winScore = 2;
   const defaultSpeedY = 20;
   const [scoreLeftReact, setScoreLeft] = useState(0);
@@ -142,7 +144,8 @@ const GameCanvas = () => {
   const handleResize = () => {
     if (canvasRef.current) {
       const screenWidth = window.innerWidth;
-      const canvasWidth = 0.8 * screenWidth;
+      let canvasWidth = screenWidth;
+      if (resize === true) canvasWidth = 0.8 * screenWidth;
       const canvasHeight = (canvasWidth / 16) * 9;
       canvasRef.current.width = canvasWidth;
       canvasRef.current.height = canvasHeight;
@@ -207,16 +210,37 @@ const GameCanvas = () => {
         );
       }
     };
+    const handleTouchMove = (event) => {
+      if (canvasRef.current && event.touches.length > 0) {
+        const rect = canvasRef.current.getBoundingClientRect();
+        const touchY = event.touches[0].clientY - rect.top - window.scrollY;
+        leftPaddleY = touchY - paddleHeight / 2;
+        leftPaddleY = Math.max(
+          0,
+          Math.min(leftPaddleY, canvasRef.current.height - paddleHeight)
+        );
+      }
+    };
+
     document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("touchmove", handleTouchMove);
     window.addEventListener("resize", handleResize);
     handleResize();
     draw(0);
+
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("touchmove", handleTouchMove);
       window.removeEventListener("resize", handleResize);
     };
   }, [canvasRef]);
 
+  const handleButtonClick = () => {
+    resize = !resize;
+    handleResize();
+    console.log("Something should have happened");
+  };
+
   return (
     <div className="flex justify-center items-center h-screen">
       {scoreLeftReact === winScore || scoreRightReact === winScore ? (
@@ -226,11 +250,23 @@ const GameCanvas = () => {
           <LoseScreen />
         )
       ) : (
-        <canvas
-          ref={canvasRef}
-          className="border-8 border-solid border-white"
-          style={{ backgroundColor: "#0F0F0F" }}
-        ></canvas>
+        <>
+          <canvas
+            ref={canvasRef}
+            className="border-8 border-solid border-white"
+            style={{ backgroundColor: "#0F0F0F" }}
+          ></canvas>
+          <button
+            className="absolute top-0 right-0 p-2 rounded"
+            onClick={handleButtonClick}
+          >
+            <img
+              src={settings}
+              alt="Image"
+              class="w-32 h-32 object-cover rounded-full"
+            />
+          </button>
+        </>
       )}
     </div>
   );
@@ -251,7 +287,7 @@ const WinScreen = () => {
         <div className="relative border-8 border-white">
           <img
             src={backgroundImage}
-            style={{ width: "80vw", height: "100%", objectFit: "cover" }}
+            style={{ width: "80vw", height: "45vw", objectFit: "cover" }}
             alt="Background"
           />
           <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
@@ -284,7 +320,7 @@ const LoseScreen = () => {
         <div className="relative border-8 border-white">
           <img
             src={backgroundImage}
-            style={{ width: "80vw", height: "100%", objectFit: "cover" }}
+            style={{ width: "80vw", height: "45vw", objectFit: "cover" }}
             alt="Background"
           />
           <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
@@ -317,7 +353,7 @@ const PongAi = () => {
         <div className="relative border-8 border-white">
           <img
             src={backgroundImage}
-            style={{ width: "80vw", height: "100%", objectFit: "cover" }}
+            style={{ width: "80vw", height: "45vw", objectFit: "cover" }}
             alt="Background"
           />
           <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
diff --git a/frontend/src/images/settings.png b/frontend/src/images/settings.png
new file mode 100644
index 000000000..bb556a787
Binary files /dev/null and b/frontend/src/images/settings.png differ