diff --git a/static/js/hotspots.js b/static/js/hotspots.js
index 5e929d27f3..66812a2a78 100644
--- a/static/js/hotspots.js
+++ b/static/js/hotspots.js
@@ -33,6 +33,10 @@ var HOTSPOT_LOCATIONS = {
     },
 };
 
+// popover illustration url(s)
+var WHALE = '/static/images/hotspots/whale.svg';
+
+
 exports.map_hotspots_to_DOM = function (hotspots, locations) {
     hotspots.forEach(function (hotspot) {
         hotspot.location = locations[hotspot.name];
@@ -216,6 +220,7 @@ function insert_hotspot_into_DOM(hotspot) {
         name: hotspot.name,
         title: hotspot.title,
         description: hotspot.description,
+        img: WHALE,
     });
 
     var hotspot_icon_HTML =
diff --git a/static/styles/hotspots.css b/static/styles/hotspots.css
index da3c24c100..3a52ff87d0 100644
--- a/static/styles/hotspots.css
+++ b/static/styles/hotspots.css
@@ -72,18 +72,26 @@
     color: white;
 }
 
-.hotspot.overlay .hotspot-popover-bottom {
+.hotspot.overlay .hotspot-popover-content {
     background-color: white;
     padding: 15px;
-    height: 130px;
+}
+
+.hotspot.overlay .hotspot-popover-bottom {
+    background-color: white;
+    height: 90px;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
 }
 
-.hotspot.overlay .hotspot-confirm {
+.hotspot.overlay .hotspot-img {
     position: absolute;
-    bottom: 18px;
-    right: 18px;
+    bottom: 10px;
+    left: 4px;
+    height: 83px;
+}
+
+.hotspot.overlay .hotspot-confirm {
     border: none;
     background-color: hsl(164, 44%, 47%);
     color: white;
@@ -92,6 +100,9 @@
     width: 70px;
     height: 28px;
     border-radius: 4px;
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
 }
 
 /* arrows */
diff --git a/static/templates/hotspot_overlay.handlebars b/static/templates/hotspot_overlay.handlebars
index c01706eefe..4393fb944e 100644
--- a/static/templates/hotspot_overlay.handlebars
+++ b/static/templates/hotspot_overlay.handlebars
@@ -3,9 +3,12 @@
         <div class="hotspot-popover-top">
             <h1 class="hotspot-title">{{title}}</h1>
         </div>
-        <div class="hotspot-popover-bottom">
+        <div class="hotspot-popover-content">
             <p class="hotspot-description">{{description}}</p>
         </div>
-        <button class="hotspot-confirm">{{t 'Got it!' }}</button>
+        <div class="hotspot-popover-bottom">
+            <img class="hotspot-img" alt=_("hotspot illustration") src="{{img}}"></img>
+            <button class="hotspot-confirm">{{t 'Got it!' }}</button>
+        </div>
     </div>
 </div>