diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css
index cf35f4699..1e3e668c8 100644
--- a/src/ui/static/css/dashboard.css
+++ b/src/ui/static/css/dashboard.css
@@ -2292,6 +2292,14 @@ h6 {
   letter-spacing: 0.025em;
 }
 
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(94 114 228 / var(--tw-text-opacity));
@@ -3996,6 +4004,10 @@ h6 {
   color: rgb(255 255 255 / 0.8);
 }
 
+:is(.dark .dark\:text-white\/90) {
+  color: rgb(255 255 255 / 0.9);
+}
+
 :is(.dark .dark\:opacity-60) {
   opacity: 0.6;
 }
diff --git a/src/ui/templates/file_manager.html b/src/ui/templates/file_manager.html
index 7151af771..07a55224f 100644
--- a/src/ui/templates/file_manager.html
+++ b/src/ui/templates/file_manager.html
@@ -7,7 +7,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
 >
   <div class="w-full grid-cols-12 grid">
     <div class="col-span-12 md:col-span-8">
-      <h5 class="mb-2 font-bold dark:text-white">
+      <h5 class="mb-2 font-bold dark:text-white/90">
         {% if current_endpoint == "configs" %} SERVICE MANAGER {% else %} FILE
         MANAGER {% endif %}
       </h5>
diff --git a/src/ui/templates/global_config.html b/src/ui/templates/global_config.html
index 912a571cd..b52806bfe 100644
--- a/src/ui/templates/global_config.html
+++ b/src/ui/templates/global_config.html
@@ -4,7 +4,7 @@
   <div class="p-4 col-span-12 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
   >
     <div data-{{current_endpoint}}-tabs-header class="flex justify-start items-center gap-x-4 gap-y-2 my-3">
-      <h5 class="transition duration-300 ease-in-out dark:opacity-90 ml-2 font-bold text-md uppercase dark:text-white mb-0">CONFIGS</h5>
+      <h5 class="transition duration-300 ease-in-out 0 ml-2 font-bold text-md uppercase dark:text-white/90 mb-0">CONFIGS</h5>
       <!-- search inpt-->
       <div class="flex relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3">
   
diff --git a/src/ui/templates/home.html b/src/ui/templates/home.html
index 818a11c41..eb9b60671 100644
--- a/src/ui/templates/home.html
+++ b/src/ui/templates/home.html
@@ -13,7 +13,7 @@
       Version
     </p>
     <!-- version of user -->
-    <h5 class="mb-1 font-bold dark:text-gray-400">{{ version }}</h5>
+    <h5 class="mb-1 font-bold dark:text-white/90">{{ version }}</h5>
 
     <p class="mb-0 dark:text-white dark:opacity-60">
       <!-- case no remote fetch -->
@@ -64,7 +64,7 @@
     >
       Instances
     </p>
-    <h5 class="mb-1 font-bold dark:text-gray-400">{{ instances_number }}</h5>
+    <h5 class="mb-1 font-bold dark:text-white/90">{{ instances_number }}</h5>
     <p class="mb-0 dark:text-white dark:opacity-60">
       <span class="font-bold leading-normal text-sm text-emerald-500 mx-0.5"
         >{{instance_health_count}} / {{ instances_number }}</span
@@ -103,7 +103,7 @@
     >
       Services
     </p>
-    <h5 class="mb-1 font-bold dark:text-gray-400">{{ services_number }}</h5>
+    <h5 class="mb-1 font-bold dark:text-white/90">{{ services_number }}</h5>
     <p class="mb-0 dark:text-white dark:opacity-60">
       <span class="font-bold leading-normal text-sm text-sky-600 mx-0.5"
         >{{services_ui_count}}</span
@@ -150,7 +150,7 @@
     >
       Plugins
     </p>
-    <h5 class="mb-1 font-bold dark:text-gray-400">
+    <h5 class="mb-1 font-bold dark:text-white/90">
       {{ config["CONFIG"].get_plugins()|length }}
     </h5>
     <p class="mb-0 dark:text-white dark:opacity-60">
diff --git a/src/ui/templates/instances.html b/src/ui/templates/instances.html
index b3a32fefc..32671b888 100644
--- a/src/ui/templates/instances.html
+++ b/src/ui/templates/instances.html
@@ -23,7 +23,7 @@ instances_batched %}
       <div class="h-4 w-4 rounded-full bg-red-500"></div>
       {% endif %}
       <h5
-        class="ml-3 mb-1 font-bold dark:text-white transition duration-300 ease-in-out dark:opacity-90"
+        class="ml-3 mb-1 font-bold dark:text-white/90 transition duration-300 ease-in-out"
       >
         {{ instance.name }}
       </h5>
diff --git a/src/ui/templates/jobs.html b/src/ui/templates/jobs.html
index db084c237..47862fb03 100644
--- a/src/ui/templates/jobs.html
+++ b/src/ui/templates/jobs.html
@@ -4,7 +4,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
 <div
   class="col-span-12 md:col-span-4 3xl:col-span-3 p-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
-  <h5 class="mb-2 font-bold dark:text-white">INFO</h5>
+  <h5 class="mb-2 font-bold dark:text-white/90">INFO</h5>
   <div class="mx-1 flex items-center my-4">
     <p
       class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 dark:opacity-80"
@@ -37,7 +37,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
   data-{{current_endpoint}}-filter
   class="col-span-12 md:col-span-8 2xl:col-span-6 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
-  <h5 class="mb-2 font-bold dark:text-white">FILTER</h5>
+  <h5 class="mb-2 font-bold dark:text-white/90">FILTER</h5>
   <div class="mx-2 grid grid-cols-12 gap-x-4 gap-y-2">
     <!-- search inpt-->
     <div class="flex flex-col relative col-span-12 md:col-span-6">
@@ -193,7 +193,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
 <div
   class="w-full overflow-hidden overflow-y-auto overflow-x-auto max-h-100 sm:max-h-125 min-h-50-screen col-span-12 p-4 relative break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
-  <h5 class="mb-4 mt-2 font-bold dark:text-white mx-2">JOBS</h5>
+  <h5 class="mb-4 mt-2 font-bold dark:text-white/90 mx-2">JOBS</h5>
   <!-- list container-->
   <div class="min-w-[900px] w-full grid grid-cols-12 rounded p-2">
     <!-- header-->
diff --git a/src/ui/templates/logs.html b/src/ui/templates/logs.html
index 26e1758be..5f4b6e755 100644
--- a/src/ui/templates/logs.html
+++ b/src/ui/templates/logs.html
@@ -6,7 +6,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
   data-{{current_endpoint}}-settings
   class="col-span-12 lg:col-span-8 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
-  <h5 class="mb-2 font-bold dark:text-white">SETTINGS</h5>
+  <h5 class="mb-2 font-bold dark:text-white/90">SETTINGS</h5>
   <div class="mx-2 grid grid-cols-12 gap-x-4 gap-y-2">
     <!-- select instance -->
     <div
@@ -171,7 +171,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
         data-submit-date
         type="button"
         id="submit-settings"
-        class="tracking-wide dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+        class="tracking-widest dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
       >
         Submit Date
       </button>
@@ -179,7 +179,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
         data-submit-live="no"
         type="button"
         id="submit-settings"
-        class="hidden tracking-wide dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+        class="hidden tracking-widest dark:brightness-125 hover:brightness-75 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl bg-primary leading-normal text-xs ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
       >
         Go Live
       </button>
@@ -193,7 +193,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
   data-{{current_endpoint}}-filter
   class="col-span-12 lg:col-span-4 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
-  <h5 class="mb-2 font-bold dark:text-white">FILTERS</h5>
+  <h5 class="mb-2 font-bold dark:text-white/90">FILTERS</h5>
   <div class="mx-2 grid grid-cols-12 gap-x-4 gap-y-2">
     <!-- search inpt-->
     <div class="flex flex-col relative col-span-12">
@@ -308,7 +308,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
 <div
   class="min-h-50-screen col-span-12 p-4 relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
-  <h5 class="mb-4 mt-2 font-bold dark:text-white mx-2">LOGS</h5>
+  <h5 class="mb-4 mt-2 font-bold dark:text-white/90 mx-2">LOGS</h5>
   <!-- list container-->
   <div class="w-full grid grid-cols-12 rounded p-2">
     <!-- header-->
diff --git a/src/ui/templates/plugins.html b/src/ui/templates/plugins.html
index b16bd66dd..c43d794a3 100644
--- a/src/ui/templates/plugins.html
+++ b/src/ui/templates/plugins.html
@@ -6,7 +6,7 @@ include "plugins_modal.html" %}
 <div
   class="p-4 col-span-12 md:col-span-5 2xl:col-span-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
-  <h5 class="col-span-12 mb-4 font-bold dark:text-white">INFO</h5>
+  <h5 class="col-span-12 mb-4 font-bold dark:text-white/90">INFO</h5>
   <div class="mx-1 flex items-center my-4">
     <p
       class="transition duration-300 ease-in-out font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 dark:opacity-80"
@@ -63,7 +63,7 @@ include "plugins_modal.html" %}
   data-{{current_endpoint}}-upload
   class="p-4 col-span-12 md:col-span-7 2xl:col-span-4 grid grid-cols-12 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
-  <h5 class="col-span-12 mb-4 font-bold dark:text-white">UPLOAD / RELOAD</h5>
+  <h5 class="col-span-12 mb-4 font-bold dark:text-white/90">UPLOAD / RELOAD</h5>
 
   <div class="mx-2 p-0 col-span-12 grid grid-cols-12">
     <!-- dropzone -->
@@ -115,7 +115,7 @@ include "plugins_modal.html" %}
   data-{{current_endpoint}}-filter
   class="p-4 col-span-12 2xl:col-span-4 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
-  <h5 class="mb-2 font-bold dark:text-white">FILTER</h5>
+  <h5 class="mb-2 font-bold dark:text-white/90">FILTER</h5>
   <div class="mx-2 grid grid-cols-12 gap-x-4 gap-y-2">
     <!-- search inpt-->
     <div class="flex flex-col relative col-span-12">
@@ -206,7 +206,7 @@ include "plugins_modal.html" %}
 <div
   class="min-h-[55vh] max-h-80 overflow-hidden overflow-y-auto p-4 col-span-12 relative min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
 >
-  <h5 class="mb-4 mt-2 font-bold dark:text-white mx-2">LIST</h5>
+  <h5 class="mb-4 mt-2 font-bold dark:text-white/90 mx-2">LIST</h5>
 
   <div data-{{current_endpoint}}-list class="grid grid-cols-12 gap-3">
     {% for plugin in plugins %} {% if plugin['external'] %}
diff --git a/src/ui/templates/services.html b/src/ui/templates/services.html
index a2a349a1b..83132041b 100644
--- a/src/ui/templates/services.html
+++ b/src/ui/templates/services.html
@@ -32,10 +32,10 @@
     class="dark:brightness-110 overflow-hidden hover:scale-102 transition col-span-12 lg:col-span-6 3xl:col-span-4 p-4 w-full shadow-md break-words bg-white dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border"
   >
     <div data-services-settings class="hidden" data-value="{{service['settings']}}"></div>
-    <h5 class="transition duration-300 ease-in-out dark:opacity-90 text-center sm:text-left mb-1 font-bold dark:text-white">
+    <h5 class="transition duration-300 ease-in-out text-center sm:text-left mb-1 font-bold dark:text-white/90">
       {{ service["SERVER_NAME"]['value'] }}
     </h5>
-    <h6 class="mb-2 font-semibold text-gray-600 dark:text-white">{{ service["SERVER_NAME"]['method'] }}</h5>
+    <h6 class="mb-2 font-semibold text-gray-600 dark:text-white/80">{{ service["SERVER_NAME"]['method'] }}</h5>
 
     
 
diff --git a/src/ui/templates/settings_plugins.html b/src/ui/templates/settings_plugins.html
index 3fd6bb3d8..5ba21a795 100644
--- a/src/ui/templates/settings_plugins.html
+++ b/src/ui/templates/settings_plugins.html
@@ -13,7 +13,7 @@ data-plugin-item="{{plugin['id']}}"
   <!-- title and desc -->
   <div class="col-span-12" data-setting-header>
     <h5
-      class="transition duration-300 ease-in-out dark:opacity-90 ml-2 font-bold text-md uppercase dark:text-white mb-0"
+      class="transition duration-300 ease-in-out ml-2 font-bold text-md uppercase dark:text-white/90 mb-0"
     >
       {{plugin['name']}} <span>{{plugin['version']}}</span>
     </h5>