diff --git a/apps/hidjoystick/ChangeLog b/apps/hidjoystick/ChangeLog
index 5560f00bc..625daf4bb 100644
--- a/apps/hidjoystick/ChangeLog
+++ b/apps/hidjoystick/ChangeLog
@@ -1 +1,2 @@
 0.01: New App!
+0.02: Make Bangle.js 2 compatible
diff --git a/apps/hidjoystick/app.js b/apps/hidjoystick/app.js
index 134814cee..69f56463d 100644
--- a/apps/hidjoystick/app.js
+++ b/apps/hidjoystick/app.js
@@ -1,7 +1,86 @@
-var storage = require('Storage');
+const storage = require('Storage');
+const Layout = require("Layout");
 const settings = storage.readJSON('setting.json',1) || { HID: false };
+const BANGLEJS2 = process.env.HWVERSION == 2;
+const sidebarWidth=18;
+const buttonWidth = (Bangle.appRect.w-sidebarWidth)/2;
+const buttonHeight = (Bangle.appRect.h-16)/2*0.85; // subtract text row and add a safety margin
 
 var sendInProgress = false; // Only send one message at a time, do not flood
+var touchBtn2 = 0;
+var touchBtn3 = 0;
+var touchBtn4 = 0;
+var touchBtn5 = 0;
+
+function renderBtnArrows(l) {
+  const d = g.getWidth() - l.width;
+
+  function c(a) {
+    return {
+      width: 8,
+      height: a.length,
+      bpp: 1,
+      buffer: (new Uint8Array(a)).buffer
+    };
+  }
+
+  g.drawImage(c([0,8,12,14,255,14,12,8]),d,g.getHeight()/2);
+  if (!BANGLEJS2) {
+    g.drawImage(c([16,56,124,254,16,16,16,16]),d,40);
+    g.drawImage(c([16,16,16,16,254,124,56,16]),d,194);
+  }
+}
+
+const layoutChilden = [];
+if (BANGLEJS2) { // add virtual buttons in display
+	layoutChilden.push({type:"h", c:[
+		{type:"btn", width:buttonWidth, height:buttonHeight, label:"BTN2", id:"touchBtn2" },
+		{type:"btn", width:buttonWidth, height:buttonHeight, label:"BTN3", id:"touchBtn3" },
+	]});
+}
+layoutChilden.push({type:"h", c:[
+	{type:"txt", font:"6x8:2", label:"Joystick" },
+]});
+if (BANGLEJS2) { // add virtual buttons in display
+	layoutChilden.push({type:"h", c:[
+		{type:"btn", width:buttonWidth, height:buttonHeight, label:"BTN4", id:"touchBtn4" },
+		{type:"btn", width:buttonWidth, height:buttonHeight, label:"BTN5", id:"touchBtn5" },
+	]});
+}
+
+const layout = new Layout(
+	{type:"h", c:[
+		{type:"v", width:Bangle.appRect.w-sidebarWidth, c: layoutChilden},
+		{type:"custom", width:18, height: Bangle.appRect.h, render:renderBtnArrows }
+	]}
+);
+
+function isInBox(box, x, y) {
+  return x >= box.x && x < box.x+box.w && y >= box.y && y < box.y+box.h;
+}
+
+if (BANGLEJS2) {
+  Bangle.on('drag', function(event) {
+    if (event.b == 0) { // release
+      touchBtn2 = touchBtn3 = touchBtn4 = touchBtn5 = 0;
+    } else if (isInBox(layout.touchBtn2, event.x, event.y)) {
+      touchBtn2 = 1;
+      touchBtn3 = touchBtn4 = touchBtn5 = 0;
+    } else if (isInBox(layout.touchBtn3, event.x, event.y)) {
+      touchBtn3 = 1;
+      touchBtn2 = touchBtn4 = touchBtn5 = 0;
+    } else if (isInBox(layout.touchBtn4, event.x, event.y)) {
+      touchBtn4 = 1;
+      touchBtn2 = touchBtn3 = touchBtn5 = 0;
+    } else if (isInBox(layout.touchBtn5, event.x, event.y)) {
+      touchBtn5 = 1;
+      touchBtn2 = touchBtn3 = touchBtn4 = 0;
+    } else {
+      // outside any buttons, release all
+      touchBtn2 = touchBtn3 = touchBtn4 = touchBtn5 = 0;
+    }
+  });
+}
 
 const sendHid = function (x, y, btn1, btn2, btn3, btn4, btn5, cb) {
   try {
@@ -20,31 +99,17 @@ const sendHid = function (x, y, btn1, btn2, btn3, btn4, btn5, cb) {
 
 function drawApp() {
   g.clear();
-  g.setFont("6x8",2);
-  g.setFontAlign(0,0);
-  g.drawString("Joystick", 120, 120);
-  const d = g.getWidth() - 18;
-
-  function c(a) {
-    return {
-      width: 8,
-      height: a.length,
-      bpp: 1,
-      buffer: (new Uint8Array(a)).buffer
-    };
-  }
-
-  g.drawImage(c([16,56,124,254,16,16,16,16]),d,40);
-  g.drawImage(c([16,16,16,16,254,124,56,16]),d,194);
-  g.drawImage(c([0,8,12,14,255,14,12,8]),d,116);
+  Bangle.loadWidgets();
+  Bangle.drawWidgets();
+  layout.render();
 }
 
 function update() {
-  const btn1 = BTN1.read();
-  const btn2 = BTN2.read();
-  const btn3 = BTN3.read();
-  const btn4 = BTN4.read();
-  const btn5 = BTN5.read();
+  const btn1 = BTN1 ? BTN1.read() : 0;
+  const btn2 = !BANGLEJS2 ? BTN2.read() : touchBtn2;
+  const btn3 = !BANGLEJS2 ? BTN3.read() : touchBtn3;
+  const btn4 = !BANGLEJS2 ? BTN4.read() : touchBtn4;
+  const btn5 = !BANGLEJS2 ? BTN5.read() : touchBtn5;
   const acc = Bangle.getAccel();
   var x = acc.x*-127;
   var y = acc.y*-127;
diff --git a/apps/hidjoystick/metadata.json b/apps/hidjoystick/metadata.json
index e2b78a97b..c13ae2efa 100644
--- a/apps/hidjoystick/metadata.json
+++ b/apps/hidjoystick/metadata.json
@@ -2,11 +2,11 @@
   "id": "hidjoystick",
   "name": "Bluetooth Joystick",
   "shortName": "Joystick",
-  "version": "0.01",
-  "description": "Emulates a 2 axis/5 button Joystick using the accelerometer as stick input and buttons 1-3, touch left as button 4 and touch right as button 5.",
+  "version": "0.02",
+  "description": "Emulates a 2 axis/5 button Joystick using the accelerometer as stick input and buttons 1-3, touch left as button 4 and touch right as button 5. On Bangle.js 2 buttons 2-5 are emulated with the touchscreen.",
   "icon": "app.png",
   "tags": "bluetooth",
-  "supports": ["BANGLEJS"],
+  "supports": ["BANGLEJS", "BANGLEJS2"],
   "storage": [
     {"name":"hidjoystick.app.js","url":"app.js"},
     {"name":"hidjoystick.img","url":"app-icon.js","evaluate":true}