diff --git a/dist/js/functions.js b/dist/js/functions.js
deleted file mode 100644
index e9164308..00000000
--- a/dist/js/functions.js
+++ /dev/null
@@ -1,9 +0,0 @@
-function CheckPSK(psk, id) {
-  if(psk.value.length < 8 || psk.value.length > 63) { 
-    psk.style.background='#FFD0D0';
-    document.getElementById(id).disabled = true;
-  } else {
-    psk.style.background='#D0FFD0';
-    document.getElementById(id).disabled = false;
-  }
-}
diff --git a/includes/about.php b/includes/about.php
index 33e7ee7d..d675619a 100755
--- a/includes/about.php
+++ b/includes/about.php
@@ -1,34 +1,11 @@
 <?php
 
-include_once('includes/status_messages.php');
-
-function DisplayAbout()
-{
 /**
  *
  * Displays info about the RaspAP project
  *
  */
-?>
-  <div class="row">
-  <div class="col-lg-12">
-  <div class="panel panel-primary">
-  <div class="panel-heading"><i class="fa fa-info-circle fa-fw"></i> <?php echo _("About RaspAP"); ?></div>
-  <div class="panel-body text-center">
-
-    <h3><?php echo _("RaspAP") . " v" . RASPI_VERSION; ?></h3>
-    <h5><a href="https://github.com/billz/raspap-webgui/blob/master/LICENSE">GNU General Public License v3.0</a></h5>
-    <p><img src="img/authors-8bit-200px.png"></p>
-    <p>RaspAP is a co-creation of <a href="https://github.com/billz">@billz</a> and <a href="https://github.com/sirlagz">@SirLagz</a><br />
-    with the contributions of our <a href="https://github.com/billz/raspap-webgui/graphs/contributors">community</a>.</p>
-    <p><i class="fa fa-github fa-fw"></i> <a href="https://github.com/billz/raspap-webgui">https://github.com/billz/raspap-webgui</a></p>
-
-  </div><!-- /.panel-body -->
-  <div class="panel-footer"></div>
-  </div><!-- /.panel-primary -->
-  </div><!-- /.col-lg-12 -->
-  </div><!-- /.row -->
-<?php
+function DisplayAbout()
+{
+  echo renderTemplate("about");
 }
-
-
diff --git a/includes/admin.php b/includes/admin.php
index e58ac4d9..93537997 100755
--- a/includes/admin.php
+++ b/includes/admin.php
@@ -32,45 +32,6 @@ function DisplayAuthConfig($username, $password)
             $status->addMessage('Old password does not match', 'danger');
         }
     }
-?>
-  <div class="row">
-    <div class="col-lg-12">
-      <div class="panel panel-primary">
-        <div class="panel-heading"><i class="fa fa-lock fa-fw"></i><?php echo _("Configure Auth"); ?></div>
-        <div class="panel-body">
-          <p><?php $status->showMessages(); ?></p>
-          <form role="form" action="?page=auth_conf" method="POST">
-            <?php echo CSRFTokenFieldTag() ?>
-            <div class="row">
-              <div class="form-group col-md-4">
-                <label for="username"><?php echo _("Username"); ?></label>
-                <input type="text" class="form-control" name="username" value="<?php echo htmlspecialchars($username, ENT_QUOTES); ?>"/>
-              </div>
-            </div>
-            <div class="row">
-              <div class="form-group col-md-4">
-                <label for="password"><?php echo _("Old password"); ?></label>
-                <input type="password" class="form-control" name="oldpass"/>
-              </div>
-            </div>
-            <div class="row">
-              <div class="form-group col-md-4">
-                <label for="password"><?php echo _("New password"); ?></label>
-                <input type="password" class="form-control" name="newpass"/>
-              </div>
-            </div>
-            <div class="row">
-              <div class="form-group col-md-4">
-                <label for="password"><?php echo _("Repeat new password"); ?></label>
-                <input type="password" class="form-control" name="newpassagain"/>
-              </div>
-            </div>
-            <input type="submit" class="btn btn-outline btn-primary" name="UpdateAdminPassword" value="<?php echo _("Save settings"); ?>" />
-          </form>
-        </div><!-- /.panel-body -->
-      </div><!-- /.panel-default -->
-    </div><!-- /.col-lg-12 -->
-  </div><!-- /.row -->
-<?php
-}
 
+    echo renderTemplate("admin", compact("status", "username"));
+}
diff --git a/includes/configure_client.php b/includes/configure_client.php
index 4ee406c0..dbb384e2 100755
--- a/includes/configure_client.php
+++ b/includes/configure_client.php
@@ -95,43 +95,6 @@ function DisplayWPAConfig()
     nearbyWifiStations($networks);
     connectedWifiStations($networks);
 
-?>
+    echo renderTemplate("configure_client", compact("status"));
 
-  <div class="row">
-    <div class="col-lg-12">
-      <div class="panel panel-primary"> 
-        <div class="panel-heading"><i class="fa fa-signal fa-fw"></i> <?php echo _("Configure client"); ?></div>
-        <!-- /.panel-heading -->
-        <div class="panel-body">
-          <p><?php $status->showMessages(); ?></p>
-          <h4><?php echo _("Client settings"); ?></h4>
-              <div class="btn-group btn-block">
-              <button type="button" style="padding:10px;float: right;display: block;position: relative;margin-top: -55px;" class="col-md-2 btn btn-info js-reload-wifi-stations"><?php echo _("Rescan"); ?></button>
-            </div> 
-
-            <form method="POST" action="?page=wpa_conf" name="wpa_conf_form" class="row">
-                <?php echo CSRFTokenFieldTag() ?>
-              <input type="hidden" name="client_settings" ?>
-              <script>
-                function showPassword(index) {
-                    var x = document.getElementsByName("passphrase"+index)[0];
-                    if (x.type === "password") {
-                        x.type = "text";
-                    } else {
-                        x.type = "password";
-                    }
-                }
-              </script>
-
-              <div class="js-wifi-stations loading-spinner"></div>
-
-          </form>
-        </div><!-- ./ Panel body -->
-    <div class="panel-footer"><?php echo _("<strong>Note:</strong> WEP access points appear as 'Open'. RaspAP does not currently support connecting to WEP"); ?></div>
-      </div><!-- /.panel-primary -->
-    </div><!-- /.col-lg-12 -->
-  </div><!-- /.row -->
-<?php
 }
-
-?>
diff --git a/includes/dashboard.php b/includes/dashboard.php
index 33a87869..6a751c0d 100755
--- a/includes/dashboard.php
+++ b/includes/dashboard.php
@@ -170,114 +170,17 @@ function DisplayDashboard()
     } else {
         $status->addMessage(sprintf(_('Interface is %s.'), strtolower($interfaceState)), $classMsgDevicestatus);
     }
-    ?>
-    <div class="row">
-      <div class="col-lg-12">
-          <div class="panel panel-primary">
-            <div class="panel-heading"><i class="fa fa-dashboard fa-fw"></i> <?php echo _("Dashboard"); ?></div>
-              <div class="panel-body">
-                <p><?php $status->showMessages(); ?></p>
-                  <div class="row">
-                      <div class="col-md-6">
-                        <div class="panel panel-default">
-                          <div class="panel-body">
-                            <h4><?php echo _("Interface Information"); ?></h4>
-                              <div class="info-item"><?php echo _("Interface Name"); ?></div> <?php echo RASPI_WIFI_CLIENT_INTERFACE; ?><br />
-                              <div class="info-item"><?php echo _("IPv4 Address"); ?></div> <?php echo htmlspecialchars($ipv4Addrs, ENT_QUOTES); ?><br />
-                              <div class="info-item"><?php echo _("Subnet Mask"); ?></div> <?php echo htmlspecialchars($ipv4Netmasks, ENT_QUOTES); ?><br />
-                              <div class="info-item"><?php echo _("IPv6 Address"); ?></div> <?php echo htmlspecialchars($ipv6Addrs, ENT_QUOTES); ?><br />
-                              <div class="info-item"><?php echo _("Mac Address"); ?></div> <?php echo htmlspecialchars($macAddr, ENT_QUOTES); ?><br /><br />
-                          </div><!-- /.panel-body -->
-                        </div><!-- /.panel-default -->
-                        <div class="panel panel-default">
-                          <div class="panel-body">
-                            <h4><?php echo _("Interface Statistics"); ?></h4>
-                              <div class="info-item"><?php echo _("Received Packets"); ?></div> <?php echo htmlspecialchars($strRxPackets, ENT_QUOTES); ?><br />
-                              <div class="info-item"><?php echo _("Received Bytes"); ?></div> <?php echo htmlspecialchars($strRxBytes, ENT_QUOTES); ?><br /><br />
-                              <div class="info-item"><?php echo _("Transferred Packets"); ?></div> <?php echo htmlspecialchars($strTxPackets, ENT_QUOTES); ?><br />
-                              <div class="info-item"><?php echo _("Transferred Bytes"); ?></div> <?php echo htmlspecialchars($strTxBytes, ENT_QUOTES); ?><br />
-                          </div><!-- /.panel-body -->
-                        </div><!-- /.panel-default -->
-                        </div><!-- /.col-md-6 -->
-                      <div class="col-md-6">
-                        <div class="panel panel-default">
-                          <div class="panel-body wireless">
-                            <h4><?php echo _("Wireless Information"); ?></h4>
-                              <div class="info-item"><?php echo _("Connected To"); ?></div> <?php echo htmlspecialchars($connectedSSID, ENT_QUOTES); ?><br />
-                              <div class="info-item"><?php echo _("AP Mac Address"); ?></div> <?php echo htmlspecialchars($connectedBSSID, ENT_QUOTES); ?><br />
-                              <div class="info-item"><?php echo _("Bitrate"); ?></div> <?php echo htmlspecialchars($bitrate, ENT_QUOTES); ?><br />
-                              <div class="info-item"><?php echo _("Signal Level"); ?></div> <?php echo htmlspecialchars($signalLevel, ENT_QUOTES); ?><br />
-                              <div class="info-item"><?php echo _("Transmit Power"); ?></div> <?php echo htmlspecialchars($txPower, ENT_QUOTES); ?><br />
-                              <div class="info-item"><?php echo _("Frequency"); ?></div> <?php echo htmlspecialchars($frequency, ENT_QUOTES); ?><br /><br />
-                              <div class="info-item"><?php echo _("Link Quality"); ?></div>
-                                <div class="progress">
-                                <div class="progress-bar progress-bar-info progress-bar-striped active"
-                                  role="progressbar"
-                                  aria-valuenow="<?php echo htmlspecialchars($strLinkQuality, ENT_QUOTES); ?>" aria-valuemin="0" aria-valuemax="100"
-                                  style="width: <?php echo htmlspecialchars($strLinkQuality, ENT_QUOTES); ?>%;"><?php echo htmlspecialchars($strLinkQuality, ENT_QUOTES); ?>%
-                                </div>
-                              </div>
-                          </div><!-- /.panel-body -->
-                        </div><!-- /.panel-default -->
-                        <div class="panel panel-default">
-                          <div class="panel-body wireless">
-                            <h4><?php echo _("Connected Devices"); ?></h4>
-                            <div class="table-responsive">
-                              <table class="table table-hover">
-                                <thead>
-                                  <tr>
-                                    <th><?php echo _("Host name"); ?></th>
-                                    <th><?php echo _("IP Address"); ?></th>
-                                    <th><?php echo _("MAC Address"); ?></th>
-                                  </tr>
-                                </thead>
-                                <tbody>
-<?php
-$arrHostapdConf = parse_ini_file('/etc/raspap/hostapd.ini');
-if ($arrHostapdConf['WifiAPEnable'] == 1) {
-    $client_iface = 'uap0';
-} else {
-    $client_iface = RASPI_WIFI_CLIENT_INTERFACE;
-}
-exec('cat '.RASPI_DNSMASQ_LEASES.'| grep -E $(arp -i '.$client_iface.' -n | grep -oE "(([0-9]|[a-f]|[A-F]){2}:){5}([0-9]|[a-f]|[A-F]){2}" | tr "\n" "\|" | sed "s/.$//")', $clients);
-foreach ($clients as $client) {
-    $client_items = explode(' ', $client);
-    echo '<tr>'.PHP_EOL;
-    echo '<td>'.htmlspecialchars($client_items[3], ENT_QUOTES).'</td>'.PHP_EOL;
-    echo '<td>'.htmlspecialchars($client_items[2], ENT_QUOTES).'</td>'.PHP_EOL;
-    echo '<td>'.htmlspecialchars($client_items[1], ENT_QUOTES).'</td>'.PHP_EOL;
-    echo '</tr>'.PHP_EOL;
-};
-?>
-                                </tbody>
-                              </table>
-                            </div><!-- /.table-responsive -->
-                          </div><!-- /.panel-body -->
-                        </div><!-- /.panel-default -->
-                      </div><!-- /.col-md-6 -->
-                    </div><!-- /.row -->
 
-                 <div class="col-lg-12">
-                 <div class="row">
-                    <form action="?page=wlan0_info" method="POST">
-                    <?php echo CSRFTokenFieldTag() ?>
-                    <?php if (!$wlan0up) {
-                        echo '<input type="submit" class="btn btn-success" value="'._("Start ").RASPI_WIFI_CLIENT_INTERFACE.'" name="ifup_wlan0" />';
-} else {
-    echo '<input type="submit" class="btn btn-warning" value="'._("Stop ").RASPI_WIFI_CLIENT_INTERFACE.'"  name="ifdown_wlan0" />';
-}
-                ?>
-              <input type="button" class="btn btn-outline btn-primary" value="<?php echo _("Refresh"); ?>" onclick="document.location.reload(true)" />
-              </form>
-            </div>
-              </div>
-
-                </div><!-- /.panel-body -->
-                <div class="panel-footer"><?php echo _("Information provided by ip and iw and from system."); ?></div>
-            </div><!-- /.panel-default -->
-        </div><!-- /.col-lg-12 -->
-    </div><!-- /.row -->
-    <?php
+    echo renderTemplate("dashboard", compact(
+        "status",
+        "ipv4Addrs", "ipv4Netmasks",
+        "ipv6Addrs", "macAddr",
+        "strRxPackets", "strRxBytes",
+        "strTxPackets", "strTxBytes",
+        "connectedSSID", "connectedBSSID",
+        "bitrate", "signalLevel", "txPower", "frequency", "strLinkQuality",
+        "wlan0up"
+    ));
 }
 
 
diff --git a/includes/data_usage.php b/includes/data_usage.php
index 1eb40717..e3c1a583 100755
--- a/includes/data_usage.php
+++ b/includes/data_usage.php
@@ -6,98 +6,7 @@
 function DisplayDataUsage(&$extraFooterScripts)
 {
     exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
-?>
-  <div class="row">
-    <div class="col-lg-12">
-      <div class="panel panel-primary">
-        <div class="panel-heading"><i class="fa fa-bar-chart fa-fw"></i> <?php echo _("Data usage monitoring"); ?></div>
-          <div class="panel-body">
-
-            <ul id="tabbarBandwidth" class="nav nav-tabs" role="tablist">
-              <li role="presentation" class="active"><a href="#hourly" aria-controls="hourly" role="tab" data-toggle="tab"><?php echo _("Hourly"); ?></a></li>
-              <li role="presentation" class=""><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li>
-              <li role="presentation" class=""><a href="#monthly" aria-controls="monthly" role="tab" data-toggle="tab"><?php echo _("Monthly"); ?></a></li>
-            </ul>
-
-            <div id="tabsBandwidth" class="tabcontenttraffic tab-content">
-              <div role="tabpanel" class="tab-pane active fade in" id="hourly">
-                <div class="row">
-                  <div class="col-lg-12">
-                    <h4><?php echo _('Hourly traffic amount'); ?></h4>
-                    <label for="cbxInterfacehourly"><?php echo _('interface'); ?></label> 
-                    <select id="cbxInterfacehourly" class="form-control" name="interfacehourly">
-<?php
-foreach ($interfacesWlo as $interface) {
-echo '                              <option value="' , htmlentities($interface, ENT_QUOTES) , '">' ,
-    htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
-}
-?>
-                    </select>
-                    <div class="hidden alert alert-info" id="divLoaderBandwidthhourly">
-                    <?php echo sprintf(_("Loading %s bandwidth chart"), _('hourly')); ?>
-                    </div>
-                    <div id="divChartBandwidthhourly"></div>
-                    <div id="divTableBandwidthhourly"></div>
-                  </div>
-                </div>
-              </div><!-- /.tab-pane -->
-              <div role="tabpanel" class="tab-pane fade" id="daily">
-                <div class="row">
-                  <div class="col-lg-12">
-                    <h4><?php echo _('Daily traffic amount'); ?></h4>
-                    <label for="cbxInterfacedaily"><?php echo _('interface'); ?></label> 
-                    <select id="cbxInterfacedaily" class="form-control" name="interfacedaily">
-<?php
-foreach ($interfacesWlo as $interface) {
-echo '                              <option value="' , htmlentities($interface, ENT_QUOTES) , '">' ,
-    htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
-}
-?>
-                    </select>
-                    <div class="hidden alert alert-info" id="divLoaderBandwidthdaily">
-                    <?php echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?>
-                    </div>
-                    <div id="divChartBandwidthdaily"></div>
-                    <div id="divTableBandwidthdaily"></div>
-                  </div>
-                </div>
-              </div><!-- /.tab-pane -->
-              <div role="tabpanel" class="tab-pane fade" id="monthly">
-                <div class="row">
-                  <div class="col-lg-12">
-                    <h4><?php echo _("Monthly traffic amount"); ?></h4>
-                    <label for="cbxInterfacemonthly"><?php echo _('interface'); ?></label> 
-                    <select id="cbxInterfacemonthly" class="form-control" name="interfacemonthly">
-<?php
-foreach ($interfacesWlo as $interface) {
-echo '                            <option value="' , htmlentities($interface, ENT_QUOTES) , '">' ,
-    htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
-}
-?>
-                    </select>
-                    <div class="hidden alert alert-info" id="divLoaderBandwidthmonthly">
-                    <?php echo sprintf(_("Loading %s bandwidth chart"), _('monthly')); ?>
-                    </div>
-                    <div id="divChartBandwidthmonthly"></div>
-                    <div id="divTableBandwidthmonthly"></div>
-                  </div>
-                </div>
-              </div><!-- /.tab-pane -->
-            </div><!-- /.tabsBandwidth -->
-
-           </div><!-- /.panel-body -->
-         <div class="panel-footer"><?php echo _("Information provided by vnstat"); ?></div>
-       </div><!-- /.panel-primary -->
-      </div><!-- /.panel-primary -->
-    </div><!-- /.col-lg-12 -->
-  </div><!-- /.row -->
-<script type="text/javascript"<?php //echo ' nonce="'.$csp_page_nonce.'"'; ?>>
-// js translations:
-var t = new Array();
-t['send'] = '<?php echo addslashes(_('Send')); ?>';
-t['receive'] = '<?php echo addslashes(_('Receive')); ?>';
-</script>
-<?php
+    echo renderTemplate("data_usage", [ "interfaces" => $interfacesWlo ]);
 
     $extraFooterScripts[] = array('src'=>'vendor/raphael/raphael.min.js',
                                   'defer'=>false);
@@ -105,4 +14,3 @@ t['receive'] = '<?php echo addslashes(_('Receive')); ?>';
     $extraFooterScripts[] = array('src'=>'vendor/datatables/js/jquery.dataTables.min.js', 'defer'=>false);
     $extraFooterScripts[] = array('src'=>'js/bandwidthcharts.js', 'defer'=>false);
 }
-
diff --git a/includes/dhcp.php b/includes/dhcp.php
index 81bf14c8..7536cca0 100755
--- a/includes/dhcp.php
+++ b/includes/dhcp.php
@@ -132,195 +132,16 @@ function DisplayDHCPConfig()
         }
     }
 
-?>
-  <div class="row">
-  <div class="col-lg-12">
-      <div class="panel panel-primary">
-      <div class="panel-heading">
-        <i class="fa fa-exchange fa-fw"></i> <?php echo _("Configure DHCP"); ?>
-        <span class="label pull-right service-status-<?php echo $serviceStatus ?>">dnsmasq <?php echo _($serviceStatus) ?></span>
-      </div>
-        <!-- /.panel-heading -->
-        <div class="panel-body">
-        <p><?php $status->showMessages(); ?></p>
-        <form method="POST" action="?page=dhcpd_conf" class="js-dhcp-settings-form">
-        <?php echo CSRFTokenFieldTag() ?>
-        <!-- Nav tabs -->
-            <ul class="nav nav-tabs">
-                <li class="active"><a href="#server-settings" data-toggle="tab"><?php echo _("Server settings"); ?></a>
-                </li>
-                <li><a href="#static-leases" data-toggle="tab"><?php echo _("Static Leases") ?></a></li>
-                <li><a href="#client-list" data-toggle="tab"><?php echo _("Client list"); ?></a>
-                </li>
-            </ul>
-        <!-- Tab panes -->
-        <div class="tab-content">
-    <div class="tab-pane fade in active" id="server-settings">
-    <h4>DHCP server settings</h4>
-    <div class="row">
-      <div class="form-group col-md-4">
-        <label for="code">Interface</label>
-        <select class="form-control" name="interface">
-<?php
-        exec("ip -o link show | awk -F': ' '{print $2}'", $interfaces);
+    exec("ip -o link show | awk -F': ' '{print $2}'", $interfaces);
+    exec('cat ' . RASPI_DNSMASQ_LEASES, $leases);
 
-foreach ($interfaces as $inet) {
-    $select = '';
-    if ($inet === $conf['interface']) {
-        $select = ' selected="selected"';
-    }
-
-    echo '        <option value="'.htmlspecialchars($inet, ENT_QUOTES).'"'.
-    $select.'>'.htmlspecialchars($inet, ENT_QUOTES).'</option>' , PHP_EOL;
+    echo renderTemplate("dhcp", compact(
+        "status",
+        "serviceStatus",
+        "RangeStart", "RangeEnd",
+        "arrRangeLeaseTime",
+        "mselected", "hselected", "dselected", "infiniteselected",
+        "dnsmasq_state", "conf", "dhcpHost",
+        "interfaces", "leases"
+    ));
 }
-?>
-        </select>
-      </div>
-    </div>
-    <div class="row">
-      <div class="form-group col-md-4">
-        <label for="code"><?php echo _("Starting IP Address"); ?></label>
-        <input type="text" class="form-control"name="RangeStart" value="<?php echo htmlspecialchars($RangeStart, ENT_QUOTES); ?>" />
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="form-group col-md-4">
-        <label for="code"><?php echo _("Ending IP Address"); ?></label>
-        <input type="text" class="form-control" name="RangeEnd" value="<?php echo htmlspecialchars($RangeEnd, ENT_QUOTES); ?>" />
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="form-group col-xs-2 col-sm-2">
-        <label for="code"><?php echo _("Lease Time"); ?></label>
-        <input type="text" class="form-control" name="RangeLeaseTime" value="<?php echo htmlspecialchars($arrRangeLeaseTime[1], ENT_QUOTES); ?>" />
-      </div>
-      <div class="col-xs-2 col-sm-2">
-        <label for="code"><?php echo _("Interval"); ?></label>
-        <select name="RangeLeaseTimeUnits" class="form-control" >
-          <option value="m"<?php echo $mselected; ?>><?php echo _("Minute(s)"); ?></option>
-          <option value="h"<?php echo $hselected; ?>><?php echo _("Hour(s)"); ?></option>
-          <option value="d"<?php echo $dselected; ?>><?php echo _("Day(s)"); ?></option>
-          <option value="infinite"<?php echo $infiniteselected; ?>><?php echo _("Infinite"); ?></option>
-        </select> 
-      </div>
-    </div>
-
-    <input type="submit" class="btn btn-outline btn-primary" value="<?php echo _("Save settings"); ?>" name="savedhcpdsettings" />
-    <?php
-
-    if ($dnsmasq_state) {
-        echo '<input type="submit" class="btn btn-warning" value="' . _("Stop dnsmasq") . '" name="stopdhcpd" />';
-    } else {
-        echo'<input type="submit" class="btn btn-success" value="' .  _("Start dnsmasq") . '" name="startdhcpd" />';
-    }
-    ?>
-    </div><!-- /.tab-pane -->
-
-    <div class="tab-pane fade in" id="client-list">
-    <h4>Client list</h4>
-    <div class="row">
-    <div class="col-lg-12">
-      <div class="panel panel-default">
-      <div class="panel-heading"><?php echo _("Active DHCP leases"); ?></div>
-      <!-- /.panel-heading -->
-      <div class="panel-body">
-        <div class="table-responsive">
-          <table class="table table-hover">
-            <thead>
-              <tr>
-                <th><?php echo _("Expire time"); ?></th>
-                <th><?php echo _("MAC Address"); ?></th>
-                <th><?php echo _("IP Address"); ?></th>
-                <th><?php echo _("Host name"); ?></th>
-                <th><?php echo _("Client ID"); ?></th>
-              </tr>
-            </thead>
-            <tbody>
-<?php
-exec('cat ' . RASPI_DNSMASQ_LEASES, $leases);
-foreach ($leases as $lease) {
-    echo '              <tr>'.PHP_EOL;
-    $lease_items = explode(' ', $lease);
-    foreach ($lease_items as $lease_item) {
-        echo '                <td>'.htmlspecialchars($lease_item, ENT_QUOTES).'</td>'.PHP_EOL;
-    }
-    echo '              </tr>'.PHP_EOL;
-};
-?>
-            </tbody>
-          </table>
-        </div><!-- /.table-responsive -->
-      </div><!-- /.panel-body -->
-      </div><!-- /.panel -->
-    </div><!-- /.col-lg-12 -->
-    </div><!-- /.row -->
-    </div><!-- /.tab-pane -->
-
-    <div class="tab-pane fade in" id="static-leases">
-        <div class="dhcp-static-leases js-dhcp-static-lease-container">
-            <?php foreach ($dhcpHost as $host): ?>
-            <?php list($mac, $ip) = array_map("trim", explode(",", $host)); ?>
-            <div class="row dhcp-static-lease-row js-dhcp-static-lease-row">
-                <div class="col-md-5 col-xs-5">
-                    <input type="text" name="static_leases[mac][]" value="<?php echo htmlspecialchars($mac, ENT_QUOTES) ?>" placeholder="<?php echo _("MAC address") ?>" class="form-control">
-                </div>
-                <div class="col-md-5 col-xs-4">
-                    <input type="text" name="static_leases[ip][]" value="<?php echo htmlspecialchars($ip, ENT_QUOTES) ?>" placeholder="<?php echo _("IP address") ?>" class="form-control">
-                </div>
-                <div class="col-md-2 col-xs-3">
-                    <button type="button" class="btn btn-danger js-remove-dhcp-static-lease"><?php echo _("Remove") ?></button>
-                </div>
-            </div>
-            <?php endforeach ?>
-        </div>
-
-        <h5><?php echo _("Add static DHCP lease") ?></h5>
-        <div class="row dhcp-static-lease-row js-new-dhcp-static-lease">
-            <div class="col-md-5 col-xs-5">
-                <input type="text" name="mac" value="" placeholder="<?php echo _("MAC address") ?>" class="form-control" autofocus="autofocus">
-            </div>
-            <div class="col-md-5 col-xs-4">
-                <input type="text" name="ip" value="" placeholder="<?php echo _("IP address") ?>" class="form-control">
-            </div>
-            <div class="col-md-2 col-xs-3">
-                <button type="button" class="btn btn-success js-add-dhcp-static-lease"><?php echo _("Add") ?></button>
-            </div>
-        </div>
-
-        <template id="js-dhcp-static-lease-row">
-            <div class="row dhcp-static-lease-row js-dhcp-static-lease-row">
-                <div class="col-md-5 col-xs-5">
-                    <input type="text" name="static_leases[mac][]" value="{{ mac }}" placeholder="<?php echo _("MAC address") ?>" class="form-control">
-                </div>
-                <div class="col-md-5 col-xs-4">
-                    <input type="text" name="static_leases[ip][]" value="{{ ip }}" placeholder="<?php echo _("IP address") ?>" class="form-control">
-                </div>
-                <div class="col-md-2 col-xs-3">
-                    <button type="button" class="btn btn-warning js-remove-dhcp-static-lease"><?php echo _("Remove") ?></button>
-                </div>
-            </div>
-        </template>
-
-        <input type="submit" class="btn btn-outline btn-primary" value="<?php echo _("Save settings"); ?>" name="savedhcpdsettings" />
-        <?php
-
-        if ($dnsmasq_state) {
-            echo '<input type="submit" class="btn btn-warning" value="' . _("Stop dnsmasq") . '" name="stopdhcpd" />';
-        } else {
-            echo'<input type="submit" class="btn btn-success" value="' .  _("Start dnsmasq") . '" name="startdhcpd" />';
-        }
-        ?>
-    </div>
-
-    </div><!-- /.tab-content -->
-    </form>
-    </div><!-- ./ Panel body -->
-    <div class="panel-footer"> <?php echo _("Information provided by Dnsmasq"); ?></div>
-        </div><!-- /.panel-primary -->
-    </div><!-- /.col-lg-12 -->
-  </div><!-- /.row -->
-<?php
-}
-
diff --git a/includes/functions.php b/includes/functions.php
index 055f750e..75a6c3cd 100755
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -578,9 +578,9 @@ function SaveTORAndVPNConfig()
 /**
  * Renders a simple PHP template
  */
-function renderTemplate($name, $data)
+function renderTemplate($name, $data = [])
 {
-    $file = "../../templates/$name.php";
+    $file = realpath(dirname(__FILE__) . "/../templates/$name.php");
     if (!file_exists($file)) {
         return "template $name ($file) not found";
     }
diff --git a/includes/hostapd.php b/includes/hostapd.php
index e7facc94..774081a1 100755
--- a/includes/hostapd.php
+++ b/includes/hostapd.php
@@ -57,457 +57,13 @@ function DisplayHostAPDConfig()
         }
     };
 
-?>
-  <div class="row">
-    <div class="col-lg-12">
-      <div class="panel panel-primary">
-        <div class="panel-heading">
-            <i class="fa fa-dot-circle-o fa-fw"></i> <?php echo _("Configure hotspot"); ?>
-            <span class="label pull-right service-status-<?php echo $serviceStatus ?>">hostapd <?php echo _($serviceStatus) ?></span>
-        </div>
-        <!-- /.panel-heading -->
-        <div class="panel-body">
-      <p><?php $status->showMessages(); ?></p>
-          <form role="form" action="?page=hostapd_conf" method="POST">
-            <?php echo CSRFTokenFieldTag() ?>
-            <!-- Nav tabs -->
-            <ul class="nav nav-tabs">
-              <li class="active"><a href="#basic" data-toggle="tab"><?php echo _("Basic"); ?></a></li>
-              <li><a href="#security" data-toggle="tab"><?php echo _("Security"); ?></a></li>
-              <li><a href="#advanced" data-toggle="tab"><?php echo _("Advanced"); ?></a></li>
-              <li><a href="#logoutput" data-toggle="tab"><?php echo _("Logfile"); ?></a></li>
-            </ul>
-
-            <!-- Tab panes -->
-            <div class="tab-content">
-                <div class="tab-pane fade in active" id="basic">
-
-                <h4><?php echo _("Basic settings") ;?></h4>
-                <div class="row">
-                  <div class="form-group col-md-4">
-                    <label for="cbxinterface"><?php echo _("Interface") ;?></label>
-                    <?php
-                      SelectorOptions('interface', $interfaces, $arrConfig['interface'], 'cbxinterface');
-                    ?>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="form-group col-md-4">
-                    <label for="txtssid"><?php echo _("SSID"); ?></label>
-                    <input type="text" id="txtssid" class="form-control" name="ssid" value="<?php echo htmlspecialchars($arrConfig['ssid'], ENT_QUOTES); ?>" />
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="form-group col-md-4">
-                    <label for="cbxhwmode"><?php echo _("Wireless Mode") ;?></label>
-                    <?php
-                    $selectedHwMode = $arrConfig['hw_mode'];
-                    if (isset($arrConfig['ieee80211n'])) {
-                        if (strval($arrConfig['ieee80211n']) === '1') {
-                            $selectedHwMode = 'n';
-                        }
-                    }
-
-                    SelectorOptions('hw_mode', $arr80211Standard, $selectedHwMode, 'cbxhwmode'); ?>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="form-group col-md-4">
-                    <label for="cbxchannel"><?php echo _("Channel"); ?></label>
-                    <?php
-                    $selectablechannels = range(1, 13);
-                    $countries_2_4Ghz_max11ch = array('AG', 'BS', 'BB', 'BZ', 'CR', 'CU', 'DM', 'DO', 'SV', 'GD', 'GT',
-                                 'HT', 'HN', 'JM', 'MX', 'NI', 'PA', 'KN', 'LC', 'VC', 'TT',
-                                 'US', 'CA', 'UZ', 'CO');
-                    $countries_2_4Ghz_max14ch = array('JA');
-                    if (in_array($arrConfig['country_code'], $countries_max11channels)) {
-                        // In North America till channel 11 is the maximum allowed wi-fi 2.4Ghz channel.
-                        // Except for the US that allows channel 12 & 13 in low power mode with additional restrictions.
-                        // Canada that allows channel 12 in low power mode. Because it's unsure if low powered mode
-                        // can be supported the channels are not selectable for those countries.
-                        // source: https://en.wikipedia.org/wiki/List_of_WLAN_channels#Interference_concerns
-                        // Also Uzbekistan and Colombia allow to select till channel 11 as maximum channel on the 2.4Ghz wi-fi band.
-                        $selectablechannels = range(1, 11);
-                    } elseif (in_array($arrConfig['country_code'], $countries_2_4Ghz_max14ch)) {
-                        if ($arrConfig['hw_mode'] === 'b') {
-                            $selectablechannels = range(1, 14);
-                        }
-                    }
-                    SelectorOptions('channel', $selectablechannels, intval($arrConfig['channel']), 'cbxchannel'); ?>
-                  </div>
-                </div>
-              </div>
-              <div class="tab-pane fade" id="security">
-                <h4><?php echo _("Security settings"); ?></h4>
-                <div class="row">
-                  <div class="form-group col-md-4">
-                    <label for="cbxwpa"><?php echo _("Security type"); ?></label>
-                    <?php SelectorOptions('wpa', $arrSecurity, $arrConfig['wpa'], 'cbxwpa'); ?>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="form-group col-md-4">
-                    <label for="cbxwpapairwise"><?php echo _("Encryption Type"); ?></label>
-                    <?php SelectorOptions('wpa_pairwise', $arrEncType, $arrConfig['wpa_pairwise'], 'cbxwpapairwise'); ?>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="form-group col-md-4">
-                    <label for="txtwpapassphrase"><?php echo _("PSK"); ?></label>
-                    <input type="text" class="form-control" id="txtwpapassphrase" name="wpa_passphrase" value="<?php echo htmlspecialchars($arrConfig['wpa_passphrase'], ENT_QUOTES); ?>" />
-                  </div>
-                </div>
-              </div>
-              <div class="tab-pane fade" id="logoutput">
-          <h4><?php echo _("Logfile output"); ?></h4>
-                  <div class="row">
-                    <div class="form-group col-md-8">
-                        <?php
-                        if ($arrHostapdConf['LogEnable'] == 1) {
-                            $log = file_get_contents('/tmp/hostapd.log');
-                            echo '<br /><textarea class="logoutput">'.htmlspecialchars($log, ENT_QUOTES).'</textarea>';
-                        } else {
-                            echo "<br />Logfile output not enabled";
-                        }
-                        ?>
-                   </div>
-                </div>
-              </div>
-              <div class="tab-pane fade" id="advanced">
-        <h4><?php echo _("Advanced settings"); ?></h4>
-                <div class="row">
-                  <div class="col-md-4">
-            <div class="checkbox">
-<?php
-$checkedWifiAPEnabled = '';
-if ($arrHostapdConf['WifiAPEnable'] == 1) {
-    $checkedWifiAPEnabled = ' checked="checked"';
-}
-?>
-              <input id="chxwificlientap" name="wifiAPEnable" type="checkbox" class="form-check-input" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-width="100" value="1"<?php echo $checkedWifiAPEnabled; ?> />
-              <label class="form-check-label" for="chxwificlientap"><?php echo _("WiFi client AP mode"); ?></label>
-                    </div>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col-md-4">
-            <div class="checkbox">
-<?php
-$checkedLogEnabled = '';
-if ($arrHostapdConf['LogEnable'] == 1) {
-    $checkedLogEnabled = ' checked="checked"';
-}
-?>
-              <input id="chxlogenable" name="logEnable" type="checkbox" class="form-check-input" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-width="100" value="1"<?php echo $checkedLogEnabled; ?> />
-              <label class="form-check-label" for="chxlogenable"><?php echo _("Logfile output"); ?></label>
-                    </div>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col-md-4">
-            <div class="checkbox">
-<?php
-$checkedHiddenSSID = '';
-if ($arrConfig['ignore_broadcast_ssid'] == 1 || $arrConfig['ignore_broadcast_ssid'] == 2) {
-    $checkedHiddenSSID = ' checked="checked"';
-}
-?>
-              <input id="chxhiddenssid" name="hiddenSSID" type="checkbox" class="form-check-input" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-width="100" value="1"<?php echo $checkedHiddenSSID; ?> />
-              <label class="form-check-label" for="chxhiddenssid"><?php echo _("Hide SSID in broadcast"); ?></label>
-                    </div>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="form-group col-md-4">
-                    <label for="max_num_sta"><?php echo _("Maximum number of clients") ?></label>
-                    <input type="text" id="max_num_sta" class="form-control" name="max_num_sta" placeholder="2007" value="<?php echo $arrConfig["max_num_sta"] ?>" aria-describedby="max_num_sta_help">
-                    <span id="max_num_sta_help" class="help-block"><?php echo _("Configures the <code>max_num_sta</code> option of hostapd. The default and maximum is 2007. If empty or 0, the default applies.") ?></span>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="form-group col-md-4">
-                  <label for="cbxcountries"><?php echo _("Country Code"); ?></label>
-                  <input type="hidden" id="selected_country" value="<?php echo htmlspecialchars($arrConfig['country_code'], ENT_QUOTES); ?>">
-                  <select  class="form-control" id="cbxcountries" name="country_code">
-                    <option value="AF">Afghanistan</option>
-                    <option value="AX">Åland Islands</option>
-                    <option value="AL">Albania</option>
-                    <option value="DZ">Algeria</option>
-                    <option value="AS">American Samoa</option>
-                    <option value="AD">Andorra</option>
-                    <option value="AO">Angola</option>
-                    <option value="AI">Anguilla</option>
-                    <option value="AQ">Antarctica</option>
-                    <option value="AG">Antigua and Barbuda</option>
-                    <option value="AR">Argentina</option>
-                    <option value="AM">Armenia</option>
-                    <option value="AW">Aruba</option>
-                    <option value="AU">Australia</option>
-                    <option value="AT">Austria</option>
-                    <option value="AZ">Azerbaijan</option>
-                    <option value="BS">Bahamas</option>
-                    <option value="BH">Bahrain</option>
-                    <option value="BD">Bangladesh</option>
-                    <option value="BB">Barbados</option>
-                    <option value="BY">Belarus</option>
-                    <option value="BE">Belgium</option>
-                    <option value="BZ">Belize</option>
-                    <option value="BJ">Benin</option>
-                    <option value="BM">Bermuda</option>
-                    <option value="BT">Bhutan</option>
-                    <option value="BO">Bolivia, Plurinational State of</option>
-                    <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
-                    <option value="BA">Bosnia and Herzegovina</option>
-                    <option value="BW">Botswana</option>
-                    <option value="BV">Bouvet Island</option>
-                    <option value="BR">Brazil</option>
-                    <option value="IO">British Indian Ocean Territory</option>
-                    <option value="BN">Brunei Darussalam</option>
-                    <option value="BG">Bulgaria</option>
-                    <option value="BF">Burkina Faso</option>
-                    <option value="BI">Burundi</option>
-                    <option value="KH">Cambodia</option>
-                    <option value="CM">Cameroon</option>
-                    <option value="CA">Canada</option>
-                    <option value="CV">Cape Verde</option>
-                    <option value="KY">Cayman Islands</option>
-                    <option value="CF">Central African Republic</option>
-                    <option value="TD">Chad</option>
-                    <option value="CL">Chile</option>
-                    <option value="CN">China</option>
-                    <option value="CX">Christmas Island</option>
-                    <option value="CC">Cocos (Keeling) Islands</option>
-                    <option value="CO">Colombia</option>
-                    <option value="KM">Comoros</option>
-                    <option value="CG">Congo</option>
-                    <option value="CD">Congo, the Democratic Republic of the</option>
-                    <option value="CK">Cook Islands</option>
-                    <option value="CR">Costa Rica</option>
-                    <option value="CI">Côte d'Ivoire</option>
-                    <option value="HR">Croatia</option>
-                    <option value="CU">Cuba</option>
-                    <option value="CW">Curaçao</option>
-                    <option value="CY">Cyprus</option>
-                    <option value="CZ">Czech Republic</option>
-                    <option value="DK">Denmark</option>
-                    <option value="DJ">Djibouti</option>
-                    <option value="DM">Dominica</option>
-                    <option value="DO">Dominican Republic</option>
-                    <option value="EC">Ecuador</option>
-                    <option value="EG">Egypt</option>
-                    <option value="SV">El Salvador</option>
-                    <option value="GQ">Equatorial Guinea</option>
-                    <option value="ER">Eritrea</option>
-                    <option value="EE">Estonia</option>
-                    <option value="ET">Ethiopia</option>
-                    <option value="FK">Falkland Islands (Malvinas)</option>
-                    <option value="FO">Faroe Islands</option>
-                    <option value="FJ">Fiji</option>
-                    <option value="FI">Finland</option>
-                    <option value="FR">France</option>
-                    <option value="GF">French Guiana</option>
-                    <option value="PF">French Polynesia</option>
-                    <option value="TF">French Southern Territories</option>
-                    <option value="GA">Gabon</option>
-                    <option value="GM">Gambia</option>
-                    <option value="GE">Georgia</option>
-                    <option value="DE">Germany</option>
-                    <option value="GH">Ghana</option>
-                    <option value="GI">Gibraltar</option>
-                    <option value="GR">Greece</option>
-                    <option value="GL">Greenland</option>
-                    <option value="GD">Grenada</option>
-                    <option value="GP">Guadeloupe</option>
-                    <option value="GU">Guam</option>
-                    <option value="GT">Guatemala</option>
-                    <option value="GG">Guernsey</option>
-                    <option value="GN">Guinea</option>
-                    <option value="GW">Guinea-Bissau</option>
-                    <option value="GY">Guyana</option>
-                    <option value="HT">Haiti</option>
-                    <option value="HM">Heard Island and McDonald Islands</option>
-                    <option value="VA">Holy See (Vatican City State)</option>
-                    <option value="HN">Honduras</option>
-                    <option value="HK">Hong Kong</option>
-                    <option value="HU">Hungary</option>
-                    <option value="IS">Iceland</option>
-                    <option value="IN">India</option>
-                    <option value="ID">Indonesia</option>
-                    <option value="IR">Iran, Islamic Republic of</option>
-                    <option value="IQ">Iraq</option>
-                    <option value="IE">Ireland</option>
-                    <option value="IM">Isle of Man</option>
-                    <option value="IL">Israel</option>
-                    <option value="IT">Italy</option>
-                    <option value="JM">Jamaica</option>
-                    <option value="JP">Japan</option>
-                    <option value="JE">Jersey</option>
-                    <option value="JO">Jordan</option>
-                    <option value="KZ">Kazakhstan</option>
-                    <option value="KE">Kenya</option>
-                    <option value="KI">Kiribati</option>
-                    <option value="KP">Korea, Democratic People's Republic of</option>
-                    <option value="KR">Korea, Republic of</option>
-                    <option value="KW">Kuwait</option>
-                    <option value="KG">Kyrgyzstan</option>
-                    <option value="LA">Lao People's Democratic Republic</option>
-                    <option value="LV">Latvia</option>
-                    <option value="LB">Lebanon</option>
-                    <option value="LS">Lesotho</option>
-                    <option value="LR">Liberia</option>
-                    <option value="LY">Libya</option>
-                    <option value="LI">Liechtenstein</option>
-                    <option value="LT">Lithuania</option>
-                    <option value="LU">Luxembourg</option>
-                    <option value="MO">Macao</option>
-                    <option value="MK">Macedonia, the former Yugoslav Republic of</option>
-                    <option value="MG">Madagascar</option>
-                    <option value="MW">Malawi</option>
-                    <option value="MY">Malaysia</option>
-                    <option value="MV">Maldives</option>
-                    <option value="ML">Mali</option>
-                    <option value="MT">Malta</option>
-                    <option value="MH">Marshall Islands</option>
-                    <option value="MQ">Martinique</option>
-                    <option value="MR">Mauritania</option>
-                    <option value="MU">Mauritius</option>
-                    <option value="YT">Mayotte</option>
-                    <option value="MX">Mexico</option>
-                    <option value="FM">Micronesia, Federated States of</option>
-                    <option value="MD">Moldova, Republic of</option>
-                    <option value="MC">Monaco</option>
-                    <option value="MN">Mongolia</option>
-                    <option value="ME">Montenegro</option>
-                    <option value="MS">Montserrat</option>
-                    <option value="MA">Morocco</option>
-                    <option value="MZ">Mozambique</option>
-                    <option value="MM">Myanmar</option>
-                    <option value="NA">Namibia</option>
-                    <option value="NR">Nauru</option>
-                    <option value="NP">Nepal</option>
-                    <option value="NL">Netherlands</option>
-                    <option value="NC">New Caledonia</option>
-                    <option value="NZ">New Zealand</option>
-                    <option value="NI">Nicaragua</option>
-                    <option value="NE">Niger</option>
-                    <option value="NG">Nigeria</option>
-                    <option value="NU">Niue</option>
-                    <option value="NF">Norfolk Island</option>
-                    <option value="MP">Northern Mariana Islands</option>
-                    <option value="NO">Norway</option>
-                    <option value="OM">Oman</option>
-                    <option value="PK">Pakistan</option>
-                    <option value="PW">Palau</option>
-                    <option value="PS">Palestinian Territory, Occupied</option>
-                    <option value="PA">Panama</option>
-                    <option value="PG">Papua New Guinea</option>
-                    <option value="PY">Paraguay</option>
-                    <option value="PE">Peru</option>
-                    <option value="PH">Philippines</option>
-                    <option value="PN">Pitcairn</option>
-                    <option value="PL">Poland</option>
-                    <option value="PT">Portugal</option>
-                    <option value="PR">Puerto Rico</option>
-                    <option value="QA">Qatar</option>
-                    <option value="RE">Réunion</option>
-                    <option value="RO">Romania</option>
-                    <option value="RU">Russian Federation</option>
-                    <option value="RW">Rwanda</option>
-                    <option value="BL">Saint Barthélemy</option>
-                    <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
-                    <option value="KN">Saint Kitts and Nevis</option>
-                    <option value="LC">Saint Lucia</option>
-                    <option value="MF">Saint Martin (French part)</option>
-                    <option value="PM">Saint Pierre and Miquelon</option>
-                    <option value="VC">Saint Vincent and the Grenadines</option>
-                    <option value="WS">Samoa</option>
-                    <option value="SM">San Marino</option>
-                    <option value="ST">Sao Tome and Principe</option>
-                    <option value="SA">Saudi Arabia</option>
-                    <option value="SN">Senegal</option>
-                    <option value="RS">Serbia</option>
-                    <option value="SC">Seychelles</option>
-                    <option value="SL">Sierra Leone</option>
-                    <option value="SG">Singapore</option>
-                    <option value="SX">Sint Maarten (Dutch part)</option>
-                    <option value="SK">Slovakia</option>
-                    <option value="SI">Slovenia</option>
-                    <option value="SB">Solomon Islands</option>
-                    <option value="SO">Somalia</option>
-                    <option value="ZA">South Africa</option>
-                    <option value="GS">South Georgia and the South Sandwich Islands</option>
-                    <option value="SS">South Sudan</option>
-                    <option value="ES">Spain</option>
-                    <option value="LK">Sri Lanka</option>
-                    <option value="SD">Sudan</option>
-                    <option value="SR">Suriname</option>
-                    <option value="SJ">Svalbard and Jan Mayen</option>
-                    <option value="SZ">Swaziland</option>
-                    <option value="SE">Sweden</option>
-                    <option value="CH">Switzerland</option>
-                    <option value="SY">Syrian Arab Republic</option>
-                    <option value="TW">Taiwan, Province of China</option>
-                    <option value="TJ">Tajikistan</option>
-                    <option value="TZ">Tanzania, United Republic of</option>
-                    <option value="TH">Thailand</option>
-                    <option value="TL">Timor-Leste</option>
-                    <option value="TG">Togo</option>
-                    <option value="TK">Tokelau</option>
-                    <option value="TO">Tonga</option>
-                    <option value="TT">Trinidad and Tobago</option>
-                    <option value="TN">Tunisia</option>
-                    <option value="TR">Turkey</option>
-                    <option value="TM">Turkmenistan</option>
-                    <option value="TC">Turks and Caicos Islands</option>
-                    <option value="TV">Tuvalu</option>
-                    <option value="UG">Uganda</option>
-                    <option value="UA">Ukraine</option>
-                    <option value="AE">United Arab Emirates</option>
-                    <option value="GB">United Kingdom</option>
-                    <option value="US">United States</option>
-                    <option value="UM">United States Minor Outlying Islands</option>
-                    <option value="UY">Uruguay</option>
-                    <option value="UZ">Uzbekistan</option>
-                    <option value="VU">Vanuatu</option>
-                    <option value="VE">Venezuela, Bolivarian Republic of</option>
-                    <option value="VN">Viet Nam</option>
-                    <option value="VG">Virgin Islands, British</option>
-                    <option value="VI">Virgin Islands, U.S.</option>
-                    <option value="WF">Wallis and Futuna</option>
-                    <option value="EH">Western Sahara</option>
-                    <option value="YE">Yemen</option>
-                    <option value="ZM">Zambia</option>
-                    <option value="ZW">Zimbabwe</option>
-                  </select>
-<script type="text/javascript">
-var country = document.getElementById("selected_country").value;
-var countries = document.getElementById("cbxcountries");
-var ops = countries.getElementsByTagName("option");
-for (var i = 0; i < ops.length; ++i) {
-    if(ops[i].value == country){
-        ops[i].selected=true;
-        break;
-    }
-}
-
-</script>
-                </div>
-              </div><!-- /.panel-body -->
-            </div><!-- /.panel-primary -->
-            <input type="submit" class="btn btn-outline btn-primary" name="SaveHostAPDSettings" value="<?php echo _("Save settings"); ?>" />
-            <?php
-            if ($hostapdstatus[0] == 0) {
-                echo '<input type="submit" class="btn btn-success" name="StartHotspot" value="' . _("Start hotspot") . '"/>' , PHP_EOL;
-            } else {
-                echo '<input type="submit" class="btn btn-warning" name="StopHotspot" value="' . _("Stop hotspot") . '"/>' , PHP_EOL;
-            };
-?>
-          </form>
-        </div></div><!-- /.panel-primary -->
-      <div class="panel-footer"> <?php echo _("Information provided by hostapd"); ?></div>
-    </div><!-- /.col-lg-12 -->
-  </div><!-- /.row -->
-<?php
+    echo renderTemplate("hostapd", compact(
+        "status",
+        "serviceStatus", "hostapdstatus",
+        "interfaces", "arrConfig",
+        "arr80211Standard", "selectedHwMode",
+        "arrSecurity", "arrEncType", "arrHostapdConf"
+    ));
 }
 
 function SaveHostAPDConfig($wpa_array, $enc_types, $modes, $interfaces, $status)
diff --git a/includes/networking.php b/includes/networking.php
index 9884c398..16ae7a82 100755
--- a/includes/networking.php
+++ b/includes/networking.php
@@ -16,111 +16,5 @@ function DisplayNetworkingConfig()
     foreach ($interfaces as $interface) {
         exec("ip a show $interface", $$interface);
     }
-?>
-
-<div class="row">
-    <div class="col-lg-12">
-       <div class="panel panel-primary">
-          <div class="panel-heading">
-      <i class="fa fa-sitemap fa-fw"></i> <?php echo _("Configure networking"); ?></div>
-          <div class="panel-body">
-            <div id="msgNetworking"></div>
-              <ul class="nav nav-tabs">
-          <li role="presentation" class="active"><a href="#summary" aria-controls="summary" role="tab" data-toggle="tab"><?php echo _("Summary"); ?></a></li>
-                <?php
-                foreach ($interfaces as $interface) {
-                    echo '<li role="presentation"><a href="#'.htmlspecialchars($interface, ENT_QUOTES).'" aria-controls="'.htmlspecialchars($interface, ENT_QUOTES).'" role="tab" data-toggle="tab">'.htmlspecialchars($interface, ENT_QUOTES).'</a></li>';
-                }
-                ?>
-              </ul>
-                <div class="tab-content">
-                  <div role="tabpanel" class="tab-pane active" id="summary">
-            <h4><?php echo _("Current settings"); ?></h4>
-                      <div class="row">
-                        <?php
-                        foreach ($interfaces as $interface) {
-                            echo '<div class="col-md-6">
-                            <div class="panel panel-default">
-                                <div class="panel-heading">'.htmlspecialchars($interface, ENT_QUOTES).'</div>
-                                <div class="panel-body">
-                                  <pre class="unstyled" id="'.htmlspecialchars($interface, ENT_QUOTES).'-summary"></pre>
-                                </div>
-                            </div>
-                            </div>';
-                        }
-                        ?>
-                      </div><!-- /.row -->
-                    <div class="col-lg-12">
-                      <div class="row">
-              <a href="#" class="btn btn-outline btn-primary" id="btnSummaryRefresh"><i class="fa fa-refresh"></i> <?php echo _("Refresh"); ?></a>
-                      </div><!-- /.row -->
-                    </div><!-- /.col-lg-12 -->
-                  </div><!-- /.tab-pane -->
-<?php
-foreach ($interfaces as $interface) {
-    echo '
-                      <div role="tabpanel" class="tab-pane fade in" id="'.htmlspecialchars($interface, ENT_QUOTES).'">
-                        <div class="row">
-                          <div class="col-lg-6">
-                            <form id="frm-'.htmlspecialchars($interface, ENT_QUOTES).'">
-                            ' . CSRFTokenFieldTag() . '
-                              <div class="form-group">
-                                <h4>' . _("Adapter IP Address Settings") . '</h4>
-                                <div class="btn-group" data-toggle="buttons">
-                                  <label class="btn btn-primary">
-                                    <input type="radio" name="'.htmlspecialchars($interface, ENT_QUOTES).'-addresstype" id="'.htmlspecialchars($interface, ENT_QUOTES).'-dhcp" autocomplete="off">' . _("DHCP") . '
-                                  </label>
-                                  <label class="btn btn-primary">
-                                    <input type="radio" name="'.htmlspecialchars($interface, ENT_QUOTES).'-addresstype" id="'.htmlspecialchars($interface, ENT_QUOTES).'-static" autocomplete="off">' . _("Static IP") . '
-                                  </label>
-                                </div><!-- /.btn-group -->
-                                <h4>' . _("Enable Fallback to Static Option") . '</h4>
-                                <div class="btn-group" data-toggle="buttons">
-                                  <label class="btn btn-primary">
-                                    <input type="radio" name="'.htmlspecialchars($interface, ENT_QUOTES).'-dhcpfailover" id="'.htmlspecialchars($interface, ENT_QUOTES).'-failover" autocomplete="off">' . _("Enabled") . '
-                                  </label>
-                                  <label class="btn btn-warning">
-                                    <input type="radio" name="'.htmlspecialchars($interface, ENT_QUOTES).'-dhcpfailover" id="'.htmlspecialchars($interface, ENT_QUOTES).'-nofailover" autocomplete="off">' . _("Disabled") . '
-                                  </label>
-                                </div><!-- /.btn-group -->
-                              </div><!-- /.form-group -->
-                              <hr />
-                              <h4>' . _("Static IP Options") . '</h4>
-                              <div class="form-group">
-                                <label for="'.htmlspecialchars($interface, ENT_QUOTES).'-ipaddress">' . _("IP Address") . '</label>
-                                <input type="text" class="form-control" id="'.htmlspecialchars($interface, ENT_QUOTES).'-ipaddress" placeholder="0.0.0.0">
-                              </div>
-                              <div class="form-group">
-                                <label for="'.htmlspecialchars($interface, ENT_QUOTES).'-netmask">' . _("Subnet Mask") . '</label>
-                                <input type="text" class="form-control" id="'.htmlspecialchars($interface, ENT_QUOTES).'-netmask" placeholder="255.255.255.0">
-                              </div>
-                              <div class="form-group">
-                                <label for="'.htmlspecialchars($interface, ENT_QUOTES).'-gateway">' . _("Default Gateway") . '</label>
-                                <input type="text" class="form-control" id="'.htmlspecialchars($interface, ENT_QUOTES).'-gateway" placeholder="0.0.0.0">
-                              </div>
-                              <div class="form-group">
-                                <label for="'.htmlspecialchars($interface, ENT_QUOTES).'-dnssvr">' . _("DNS Server") . '</label>
-                                <input type="text" class="form-control" id="'.htmlspecialchars($interface, ENT_QUOTES).'-dnssvr" placeholder="0.0.0.0">
-                              </div>
-                              <div class="form-group">
-                                <label for="'.htmlspecialchars($interface, ENT_QUOTES).'-dnssvralt">' . _("Alternate DNS Server") . '</label>
-                                <input type="text" class="form-control" id="'.htmlspecialchars($interface, ENT_QUOTES).'-dnssvralt" placeholder="0.0.0.0">
-                              </div>
-                              <a href="#" class="btn btn-outline btn-primary intsave" data-int="'.htmlspecialchars($interface, ENT_QUOTES).'">' . _("Save settings") . '</a>
-                              <a href="#" class="btn btn-warning intapply" data-int="'.htmlspecialchars($interface, ENT_QUOTES).'">' . _("Apply settings") . '</a>
-                              </form>
-                            </div>
-                      </div><!-- /.tab-panel -->
-                    </div>';
+    echo renderTemplate("networking", compact("status", "interfaces"));
 }
-?>
-              </div><!-- /.tab-content -->
-            </div><!-- /.panel-body -->
-        <div class="panel-footer"><?php echo _("Information provided by /sys/class/net"); ?></div>
-        </div><!-- /.panel-primary -->
-      </div><!-- /.col-lg-12 -->
-    </div>
-    
-<?php
-}
-?>
diff --git a/includes/system.php b/includes/system.php
index ed849237..e7b7e8a2 100755
--- a/includes/system.php
+++ b/includes/system.php
@@ -1,6 +1,7 @@
 <?php
 
 include_once('includes/status_messages.php');
+include_once('lib/system.php');
 
 /**
  *
@@ -62,6 +63,8 @@ function DisplaySystem()
 {
 
     $status = new StatusMessages();
+    $system = new System();
+
 
     if (isset($_POST['SaveLanguage'])) {
         if (isset($_POST['locale'])) {
@@ -88,143 +91,15 @@ function DisplaySystem()
     'tr_TR.UTF-8' => 'Türkçe'
     );
 
-    // hostname
-    exec("hostname -f", $hostarray);
-    $hostname = $hostarray[0];
-
-    // uptime
-    $uparray = explode(" ", exec("cat /proc/uptime"));
-    $seconds = round($uparray[0], 0);
-    $minutes = $seconds / 60;
-    $hours   = $minutes / 60;
-    $days    = floor($hours / 24);
-    $hours   = floor($hours   - ($days * 24));
-    $minutes = floor($minutes - ($days * 24 * 60) - ($hours * 60));
-    $uptime= '';
-    if ($days    != 0) {
-        $uptime .= $days    . ' day'    . (($days    > 1)? 's ':' ');
-    }
-    if ($hours   != 0) {
-        $uptime .= $hours   . ' hour'   . (($hours   > 1)? 's ':' ');
-    }
-    if ($minutes != 0) {
-        $uptime .= $minutes . ' minute' . (($minutes > 1)? 's ':' ');
-    }
-
-    // mem used
-    $memused_status = "primary";
-    exec("free -m | awk '/Mem:/ { total=$2 ; used=$3 } END { print used/total*100}'", $memarray);
-    $memused = floor($memarray[0]);
-    if ($memused > 90) {
-        $memused_status = "danger";
-    } elseif ($memused > 75) {
-        $memused_status = "warning";
-    } elseif ($memused >  0) {
-        $memused_status = "success";
-    }
-
-    // cpu load
-    $cores   = exec("grep -c ^processor /proc/cpuinfo");
-    $loadavg = exec("awk '{print $1}' /proc/loadavg");
-    $cpuload = floor(($loadavg * 100) / $cores);
-    if ($cpuload > 90) {
-        $cpuload_status = "danger";
-    } elseif ($cpuload > 75) {
-        $cpuload_status = "warning";
-    } elseif ($cpuload >  0) {
-        $cpuload_status = "success";
-    }
-
-    ?>
-  <div class="row">
-  <div class="col-lg-12">
-  <div class="panel panel-primary">
-  <div class="panel-heading"><i class="fa fa-cube fa-fw"></i> <?php echo _("System"); ?></div>
-  <div class="panel-body">
-
-    <?php
     if (isset($_POST['system_reboot'])) {
-        echo '<div class="alert alert-warning">' . _("System Rebooting Now!") . '</div>';
+        $status->addMessage("System Rebooting Now!", "warning", false);
         $result = shell_exec("sudo /sbin/reboot");
     }
     if (isset($_POST['system_shutdown'])) {
-        echo '<div class="alert alert-warning">' . _("System Shutting Down Now!") . '</div>';
+        $status->addMessage("System Shutting Down Now!", "warning", false);
         $result = shell_exec("sudo /sbin/shutdown -h now");
     }
-    ?>
 
-  <p><?php $status->showMessages(); ?></p>
-  <form role="form" action="?page=system_info" method="POST">
-  <?php echo CSRFTokenFieldTag() ?>
-  <ul class="nav nav-tabs" role="tablist">
-    <li role="presentation" class="active systemtab"><a href="#system" aria-controls="system" role="tab" data-toggle="tab"><?php echo _("System"); ?></a></li>
-    <li role="presentation" class="languagetab"><a href="#language" aria-controls="language" role="tab" data-toggle="tab"><?php echo _("Language"); ?></a></li>
-    <li role="presentation" class="consoletab"><a href="#console" aria-controls="console" role="tab" data-toggle="tab"><?php echo _("Console"); ?></a></li>
-  </ul>
-
-  <div class="systemtabcontent tab-content">
-    <div role="tabpanel" class="tab-pane active" id="system">
-      <div class="row">
-        <div class="col-lg-6">
-          <h4><?php echo _("System Information"); ?></h4>
-          <div class="info-item"><?php echo _("Hostname"); ?></div> <?php echo htmlspecialchars($hostname, ENT_QUOTES); ?></br>
-          <div class="info-item"><?php echo _("Pi Revision"); ?></div> <?php echo htmlspecialchars(RPiVersion(), ENT_QUOTES); ?></br>
-          <div class="info-item"><?php echo _("Uptime"); ?></div>   <?php echo htmlspecialchars($uptime, ENT_QUOTES); ?></br></br>
-          <div class="info-item"><?php echo _("Memory Used"); ?></div>
-          <div class="progress">
-          <div class="progress-bar progress-bar-<?php echo htmlspecialchars($memused_status, ENT_QUOTES); ?> progress-bar-striped active"
-          role="progressbar"
-          aria-valuenow="<?php echo htmlspecialchars($memused, ENT_QUOTES); ?>" aria-valuemin="0" aria-valuemax="100"
-          style="width: <?php echo htmlspecialchars($memused, ENT_QUOTES); ?>%;"><?php echo htmlspecialchars($memused, ENT_QUOTES); ?>%
-          </div>
-          </div>
-          <div class="info-item"><?php echo _("CPU Load"); ?></div>
-          <div class="progress">
-          <div class="progress-bar progress-bar-<?php echo htmlspecialchars($cpuload_status, ENT_QUOTES); ?> progress-bar-striped active"
-          role="progressbar"
-          aria-valuenow="<?php echo htmlspecialchars($cpuload, ENT_QUOTES); ?>" aria-valuemin="0" aria-valuemax="100"
-          style="width: <?php echo htmlspecialchars($cpuload, ENT_QUOTES); ?>%;"><?php echo htmlspecialchars($cpuload, ENT_QUOTES); ?>%
-          </div>
-          </div>
-
-          <form action="?page=system_info" method="POST">
-          <?php echo CSRFTokenFieldTag() ?>
-          <input type="submit" class="btn btn-warning" name="system_reboot"   value="<?php echo _("Reboot"); ?>" />
-          <input type="submit" class="btn btn-warning" name="system_shutdown" value="<?php echo _("Shutdown"); ?>" />
-          <input type="button" class="btn btn-outline btn-primary" value="<?php echo _("Refresh"); ?>" onclick="document.location.reload(true)" />
-          </form>
-        </div>
-      </div>
-    </div>
-
-    <div role="tabpanel" class="tab-pane" id="language">
-      <h4><?php echo _("Language settings") ;?></h4>
-      <div class="row">
-        <div class="form-group col-md-4">
-          <label for="code"><?php echo _("Select a language"); ?></label>
-            <?php SelectorOptions('locale', $arrLocales, $_SESSION['locale']); ?>
-        </div>
-      </div>
-      <input type="submit" class="btn btn-outline btn-primary" name="SaveLanguage" value="<?php echo _("Save settings"); ?>" />
-      <input type="button" class="btn btn-outline btn-primary" value="<?php echo _("Refresh"); ?>" onclick="document.location.reload(true)" />
-    </div>
-
-    <div role="tabpanel" class="tab-pane" id="console">
-      <div class="row">
-        <div class="col-lg-12"> 
-          <iframe src="includes/webconsole.php" class="webconsole"></iframe>
-        </div>
-      </div>
-    </div>
-
-  </div><!-- /.systemtabcontent -->
-
-  </form>
-  </div><!-- /.panel-body -->
-  <div class="panel-footer"></div>
-  </div><!-- /.panel-primary -->
-  </div><!-- /.col-lg-12 -->
-  </div><!-- /.row -->
-    <?php
+    echo renderTemplate("system", compact("arrLocales", "status", "system"));
 }
 
diff --git a/includes/themes.php b/includes/themes.php
index 431e57d0..82de4aed 100755
--- a/includes/themes.php
+++ b/includes/themes.php
@@ -5,52 +5,17 @@
 */
 function DisplayThemeConfig()
 {
+    $themes = [
+        "default"    => "RaspAP (default)",
+        "hackernews" => "HackerNews",
+        "terminal"   => "Terminal"
+    ];
+    $themeFiles = [
+        "default"    => "custom.css",
+        "hackernews" => "hackernews.css",
+        "terminal"   => "terminal.css"
+    ];
+    $selectedTheme = array_search($_COOKIE['theme'], $themeFiles);
 
-    $cselected = '';
-    $hselected = '';
-    $tselected = '';
-
-    switch ($_COOKIE['theme']) {
-        case "custom.css":
-            $cselected = ' selected="selected"';
-            break;
-        case "hackernews.css":
-            $hselected = ' selected="selected"';
-            break;
-        case "terminal.css":
-            $tselected = ' selected="selected"';
-            break;
-    }
-
-?>
-  <div class="row">
-  <div class="col-lg-12">
-  <div class="panel panel-primary">
-  <div class="panel-heading"><i class="fa fa-wrench fa-fw"></i> <?php echo _("Change Theme"); ?></div>
-  <div class="panel-body">
-
-    <h4><?php echo _("Theme settings"); ?></h4>
-
-    <div class="row">
-      <div class="form-group col-md-6">
-        <label for="code"><?php echo _("Select a theme"); ?></label>
-          <select class="form-control" id="theme-select"><?php echo _("Select a Theme"); ?>
-            <option value="default" class="theme-link"<?php echo $cselected; ?>>RaspAP (default)</option>
-            <option value="hackernews" class="theme-link"<?php echo $hselected; ?>>HackerNews</option>
-            <option value="terminal" class="theme-link"<?php echo $tselected; ?>>Terminal</option>
-          </select>
-      </div>
-    </div>
-
-    <form action="?page=system_info" method="POST">
-      <?php echo CSRFTokenFieldTag() ?>
-      <input type="button" class="btn btn-outline btn-primary" value="<?php echo _("Refresh"); ?>" onclick="document.location.reload(true)" />
-    </form>
-
-  </div><!-- /.panel-body -->
-  </div><!-- /.panel-primary -->
-  </div><!-- /.col-lg-12 -->
-  </div><!-- /.row -->
-<?php
+    echo renderTemplate("themes", compact("themes", "selectedTheme"));
 }
-
diff --git a/index.php b/index.php
index 3538df03..719379df 100755
--- a/index.php
+++ b/index.php
@@ -242,9 +242,6 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
       </div><!-- /#page-wrapper --> 
     </div><!-- /#wrapper -->
 
-    <!-- RaspAP JavaScript -->
-    <script src="dist/js/functions.js"></script>
-
     <!-- jQuery -->
     <script src="vendor/jquery/jquery.min.js"></script>
 
diff --git a/js/custom.js b/js/custom.js
index 958658b2..6fd77882 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -193,6 +193,39 @@ function loadWifiStations(refresh) {
 
 $(".js-reload-wifi-stations").on("click", loadWifiStations(true));
 
+$(document).on("click", ".js-toggle-password", function(e) {
+    var button = $(e.target)
+    var field  = $(button.data("target"));
+    if (field.is(":input")) {
+        e.preventDefault();
+
+        if (!button.data("__toggle-with-initial")) {
+            button.data("__toggle-with-initial", button.text())
+        }
+
+        if (field.attr("type") === "password") {
+            button.text(button.data("toggle-with"));
+            field.attr("type", "text");
+        } else {
+            button.text(button.data("__toggle-with-initial"));
+            field.attr("type", "password");
+        }
+    }
+});
+
+$(document).on("keyup", ".js-validate-psk", function(e) {
+    var field  = $(e.target);
+    var colors = field.data("colors").split(",");
+    var target = $(field.data("target"));
+    if (field.val().length < 8 || field.val().length > 63) {
+        field.css("backgroundColor", colors[0]);
+        target.attr("disabled", true);
+    } else {
+        field.css("backgroundColor", colors[1]);
+        target.attr("disabled", false);
+    }
+});
+
 $(document)
     .ajaxSend(setCSRFTokenHeader)
     .ready(contentLoaded)
diff --git a/lib/system.php b/lib/system.php
new file mode 100644
index 00000000..5e6399ac
--- /dev/null
+++ b/lib/system.php
@@ -0,0 +1,48 @@
+<?php
+
+class System {
+  public function hostname() {
+    return shell_exec("hostname -f");
+  }
+
+  public function uptime() {
+    $uparray = explode(" ", exec("cat /proc/uptime"));
+    $seconds = round($uparray[0], 0);
+    $minutes = $seconds / 60;
+    $hours   = $minutes / 60;
+    $days    = floor($hours / 24);
+    $hours   = floor($hours   - ($days * 24));
+    $minutes = floor($minutes - ($days * 24 * 60) - ($hours * 60));
+    $uptime= '';
+    if ($days    != 0) {
+        $uptime .= $days    . ' day'    . (($days    > 1)? 's ':' ');
+    }
+    if ($hours   != 0) {
+        $uptime .= $hours   . ' hour'   . (($hours   > 1)? 's ':' ');
+    }
+    if ($minutes != 0) {
+        $uptime .= $minutes . ' minute' . (($minutes > 1)? 's ':' ');
+    }
+
+    return $uptime;
+  }
+
+  public function usedMemory() {
+    $used = shell_exec("free -m | awk '/Mem:/ { total=$2 ; used=$3 } END { print used/total*100}'");
+    return floor($used);
+  }
+
+  public function processorCount() {
+    $procs = shell_exec("nproc --all");
+    return intval($proc);
+  }
+
+  public function loadAvg1Min() {
+    $load = exec("awk '{print $1}' /proc/loadavg");
+    return floatval($load);
+  }
+
+  public function systemLoadPercentage() {
+    return floor(($this->loadAvg1Min() * 100) / $this->processorCount());
+  }
+}
\ No newline at end of file
diff --git a/templates/about.php b/templates/about.php
new file mode 100644
index 00000000..50729834
--- /dev/null
+++ b/templates/about.php
@@ -0,0 +1,18 @@
+<div class="row">
+  <div class="col-lg-12">
+    <div class="panel panel-primary">
+      <div class="panel-heading"><i class="fa fa-info-circle fa-fw"></i> <?php echo _("About RaspAP"); ?></div>
+      <div class="panel-body text-center">
+
+        <h3><?php echo _("RaspAP") . " v" . RASPI_VERSION; ?></h3>
+        <h5><a href="https://github.com/billz/raspap-webgui/blob/master/LICENSE">GNU General Public License v3.0</a></h5>
+        <p><img src="img/authors-8bit-200px.png"></p>
+        <p>RaspAP is a co-creation of <a href="https://github.com/billz">@billz</a> and <a href="https://github.com/sirlagz">@SirLagz</a><br />
+          with the contributions of our <a href="https://github.com/billz/raspap-webgui/graphs/contributors">community</a>.</p>
+          <p><i class="fa fa-github fa-fw"></i> <a href="https://github.com/billz/raspap-webgui">https://github.com/billz/raspap-webgui</a></p>
+
+      </div><!-- /.panel-body -->
+      <div class="panel-footer"></div>
+    </div><!-- /.panel-primary -->
+  </div><!-- /.col-lg-12 -->
+</div><!-- /.row -->
diff --git a/templates/admin.php b/templates/admin.php
new file mode 100644
index 00000000..10d08f3e
--- /dev/null
+++ b/templates/admin.php
@@ -0,0 +1,38 @@
+<div class="row">
+  <div class="col-lg-12">
+    <div class="panel panel-primary">
+      <div class="panel-heading"><i class="fa fa-lock fa-fw"></i><?php echo _("Configure Auth"); ?></div>
+      <div class="panel-body">
+        <?php $status->showMessages(); ?>
+        <form role="form" action="?page=auth_conf" method="POST">
+          <?php echo CSRFTokenFieldTag() ?>
+          <div class="row">
+            <div class="form-group col-md-4">
+              <label for="username"><?php echo _("Username"); ?></label>
+              <input type="text" class="form-control" name="username" value="<?php echo htmlspecialchars($username, ENT_QUOTES); ?>"/>
+            </div>
+          </div>
+          <div class="row">
+            <div class="form-group col-md-4">
+              <label for="password"><?php echo _("Old password"); ?></label>
+              <input type="password" class="form-control" name="oldpass"/>
+            </div>
+          </div>
+          <div class="row">
+            <div class="form-group col-md-4">
+              <label for="password"><?php echo _("New password"); ?></label>
+              <input type="password" class="form-control" name="newpass"/>
+            </div>
+          </div>
+          <div class="row">
+            <div class="form-group col-md-4">
+              <label for="password"><?php echo _("Repeat new password"); ?></label>
+              <input type="password" class="form-control" name="newpassagain"/>
+            </div>
+          </div>
+          <input type="submit" class="btn btn-outline btn-primary" name="UpdateAdminPassword" value="<?php echo _("Save settings"); ?>" />
+        </form>
+      </div><!-- /.panel-body -->
+    </div><!-- /.panel-default -->
+  </div><!-- /.col-lg-12 -->
+</div><!-- /.row -->
diff --git a/templates/configure_client.php b/templates/configure_client.php
new file mode 100644
index 00000000..053dc452
--- /dev/null
+++ b/templates/configure_client.php
@@ -0,0 +1,23 @@
+<div class="row">
+  <div class="col-lg-12">
+    <div class="panel panel-primary">
+      <div class="panel-heading"><i class="fa fa-signal fa-fw"></i> <?php echo _("Configure client"); ?></div>
+      <!-- /.panel-heading -->
+      <div class="panel-body">
+        <?php $status->showMessages(); ?>
+        <h4><?php echo _("Client settings"); ?></h4>
+
+        <div class="btn-group btn-block">
+          <button type="button" style="padding:10px;float: right;display: block;position: relative;margin-top: -55px;" class="col-md-2 btn btn-info js-reload-wifi-stations"><?php echo _("Rescan"); ?></button>
+        </div>
+
+        <form method="POST" action="?page=wpa_conf" name="wpa_conf_form" class="row">
+          <?php echo CSRFTokenFieldTag() ?>
+          <input type="hidden" name="client_settings" ?>
+          <div class="js-wifi-stations loading-spinner"></div>
+        </form>
+      </div><!-- ./ Panel body -->
+      <div class="panel-footer"><?php echo _("<strong>Note:</strong> WEP access points appear as 'Open'. RaspAP does not currently support connecting to WEP"); ?></div>
+    </div><!-- /.panel-primary -->
+  </div><!-- /.col-lg-12 -->
+</div><!-- /.row -->
diff --git a/templates/dashboard.php b/templates/dashboard.php
new file mode 100644
index 00000000..35a4afb5
--- /dev/null
+++ b/templates/dashboard.php
@@ -0,0 +1,102 @@
+<?php
+$arrHostapdConf = parse_ini_file('/etc/raspap/hostapd.ini');
+if ($arrHostapdConf['WifiAPEnable'] == 1) {
+  $client_iface = 'uap0';
+} else {
+  $client_iface = RASPI_WIFI_CLIENT_INTERFACE;
+}
+exec('cat '.RASPI_DNSMASQ_LEASES.'| grep -E $(arp -i '.$client_iface.' -n | grep -oE "(([0-9]|[a-f]|[A-F]){2}:){5}([0-9]|[a-f]|[A-F]){2}" | tr "\n" "\|" | sed "s/.$//")', $clients);
+?>
+<div class="row">
+  <div class="col-lg-12">
+    <div class="panel panel-primary">
+      <div class="panel-heading"><i class="fa fa-dashboard fa-fw"></i> <?php echo _("Dashboard"); ?></div>
+      <div class="panel-body">
+        <?php $status->showMessages(); ?>
+        <div class="row">
+          <div class="col-md-6">
+            <div class="panel panel-default">
+              <div class="panel-body">
+                <h4><?php echo _("Interface Information"); ?></h4>
+                <div class="info-item"><?php echo _("Interface Name"); ?></div> <?php echo RASPI_WIFI_CLIENT_INTERFACE; ?><br />
+                <div class="info-item"><?php echo _("IPv4 Address"); ?></div> <?php echo htmlspecialchars($ipv4Addrs, ENT_QUOTES); ?><br />
+                <div class="info-item"><?php echo _("Subnet Mask"); ?></div> <?php echo htmlspecialchars($ipv4Netmasks, ENT_QUOTES); ?><br />
+                <div class="info-item"><?php echo _("IPv6 Address"); ?></div> <?php echo htmlspecialchars($ipv6Addrs, ENT_QUOTES); ?><br />
+                <div class="info-item"><?php echo _("Mac Address"); ?></div> <?php echo htmlspecialchars($macAddr, ENT_QUOTES); ?><br /><br />
+              </div><!-- /.panel-body -->
+            </div><!-- /.panel-default -->
+            <div class="panel panel-default">
+              <div class="panel-body">
+                <h4><?php echo _("Interface Statistics"); ?></h4>
+                <div class="info-item"><?php echo _("Received Packets"); ?></div> <?php echo htmlspecialchars($strRxPackets, ENT_QUOTES); ?><br />
+                <div class="info-item"><?php echo _("Received Bytes"); ?></div> <?php echo htmlspecialchars($strRxBytes, ENT_QUOTES); ?><br /><br />
+                <div class="info-item"><?php echo _("Transferred Packets"); ?></div> <?php echo htmlspecialchars($strTxPackets, ENT_QUOTES); ?><br />
+                <div class="info-item"><?php echo _("Transferred Bytes"); ?></div> <?php echo htmlspecialchars($strTxBytes, ENT_QUOTES); ?><br />
+              </div><!-- /.panel-body -->
+            </div><!-- /.panel-default -->
+          </div><!-- /.col-md-6 -->
+          <div class="col-md-6">
+            <div class="panel panel-default">
+              <div class="panel-body wireless">
+                <h4><?php echo _("Wireless Information"); ?></h4>
+                <div class="info-item"><?php echo _("Connected To"); ?></div> <?php echo htmlspecialchars($connectedSSID, ENT_QUOTES); ?><br />
+                <div class="info-item"><?php echo _("AP Mac Address"); ?></div> <?php echo htmlspecialchars($connectedBSSID, ENT_QUOTES); ?><br />
+                <div class="info-item"><?php echo _("Bitrate"); ?></div> <?php echo htmlspecialchars($bitrate, ENT_QUOTES); ?><br />
+                <div class="info-item"><?php echo _("Signal Level"); ?></div> <?php echo htmlspecialchars($signalLevel, ENT_QUOTES); ?><br />
+                <div class="info-item"><?php echo _("Transmit Power"); ?></div> <?php echo htmlspecialchars($txPower, ENT_QUOTES); ?><br />
+                <div class="info-item"><?php echo _("Frequency"); ?></div> <?php echo htmlspecialchars($frequency, ENT_QUOTES); ?><br /><br />
+                <div class="info-item"><?php echo _("Link Quality"); ?></div>
+                <div class="progress">
+                  <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="<?php echo htmlspecialchars($strLinkQuality, ENT_QUOTES); ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo htmlspecialchars($strLinkQuality, ENT_QUOTES); ?>%;"><?php echo htmlspecialchars($strLinkQuality, ENT_QUOTES); ?>%</div>
+                </div>
+              </div><!-- /.panel-body -->
+            </div><!-- /.panel-default -->
+            <div class="panel panel-default">
+              <div class="panel-body wireless">
+                <h4><?php echo _("Connected Devices"); ?></h4>
+                <div class="table-responsive">
+                  <table class="table table-hover">
+                    <thead>
+                      <tr>
+                        <th><?php echo _("Host name"); ?></th>
+                        <th><?php echo _("IP Address"); ?></th>
+                        <th><?php echo _("MAC Address"); ?></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <?php foreach ($clients as $client): ?>
+                        <?php $props = explode(' ', $client) ?>
+                        <tr>
+                          <td><?php echo htmlspecialchars($props[3], ENT_QUOTES) ?></td>
+                          <td><?php echo htmlspecialchars($props[2], ENT_QUOTES) ?></td>
+                          <td><?php echo htmlspecialchars($props[1], ENT_QUOTES) ?></td>
+                        </tr>
+                      <?php endforeach ?>
+                    </tbody>
+                  </table>
+                </div><!-- /.table-responsive -->
+              </div><!-- /.panel-body -->
+            </div><!-- /.panel-default -->
+          </div><!-- /.col-md-6 -->
+        </div><!-- /.row -->
+
+        <div class="col-lg-12">
+          <div class="row">
+            <form action="?page=wlan0_info" method="POST">
+              <?php echo CSRFTokenFieldTag() ?>
+
+              <?php if (!$wlan0up): ?>
+                <input type="submit" class="btn btn-success" value="<?php echo _("Start ").RASPI_WIFI_CLIENT_INTERFACE ?>" name="ifup_wlan0" />
+              <?php else: ?>
+                <input type="submit" class="btn btn-warning" value="<?php echo _("Stop ").RASPI_WIFI_CLIENT_INTERFACE ?>"  name="ifdown_wlan0" />
+              <?php endif ?>
+              <a href="?page=<?php echo $_GET['page'] ?>" class="btn btn-outline btn-primary"><?php echo _("Refresh") ?></a>
+            </form>
+          </div>
+        </div>
+
+      </div><!-- /.panel-body -->
+      <div class="panel-footer"><?php echo _("Information provided by ip and iw and from system."); ?></div>
+    </div><!-- /.panel-default -->
+  </div><!-- /.col-lg-12 -->
+</div><!-- /.row -->
diff --git a/templates/data_usage.php b/templates/data_usage.php
new file mode 100644
index 00000000..a4c67f2b
--- /dev/null
+++ b/templates/data_usage.php
@@ -0,0 +1,84 @@
+<div class="row">
+  <div class="col-lg-12">
+    <div class="panel panel-primary">
+      <div class="panel-heading"><i class="fa fa-bar-chart fa-fw"></i> <?php echo _("Data usage monitoring"); ?></div>
+        <div class="panel-body">
+
+          <ul id="tabbarBandwidth" class="nav nav-tabs" role="tablist">
+            <li role="presentation" class="active"><a href="#hourly" aria-controls="hourly" role="tab" data-toggle="tab"><?php echo _("Hourly"); ?></a></li>
+            <li role="presentation" class=""><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li>
+            <li role="presentation" class=""><a href="#monthly" aria-controls="monthly" role="tab" data-toggle="tab"><?php echo _("Monthly"); ?></a></li>
+          </ul>
+
+          <div id="tabsBandwidth" class="tabcontenttraffic tab-content">
+            <div role="tabpanel" class="tab-pane active fade in" id="hourly">
+              <div class="row">
+                <div class="col-lg-12">
+                  <h4><?php echo _('Hourly traffic amount'); ?></h4>
+                  <label for="cbxInterfacehourly"><?php echo _('interface'); ?></label>
+                  <select id="cbxInterfacehourly" class="form-control" name="interfacehourly">
+                    <?php foreach ($interfaces as $if): ?>
+                      <?php $if_quoted = htmlspecialchars($if, ENT_QUOTES) ?>
+                      <option value="<?php echo $if_quoted ?>"><?php echo $if_quoted ?></option>
+                    <?php endforeach ?>
+                  </select>
+                  <div class="hidden alert alert-info" id="divLoaderBandwidthhourly">
+                  <?php echo sprintf(_("Loading %s bandwidth chart"), _('hourly')); ?>
+                  </div>
+                  <div id="divChartBandwidthhourly"></div>
+                  <div id="divTableBandwidthhourly"></div>
+                </div>
+              </div>
+            </div><!-- /.tab-pane -->
+            <div role="tabpanel" class="tab-pane fade" id="daily">
+              <div class="row">
+                <div class="col-lg-12">
+                  <h4><?php echo _('Daily traffic amount'); ?></h4>
+                  <label for="cbxInterfacedaily"><?php echo _('interface'); ?></label>
+                  <select id="cbxInterfacedaily" class="form-control" name="interfacedaily">
+                    <?php foreach ($interfaces as $if): ?>
+                      <?php $if_quoted = htmlspecialchars($if, ENT_QUOTES) ?>
+                      <option value="<?php echo $if_quoted ?>"><?php echo $if_quoted ?></option>
+                    <?php endforeach ?>
+                  </select>
+                  <div class="hidden alert alert-info" id="divLoaderBandwidthdaily">
+                  <?php echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?>
+                  </div>
+                  <div id="divChartBandwidthdaily"></div>
+                  <div id="divTableBandwidthdaily"></div>
+                </div>
+              </div>
+            </div><!-- /.tab-pane -->
+            <div role="tabpanel" class="tab-pane fade" id="monthly">
+              <div class="row">
+                <div class="col-lg-12">
+                  <h4><?php echo _("Monthly traffic amount"); ?></h4>
+                  <label for="cbxInterfacemonthly"><?php echo _('interface'); ?></label>
+                  <select id="cbxInterfacemonthly" class="form-control" name="interfacemonthly">
+                    <?php foreach ($interfaces as $if): ?>
+                      <?php $if_quoted = htmlspecialchars($if, ENT_QUOTES) ?>
+                      <option value="<?php echo $if_quoted ?>"><?php echo $if_quoted ?></option>
+                    <?php endforeach ?>
+                  </select>
+                  <div class="hidden alert alert-info" id="divLoaderBandwidthmonthly">
+                  <?php echo sprintf(_("Loading %s bandwidth chart"), _('monthly')); ?>
+                  </div>
+                  <div id="divChartBandwidthmonthly"></div>
+                  <div id="divTableBandwidthmonthly"></div>
+                </div>
+              </div>
+            </div><!-- /.tab-pane -->
+          </div><!-- /.tabsBandwidth -->
+
+         </div><!-- /.panel-body -->
+       <div class="panel-footer"><?php echo _("Information provided by vnstat"); ?></div>
+     </div><!-- /.panel-primary -->
+    </div><!-- /.panel-primary -->
+  </div><!-- /.col-lg-12 -->
+</div><!-- /.row -->
+<script type="text/javascript"<?php //echo ' nonce="'.$csp_page_nonce.'"'; ?>>
+// js translations:
+var t = new Array();
+t['send'] = '<?php echo addslashes(_('Send')); ?>';
+t['receive'] = '<?php echo addslashes(_('Receive')); ?>';
+</script>
diff --git a/templates/dhcp.php b/templates/dhcp.php
new file mode 100644
index 00000000..8dcce473
--- /dev/null
+++ b/templates/dhcp.php
@@ -0,0 +1,174 @@
+<div class="row">
+<div class="col-lg-12">
+  <div class="panel panel-primary">
+  <div class="panel-heading">
+    <i class="fa fa-exchange fa-fw"></i> <?php echo _("Configure DHCP"); ?>
+    <span class="label pull-right service-status-<?php echo $serviceStatus ?>">dnsmasq <?php echo _($serviceStatus) ?></span>
+  </div>
+    <!-- /.panel-heading -->
+    <div class="panel-body">
+    <?php $status->showMessages(); ?>
+    <form method="POST" action="?page=dhcpd_conf" class="js-dhcp-settings-form">
+    <?php echo CSRFTokenFieldTag() ?>
+    <!-- Nav tabs -->
+        <ul class="nav nav-tabs">
+            <li class="active"><a href="#server-settings" data-toggle="tab"><?php echo _("Server settings"); ?></a>
+            </li>
+            <li><a href="#static-leases" data-toggle="tab"><?php echo _("Static Leases") ?></a></li>
+            <li><a href="#client-list" data-toggle="tab"><?php echo _("Client list"); ?></a>
+            </li>
+        </ul>
+    <!-- Tab panes -->
+    <div class="tab-content">
+<div class="tab-pane fade in active" id="server-settings">
+<h4>DHCP server settings</h4>
+<div class="row">
+  <div class="form-group col-md-4">
+    <label for="code">Interface</label>
+    <select class="form-control" name="interface">
+    <?php foreach ($interfaces as $if): ?>
+      <?php $if_quoted = htmlspecialchars($if, ENT_QUOTES) ?>
+      <?php $selected  = $if === $conf['interface'] ? ' selected="selected"' : '' ?>
+      <option value="<?php echo $if_quoted ?>"<?php echo $selected ?>><?php echo $if_quoted ?></option>
+    <?php endforeach ?>
+    </select>
+  </div>
+</div>
+<div class="row">
+  <div class="form-group col-md-4">
+    <label for="code"><?php echo _("Starting IP Address"); ?></label>
+    <input type="text" class="form-control"name="RangeStart" value="<?php echo htmlspecialchars($RangeStart, ENT_QUOTES); ?>" />
+  </div>
+</div>
+
+<div class="row">
+  <div class="form-group col-md-4">
+    <label for="code"><?php echo _("Ending IP Address"); ?></label>
+    <input type="text" class="form-control" name="RangeEnd" value="<?php echo htmlspecialchars($RangeEnd, ENT_QUOTES); ?>" />
+  </div>
+</div>
+
+<div class="row">
+  <div class="form-group col-xs-2 col-sm-2">
+    <label for="code"><?php echo _("Lease Time"); ?></label>
+    <input type="text" class="form-control" name="RangeLeaseTime" value="<?php echo htmlspecialchars($arrRangeLeaseTime[1], ENT_QUOTES); ?>" />
+  </div>
+  <div class="col-xs-2 col-sm-2">
+    <label for="code"><?php echo _("Interval"); ?></label>
+    <select name="RangeLeaseTimeUnits" class="form-control" >
+      <option value="m"<?php echo $mselected; ?>><?php echo _("Minute(s)"); ?></option>
+      <option value="h"<?php echo $hselected; ?>><?php echo _("Hour(s)"); ?></option>
+      <option value="d"<?php echo $dselected; ?>><?php echo _("Day(s)"); ?></option>
+      <option value="infinite"<?php echo $infiniteselected; ?>><?php echo _("Infinite"); ?></option>
+    </select>
+  </div>
+</div>
+
+<input type="submit" class="btn btn-outline btn-primary" value="<?php echo _("Save settings"); ?>" name="savedhcpdsettings" />
+
+<?php if ($dnsmasq_state): ?>
+  <input type="submit" class="btn btn-warning" value="<?php echo _("Stop dnsmasq") ?>" name="stopdhcpd" />
+<?php else: ?>
+  <input type="submit" class="btn btn-success" value="<?php echo _("Start dnsmasq") ?>" name="startdhcpd" />
+<?php endif ?>
+</div><!-- /.tab-pane -->
+
+<div class="tab-pane fade in" id="client-list">
+<h4>Client list</h4>
+<div class="row">
+<div class="col-lg-12">
+  <div class="panel panel-default">
+  <div class="panel-heading"><?php echo _("Active DHCP leases"); ?></div>
+  <!-- /.panel-heading -->
+  <div class="panel-body">
+    <div class="table-responsive">
+      <table class="table table-hover">
+        <thead>
+          <tr>
+            <th><?php echo _("Expire time"); ?></th>
+            <th><?php echo _("MAC Address"); ?></th>
+            <th><?php echo _("IP Address"); ?></th>
+            <th><?php echo _("Host name"); ?></th>
+            <th><?php echo _("Client ID"); ?></th>
+          </tr>
+        </thead>
+        <tbody>
+        <?php foreach ($leases as $lease): ?>
+          <?php foreach (explode(' ', $lease) as $prop): ?>
+            <tr>
+              <td><?php echo htmlspecialchars($prop, ENT_QUOTES) ?></td>
+            </tr>
+          <?php endforeach ?>
+        <?php endforeach ?>
+        </tbody>
+      </table>
+    </div><!-- /.table-responsive -->
+  </div><!-- /.panel-body -->
+  </div><!-- /.panel -->
+</div><!-- /.col-lg-12 -->
+</div><!-- /.row -->
+</div><!-- /.tab-pane -->
+
+<div class="tab-pane fade in" id="static-leases">
+    <div class="dhcp-static-leases js-dhcp-static-lease-container">
+        <?php foreach ($dhcpHost as $host): ?>
+        <?php list($mac, $ip) = array_map("trim", explode(",", $host)); ?>
+        <div class="row dhcp-static-lease-row js-dhcp-static-lease-row">
+            <div class="col-md-5 col-xs-5">
+                <input type="text" name="static_leases[mac][]" value="<?php echo htmlspecialchars($mac, ENT_QUOTES) ?>" placeholder="<?php echo _("MAC address") ?>" class="form-control">
+            </div>
+            <div class="col-md-5 col-xs-4">
+                <input type="text" name="static_leases[ip][]" value="<?php echo htmlspecialchars($ip, ENT_QUOTES) ?>" placeholder="<?php echo _("IP address") ?>" class="form-control">
+            </div>
+            <div class="col-md-2 col-xs-3">
+                <button type="button" class="btn btn-danger js-remove-dhcp-static-lease"><?php echo _("Remove") ?></button>
+            </div>
+        </div>
+        <?php endforeach ?>
+    </div>
+
+    <h5><?php echo _("Add static DHCP lease") ?></h5>
+    <div class="row dhcp-static-lease-row js-new-dhcp-static-lease">
+        <div class="col-md-5 col-xs-5">
+            <input type="text" name="mac" value="" placeholder="<?php echo _("MAC address") ?>" class="form-control" autofocus="autofocus">
+        </div>
+        <div class="col-md-5 col-xs-4">
+            <input type="text" name="ip" value="" placeholder="<?php echo _("IP address") ?>" class="form-control">
+        </div>
+        <div class="col-md-2 col-xs-3">
+            <button type="button" class="btn btn-success js-add-dhcp-static-lease"><?php echo _("Add") ?></button>
+        </div>
+    </div>
+
+    <template id="js-dhcp-static-lease-row">
+        <div class="row dhcp-static-lease-row js-dhcp-static-lease-row">
+            <div class="col-md-5 col-xs-5">
+                <input type="text" name="static_leases[mac][]" value="{{ mac }}" placeholder="<?php echo _("MAC address") ?>" class="form-control">
+            </div>
+            <div class="col-md-5 col-xs-4">
+                <input type="text" name="static_leases[ip][]" value="{{ ip }}" placeholder="<?php echo _("IP address") ?>" class="form-control">
+            </div>
+            <div class="col-md-2 col-xs-3">
+                <button type="button" class="btn btn-warning js-remove-dhcp-static-lease"><?php echo _("Remove") ?></button>
+            </div>
+        </div>
+    </template>
+
+    <input type="submit" class="btn btn-outline btn-primary" value="<?php echo _("Save settings"); ?>" name="savedhcpdsettings" />
+    <?php
+
+    if ($dnsmasq_state) {
+        echo '<input type="submit" class="btn btn-warning" value="' . _("Stop dnsmasq") . '" name="stopdhcpd" />';
+    } else {
+        echo'<input type="submit" class="btn btn-success" value="' .  _("Start dnsmasq") . '" name="startdhcpd" />';
+    }
+    ?>
+</div>
+
+</div><!-- /.tab-content -->
+</form>
+</div><!-- ./ Panel body -->
+<div class="panel-footer"> <?php echo _("Information provided by Dnsmasq"); ?></div>
+    </div><!-- /.panel-primary -->
+</div><!-- /.col-lg-12 -->
+</div><!-- /.row -->
\ No newline at end of file
diff --git a/templates/hostapd.php b/templates/hostapd.php
new file mode 100644
index 00000000..bd14b2ab
--- /dev/null
+++ b/templates/hostapd.php
@@ -0,0 +1,449 @@
+<div class="row">
+<div class="col-lg-12">
+  <div class="panel panel-primary">
+    <div class="panel-heading">
+        <i class="fa fa-dot-circle-o fa-fw"></i> <?php echo _("Configure hotspot"); ?>
+        <span class="label pull-right service-status-<?php echo $serviceStatus ?>">hostapd <?php echo _($serviceStatus) ?></span>
+    </div>
+    <!-- /.panel-heading -->
+    <div class="panel-body">
+    <?php $status->showMessages(); ?>
+      <form role="form" action="?page=hostapd_conf" method="POST">
+        <?php echo CSRFTokenFieldTag() ?>
+        <!-- Nav tabs -->
+        <ul class="nav nav-tabs">
+          <li class="active"><a href="#basic" data-toggle="tab"><?php echo _("Basic"); ?></a></li>
+          <li><a href="#security" data-toggle="tab"><?php echo _("Security"); ?></a></li>
+          <li><a href="#advanced" data-toggle="tab"><?php echo _("Advanced"); ?></a></li>
+          <li><a href="#logoutput" data-toggle="tab"><?php echo _("Logfile"); ?></a></li>
+        </ul>
+
+        <!-- Tab panes -->
+        <div class="tab-content">
+            <div class="tab-pane fade in active" id="basic">
+
+            <h4><?php echo _("Basic settings") ;?></h4>
+            <div class="row">
+              <div class="form-group col-md-4">
+                <label for="cbxinterface"><?php echo _("Interface") ;?></label>
+                <?php
+                  SelectorOptions('interface', $interfaces, $arrConfig['interface'], 'cbxinterface');
+                ?>
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-4">
+                <label for="txtssid"><?php echo _("SSID"); ?></label>
+                <input type="text" id="txtssid" class="form-control" name="ssid" value="<?php echo htmlspecialchars($arrConfig['ssid'], ENT_QUOTES); ?>" />
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-4">
+                <label for="cbxhwmode"><?php echo _("Wireless Mode") ;?></label>
+                <?php
+                $selectedHwMode = $arrConfig['hw_mode'];
+                if (isset($arrConfig['ieee80211n'])) {
+                    if (strval($arrConfig['ieee80211n']) === '1') {
+                        $selectedHwMode = 'n';
+                    }
+                }
+
+                SelectorOptions('hw_mode', $arr80211Standard, $selectedHwMode, 'cbxhwmode'); ?>
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-4">
+                <label for="cbxchannel"><?php echo _("Channel"); ?></label>
+                <?php
+                $selectablechannels = range(1, 13);
+                $countries_2_4Ghz_max11ch = array('AG', 'BS', 'BB', 'BZ', 'CR', 'CU', 'DM', 'DO', 'SV', 'GD', 'GT',
+                             'HT', 'HN', 'JM', 'MX', 'NI', 'PA', 'KN', 'LC', 'VC', 'TT',
+                             'US', 'CA', 'UZ', 'CO');
+                $countries_2_4Ghz_max14ch = array('JA');
+                if (in_array($arrConfig['country_code'], $countries_max11channels)) {
+                    // In North America till channel 11 is the maximum allowed wi-fi 2.4Ghz channel.
+                    // Except for the US that allows channel 12 & 13 in low power mode with additional restrictions.
+                    // Canada that allows channel 12 in low power mode. Because it's unsure if low powered mode
+                    // can be supported the channels are not selectable for those countries.
+                    // source: https://en.wikipedia.org/wiki/List_of_WLAN_channels#Interference_concerns
+                    // Also Uzbekistan and Colombia allow to select till channel 11 as maximum channel on the 2.4Ghz wi-fi band.
+                    $selectablechannels = range(1, 11);
+                } elseif (in_array($arrConfig['country_code'], $countries_2_4Ghz_max14ch)) {
+                    if ($arrConfig['hw_mode'] === 'b') {
+                        $selectablechannels = range(1, 14);
+                    }
+                }
+                SelectorOptions('channel', $selectablechannels, intval($arrConfig['channel']), 'cbxchannel'); ?>
+              </div>
+            </div>
+          </div>
+          <div class="tab-pane fade" id="security">
+            <h4><?php echo _("Security settings"); ?></h4>
+            <div class="row">
+              <div class="form-group col-md-4">
+                <label for="cbxwpa"><?php echo _("Security type"); ?></label>
+                <?php SelectorOptions('wpa', $arrSecurity, $arrConfig['wpa'], 'cbxwpa'); ?>
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-4">
+                <label for="cbxwpapairwise"><?php echo _("Encryption Type"); ?></label>
+                <?php SelectorOptions('wpa_pairwise', $arrEncType, $arrConfig['wpa_pairwise'], 'cbxwpapairwise'); ?>
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-4">
+                <label for="txtwpapassphrase"><?php echo _("PSK"); ?></label>
+                <input type="text" class="form-control" id="txtwpapassphrase" name="wpa_passphrase" value="<?php echo htmlspecialchars($arrConfig['wpa_passphrase'], ENT_QUOTES); ?>" />
+              </div>
+            </div>
+          </div>
+          <div class="tab-pane fade" id="logoutput">
+      <h4><?php echo _("Logfile output"); ?></h4>
+              <div class="row">
+                <div class="form-group col-md-8">
+                    <?php
+                    if ($arrHostapdConf['LogEnable'] == 1) {
+                        $log = file_get_contents('/tmp/hostapd.log');
+                        echo '<br /><textarea class="logoutput">'.htmlspecialchars($log, ENT_QUOTES).'</textarea>';
+                    } else {
+                        echo "<br />Logfile output not enabled";
+                    }
+                    ?>
+               </div>
+            </div>
+          </div>
+          <div class="tab-pane fade" id="advanced">
+    <h4><?php echo _("Advanced settings"); ?></h4>
+            <div class="row">
+              <div class="col-md-4">
+        <div class="checkbox">
+<?php
+$checkedWifiAPEnabled = '';
+if ($arrHostapdConf['WifiAPEnable'] == 1) {
+$checkedWifiAPEnabled = ' checked="checked"';
+}
+?>
+          <input id="chxwificlientap" name="wifiAPEnable" type="checkbox" class="form-check-input" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-width="100" value="1"<?php echo $checkedWifiAPEnabled; ?> />
+          <label class="form-check-label" for="chxwificlientap"><?php echo _("WiFi client AP mode"); ?></label>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-4">
+        <div class="checkbox">
+<?php
+$checkedLogEnabled = '';
+if ($arrHostapdConf['LogEnable'] == 1) {
+$checkedLogEnabled = ' checked="checked"';
+}
+?>
+          <input id="chxlogenable" name="logEnable" type="checkbox" class="form-check-input" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-width="100" value="1"<?php echo $checkedLogEnabled; ?> />
+          <label class="form-check-label" for="chxlogenable"><?php echo _("Logfile output"); ?></label>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-4">
+        <div class="checkbox">
+<?php
+$checkedHiddenSSID = '';
+if ($arrConfig['ignore_broadcast_ssid'] == 1 || $arrConfig['ignore_broadcast_ssid'] == 2) {
+$checkedHiddenSSID = ' checked="checked"';
+}
+?>
+          <input id="chxhiddenssid" name="hiddenSSID" type="checkbox" class="form-check-input" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-width="100" value="1"<?php echo $checkedHiddenSSID; ?> />
+          <label class="form-check-label" for="chxhiddenssid"><?php echo _("Hide SSID in broadcast"); ?></label>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-4">
+                <label for="max_num_sta"><?php echo _("Maximum number of clients") ?></label>
+                <input type="text" id="max_num_sta" class="form-control" name="max_num_sta" placeholder="2007" value="<?php echo $arrConfig["max_num_sta"] ?>" aria-describedby="max_num_sta_help">
+                <span id="max_num_sta_help" class="help-block"><?php echo _("Configures the <code>max_num_sta</code> option of hostapd. The default and maximum is 2007. If empty or 0, the default applies.") ?></span>
+              </div>
+            </div>
+            <div class="row">
+              <div class="form-group col-md-4">
+              <label for="cbxcountries"><?php echo _("Country Code"); ?></label>
+              <input type="hidden" id="selected_country" value="<?php echo htmlspecialchars($arrConfig['country_code'], ENT_QUOTES); ?>">
+              <select  class="form-control" id="cbxcountries" name="country_code">
+                <option value="AF">Afghanistan</option>
+                <option value="AX">Åland Islands</option>
+                <option value="AL">Albania</option>
+                <option value="DZ">Algeria</option>
+                <option value="AS">American Samoa</option>
+                <option value="AD">Andorra</option>
+                <option value="AO">Angola</option>
+                <option value="AI">Anguilla</option>
+                <option value="AQ">Antarctica</option>
+                <option value="AG">Antigua and Barbuda</option>
+                <option value="AR">Argentina</option>
+                <option value="AM">Armenia</option>
+                <option value="AW">Aruba</option>
+                <option value="AU">Australia</option>
+                <option value="AT">Austria</option>
+                <option value="AZ">Azerbaijan</option>
+                <option value="BS">Bahamas</option>
+                <option value="BH">Bahrain</option>
+                <option value="BD">Bangladesh</option>
+                <option value="BB">Barbados</option>
+                <option value="BY">Belarus</option>
+                <option value="BE">Belgium</option>
+                <option value="BZ">Belize</option>
+                <option value="BJ">Benin</option>
+                <option value="BM">Bermuda</option>
+                <option value="BT">Bhutan</option>
+                <option value="BO">Bolivia, Plurinational State of</option>
+                <option value="BQ">Bonaire, Sint Eustatius and Saba</option>
+                <option value="BA">Bosnia and Herzegovina</option>
+                <option value="BW">Botswana</option>
+                <option value="BV">Bouvet Island</option>
+                <option value="BR">Brazil</option>
+                <option value="IO">British Indian Ocean Territory</option>
+                <option value="BN">Brunei Darussalam</option>
+                <option value="BG">Bulgaria</option>
+                <option value="BF">Burkina Faso</option>
+                <option value="BI">Burundi</option>
+                <option value="KH">Cambodia</option>
+                <option value="CM">Cameroon</option>
+                <option value="CA">Canada</option>
+                <option value="CV">Cape Verde</option>
+                <option value="KY">Cayman Islands</option>
+                <option value="CF">Central African Republic</option>
+                <option value="TD">Chad</option>
+                <option value="CL">Chile</option>
+                <option value="CN">China</option>
+                <option value="CX">Christmas Island</option>
+                <option value="CC">Cocos (Keeling) Islands</option>
+                <option value="CO">Colombia</option>
+                <option value="KM">Comoros</option>
+                <option value="CG">Congo</option>
+                <option value="CD">Congo, the Democratic Republic of the</option>
+                <option value="CK">Cook Islands</option>
+                <option value="CR">Costa Rica</option>
+                <option value="CI">Côte d'Ivoire</option>
+                <option value="HR">Croatia</option>
+                <option value="CU">Cuba</option>
+                <option value="CW">Curaçao</option>
+                <option value="CY">Cyprus</option>
+                <option value="CZ">Czech Republic</option>
+                <option value="DK">Denmark</option>
+                <option value="DJ">Djibouti</option>
+                <option value="DM">Dominica</option>
+                <option value="DO">Dominican Republic</option>
+                <option value="EC">Ecuador</option>
+                <option value="EG">Egypt</option>
+                <option value="SV">El Salvador</option>
+                <option value="GQ">Equatorial Guinea</option>
+                <option value="ER">Eritrea</option>
+                <option value="EE">Estonia</option>
+                <option value="ET">Ethiopia</option>
+                <option value="FK">Falkland Islands (Malvinas)</option>
+                <option value="FO">Faroe Islands</option>
+                <option value="FJ">Fiji</option>
+                <option value="FI">Finland</option>
+                <option value="FR">France</option>
+                <option value="GF">French Guiana</option>
+                <option value="PF">French Polynesia</option>
+                <option value="TF">French Southern Territories</option>
+                <option value="GA">Gabon</option>
+                <option value="GM">Gambia</option>
+                <option value="GE">Georgia</option>
+                <option value="DE">Germany</option>
+                <option value="GH">Ghana</option>
+                <option value="GI">Gibraltar</option>
+                <option value="GR">Greece</option>
+                <option value="GL">Greenland</option>
+                <option value="GD">Grenada</option>
+                <option value="GP">Guadeloupe</option>
+                <option value="GU">Guam</option>
+                <option value="GT">Guatemala</option>
+                <option value="GG">Guernsey</option>
+                <option value="GN">Guinea</option>
+                <option value="GW">Guinea-Bissau</option>
+                <option value="GY">Guyana</option>
+                <option value="HT">Haiti</option>
+                <option value="HM">Heard Island and McDonald Islands</option>
+                <option value="VA">Holy See (Vatican City State)</option>
+                <option value="HN">Honduras</option>
+                <option value="HK">Hong Kong</option>
+                <option value="HU">Hungary</option>
+                <option value="IS">Iceland</option>
+                <option value="IN">India</option>
+                <option value="ID">Indonesia</option>
+                <option value="IR">Iran, Islamic Republic of</option>
+                <option value="IQ">Iraq</option>
+                <option value="IE">Ireland</option>
+                <option value="IM">Isle of Man</option>
+                <option value="IL">Israel</option>
+                <option value="IT">Italy</option>
+                <option value="JM">Jamaica</option>
+                <option value="JP">Japan</option>
+                <option value="JE">Jersey</option>
+                <option value="JO">Jordan</option>
+                <option value="KZ">Kazakhstan</option>
+                <option value="KE">Kenya</option>
+                <option value="KI">Kiribati</option>
+                <option value="KP">Korea, Democratic People's Republic of</option>
+                <option value="KR">Korea, Republic of</option>
+                <option value="KW">Kuwait</option>
+                <option value="KG">Kyrgyzstan</option>
+                <option value="LA">Lao People's Democratic Republic</option>
+                <option value="LV">Latvia</option>
+                <option value="LB">Lebanon</option>
+                <option value="LS">Lesotho</option>
+                <option value="LR">Liberia</option>
+                <option value="LY">Libya</option>
+                <option value="LI">Liechtenstein</option>
+                <option value="LT">Lithuania</option>
+                <option value="LU">Luxembourg</option>
+                <option value="MO">Macao</option>
+                <option value="MK">Macedonia, the former Yugoslav Republic of</option>
+                <option value="MG">Madagascar</option>
+                <option value="MW">Malawi</option>
+                <option value="MY">Malaysia</option>
+                <option value="MV">Maldives</option>
+                <option value="ML">Mali</option>
+                <option value="MT">Malta</option>
+                <option value="MH">Marshall Islands</option>
+                <option value="MQ">Martinique</option>
+                <option value="MR">Mauritania</option>
+                <option value="MU">Mauritius</option>
+                <option value="YT">Mayotte</option>
+                <option value="MX">Mexico</option>
+                <option value="FM">Micronesia, Federated States of</option>
+                <option value="MD">Moldova, Republic of</option>
+                <option value="MC">Monaco</option>
+                <option value="MN">Mongolia</option>
+                <option value="ME">Montenegro</option>
+                <option value="MS">Montserrat</option>
+                <option value="MA">Morocco</option>
+                <option value="MZ">Mozambique</option>
+                <option value="MM">Myanmar</option>
+                <option value="NA">Namibia</option>
+                <option value="NR">Nauru</option>
+                <option value="NP">Nepal</option>
+                <option value="NL">Netherlands</option>
+                <option value="NC">New Caledonia</option>
+                <option value="NZ">New Zealand</option>
+                <option value="NI">Nicaragua</option>
+                <option value="NE">Niger</option>
+                <option value="NG">Nigeria</option>
+                <option value="NU">Niue</option>
+                <option value="NF">Norfolk Island</option>
+                <option value="MP">Northern Mariana Islands</option>
+                <option value="NO">Norway</option>
+                <option value="OM">Oman</option>
+                <option value="PK">Pakistan</option>
+                <option value="PW">Palau</option>
+                <option value="PS">Palestinian Territory, Occupied</option>
+                <option value="PA">Panama</option>
+                <option value="PG">Papua New Guinea</option>
+                <option value="PY">Paraguay</option>
+                <option value="PE">Peru</option>
+                <option value="PH">Philippines</option>
+                <option value="PN">Pitcairn</option>
+                <option value="PL">Poland</option>
+                <option value="PT">Portugal</option>
+                <option value="PR">Puerto Rico</option>
+                <option value="QA">Qatar</option>
+                <option value="RE">Réunion</option>
+                <option value="RO">Romania</option>
+                <option value="RU">Russian Federation</option>
+                <option value="RW">Rwanda</option>
+                <option value="BL">Saint Barthélemy</option>
+                <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
+                <option value="KN">Saint Kitts and Nevis</option>
+                <option value="LC">Saint Lucia</option>
+                <option value="MF">Saint Martin (French part)</option>
+                <option value="PM">Saint Pierre and Miquelon</option>
+                <option value="VC">Saint Vincent and the Grenadines</option>
+                <option value="WS">Samoa</option>
+                <option value="SM">San Marino</option>
+                <option value="ST">Sao Tome and Principe</option>
+                <option value="SA">Saudi Arabia</option>
+                <option value="SN">Senegal</option>
+                <option value="RS">Serbia</option>
+                <option value="SC">Seychelles</option>
+                <option value="SL">Sierra Leone</option>
+                <option value="SG">Singapore</option>
+                <option value="SX">Sint Maarten (Dutch part)</option>
+                <option value="SK">Slovakia</option>
+                <option value="SI">Slovenia</option>
+                <option value="SB">Solomon Islands</option>
+                <option value="SO">Somalia</option>
+                <option value="ZA">South Africa</option>
+                <option value="GS">South Georgia and the South Sandwich Islands</option>
+                <option value="SS">South Sudan</option>
+                <option value="ES">Spain</option>
+                <option value="LK">Sri Lanka</option>
+                <option value="SD">Sudan</option>
+                <option value="SR">Suriname</option>
+                <option value="SJ">Svalbard and Jan Mayen</option>
+                <option value="SZ">Swaziland</option>
+                <option value="SE">Sweden</option>
+                <option value="CH">Switzerland</option>
+                <option value="SY">Syrian Arab Republic</option>
+                <option value="TW">Taiwan, Province of China</option>
+                <option value="TJ">Tajikistan</option>
+                <option value="TZ">Tanzania, United Republic of</option>
+                <option value="TH">Thailand</option>
+                <option value="TL">Timor-Leste</option>
+                <option value="TG">Togo</option>
+                <option value="TK">Tokelau</option>
+                <option value="TO">Tonga</option>
+                <option value="TT">Trinidad and Tobago</option>
+                <option value="TN">Tunisia</option>
+                <option value="TR">Turkey</option>
+                <option value="TM">Turkmenistan</option>
+                <option value="TC">Turks and Caicos Islands</option>
+                <option value="TV">Tuvalu</option>
+                <option value="UG">Uganda</option>
+                <option value="UA">Ukraine</option>
+                <option value="AE">United Arab Emirates</option>
+                <option value="GB">United Kingdom</option>
+                <option value="US">United States</option>
+                <option value="UM">United States Minor Outlying Islands</option>
+                <option value="UY">Uruguay</option>
+                <option value="UZ">Uzbekistan</option>
+                <option value="VU">Vanuatu</option>
+                <option value="VE">Venezuela, Bolivarian Republic of</option>
+                <option value="VN">Viet Nam</option>
+                <option value="VG">Virgin Islands, British</option>
+                <option value="VI">Virgin Islands, U.S.</option>
+                <option value="WF">Wallis and Futuna</option>
+                <option value="EH">Western Sahara</option>
+                <option value="YE">Yemen</option>
+                <option value="ZM">Zambia</option>
+                <option value="ZW">Zimbabwe</option>
+              </select>
+<script type="text/javascript">
+var country = document.getElementById("selected_country").value;
+var countries = document.getElementById("cbxcountries");
+var ops = countries.getElementsByTagName("option");
+for (var i = 0; i < ops.length; ++i) {
+if(ops[i].value == country){
+    ops[i].selected=true;
+    break;
+}
+}
+
+</script>
+            </div>
+          </div><!-- /.panel-body -->
+        </div><!-- /.panel-primary -->
+        <input type="submit" class="btn btn-outline btn-primary" name="SaveHostAPDSettings" value="<?php echo _("Save settings"); ?>" />
+        <?php
+        if ($hostapdstatus[0] == 0) {
+            echo '<input type="submit" class="btn btn-success" name="StartHotspot" value="' . _("Start hotspot") . '"/>' , PHP_EOL;
+        } else {
+            echo '<input type="submit" class="btn btn-warning" name="StopHotspot" value="' . _("Stop hotspot") . '"/>' , PHP_EOL;
+        };
+?>
+      </form>
+    </div></div><!-- /.panel-primary -->
+  <div class="panel-footer"> <?php echo _("Information provided by hostapd"); ?></div>
+</div><!-- /.col-lg-12 -->
+</div><!-- /.row -->
diff --git a/templates/networking.php b/templates/networking.php
new file mode 100644
index 00000000..ea534842
--- /dev/null
+++ b/templates/networking.php
@@ -0,0 +1,104 @@
+<div class="row">
+  <div class="col-lg-12">
+   <div class="panel panel-primary">
+    <div class="panel-heading"><i class="fa fa-sitemap fa-fw"></i> <?php echo _("Configure networking"); ?></div>
+      <div class="panel-body">
+        <div id="msgNetworking"></div>
+        <ul class="nav nav-tabs">
+          <li role="presentation" class="active"><a href="#summary" aria-controls="summary" role="tab" data-toggle="tab"><?php echo _("Summary"); ?></a></li>
+          <?php foreach ($interfaces as $if): ?>
+          <?php $if_quoted = htmlspecialchars($if, ENT_QUOTES) ?>
+          <li role="presentation"><a href="#<?php echo $if_quoted ?>" aria-controls="<?php echo $if_quoted ?>" role="tab" data-toggle="tab"><?php echo $if_quoted ?></a></li>
+          <?php endforeach ?>
+        </ul>
+        <div class="tab-content">
+
+          <div role="tabpanel" class="tab-pane active" id="summary">
+            <h4><?php echo _("Current settings") ?></h4>
+            <div class="row">
+              <?php foreach ($interfaces as $if): ?>
+              <?php $if_quoted = htmlspecialchars($if, ENT_QUOTES) ?>
+              <div class="col-md-6">
+                <div class="panel panel-default">
+                  <div class="panel-heading"><?php echo $if_quoted ?></div>
+                  <div class="panel-body">
+                    <pre class="unstyled" id="<?php echo $if_quoted ?>-summary"></pre>
+                  </div>
+                </div>
+              </div>
+              <?php endforeach ?>
+            </div><!-- /.row -->
+            <div class="col-lg-12">
+              <div class="row">
+                <a href="#" class="btn btn-outline btn-primary" id="btnSummaryRefresh"><i class="fa fa-refresh"></i> <?php echo _("Refresh"); ?></a>
+              </div><!-- /.row -->
+            </div><!-- /.col-lg-12 -->
+          </div><!-- /.tab-pane -->
+
+          <?php foreach ($interfaces as $if): ?>
+          <?php $if_quoted = htmlspecialchars($if, ENT_QUOTES) ?>
+          <div role="tabpanel" class="tab-pane fade in" id="<?php echo $if_quoted ?>">
+            <div class="row">
+              <div class="col-lg-6">
+
+                <form id="frm-<?php echo $if_quoted ?>">
+                  <?php echo CSRFTokenFieldTag() ?>
+                  <div class="form-group">
+                    <h4><?php echo _("Adapter IP Address Settings") ?></h4>
+                    <div class="btn-group" data-toggle="buttons">
+                      <label class="btn btn-primary">
+                        <input type="radio" name="<?php echo $if_quoted ?>-addresstype" id="<?php echo $if_quoted ?>-dhcp" autocomplete="off"><?php echo _("DHCP") ?>
+                      </label>
+                      <label class="btn btn-primary">
+                        <input type="radio" name="<?php echo $if_quoted ?>-addresstype" id="<?php echo $if_quoted ?>-static" autocomplete="off"><?php echo _("Static IP") ?>
+                      </label>
+                    </div><!-- /.btn-group -->
+                    <h4><?php echo _("Enable Fallback to Static Option") ?></h4>
+                    <div class="btn-group" data-toggle="buttons">
+                      <label class="btn btn-primary">
+                        <input type="radio" name="<?php echo $if_quoted ?>-dhcpfailover" id="<?php echo $if_quoted ?>-failover" autocomplete="off"><?php echo _("Enabled") ?>
+                      </label>
+                      <label class="btn btn-warning">
+                        <input type="radio" name="<?php echo $if_quoted ?>-dhcpfailover" id="<?php echo $if_quoted ?>-nofailover" autocomplete="off"><?php echo _("Disabled") ?>
+                      </label>
+                    </div><!-- /.btn-group -->
+                  </div><!-- /.form-group -->
+
+                  <hr />
+
+                  <h4><?php echo _("Static IP Options") ?></h4>
+                  <div class="form-group">
+                    <label for="<?php echo $if_quoted ?>-ipaddress"><?php echo _("IP Address") ?></label>
+                    <input type="text" class="form-control" id="<?php echo $if_quoted ?>-ipaddress" placeholder="0.0.0.0">
+                  </div>
+                  <div class="form-group">
+                    <label for="<?php echo $if_quoted ?>-netmask"><?php echo _("Subnet Mask") ?></label>
+                    <input type="text" class="form-control" id="<?php echo $if_quoted ?>-netmask" placeholder="255.255.255.0">
+                  </div>
+                  <div class="form-group">
+                    <label for="<?php echo $if_quoted ?>-gateway"><?php echo _("Default Gateway") ?></label>
+                    <input type="text" class="form-control" id="<?php echo $if_quoted ?>-gateway" placeholder="0.0.0.0">
+                  </div>
+                  <div class="form-group">
+                    <label for="<?php echo $if_quoted ?>-dnssvr"><?php echo _("DNS Server") ?></label>
+                    <input type="text" class="form-control" id="<?php echo $if_quoted ?>-dnssvr" placeholder="0.0.0.0">
+                  </div>
+                  <div class="form-group">
+                    <label for="<?php echo $if_quoted ?>-dnssvralt"><?php echo _("Alternate DNS Server") ?></label>
+                    <input type="text" class="form-control" id="<?php echo $if_quoted ?>-dnssvralt" placeholder="0.0.0.0">
+                  </div>
+                  <a href="#" class="btn btn-outline btn-primary intsave" data-int="<?php echo $if_quoted ?>"><?php echo _("Save settings") ?></a>
+                  <a href="#" class="btn btn-warning intapply" data-int="<?php echo $if_quoted ?>"><?php echo _("Apply settings") ?></a>
+                </form>
+
+              </div>
+            </div><!-- /.tab-panel -->
+          </div>
+          <?php endforeach ?>
+
+        </div><!-- /.tab-content -->
+      </div><!-- /.panel-body -->
+      <div class="panel-footer"><?php echo _("Information provided by /sys/class/net"); ?></div>
+    </div><!-- /.panel-primary -->
+  </div><!-- /.col-lg-12 -->
+</div>
diff --git a/templates/system.php b/templates/system.php
new file mode 100644
index 00000000..9f184ad7
--- /dev/null
+++ b/templates/system.php
@@ -0,0 +1,105 @@
+<?php
+
+$hostname = $system->hostname();
+$uptime   = $system->uptime();
+$cores    = $system->processorCount();
+
+// mem used
+$memused  = $system->usedMemory();
+$memused_status = "primary";
+if ($memused > 90) {
+    $memused_status = "danger";
+} elseif ($memused > 75) {
+    $memused_status = "warning";
+} elseif ($memused >  0) {
+    $memused_status = "success";
+}
+
+// cpu load
+$cpuload = $system->systemLoadPercentage();
+if ($cpuload > 90) {
+    $cpuload_status = "danger";
+} elseif ($cpuload > 75) {
+    $cpuload_status = "warning";
+} elseif ($cpuload >  0) {
+    $cpuload_status = "success";
+}
+
+?>
+<div class="row">
+<div class="col-lg-12">
+<div class="panel panel-primary">
+<div class="panel-heading"><i class="fa fa-cube fa-fw"></i> <?php echo _("System"); ?></div>
+<div class="panel-body">
+<?php $status->showMessages(); ?>
+<form role="form" action="?page=system_info" method="POST">
+<?php echo CSRFTokenFieldTag() ?>
+<ul class="nav nav-tabs" role="tablist">
+  <li role="presentation" class="active systemtab"><a href="#system" aria-controls="system" role="tab" data-toggle="tab"><?php echo _("System"); ?></a></li>
+  <li role="presentation" class="languagetab"><a href="#language" aria-controls="language" role="tab" data-toggle="tab"><?php echo _("Language"); ?></a></li>
+  <li role="presentation" class="consoletab"><a href="#console" aria-controls="console" role="tab" data-toggle="tab"><?php echo _("Console"); ?></a></li>
+</ul>
+
+<div class="systemtabcontent tab-content">
+  <div role="tabpanel" class="tab-pane active" id="system">
+    <div class="row">
+      <div class="col-lg-6">
+        <h4><?php echo _("System Information"); ?></h4>
+        <div class="info-item"><?php echo _("Hostname"); ?></div> <?php echo htmlspecialchars($hostname, ENT_QUOTES); ?></br>
+        <div class="info-item"><?php echo _("Pi Revision"); ?></div> <?php echo htmlspecialchars(RPiVersion(), ENT_QUOTES); ?></br>
+        <div class="info-item"><?php echo _("Uptime"); ?></div>   <?php echo htmlspecialchars($uptime, ENT_QUOTES); ?></br></br>
+        <div class="info-item"><?php echo _("Memory Used"); ?></div>
+        <div class="progress">
+        <div class="progress-bar progress-bar-<?php echo htmlspecialchars($memused_status, ENT_QUOTES); ?> progress-bar-striped active"
+        role="progressbar"
+        aria-valuenow="<?php echo htmlspecialchars($memused, ENT_QUOTES); ?>" aria-valuemin="0" aria-valuemax="100"
+        style="width: <?php echo htmlspecialchars($memused, ENT_QUOTES); ?>%;"><?php echo htmlspecialchars($memused, ENT_QUOTES); ?>%
+        </div>
+        </div>
+        <div class="info-item"><?php echo _("CPU Load"); ?></div>
+        <div class="progress">
+        <div class="progress-bar progress-bar-<?php echo htmlspecialchars($cpuload_status, ENT_QUOTES); ?> progress-bar-striped active"
+        role="progressbar"
+        aria-valuenow="<?php echo htmlspecialchars($cpuload, ENT_QUOTES); ?>" aria-valuemin="0" aria-valuemax="100"
+        style="width: <?php echo htmlspecialchars($cpuload, ENT_QUOTES); ?>%;"><?php echo htmlspecialchars($cpuload, ENT_QUOTES); ?>%
+        </div>
+        </div>
+
+        <form action="?page=system_info" method="POST">
+        <?php echo CSRFTokenFieldTag() ?>
+        <input type="submit" class="btn btn-warning" name="system_reboot"   value="<?php echo _("Reboot"); ?>" />
+        <input type="submit" class="btn btn-warning" name="system_shutdown" value="<?php echo _("Shutdown"); ?>" />
+        <a href="?page=<?php echo $_GET['page'] ?>" class="btn btn-outline btn-primary"><?php echo _("Refresh") ?></a>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <div role="tabpanel" class="tab-pane" id="language">
+    <h4><?php echo _("Language settings") ;?></h4>
+    <div class="row">
+      <div class="form-group col-md-4">
+        <label for="code"><?php echo _("Select a language"); ?></label>
+          <?php SelectorOptions('locale', $arrLocales, $_SESSION['locale']); ?>
+      </div>
+    </div>
+    <input type="submit" class="btn btn-outline btn-primary" name="SaveLanguage" value="<?php echo _("Save settings"); ?>" />
+    <a href="?page=<?php echo $_GET['page'] ?>" class="btn btn-outline btn-primary"><?php echo _("Refresh") ?></a>
+  </div>
+
+  <div role="tabpanel" class="tab-pane" id="console">
+    <div class="row">
+      <div class="col-lg-12"> 
+        <iframe src="includes/webconsole.php" class="webconsole"></iframe>
+      </div>
+    </div>
+  </div>
+
+</div><!-- /.systemtabcontent -->
+
+</form>
+</div><!-- /.panel-body -->
+<div class="panel-footer"></div>
+</div><!-- /.panel-primary -->
+</div><!-- /.col-lg-12 -->
+</div><!-- /.row -->
diff --git a/templates/themes.php b/templates/themes.php
new file mode 100644
index 00000000..8920ad00
--- /dev/null
+++ b/templates/themes.php
@@ -0,0 +1,24 @@
+<div class="row">
+  <div class="col-lg-12">
+    <div class="panel panel-primary">
+      <div class="panel-heading"><i class="fa fa-wrench fa-fw"></i> <?php echo _("Change Theme"); ?></div>
+      <div class="panel-body">
+
+        <h4><?php echo _("Theme settings"); ?></h4>
+
+        <div class="row">
+          <div class="form-group col-md-6">
+            <label for="code"><?php echo _("Select a theme"); ?></label>
+            <?php SelectorOptions("theme", $themes, $selectedTheme, "theme-select") ?>
+          </div>
+        </div>
+
+        <form action="?page=system_info" method="POST">
+          <?php echo CSRFTokenFieldTag() ?>
+          <a href="?page=<?php echo $_GET['page'] ?>" class="btn btn-outline btn-primary"><?php echo _("Refresh"); ?></a>
+        </form>
+
+      </div><!-- /.panel-body -->
+    </div><!-- /.panel-primary -->
+  </div><!-- /.col-lg-12 -->
+</div><!-- /.row -->
diff --git a/templates/wifi_stations.php b/templates/wifi_stations.php
index a002b85d..7d4f48fa 100644
--- a/templates/wifi_stations.php
+++ b/templates/wifi_stations.php
@@ -67,9 +67,9 @@
             <?php if ($network['protocol'] === 'Open') { ?>
               <input type="password" disabled class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="" />
             <?php } else { ?>
-              <input type="password" class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="<?php echo $network['passphrase'] ?>" onKeyUp="CheckPSK(this, 'update<?php echo $index?>')" >
+              <input type="password" class="form-control js-validate-psk" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="<?php echo $network['passphrase'] ?>" data-target="#update<?php echo $index ?>" data-colors="#ffd0d0,#d0ffd0">
               <span class="input-group-btn">
-                <button class="btn btn-default" onclick="showPassword(<?php echo $index; ?>)" type="button">Show</button>
+                <button class="btn btn-default js-toggle-password" type="button" data-target="[name=passphrase<?php echo $index ?>]" data-toggle-with="<?php echo _("Hide") ?>">Show</button>
               </span>
             <?php } ?>
         </div>