diff --git a/Main.html b/Main.html
index a313e65..e9bd0fd 100644
--- a/Main.html
+++ b/Main.html
@@ -5,15 +5,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" media="screen">
   <link rel="stylesheet" href="bower_components/jqrangeslider/css/iThing.css" type="text/css" />
-  <script src="bower_components/jqrangeslider/jQDateRangeSlider-min.js"></script>
-  <script src="bower_components/papaparse/papaparse.min.js"></script>
   <script src="bower_components/jquery/dist/jquery.js"></script>
   <script src="bower_components/jquery-ui/jquery-ui.js"></script>
+  <script src="bower_components/jqrangeslider/jQDateRangeSlider-min.js"></script>
+  <script src="bower_components/papaparse/papaparse.min.js"></script>
+
 
   <style>
     #map-canvas {
       height: 85%;
-      width: 100%;
+      /*width: 100%;*/
       margin-left: 0px;
       margin-right: 0px;
     }
@@ -51,12 +52,13 @@ <h5 id="sliderHeading"></h5>
   </div>
 
   <!-- Map Area -->
-  <div id="map-canvas" class="row"> <!--class="col-xs-8"-->
-    <div class="col-xs-1"><p>hi</p></div>
-    <div class="col-xs-8">
+  <div id="map-canvas" class="col-xs-10">
       <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7kbzCC9vv9yxONLqYlravPF2tBW-HTuE&callback=initMap" async defer></script>
+  </div>
+    <div id="legend-box" class="col-xs-2">
+      <h5 id="legend-heading"></h5>
+      <p id="legend-content"></p>
     </div>
-    <div class="col-xs-1"><p>hi</p></div>
   </div>
 </body>