diff --git a/pems/districts/templates/districts/district.html b/pems/districts/templates/districts/district.html
index 9c77165..0211a3e 100644
--- a/pems/districts/templates/districts/district.html
+++ b/pems/districts/templates/districts/district.html
@@ -1,2 +1,24 @@
-<h1>District {{ district }}</h1>
-<p>URL of route: {% url "districts:district" district %}</p>
+{% extends "districts/index.html" %}
+
+{% block headline %}
+    District {{ current_district.number }} - {{ current_district.name }}
+{% endblock headline %}
+
+{% block districts-content %}
+    <div class="row">
+        <div class="col-lg-4 border">
+            <h2>Form</h2>
+        </div>
+        <div class="col-lg-8 border">
+            <h2>Chart</h2>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-4 border">
+            <h2>Details for {{ current_district.name }}</h2>
+        </div>
+        <div class="col-lg-8 border">
+            <h2>Map</h2>
+        </div>
+    </div>
+{% endblock districts-content %}
diff --git a/pems/districts/templates/districts/index.html b/pems/districts/templates/districts/index.html
index b199e5a..72b4ecf 100644
--- a/pems/districts/templates/districts/index.html
+++ b/pems/districts/templates/districts/index.html
@@ -1,7 +1,46 @@
 {% extends "core/base.html" %}
+
 {% block headline %}
     Districts
 {% endblock headline %}
+
 {% block inner-content %}
-    <p>Districts</p>
+    <div class="container p-t-lg">
+        <div class="row">
+            <div class="col-lg-2 pb-lg-5" role="complementary">
+                <!-- Side navigation -->
+                <nav aria-labelledby="navigation-list" class="side-navigation">
+                    <ul class="list-navigation">
+                        {% for district in districts.all %}
+                            <li>
+                                <a href="{% url 'districts:district' district.number %}">District {{ district.number }}</a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </nav>
+            </div>
+            <div class="col-lg-10 pb-lg-5">
+
+                {% block districts-content %}
+                    <div class="row">
+                        <div class="col-lg-4 border">
+                            <h2>Form</h2>
+                        </div>
+                        <div class="col-lg-8 border">
+                            <h2>Chart</h2>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-4 border">
+                            <h2>Details</h2>
+                        </div>
+                        <div class="col-lg-8 border">
+                            <h2>Map</h2>
+                        </div>
+                    </div>
+                {% endblock districts-content %}
+
+            </div>
+        </div>
+    </div>
 {% endblock inner-content %}
diff --git a/pems/districts/urls.py b/pems/districts/urls.py
index acdacda..a56d963 100644
--- a/pems/districts/urls.py
+++ b/pems/districts/urls.py
@@ -10,5 +10,5 @@
 urlpatterns = [
     # /districts
     path("", views.IndexView.as_view(), name="index"),
-    path("<int:district>", views.DistrictView.as_view(), name="district"),
+    path("<int:district_number>", views.DistrictView.as_view(), name="district"),
 ]
diff --git a/pems/districts/views.py b/pems/districts/views.py
index 86fae4e..978c693 100644
--- a/pems/districts/views.py
+++ b/pems/districts/views.py
@@ -1,15 +1,26 @@
-from django.views.generic import TemplateView
+from django.views.generic import TemplateView, DetailView
 
-
-class IndexView(TemplateView):
-    template_name = "districts/index.html"
+from .models import District
 
 
-class DistrictView(TemplateView):
-    template_name = "districts/district.html"
+class DistrictContextMixin:
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
-        district = self.kwargs.get("district")
-        context["district"] = district
+        districts_ctx = {}
+        districts_ctx["all"] = District.objects.all()
+        context["districts"] = districts_ctx
         return context
+
+
+class IndexView(DistrictContextMixin, TemplateView):
+    template_name = "districts/index.html"
+
+
+class DistrictView(DistrictContextMixin, DetailView):
+    model = District
+    context_object_name = "current_district"
+    template_name = "districts/district.html"
+
+    def get_object(self):
+        return District.objects.get(number__iexact=self.kwargs["district_number"])
diff --git a/tests/pytest/pems/districts/test_views.py b/tests/pytest/pems/districts/test_views.py
index d5451f1..5776e00 100644
--- a/tests/pytest/pems/districts/test_views.py
+++ b/tests/pytest/pems/districts/test_views.py
@@ -1,21 +1,33 @@
 import pytest
 
+from django.urls import reverse
 from pems.districts import views
+from pems.districts.models import District
 
 
-class TestDistrictView:
+class TestIndexView:
     @pytest.fixture
     def view(app_request):
-        v = views.DistrictView()
-        v.setup(app_request, district=1)
+        v = views.IndexView()
+        v.setup(app_request)
 
         return v
 
+    @pytest.mark.django_db
     def test_get_context_data(self, view):
 
         context = view.get_context_data()
 
-        assert context["district"] == 1
+        assert set(context.get("districts").get("all")) == set(District.objects.all())
 
     def test_template_name(self, view):
-        assert view.template_name == "districts/district.html"
+        assert view.template_name == "districts/index.html"
+
+
+@pytest.mark.django_db
+def test_district_view(client, model_District):
+    url = reverse("districts:district", kwargs={"district_number": model_District.number})
+    response = client.get(url)
+
+    assert response.status_code == 200
+    assert response.context["current_district"] == model_District