diff --git a/_includes/foot.html b/_includes/foot.html
index 6bc1a64..06841cd 100644
--- a/_includes/foot.html
+++ b/_includes/foot.html
@@ -1,3 +1,3 @@
 <footer class="foot">
     <p>&copy; Copyright Simon Holywell 2015</p>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/_includes/head.html b/_includes/head.html
index e69de29..f25db9f 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -0,0 +1,8 @@
+<nav id="page-nav">
+    <a href="#" id="to-top" class="toplink">↑</a>
+</nav>
+<header class="top">
+    <div class="wrap">
+        <h1>SQL Style Guide</h1>
+    </div>
+</header>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 9283663..090bc94 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -10,10 +10,11 @@
     </head>
     <body>
         {% include head.html %}
-        <div id="content">
+        <div id="content" class="wrap">
             {{ content }}
         </div>
         {% include foot.html %}
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
         <script src="scripts.js"></script>
     </body>
 </html>
diff --git a/scripts.js b/scripts.js
index 0a01432..cddb95a 100644
--- a/scripts.js
+++ b/scripts.js
@@ -6,4 +6,26 @@ layout: nil
 hljs.initHighlightingOnLoad();
 
 {% include anchor.min.js %}
-anchors.add('h2,h3,h4,h5,h6');
\ No newline at end of file
+anchors.add('h2,h3,h4,h5,h6');
+
+/*
+ * ScrollTo code
+ */
+$(document).ready(function(){
+    $('a[href^="#"]').on('click',function (e) {
+        e.preventDefault();
+
+        var target = this.hash;
+        var dest = 0;
+        if(target) {
+            var $target = $(target);
+            dest = $target.offset().top;
+        }
+
+        $('html, body').stop().animate({
+            'scrollTop': dest
+        }, 900, 'swing', function () {
+            window.location.hash = target;
+        });
+    });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index 4ba8ba3..a92542b 100644
--- a/style.css
+++ b/style.css
@@ -2,6 +2,8 @@
 layout: nil
 ---
 
+{% assign primary_colour = '#DE1B1B' %}
+
 /*
 
 Begin styles from codeguide.co by @mdo
@@ -29,22 +31,28 @@ End styles from codeguide.co by @mdo
 
 */
 
+/*
+ * Page navigation
+ */
 
-
-
-#content {
-	padding: 2% 10%;
-    max-width: 48em;
-    margin: 0 auto;
+#page-nav {
+    bottom: 0.5em;
+    right: 0.5em;
+    position: fixed;
+    text-align: center;
+    font-weight: bold;
 }
 
+/*
+ * Typography
+ */
 h1 {
     font-family: 'Roboto Slab', serif;
     font-weight: 400;
 }
 
 h2 {
-	font-family: 'Roboto Slab', sans-serif;
+	font-family: 'Roboto Slab', serif;
 	font-weight: 400;
 	border-bottom: 0.25em solid #e2e2e2;
 	padding-bottom: 0.3em;
@@ -55,10 +63,46 @@ h3:before {
 	width: 1.5em;
 	display: inline-block;
 	margin-left: -1.5em;
-	color: #f46801;
+	color: #DE1B1B;
 	font-weight: normal;
 }
 
+a {
+    color: #333;
+    border-bottom: 1px solid {{ primary_colour }};
+    text-decoration: none;
+    -o-transition:.2s;
+    -ms-transition:.2s;
+    -moz-transition:.2s;
+    -webkit-transition:.2s;
+    transition:.3s;
+}
+
+a:hover {
+    color: {{ primary_colour }};
+    border-color: #333;
+}
+
+header.top {
+    background: {{ primary_colour }};
+}
+
+header.top h1 {
+    color: #fff;
+}
+
+.wrap {
+	padding: 2% 10%;
+    max-width: 48em;
+    margin: 0 auto;
+}
+
+#content h1 {
+    display: none;
+}
+
+
+
 /* Syntax highlighting */
 code {
     font-family: 'Droid Sans Mono', monospace;
@@ -73,5 +117,6 @@ pre code {
 {% include highlight.hybrid.css %}
 
 .anchorjs-link {
-    color: #f46801;
+    color: {{ primary_colour }};
+    border: none;
 }
\ No newline at end of file
