diff --git a/apps/imgclock/ChangeLog b/apps/imgclock/ChangeLog
index 01a6a4248..29eec7606 100644
--- a/apps/imgclock/ChangeLog
+++ b/apps/imgclock/ChangeLog
@@ -7,3 +7,4 @@
 0.06: Support 12 hour time
 0.07: Don't cut off wide date formats
 0.08: Use Bangle.setUI for button/launcher handling
+0.09: Bangle.js 2 compatibility
diff --git a/apps/imgclock/app.js b/apps/imgclock/app.js
index 0e4435638..aff47061b 100644
--- a/apps/imgclock/app.js
+++ b/apps/imgclock/app.js
@@ -10,8 +10,8 @@ var IX = inf.x, IY = inf.y, IBPP = inf.bpp;
 var IW = 174, IH = 45, OY = 24;
 var bgwidth = img.charCodeAt(0);
 var bgoptions;
-if (bgwidth<240)
-  bgoptions = { scale : 240/bgwidth };
+if (bgwidth<g.getWidth())
+  bgoptions = { scale : g.getWidth()/bgwidth };
 
 require("Font7x11Numeric7Seg").add(Graphics);
 var cg = Graphics.createArrayBuffer(IW,IH,IBPP,{msb:true});
@@ -26,7 +26,7 @@ function createBgImg() {
   require("Storage").write("imgclock.face.bg", cg.buffer);
   bgimg = require("Storage").read("imgclock.face.bg");
 }
-if (!bgimg || !bgimg.length) createBgImg();
+if (!bgimg || bgimg.length<10) createBgImg();
 
 function draw() {
   var t = new Date();
diff --git a/apps/imgclock/b2_122240.png b/apps/imgclock/b2_122240.png
new file mode 100644
index 000000000..1a3f4daaa
Binary files /dev/null and b/apps/imgclock/b2_122240.png differ
diff --git a/apps/imgclock/b2_122271.png b/apps/imgclock/b2_122271.png
new file mode 100644
index 000000000..31733fb2c
Binary files /dev/null and b/apps/imgclock/b2_122271.png differ
diff --git a/apps/imgclock/b2_explode.png b/apps/imgclock/b2_explode.png
new file mode 100644
index 000000000..5252bbcd2
Binary files /dev/null and b/apps/imgclock/b2_explode.png differ
diff --git a/apps/imgclock/b2_thisisfine.png b/apps/imgclock/b2_thisisfine.png
new file mode 100644
index 000000000..1b7daaf60
Binary files /dev/null and b/apps/imgclock/b2_thisisfine.png differ
diff --git a/apps/imgclock/custom.html b/apps/imgclock/custom.html
index 2511f8a54..cb2a84654 100644
--- a/apps/imgclock/custom.html
+++ b/apps/imgclock/custom.html
@@ -5,6 +5,7 @@
   <body>
     <div class="container">
       <div class="columns">
+        Please wait...
       </div>
     </div>
 
@@ -12,13 +13,51 @@
     <script src="../../core/lib/imageconverter.js"></script>
 
     <script>
-      var faces = [
+      var faces = [];
+      const FACES_BANGLE1 = [
         { img:"122240.png", bpp : 8, x:56, y:20, align: 1, col:"#FFFFFF", name:"Cityscape", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
         { img:"122271.png", bpp : 8, x:10, y:125, align: -1, col:"#FFFFFF", name:"Sunset", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
         { img:"thisisfine.png", bpp : 8, x:53, y:5, align: 0, col:"#000000", name:"This is fine.", attrib:"Gunshow #648", attribLink:"https://knowyourmeme.com/memes/this-is-fine", description:"" },
         { img:"explode.png", bpp : 8, x:0, y:145, align: 0, col:"#FFFFFF", name:"Boom.", attrib:"", attribLink:"", description:"" },
       ];
+      const FACES_BANGLE2 = [
+        { img:"b2_122240.png", bpp : 8, x:2, y:5, align: 1, col:"#FFFFFF", name:"Cityscape", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
+        { img:"b2_122271.png", bpp : 8, x:2, y:115, align: -1, col:"#FFFFFF", name:"Sunset", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
+        { img:"b2_thisisfine.png", bpp : 8, x:2, y:5, align: 0, col:"#000000", name:"This is fine.", attrib:"Gunshow #648", attribLink:"https://knowyourmeme.com/memes/this-is-fine", description:"" },
+        { img:"b2_explode.png", bpp : 8, x:2, y:115, align: 0, col:"#FFFFFF", name:"Boom.", attrib:"", attribLink:"", description:"" },
+      ];
 
+      var recommendedUploadStyle = "...";
+      var defaultBPP = 8;
+      var defaultImageMode = "...";
+      var defaultPositions = {};
+
+      function onInit(device) {
+        if (device && device.id=="BANGLEJS2") {
+          faces = FACES_BANGLE2;
+          recommendedUploadStyle = "176x152 3 bits per pixel (8 color)";
+          defaultBPP = 3;
+          defaultImageMode = "3bit";
+          defaultPositions = {
+            "2,5,-1":"Top",
+            "2,115,-1":"Bottom",
+          };
+        } else {
+          faces = FACES_BANGLE1;
+          recommendedUploadStyle = "240x192 or 240x216 8 bit web palette";
+          defaultBPP = 8;
+          defaultImageMode = "web";
+          defaultPositions = {
+            "16,16,-1":"Top Left",
+            "50,16,1":"Top Right",
+            "16,131,-1":"Bottom Left",
+            "50,131,1":"Bottom Right"
+          };
+        }
+        updateFaces();
+      }
+
+      function updateFaces() {
       document.querySelector(".columns").innerHTML = faces.map((face,facenumber)=>`
 <div class="column col-6 col-xs-12">
   <div class="card">
@@ -42,7 +81,7 @@
     </div>
     <div class="card-header">
       <div class="card-title h5">Custom</div>
-      <div class="card-subtitle text-gray">(240x192 or 240x216 8 bit web palette)</div>
+      <div class="card-subtitle text-gray">(${recommendedUploadStyle})</div>
     </div>
     <div class="card-body">
     <div class="form-group">
@@ -69,10 +108,7 @@
     <div class="form-group">
       <label class="form-label" for="customlocation">Clock location</label>
       <select class="form-select" id="customlocation">
-        <option value="16,16,-1">Top Left</option>
-        <option value="50,16,1">Top Right</option>
-        <option value="16,131,-1">Bottom Left</option>
-        <option value="50,131,1">Bottom Right</option>
+        ${Object.keys(defaultPositions).map(k=>`<option value="${k}">${defaultPositions[k]}</option>`).join("")}
       </select>
     </div>
     </div>
@@ -99,7 +135,7 @@
               x : pos[0],
               y : pos[1],
               align: pos[2],
-              bpp : document.getElementById('cusom16bit').checked ? 16 : 8,
+              bpp : document.getElementById('cusom16bit').checked ? 16 : defaultBPP,
               col : col
             };
           } else {
@@ -112,7 +148,7 @@
             align : face.align,
             col : face.col
           };
-          var imgMode = faceInfo.bpp==16 ? "rgb565" : "web";
+          var imgMode = faceInfo.bpp==16 ? "rgb565" : defaultImageMode;
           var img = document.querySelector(`img[face='${facenumber}']`);
           var imgString = imageconverter.imagetoString(img, {mode:imgMode, output:"raw", compression:false});
           // send finished app
@@ -136,6 +172,7 @@
           fr.readAsDataURL(files[0]);
         }
     }
+  }
 
     </script>
   </body>
diff --git a/apps/imgclock/metadata.json b/apps/imgclock/metadata.json
index 799d11acc..9fa1d64c7 100644
--- a/apps/imgclock/metadata.json
+++ b/apps/imgclock/metadata.json
@@ -2,18 +2,19 @@
   "id": "imgclock",
   "name": "Image background clock",
   "shortName": "Image Clock",
-  "version": "0.08",
+  "version": "0.09",
   "description": "A clock with an image as a background",
   "icon": "app.png",
   "type": "clock",
   "tags": "clock",
-  "supports": ["BANGLEJS"],
+  "supports": ["BANGLEJS","BANGLEJS2"],
   "custom": "custom.html",
+  "customConnect": true,
   "storage": [
     {"name":"imgclock.app.js","url":"app.js"},
     {"name":"imgclock.img","url":"app-icon.js","evaluate":true},
     {"name":"imgclock.face.img"},
     {"name":"imgclock.face.json"},
-    {"name":"imgclock.face.bg","content":""}
+    {"name":"imgclock.face.bg","content":"X"}
   ]
 }
