diff --git a/client/package.json b/client/package.json
index 35be33e..4beecf6 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,7 +33,7 @@
     "font-awesome": "^4.7.0",
     "jquery": "^3.2.1",
     "jspdf": "^1.3.3",
-    "openlayers": "^4.2.0",
+    "openlayers": "4.2.0",
     "proj4": "^2.4.4",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
diff --git a/client/src/app/map/style.service.ts b/client/src/app/map/style.service.ts
index 2c76ee8..c2868c8 100644
--- a/client/src/app/map/style.service.ts
+++ b/client/src/app/map/style.service.ts
@@ -58,6 +58,7 @@ export class StyleService {
 
     /**
      * Get the OL style based on the rule style
+     * Supports Font Awesome for text styles
      * @param ruleStyle
      * @returns {any}
      */
@@ -136,6 +137,9 @@ export class StyleService {
      * @returns {string}
      */
     getLegendImage(layerStyle) {
+        // Calculate the device pixel ratio
+        var ratio = this.getDevicePixelRatio();
+
         // Create a canvas element
         var canvas: any = document.createElement("canvas");
 
@@ -165,9 +169,9 @@ export class StyleService {
             for (var i = 0; i < layerStyle.rules.length; i++) {
                  var ruleStyle = layerStyle.rules[i].style;
                  var ctx = canvas.getContext("2d");
-                ctx.font = "10px Arial";
+                ctx.font = "12px Arial";
                 ctx.fillStyle = 'black';
-                ctx.fillText(ruleStyle.label, 30, (15 + i * heightPerCategory));
+                ctx.fillText(ruleStyle.label, 30 * ratio, (15 * ratio + i * heightPerCategory * ratio));
 
                 if (ruleStyle) {
                     style = this.getOLStyle(ruleStyle);
@@ -220,6 +224,9 @@ export class StyleService {
 
     /**
      * Create a legend based on JSON from an ArcGIS layer
+     * TODO: this is hardcoded! For the Pacific Disaster Center layer only the first icon needs
+     * to get displayed. See: https://github.com/thinkWhere/DMIS/issues/109
+     * By hardcoding this, any additional ArcGIS REST layers will only show the first icon as well...
      * @param legendInfo
      * @param callback
      */
@@ -253,16 +260,33 @@ export class StyleService {
                     context.drawImage(this, 0, this.anchorHeight, this.width, this.height);
                     context.font = "12px Arial";
                     context.fillText(this.label, this.width + 10, this.anchorHeight + 20);
-                    // Wait for all the legend images to be loaded before returning it
-                    if(imagesLoaded == imageCount){
-                        var dataURL = canvas.toDataURL();
-                        callback(dataURL);
-                    }
-
+                    // If using multiple images, Wait for all the legend images to be loaded before returning it
+                    // by checking if imagesLoaded == imageCount
+                    var dataURL = canvas.toDataURL();
+                    callback(dataURL);
                 };
                 img.src = 'data:' + legends[j].contentType + ';base64,' + legends[j].imageData;
+                break;
             }
+            break;
         }
         canvas.height = anchorHeight;
     }
+
+    /**
+     * Returns the device pixel ratio for all browsers
+     * @returns {number}
+     */
+    getDevicePixelRatio() {
+        var ratio = 1;
+        // To account for zoom, change to use deviceXDPI instead of systemXDPI
+        if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
+            // Only allow for values > 1
+            ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
+        }
+        else if (window.devicePixelRatio !== undefined) {
+            ratio = window.devicePixelRatio;
+        }
+        return ratio;
+    };
 }
\ No newline at end of file