diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css
index 424721920..1e3e668c8 100644
--- a/src/ui/static/css/dashboard.css
+++ b/src/ui/static/css/dashboard.css
@@ -1088,10 +1088,6 @@ h6 {
   margin-top: 2rem;
 }
 
-.ml-0\.5 {
-  margin-left: 0.125rem;
-}
-
 .block {
   display: block;
 }
@@ -1112,10 +1108,6 @@ h6 {
   display: grid;
 }
 
-.\!hidden {
-  display: none !important;
-}
-
 .hidden {
   display: none;
 }
@@ -1148,6 +1140,10 @@ h6 {
   height: 1rem;
 }
 
+.h-4\.5 {
+  height: 1.125rem;
+}
+
 .h-40 {
   height: 10rem;
 }
@@ -1192,10 +1188,6 @@ h6 {
   height: calc(100vh - 360px);
 }
 
-.h-4\.5 {
-  height: 1.125rem;
-}
-
 .max-h-100 {
   max-height: 25rem;
 }
@@ -1288,6 +1280,10 @@ h6 {
   width: 1rem;
 }
 
+.w-4\.5 {
+  width: 1.125rem;
+}
+
 .w-40 {
   width: 10rem;
 }
@@ -1336,10 +1332,6 @@ h6 {
   width: 100vw;
 }
 
-.w-4\.5 {
-  width: 1.125rem;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
@@ -2300,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));
@@ -2320,11 +2320,19 @@ h6 {
   color: rgb(108 117 125 / var(--tw-text-opacity));
 }
 
+.text-gray-600\/90 {
+  color: rgb(108 117 125 / 0.9);
+}
+
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(73 80 87 / var(--tw-text-opacity));
 }
 
+.text-gray-700\/80 {
+  color: rgb(73 80 87 / 0.8);
+}
+
 .text-green-500 {
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity));
@@ -2360,42 +2368,6 @@ h6 {
   color: rgb(251 177 64 / var(--tw-text-opacity));
 }
 
-.text-\[\#344767\] {
-  --tw-text-opacity: 1;
-  color: rgb(52 71 103 / var(--tw-text-opacity));
-}
-
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(37 47 64 / var(--tw-text-opacity));
-}
-
-.text-gray-700\/80 {
-  color: rgb(73 80 87 / 0.8);
-}
-
-.text-gray-800\/80 {
-  color: rgb(37 47 64 / 0.8);
-}
-
-.text-gray-600\/80 {
-  color: rgb(108 117 125 / 0.8);
-}
-
-.text-gray-600\/90 {
-  color: rgb(108 117 125 / 0.9);
-}
-
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(173 181 189 / var(--tw-text-opacity));
-}
-
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -2517,6 +2489,267 @@ h6 {
   flex-wrap: inherit;
 }
 
+.close-btn {
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(245 57 57 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: center;
+  vertical-align: middle;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1.5;
+  letter-spacing: -0.025rem;
+  --tw-text-opacity: 1;
+  color: rgb(245 57 57 / var(--tw-text-opacity));
+  --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+.close-btn:hover {
+  --tw-translate-y: -1px;
+  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));
+  background-color: rgb(255 255 255 / 0.8);
+  --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.close-btn:focus {
+  background-color: rgb(255 255 255 / 0.8);
+}
+
+.close-btn:active {
+  opacity: 0.85;
+}
+
+:is(.dark .close-btn) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(233 236 239 / var(--tw-bg-opacity));
+  --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);
+}
+
+:is(.dark .close-btn:hover) {
+  --tw-brightness: brightness(.75);
+  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);
+}
+
+.valid-btn {
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: center;
+  vertical-align: middle;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1.5;
+  letter-spacing: 0.025em;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+.valid-btn:hover {
+  --tw-translate-y: -1px;
+  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));
+  background-color: rgb(34 197 94 / 0.8);
+  --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.valid-btn:focus {
+  background-color: rgb(34 197 94 / 0.8);
+}
+
+.valid-btn:active {
+  opacity: 0.85;
+}
+
+:is(.dark .valid-btn) {
+  --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);
+}
+
+.delete-btn {
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 57 57 / var(--tw-bg-opacity));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: center;
+  vertical-align: middle;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1.5;
+  letter-spacing: 0.025em;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+.delete-btn:hover {
+  --tw-translate-y: -1px;
+  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));
+  background-color: rgb(245 57 57 / 0.8);
+  --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.delete-btn:focus {
+  background-color: rgb(245 57 57 / 0.8);
+}
+
+.delete-btn:active {
+  opacity: 0.85;
+}
+
+:is(.dark .delete-btn) {
+  --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);
+}
+
+.edit-btn {
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 177 64 / var(--tw-bg-opacity));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: center;
+  vertical-align: middle;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1.5;
+  letter-spacing: 0.025em;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+.edit-btn:hover {
+  --tw-translate-y: -1px;
+  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));
+  background-color: rgb(251 177 64 / 0.8);
+  --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.edit-btn:focus {
+  background-color: rgb(251 177 64 / 0.8);
+}
+
+.edit-btn:active {
+  opacity: 0.85;
+}
+
+:is(.dark .edit-btn) {
+  --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);
+}
+
+.info-btn {
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(14 165 233 / var(--tw-bg-opacity));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: center;
+  vertical-align: middle;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1.5;
+  letter-spacing: 0.025em;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  --tw-shadow: 0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 7px 14px var(--tw-shadow-color), 0 3px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
+}
+
+.info-btn:hover {
+  --tw-translate-y: -1px;
+  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));
+  background-color: rgb(14 165 233 / 0.8);
+  --tw-shadow: 0 4px 6px rgba(50,50,93,.1),0 1px 3px rgba(0,0,0,.08);
+  --tw-shadow-colored: 0 4px 6px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.info-btn:focus {
+  background-color: rgb(14 165 233 / 0.8);
+}
+
+.info-btn:active {
+  opacity: 0.85;
+}
+
+:is(.dark .info-btn) {
+  --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);
+}
+
+/*----------------------------------------------*/
+
+/*---------------SETTINGS_PLUGINS---------------*/
+
+/*----------------------------------------------*/
+
 .checkbox {
   position: relative;
   z-index: 10;
@@ -2604,12 +2837,6 @@ h6 {
   color: rgb(210 214 218 / var(--tw-text-opacity));
 }
 
-/*----------------------------------------------*/
-
-/*---------------SETTINGS_PLUGINS---------------*/
-
-/*----------------------------------------------*/
-
 .custom-select-btn {
   display: flex;
   width: 100%;
@@ -3401,18 +3628,6 @@ h6 {
   color: rgb(108 117 125 / var(--tw-text-opacity));
 }
 
-.after\:text-gray-500::after {
-  content: var(--tw-content);
-  --tw-text-opacity: 1;
-  color: rgb(173 181 189 / var(--tw-text-opacity));
-}
-
-.after\:text-gray-700::after {
-  content: var(--tw-content);
-  --tw-text-opacity: 1;
-  color: rgb(73 80 87 / var(--tw-text-opacity));
-}
-
 .after\:shadow-2xl::after {
   content: var(--tw-content);
   --tw-shadow: 0 .3125rem .625rem 0 rgba(0,0,0,.12);
@@ -3742,10 +3957,6 @@ h6 {
   fill: #adb5bd;
 }
 
-:is(.dark .dark\:fill-gray-700) {
-  fill: #495057;
-}
-
 :is(.dark .dark\:fill-gray-600) {
   fill: #6c757d;
 }
@@ -3793,13 +4004,8 @@ h6 {
   color: rgb(255 255 255 / 0.8);
 }
 
-:is(.dark .dark\:text-gray-600) {
-  --tw-text-opacity: 1;
-  color: rgb(108 117 125 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:opacity-50) {
-  opacity: 0.5;
+:is(.dark .dark\:text-white\/90) {
+  color: rgb(255 255 255 / 0.9);
 }
 
 :is(.dark .dark\:opacity-60) {
@@ -3861,12 +4067,6 @@ h6 {
   color: rgb(173 181 189 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:after\:text-gray-600)::after {
-  content: var(--tw-content);
-  --tw-text-opacity: 1;
-  color: rgb(108 117 125 / var(--tw-text-opacity));
-}
-
 :is(.dark .dark\:checked\:border-primary:checked) {
   --tw-border-opacity: 1;
   border-color: rgb(8 85 119 / var(--tw-border-opacity));
diff --git a/src/ui/static/js/services.js b/src/ui/static/js/services.js
index 92f0281ae..0e9ca1744 100644
--- a/src/ui/static/js/services.js
+++ b/src/ui/static/js/services.js
@@ -75,7 +75,7 @@ class ServiceModal {
           this.updateModalData(obj);
           //show modal
           this.resetFilterInp();
-          this.changeSubmitBtnName("EDIT");
+          this.changeSubmitBtn("EDIT", "edit-btn");
           this.openModal();
         }
       } catch (err) {}
@@ -98,7 +98,7 @@ class ServiceModal {
 
           //show modal
           this.resetFilterInp();
-          this.changeSubmitBtnName("CREATE");
+          this.changeSubmitBtn("CREATE", "valid-btn");
           this.openModal();
         }
       } catch (err) {}
@@ -124,8 +124,15 @@ class ServiceModal {
     inpFilter.dispatchEvent(new Event("input"));
   }
 
-  changeSubmitBtnName(text) {
+  changeSubmitBtn(text, btnType) {
     this.submitBtn.textContent = text;
+    this.submitBtn.classList.remove(
+      "delete-btn",
+      "valid-btn",
+      "edit-btn",
+      "info-btn"
+    );
+    this.submitBtn.classList.add(btnType);
   }
 
   setSettingsDefault() {
diff --git a/src/ui/static/js/utils/file.manager.js b/src/ui/static/js/utils/file.manager.js
index 85e130403..4ada55857 100644
--- a/src/ui/static/js/utils/file.manager.js
+++ b/src/ui/static/js/utils/file.manager.js
@@ -565,12 +565,46 @@ class FolderModal {
 
   //submit text depending action
   setSubmitTxt(action) {
-    if (action === "new") return (this.modalSubmit.textContent = "add");
-    if (action === "view") return (this.modalSubmit.textContent = "ok");
-    if (action === "edit") return (this.modalSubmit.textContent = "edit");
-    if (action === "delete") return (this.modalSubmit.textContent = "delete");
-    if (action === "download")
-      return (this.modalSubmit.textContent = "download");
+    this.delSubmitBtnType();
+    if (action === "new") {
+      this.modalSubmit.textContent = "add";
+      this.setSubmitBtnType("valid-btn");
+      return;
+    }
+    if (action === "view") {
+      this.modalSubmit.textContent = "ok";
+      this.setSubmitBtnType("valid-btn");
+      return;
+    }
+    if (action === "edit") {
+      this.setSubmitBtnType("edit-btn");
+      this.modalSubmit.textContent = "edit";
+      return;
+    }
+
+    if (action === "delete") {
+      this.setSubmitBtnType("delete-btn");
+      this.modalSubmit.textContent = "delete";
+      return;
+    }
+    if (action === "download") {
+      this.setSubmitBtnType("info-btn");
+      this.modalSubmit.textContent = "download";
+      return;
+    }
+  }
+
+  setSubmitBtnType(btnType) {
+    this.modalSubmit.classList.add(btnType);
+  }
+
+  delSubmitBtnType() {
+    this.modalSubmit.classList.remove(
+      "delete-btn",
+      "valid-btn",
+      "edit-btn",
+      "info-btn"
+    );
   }
 
   //show only if type file and display text
diff --git a/src/ui/styles.css b/src/ui/styles.css
index 8327c1aca..edc7ed9a0 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -2,6 +2,30 @@
 @tailwind components;
 @tailwind utilities;
 
+.close-btn {
+  @apply dark:brightness-90  inline-block px-6 py-3 font-bold text-center text-red-500 border border-red-500 uppercase align-middle transition-all rounded-lg cursor-pointer dark:bg-gray-200 dark:hover:brightness-75 bg-white hover:bg-white/80 focus:bg-white/80 leading-normal ease-in tracking-tight-rem shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md;
+}
+
+.valid-btn {
+  @apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md;
+}
+
+.delete-btn {
+  @apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md;
+}
+
+.edit-btn {
+  @apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md;
+}
+
+.info-btn {
+  @apply tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md;
+}
+
+/*----------------------------------------------*/
+/*---------------SETTINGS_PLUGINS---------------*/
+/*----------------------------------------------*/
+
 .checkbox {
   @apply cursor-pointer disabled:cursor-default 
     relative dark:border-slate-600 dark:bg-slate-700 z-10 aria-checked:z-0 w-5 h-5 
@@ -18,9 +42,6 @@
     dark:aria-checked:disabled:text-gray-300;
 }
 
-/*----------------------------------------------*/
-/*---------------SETTINGS_PLUGINS---------------*/
-/*----------------------------------------------*/
 .custom-select-btn {
   @apply 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  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;
 }
diff --git a/src/ui/templates/file_manager.html b/src/ui/templates/file_manager.html
index b4de7ee85..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>
@@ -233,7 +233,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
         >
           <span class="flex justify-start items-center">
             <svg
-            class="h-6 w-6 stroke-green-700 dark:brightness-125"
+            class="h-5.5 w-5.5 stroke-green-700 dark:brightness-125"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
@@ -271,10 +271,10 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
           class="duration-300 border-gray-300 hover:brightness-90 bg-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 w-full border-b border-l border-r hover:bg-gray-100"
         >
           <span class="flex justify-start items-center">
-            <svg  class="h-6 w-6 stroke-orange-500"
-            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
-          </svg>
+            <svg class="h-5.5 w-5.5 stroke-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+            </svg>
+            
 
             <span
               class="transition duration-300 ease-in-out text-gray-700 dark:text-gray-300 dark:opacity-80 ml-4 font-bold uppercase"
@@ -298,7 +298,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
           class="duration-300 border-gray-300 hover:brightness-90 bg-white text-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 w-full border-b border-l border-r hover:bg-gray-100"
         >
           <span class="flex justify-start items-center">
-            <svg                class="h-6 w-6 stroke-sky-500"
+            <svg  class="h-5.5 w-5.5 stroke-sky-500"
              xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
@@ -345,7 +345,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
           class="bg-white duration-300 border-gray-300 hover:brightness-90 text-white my-0 relative px-6 py-2 text-center align-middle transition-all rounded-none cursor-pointer leading-normal text-sm ease-in tracking-tight-rem dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 w-full border-b border-l border-r hover:bg-gray-100"
         >
           <span class="flex justify-start items-center">
-            <svg class="h-6 w-6 stroke-red-500"
+            <svg class="h-5.5 w-5.5 stroke-red-500"
           xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
           </svg>
@@ -432,14 +432,14 @@ data-{{current_endpoint}}-modal
         <button
         data-{{current_endpoint}}-modal-close
           type="button"
-          class="dark:brightness-90 mr-3 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+          class="close-btn text-xs mr-2"
         >
           Close
         </button>
         <button
         data-{{current_endpoint}}-modal-submit
           type="submit"
-          class="dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+          class="valid-btn text-xs"
         >
           Save
         </button>
diff --git a/src/ui/templates/global_config.html b/src/ui/templates/global_config.html
index 535370db5..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">
   
@@ -42,7 +42,7 @@
       <div class="flex w-full justify-center mt-8 mb-2">
         <button
           type="submit"
-          class="tracking-wide dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+          class="valid-btn"
         >
           SAVE
         </button>
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 36e49a97b..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>
@@ -70,7 +70,7 @@ instances_batched %}
         type="submit"
         name="operation"
         value="restart"
-        class="dark:brightness-90 z-20 mx-1 bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+        class="edit-btn mx-1 text-xs"
       >
         Restart
       </button>
@@ -78,7 +78,7 @@ instances_batched %}
         type="submit"
         name="operation"
         value="stop"
-        class="dark:brightness-90 z-20 mx-1 bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+        class="delete-btn mx-1 text-xs"
       >
         Stop
       </button>
@@ -88,7 +88,7 @@ instances_batched %}
         type="submit"
         name="operation"
         value="reload"
-        class="dark:brightness-90 z-20 mx-1 bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+        class="edit-btn mx-1 text-xs"
       >
         Reload
       </button>
@@ -96,7 +96,7 @@ instances_batched %}
         type="submit"
         name="operation"
         value="stop"
-        class="dark:brightness-90 z-20 mx-1 bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+        class="delete-btn mx-1 text-xs"
       >
         Stop
       </button>
@@ -107,7 +107,7 @@ instances_batched %}
         type="submit"
         name="operation"
         value="start"
-        class="dark:brightness-90 z-20 mx-1 bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+        class="valid-btn mx-1 text-xs"
       >
         Start
       </button>
diff --git a/src/ui/templates/jobs.html b/src/ui/templates/jobs.html
index 54aa59850..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-->
@@ -360,14 +360,21 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
             >
               <span class="flex justify-start items-center">
                 <svg
-                  class="h-6 w-6 fill-sky-500"
+                  class="h-5.5 w-5.5 stroke-sky-500"
                   xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 512 512"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-6 h-6"
                 >
                   <path
-                    d="M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512s256-114.6 256-256S397.4 0 256 0zM244.7 395.3l-112-112c-4.6-4.6-5.9-11.5-3.5-17.4s8.3-9.9 14.8-9.9l64 0 0-96c0-17.7 14.3-32 32-32l32 0c17.7 0 32 14.3 32 32l0 96 64 0c6.5 0 12.3 3.9 14.8 9.9s1.1 12.9-3.5 17.4l-112 112c-6.2 6.2-16.4 6.2-22.6 0z"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                   />
                 </svg>
+
                 <span
                   class="transition duration-300 ease-in-out text-gray-700 dark:text-gray-300 dark:opacity-80 ml-2"
                   >{{file['file_name']}}</span
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 d915054a0..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>
 
     
 
@@ -343,7 +343,7 @@
       type="button"
       data-services-name="{{service["SERVER_NAME"]['value']}}"
 
-        class="dark:brightness-90 z-20 mx-1 bg-blue-500 hover:bg-blue-500/80 focus:bg-yellow-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25  active:opacity-85 hover:shadow-md"
+        class="dark:brightness-90 z-20 mx-1 bg-yellow-500 hover:bg-yellow-500/80 focus:bg-yellow-500/80 inline-block p-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal text-xs ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25  active:opacity-85 hover:shadow-md"
       >
       <svg  class="h-6 w-6 fill-white"
       xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/src/ui/templates/services_modal.html b/src/ui/templates/services_modal.html
index 53e564da8..c4222bac5 100644
--- a/src/ui/templates/services_modal.html
+++ b/src/ui/templates/services_modal.html
@@ -71,15 +71,11 @@
         <button
           data-services-modal-close
           type="button"
-          class="dark:brightness-90 mb-4 mr-3 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+          class="close-btn mb-4 mr-3 text-base"
         >
           Close
         </button>
-        <button
-          data-services-modal-submit
-          type="submit"
-          class="dark:brightness-90 mb-4 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
-        >
+        <button data-services-modal-submit type="submit" class="mb-4 valid-btn">
           Save
         </button>
       </div>
@@ -108,14 +104,11 @@
         <button
           data-services-modal-close
           type="button"
-          class="dark:brightness-90 mr-3 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-sky-500 hover:bg-sky-500/80 focus:bg-sky-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+          class="close-btn mb-4 mr-3 text-base"
         >
           Close
         </button>
-        <button
-          type="submit"
-          class="dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-red-500 hover:bg-red-500/80 focus:bg-red-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
-        >
+        <button type="submit" class="delete-btn mb-4 mr-3 text-base">
           Delete
         </button>
       </div>
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>