diff --git a/apps/map/templates/map/index.html b/apps/map/templates/map/index.html
index 498d647..f57edbb 100644
--- a/apps/map/templates/map/index.html
+++ b/apps/map/templates/map/index.html
@@ -5,116 +5,159 @@
 {% load static %}
 
 {% block stylesheets %}
-	{{ block.super }}
-  {% leaflet_css %}
-  <style>
-  html, body, #main {
-    width: 100;	height:100%;
-  }
-  .leaflet-popup-content > a{
-    color: #fff;
-  }
-  </style>
-{% endblock %}
+{{ block.super }}
+{% leaflet_css %}
+<style>
+html, body, #main {
+  width: 100;
+  height: 100%;
+}
 
+.leaflet-popup-content > a {
+  color: #fff;
+}
+
+.popup-head h5 {
+  margin-bottom: 0;
+}
+
+.popup-head p {
+  margin-top: 0;
+}
+
+.popup-labels {
+  margin: 10px auto 15px;
+}
+
+.popup-labels .label {
+  font-size: 100%;
+}
+</style>
+{% endblock %}
 
 {% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}
 
-
 {% block inner_content %}
   <div id="main"></div>
-	<div id="modals"></div>
+  <div id="modals"></div>
 {% endblock %}
 
-
 {% block scripts %}
-  {% leaflet_map "main" callback="main_app_init" creatediv=False %}
-  {% leaflet_js %}
-  <script type="text/javascript" src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
-  <script type="text/javascript">
+{% leaflet_map "main" callback="main_app_init" creatediv=False %}
+{% leaflet_js %}
+<script type="text/javascript" src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
+<script>
 
-  	// This takes HTML as a string and returns an element
-  	function create(htmlStr) {
-  		    var frag = document.createDocumentFragment(),
-  			        temp = document.createElement('div');
-  		    temp.innerHTML = htmlStr;
-  		    while (temp.firstChild) {
-  					        frag.appendChild(temp.firstChild);
-  					    }
-  		    return frag;
-  	}
+function getLabelClass(pos_or_neg) {
+  if (pos_or_neg == "N") {
+    return "danger";
+  } else {
+    return "success";
+  }
+}
 
-    // This is called when the map is initialized
-  	function main_app_init(map, options) {
-        var hash = new L.hash(map);
-  		// Pull data as GeoJSON and add to map with a modal
-  		$.getJSON('/api/case-studies/', function (data) {
-  			L.geoJson(data, {
-					onEachFeature: function (feature, layer) {
-  					var modalname = "case-study-"+feature.id
-  				  layer.bindPopup(
-							"<p>"+feature.properties.entry_name+"</p>"+
-							"<a class='btn btn-primary' href='case-study/"+feature.properties.slug+"' role='button'>"
-						    +"{% trans "View" %}"+"</a>"
-						);
-						var modal = create(
-							"<div class='modal fade' id='"+modalname+"' tabindex='-1' role='dialog' aria-labelledby='"+modalname+"-label'>"+
-							  "<div class='modal-dialog' role='document'>"+
-							    "<div class='modal-content'>"+
-							      "<div class='modal-header'>"+
-							        "<button type='button' class='close' data-dismiss='modal' aria-label='{% trans "Close" %}'>"+
-							          "<span aria-hidden='true'>&times;</span>"+
-							        "</button>"+
-							        "<h4 class='modal-title' id='"+modalname+"-label'>"+
-							          feature.properties.project_name+
-							        "</h4>"+
-							      "</div>"+
-							      "<div class='modal-body'>"+
-							        "<p>"+feature.properties.description+"</p>"+
-											"<dl class='dl-horizontal'>"+
-												"<dt>Supply Chain</dt><dd>"+feature.properties.supply_chain+"</dd>"+
-												"<dt>Generation Type</dt><dd>"+feature.properties.generation_type+"</dd>"+
-												"<dt>Associated Companies</dt><dd>"+feature.properties.associated_companies+"</dd>"+
-												"<dt>Financiers</dt><dd>"+feature.properties.financiers+"</dd>"+
-												"<dt>Important Lenders</dt><dd>"+feature.properties.important_lenders+"</dd>"+
-												"<dt>Country</dt><dd>"+feature.properties.country+"</dd>"+
-												"<dt>Affects Indigenous</dt><dd>"+feature.properties.affects_indigenous+"</dd>"+
-												"<dt>Affects Indigenous Reason</dt><dd>"+feature.properties.affects_indigenous_reason+"</dd>"+
-												"<dt>Proposed Start</dt><dd>"+feature.properties.proposed_start+"</dd>"+
-												"<dt>Proposed Completion</dt><dd>"+feature.properties.proposed_completion+"</dd>"+
-												"<dt>Link to Forum</dt><dd>"+feature.properties.link_to_forum+"</dd>"+
-												"<dt>Image</dt><dd>"+feature.properties.image+"</dd>"+
-												"<dt>References</dt><dd>"+feature.properties.references+"</dd>"+
-												"<dt>Commodities</dt><dd>"+feature.properties.commodities+"</dd>"+
-												"<dt>Like to Engage Developer</dt><dd>"+feature.properties.like_to_engage_developer+"</dd>"+
-												"<dt>Like to Engage Investors</dt><dd"+feature.properties.like_to_engage_investors+"></dd>"+
-												"<dt>Author</dt><dd>"+feature.properties.author+"</dd>"+
-							 				"</dl>"+
-							      "</div>"+
-							      "<div class='modal-footer'>"+
-							        "<button type='button' class='btn btn-default' data-dismiss='modal'>"+
-							          "{% trans "Close" %}"+
-							        "</button>"+
-							        "<button type='button' class='btn btn-primary'>"+
-							          "{% trans "Save changes" %}"+
-							        "</button>"+
-							      "</div>"+
-						      "</div>"+
-							  "</div>"+
-						  "</div>"
-						);
-  					document.getElementById('modals').appendChild(modal);
-  			  }
-  			}).addTo(map);
-  		});
+function popup(feature, layer) {
+  layer.bindPopup(
+    "<img src='"+feature.properties.image+"' width='100%'>"+
+    "<div class='popup-head'>"+
+      "<h5>"+feature.properties.entry_name+"</h5>" +
+      "<i>"+feature.properties.country_name+"</i>"+
+    "</div>"+
+    "<div class='popup-labels'>"+
+      "<span class='label label-default'>"+feature.properties.sector_of_economy+"</span> "+
+      "<span class='label label-"+getLabelClass(feature.properties.positive_or_negative)+"'>"+ feature.properties.positive_or_negative_display+"</span>"+
+    "</div>"+
+    "<a class='btn btn-sm btn-primary' href='case-study/"+feature.properties.slug+"'>{% trans "View full case study" %}</a>"
+  );
+};
 
-  		<!--// Add an on-click listener for map click events. Show popup with button to submit a casestudy-->
-  		<!--map.on('click', function(e) {-->
-  		  <!--var popup = L.popup()-->
-  			  <!--.setLatLng(e.latlng)-->
-					<!--.setContent("<a class='btn btn-primary btn-sm' href='{% url 'create' %}?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")-->
-  			  <!--.openOn(map);-->
-  		<!--});-->
-  	}
-  </script>
+// This is called when the map is initialized
+function main_app_init(map, options) {
+  var hash = new L.hash(map);
+
+  // Pull data as GeoJSON and add to map with a modal
+  $.getJSON('/api/case-studies/', function(data) {
+    L.geoJson(data, {
+      onEachFeature: popup
+    }).addTo(map)
+  });
+}
+
+</script>
 {% endblock %}
+
+<script type="text/comment">
+
+// removed from <script> section above
+// This takes HTML as a string and returns an element
+function create(htmlStr) {
+  var frag = document.createDocumentFragment();
+  var temp = document.createElement('div');
+
+  temp.innerHTML = htmlStr;
+  while (temp.firstChild) {
+    frag.appendChild(temp.firstChild);
+  }
+
+  return frag;
+}
+
+var modalname = "case-study-" + feature.id
+
+var modal = create(
+  "<div class='modal fade' id='"+modalname+"' tabindex='-1' role='dialog' aria-labelledby='"+modalname+"-label'>"+
+    "<div class='modal-dialog' role='document'>"+
+      "<div class='modal-content'>"+
+        "<div class='modal-header'>"+
+          "<button type='button' class='close' data-dismiss='modal' aria-label='{% trans "Close" %}'>"+
+            "<span aria-hidden='true'>&times;</span>"+
+          "</button>"+
+          "<h4 class='modal-title' id='"+modalname+"-label'>"+
+            feature.properties.project_name+
+          "</h4>"+
+        "</div>"+
+        "<div class='modal-body'>"+
+          "<p>"+feature.properties.description+"</p>"+
+          "<dl class='dl-horizontal'>"+
+            "<dt>Supply Chain</dt><dd>"+feature.properties.supply_chain+"</dd>"+
+            "<dt>Generation Type</dt><dd>"+feature.properties.generation_type+"</dd>"+
+            "<dt>Associated Companies</dt><dd>"+feature.properties.associated_companies+"</dd>"+
+            "<dt>Financiers</dt><dd>"+feature.properties.financiers+"</dd>"+
+            "<dt>Important Lenders</dt><dd>"+feature.properties.important_lenders+"</dd>"+
+            "<dt>Country</dt><dd>"+feature.properties.country+"</dd>"+
+            "<dt>Affects Indigenous</dt><dd>"+feature.properties.affects_indigenous+"</dd>"+
+            "<dt>Affects Indigenous Reason</dt><dd>"+feature.properties.affects_indigenous_reason+"</dd>"+
+            "<dt>Proposed Start</dt><dd>"+feature.properties.proposed_start+"</dd>"+
+            "<dt>Proposed Completion</dt><dd>"+feature.properties.proposed_completion+"</dd>"+
+            "<dt>Link to Forum</dt><dd>"+feature.properties.link_to_forum+"</dd>"+
+            "<dt>Image</dt><dd>"+feature.properties.image+"</dd>"+
+            "<dt>References</dt><dd>"+feature.properties.references+"</dd>"+
+            "<dt>Commodities</dt><dd>"+feature.properties.commodities+"</dd>"+
+            "<dt>Like to Engage Developer</dt><dd>"+feature.properties.like_to_engage_developer+"</dd>"+
+            "<dt>Like to Engage Investors</dt><dd"+feature.properties.like_to_engage_investors+"></dd>"+
+            "<dt>Author</dt><dd>"+feature.properties.author+"</dd>"+
+          "</dl>"+
+        "</div>"+
+        "<div class='modal-footer'>"+
+          "<button type='button' class='btn btn-default' data-dismiss='modal'>"+
+            "{% trans "Close" %}"+
+          "</button>"+
+          "<button type='button' class='btn btn-primary'>"+
+            "{% trans "Save changes" %}"+
+          "</button>"+
+        "</div>"+
+      "</div>"+
+    "</div>"+
+  "</div>"
+);
+document.getElementById('modals').appendChild(modal);
+
+// Add an on-click listener for map click events. Show popup with button to submit a casestudy
+// map.on('click', function(e) {
+//   var popup = L.popup()
+//     .setLatLng(e.latlng)
+//     .setContent("<a class='btn btn-primary btn-sm' href='{% url 'create' %}?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")
+//     .openOn(map);
+// });
+
+</script>
\ No newline at end of file
diff --git a/ojusomap/urls.py b/ojusomap/urls.py
index 6bf7217..4abb649 100644
--- a/ojusomap/urls.py
+++ b/ojusomap/urls.py
@@ -34,10 +34,24 @@ class UserViewSet(viewsets.ModelViewSet):
 
 
 class CaseStudySerializer(gis_serializers.GeoFeatureModelSerializer):
+    sector_of_economy = serializers.CharField(source='get_sector_of_economy_display')
+    country_name = serializers.CharField(source='get_country_display')
+    positive_or_negative_display = serializers.CharField(source='get_positive_or_negative_display')
+
     class Meta:
         model = CaseStudy
         geo_field = "location"
-        fields = '__all__'
+        fields = (
+            'country',
+            'country_name',
+            'entry_name',
+            'image',
+            'location',
+            'positive_or_negative',
+            'positive_or_negative_display',
+            'sector_of_economy',
+            'slug'
+        )
 
 
 class CaseStudyViewSet(viewsets.ModelViewSet):