diff --git a/ttlib/constituencies.tt b/ttlib/constituencies.tt
new file mode 100644
index 0000000000..7ed494c4e2
--- /dev/null
+++ b/ttlib/constituencies.tt
@@ -0,0 +1,37 @@
+[% WRAPPER page.tt -%]
+[% prev_letter = '';
+   letters = [];
+   FOREACH c IN constits;
+     NEXT UNLESS c.candidates.size;
+     letter = c.name.substr(0, 1);
+     IF letter != prev_letter;
+       letters.push('<a href="#' _ letter _ '">' _ letter _ '</a>');
+       prev_letter = letter;
+     END;
+   END %]
+    <!-- Main jumbotron for a primary marketing message or call to action -->
+    <div class="jumbotron">
+      <div class="container">
+        <h1>Constituencies</h1>
+        <div class="row">
+          <div class="col-md-8">
+            <p>Jump to: [% letters.join(' | ') %]</p>
+<table class="table table-striped table-condensed table-bordered">
+[% prev_letter = '';
+   FOREACH c IN constits;
+     NEXT UNLESS c.candidates.size;
+     letter = c.name.substr(0, 1);
+     IF letter != prev_letter -%]
+<tr><th><a name="[% letter %]">[% letter %]</a></th></tr>
+[%   END -%]
+<tr><td><a href="/constituency/[% c.name %]">[% c.name %]</a></td></tr>
+[%   prev_letter = letter;
+   END -%]
+</table>
+          </div>
+          <div class="col-md-4">
+          </div>
+        </div>
+      </div>
+    </div>
+[% END -%]
\ No newline at end of file
diff --git a/ttlib/constituency.tt b/ttlib/constituency.tt
new file mode 100644
index 0000000000..9797242fbd
--- /dev/null
+++ b/ttlib/constituency.tt
@@ -0,0 +1,21 @@
+[% WRAPPER page.tt -%]
+    <!-- Main jumbotron for a primary marketing message or call to action -->
+    <div class="jumbotron">
+      <div class="container">
+        <h1>[% c.name %]</h1>
+        <div class="row">
+          <div class="col-md-8">
+<a class="twitter-timeline" href="https://twitter.com/TwittElection/lists/[% c.list_name %]" data-widget-id="464129893937082368" data-list-owner-screen-name="TwittElection" data-list-slug="[% c.list_name %]">Tweets from https://twitter.com/TwittElection/lists/[% c.list_name %]</a>
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+          </div>
+          <div class="col-md-4">
+            <ul>
+[% FOREACH cand IN c.candidates -%]
+              <li>[% cand.name %] ([% cand.party.name %])[% IF cand.twitter %]<br><a href="https://twitter.com/[% cand.twitter %]">@[% cand.twitter %]</a>[% END %]</li>
+[% END -%]
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+[% END -%]
\ No newline at end of file
diff --git a/ttlib/page.tt b/ttlib/page.tt
index 8896564bcd..7f10651652 100644
--- a/ttlib/page.tt
+++ b/ttlib/page.tt
@@ -51,25 +51,8 @@ body {
       </div>
     </div>
 
-    <!-- Main jumbotron for a primary marketing message or call to action -->
-    <div class="jumbotron">
-      <div class="container">
-        <h1>[% c.name %]</h1>
-        <div class="row">
-          <div class="col-md-8">
-<a class="twitter-timeline" href="https://twitter.com/TwittElection/lists/[% c.list_name %]" data-widget-id="464129893937082368" data-list-owner-screen-name="TwittElection" data-list-slug="[% c.list_name %]">Tweets from https://twitter.com/TwittElection/lists/[% c.list_name %]</a>
-<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-          </div>
-          <div class="col-md-4">
-            <ul>
-[% FOREACH cand IN c.candidates -%]
-              <li>[% cand.name %] ([% cand.party.name %])[% IF cand.twitter %]<br><a href="https://twitter.com/[% cand.twitter %]">@[% cand.twitter %]</a>[% END %]</li>
-[% END -%]
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
+[% content %]
+
     <div id="footer">
       <div class="container">
         <p class="muted">Made by <a href="https://twitter.com/davorg/">@davorg</a></p>