diff --git a/clientapp/template.html b/clientapp/template.html
new file mode 100644
index 0000000..c319eb9
--- /dev/null
+++ b/clientapp/template.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="#{cssFileName}" />
+    <script src="#{jsFileName}"></script>
+  </head>
+  <body>
+    <p>Connecting</p>
+  </body>
+</html>
diff --git a/clientapp/templates.js b/clientapp/templates.js
index 0b56865..545e427 100644
--- a/clientapp/templates.js
+++ b/clientapp/templates.js
@@ -12,7 +12,7 @@ exports.pages = {};
 exports.body = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<body><div class="wrap"><div id="reconnect"></div><header id="me"><img class="avatar"/><p class="status"></p></header><nav class="main"><li><a href="/logout">Logout</a></li><li><a href="/">Home</a></li></nav><nav id="contactList"></nav><section id="pages"></section><footer></footer></div></body>');
+        buf.push('<body><div class="wrap"><aside id="connectionStatus"><button class="reconnect">Reconnect</button><span class="message">disconnected</span></aside><div id="connectionOverlay"></div><header id="me"><img class="avatar"/><p class="status"></p></header><nav class="main"><li><a href="/logout">Logout</a></li><li><a href="/">Home</a></li></nav><nav id="contactList"></nav><section id="pages"></section><footer></footer></div></body>');
     }
     return buf.join("");
 };
@@ -71,7 +71,7 @@ exports.pages.chat = function anonymous(locals) {
 exports.pages.main = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page main"></section>');
+        buf.push('<section class="page main"><p>This space intentionally left blank.</p></section>');
     }
     return buf.join("");
 };
diff --git a/clientapp/templates/body.jade b/clientapp/templates/body.jade
index e778788..397c9a5 100644
--- a/clientapp/templates/body.jade
+++ b/clientapp/templates/body.jade
@@ -1,6 +1,9 @@
 body
     .wrap
-        #reconnect
+        aside#connectionStatus
+            button.reconnect Reconnect
+            span.message disconnected
+        #connectionOverlay
         header#me
             img.avatar
             p.status
diff --git a/clientapp/templates/pages/main.jade b/clientapp/templates/pages/main.jade
index baedc97..40c0f50 100644
--- a/clientapp/templates/pages/main.jade
+++ b/clientapp/templates/pages/main.jade
@@ -1 +1,2 @@
 section.page.main
+    p This space intentionally left blank.
diff --git a/clientapp/views/main.js b/clientapp/views/main.js
index 9c33516..c768275 100644
--- a/clientapp/views/main.js
+++ b/clientapp/views/main.js
@@ -12,7 +12,7 @@ module.exports = HumanView.extend({
         'click a[href]': 'handleLinkClick'
     },
     classBindings: {
-        connected: '#reconnect'
+        connected: '#connectionOverlay'
     },
     render: function () {
         $('head').append(templates.head());
diff --git a/public/style.css b/public/style.css
index fde5521..6c5c380 100644
--- a/public/style.css
+++ b/public/style.css
@@ -15,9 +15,8 @@ html, body {
     padding: 5px;
 }
 
-#reconnect {
+#connectionOverlay {
     z-index: 5000;
-    position: absolute;
     left: 0px;
     top: 0px;
     height: 100%;
@@ -25,7 +24,7 @@ html, body {
     background-color: rgba(0, 0, 0, .5);
 }
 
-#reconnect.connected {
+#connectionOverlay {
     display: none;
 }
 
@@ -195,7 +194,7 @@ nav.main a {
     overflow-x: hidden;
     position: relative;
     margin-top: 50px;
-    padding-top: 50px;
+    padding-top: 30px;
     bottom: 50px;
 }
 
diff --git a/server.js b/server.js
index c3d74b5..71efbb6 100644
--- a/server.js
+++ b/server.js
@@ -19,6 +19,7 @@ app.use(helmet.contentTypeOptions());
 
 var clientApp = new Moonboots({
     main: __dirname + '/clientapp/app.js',
+    templateFile: __dirname + '/clientapp/template.html',
     developmentMode: config.isDev,
     libraries: [
         __dirname + '/clientapp/libraries/zepto.js',
