diff --git a/src/css/main.css b/src/css/main.css
index fd05747..f06e9b7 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -12,6 +12,7 @@
     line-height: 1.7;
     width: 100%;
     height: 100%;
+    color: #bcbcbc;
 }
 
 .ejs_parent ::-webkit-scrollbar{
@@ -321,3 +322,52 @@
     background: rgba(0,0,0,0.8) !important;
     padding: 15px 0;
 }
+
+.ejs_virtualGamepad_parent {
+    width: 100%;
+    position: absolute;
+    bottom: 50px;
+}
+.ejs_virtualGamepad_top {
+    position: absolute;
+    bottom: 250px;
+    width: 100%;
+}
+.ejs_virtualGamepad_bottom {
+    position: absolute;
+    bottom: 10px;
+    height: 30px;
+    width: 124px;
+    left: 50%;
+    margin-left: -62px;
+}
+.ejs_virtualGamepad_left {
+    position: absolute;
+    bottom: 50px;
+    width: 125px;
+    height: 125px;
+    left: 10px;
+}
+.ejs_virtualGamepad_right {
+    position: absolute;
+    bottom: 50px;
+    width: 130px;
+    height: 130px;
+    right: 10px;
+}
+.ejs_virtualGamepad_button {
+    position: absolute;
+    font-size: 20px;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    font-size: 30px;
+    font-weight: bold;
+    background-color: rgba(255,255,255,0.15);
+    user-select: none;
+    transition: all .2s;
+}
+
diff --git a/src/emulator.js b/src/emulator.js
index 6ebd9dd..6ed8ded 100644
--- a/src/emulator.js
+++ b/src/emulator.js
@@ -317,6 +317,7 @@ class EmulatorJS {
         this.createContextMenu();
         this.createBottomMenuBar();
         this.createControlSettingMenu();
+        this.setVirtualGamepad();
         this.addEventListener(document, "keydown keyup", this.keyChange.bind(this));
         //keyboard, etc...
     }
@@ -883,6 +884,75 @@ class EmulatorJS {
                 }
             }
         }
+    }
+    setVirtualGamepad() {
+        this.virtualGamepad = this.createElement("div");
+        this.virtualGamepad.style.display = "none";
+        this.virtualGamepad.classList.add("ejs_virtualGamepad_parent");
+        this.elements.parent.appendChild(this.virtualGamepad);
+        const info = [{"type":"button","text":"B","id":"b","location":"right","right":-10,"top":70,"bold":true,"input_value":0},{"type":"button","text":"A","id":"a","location":"right","right":60,"top":70,"bold":true,"input_value":8},{"type":"dpad","location":"left","left":"50%","right":"50%","joystickInput":false,"inputValues":[4,5,6,7]},{"type":"button","text":"Start","id":"start","location":"center","left":60,"fontSize":15,"block":true,"input_value":3},{"type":"button","text":"Select","id":"select","location":"center","left":-5,"fontSize":15,"block":true,"input_value":2}];
+        //todo next
+        const up = this.createElement("div");
+        up.classList.add("ejs_virtualGamepad_top");
+        const down = this.createElement("div");
+        down.classList.add("ejs_virtualGamepad_bottom");
+        const left = this.createElement("div");
+        left.classList.add("ejs_virtualGamepad_left");
+        const right = this.createElement("div");
+        right.classList.add("ejs_virtualGamepad_right");
+        const elems = {top:up, center:down, left, right};
+        
+        this.virtualGamepad.appendChild(up);
+        this.virtualGamepad.appendChild(down);
+        this.virtualGamepad.appendChild(left);
+        this.virtualGamepad.appendChild(right);
+        
+        const leftHandedMode = false;
+        const blockCSS = 'height:31px;text-align:center;border:1px solid #ccc;border-radius:5px;line-height:31px;';
+        
+        for (let i=0; i<info.length; i++) {
+            if (info[i].type !== 'button') continue;
+            if (leftHandedMode && ['left', 'right'].includes(info[i].location)) {
+                info[i].location = (info[i].location==='left') ? 'right' : 'left';
+                const amnt = JSON.parse(JSON.stringify(info[i]));
+                if (amnt.left) {
+                    info[i].right = amnt.left;
+                }
+                if (amnt.right) {
+                    info[i].left = amnt.right;
+                }
+            }
+            let style = '';
+            if (info[i].left) {
+                style += 'left:'+info[i].left+(typeof info[i].left === 'number'?'px':'')+';';
+            }
+            if (info[i].right) {
+                style += 'right:'+info[i].right+(typeof info[i].right === 'number'?'px':'')+';';
+            }
+            if (info[i].top) {
+                style += 'top:'+info[i].top+(typeof info[i].top === 'number'?'px':'')+';';
+            }
+            if (!info[i].bold) {
+                style += 'font-weight:normal;';
+            } else if (info[i].bold) {
+                style += 'font-weight:bold;';
+            }
+            info[i].fontSize = info[i].fontSize || 30;
+            style += 'font-size:'+info[i].fontSize+'px;';
+            if (info[i].block) {
+                style += blockCSS;
+            }
+            if (['top', 'center', 'left', 'right'].includes(info[i].location)) {
+                const button = this.createElement("div");
+                button.style = style;
+                button.innerText = info[i].text;
+                button.classList.add("ejs_virtualGamepad_button");
+                elems[info[i].location].appendChild(button);
+            }
+        }
+        
+        //todo - zone and dpad (and input)
+        
         
     }
 }