diff --git a/README.md b/README.md
index 891afb5..41849ea 100644
--- a/README.md
+++ b/README.md
@@ -49,6 +49,8 @@ guide the learner’s interaction with the component.
 
 **\_hidePagination** (boolean): When set to `true`, hides the "previous" and "next" icons and progress indicator (e.g., "1/5") on the pop-up's toolbar. The default is `false`.
 
+**\_isNarrativeOnMobile** (boolean): When set to `false` the Hotgraphic will render a scaled down 'desktop' version (pins over image / tiles) of the component in mobile view instead of being replaced by a Narrative interaction. The default is `true`.
+
 **\_useNumberedPins** (boolean): If set to `true`, the pin icons will be replaced with the item number. Useful if you want pins to be visited in a set order or show steps in a process. The default is `false`.
 
 **\_useGraphicsAsPins** (boolean): If set to `true`, the image specified by **\_graphic.src** will be ignored and the popup images specified in **\_items[n].\_graphic.src** will instead be laid out in a 2 item width grid system. See [example.json](example.json#L77-L121) for a working example. The default is `false`.
diff --git a/example.json b/example.json
index c2e8c08..aa3f197 100644
--- a/example.json
+++ b/example.json
@@ -17,6 +17,7 @@
         "_setCompletionOn": "allItems",
         "_canCycleThroughPagination": false,
         "_hidePagination": false,
+        "_isNarrativeOnMobile": true,
         "_useNumberedPins": false,
         "_useGraphicsAsPins": false,
         "_isRound": false,
diff --git a/js/hotgraphicPopupView.js b/js/hotgraphicPopupView.js
index 19f83a9..f5a8051 100644
--- a/js/hotgraphicPopupView.js
+++ b/js/hotgraphicPopupView.js
@@ -12,7 +12,7 @@ define([
       return {
         'click .js-hotgraphic-popup-close': 'closePopup',
         'click .js-hotgraphic-controls-click': 'onControlClick'
-      }
+      };
     }
 
     initialize(...args) {
diff --git a/js/hotgraphicView.js b/js/hotgraphicView.js
index 0f95261..f134115 100644
--- a/js/hotgraphicView.js
+++ b/js/hotgraphicView.js
@@ -9,7 +9,7 @@ define([
     events () {
       return {
         'click .js-hotgraphic-item-click': 'onPinClicked'
-      }
+      };
     }
 
     initialize(...args) {
@@ -42,7 +42,7 @@ define([
     }
 
     reRender() {
-      if (Adapt.device.screenSize === 'large') return;
+      if (Adapt.device.screenSize === 'large' || this.model.get('_isNarrativeOnMobile') === false) return;
 
       this.replaceWithNarrative();
     }
diff --git a/less/hotgraphic.less b/less/hotgraphic.less
index 3595a89..7f02762 100644
--- a/less/hotgraphic.less
+++ b/less/hotgraphic.less
@@ -9,6 +9,11 @@
     position: absolute;
     top: 0;
     left: 0;
+    padding: @icon-padding / 2;
+
+    @media (min-width: @device-width-medium) {
+      padding: @icon-padding;
+    }
   }
 
   &__pin .icon {
diff --git a/properties.schema b/properties.schema
index 1e53472..b0410bc 100644
--- a/properties.schema
+++ b/properties.schema
@@ -120,6 +120,15 @@
       "validators": [],
       "help": "If enabled, the popup navigation buttons will cycle continuously through the popup items (i.e. clicking next whilst on the last item will cause the first item to be shown."
     },
+    "_isNarrativeOnMobile": {
+      "type": "boolean",
+      "required": true,
+      "default": true,
+      "title": "Render as Narrative on mobile?",
+      "inputType": "Checkbox",
+      "validators": [],
+      "help": "If disabled, the Hotgraphic will render a scaled down 'desktop' version (pins over image / tiles) of the component in 'mobile' view instead of being replaced by a Narrative interaction."
+    },
     "_useNumberedPins": {
       "type": "boolean",
       "required": true,