diff --git a/js-src/components/overlay-controls.tsx b/js-src/components/overlay-controls.tsx
index 02b8a7b..a32890e 100644
--- a/js-src/components/overlay-controls.tsx
+++ b/js-src/components/overlay-controls.tsx
@@ -26,6 +26,10 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu}: Overl
                 </a>
                 <a href="#" className="control-a control control-button">A</a>
                 <a href="#" className="control-b control control-button">B</a>
+                <a href="#" className="control-up control control-pad-button">&#94;</a>
+                <a href="#" className="control-down control control-pad-button">v</a>
+                <a href="#" className="control-left control control-pad-button">&lt;</a>
+                <a href="#" className="control-right control control-pad-button">&gt;</a>
             </div>
         </div>
     );
diff --git a/public/css/styles.css b/public/css/styles.css
index c949ed0..efece3c 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -91,29 +91,39 @@ form label, form input {
 }
 
 .control-button {
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, 0);
-    width: 40px;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    border-radius: 50%;
-    color: grey;
-    text-decoration: none;
-    line-height: 40px;
-    font-size: 35px;
+        border-radius: 50%;
+}
+
+.control-pad-button {
+    top: 50%;
+    left: 10px;
 }
 
 .control-a {
     top: 50%;
-    left: 90%;
+    right: 10px;;
+    left: unset;
 }
 
 .control-b {
-    top: 60%;
-    left: 75%;
+    top: 50%;
+    transform: translateY(50%);
+    right: 75px;
+    left: unset;
 }
+
+.control-right {
+    transform: translateX(200%);
+}
+
+.control-up {
+    transform: translateX(100%) translateY(-100%);
+}
+
+.control-down {
+    transform: translateX(100%) translateY(100%);
+}
+
 .overlay > div.vertical-padding {
     height: 50%;
 }
@@ -141,6 +151,14 @@ form label, form input {
     background: #343434;
     border: none;
     opacity: 75%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    color: grey;
+    text-decoration: none;
+    line-height: 40px;
+    font-size: 35px;
 }
 
 .overlay-menu-select-files {
diff --git a/public/js/bundle.js b/public/js/bundle.js
index 69acf89..dba3faa 100644
--- a/public/js/bundle.js
+++ b/public/js/bundle.js
@@ -126,7 +126,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ OverlayControls)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../constants */ \"./js-src/constants.ts\");\n\n\n;\nfunction OverlayControls({ firstMenuElement, setHiddenMenu }) {\n    function showOverlayMenu() {\n        setHiddenMenu(false);\n        setTimeout(() => {\n            if (firstMenuElement.current == null) {\n                return;\n            }\n            firstMenuElement.current.focus();\n        }, 100);\n    }\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"overlay\" },\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"vertical-padding\" }),\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"controls\" },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"gear control\", onClick: showOverlayMenu },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: _constants__WEBPACK_IMPORTED_MODULE_1__.HOME_BUTTON_IMAGE, alt: \"Go to menu. (House icon)\" })),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-a control control-button\" }, \"A\"),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-b control control-button\" }, \"B\"))));\n}\n\n\n//# sourceURL=webpack://MSGBA-Web/./js-src/components/overlay-controls.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ OverlayControls)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../constants */ \"./js-src/constants.ts\");\n\n\n;\nfunction OverlayControls({ firstMenuElement, setHiddenMenu }) {\n    function showOverlayMenu() {\n        setHiddenMenu(false);\n        setTimeout(() => {\n            if (firstMenuElement.current == null) {\n                return;\n            }\n            firstMenuElement.current.focus();\n        }, 100);\n    }\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"overlay\" },\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"vertical-padding\" }),\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"controls\" },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"gear control\", onClick: showOverlayMenu },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: _constants__WEBPACK_IMPORTED_MODULE_1__.HOME_BUTTON_IMAGE, alt: \"Go to menu. (House icon)\" })),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-a control control-button\" }, \"A\"),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-b control control-button\" }, \"B\"),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-up control control-pad-button\" }, \"^\"),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-down control control-pad-button\" }, \"v\"),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-left control control-pad-button\" }, \"<\"),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", className: \"control-right control control-pad-button\" }, \">\"))));\n}\n\n\n//# sourceURL=webpack://MSGBA-Web/./js-src/components/overlay-controls.tsx?");
 
 /***/ }),