diff --git a/app/changePassword.html b/app/changePassword.html
index e0a6503..3fc9ae6 100644
--- a/app/changePassword.html
+++ b/app/changePassword.html
@@ -6,6 +6,9 @@
     <link rel="shortcut icon" href="images/favicon.png" media="screen" />
     <script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script>
     <script type="text/javascript" src="lib/jstz-1.0.4.min.js"></script>
+    <script type="text/javascript" src="lib/handlebars-v1.3.0.min.js"></script>
+    <script type="text/javascript" src="js/app.js"></script>
+    <script type="text/javascript" src="js/templates.js"></script>
     <script type="text/javascript" src="js/helper.js"></script>
     <script type="text/javascript" src="js/request.js"></script>
     <script type="text/javascript" src="js/errorCallback.js"></script>
@@ -16,18 +19,6 @@
     <div id="outerContainer">
       <header></header>
       <div class="formDiv">
-        <h1 class="changePassword">Change Administrator Password</h1>
-        <h1 class="setPassword">Set Administrator Password</h1>
-        <form>
-          <div id="genericError" class="inputError"></div>
-          <input type="password" id="oldPassword" class="changePassword" placeholder="Old password"/><br>
-          <br>
-          <input type="password" id="newPassword" placeholder="New password"/><br>
-          <div id="newPasswordError" class="inputError"></div>
-          <input type="password" id="retypePassword" placeholder="Retype new password"/><br>
-          <div id="retypePasswordError" class="inputError"></div>
-          <input type="submit" value="Submit"></input>
-        </form>
       </div>
     </div>
   </body>
diff --git a/app/js/changePassword.js b/app/js/changePassword.js
index f0b8a2d..59a85b9 100644
--- a/app/js/changePassword.js
+++ b/app/js/changePassword.js
@@ -1,4 +1,6 @@
-var changePassword = (function() {
+var changePassword = (function(root) {
+  var changePasswordTemplate = Handlebars.templates.changePassword;
+  root.html(changePasswordTemplate());
   var form = $('form');
   var oldPassword = $('#oldPassword');
   var newPassword = $('#newPassword');
@@ -92,5 +94,5 @@ var changePassword = (function() {
 });
 
 $(function() {
-  changePassword();
+  changePassword($('.formDiv'));
 });
diff --git a/app/js/login.js b/app/js/login.js
index 001f375..eb9cead 100644
--- a/app/js/login.js
+++ b/app/js/login.js
@@ -5,12 +5,18 @@ var loginModule = (function() {
   var passwordError;
   var genericError;
 
-  var init = function(){
+  var init = function(root){
+    initializeTemplate(root);
     initializeFields();
     initializeEvents();
     initializeForm();
   };
 
+  var initializeTemplate = function(root) {
+    var loginTemplate = Handlebars.templates.login;
+    root.html(loginTemplate());
+  }
+
   var initializeFields = function(){
     form = $('form');
     password = $('#password');
@@ -69,6 +75,6 @@ var loginModule = (function() {
 })();
 
 $(document).ready(function() {
-  loginModule.init();
+  loginModule.init($(".formDiv"));
 });
 
diff --git a/app/js/templates.js b/app/js/templates.js
index 1645629..556e6d5 100644
--- a/app/js/templates.js
+++ b/app/js/templates.js
@@ -1,157 +1,12 @@
 (function() {
   var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
-templates['dashboard'] = template(function (Handlebars,depth0,helpers,partials,data) {
+templates['changePassword'] = template(function (Handlebars,depth0,helpers,partials,data) {
   this.compilerInfo = [4,'>= 1.0.0'];
 helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
-  var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression, self=this;
-
-function program1(depth0,data) {
-  
-  var buffer = "", stack1, helper;
-  buffer += " <small>(";
-  if (helper = helpers.ssid) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.ssid); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + ")</small>";
-  return buffer;
-  }
-
-function program3(depth0,data) {
   
-  var buffer = "", stack1, helper;
-  buffer += "\n            <div class=\"ping\">";
-  if (helper = helpers.pingSpeed) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.pingSpeed); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "\n            <small> ";
-  if (helper = helpers.pingSpeedMetric) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.pingSpeedMetric); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + " ping to eff.org\n            </small>\n            </div>\n        ";
-  return buffer;
-  }
 
-function program5(depth0,data) {
-  
-  var buffer = "", stack1, helper;
-  buffer += "\n            <div class=\"devices\"><span class=\"device-count\">";
-  if (helper = helpers.devices) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.devices); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "</span>\n                <small> devices</small>\n            </div>\n        ";
-  return buffer;
-  }
 
-function program7(depth0,data) {
-  
-  var buffer = "", stack1, helper;
-  buffer += "\n            <div class=\"bandwidth\">";
-  if (helper = helpers.maxBandwidthPercent) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.maxBandwidthPercent); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "%\n                <small> max <br> bandwidth</small>\n            </div>\n        ";
-  return buffer;
-  }
-
-function program9(depth0,data) {
-  
-  var buffer = "", stack1, helper;
-  buffer += "\n            <div class=\"data-use\"><span id=\"monthlyBandwidth\">";
-  if (helper = helpers.monthlyBandwidthUsage) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.monthlyBandwidthUsage); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "</span>\n                <small> of </small>\n                ";
-  if (helper = helpers.maxMonthlyBandwidth) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.maxMonthlyBandwidth); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "\n                <br>\n                <small> ";
-  if (helper = helpers.maxMonthlyBandwidthMetric) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.maxMonthlyBandwidthMetric); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + " max\n                </small>\n            </div>\n        ";
-  return buffer;
-  }
-
-function program11(depth0,data) {
-  
-  var buffer = "", stack1, helper;
-  buffer += "\n        <div class=\"status\"><span class=\"";
-  if (helper = helpers.connectivity) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.connectivity); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "\">";
-  if (helper = helpers.connectivity) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.connectivity); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "</span></div>\n    ";
-  return buffer;
-  }
-
-function program13(depth0,data) {
-  
-  var buffer = "", stack1, helper;
-  buffer += "\n        <div class=\"status toggle\" id=\"";
-  if (helper = helpers.stateId) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.stateId); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "\"><span class=\"on-button ";
-  if (helper = helpers.state) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.state); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "\">On</span> | <span\n                class=\"off-button ";
-  if (helper = helpers.state) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.state); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "\">Off</span></div>\n    ";
-  return buffer;
-  }
-
-  buffer += "<div class=\"network on\">\n    <header>\n        <img src=\"";
-  if (helper = helpers.imageSource) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.imageSource); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "\" alt=\"router-on\" class=\"icon\"/>\n\n        <div class=\"speed\">\n            <div class=\"upload\">&#8673; <span class=\"upload-speed\">";
-  if (helper = helpers.uploadSpeed) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.uploadSpeed); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "</span><span> ";
-  if (helper = helpers.uploadSpeedMetric) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.uploadSpeedMetric); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "</span></div>\n            <div class=\"download\">&#8675; <span class=\"download-speed\">";
-  if (helper = helpers.downloadSpeed) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.downloadSpeed); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "</span><span> ";
-  if (helper = helpers.downloadSpeedMetric) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.downloadSpeedMetric); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1)
-    + "</span></div>\n        </div>\n    </header>\n    <div class=\"title\">\n        <h2>";
-  if (helper = helpers.name) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-  else { helper = (depth0 && depth0.name); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-  buffer += escapeExpression(stack1);
-  stack1 = helpers['if'].call(depth0, (depth0 && depth0.ssid), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += "</h2>\n        ";
-  stack1 = helpers['if'].call(depth0, (depth0 && depth0.pingSpeed), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += "\n        ";
-  stack1 = helpers['if'].call(depth0, (depth0 && depth0.devices), {hash:{},inverse:self.noop,fn:self.program(5, program5, data),data:data});
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += "\n        ";
-  stack1 = helpers['if'].call(depth0, (depth0 && depth0.maxBandwidthPercent), {hash:{},inverse:self.noop,fn:self.program(7, program7, data),data:data});
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += "\n        ";
-  stack1 = helpers['if'].call(depth0, (depth0 && depth0.activateDataCap), {hash:{},inverse:self.noop,fn:self.program(9, program9, data),data:data});
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += "\n    </div>\n    ";
-  stack1 = helpers['if'].call(depth0, (depth0 && depth0.connectivity), {hash:{},inverse:self.noop,fn:self.program(11, program11, data),data:data});
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += "\n\n    ";
-  stack1 = helpers['if'].call(depth0, (depth0 && depth0.state), {hash:{},inverse:self.noop,fn:self.program(13, program13, data),data:data});
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += "\n</div>\n";
-  return buffer;
+  return "<h1 class=\"setPassword\">Set Administrator Password</h1>\n<form>\n  <div id=\"genericError\" class=\"inputError\"></div>\n  <input type=\"password\" id=\"oldPassword\" class=\"changePassword\" placeholder=\"Old password\"/><br>\n  <br>\n  <input type=\"password\" id=\"newPassword\" placeholder=\"New password\"/><br>\n  <div id=\"newPasswordError\" class=\"inputError\"></div>\n  <input type=\"password\" id=\"retypePassword\" placeholder=\"Retype new password\"/><br>\n  <div id=\"retypePasswordError\" class=\"inputError\"></div>\n  <input type=\"submit\" value=\"Submit\"></input>\n</form>\n";
   });
 templates['lastLogin'] = template(function (Handlebars,depth0,helpers,partials,data) {
   this.compilerInfo = [4,'>= 1.0.0'];
@@ -177,31 +32,13 @@ function program1(depth0,data) {
   buffer += "\n";
   return buffer;
   });
-templates['lastUpdate'] = template(function (Handlebars,depth0,helpers,partials,data) {
+templates['login'] = template(function (Handlebars,depth0,helpers,partials,data) {
   this.compilerInfo = [4,'>= 1.0.0'];
 helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
-  var buffer = "", stack1, helper, options, self=this, helperMissing=helpers.helperMissing;
-
-function program1(depth0,data) {
-  
   
-  return "is available";
-  }
 
-function program3(depth0,data) {
-  
-  
-  return "not available";
-  }
 
-  buffer += "<div id=\"check-for-updates\">\n  <div class=\"message\">\n    <p>Update ";
-  stack1 = helpers['if'].call(depth0, (depth0 && depth0.updateAvailable), {hash:{},inverse:self.program(3, program3, data),fn:self.program(1, program1, data),data:data});
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += " : last checked <span id=\"date\">";
-  stack1 = (helper = helpers.datetime || (depth0 && depth0.datetime),options={hash:{},data:data},helper ? helper.call(depth0, (depth0 && depth0.lastCheckDate), options) : helperMissing.call(depth0, "datetime", (depth0 && depth0.lastCheckDate), options));
-  if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += "</span></p>\n    <img id=\"checkForUpdate\" src=\"images/update.png\" alt=\"update\"/>\n  </div>\n\n  <div class=\"loading-message\"><p>Loading...</p></div>\n</div>\n";
-  return buffer;
+  return "<h1>Open Wireless</h1>\n<h4>Administrator Login</h4>\n<form>\n  <div id=\"genericError\" class=\"inputError\"></div>\n  <input type=\"password\" placeholder=\"Administrator password\" id=\"password\"/><br>\n  <input type=\"checkbox\" id=\"showPassword\"><label for=\"showPassword\">Show password</label><br>\n  <div id=\"passwordError\" class=\"inputError\"></div>\n  <input type=\"submit\" value=\"Login\"/>\n</form>\n";
   });
 templates['setSSID'] = template(function (Handlebars,depth0,helpers,partials,data) {
   this.compilerInfo = [4,'>= 1.0.0'];
@@ -236,6 +73,32 @@ function program1(depth0,data) {
   buffer += "\n";
   return buffer;
   });
+templates['lastUpdate'] = template(function (Handlebars,depth0,helpers,partials,data) {
+  this.compilerInfo = [4,'>= 1.0.0'];
+helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+  var buffer = "", stack1, helper, options, self=this, helperMissing=helpers.helperMissing;
+
+function program1(depth0,data) {
+  
+  
+  return "is available";
+  }
+
+function program3(depth0,data) {
+  
+  
+  return "not available";
+  }
+
+  buffer += "<div id=\"check-for-updates\">\n  <div class=\"message\">\n    <p>Update ";
+  stack1 = helpers['if'].call(depth0, (depth0 && depth0.updateAvailable), {hash:{},inverse:self.program(3, program3, data),fn:self.program(1, program1, data),data:data});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += " : last checked <span id=\"date\">";
+  stack1 = (helper = helpers.datetime || (depth0 && depth0.datetime),options={hash:{},data:data},helper ? helper.call(depth0, (depth0 && depth0.lastCheckDate), options) : helperMissing.call(depth0, "datetime", (depth0 && depth0.lastCheckDate), options));
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "</span></p>\n    <img id=\"checkForUpdate\" src=\"images/update.png\" alt=\"update\"/>\n  </div>\n\n  <div class=\"loading-message\"><p>Loading...</p></div>\n</div>\n";
+  return buffer;
+  });
 templates['settings'] = template(function (Handlebars,depth0,helpers,partials,data) {
   this.compilerInfo = [4,'>= 1.0.0'];
 helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
@@ -331,4 +194,157 @@ function program9(depth0,data) {
   buffer += "\n\n\n	  <br>\n\n          <p>\n            <label for=\"openwirelessBand\">Frequency Band</label>\n	            <select class=\"setting\" id=\"openwirelessBand\">OpenwirelessBand</select>\n          </p>\n          <p>\n            <label for=\"openwirelessChannel\">Channel</label>\n            <select class=\"setting\" id=\"openwirelessChannel\">OpenwirelessChannel</select>\n          </p>\n          <p>\n            <label for=\"openwirelessChannelBandwidth\">Channel bandwidth</label>\n            <select class=\"setting\" id=\"openwirelessChannelBandwidth\">OpenwirelessChannelBandwidth</select>\n          </p>\n          <p>\n            <label for=\"openwirelessVpnConfiguration\">VPN/TOR Configuration</label>\n            <select class=\"setting\" id=\"openwirelessVpnConfiguration\">OpenwirelessVpnConfiguration</select>\n          </p>\n          <p>\n            <label for=\"openwirelessEncryption\">WiFi security</label>\n            <select class=\"setting\" id=\"openwirelessEncryption\">OpenwirelessEncryption</select>\n          </p>\n        </div>\n";
   return buffer;
   });
+templates['dashboard'] = template(function (Handlebars,depth0,helpers,partials,data) {
+  this.compilerInfo = [4,'>= 1.0.0'];
+helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+  var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression, self=this;
+
+function program1(depth0,data) {
+  
+  var buffer = "", stack1, helper;
+  buffer += " <small>(";
+  if (helper = helpers.ssid) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.ssid); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + ")</small>";
+  return buffer;
+  }
+
+function program3(depth0,data) {
+  
+  var buffer = "", stack1, helper;
+  buffer += "\n            <div class=\"ping\">";
+  if (helper = helpers.pingSpeed) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.pingSpeed); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "\n            <small> ";
+  if (helper = helpers.pingSpeedMetric) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.pingSpeedMetric); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + " ping to eff.org\n            </small>\n            </div>\n        ";
+  return buffer;
+  }
+
+function program5(depth0,data) {
+  
+  var buffer = "", stack1, helper;
+  buffer += "\n            <div class=\"devices\"><span class=\"device-count\">";
+  if (helper = helpers.devices) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.devices); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "</span>\n                <small> devices</small>\n            </div>\n        ";
+  return buffer;
+  }
+
+function program7(depth0,data) {
+  
+  var buffer = "", stack1, helper;
+  buffer += "\n            <div class=\"bandwidth\">";
+  if (helper = helpers.maxBandwidthPercent) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.maxBandwidthPercent); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "%\n                <small> max <br> bandwidth</small>\n            </div>\n        ";
+  return buffer;
+  }
+
+function program9(depth0,data) {
+  
+  var buffer = "", stack1, helper;
+  buffer += "\n            <div class=\"data-use\"><span id=\"monthlyBandwidth\">";
+  if (helper = helpers.monthlyBandwidthUsage) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.monthlyBandwidthUsage); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "</span>\n                <small> of </small>\n                ";
+  if (helper = helpers.maxMonthlyBandwidth) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.maxMonthlyBandwidth); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "\n                <br>\n                <small> ";
+  if (helper = helpers.maxMonthlyBandwidthMetric) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.maxMonthlyBandwidthMetric); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + " max\n                </small>\n            </div>\n        ";
+  return buffer;
+  }
+
+function program11(depth0,data) {
+  
+  var buffer = "", stack1, helper;
+  buffer += "\n        <div class=\"status\"><span class=\"";
+  if (helper = helpers.connectivity) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.connectivity); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "\">";
+  if (helper = helpers.connectivity) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.connectivity); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "</span></div>\n    ";
+  return buffer;
+  }
+
+function program13(depth0,data) {
+  
+  var buffer = "", stack1, helper;
+  buffer += "\n        <div class=\"status toggle\" id=\"";
+  if (helper = helpers.stateId) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.stateId); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "\"><span class=\"on-button ";
+  if (helper = helpers.state) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.state); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "\">On</span> | <span\n                class=\"off-button ";
+  if (helper = helpers.state) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.state); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "\">Off</span></div>\n    ";
+  return buffer;
+  }
+
+  buffer += "<div class=\"network on\">\n    <header>\n        <img src=\"";
+  if (helper = helpers.imageSource) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.imageSource); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "\" alt=\"router-on\" class=\"icon\"/>\n\n        <div class=\"speed\">\n            <div class=\"upload\">&#8673; <span class=\"upload-speed\">";
+  if (helper = helpers.uploadSpeed) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.uploadSpeed); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "</span><span> ";
+  if (helper = helpers.uploadSpeedMetric) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.uploadSpeedMetric); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "</span></div>\n            <div class=\"download\">&#8675; <span class=\"download-speed\">";
+  if (helper = helpers.downloadSpeed) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.downloadSpeed); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "</span><span> ";
+  if (helper = helpers.downloadSpeedMetric) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.downloadSpeedMetric); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1)
+    + "</span></div>\n        </div>\n    </header>\n    <div class=\"title\">\n        <h2>";
+  if (helper = helpers.name) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+  else { helper = (depth0 && depth0.name); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+  buffer += escapeExpression(stack1);
+  stack1 = helpers['if'].call(depth0, (depth0 && depth0.ssid), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "</h2>\n        ";
+  stack1 = helpers['if'].call(depth0, (depth0 && depth0.pingSpeed), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n        ";
+  stack1 = helpers['if'].call(depth0, (depth0 && depth0.devices), {hash:{},inverse:self.noop,fn:self.program(5, program5, data),data:data});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n        ";
+  stack1 = helpers['if'].call(depth0, (depth0 && depth0.maxBandwidthPercent), {hash:{},inverse:self.noop,fn:self.program(7, program7, data),data:data});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n        ";
+  stack1 = helpers['if'].call(depth0, (depth0 && depth0.activateDataCap), {hash:{},inverse:self.noop,fn:self.program(9, program9, data),data:data});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n    </div>\n    ";
+  stack1 = helpers['if'].call(depth0, (depth0 && depth0.connectivity), {hash:{},inverse:self.noop,fn:self.program(11, program11, data),data:data});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n\n    ";
+  stack1 = helpers['if'].call(depth0, (depth0 && depth0.state), {hash:{},inverse:self.noop,fn:self.program(13, program13, data),data:data});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n</div>\n";
+  return buffer;
+  });
 })();
\ No newline at end of file
diff --git a/app/login.html b/app/login.html
index a4faba6..cccce4f 100644
--- a/app/login.html
+++ b/app/login.html
@@ -5,6 +5,10 @@
     <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
     <link rel="shortcut icon" href="images/favicon.png" media="screen" />
     <script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script>
+    <script type="text/javascript" src="lib/handlebars-v1.3.0.min.js"></script>
+    <script type="text/javascript" src="lib/jquery-timer.js"></script>
+    <script type="text/javascript" src="js/app.js"></script>
+    <script type="text/javascript" src="js/templates.js"></script>
     <script type="text/javascript" src="js/request.js"></script>
     <script type="text/javascript" src="js/helper.js"></script>
     <script type="text/javascript" src="js/errorCallback.js"></script>
@@ -15,15 +19,6 @@
   <body>
     <header></header>
     <div class="formDiv">
-      <h1>Open Wireless</h1>
-      <h4>Administrator Login</h4>
-      <form>
-        <div id="genericError" class="inputError"></div>
-        <input type="password" placeholder="Administrator password" id="password"/><br>
-        <input type="checkbox" id="showPassword"><label for="showPassword">Show password</label><br>
-        <div id="passwordError" class="inputError"></div>
-        <input type="submit" value="Login"/>
-      </form>
     </div>
   </body>
 </html>
diff --git a/app/templates/changePassword.handlebars b/app/templates/changePassword.handlebars
new file mode 100644
index 0000000..99925e8
--- /dev/null
+++ b/app/templates/changePassword.handlebars
@@ -0,0 +1,11 @@
+<h1 class="setPassword">Set Administrator Password</h1>
+<form>
+  <div id="genericError" class="inputError"></div>
+  <input type="password" id="oldPassword" class="changePassword" placeholder="Old password"/><br>
+  <br>
+  <input type="password" id="newPassword" placeholder="New password"/><br>
+  <div id="newPasswordError" class="inputError"></div>
+  <input type="password" id="retypePassword" placeholder="Retype new password"/><br>
+  <div id="retypePasswordError" class="inputError"></div>
+  <input type="submit" value="Submit"></input>
+</form>
diff --git a/app/templates/login.handlebars b/app/templates/login.handlebars
new file mode 100644
index 0000000..acd7c71
--- /dev/null
+++ b/app/templates/login.handlebars
@@ -0,0 +1,9 @@
+<h1>Open Wireless</h1>
+<h4>Administrator Login</h4>
+<form>
+  <div id="genericError" class="inputError"></div>
+  <input type="password" placeholder="Administrator password" id="password"/><br>
+  <input type="checkbox" id="showPassword"><label for="showPassword">Show password</label><br>
+  <div id="passwordError" class="inputError"></div>
+  <input type="submit" value="Login"/>
+</form>
diff --git a/karma.conf.js b/karma.conf.js
index d043c45..cc3410c 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -18,7 +18,6 @@ module.exports = function(config) {
         'app/lib/jquery-2.1.0.min.js',
         'app/lib/*.js',
         'app/js/*.js',
-        'spec/jasmine-fixture.min.js',
         'spec/**/*.js'
     ],
 
diff --git a/run-tests.sh b/run-tests.sh
index de34e48..2ba2774 100755
--- a/run-tests.sh
+++ b/run-tests.sh
@@ -15,10 +15,7 @@ else
 fi
 pip install $USER -qr requirements.txt
 
-if ! make assert_templates_js_up_to_date ; then
-  echo 'Error: templates.js out-of-date. Run `make app/js/templates.js`'
-  exit 1
-fi
+make
 
 scripts/unit
 if which nodejs ; then
diff --git a/spec/index.html b/spec/index.html
index 90ad0be..e9dc553 100644
--- a/spec/index.html
+++ b/spec/index.html
@@ -8,9 +8,11 @@
   <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
   <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
   <script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script>
-  <script type="text/javascript" src="lib/jasmine-fixture.min.js"></script>
 
   <!-- include source files here... -->
+  <script type="text/javascript" src="lib/handlebars-v1.3.0.min.js"></script>
+  <script type="text/javascript" src="../js/app.js"></script>
+  <script type="text/javascript" src="../js/templates.js"></script>
   <script type="text/javascript" src="../app/js/request.js" data-cover></script>
   <script type="text/javascript" src="../app/js/helper.js" data-cover></script>
   <script type="text/javascript" src="../app/js/login.js" data-cover></script>
diff --git a/spec/integration/changePasswordSpec.js b/spec/integration/changePasswordSpec.js
index dd0f6e5..48821c0 100644
--- a/spec/integration/changePasswordSpec.js
+++ b/spec/integration/changePasswordSpec.js
@@ -1,19 +1,29 @@
 describe("Change password page", function() {
-  var newPassword, retypePassword, passwordForm, newPasswordError, retypePasswordError;
+  var newPassword, retypePassword, passwordForm, newPasswordError, retypePasswordError, root, initTest;
 
   beforeEach(function() {
-    affix('form input#newPassword+input#retypePassword+input#newPasswordError+input#retypePasswordError+input#oldPassword+div#genericError');
-    passwordForm   = $('form');
-    oldPassword = $("#oldPassword");
-    newPassword    = $("#newPassword");
-    retypePassword = $("#retypePassword");
-    newPasswordError = $("#newPasswordError");
-    retypePasswordError = $("#retypePasswordError");
-    genericError = $("#genericError");
+    root = $('<div />');
+    $('body').append(root);
+
     spyOn(helperModule, "redirectTo").andCallFake(function(url) {
       redirect = url;
     });
-    changePassword();
+
+    initTest = function() {
+      changePassword(root);
+      passwordForm   = $('form', root);
+      oldPassword = $("#oldPassword", root);
+      newPassword    = $("#newPassword", root);
+      retypePassword = $("#retypePassword", root);
+      newPasswordError = $("#newPasswordError", root);
+      retypePasswordError = $("#retypePasswordError", root);
+      genericError = $("#genericError", root);
+    }
+    initTest();
+  });
+
+  afterEach(function() {
+    root.remove();
   });
 
   it("should show the user an error if the password field is empty", function() {
@@ -75,10 +85,11 @@ describe("Change password page", function() {
 
   it("should redirect to setSSID page on first time change", function() {
     spyOn($, "ajax").andCallFake(function(params){
-        params.success({});
+      params.success({});
     });
     spyOn(helperModule, "url").andReturn("https://gw.home.lan/changePassword.html?first_time=true");
-    changePassword();
+    initTest();
+
     newPassword.val("asdfghjkl12P");
     retypePassword.val("asdfghjkl12P");
     passwordForm.submit();
@@ -87,7 +98,7 @@ describe("Change password page", function() {
 
   it("should redirect to settings page on change that's not the first time", function() {
     spyOn($, "ajax").andCallFake(function(params){
-        params.success({});
+      params.success({});
     });
     newPassword.val("asdfghjkl12P");
     retypePassword.val("asdfghjkl12P");
@@ -98,7 +109,7 @@ describe("Change password page", function() {
 
   it("should stay on page and display error if old password was incorrect", function() {
     spyOn($, "ajax").andCallFake(function(params){
-        params.error({responseJSON: {'error': 'Bad password'}});
+      params.error({responseJSON: {'error': 'Bad password'}});
     });
     oldPassword.val("badpass");
     newPassword.val("asdfghjkl12P");
diff --git a/spec/integration/loginSpec.js b/spec/integration/loginSpec.js
index 0d06804..66f586d 100644
--- a/spec/integration/loginSpec.js
+++ b/spec/integration/loginSpec.js
@@ -1,15 +1,20 @@
 describe("Login Module", function() {
-  var password, showPassword, loginForm, redirect, passwordError, genericError;
+  var root, password, showPassword, loginForm, redirect, passwordError, genericError;
 
   beforeEach(function() {
-    affix('form input#password[type="password"]+input#showPassword+input#passwordError+div#genericError');
-    loginForm = $('form');
-    password = $('#password');
-    showPassword = $('#showPassword');
-    passwordError = $("#passwordError");
-    genericError = $("#genericError");
+    root = $("<div/>");
+    $('body').append(root);
+    loginModule.init(root);
+    loginForm = $('form', root);
+    password = $('#password', root);
+    showPassword = $('#showPassword', root);
+    passwordError = $("#passwordError", root);
+    genericError = $("#genericError", root);
     helperModule.redirectTo = function(url) { redirect = url; }
-    loginModule.init();
+  });
+
+  afterEach(function() {
+    root.remove();
   });
 
   it("should show the user an error if password field is empty", function() {
diff --git a/spec/jasmine-fixture.min.js b/spec/jasmine-fixture.min.js
deleted file mode 100644
index 470ced3..0000000
--- a/spec/jasmine-fixture.min.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/* jasmine-fixture - 1.2.0
- * Makes injecting HTML snippets into the DOM easy & clean!
- * https://github.com/searls/jasmine-fixture
- */
-(function(){var a,b=[].slice;!function(c){var d,e,f,g,h,i,j,k;return i=this,h=i.jasmineFixture,g=null!=(k=i.jasmine)?k.fixture:void 0,f=i.affix,j=function(a){return{inject:function(b,c){var d,e,f,g;for(g=[],e=0,f=a.length;f>e;e++)d=a[e],g.push(c=b(c,d));return g}}},i.jasmineFixture=function(b){var c,e,k,l,m;return e=function(a){return k.call(this,a,!0)},k=function(d,e){var f;return f=null,j(d.split(/[ ](?=[^\]]*?(?:\[|$))/)).inject(function(c,d){var g;return">"===d?c:(g=a(b,d),(e||f)&&g.appendTo(c),f||(f=g),g)},c(this)),f},m=function(){var a,b;return a=jasmine.fixture,i.jasmineFixture=h,null!=(b=i.jasmine)&&(b.fixture=g),i.affix=f,a},c=function(a){return null!=a.jquery?a:b("#jasmine_content").length>0?b("#jasmine_content"):b('<div id="jasmine_content"></div>').appendTo("body")},l={affix:e,create:k,noConflict:m},d(l),l},d=function(a){var b;return null!=(b=i.jasmine)&&(b.fixture=a),c.fn.affix=i.affix=a.affix,afterEach(function(){return c("#jasmine_content").remove()})},c?e=i.jasmineFixture(c):i.affix=function(){var a;if(a=window.jQuery||window.$,null!=a)return e=i.jasmineFixture(a),affix.call.apply(affix,[this].concat(b.call(arguments)));throw new Error("jasmine-fixture requires jQuery to be defined at window.jQuery or window.$")}}(window.jQuery||window.$),a=function(){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y;return a=function(j,k,l,n,o){var p,q,r,s,t,v,x,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O;if(j.isPlainObject(k)?p=k.main:(p=k,k={main:p}),J=p,void 0===o&&(o={}),"!"===p.charAt(0)||j.isArray(l)){for(j.isArray(l)?E=p:(I=g(p,"!"),I=I.substring(I.indexOf(":")+1,I.length-1),E=i(p));"@"===E.charAt(0);)E=i("!for:!"+h(E,k));O=k,O.main=E,B=j(),"!for:"===p.substring(0,5)||j.isArray(l)?(!j.isArray(l)&&I.indexOf(":")>0&&(F=I.substring(0,I.indexOf(":")),I=I.substr(I.indexOf(":")+1)),q=j.isArray(l)?l:l[I],N=O.main,(j.isArray(q)||j.isPlainObject(q))&&j.map(q,function(b,c){var d;return O.main=N,void 0!==F&&(o[F]=c),j.isPlainObject(b)||(b={value:b}),d=a(j,O,b,n,o),0!==B.length?j.each(d,function(a,b){return B.push(b)}):void 0}),p=j.isArray(l)?"":p.substr(I.length+6+E.length)):"!if:"===p.substring(0,4)&&(L=f("!"+I+"!",l,o),("undefined"!==L||"false"!==L||""!==L)&&(B=a(j,O,l,n,o)),p=p.substr(I.length+5+E.length)),k.main=p}else if("("===p.charAt(0))K=g(p,"(",")"),G=K.substring(1,K.length-1),p=p.substr(K.length),O=k,O.main=G,B=a(j,O,l,n,o);else{if(A=p.match(y),r=A[0],0===r.length)return"";if(r.indexOf("@")>=0)return p=h(p,k),O=k,O.main=p,a(j,O,l,n,o);r=f(r,l,o),t=e(j,r),u.test(r)&&(x=u.exec(r)[1]),s=d(r,l),z="{"===r.charAt(0)?"span":"div","#"!==p.charAt(0)&&"."!==p.charAt(0)&&"{"!==p.charAt(0)&&(z=w.exec(r)[1]),-1!==r.search(m)&&(v=r.match(m)[1]),s=j.extend(s,{id:x,"class":t,html:v}),B=j("<"+z+">",s),B.attr(s),B=c(r,B,n),B=b(r,B,l),p=p.substr(A[0].length),k.main=p}return p.length>0&&(">"===p.charAt(0)&&("("===p.charAt(1)?(N=g(p.substr(1),"(",")"),p=p.substr(N.length+1)):"!"===p.charAt(1)?(I=g(p.substr(1),"!"),E=i(p.substr(1)),N=I+E,p=p.substr(N.length+1)):(H=Math.max(p.indexOf("+"),p.length),N=p.substring(1,H),p=p.substr(H)),O=k,O.main=N,D=j(a(j,O,l,n,o)),D.appendTo(B)),"+"===p.charAt(0)&&(O=k,O.main=p.substr(1),C=a(j,O,l,n,o),j.each(C,function(a,b){return B.push(b)}))),M=B},b=function(a,b,c){var d,e,f;if(0===a.search(q))return b;if(d=a.match(q),null===d)return b;for(e=0;e<d.length;)f=p.exec(d[e]),void 0===f[3]?$(b).data(f[1],c[f[1]]):$(b).data(f[1],c[f[3]]),e++;return b},c=function(a,b,c){var d,e,f,g;if(0===a.search(s))return b;if(d=a.match(s),null===d)return b;for(f=0;f<d.length;)g=r.exec(d[f]),e=void 0===g[2]?c[g[1]]:c[g[2]],$(b).bind(g[1],e),f++;return b},d=function(a,b){var c,d,e,g;if(-1===a.search(k))return void 0;for(c=a.match(k),d={},e=0;e<c.length;)g=j.exec(c[e]),d[g[1]]="",void 0!==g[3]&&(d[g[1]]=f(g[3],b)),e++;return d},e=function(a,b){var c,d,e;if(b=b.match(x)[0],-1===b.search(o))return void 0;for(c=b.match(o),d="",e=0;e<c.length;)d+=" "+n.exec(c[e])[1],e++;return a.trim(d)},f=function(a,b,c){var d;if(void 0===c&&(c={}),d=a,void 0===b)return d;for(;t.test(d);)d=d.replace(t,function(a){var d,e,f;return d="",a.indexOf("!for:")>0||a.indexOf("!if:")>0?a:("!"!==a.charAt(0)&&(d=a.charAt(0),a=a.substring(2,a.length-1)),e=new Function("data","indexes","var r=undefined;with(data){try{r="+a+";}catch(e){}}with(indexes){try{if(r===undefined)r="+a+";}catch(e){}}return r;"),f=unescape(e(b,c)),d+f)});return d=d.replace(/\\./g,function(a){return a.charAt(1)}),unescape(d)},g=function(a,b,c,d){var e,f;if(void 0===c&&(c=b),e=1,void 0===d&&(d=a.charAt(0)===b?1:0),0!==d){for(;d>0&&e<a.length;)a.charAt(e)===c&&"\\"!==a.charAt(e-1)?d--:a.charAt(e)===b&&"\\"!==a.charAt(e-1)&&d++,e++;return f=a.substring(0,e)}},h=function(a,b){return a=a.replace(v,function(a){var c;return a=a.substr(1),(c=new Function("objs",'var r="";with(objs){try{r='+a+";}catch(e){}}return r;"))(b,h)})},i=function(a){var b,c,d;return"!for:"!==a.substring(0,5)&&"!if:"!==a.substring(0,4)?void 0:(b=g(a,"!"),a=a.substr(b.length),"("===a.charAt(0)?g(a,"(",")"):(d=a.match(y)[0],a=a.substr(d.length),0===a.length||"+"===a.charAt(0)?d:">"===a.charAt(0)?(c="",c=g(a.substr(1),"(",")",1),d+">"+c):void 0))},y=/([#\.\@]?[\w-]+|\[([\w-!?=:"']+(="([^"]|\\")+")? {0,})+\]|\~[\w$]+=[\w$]+|&[\w$]+(=[\w$]+)?|[#\.\@]?!([^!]|\\!)+!){0,}(\{([^\}]|\\\})+\})?/i,w=/(\w+)/i,u=/(?:^|\b)#([\w-!]+)/i,x=/((([#\.]?[\w-]+)?(\[([\w!]+(="([^"]|\\")+")? {0,})+\])?)+)/i,o=/(\.[\w-]+)/g,n=/\.([\w-]+)/i,v=/(@[\w$_][\w$_\d]+)/i,k=/(\[([\w-!]+(="?([^"]|\\")+"?)? {0,})+\])/gi,l=/([\w-!]+(="([^"]|\\")+")?)/g,j=/([\w-!]+)(="?((([\w]+\[.*?\])|[^"\]]|\\")+)"?)?/i,m=/\{(([^\}]|\\\})+)\}/i,t=/(?:([^\\]|^))!([^!]|\\!)+!/g,s=/\~[\w$]+(=[\w$]+)?/g,r=/\~([\w$]+)=([\w$]+)/i,q=/&[\w$]+(=[\w$]+)?/g,p=/&([\w$]+)(=([\w$]+))?/i,a}()}).call(this);
\ No newline at end of file