diff --git a/app/css/material-light.php b/app/css/material-light.php
new file mode 100644
index 00000000..ac1f5b5a
--- /dev/null
+++ b/app/css/material-light.php
@@ -0,0 +1,615 @@
+<?php header("Content-Type: text/css; charset=utf-8"); ?>
+<?php
+require_once '../../includes/functions.php';
+$color = getColorOpt();
+?>
+
+
+/*
+Theme Name: Material Light
+Author: @marek-guran
+Author URI: https://github.com/marek-guran
+Description: Inspired by Google's Material You Design
+License: GNU General Public License v3.0
+*/
+
+<?php
+// Base color
+$baseColor = $color; // Replace this with your desired color value
+
+// Function to darken a color by a percentage
+function darkenColor($color, $percent)
+{
+    $percent /= 100;
+    $r = hexdec(substr($color, 1, 2));
+    $g = hexdec(substr($color, 3, 2));
+    $b = hexdec(substr($color, 5, 2));
+
+    $r = round($r * (1 - $percent));
+    $g = round($g * (1 - $percent));
+    $b = round($b * (1 - $percent));
+
+    return sprintf("#%02x%02x%02x", $r, $g, $b);
+}
+
+// Function to lighten a color by a percentage
+function lightenColor($color, $percent)
+{
+    $percent /= 100;
+    $r = hexdec(substr($color, 1, 2));
+    $g = hexdec(substr($color, 3, 2));
+    $b = hexdec(substr($color, 5, 2));
+
+    $r = round($r + (255 - $r) * $percent);
+    $g = round($g + (255 - $g) * $percent);
+    $b = round($b + (255 - $b) * $percent);
+
+    return sprintf("#%02x%02x%02x", $r, $g, $b);
+}
+
+// Function to calculate luminance
+function calculateLuminance($color) {
+  $rgb = sscanf($color, "#%02x%02x%02x");
+  list($r, $g, $b) = $rgb;
+  return (0.299 * $r + 0.587 * $g + 0.114 * $b) / 255;
+}
+
+$luminance = calculateLuminance($backgroundColor);
+$textColor = $luminance < 0.7 ? 'white' : 'black';
+
+// Create other color variables
+$cardsColor = lightenColor($baseColor, 60);
+$secondaryColor = lightenColor($baseColor, 50);
+$primaryColor = $baseColor;
+$backgroundColor = lightenColor($baseColor, 70);
+
+// Now you can use these color variables in your CSS or any other parts of your PHP code.
+?>
+
+@import url('all.css');
+
+body {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+html * {
+  font-family: Helvetica,Arial,sans-serif;
+  color: <?php echo $textColor; ?>;
+}
+
+h2 {
+  font-size: 2rem !important;
+}
+
+h4 {
+  font-size: 1.3rem;
+}
+
+h5.card-title {
+  font-size: 1.2rem;
+}
+
+.page-header {
+  border-left: .01rem solid <?php echo $secondaryColor; ?>;
+  border-bottom: .01rem solid <?php echo $secondaryColor; ?>;
+}
+
+.sidebar-light .nav-item.active .nav-link i {
+  color: <?php echo $primaryColor; ?>;
+}
+
+.sidebar .nav-item.active .nav-link {
+  font-weight: 400;
+  color: <?php echo $primaryColor; ?>;
+}
+
+#wrapper #content-wrapper #content {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+.topbar {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+.col {
+  color: <?php echo $textColor; ?>;
+}
+
+.card-header .col i.fa-tachometer-alt,
+.card-header .col i.fa-dot-circle,
+.card-header .col i.fa-wifi,
+.card-header .col i.fa-exchange-alt,
+.card-header .col i.fa-hand-paper,
+.card-header .col i.fa-network-wired,
+.card-header .col i.fa-key,
+.card-header .ra-wireguard,
+.card-header .ra-wireguard:before,
+.card-header .col i.fa-user-lock,
+.card-header .col i.fa-chart-bar,
+.card-header .col i.fa-cube,
+.card-header .col i.fa-info-circle,
+.card-header .col i.fa-globe,
+.card-header .col i.fa-shield-alt {
+  color: <?php echo $textColor; ?>;
+}
+
+i.fa-bars {
+  color: <?php echo $primaryColor; ?>;
+}
+
+.nav-tabs {
+  border-bottom: 1px solid <?php echo $secondaryColor; ?>;
+}
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-link {
+  font-size: 1.0rem;
+  border-top-left-radius: 18px;
+  border-top-right-radius: 18px;
+}
+
+.nav-tabs .nav-link:hover {
+  border-color: transparent;
+}
+
+.navbar-default .navbar-brand:hover {
+  color: #d2d2d2;
+}
+
+.navbar-default .navbar-toggle {
+  border-color: transparent;
+}
+
+.navbar-default .navbar-toggle .icon-bar {
+  background-color: #d2d2d2;
+}
+
+.navbar-default .navbar-toggle:focus,
+.navbar-default .navbar-toggle:hover {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+#content, .navbar, .sidebar, .footer, .sticky-footer {
+  background-attachment: scroll;
+  background-repeat: repeat;
+  background-size: auto;
+  background-position: 0 0;
+  background-origin: padding-box;
+  background-clip: border-box;
+}
+
+.sticky-footer {
+  background-position: 30px 0;
+}
+
+.sidebar {
+  background-position: 0 20px;
+}
+
+.nav-tabs .nav-link.active {
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $secondaryColor; ?>;
+  border-color: transparent;
+}
+
+a:focus, a:hover {
+  color: #d2d2d2;
+}
+
+.card>.card-header, .modal-content, .modal-header {
+  border-color: transparent;
+  background-color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
+  border-radius: 18px;
+  font-size: 1.0rem;
+  font-weight: 400;
+}
+
+.modal-body {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+.card-header {
+  border-bottom-left-radius: 0px!important;
+  border-bottom-right-radius: 0px!important;
+}
+
+.card>.card-header .fa {
+  color: <?php echo $backgroundColor; ?>;
+}
+
+.card-header [class^="fa"] {
+  color: <?php echo $textColor; ?>;
+  font-size: 1.0rem;
+}
+
+.card, .card-body {
+  border-color: transparent;
+  border-radius: 18px;
+  background-color: <?php echo $cardsColor; ?>;
+  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1),
+              0px 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.unstyled {
+  background-color: <?php echo $cardsColor; ?>;
+  color: <?php echo $textColor; ?>;
+}
+
+hr { 
+  border-top: .01rem solid <?php echo $secondaryColor; ?>;
+}
+
+.sidebar-brand-text {
+  color: <?php echo $primaryColor; ?>;
+}
+
+.ra-raspap:before {
+  color: #ac1b3d !important;
+}
+
+.sidebar-light #sidebarToggle {
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>; !important
+}
+
+.sidebar-light #sidebarToggle::after {
+  color: <?php echo $textColor; ?>;
+}
+
+.sidebar-light .nav-item .nav-link:hover i {
+  color: <?php echo $primaryColor; ?>;
+}
+
+.sidebar-light #sidebarToggle:hover {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+.sidebar.toggled .nav-item .nav-link span {
+  display: none;
+}
+
+.sidebar.toggled .nav-item .nav-link {
+  text-align: center;
+  padding: .6rem 1rem;
+  width: 6.5rem;
+}
+
+.card-footer, .modal-footer {
+  background-color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
+  border-top: 0px;
+  border-bottom-right-radius: 18px!important;
+  border-bottom-left-radius: 18px!important;
+}
+
+.modal-footer {
+  border-radius: 18px;
+}
+
+.card>.card-header::before, .navbar-default::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  background-size: 100% 2px, 3px 100%;
+  pointer-events: none;
+}
+
+.sidebar-light, .sticky-footer {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+.sidebar-light .nav-item .nav-link i {
+  color: <?php echo $textColor; ?>;;
+}
+
+.sidebar .nav-item .nav-link {
+  padding: 0.6rem;
+  padding-left: 1.2rem;
+}
+
+.sidebar-light hr.sidebar-divider {
+  border-top: 1px solid <?php echo $secondaryColor; ?>;
+  padding-top: 0.5rem;
+}
+
+.sidebar .nav-item .nav-link span {
+  font-size: 1.0rem;
+}
+
+.sidebar .nav-item .nav-link span:hover {
+  color: <?php echo $primaryColor; ?>!important;
+}
+
+.topbar .topbar-divider {
+  border-right: 1px solid <?php echo $secondaryColor; ?>;
+}
+
+.label-warning {
+  background-color: #d2d2d2;
+}
+
+span.label.label-warning {
+  color: <?php echo $backgroundColor; ?>;
+}
+
+.table>tbody>tr>td,
+.table>tbody>tr>th,
+.table>tfoot>tr>td,
+.table>tfoot>tr>th,
+.table>thead>tr>td,
+.table>thead>tr>th {
+  background-color: <?php echo $primaryColor; ?>;
+  border-top: .01rem solid <?php echo $backgroundColor; ?>;
+}
+
+.table{
+  border-radius: 18px;
+  overflow: hidden;
+}
+
+.table>thead>tr>th {
+  vertical-align: bottom;
+  border-bottom: 0 solid <?php echo $secondaryColor; ?>;
+}
+
+[class*="btn"], [class*="btn"]:focus, [class*="btn"]:disabled {
+  background-color: <?php echo $backgroundColor; ?>;
+  border-color: transparent;
+  border-radius: 18px;
+  color: <?php echo $textColor; ?>;
+}
+
+[class*="btn"]:hover {
+  border-radius: 18px;
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $backgroundColor; ?>;
+  border-color: transparent;
+}
+
+[class*="btn"]:hover .disabled {
+  background-color:red;
+}
+
+[class*="alert"] {
+  border-radius: 18px;
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $backgroundColor; ?>;
+  border: 1px solid #404040;
+}
+
+.close {
+  font-size: 1.2em;
+  font-weight: 400;
+  text-shadow: none;
+  color: <?php echo $textColor; ?>;
+}
+
+.form-control,
+.form-control:focus,
+.custom-select {
+  color: <?php echo $textColor; ?>;
+  background-color: <?php echo $backgroundColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>;
+  border-radius: 18px;
+}
+
+.form-control:disabled,
+.form-control[readonly] {
+  background-color: <?php echo $backgroundColor; ?>;
+  opacity: 0.5;
+}
+
+.form-control::-webkit-input-placeholder { color: #d2d2d2; } 
+.form-control:-moz-placeholder { color: #d2d2d2; }  
+.form-control::-moz-placeholder { color: #d2d2d2; }  
+.form-control:-ms-input-placeholder { color: #d2d2d2; }  
+.form-control::-ms-input-placeholder { color: #d2d2d2; }
+
+.form-control option {
+  font-size: 1em;
+}
+
+.form-control::placeholder {
+    color: <?php echo $textColor; ?>;
+}
+
+input[type="text"]{
+color: <?php echo $textColor; ?>; !important
+}
+
+.progress {
+  background-color: <?php echo $backgroundColor; ?>;
+  border-radius: 18px;
+}
+
+.progress-bar {
+  color: <?php echo $backgroundColor; ?>;
+}
+
+#progressBar {
+  background-color: <?php echo $secondaryColor; ?>!important;
+}
+
+.progress-bar.bg-success {
+  background-color: <?php echo $primaryColor; ?>!important;
+  color: <?php echo $textColor; ?>!important;
+}
+
+.progress .progress-bar {
+  padding-left: 5px;
+}
+
+.progress-bar.progress-bar-info.progress-bar-striped.active {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+.figure-img {
+  filter: opacity(0.7);
+}
+
+.ra-wireguard:before {
+  color: <?php echo $textColor; ?>!important;
+}
+
+.ra-wireguard:hover:before {
+  color: <?php echo $primaryColor; ?>!important;
+}
+
+.sidebar .nav-item.active .nav-link span.ra-wireguard:before {
+    color: <?php echo $primaryColor; ?>!important;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  background-color: <?php echo $primaryColor; ?>;
+  border-color: <?php echo $primaryColor; ?>;
+}
+
+.wg-keygen {
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid yellow <?php echo $secondaryColor; ?>;
+  border-top-right-radius: 18px !important;
+  border-bottom-right-radius: 18px !important;
+}
+
+.btn.btn-outline-secondary.js-add-dhcp-upstream-server {
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>;
+  border-top-right-radius: 18px !important;
+  border-bottom-right-radius: 18px !important;
+}
+
+.btn.btn-outline-success.js-add-dhcp-static-lease {
+  border: 1px solid <?php echo $secondaryColor; ?>;
+}
+
+.btn.btn-outline-success.js-add-dhcp-static-lease:hover {
+  background-color: <?php echo $primaryColor; ?>;
+}
+
+.text-muted {
+  font-size: 0.8rem;
+}
+
+.fas.fa-circle {
+  font-size: 0.7rem;
+}
+
+pre {
+  background-color: <?php echo $backgroundColor; ?>;
+  border: <?php echo $backgroundColor; ?>;
+}
+
+button.btn.btn-light.js-toggle-password {
+  border: 1px solid <?php echo $secondaryColor; ?>;
+}
+
+.btn-primary {
+  border-color: transparent;
+  background-color: <?php echo $primaryColor; ?>;
+}
+
+.btn-primary:hover {
+  background-color: <?php echo $secondaryColor; ?>;
+  border-color: transparent;
+}
+
+.btn.service-status {
+  background-color: <?php echo $backgroundColor; ?>;
+}
+
+input.btn.btn-success {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+input.btn.btn-success:hover {
+  background-color: <?php echo $backgroundColor; ?>;
+  border-color: transparent;
+}
+
+.signal-icon .signal-bar {
+  background: <?php echo $secondaryColor; ?>;
+}
+
+.figure-img {
+  border-radius: 18px;
+}
+
+.logoutput {
+  border-radius: 18px!important;
+  background-color: <?php echo $backgroundColor; ?>;
+  border: 1px solid <?php echo $primaryColor; ?>!important;
+}
+
+.btn-sm {
+  border-top-right-radius: 18px!important;
+  border-bottom-right-radius: 18px!important;
+}
+
+.signal-icon .signal-bar {
+  background: <?php echo $secondaryColor; ?>;
+}
+
+input.btn.btn-warning {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+input.btn.btn-warning:hover {
+  background-color: <?php echo $backgroundColor; ?>;!important
+}
+
+button.btn.btn-danger {
+  background-color: <?php echo $secondaryColor; ?>;
+}
+
+button.btn.btn-danger:hover {
+  background-color: <?php echo $backgroundColor; ?>;!important
+}
+
+.btn-group label.active {
+        background-color: <?php echo $primaryColor; ?>!important;
+        border-color:transparent!important;
+        color: <?php echo $textColor; ?>;!important
+}
+
+.btn-group {
+  background-color: <?php echo $cardsColor; ?>;!important
+}
+
+.btn-group:hover {
+  background-color: <?php echo $cardsColor; ?>;!important
+}
+
+.btn.btn-outline-secondary#gen_wpa_passphrase {
+  background-color: <?php echo $primaryColor; ?>;
+  border: 1px solid <?php echo $secondaryColor; ?>;
+  border-top-right-radius: 18px !important;
+  border-bottom-right-radius: 18px !important;
+}
+
+a.scroll-to-top.rounded {
+  display: inline;
+  background-color: <?php echo $secondaryColor; ?>;
+  border-radius: 18px!important;
+}
+
+a.scroll-to-top.rounded i.fas.fa-angle-up {
+  color: <?php echo $textColor; ?>;
+}
+
+.btn.btn-sm.btn-outline-secondary.rounded-right {
+  border: 1px solid <?php echo $secondaryColor; ?>;
+  background-color: <?php echo $primaryColor; ?>;
+}
+
+.info-item.col-xs-3 {
+  color: <?php echo $textColor; ?>;
+}