diff --git a/asterix-examples/src/main/resources/black-cherry/cherry.tpl b/asterix-examples/src/main/resources/black-cherry/cherry.tpl
index 02016a5..7989dae 100755
--- a/asterix-examples/src/main/resources/black-cherry/cherry.tpl
+++ b/asterix-examples/src/main/resources/black-cherry/cherry.tpl
@@ -10,6 +10,16 @@
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
     
+    <!-- Bootstrap Javascript -->
+    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
+    
+    <script src="http://code.jquery.com/jquery.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
+    <script src="static/js/bootstrap.min.js"></script>
+    <script src="static/js/asterix-sdk-stable.js"></script>
+    <script src="static/js/rainbowvis.js"></script>
+    <script src="static/js/cherry.js"></script>
+    
     <style type="text/css">
         
         #map_canvas img {
@@ -33,7 +43,6 @@
         #keyword-textbox, #location-text-box {
             width: 100%;
         }
-
     </style>
   </head>
   <body style="width: 100%; height: 100%;">
@@ -163,21 +172,28 @@
           <div id="report-message"></div>
         </div>
         
-        <div class="col-md-7">
+        <div class="col-md-7"
           <!-- Map Container -->
           <div class="container well" id="right-col">
             <div id="map_canvas" style="max-width: 100%; height: auto;"></div>
           </div>
           
           <!-- Legend Container -->
-          <div id="rainbow-legend-container" class="container well">
-            <div id="legend-min" class="col-md-1"></div>
-            <div id="legend-gradient" class="col-md-6"></div>
-            <div id="legend-max" class="col-md-2"></div>
-            <div class="col-md-3">
-              <button id="windows-off-btn" class="btn btn-default">
-                Close Counts
-              </button>
+          <div id="rainbow-legend-container" class="container well" style="display:none;">
+          
+            <div class="row">
+              <div class="col-md-5 col-md-offset-2" style="text-align: center;"># Tweets</div>
+            </div>
+            
+            <div class="row">
+              <div id="legend-min" class="col-md-2" style="text-align:right;"></div>
+              <div id="legend-gradient" class="col-md-5" style="text-align: center;"></div>
+              <div id="legend-max" class="col-md-2"></div>
+              <div class="col-md-3">
+                <button id="windows-off-btn" class="btn btn-default">
+                  Close Counts
+                </button>
+              </div>
             </div>
           </div>
           
@@ -272,7 +288,7 @@
             
             <!-- Tutorial Part 3: Search Results, Drilling Down, Saving Comments -->
             <div style="margin-bottom: 2em; text-align: center;">
-              <!--<img src="static/img/Tutorial3.png" style="max-width:100%;">-->
+              <img src="static/img/Tutorial3.png" style="max-width:100%;">
             </div><hr/>
             
             <!-- Tutorial Part 4: Review Mode -->
@@ -286,14 +302,5 @@
       </div><!-- /About -->
 
     </div><!-- container --> 
-    
-    <!-- Bootstrap Javascript -->
-    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>    
-    <script src="http://code.jquery.com/jquery.min.js"></script>
-    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
-    <script src="static/js/bootstrap.min.js"></script>
-    <script src="static/js/asterix-sdk-stable.js"></script>
-    <script src="static/js/rainbowvis.js"></script>
-    <script src="static/js/cherry.js"></script>     
   </body>
 </html>
diff --git a/asterix-examples/src/main/resources/black-cherry/static/img/Tutorial3.png b/asterix-examples/src/main/resources/black-cherry/static/img/Tutorial3.png
new file mode 100644
index 0000000..4a207af
--- /dev/null
+++ b/asterix-examples/src/main/resources/black-cherry/static/img/Tutorial3.png
Binary files differ
diff --git a/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js b/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js
index 84fc8c9..81de2c2 100755
--- a/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js
+++ b/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js
@@ -531,6 +531,7 @@
     var coordinates = [];
     var weights = [];
     var maxWeight = 0;
+    var minWeight = Number.MAX_VALUE;
     
     // Parse resulting JSON objects. Here is an example record:
     // { "cell": { rectangle: [{ point: [22.5, 64.5]}, { point: [24.5, 66.5]}]}, "count": { int64: 5 }}
@@ -552,10 +553,11 @@
         }
         
         maxWeight = Math.max(coordinate["weight"], maxWeight);
+        minWeight = Math.min(coordinate["weight"], minWeight);
         coordinates.push(coordinate);
     });
     
-    triggerUIUpdate(coordinates, maxWeight);
+    triggerUIUpdate(coordinates, maxWeight, minWeight);
 }
 
 /**
@@ -563,7 +565,7 @@
 * @param    [Array]     mapPlotData, an array of coordinate and weight objects
 * @param    [Array]     plotWeights, a list of weights of the spatial cells - e.g., number of tweets
 */
-function triggerUIUpdate(mapPlotData, maxWeight) {
+function triggerUIUpdate(mapPlotData, maxWeight, minWeight) {
     /** Clear anything currently on the map **/
     mapWidgetClearMap();
     
@@ -610,7 +612,12 @@
         });
             
         // Add this marker to global marker cells
-        map_cells.push(map_circle);   
+        map_cells.push(map_circle);
+        
+        // Show legend
+        $("#legend-min").html(minWeight);
+        $("#legend-max").html(maxWeight);
+        $("#rainbow-legend-container").show();   
     });
 }
 
@@ -1142,6 +1149,8 @@
     }
     map_tweet_markers = [];
     
+    $("#rainbow-legend-container").hide();
+    
     $("#submit-button").attr("disabled", false);
 }
 
@@ -1157,8 +1166,9 @@
     // Fill in legend area with colors
     var gradientColor;
     
-    for (i = 0; i=100; i++) {
-        $("#rainbow-legend-container").append("" + rainbow.colourAt(i));
+    for (i = 0; i<100; i++) {
+        //$("#rainbow-legend-container").append("" + rainbow.colourAt(i));
+        $("#legend-gradient").append('<div style="display:inline-block; max-width:2px; background-color:#' + rainbow.colourAt(i) +';">&nbsp;</div>');
     }
     
     // Window clear button closes all info count windows