diff --git a/.gitignore b/.gitignore
index aca6ef03d..0a21cad9f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -63,3 +63,5 @@ app/assets/stylesheets/govuk_template/.sass-cache/
 .sass-cache/
 cache/
 app/static/*
+app/static/stylesheets/*.css
+
diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index 50c9ec702..4258962a1 100644
--- a/app/assets/stylesheets/app.scss
+++ b/app/assets/stylesheets/app.scss
@@ -44,4 +44,16 @@
 
 #global-header #logo {
       white-space: nowrap;
+}
+
+
+.column-three-quarters {
+  @include grid-column(3/4);
+}
+
+
+
+
+a:visited {
+    color: #005ea5;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss
new file mode 100644
index 000000000..f11e2c541
--- /dev/null
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -0,0 +1,23 @@
+#navigation {
+  padding: 50px 0 0 0;
+}
+
+#navigation li {
+  @include core-16();
+  margin: 3px 0;
+}
+
+#navigation ul {
+  border-bottom: 1px solid #777;
+  margin: 0 20px 0 0;
+  list-style-type: none;
+  padding: 0;
+}
+
+#navigation a:link,a:visited {
+  text-decoration: none;
+}
+
+#navigation a:hover {
+    color: #2e8aca;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index e0591db04..e2b93d0c5 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -33,6 +33,7 @@
 @import "components/sms-message";
 @import "components/submit-form";
 @import "components/table";
+@import "components/navigation";
 
 // TODO: break this up
 @import "app";
diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html
new file mode 100644
index 000000000..105ada791
--- /dev/null
+++ b/app/templates/main_nav.html
@@ -0,0 +1,21 @@
+{% macro main_nav() %}
+
+<div id="navigation">
+<h3><a href="{{ url_for('.dashboard') }}">Service name</a></h3>
+<ul>
+	<li><a href="{{ url_for('.sendsms') }}">Send text messages</a></li>
+	<li><a href="{{ url_for('.sendemail') }}">Send emails</a></li>
+	<li><a href="{{ url_for('.showjobs') }}">Activity</a></li>
+</ul>
+<ul>
+	<li><a href="{{ url_for('.apikeys') }}">API keys and documentation</a></li>
+</ul>
+<ul>
+	<li><a href="{{ url_for('.manageusers') }}">Manage users</a></li>
+	<li><a href="{{ url_for('.servicesettings') }}">Service settings</a></li>
+</ul>
+<ul>
+	<li><a href="/user-profile">Your details</a></li>
+</ul>
+</div>
+{% endmacro %}
\ No newline at end of file
diff --git a/app/templates/views/api-keys.html b/app/templates/views/api-keys.html
index 557a0c0f0..dd1c7678d 100644
--- a/app/templates/views/api-keys.html
+++ b/app/templates/views/api-keys.html
@@ -1,20 +1,17 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block page_title %}
 GOV.UK Notify | API keys and documentation
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">API keys and documentation</h1>
 
 		<p>Here's where developers can access information about the API and access keys</p>
 
   	<p><a href="dashboard">Back to dashboard</a></p>
 
-	</div>
-</div>
+
 
 {% endblock %}
diff --git a/app/templates/views/check-email.html b/app/templates/views/check-email.html
index 6f6bd51af..487f5de73 100644
--- a/app/templates/views/check-email.html
+++ b/app/templates/views/check-email.html
@@ -1,13 +1,11 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block page_title %}
 GOV.UK Notify | Send email
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">Send email</h1>
 
 		<p>This page will be where we check the email messages we're about to send</p>
@@ -15,7 +13,6 @@ GOV.UK Notify | Send email
   	<p>
   	<a class="button" href="dashboard" role="button">Send email messages</a>
   	</p>
-	</div>
-</div>
+
 
 {% endblock %}
diff --git a/app/templates/views/check-sms.html b/app/templates/views/check-sms.html
index 13084123a..104d1d075 100644
--- a/app/templates/views/check-sms.html
+++ b/app/templates/views/check-sms.html
@@ -1,4 +1,4 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/sms-message.html" import sms_message %}
 {% from "components/table.html" import table, field %}
 {% from "components/placeholder.html" import placeholder %}
@@ -8,10 +8,9 @@
 	GOV.UK Notify | Send text messages
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
+
 
-	<div class="grid-row">
-		<div class="column-two-thirds">
 			<h1 class="heading-xlarge">Send text messages</h1>
 
 			<h2 class="heading-medium">Check and confirm</h2>
@@ -61,7 +60,6 @@
 				url_for(".sendsms")
 			) }}
 
-		</div>
-	</div>
+
 
 {% endblock %}
diff --git a/app/templates/views/dashboard.html b/app/templates/views/dashboard.html
index a8d5e6e31..3e294bb47 100644
--- a/app/templates/views/dashboard.html
+++ b/app/templates/views/dashboard.html
@@ -1,26 +1,15 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
+
 
 {% block page_title %}
 GOV.UK Notify | Dashboard
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">Dashboard</h1>
 
-		<ul>
-			<li><a href="{{ url_for('.sendsms') }}">Send text messages</a></li>
-			<li><a href="{{ url_for('.sendemail') }}">Send email messages</a></li>
-			<li><a href="{{ url_for('.showjobs') }}">View notifications activity</a></li>
-			<li><a href="{{ url_for('.userprofile') }}">User profile</a></li>
-			<li><a href="{{ url_for('.manageusers') }}">Manage users</a></li>
-			<li><a href="{{ url_for('.managetemplates')}}">Manage templates</a></li>
-			<li><a href="{{ url_for('.servicesettings') }}">Service settings</a></li>
-			<li><a href="{{ url_for('.apikeys') }}">API keys and documentation</a></li>
-  		</ul>
-	</div>
-</div>
+		<p>Dashboard goes here.</p>
+
 
 {% endblock %}
diff --git a/app/templates/views/edit-template.html b/app/templates/views/edit-template.html
index a6da98b25..ed29b8074 100644
--- a/app/templates/views/edit-template.html
+++ b/app/templates/views/edit-template.html
@@ -1,20 +1,18 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block page_title %}
 GOV.UK Notify | Edit template
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
+
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">Edit template</h1>
 
 		<p>Here's where you can edit an exiting template (including delete) or add a new one</p>
 
   	<p><a href="manage-templates">Back to manage templates</a></p>
 
-	</div>
-</div>
+
 
 {% endblock %}
diff --git a/app/templates/views/job.html b/app/templates/views/job.html
index ccaee802c..7457debbc 100644
--- a/app/templates/views/job.html
+++ b/app/templates/views/job.html
@@ -1,13 +1,11 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block page_title %}
 GOV.UK Notify | Notifications activity
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">Notifications for a specific job</h1>
 
 		<p>This page will be where we list the notifications for a specific job.</p>
@@ -16,7 +14,6 @@ GOV.UK Notify | Notifications activity
   		<li><a href="/jobs/job/notification">view a specific notification</a></li>
 		<li><a href="/jobs">view all the activity for this service</a></li>
   	</ul>
-	</div>
-</div>
+	
 
 {% endblock %}
diff --git a/app/templates/views/jobs.html b/app/templates/views/jobs.html
index b38f5da9f..79a9604d8 100644
--- a/app/templates/views/jobs.html
+++ b/app/templates/views/jobs.html
@@ -1,13 +1,11 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block page_title %}
 GOV.UK Notify | Notifications activity
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">Notifications activity</h1>
 
 		<p>This page will be where we show the list of jobs that this service has processed</p>
@@ -15,7 +13,6 @@ GOV.UK Notify | Notifications activity
   	<p>
   	<a href="jobs/job">view a particular notification job</a>
   	</p>
-	</div>
-</div>
+
 
 {% endblock %}
diff --git a/app/templates/views/manage-templates.html b/app/templates/views/manage-templates.html
index 08ed55c22..1554f3b09 100644
--- a/app/templates/views/manage-templates.html
+++ b/app/templates/views/manage-templates.html
@@ -1,13 +1,12 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block page_title %}
 GOV.UK Notify | Manage templates
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
+
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">Manage templates</h1>
 
 		<p>Here's where you can view templates, choose to add one, or edit/delete one.</p>
@@ -17,7 +16,6 @@ GOV.UK Notify | Manage templates
 		<p>
   		<a class="button" href="edit-template" role="button">Add a new message template</a>
   		</p>
-	</div>
-</div>
+
 
 {% endblock %}
diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html
index 8a93b2072..f60a6c53b 100644
--- a/app/templates/views/manage-users.html
+++ b/app/templates/views/manage-users.html
@@ -1,20 +1,17 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block page_title %}
 GOV.UK Notify | Manage users
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">Manage users</h1>
 
 		<p>Here's where you can add or remove users of a service.</p>
 
   	<p><a href="dashboard">Back to dashboard</a></p>
 
-	</div>
-</div>
+
 
 {% endblock %}
diff --git a/app/templates/views/notification.html b/app/templates/views/notification.html
index bf7faa9e6..99a6902db 100644
--- a/app/templates/views/notification.html
+++ b/app/templates/views/notification.html
@@ -1,13 +1,12 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block page_title %}
 GOV.UK Notify | Notifications activity
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
+
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">A specific notification</h1>
 
 		<p>This page will be where we show what happened for a specific notification.</p>
@@ -15,7 +14,6 @@ GOV.UK Notify | Notifications activity
   	<p>
   	<a href="/jobs/job">View other notifications in this job</a>
   	</p>
-	</div>
-</div>
+
 
 {% endblock %}
diff --git a/app/templates/views/send-email.html b/app/templates/views/send-email.html
index 9161af232..e5911ec4c 100644
--- a/app/templates/views/send-email.html
+++ b/app/templates/views/send-email.html
@@ -1,13 +1,12 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block page_title %}
 GOV.UK Notify | Send email
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
+
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">Send email</h1>
 
 		<p>This page will be where we construct email messages</p>
@@ -15,7 +14,6 @@ GOV.UK Notify | Send email
   	<p>
   	<a class="button" href="check-email" role="button">Continue</a>
   	</p>
-	</div>
-</div>
+
 
 {% endblock %}
diff --git a/app/templates/views/send-sms.html b/app/templates/views/send-sms.html
index 0915d7ab2..ce07dc69e 100644
--- a/app/templates/views/send-sms.html
+++ b/app/templates/views/send-sms.html
@@ -1,14 +1,12 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 {% from "components/sms-message.html" import sms_message %}
 
 {% block page_title %}
 	GOV.UK Notify | Send text messages
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
 	<form method="POST" enctype="multipart/form-data">
-		<div class="grid-row">
-			<div class="column-two-thirds">
 
 				<h1 class="heading-xlarge">Send text messages</h1>
 
@@ -46,8 +44,7 @@
 					<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 					<input type="submit" class="button" value="Continue" />
 		  	</p>
-			</div>
-		</div>
+
 	</form>
 
 {% endblock %}
diff --git a/app/templates/views/service-settings.html b/app/templates/views/service-settings.html
index 3e6c7bcb4..e53fb9efe 100644
--- a/app/templates/views/service-settings.html
+++ b/app/templates/views/service-settings.html
@@ -1,20 +1,17 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block page_title %}
 GOV.UK Notify | Service settings
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">Service settings</h1>
 
 		<p>Here's where users can update their service profile.</p>
 
   	<p><a href="dashboard">Back to dashboard</a></p>
 
-	</div>
-</div>
+
 
 {% endblock %}
diff --git a/app/templates/views/user-profile.html b/app/templates/views/user-profile.html
index a394b8bd8..12f322314 100644
--- a/app/templates/views/user-profile.html
+++ b/app/templates/views/user-profile.html
@@ -1,20 +1,16 @@
-{% extends "admin_template.html" %}
+{% extends "withnav_template.html" %}
 
 {% block page_title %}
 GOV.UK Notify | User settings
 {% endblock %}
 
-{% block content %}
+{% block maincolumn_content %}
 
-<div class="grid-row">
-	<div class="column-two-thirds">
 		<h1 class="heading-xlarge">User profile</h1>
 
 		<p>Here's where users can update their profile, password etc.</p>
 
   	<p><a href="dashboard">Back to dashboard</a></p>
 
-	</div>
-</div>
 
 {% endblock %}
diff --git a/app/templates/withnav_template.html b/app/templates/withnav_template.html
new file mode 100644
index 000000000..b0bd19960
--- /dev/null
+++ b/app/templates/withnav_template.html
@@ -0,0 +1,15 @@
+{% extends "admin_template.html" %}
+{% from "main_nav.html" import main_nav with context %}
+
+{% block content %}
+
+<div class="grid-row">
+	<div class="column-third">
+		{{ main_nav() }}
+	</div>
+	<div class="column-two-thirds">
+		{% block maincolumn_content %}{% endblock %}
+	</div>
+</div>
+
+{% endblock %}
\ No newline at end of file