diff --git a/template.jst b/template.jst
index fac0ebd83..ce76983fb 100644
--- a/template.jst
+++ b/template.jst
@@ -6,9 +6,20 @@
 <link rel="icon" href="src/General/img/icon.gif">
 <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/ohnjgmpcibpbafdlkimncjhflgedgpam">
 </head><body>
+<div id="header">
+<h1 id="4chan-x">4chan X</h1>
+<div id="links">
+<a href="https://github.com/ccd0/4chan-x">Source Code</a>
+<a href="https://github.com/ccd0/4chan-x/blob/master/CHANGELOG.md">Changelog</a>
+<a href="https://github.com/ccd0/4chan-x/wiki/Frequently-Asked-Questions">FAQ</a>
+<a href="https://github.com/ccd0/4chan-x/issues">Report Bugs</a>
+</div>
+</div>
+<a href="img/screenshot.png"><img class="screenshot" src="img/screenshot.png" alt="screenshot"></a>
+<span class="hover"><img src="img/screenshot.png" alt="preview"></span>
 <%=
   content
-    .replace('</h1>', '</h1><a href="img/screenshot.png"><img class="screenshot" src="img/screenshot.png" alt="screenshot"></a>')
+    .match(/<\/h1>([^]*)<h2 id="more-information"/)[1]
     .replace(/(<a href="([^"]+\.png)">.*?<\/a>)/g, '$1<span class="hover"><img src="$2" alt="preview"></span>')
 %>
 <script>
diff --git a/web.css b/web.css
index 06851befd..b29c0320a 100644
--- a/web.css
+++ b/web.css
@@ -2,9 +2,31 @@ body {
   font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
   margin: 1em;
 }
-h1 {
-  text-align: center;
+#header {
   background-color: #eee;
+  margin-bottom: 1em;
+  text-align: center;
+}
+h1 {
+  margin: 0;
+}
+#links {
+  background-color: #e0e0e0;
+  display: table;
+  width: 100%;
+  height: 1.5em;
+}
+#links > a {
+  display: table-cell;
+  vertical-align: middle;
+  width: 25%;
+  color: #000;
+  text-decoration: none;
+}
+#links > a:hover,
+#links > a:focus {
+  background-color: #CCC;
+  font-weight: bold;
 }
 img.screenshot {
   display: block;
