diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css
index 2276f2473..a432faa54 100644
--- a/src/ui/static/css/dashboard.css
+++ b/src/ui/static/css/dashboard.css
@@ -823,10 +823,6 @@ h6 {
   top: 4rem;
 }
 
-.right-3 {
-  right: 0.75rem;
-}
-
 .z-100 {
   z-index: 100;
 }
@@ -875,6 +871,10 @@ h6 {
   z-index: 50;
 }
 
+.z-\[20\] {
+  z-index: 20;
+}
+
 .order-2 {
   order: 2;
 }
@@ -1533,12 +1533,6 @@ h6 {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.scale-102 {
-  --tw-scale-x: 1.02;
-  --tw-scale-y: 1.02;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .scale-110 {
   --tw-scale-x: 1.1;
   --tw-scale-y: 1.1;
@@ -2756,6 +2750,10 @@ h6 {
   border-color: rgb(34 197 94 / var(--tw-border-opacity));
 }
 
+.focus\:border-gray-300\/0:focus {
+  border-color: rgb(210 214 218 / 0);
+}
+
 .focus\:bg-red-500\/80:focus {
   background-color: rgb(245 57 57 / 0.8);
 }
@@ -2776,16 +2774,32 @@ h6 {
   background-color: rgb(8 85 119 / 0.8);
 }
 
+.focus\:ring-1:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus\:valid\:border-green-500:valid:focus {
   --tw-border-opacity: 1;
   border-color: rgb(34 197 94 / var(--tw-border-opacity));
 }
 
+.focus\:valid\:ring-green-500:valid:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
+}
+
 .focus\:invalid\:border-red-500:invalid:focus {
   --tw-border-opacity: 1;
   border-color: rgb(245 57 57 / var(--tw-border-opacity));
 }
 
+.focus\:invalid\:ring-red-500:invalid:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(245 57 57 / var(--tw-ring-opacity));
+}
+
 .focus\:file\:invalid\:border-red-500:invalid::-webkit-file-upload-button:focus {
   --tw-border-opacity: 1;
   border-color: rgb(245 57 57 / var(--tw-border-opacity));
diff --git a/src/ui/templates/settings_general.html b/src/ui/templates/settings_general.html
index dfa23d6da..f7ed21ad7 100644
--- a/src/ui/templates/settings_general.html
+++ b/src/ui/templates/settings_general.html
@@ -54,7 +54,7 @@
         <input
         default-value="{{global_config[setting]['value']}}" default-method="{{global_config[setting]['method']}}"
         {% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default'  %} disabled {% endif %}     id="{{setting}}" name="{{setting}}"
-        class="duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700"
+        class="outline-none dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:border-gray-300/0 focus:ring-1  focus:valid:ring-green-500 focus:invalid:ring-red-500  text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700"
         value="{% if global_config[setting]['value'] %} {{global_config[setting]['value']}} {% else %} {{value['default']}} {% endif %}" type="{{value['type']}}"  pattern="{{value['regex']|safe}}" />
       
         {% if value['type'] == "password" %}
@@ -91,7 +91,8 @@
       {{current_endpoint}}-setting-select="{{value['id']}}"
       value="{{global_config[setting]['value']}}"
       type="button"
-      {% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default'  %} disabled {% endif %}      class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease  w-full  rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+      {% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default'  %} disabled {% endif %}            class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-primary flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+
     >
       {{global_config[setting]['value']}}
        <!-- chevron -->
@@ -134,7 +135,7 @@
       <!-- dropdown-->
       <div
       {{current_endpoint}}-setting-select-dropdown="{{value['id']}}"
-      class="hidden z-100 absolute h-full flex-col w-full mt-2 "
+      class="hidden z-[20] absolute h-full flex-col w-full mt-2 "
     >
         {% for item in value['select'] %}
         {% if global_config[setting]['value'] and global_config[setting]['value'] == item or not global_config[setting]['value'] and value['default'] == item %}
diff --git a/src/ui/templates/settings_plugins.html b/src/ui/templates/settings_plugins.html
index 517afe247..12481ef09 100644
--- a/src/ui/templates/settings_plugins.html
+++ b/src/ui/templates/settings_plugins.html
@@ -88,7 +88,7 @@
         <input
         default-value="{{global_config[setting]['value']}}" default-method="{{global_config[setting]['method']}}"
         {% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default'  %} disabled {% endif %}     id="{{setting}}" name="{{setting}}"
-        class="duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700"
+        class="outline-none dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:border-gray-300/0 focus:ring-1  focus:valid:ring-green-500 focus:invalid:ring-red-500  text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700"
         value="{% if global_config[setting]['value'] %} {{global_config[setting]['value']}} {% else %} {{value['default']}} {% endif %}" type="{{value['type']}}"  pattern="{{value['regex']|safe}}" />
      
         {% if value['type'] == "password" %}
@@ -124,8 +124,8 @@
         {% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default'  %} disabled {% endif %}       {{current_endpoint}}-setting-select="{{value['id']}}"
           default-value="{{global_config[setting]['value']}}"
           type="button"
-          class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
-        >
+          class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-primary flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+          >
           {% for item in value['select'] %} {% if global_config[setting]['value'] and
           global_config[setting]['value'] == item %}
           <span
@@ -156,7 +156,7 @@
               <!-- dropdown-->
           <div
           {{current_endpoint}}-setting-select-dropdown="{{value['id']}}"
-          class="hidden z-100 absolute h-full flex-col w-full mt-2"
+          class="hidden z-[20] absolute h-full flex-col w-full mt-2"
         >
           {% for item in value['select'] %} {% if global_config[setting]['value'] and
           global_config[setting]['value'] == item or not global_config[setting]['value']
@@ -312,7 +312,7 @@
         <input
         default-value="{{global_config[setting]['value']}}" default-method="{{global_config[setting]['method']}}"
         {% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default'  %} disabled {% endif %}     id="{{setting}}" name="{{setting}}"
-        class="duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700"
+        class="outline-none dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:border-gray-300/0 focus:ring-1  focus:valid:ring-green-500 focus:invalid:ring-red-500  text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700"
         value="{% if global_config[setting]['value'] %} {{global_config[setting]['value']}} {% else %} {{value['default']}} {% endif %}" type="{{value['type']}}"  pattern="{{value['regex']|safe}}" />
      
         {% if value['type'] == "password" %}
@@ -347,8 +347,8 @@
         {% if global_config[setting]['method'] != 'ui' and global_config[setting]['method'] != 'default'  %} disabled {% endif %}       {{current_endpoint}}-setting-select="{{value['id']}}"
           default-value="{{global_config[setting]['value']}}"
           type="button"
-          class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-green-500 flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
-        >
+          class="disabled:opacity-75 dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 duration-300 ease-in-out dark:opacity-90 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 focus:border-primary flex justify-between align-middle items-center text-left text-sm leading-5.6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-3 md:py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+          >
           {% for item in value['select'] %} {% if global_config[setting]['value'] and
           global_config[setting]['value'] == item %}
           <span
@@ -379,7 +379,7 @@
               <!-- dropdown-->
           <div
           {{current_endpoint}}-setting-select-dropdown="{{value['id']}}"
-          class="hidden z-100 absolute h-full flex-col w-full mt-2"
+          class="hidden z-[20] absolute h-full flex-col w-full mt-2"
         >
           {% for item in value['select'] %} {% if global_config[setting]['value'] and
           global_config[setting]['value'] == item or not global_config[setting]['value']