diff --git a/apps/map/migrations/0003_auto_20170521_0643.py b/apps/map/migrations/0003_auto_20170521_0643.py
new file mode 100644
index 0000000..2e2d37a
--- /dev/null
+++ b/apps/map/migrations/0003_auto_20170521_0643.py
@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.7 on 2017-05-21 06:43
+from __future__ import unicode_literals
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('map', '0002_auto_20170520_0139'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='casestudy',
+            old_name='geom',
+            new_name='location',
+        ),
+    ]
diff --git a/apps/map/models.py b/apps/map/models.py
index 6106495..134d346 100644
--- a/apps/map/models.py
+++ b/apps/map/models.py
@@ -26,7 +26,7 @@ class CaseStudy(models.Model):
     )
 
     # Location of map pin
-    geom = models.PointField()
+    location = models.PointField()
 
     project_name = models.CharField(max_length=128)
     supply_chain = models.CharField(
diff --git a/apps/map/templates/map/index.html b/apps/map/templates/map/index.html
index 8e3899b..8c6072a 100644
--- a/apps/map/templates/map/index.html
+++ b/apps/map/templates/map/index.html
@@ -1,3 +1,4 @@
+{% load bootstrap3 %}
 {% load i18n %}
 {% load leaflet_tags %}
 <!DOCTYPE html>
@@ -5,22 +6,48 @@
 <head>
 	<meta charset="UTF-8">
 	<title>{% trans "Ojuso Platform Map" %}</title>
+	<meta name="viewport" content"width=device-width, initial-scale=2">
+	{% bootstrap_css %}
 	{% leaflet_js %}
-  {% leaflet_css %}
+	{% leaflet_css %}
+	<style>
+	  html, body, #main {
+		  width: 100%;
+			height:100%;
+		}
+	</style>
 </head>
 <body>
 	<h1>Ojuso Platform Map</h1>
-  {% leaflet_map "main" callback="main_app_init" %}
+	{% leaflet_map "main" callback="main_app_init" %}
+	<div id="modals"></div>
 	<script src="https://code.jquery.com/jquery-3.2.1.min.js"
 				  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 					crossorigin="anonymous">
 	</script>
+	{% bootstrap_javascript %}
 	<script type="text/javascript">
+		function create(htmlStr) {
+			    var frag = document.createDocumentFragment(),
+				        temp = document.createElement('div');
+			    temp.innerHTML = htmlStr;
+			    while (temp.firstChild) {
+						        frag.appendChild(temp.firstChild);
+						    }
+			    return frag;
+		}
   	function main_app_init(map, options) {
-			var dataurl = '{% url "data" %}';
-			// Download GeoJSON
-			$.getJSON(dataurl, function (data) {
-				L.geoJson(data).addTo(map);
+			$.getJSON('/api/case-studies/', function (data) {
+				L.geoJson(data, {
+					onEachFeature: function (feature, layer) {
+						var modalname = "case-study-"+feature.id
+					  layer.bindPopup(
+							"<h3>"+feature.properties.project_name+"</h3>"+"<button type='button' class='btn btn-primary btn-block' data-toggle='modal' data-target='#"+modalname+"'>"+"<span class='glyphicon glyphicon-file' aria-hidden='true'></span>"+"View Details"+"</button>"
+						);
+						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='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></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button><button type='button' class='btn btn-primary'>Save changes</button></div></div></div></div>");
+						document.getElementById('modals').appendChild(modal);
+				  }
+				}).addTo(map);
 			});
 		}
 	</script>		
diff --git a/apps/map/urls.py b/apps/map/urls.py
index 701f65b..920c96b 100644
--- a/apps/map/urls.py
+++ b/apps/map/urls.py
@@ -6,5 +6,7 @@ from . import views
 
 urlpatterns = [
     url(r'^$', views.index, name='index'),
-    url(r'^data.geojson$', GeoJSONLayerView.as_view(model=CaseStudy), name='data')
+    url(r'^data.geojson$',
+        GeoJSONLayerView.as_view(model=CaseStudy, geometry_field='location'),
+        name='data')
 ]
diff --git a/requirements.txt b/requirements.txt
index 3511cac..27b6662 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,10 +1,16 @@
 appdirs==1.4.3
-Django==1.11.1
+Django==1.10.7
+django-bootstrap3==8.2.3
+django-cas-server==0.8.0
 django-countries==4.5
 django-crispy-forms==1.6.1
+django-extensions==1.7.9
 django-geojson==2.10.0
 django-leaflet==0.22.0
+djangorestframework==3.6.3
+djangorestframework-gis==0.11.2
 gunicorn==19.7.1
+lxml==3.7.3
 olefile==0.44
 packaging==16.8
 Pillow==4.1.1
@@ -12,4 +18,6 @@ psycopg2==2.7.1
 pyparsing==2.2.0
 python-memcached==1.58
 pytz==2017.2
+requests==2.14.2
+requests-futures==0.9.7
 six==1.10.0
