diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css
index 77ba8f0c..36bc20d9 100644
--- a/src/ui/static/css/dashboard.css
+++ b/src/ui/static/css/dashboard.css
@@ -1575,6 +1575,10 @@ h6 {
   justify-content: space-between;
 }
 
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
 .justify-items-center {
   justify-items: center;
 }
@@ -2484,6 +2488,11 @@ h6 {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.brightness-90 {
+  --tw-brightness: brightness(.9);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -3129,6 +3138,11 @@ h6 {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.dark .dark\:hover\:brightness-95:hover {
+  --tw-brightness: brightness(.95);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .dark .dark\:disabled\:border-gray-800:disabled {
   --tw-border-opacity: 1;
   border-color: rgb(37 47 64 / var(--tw-border-opacity));
diff --git a/src/ui/static/js/global.js b/src/ui/static/js/global.js
index bbdd7017..91ed2db6 100644
--- a/src/ui/static/js/global.js
+++ b/src/ui/static/js/global.js
@@ -58,8 +58,8 @@ class darkMode {
   toggle() {
     document.querySelector("html").classList.toggle("dark");
     this.darkToggleLabel.textContent = this.darkToggleEl.checked
-      ? "dark"
-      : "light";
+      ? "dark mode"
+      : "light mode";
   }
 
   async saveMode() {
diff --git a/src/ui/static/js/utils/settings.js b/src/ui/static/js/utils/settings.js
index 3125bb8a..8a6f20bb 100644
--- a/src/ui/static/js/utils/settings.js
+++ b/src/ui/static/js/utils/settings.js
@@ -120,7 +120,7 @@ class Tabs {
           const tabAtt = tab.getAttribute(`${this.prefix}-item-handler`);
           //style
           this.resetDeskStyle();
-          tab.classList.add("brightness-95", "z-10");
+          tab.classList.add("brightness-90", "z-10");
           //show content
           this.showRightSetting(tabAtt);
         }
@@ -130,7 +130,7 @@ class Tabs {
 
   resetDeskStyle() {
     this.desktopBtns.forEach((tab) => {
-      tab.classList.remove("brightness-95", "z-10");
+      tab.classList.remove("brightness-90", "z-10");
     });
   }
 
diff --git a/src/ui/templates/menu.html b/src/ui/templates/menu.html
index dcadb0b6..27389506 100644
--- a/src/ui/templates/menu.html
+++ b/src/ui/templates/menu.html
@@ -349,7 +349,7 @@
   <!-- bottom sidebar  -->
   <div class="w-full flex flex-col justify-end m-4">
     <!-- dark/light mode -->
-    <div class="min-h-6 my-4 flex justify-center">
+    <div class="min-h-6 my-4 ml-12 flex justify-start">
       <input
         type="hidden"
         id="csrf_token"
@@ -371,7 +371,7 @@
         dark-toggle-label
         class="dark:text-white dark:opacity-80 transition inline-block pl-3 mb-0 ml-0 font-normal cursor-pointer select-none text-sm text-slate-700"
       >
-        {% if dark_mode == True %}dark {% else %} light {% endif %}
+        {% if dark_mode == True %}dark mode{% else %} light mode{% endif %}
       </label>
     </div>
     <!-- end dark/light mode -->
diff --git a/src/ui/templates/settings_tabs.html b/src/ui/templates/settings_tabs.html
index c9061588..660075f3 100644
--- a/src/ui/templates/settings_tabs.html
+++ b/src/ui/templates/settings_tabs.html
@@ -27,7 +27,7 @@
     <button
       {{current_endpoint}}-item-handler="general"
       type="button"
-      class=" brightness-75 border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
+      class="brightness-90 border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
     >
       <div class="w-full flex justify-between items-center">
         <!-- text and icon -->
@@ -65,7 +65,7 @@
     <button
     {{current_endpoint}}-item-handler="{{ plugin['id'] }}"
     type="button"
-    class="z-1000 {% if current_endpoint == 'service' and loop.first %} brightness-75 {% endif %} border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700  border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
+    class="z-1000 {% if current_endpoint == 'service' and loop.first %} brightness-90 {% endif %} border-primary dark:hover:bg-slate-800 dark:border-slate-600 dark:bg-slate-700  border my-1 relative inline-block px-3 py-3 font-bold text-center uppercase align-middle transition-all rounded-none cursor-pointer bg-white hover:bg-gray-100 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
   >
     <div clas="w-full flex justify-between items-center">
       <!-- text and icon -->
@@ -101,7 +101,7 @@
   <button
   {{current_endpoint}}-mobile-select
     type="button"
-    class="dark:hover:brightness-90 dark:border-slate-600 dark:bg-slate-700  border-primary border w-full flex items-center justify-between rounded-lg hover:-translate-y-px my-1 px-6 py-3 font-bold text-center  uppercase align-middle transition-all cursor-pointer bg-white hover:bg-gray-50 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
+    class="dark:hover:brightness-95 dark:border-slate-600 dark:bg-slate-700  border-primary border w-full flex items-center justify-between rounded-lg hover:-translate-y-px my-1 px-6 py-3 font-bold text-center  uppercase align-middle transition-all cursor-pointer bg-white hover:bg-gray-50 leading-normal text-sm ease-in tracking-tight-rem shadow-xs hover:shadow-md"
   >
     <span class="transition duration-300 ease-in-out dark:opacity-90 dark:text-gray-300 text-primary">{% if current_endpoint == "global-config" %}general {% endif %} </span>
     <!-- chevron -->