diff --git a/app/css/custom.css b/app/css/custom.css
index d0ab6fa5..33fd45aa 100644
--- a/app/css/custom.css
+++ b/app/css/custom.css
@@ -17,8 +17,9 @@ body {
 .sidebar-brand-text {
   text-transform: none;
   color: #212529;
-  font-size: 1rem;
+  font-size: 1.8rem;
   font-weight: 500;
+  font-family: Helvetica, Arial, sans-serif;
 }
 
 .card .card-header {
@@ -134,6 +135,6 @@ pre.unstyled {
   width: 100%;
 }
 
-.js-wifi-stations .panel-body {
+.js-wifi-stations .card-body {
   min-height: 256px;
 }
diff --git a/includes/data_usage.php b/includes/data_usage.php
index 23a380b8..3c7753bd 100755
--- a/includes/data_usage.php
+++ b/includes/data_usage.php
@@ -8,8 +8,6 @@ function DisplayDataUsage(&$extraFooterScripts)
     exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
     echo renderTemplate("data_usage", [ "interfaces" => $interfacesWlo ]);
 
-    $extraFooterScripts[] = array('src'=>'dist/raphael/raphael.min.js', 'defer'=>false);
-    $extraFooterScripts[] = array('src'=>'dist/morrisjs/morris.min.js', 'defer'=>false);
     $extraFooterScripts[] = array('src'=>'dist/datatables/jquery.dataTables.min.js', 'defer'=>false);
     $extraFooterScripts[] = array('src'=>'app/js/bandwidthcharts.js', 'defer'=>false);
 }
diff --git a/index.php b/index.php
index c26c424c..a364d7a5 100755
--- a/index.php
+++ b/index.php
@@ -102,7 +102,7 @@ $theme_url = 'app/css/'.htmlspecialchars($theme, ENT_QUOTES);
           <div class="sidebar-brand-icon">
             <img src="app/img/raspAP-logo64px.png" width="32" height="32">
           </div>
-	  <div class="sidebar-brand-text ml-1">RaspAP <?php echo RASPI_VERSION; ?></div>
+	  <div class="sidebar-brand-text ml-1">RaspAP</div>
 	</a>
         <!-- Divider -->
         <hr class="sidebar-divider my-0">
@@ -148,7 +148,7 @@ $theme_url = 'app/css/'.htmlspecialchars($theme, ENT_QUOTES);
                 <?php endif; ?>
                 <?php if (RASPI_CHANGETHEME_ENABLED) : ?>
               <li class="nav-item">
-                <a class="nav-link" href="index.php?page=theme_conf"><i class="fas fa-wrench fa-fw"></i> <?php echo _("Change Theme"); ?></a>
+                <a class="nav-link" href="index.php?page=theme_conf"><i class="fas fa-paint-brush fa-fw"></i> <?php echo _("Change Theme"); ?></a>
               </li>
                 <?php endif; ?>
                 <?php if (RASPI_VNSTAT_ENABLED) : ?>
diff --git a/templates/admin.php b/templates/admin.php
index 1d8b40cd..3aa60731 100755
--- a/templates/admin.php
+++ b/templates/admin.php
@@ -1,8 +1,8 @@
 <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">
+    <div class="card">
+      <div class="card-header"><i class="fas fa-lock"></i> <?php echo _("Configure Auth"); ?></div>
+      <div class="card-body">
         <?php $status->showMessages(); ?>
         <form role="form" action="?page=auth_conf" method="POST">
             <?php echo CSRFTokenFieldTag() ?>
@@ -32,7 +32,7 @@
           </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><!-- /.card-body -->
+    </div><!-- /.card -->
   </div><!-- /.col-lg-12 -->
 </div><!-- /.row -->
diff --git a/templates/configure_client.php b/templates/configure_client.php
index ccd23b81..d1489ce1 100755
--- a/templates/configure_client.php
+++ b/templates/configure_client.php
@@ -1,23 +1,22 @@
 <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">
+    <div class="card">
+      <div class="card-header"><i class="fas fa-signal fa-fw"></i> <?php echo _("Configure client"); ?></div>
+      <!-- /.card-heading -->
+      <div class="card-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>
+          <div class="js-wifi-stations loading-spinner w-100"></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><!-- ./ card-body -->
+      <div class="card-footer"><?php echo _("<strong>Note:</strong> WEP access points appear as 'Open'. RaspAP does not currently support connecting to WEP"); ?></div>
+    </div><!-- /.card -->
   </div><!-- /.col-lg-12 -->
 </div><!-- /.row -->
diff --git a/templates/data_usage.php b/templates/data_usage.php
index ee4845e0..9fa9f476 100755
--- a/templates/data_usage.php
+++ b/templates/data_usage.php
@@ -1,17 +1,17 @@
 <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">
+    <div class="card">
+      <div class="card-header"><i class="fas fa-bar-chart fa-fw"></i> <?php echo _("Data usage monitoring"); ?></div>
+        <div class="card-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>
+            <li class="nav-item active"><a class="nav-link" href="#hourly" aria-controls="hourly" role="tab" data-toggle="tab"><?php echo _("Hourly"); ?></a></li>
+            <li class="nav-item"><a class="nav-link" href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li>
+            <li class="nav-item"><a class="nav-link" 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 role="tabpanel" class="tab-pane active" id="hourly">
               <div class="row">
                 <div class="col-lg-12">
                   <h4><?php echo _('Hourly traffic amount'); ?></h4>
@@ -70,10 +70,10 @@
             </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><!-- /.card-body -->
+       <div class="card-footer"><?php echo _("Information provided by vnstat"); ?></div>
+     </div><!-- /.card -->
+    </div><!-- /.card -->
   </div><!-- /.col-lg-12 -->
 </div><!-- /.row -->
 <script type="text/javascript"<?php //echo ' nonce="'.$csp_page_nonce.'"'; ?>>
diff --git a/templates/dhcp.php b/templates/dhcp.php
index 7d1329b0..0a3cf9bb 100755
--- a/templates/dhcp.php
+++ b/templates/dhcp.php
@@ -1,26 +1,26 @@
 <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"); ?>
+  <div class="card">
+  <div class="card-header">
+    <i class="fas fa-exchange"></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">
+    <div class="card-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 class="nav-item active"><a class="nav-link" 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 class="nav-item"><a class="nav-link" href="#static-leases" data-toggle="tab"><?php echo _("Static Leases") ?></a></li>
+            <li class="nav-item"><a class="nav-link" 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">
+<div class="tab-pane active" id="server-settings">
 <h4>DHCP server settings</h4>
 <div class="row">
   <div class="form-group col-md-4">
@@ -77,10 +77,10 @@
 <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>
+  <div class="card">
+  <div class="card-header"><?php echo _("Active DHCP leases"); ?></div>
   <!-- /.panel-heading -->
-  <div class="panel-body">
+  <div class="card-body">
     <div class="table-responsive">
       <table class="table table-hover">
         <thead>
@@ -103,8 +103,8 @@
         </tbody>
       </table>
     </div><!-- /.table-responsive -->
-  </div><!-- /.panel-body -->
-  </div><!-- /.panel -->
+  </div><!-- /.card-body -->
+  </div><!-- /.card -->
 </div><!-- /.col-lg-12 -->
 </div><!-- /.row -->
 </div><!-- /.tab-pane -->
@@ -167,8 +167,8 @@
 
 </div><!-- /.tab-content -->
 </form>
-</div><!-- ./ Panel body -->
-<div class="panel-footer"> <?php echo _("Information provided by Dnsmasq"); ?></div>
-    </div><!-- /.panel-primary -->
+</div><!-- ./ card-body -->
+<div class="card-footer"> <?php echo _("Information provided by Dnsmasq"); ?></div>
+    </div><!-- /.card -->
 </div><!-- /.col-lg-12 -->
 </div><!-- /.row -->
diff --git a/templates/hostapd.php b/templates/hostapd.php
index 851cfdcb..f4c112da 100755
--- a/templates/hostapd.php
+++ b/templates/hostapd.php
@@ -1,26 +1,26 @@
 <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"); ?>
+  <div class="card">
+    <div class="card-header">
+        <i class="far fa-dot-circle"></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">
+    <!-- /.card-header -->
+    <div class="card-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>
+          <li class="nav-item"><a class="nav-link active" id="basictab" href="#basic" aria-controls="basic" data-toggle="tab"><?php echo _("Basic"); ?></a></li>
+          <li class="nav-item"><a class="nav-link" id="securitytab" href="#security" data-toggle="tab"><?php echo _("Security"); ?></a></li>
+          <li class="nav-item"><a class="nav-link" id="advancedtab" href="#advanced" data-toggle="tab"><?php echo _("Advanced"); ?></a></li>
+          <li class="nav-item"><a class="nav-link" id="logoutputtab" 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">
+            <div class="tab-pane active" id="basic">
 
             <h4><?php echo _("Basic settings") ;?></h4>
             <div class="row">
@@ -432,7 +432,7 @@ if(ops[i].value == country){
 
 </script>
             </div>
-          </div><!-- /.panel-body -->
+          </div><!-- /.card-body -->
     </div><!-- /.panel-primary -->
         <?php if (!RASPI_MONITOR_ENABLED) : ?>
             <input type="submit" class="btn btn-outline btn-primary" name="SaveHostAPDSettings" value="<?php echo _("Save settings"); ?>" />
@@ -444,7 +444,7 @@ if(ops[i].value == country){
             };
         endif ?>
       </form>
-    </div></div><!-- /.panel-primary -->
-  <div class="panel-footer"> <?php echo _("Information provided by hostapd"); ?></div>
+    </div></div><!-- /.card -->
+  <div class="card-footer"> <?php echo _("Information provided by hostapd"); ?></div>
 </div><!-- /.col-lg-12 -->
 </div><!-- /.row -->
diff --git a/templates/networking.php b/templates/networking.php
index 8572b01d..62f9513d 100755
--- a/templates/networking.php
+++ b/templates/networking.php
@@ -1,14 +1,14 @@
 <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 class="card">
+    <div class="card-header"><i class="fas fa-sitemap"></i> <?php echo _("Configure networking"); ?></div>
+      <div class="card-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>
+          <li role="presentation" class="nav-item 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>
+          <li role="presentation"><a class="nav-link" 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">
@@ -19,9 +19,9 @@
               <?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">
+                <div class="card">
+                  <div class="card-header"><?php echo $if_quoted ?></div>
+                  <div class="card-body">
                     <pre class="unstyled" id="<?php echo $if_quoted ?>-summary"></pre>
                   </div>
                 </div>
@@ -99,8 +99,8 @@
           <?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><!-- /.card-body -->
+      <div class="card-footer"><?php echo _("Information provided by /sys/class/net"); ?></div>
+    </div><!-- /.card -->
   </div><!-- /.col-lg-12 -->
 </div>
diff --git a/templates/themes.php b/templates/themes.php
index 8c9889f5..42a7b906 100755
--- a/templates/themes.php
+++ b/templates/themes.php
@@ -1,11 +1,10 @@
 <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">
+    <div class="card">
+      <div class="card-header"><i class="fa fa-wrench fa-fw"></i> <?php echo _("Change Theme"); ?></div>
+      <div class="card-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>
@@ -18,7 +17,7 @@
           <a href="?page=<?php echo $_GET['page'] ?>" class="btn btn-outline btn-primary"><i class="fa fa-refresh"></i> <?php echo _("Refresh"); ?></a>
         </form>
 
-      </div><!-- /.panel-body -->
-    </div><!-- /.panel-primary -->
+      </div><!-- /.card-body -->
+    </div><!-- /.card -->
   </div><!-- /.col-lg-12 -->
 </div><!-- /.row -->
diff --git a/templates/wifi_stations.php b/templates/wifi_stations.php
index 350934a3..88d63be1 100755
--- a/templates/wifi_stations.php
+++ b/templates/wifi_stations.php
@@ -3,40 +3,36 @@
   <p class="text-center"><?php echo _('Click "Rescan" to search for nearby Wifi stations.') ?></p>
 <?php endif ?>
 <?php $index = 0; ?>
+<div class="__card-deck">
+
 <?php foreach ($networks as $ssid => $network) : ?>
-  <div class="col-md-6">
-    <div class="panel panel-default">
-      <div class="panel-body">
+    <div class="card mb-3 w-50">
+      <div class="card-body">
 
-      <input type="hidden" name="ssid<?php echo $index ?>" value="<?php echo htmlentities($ssid, ENT_QUOTES) ?>" />
-      <h4><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></h4>
+        <input type="hidden" name="ssid<?php echo $index ?>" value="<?php echo htmlentities($ssid, ENT_QUOTES) ?>" />
+        <h5 class="card-title"><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></h5>
 
-      <div class="row">
-        <div class="col-xs-4 col-md-4">Status</div>
-        <div class="col-xs-4 col-md-4">
+        <div class="_col-xs-4 col-sm">Status</div>
+        <div class="_col-xs-4 col-sm">
             <?php if ($network['configured']) { ?>
-            <i class="fa fa-check-circle fa-fw"></i>
+            <i class="fas fa-check-circle"></i>
             <?php } ?>
             <?php if ($network['connected']) { ?>
-            <i class="fa fa-exchange fa-fw"></i>
+            <i class="fas fa-exchange-alt"></i>
             <?php } ?>
          </div>
-      </div>
 
-      <div class="row">
-        <div class="col-xs-4 col-md-4">Channel</div>
-        <div class="col-xs-4 col-md-4">
+        <div class="_col-xs-4 col-md-4">Channel</div>
+        <div class="_col-xs-4 col-md-4">
             <?php if ($network['visible']) { ?>
                 <?php echo htmlspecialchars($network['channel'], ENT_QUOTES) ?>
             <?php } else { ?>
               <span class="label label-warning"> X </span>
             <?php } ?>
         </div>
-      </div>
 
-      <div class="row">
-        <div class="col-xs-4 col-md-4">RSSI</div>
-        <div class="col-xs-6 col-md-6">
+        <div class="_col-xs-4 col-md-4">RSSI</div>
+        <div class="_col-xs-6 col-md-6">
         <?php echo htmlspecialchars($network['RSSI'], ENT_QUOTES);
             echo "dB (";
         if ($network['RSSI'] >= -50) {
@@ -49,17 +45,14 @@
             echo "%)";
         ?>
         </div>
-      </div>
 
         <?php if (array_key_exists('priority', $network)) { ?>
           <input type="hidden" name="priority<?php echo $index ?>" value="<?php echo htmlspecialchars($network['priority'], ENT_QUOTES); ?>" />
         <?php } ?>
-      <input type="hidden" name="protocol<?php echo $index ?>" value="<?php echo htmlspecialchars($network['protocol'], ENT_QUOTES); ?>" />
+        <input type="hidden" name="protocol<?php echo $index ?>" value="<?php echo htmlspecialchars($network['protocol'], ENT_QUOTES); ?>" />
 
-      <div class="row">
         <div class="col-xs-4 col-md-4">Security</div>
         <div class="col-xs-6 col-md-6"><?php echo $network['protocol'] ?></div>
-      </div>
 
       <div class="form-group">
         <div class="input-group col-xs-12 col-md-12">
@@ -84,10 +77,9 @@
         <?php } ?>
             <input type="submit" class="col-xs-4 col-md-4 btn btn-danger" value="<?php echo _("Delete"); ?>" name="delete<?php echo $index ?>"<?php echo ($network['configured'] ? '' : ' disabled')?> />
       </div><!-- /.btn-group -->
-
-    </div><!-- /.panel-body -->
-  </div><!-- /.panel-default -->
-</div><!-- /.col-md-6 -->
+    </div><!-- /.card-body -->
+  </div><!-- /.card -->
 
     <?php $index += 1; ?>
-<?php endforeach ?>
\ No newline at end of file
+<?php endforeach ?>
+</div><!-- /.card-deck -->