diff --git a/peach-web/static/css/peachcloud.css b/peach-web/static/css/peachcloud.css
index 8e65b6f..8c767f0 100644
--- a/peach-web/static/css/peachcloud.css
+++ b/peach-web/static/css/peachcloud.css
@@ -220,12 +220,18 @@ body {
 }
 
 .capsule-container {
-    margin-left: 2rem;
-    margin-right: 2rem;
-    padding-top: 1rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
     padding-bottom: 1rem;
 }
 
+@media only screen and (min-width: 600px) {
+    .capsule-container {
+      margin-left: 0;
+      margin-right: 0;
+    }
+}
+
 /*
  * CARDS
  */
@@ -235,6 +241,7 @@ body {
     max-height: 90vh;
     position: relative;
     width: 100%;
+    margin-top: 1rem;
 }
 
 @media only screen and (min-width: 600px) {
@@ -248,8 +255,6 @@ body {
 .card-container {
     justify-content: center;
     padding: 0.5rem;
-    /* padding-top: 1rem; */
-    /* padding-bottom: 1rem; */
 }
 
 .form-container {
@@ -560,6 +565,7 @@ html {
     font-size: var(--font-size-6);
     margin-left: 2rem;
     margin-right: 2rem;
+    margin-top: 1rem;
 }
 
 /*
diff --git a/peach-web/static/js/change_password.js b/peach-web/static/js/change_password.js
index 85bc2b1..f7efc93 100644
--- a/peach-web/static/js/change_password.js
+++ b/peach-web/static/js/change_password.js
@@ -1,16 +1,28 @@
 /*
-*   behavioural layer for the `change_password.html.tera` template,
- */
+
+behavioural layer for the `change_password.html.tera` template
+
+ - intercept button click for save (form submission of passwords)
+ - perform json api call
+ - update the dom
+
+methods:
+
+ PEACH_AUTH.changePassword();
+
+*/
+
+var PEACH_AUTH = {};
 
 // catch click of 'Save' button and make POST request
-PEACH.add = function() {
+PEACH_AUTH.changePassword = function() {
     document.addEventListener('DOMContentLoaded', function() {
         document.body.addEventListener('submit', function(e) {
             // prevent redirect on button press (default behavior)
             e.preventDefault();
             // capture form data
             var formElement = document.querySelector("form");
-            // create form data object from the wifiCreds form element
+            // create form data object from the changePassword form element
             var formData = new FormData(formElement);
             var object = {};
             // assign values from form
@@ -22,7 +34,7 @@ PEACH.add = function() {
             var jsonData = JSON.stringify(object);
             // write in-progress status message to ui
             PEACH.flashMsg("info", "Saving new password.");
-            // send add_wifi POST request
+            // send change_password POST request
             fetch("/api/v1/admin/change_password", {
                 method: "post",
                 headers: {
@@ -41,5 +53,5 @@ PEACH.add = function() {
     });
 }
 
-var addInstance = PEACH;
-addInstance.add();
+var changePassInstance = PEACH_AUTH;
+changePassInstance.changePassword();
diff --git a/peach-web/static/js/common.js b/peach-web/static/js/common.js
index 05167d2..1197e57 100644
--- a/peach-web/static/js/common.js
+++ b/peach-web/static/js/common.js
@@ -43,5 +43,4 @@ PEACH.flashMsg = function(status, msg) {
     }
 }
 
-var addInstance = PEACH;
-addInstance.add();
+var commonInstance = PEACH;
diff --git a/peach-web/static/js/configure_dns.js b/peach-web/static/js/configure_dns.js
index 8abef30..ff677ec 100644
--- a/peach-web/static/js/configure_dns.js
+++ b/peach-web/static/js/configure_dns.js
@@ -1,9 +1,9 @@
 /*
 
 behavioural layer for the `configure_dns.html.tera` template,
-corresponding to the web route `/network/dns`
+corresponding to the web route `/settings/network/dns`
 
- - intercept button click for add (form submission of credentials)
+ - intercept button click for save (form submission of dns settings)
  - perform json api call
  - update the dom
 
@@ -12,14 +12,14 @@ corresponding to the web route `/network/dns`
 var PEACH_DNS = {};
 
 // catch click of 'Add' button and make POST request
-PEACH_DNS.add = function() {
+PEACH_DNS.configureDns = function() {
     document.addEventListener('DOMContentLoaded', function() {
         document.body.addEventListener('submit', function(e) {
             // prevent redirect on button press (default behavior)
             e.preventDefault();
             // capture form data
             var formElement = document.querySelector("form");
-            // create form data object from the wifiCreds form element
+            // create form data object from the configureDNS form element
             var formData = new FormData(formElement);
             var object = {};
             // set checkbox to false (the value is only passed to formData if it is "on")
@@ -36,7 +36,7 @@ PEACH_DNS.add = function() {
             console.log(object);
             var jsonData = JSON.stringify(object);
             // write in-progress status message to ui
-            PEACH_DNS.flashMsg("info", "Saving new DNS configurations");
+            PEACH.flashMsg("info", "Saving new DNS configurations");
             // send add_wifi POST request
             fetch("/api/v1/network/dns/configure", {
                 method: "post",
@@ -50,49 +50,14 @@ PEACH_DNS.add = function() {
             })
             .then( (jsonData) => {
                 // write json response message to ui
-                PEACH_DNS.flashMsg(jsonData.status, jsonData.msg);
+                PEACH.flashMsg(jsonData.status, jsonData.msg);
                 let statusIndicator = document.getElementById("dyndns-status-indicator");
-                statusIndicator.remove();
-
+                // only remove the "dyndns-status-indicator" element if it exists
+                if (statusIndicator != null ) statusIndicator.remove();
             })
         }, false);
     });
 }
 
-// display a message by appending a paragraph element
-PEACH_DNS.flashMsg = function(status, msg) {
-    // set the class of the element according to status
-    var elementClass;
-    if (status === "success") {
-        elementClass = "capsule center-text flash-message font-success";
-    } else if (status === "info") {
-        elementClass = "capsule center-text flash-message font-info";
-    } else {
-        elementClass = "capsule center-text flash-message font-failure";
-    };
-
-    var flashElement = document.getElementById("flashMsg");
-    // if flashElement exists, update the class & text
-    if (flashElement) {
-        flashElement.className = elementClass;
-        flashElement.innerText = msg;
-    // if flashElement does not exist, create it, set id, class, text & append
-    } else {
-        // create new div for flash message
-        var flashDiv = document.createElement("DIV");
-        // set div attributes
-        flashDiv.id = "flashMsg";
-        flashDiv.className = elementClass;
-        // add json response message to flash message div
-        var flashMsg = document.createTextNode(msg);
-        flashDiv.appendChild(flashMsg);
-        // insert the flash message div below the button div
-        var buttonDiv = document.getElementById("buttonDiv");
-        // flashDiv will be added to the end since buttonDiv is the last
-        // child within the parent element (card-container div)
-        buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
-    }
-}
-
-var addInstance = PEACH_DNS;
-addInstance.add();
+var configureDnsInstance = PEACH_DNS;
+configureDnsInstance.configureDns();
diff --git a/peach-web/static/js/network_add.js b/peach-web/static/js/network_add.js
index ccf68a1..a441234 100644
--- a/peach-web/static/js/network_add.js
+++ b/peach-web/static/js/network_add.js
@@ -10,7 +10,6 @@ corresponding to the web route `/network/wifi/add`
 methods:
 
  PEACH_NETWORK.add();
- PEACH_NETWORK.flashMsg(status, msg);
 
 */
 
@@ -34,7 +33,7 @@ PEACH_NETWORK.add = function() {
             // perform json serialization
             var jsonData = JSON.stringify(object);
             // write in-progress status message to ui
-            PEACH_NETWORK.flashMsg("info", "Adding WiFi credentials...");
+            PEACH.flashMsg("info", "Adding WiFi credentials...");
             // send add_wifi POST request
             fetch("/api/v1/network/wifi", {
                 method: "post",
@@ -48,46 +47,11 @@ PEACH_NETWORK.add = function() {
             })
             .then( (jsonData) => {
                 // write json response message to ui
-                PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
+                PEACH.flashMsg(jsonData.status, jsonData.msg);
             })
         }, false);
     });
 }
 
-// display a message by appending a paragraph element
-PEACH_NETWORK.flashMsg = function(status, msg) {
-    // set the class of the element according to status
-    var elementClass;
-    if (status === "success") {
-        elementClass = "capsule center-text flash-message font-success";
-    } else if (status === "info") {
-        elementClass = "capsule center-text flash-message font-info";
-    } else {
-        elementClass = "capsule center-text flash-message font-failure";
-    };
-
-    var flashElement = document.getElementById("flashMsg");
-    // if flashElement exists, update the class & text
-    if (flashElement) {
-        flashElement.className = elementClass;
-        flashElement.innerText = msg;
-    // if flashElement does not exist, create it, set id, class, text & append
-    } else {
-        // create new div for flash message
-        var flashDiv = document.createElement("DIV");
-        // set div attributes
-        flashDiv.id = "flashMsg";
-        flashDiv.className = elementClass;
-        // add json response message to flash message div
-        var flashMsg = document.createTextNode(msg);
-        flashDiv.appendChild(flashMsg);
-        // insert the flash message div below the button div
-        var buttonDiv = document.getElementById("buttonDiv");
-        // flashDiv will be added to the end since buttonDiv is the last
-        // child within the parent element (card-container div)
-        buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
-    }
-}
-
 var addInstance = PEACH_NETWORK;
 addInstance.add();
diff --git a/peach-web/static/js/network_card.js b/peach-web/static/js/network_card.js
index 79fa72a..3026a72 100644
--- a/peach-web/static/js/network_card.js
+++ b/peach-web/static/js/network_card.js
@@ -1,7 +1,7 @@
 /*
 
 behavioural layer for the `network_card.html.tera` template,
-corresponding to the web route `/network`
+corresponding to the web route `/settings/network`
 
  - intercept form submissions
  - perform json api calls
@@ -11,10 +11,8 @@ methods:
 
  PEACH_NETWORK.activateAp();
  PEACH_NETWORK.activateClient();
- PEACH_NETWORK.apOnline();
- PEACH_NETWORK.clientOffline();
- PEACH_NETWORK.clientOnline();
- PEACH_NETWORK.flashMsg(status, msg);
+ PEACH_NETWORK.apMode();
+ PEACH_NETWORK.clientMode();
 
 */
 
@@ -29,7 +27,7 @@ PEACH_NETWORK.activateAp = function() {
                 // prevent form submission (default behavior)
                 e.preventDefault();
                 // write in-progress status message to ui
-                PEACH_NETWORK.flashMsg("info", "Deploying access point...");
+                PEACH.flashMsg("info", "Deploying access point...");
                 // send activate_ap POST request
                 fetch("/api/v1/network/activate_ap", {
                     method: "post",
@@ -44,10 +42,10 @@ PEACH_NETWORK.activateAp = function() {
                 .then( (jsonData) => {
                     console.log(jsonData.msg);
                     // write json response message to ui
-                    PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
+                    PEACH.flashMsg(jsonData.status, jsonData.msg);
                     // if ap activation is successful, update the ui
                     if (jsonData.status === "success") {
-                        PEACH_NETWORK.apOnline();
+                        PEACH_NETWORK.apMode();
                     }
                 })
             }, false);
@@ -64,7 +62,7 @@ PEACH_NETWORK.activateClient = function() {
                 // prevent form submission (default behavior)
                 e.preventDefault();
                 // write in-progress status message to ui
-                PEACH_NETWORK.flashMsg("info", "Enabling WiFi client...");
+                PEACH.flashMsg("info", "Enabling WiFi client...");
                 // send activate_ap POST request
                 fetch("/api/v1/network/activate_client", {
                     method: "post",
@@ -79,10 +77,10 @@ PEACH_NETWORK.activateClient = function() {
                 .then( (jsonData) => {
                     console.log(jsonData.msg);
                     // write json response message to ui
-                    PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
+                    PEACH.flashMsg(jsonData.status, jsonData.msg);
                     // if client activation is successful, update the ui
                     if (jsonData.status === "success") {
-                        PEACH_NETWORK.clientOnline();
+                        PEACH_NETWORK.clientMode();
                     }
                 })
             }, false);
@@ -90,21 +88,12 @@ PEACH_NETWORK.activateClient = function() {
     });
 }
 
-// update ui for access point mode (status: online)
-PEACH_NETWORK.apOnline = function() {
-    console.log('Activating AP Mode');
-
-    // update network mode and status (icon & label)
-    let i = document.getElementById("netModeIcon");
-    i.className = "center icon icon-active";
-    i.src = "icons/router.svg";
-    let l = document.getElementById("netModeLabel");
-    l.textContent = "ONLINE";
-
+// replace 'Deploy Access Point' button with 'Enable WiFi' button
+PEACH_NETWORK.apMode = function() {
     // create Enable WiFi button and add it to button div
     var wifiButton = document.createElement("A");
     wifiButton.className = "button center";
-    wifiButton.href = "/network/wifi/activate";
+    wifiButton.href = "/settings/network/wifi/activate";
     wifiButton.id = "connectWifi";
     var label = "Enable WiFi";
     var buttonText = document.createTextNode(label);
@@ -114,88 +103,31 @@ PEACH_NETWORK.apOnline = function() {
     let buttons = document.getElementById("buttons");
     buttons.appendChild(wifiButton);
 
-    // remove the old 'Activate Access Point' button
+    // remove the old 'Deploy Access Point' button
     let apButton = document.getElementById("deployAccessPoint");
-    apButton.style = "display: none;";
+    apButton.remove();
 }
 
-// update ui for wifi client mode (status: online)
-PEACH_NETWORK.clientOnline = function() {
-    console.log('Activating Client Mode');
+// replace 'Enable WiFi' button with 'Deploy Access Point' button
+PEACH_NETWORK.clientMode = function() {
+    // create Deploy Access Point button and add it to button div
+    var apButton = document.createElement("A");
+    apButton.className = "button center";
+    apButton.href = "/settings/network/ap/activate";
+    apButton.id = "deployAccessPoint";
+    var label = "Deploy Access Point";
+    var buttonText = document.createTextNode(label);
+    apButton.appendChild(buttonText);
 
-    // update network mode and status (icon & label)
-    let i = document.getElementById("netModeIcon");
-    i.className = "center icon icon-active";
-    i.src = "icons/wifi.svg";
-    let l = document.getElementById("netModeLabel");
-    l.textContent = "ONLINE";
+    // append the new button to the buttons div
+    let buttons = document.getElementById("buttons");
+    buttons.appendChild(apButton);
 
-    // TODO: think about updates for buttons (transition from ap mode)
-}
-
-// update ui for wifi client mode (status: offline)
-PEACH_NETWORK.clientOffline = function() {
-    console.log('Activating Client Mode');
-
-    // update network mode and status (icon & label)
-    let i = document.getElementById("netModeIcon");
-    i.className = "center icon icon-inactive";
-    i.src = "icons/wifi.svg";
-    let l = document.getElementById("netModeLabel");
-    l.textContent = "OFFLINE";
-
-    // TODO: think about updates for buttons (transition from ap mode)
-}
-
-// display a message by appending a paragraph element
-PEACH_NETWORK.flashMsg = function(status, msg) {
-    // set the class of the element according to status
-    var elementClass;
-    if (status === "success") {
-        elementClass = "capsule center-text flash-message font-success";
-    } else if (status === "info") {
-        elementClass = "capsule center-text flash-message font-info";
-    } else {
-        elementClass = "capsule center-text flash-message font-failure";
-    };
-
-    var flashElement = document.getElementById("flashMsg");
-    // if flashElement exists, update the class & text
-    if (flashElement) {
-        flashElement.className = elementClass;
-        flashElement.innerText = msg;
-    // if flashElement does not exist, create it, set id, class, text & append
-    } else {
-        // create new div for flash message
-        var flashDiv = document.createElement("DIV");
-        // set div attributes
-        flashDiv.id = "flashMsg";
-        flashDiv.className = elementClass;
-        // add json response message to flash message div
-        var flashMsg = document.createTextNode(msg);
-        flashDiv.appendChild(flashMsg);
-        // insert the flash message div above the three icon grid div
-        var gridDiv = document.getElementById("gridDiv");
-        gridDiv.parentNode.insertBefore(flashDiv, gridDiv);
-    }
+    // remove the old 'Enable Wifi' button
+    let wifiButton = document.getElementById("connectWifi");
+    wifiButton.remove();
 }
 
 var networkInstance = PEACH_NETWORK;
 networkInstance.activateAp();
 networkInstance.activateClient();
-
-/*
-
-async function exampleFetch() {
-    const response = await fetch('/api/v1/network/state');
-    const myJson = await response.json();
-    //const jsonData = JSON.parse(myJson);
-    console.log(myJson.data.wlan0);
-    //var state = document.createElement("P");
-    //state.innerText = ""jsonData.wlan0;
-    //document.body.appendChild(state);
-}
-
-exampleFetch()
-
-*/
diff --git a/peach-web/static/js/network_detail.js b/peach-web/static/js/network_detail.js
index 6d294ae..7a5baae 100644
--- a/peach-web/static/js/network_detail.js
+++ b/peach-web/static/js/network_detail.js
@@ -1,7 +1,7 @@
 /*
 
 behavioural layer for the `network_detail.html.tera` template,
-corresponding to the web route `/network/wifi?<ssid>`
+corresponding to the web route `/settings/network/wifi?<ssid>`
 
  - intercept button clicks for connect, disconnect and forget
  - perform json api call
@@ -12,7 +12,6 @@ methods:
  PEACH_NETWORK.connect();
  PEACH_NETWORK.disconnect();
  PEACH_NETWORK.forget();
- PEACH_NETWORK.flashMsg(status, msg);
 
 */
 
@@ -33,7 +32,7 @@ PEACH_NETWORK.connect = function() {
                 // perform json serialization
                 var jsonData = JSON.stringify(ssidData);
                 // write in-progress status message to ui
-                PEACH_NETWORK.flashMsg("info", "Connecting to access point...");
+                PEACH.flashMsg("info", "Connecting to access point...");
                 // send add_wifi POST request
                 fetch("/api/v1/network/wifi/connect", {
                     method: "post",
@@ -47,7 +46,7 @@ PEACH_NETWORK.connect = function() {
                 })
                 .then( (jsonData) => {
                     // write json response message to ui
-                    PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
+                    PEACH.flashMsg(jsonData.status, jsonData.msg);
                 })
             }, false);
         };
@@ -69,7 +68,7 @@ PEACH_NETWORK.disconnect = function() {
                 // perform json serialization
                 var jsonData = JSON.stringify(ssidData);
                 // write in-progress status message to ui
-                PEACH_NETWORK.flashMsg("info", "Disconnecting from access point...");
+                PEACH.flashMsg("info", "Disconnecting from access point...");
                 // send disconnect_wifi POST request
                 fetch("/api/v1/network/wifi/disconnect", {
                     method: "post",
@@ -83,7 +82,7 @@ PEACH_NETWORK.disconnect = function() {
                 })
                 .then( (jsonData) => {
                     // write json response message to ui
-                    PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
+                    PEACH.flashMsg(jsonData.status, jsonData.msg);
                 })
             }, false);
         };
@@ -105,7 +104,7 @@ PEACH_NETWORK.forget = function() {
                 // perform json serialization
                 var jsonData = JSON.stringify(ssidData);
                 // write in-progress status message to ui
-                PEACH_NETWORK.flashMsg("info", "Removing credentials for access point...");
+                PEACH.flashMsg("info", "Removing credentials for access point...");
                 // send forget_ap POST request
                 fetch("/api/v1/network/wifi/forget", {
                     method: "post",
@@ -119,48 +118,13 @@ PEACH_NETWORK.forget = function() {
                 })
                 .then( (jsonData) => {
                     // write json response message to ui
-                    PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
+                    PEACH.flashMsg(jsonData.status, jsonData.msg);
                 })
             }, false);
         };
     });
 }
 
-// display a message by appending a paragraph element
-PEACH_NETWORK.flashMsg = function(status, msg) {
-    // set the class of the element according to status
-    var elementClass;
-    if (status === "success") {
-        elementClass = "capsule center-text flash-message font-success";
-    } else if (status === "info") {
-        elementClass = "capsule center-text flash-message font-info";
-    } else {
-        elementClass = "capsule center-text flash-message font-failure";
-    };
-
-    var flashElement = document.getElementById("flashMsg");
-    // if flashElement exists, update the class & text
-    if (flashElement) {
-        flashElement.className = elementClass;
-        flashElement.innerText = msg;
-    // if flashElement does not exist, create it, set id, class, text & append
-    } else {
-        // create new div for flash message
-        var flashDiv = document.createElement("DIV");
-        // set div attributes
-        flashDiv.id = "flashMsg";
-        flashDiv.className = elementClass;
-        // add json response message to flash message div
-        var flashMsg = document.createTextNode(msg);
-        flashDiv.appendChild(flashMsg);
-        // insert the flash message div below the button div
-        var buttonDiv = document.getElementById("buttonDiv");
-        // flashDiv will be added to the end since buttonDiv is the last
-        // child within the parent element (card-container div)
-        buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
-    }
-}
-
 var detailInstance = PEACH_NETWORK;
 detailInstance.connect();
 detailInstance.disconnect();
diff --git a/peach-web/static/js/network_modify.js b/peach-web/static/js/network_modify.js
index 4dce16b..0ed9a50 100644
--- a/peach-web/static/js/network_modify.js
+++ b/peach-web/static/js/network_modify.js
@@ -9,7 +9,6 @@ behavioural layer for the `network_modify.html.tera` template
 methods:
 
  PEACH_NETWORK.modify();
- PEACH_NETWORK.flashMsg(status, msg);
 
 */
 
@@ -33,7 +32,7 @@ PEACH_NETWORK.modify = function() {
             // perform json serialization
             var jsonData = JSON.stringify(object);
             // write in-progress status message to ui
-            PEACH_NETWORK.flashMsg("info", "Updating WiFi password...");
+            PEACH.flashMsg("info", "Updating WiFi password...");
             // send new_password POST request
             fetch("/api/v1/network/wifi/modify", {
                 method: "post",
@@ -47,46 +46,11 @@ PEACH_NETWORK.modify = function() {
             })
             .then( (jsonData) => {
                 // write json response message to ui
-                PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
+                PEACH.flashMsg(jsonData.status, jsonData.msg);
             })
         }, false);
     });
 }
 
-// display a message by appending a paragraph element
-PEACH_NETWORK.flashMsg = function(status, msg) {
-    // set the class of the element according to status
-    var elementClass;
-    if (status === "success") {
-        elementClass = "capsule center-text flash-message font-success";
-    } else if (status === "info") {
-        elementClass = "capsule center-text flash-message font-info";
-    } else {
-        elementClass = "capsule center-text flash-message font-failure";
-    };
-
-    var flashElement = document.getElementById("flashMsg");
-    // if flashElement exists, update the class & text
-    if (flashElement) {
-        flashElement.className = elementClass;
-        flashElement.innerText = msg;
-    // if flashElement does not exist, create it, set id, class, text & append
-    } else {
-        // create new div for flash message
-        var flashDiv = document.createElement("DIV");
-        // set div attributes
-        flashDiv.id = "flashMsg";
-        flashDiv.className = elementClass;
-        // add json response message to flash message div
-        var flashMsg = document.createTextNode(msg);
-        flashDiv.appendChild(flashMsg);
-        // insert the flash message div below the button div
-        var buttonDiv = document.getElementById("buttonDiv");
-        // flashDiv will be added to the end since buttonDiv is the last
-        // child within the parent element (card-container div)
-        buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
-    }
-}
-
 var modifyInstance = PEACH_NETWORK;
 modifyInstance.modify();
diff --git a/peach-web/static/js/network_usage.js b/peach-web/static/js/network_usage.js
index 236a2d3..a12efea 100644
--- a/peach-web/static/js/network_usage.js
+++ b/peach-web/static/js/network_usage.js
@@ -1,7 +1,7 @@
 /*
 
 behavioural layer for the `network_usage.html.tera` template,
-corresponding to the web route `/network/wifi/usage`
+corresponding to the web route `/settings/network/wifi/usage`
 
  - intercept form submissions
  - perform json api calls
@@ -13,7 +13,6 @@ methods:
  PEACH_NETWORK.resetUsage();
  PEACH_NETWORK.toggleWarning();
  PEACH_NETWORK.toggleCutoff();
- PEACH_NETWORK.flashMsg(status, msg);
 
 */
 
@@ -51,7 +50,7 @@ PEACH_NETWORK.updateAlerts = function() {
             })
             .then( (jsonData) => {
                 // write json response message to ui
-                PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
+                PEACH.flashMsg(jsonData.status, jsonData.msg);
             })
         }, false);
     });
@@ -79,7 +78,7 @@ PEACH_NETWORK.resetUsage = function() {
                 .then( (jsonData) => {
                     console.log(jsonData.msg);
                     // write json response message to ui
-                    PEACH_NETWORK.flashMsg(jsonData.status, jsonData.msg);
+                    PEACH.flashMsg(jsonData.status, jsonData.msg);
                     // if reset is successful, update the ui
                     if (jsonData.status === "success") {
                         console.log(jsonData.data);
@@ -133,39 +132,6 @@ PEACH_NETWORK.toggleCutoff = function() {
     });
 };
 
-// display a message by appending a paragraph element
-PEACH_NETWORK.flashMsg = function(status, msg) {
-    // set the class of the element according to status
-    var elementClass;
-    if (status === "success") {
-        elementClass = "capsule center-text flash-message font-success";
-    } else if (status === "info") {
-        elementClass = "capsule center-text flash-message font-info";
-    } else {
-        elementClass = "capsule center-text flash-message font-failure";
-    };
-
-    var flashElement = document.getElementById("flashMsg");
-    // if flashElement exists, update the class & text
-    if (flashElement) {
-        flashElement.className = elementClass;
-        flashElement.innerText = msg;
-    // if flashElement does not exist, create it, set id, class, text & append
-    } else {
-        // create new div for flash message
-        var flashDiv = document.createElement("DIV");
-        // set div attributes
-        flashDiv.id = "flashMsg";
-        flashDiv.className = elementClass;
-        // add json response message to flash message div
-        var flashMsg = document.createTextNode(msg);
-        flashDiv.appendChild(flashMsg);
-        // insert the flash message div below the button div
-        var buttonDiv = document.getElementById("buttonDiv");
-        buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
-    }
-}
-
 var usageInstance = PEACH_NETWORK;
 usageInstance.resetUsage();
 usageInstance.toggleWarning();
diff --git a/peach-web/static/js/power_menu.js b/peach-web/static/js/power_menu.js
index 91e22e0..6841414 100644
--- a/peach-web/static/js/power_menu.js
+++ b/peach-web/static/js/power_menu.js
@@ -11,7 +11,6 @@ methods:
 
  PEACH_DEVICE.reboot();
  PEACH_DEVICE.shutdown();
- PEACH_DEVICE.flashMsg(status, msg);
 
 */
 
@@ -26,7 +25,7 @@ PEACH_DEVICE.reboot = function() {
                 // prevent redirect on button press (default behavior)
                 e.preventDefault();
                 // write reboot flash message
-                PEACH_DEVICE.flashMsg("success", "Rebooting the device...");
+                PEACH.flashMsg("success", "Rebooting the device...");
                 // send reboot_device POST request
                 fetch("/api/v1/admin/reboot", {
                     method: "post",
@@ -41,7 +40,7 @@ PEACH_DEVICE.reboot = function() {
                 .then( (jsonData) => {
                     console.log(jsonData.msg);
                     // write json response message to ui
-                    PEACH_DEVICE.flashMsg(jsonData.status, jsonData.msg);
+                    PEACH.flashMsg(jsonData.status, jsonData.msg);
                 })
             }, false);
         }
@@ -57,7 +56,7 @@ PEACH_DEVICE.shutdown = function() {
                 // prevent form submission (default behavior)
                 e.preventDefault();
                 // write shutdown flash message
-                PEACH_DEVICE.flashMsg("success", "Shutting down the device...");
+                PEACH.flashMsg("success", "Shutting down the device...");
                 // send shutdown_device POST request
                 fetch("/api/v1/shutdown", {
                     method: "post",
@@ -72,48 +71,13 @@ PEACH_DEVICE.shutdown = function() {
                 .then( (jsonData) => {
                     console.log(jsonData.msg);
                     // write json response message to ui
-                    PEACH_DEVICE.flashMsg(jsonData.status, jsonData.msg);
+                    PEACH.flashMsg(jsonData.status, jsonData.msg);
                 })
             }, false);
         }
     });
 }
 
-// display a message by appending a paragraph element
-PEACH_DEVICE.flashMsg = function(status, msg) {
-    // set the class of the element according to status
-    var elementClass;
-    if (status === "success") {
-        elementClass = "capsule center-text flash-message font-success";
-    } else if (status === "info") {
-        elementClass = "capsule center-text flash-message font-info";
-    } else {
-        elementClass = "capsule center-text flash-message font-failure";
-    };
-
-    var flashElement = document.getElementById("flashMsg");
-    // if flashElement exists, update the class & text
-    if (flashElement) {
-        flashElement.className = elementClass;
-        flashElement.innerText = msg;
-    // if flashElement does not exist, create it, set id, class, text & append
-    } else {
-        // create new div for flash message
-        var flashDiv = document.createElement("DIV");
-        // set div attributes
-        flashDiv.id = "flashMsg";
-        flashDiv.className = elementClass;
-        // add json response message to flash message div
-        var flashMsg = document.createTextNode(msg);
-        flashDiv.appendChild(flashMsg);
-        // insert the flash message div below the button div
-        var buttonDiv = document.getElementById("buttonDiv");
-        // flashDiv will be added to the end since buttonDiv is the last
-        // child within the parent element (card-container div)
-        buttonDiv.parentNode.insertBefore(flashDiv, buttonDiv.nextSibling);
-    }
-}
-
 var deviceInstance = PEACH_DEVICE;
 deviceInstance.reboot();
 deviceInstance.shutdown();
diff --git a/peach-web/static/js/reset_password.js b/peach-web/static/js/reset_password.js
index bf1c2ec..1c9f431 100644
--- a/peach-web/static/js/reset_password.js
+++ b/peach-web/static/js/reset_password.js
@@ -2,15 +2,17 @@
 *   behavioural layer for the `reset_password.html.tera` template,
  */
 
+var PEACH_AUTH = {};
+
 // catch click of 'Save' button and make POST request
-PEACH.add = function() {
+PEACH_AUTH.resetPassword = function() {
       document.addEventListener('DOMContentLoaded', function() {
         document.body.addEventListener('submit', function(e) {
             // prevent redirect on button press (default behavior)
             e.preventDefault();
             // capture form data
             var formElement = document.querySelector("form");
-            // create form data object from the wifiCreds form element
+            // create form data object from the changePassword form element
             var formData = new FormData(formElement);
             var object = {};
             // assign values from form
@@ -41,5 +43,5 @@ PEACH.add = function() {
     });
 }
 
-var addInstance = PEACH;
-addInstance.add();
+var resetPassInstance = PEACH_AUTH;
+resetPassInstance.resetPassword();
diff --git a/peach-web/templates/catchers/not_found.html.tera b/peach-web/templates/catchers/not_found.html.tera
index 2d0e80f..4a1f28b 100644
--- a/peach-web/templates/catchers/not_found.html.tera
+++ b/peach-web/templates/catchers/not_found.html.tera
@@ -1,9 +1,11 @@
 {%- extends "nav" -%}
 {%- block card %}
-        <div class="card center">
-            <div class="card-container capsule info-border">
-                <p>No PeachCloud resource exists for this URL. Please ensure that the URL in the address bar is correct.</p>
-                <p>Click the back arrow in the top-left or the PeachCloud logo at the bottom of your screen to return Home.</p>
-            </div>
+      <div class="card center">
+        <div class="capsule-container">
+          <div class="capsule info-border">
+            <p>No PeachCloud resource exists for this URL. Please ensure that the URL in the address bar is correct.</p>
+            <p>Click the back arrow in the top-left or the PeachCloud logo at the bottom of your screen to return Home.</p>
+          </div>
         </div>
+      </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/settings/admin/change_password.html.tera b/peach-web/templates/settings/admin/change_password.html.tera
index bbe73b5..85d5f30 100644
--- a/peach-web/templates/settings/admin/change_password.html.tera
+++ b/peach-web/templates/settings/admin/change_password.html.tera
@@ -4,47 +4,22 @@
       <div class="card center">
         <div class="form-container">
           <form id="changePassword" action="/settings/change_password" method="post">
-            <div class="input-wrapper">
-              <!-- input for old password -->
-              <label id="old_password" class="label-small input-label font-near-black">
-                <label class="label-small input-label font-gray" for="old_password" style="padding-top: 0.25rem;">Old Password</label>
-                <input id="old_password" class="form-input"  style="margin-bottom: 0;"
-                    name="old_password" type="password" title="old password" value="">
-              </label>
-            </div>
-
-            <div class="input-wrapper">
-              <!-- input for new password1 -->
-              <label id="new_password1" class="label-small input-label font-near-black">
-                <label class="label-small input-label font-gray" for="new_password1" style="padding-top: 0.25rem;">Enter New Password</label>
-                <input id="new_password1" class="form-input"  style="margin-bottom: 0;"
-                    name="new_password1"  title="new_password1" type="password" value="">
-              </label>
-            </div>
-
-            <div class="input-wrapper">
-              <!-- input for new password2 -->
-              <label id="new_password2" class="label-small input-label font-near-black">
-                <label class="label-small input-label font-gray" for="new_password2" style="padding-top: 0.25rem;">Re-Enter New Password</label>
-                <input id="new_password2" class="form-input"  style="margin-bottom: 0;"
-                    name="new_password2"  title="new_password2" type="password" value="">
-              </label>
-            </div>
-
+            <!-- input for current password -->
+            <input id="currentPassword" class="center input" name="current_password" type="password" placeholder="Current password" title="Current password" autofocus>
+            <!-- input for new password -->
+            <input id="newPassword" class="center input" name="new_password1" type="password" placeholder="New password" title="New password">
+            <!-- input for duplicate new password -->
+            <input id="newPasswordDuplicate" class="center input" name="new_password2" type="password" placeholder="Re-enter new password" title="New password duplicate">
             <div id="buttonDiv">
-              <input id="changePasswordButton" class="button button-primary center" title="Add" type="submit" value="Save">
+              <input id="savePassword" class="button button-primary center" title="Add" type="submit" value="Save">
+              <a class="button button-secondary center" href="/settings/admin" title="Cancel">Cancel</a>
             </div>
-            <a class="button button-secondary center" href="/settings/admin" title="Cancel">Cancel</a>
           </form>
-
           <!-- FLASH MESSAGE -->
           {% include "snippets/flash_message" %}
-
           <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
           {% include "snippets/noscript" %}
-
         </div>
       </div>
-
       <script type="text/javascript" src="/js/change_password.js"></script>
 {%- endblock card -%}
diff --git a/peach-web/templates/settings/admin/forgot_password.html.tera b/peach-web/templates/settings/admin/forgot_password.html.tera
index 4cec989..85eff50 100644
--- a/peach-web/templates/settings/admin/forgot_password.html.tera
+++ b/peach-web/templates/settings/admin/forgot_password.html.tera
@@ -1,25 +1,20 @@
 {%- extends "nav" -%}
 {%- block card %}
-      <!--PUBLIC PAGE FOR SENDING A NEW TEMPORARY PASSWORD TO BE USED TO RESET YOUR PASSWORD -->
+      <!-- PASSWORD RESET REQUEST CARD -->
       <div class="card center">
-        <p class="text-notice" style="width: 80%;  margin:auto; margin-bottom: 35px; margin-top: 20px;">
-          Click the button below to send a new temporary password which can be used to change your device password.
-          <br/><br/>
-          The temporary password will be sent in an SSB private message to the admin of this device.
-        </p>
-
+        <div class="capsule capsule-container info-border">
+          <p class="card-text">Click the button below to send a new temporary password which can be used to change your device password.
+          </br></br>
+          The temporary password will be sent in an SSB private message to the admin of this device.</p>
+        </div>
         <form id="sendPasswordReset" action="/send_password_reset" method="post">
           <div id="buttonDiv">
-            <input type="submit" class="button center button-secondary" value="Send Password Reset" title="Send Password Reset Link"/>
+            <input class="button button-primary center" style="margin-top: 1rem;" type="submit" value="Send Password Reset" title="Send Password Reset Link"/>
           </div>
         </form>
-
         <!-- FLASH MESSAGE -->
         {% include "snippets/flash_message" %}
-
         <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
         {% include "snippets/noscript" %}
-
-        </div>
       </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/settings/admin/menu.html.tera b/peach-web/templates/settings/admin/menu.html.tera
index 98716a3..111cb73 100644
--- a/peach-web/templates/settings/admin/menu.html.tera
+++ b/peach-web/templates/settings/admin/menu.html.tera
@@ -2,12 +2,10 @@
 {%- block card %}
       <!-- ADMIN SETTINGS MENU -->
       <div class="card center">
-        <div class="card-container">
-          <!-- BUTTONS -->
-          <div id="settingsButtons">
-            <a id="change" class="button button-primary center" href="/settings/admin/change_password" title="Change Password">Change Password</a>
-            <a id="configure" class="button button-primary center" href="/settings/admin/configure" title="Configure Admin">Configure Admin</a>
-          </div>
+        <!-- BUTTONS -->
+        <div id="settingsButtons">
+          <a id="change" class="button button-primary center" href="/settings/admin/change_password" title="Change Password">Change Password</a>
+          <a id="configure" class="button button-primary center" href="/settings/admin/configure" title="Configure Admin">Configure Admin</a>
         </div>
       </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/settings/menu.html.tera b/peach-web/templates/settings/menu.html.tera
index 43253c8..8a7bdd0 100644
--- a/peach-web/templates/settings/menu.html.tera
+++ b/peach-web/templates/settings/menu.html.tera
@@ -2,13 +2,11 @@
 {%- block card %}
       <!-- SETTINGS MENU -->
       <div class="card center">
-        <div class="card-container">
-          <!-- BUTTONS -->
-          <div id="settingsButtons">
-            <a id="network" class="button button-primary center" href="/settings/network" title="Network Settings">Network</a>
-            <a id="scuttlebutt" class="button button-primary center" href="/settings/scuttlebutt" title="Scuttlebutt Settings">Scuttlebutt</a>
-            <a id="admin" class="button button-primary center" href="/settings/admin" title="Administrator Settings">Administration</a>
-          </div>
+        <!-- BUTTONS -->
+        <div id="settingsButtons">
+          <a id="network" class="button button-primary center" href="/settings/network" title="Network Settings">Network</a>
+          <a id="scuttlebutt" class="button button-primary center" href="/settings/scuttlebutt" title="Scuttlebutt Settings">Scuttlebutt</a>
+          <a id="admin" class="button button-primary center" href="/settings/admin" title="Administrator Settings">Administration</a>
         </div>
       </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/settings/scuttlebutt.html.tera b/peach-web/templates/settings/scuttlebutt.html.tera
index 24587ae..2ceb8de 100644
--- a/peach-web/templates/settings/scuttlebutt.html.tera
+++ b/peach-web/templates/settings/scuttlebutt.html.tera
@@ -2,19 +2,17 @@
 {%- block card %}
       <!-- SCUTTLEBUTT SETTINGS MENU -->
       <div class="card center">
-        <div class="card-container">
-          <!-- BUTTONS -->
-          <div id="settingsButtons">
-            <a id="networkKey" class="button button-primary center" href="/settings/scuttlebutt/network_key" title="Set Network Key">Set Network Key</a>
-            <a id="replicationHops" class="button button-primary center" href="/settings/scuttlebutt/hops" title="Set Replication Hops">Set Replication Hops</a>
-            <a id="removeFeeds" class="button button-primary center" href="/settings/scuttlebutt/remove_feeds" title="Remove Blocked Feeds">Remove Blocked Feeds</a>
-            <a id="setDirectory" class="button button-primary center" href="/settings/scuttlebutt/set_directory" title="Set Database Directory">Set Database Directory</a>
-            <a id="checkFilesystem" class="button button-primary center" href="/settings/scuttlebutt/check_fs" title="Check Filesystem">Check Filesystem</a>
-            <a id="repairFilesystem" class="button button-primary center" href="/settings/scuttlebutt/repair" title="Repair Filesystem">Repair Filesystem</a>
-            <a id="disable" class="button button-primary center" href="/settings/scuttlebutt/disable" title="Disable Sbot">Disable Sbot</a>
-            <a id="enable" class="button button-primary center" href="/settings/scuttlebutt/enable" title="Enable Sbot">Enable Sbot</a>
-            <a id="restart" class="button button-primary center" href="/settings/scuttlebutt/restart" title="Restart Sbot">Restart Sbot</a>
-          </div>
+        <!-- BUTTONS -->
+        <div id="settingsButtons">
+          <a id="networkKey" class="button button-primary center" href="/settings/scuttlebutt/network_key" title="Set Network Key">Set Network Key</a>
+          <a id="replicationHops" class="button button-primary center" href="/settings/scuttlebutt/hops" title="Set Replication Hops">Set Replication Hops</a>
+          <a id="removeFeeds" class="button button-primary center" href="/settings/scuttlebutt/remove_feeds" title="Remove Blocked Feeds">Remove Blocked Feeds</a>
+          <a id="setDirectory" class="button button-primary center" href="/settings/scuttlebutt/set_directory" title="Set Database Directory">Set Database Directory</a>
+          <a id="checkFilesystem" class="button button-primary center" href="/settings/scuttlebutt/check_fs" title="Check Filesystem">Check Filesystem</a>
+          <a id="repairFilesystem" class="button button-primary center" href="/settings/scuttlebutt/repair" title="Repair Filesystem">Repair Filesystem</a>
+          <a id="disable" class="button button-primary center" href="/settings/scuttlebutt/disable" title="Disable Sbot">Disable Sbot</a>
+          <a id="enable" class="button button-primary center" href="/settings/scuttlebutt/enable" title="Enable Sbot">Enable Sbot</a>
+          <a id="restart" class="button button-primary center" href="/settings/scuttlebutt/restart" title="Restart Sbot">Restart Sbot</a>
         </div>
       </div>
 {%- endblock card -%}