diff --git a/app/css/material-dark.php b/app/css/material-dark.php
index 27216ffb..2ca08fd9 100644
--- a/app/css/material-dark.php
+++ b/app/css/material-dark.php
@@ -46,16 +46,7 @@ function lightenColor($color, $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.5 ? 'black' : 'white';
-
+$textColor = lightenColor($baseColor, 95);
 // Create other color variables
 $cardsColor = darkenColor($baseColor, 60);
 $secondaryColor = lightenColor($baseColor, 30);
@@ -75,6 +66,14 @@ html * {
   color: <?php echo $textColor; ?>;
 }
 
+.nav-item.active .nav-link {
+  position: relative;
+  background-color: <?php echo $secondaryColor; ?>;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  border-top-right-radius: 18px;
+  border-bottom-right-radius: 18px;
+}
+
 h2 {
   font-size: 2rem !important;
 }
@@ -93,7 +92,7 @@ h5.card-title {
 }
 
 .sidebar-light .nav-item.active .nav-link i {
-  color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
 }
 
 .sidebar .nav-item.active .nav-link {
@@ -208,6 +207,8 @@ a:focus, a:hover {
 .card-header {
   border-bottom-left-radius: 0px!important;
   border-bottom-right-radius: 0px!important;
+  position: relative;
+  margin-bottom: -18px;
 }
 
 .card>.card-header .fa {
@@ -237,7 +238,7 @@ hr {
 }
 
 .sidebar-brand-text {
-  color: <?php echo $primaryColor; ?>;
+  color: <?php echo $secondaryColor; ?>;
 }
 
 .ra-raspap:before {
@@ -277,6 +278,8 @@ hr {
   border-top: 0px;
   border-bottom-right-radius: 18px!important;
   border-bottom-left-radius: 18px!important;
+  position: relative;
+  margin-top: -18px;
 }
 
 .modal-footer {
diff --git a/app/css/material-light.php b/app/css/material-light.php
index 749afde6..52bba635 100644
--- a/app/css/material-light.php
+++ b/app/css/material-light.php
@@ -47,21 +47,12 @@ function lightenColor($color, $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';
-
+$textColor = lightenColor($baseColor, 95);
 // Create other color variables
-$cardsColor = lightenColor($baseColor, 60);
-$secondaryColor = lightenColor($baseColor, 50);
+$cardsColor = lightenColor($baseColor, 50);
+$secondaryColor = lightenColor($baseColor, 30);
 $primaryColor = $baseColor;
-$backgroundColor = lightenColor($baseColor, 70);
+$backgroundColor = lightenColor($baseColor, 60);
 
 ?>
 
@@ -76,6 +67,14 @@ html * {
   color: <?php echo $textColor; ?>;
 }
 
+.nav-item.active .nav-link {
+  position: relative;
+  background-color: <?php echo $secondaryColor; ?>;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+  border-top-right-radius: 18px;
+  border-bottom-right-radius: 18px;
+}
+
 h2 {
   font-size: 2rem !important;
 }
@@ -94,7 +93,7 @@ h5.card-title {
 }
 
 .sidebar-light .nav-item.active .nav-link i {
-  color: <?php echo $primaryColor; ?>;
+  color: <?php echo $textColor; ?>;
 }
 
 .sidebar .nav-item.active .nav-link {
@@ -210,6 +209,8 @@ a:focus, a:hover {
 .card-header {
   border-bottom-left-radius: 0px!important;
   border-bottom-right-radius: 0px!important;
+  position: relative;
+  margin-bottom: -18px;
 }
 
 .card>.card-header .fa {
@@ -279,6 +280,8 @@ hr {
   border-top: 0px;
   border-bottom-right-radius: 18px!important;
   border-bottom-left-radius: 18px!important;
+  position: relative;
+  margin-top: -18px;
 }
 
 .modal-footer {
@@ -522,7 +525,7 @@ button.btn.btn-light.js-toggle-password {
 }
 
 .btn.service-status {
-  background-color: <?php echo $backgroundColor; ?>;
+  background-color: <?php echo $secondaryColor; ?>;
 }
 
 input.btn.btn-success {