diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css
index 0417a7e7..99a7638a 100644
--- a/src/ui/static/css/dashboard.css
+++ b/src/ui/static/css/dashboard.css
@@ -997,6 +997,11 @@ h6 {
   margin-right: 1rem;
 }
 
+.my-1\.5 {
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1125,6 +1130,10 @@ h6 {
   margin-right: 1rem;
 }
 
+.mb-1\.5 {
+  margin-bottom: 0.375rem;
+}
+
 .block {
   display: block;
 }
@@ -1489,6 +1498,16 @@ 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));
 }
 
+.translate-y-0\.5 {
+  --tw-translate-y: 0.125rem;
+  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));
+}
+
+.translate-y-0 {
+  --tw-translate-y: 0px;
+  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));
+}
+
 .rotate-12 {
   --tw-rotate: 12deg;
   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));
@@ -1528,6 +1547,16 @@ 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-y-110 {
+  --tw-scale-y: 1.1;
+  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-y-125 {
+  --tw-scale-y: 1.25;
+  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));
+}
+
 .transform {
   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));
 }
@@ -1767,6 +1796,10 @@ h6 {
   border-style: solid;
 }
 
+.\!border-solid {
+  border-style: solid !important;
+}
+
 .border-dashed {
   border-style: dashed;
 }
@@ -1862,6 +1895,10 @@ h6 {
   background-color: rgb(58 65 111 / 0.1);
 }
 
+.bg-slate-700\/50 {
+  background-color: rgb(52 71 103 / 0.5);
+}
+
 .bg-none {
   background-image: none;
 }
@@ -2714,6 +2751,11 @@ h6 {
   background-color: rgb(8 85 119 / 0.05);
 }
 
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(233 236 239 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-500\/80:hover {
   background-color: rgb(94 114 228 / 0.8);
 }
@@ -2822,6 +2864,10 @@ h6 {
   opacity: 0.85;
 }
 
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
 .disabled\:border-gray-400:disabled {
   --tw-border-opacity: 1;
   border-color: rgb(206 212 218 / var(--tw-border-opacity));
@@ -2841,6 +2887,11 @@ h6 {
   opacity: 0.75;
 }
 
+.disabled\:hover\:translate-y-0:hover:disabled {
+  --tw-translate-y: 0px;
+  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));
+}
+
 .dark .dark\:inline {
   display: inline;
 }
@@ -2901,6 +2952,10 @@ h6 {
   background-color: rgb(37 47 64 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-slate-700\/50 {
+  background-color: rgb(52 71 103 / 0.5);
+}
+
 .dark .dark\:bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -2932,6 +2987,26 @@ h6 {
   fill: #495057;
 }
 
+.dark .dark\:stroke-slate-700 {
+  stroke: #344767;
+}
+
+.dark .dark\:stroke-gray-400 {
+  stroke: #ced4da;
+}
+
+.dark .dark\:stroke-gray-700 {
+  stroke: #495057;
+}
+
+.dark .dark\:stroke-gray-500 {
+  stroke: #adb5bd;
+}
+
+.dark .dark\:stroke-gray-600 {
+  stroke: #6c757d;
+}
+
 .dark .dark\:text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -3042,6 +3117,15 @@ h6 {
   background-color: rgb(8 85 119 / 0.2);
 }
 
+.dark .dark\:hover\:bg-slate-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(52 71 103 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-slate-700\/50:hover {
+  background-color: rgb(52 71 103 / 0.5);
+}
+
 .dark .dark\:hover\:brightness-100:hover {
   --tw-brightness: brightness(1);
   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);
@@ -3428,11 +3512,6 @@ h6 {
     right: 1.5rem;
   }
 
-  .xl\:mx-4 {
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-
   .xl\:ml-68 {
     margin-left: 17rem;
   }
@@ -3472,11 +3551,6 @@ h6 {
     grid-column: span 6 / span 6;
   }
 
-  .\32xl\:my-2 {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
   .\32xl\:mx-6 {
     margin-left: 1.5rem;
     margin-right: 1.5rem;
diff --git a/src/ui/static/js/plugins.js b/src/ui/static/js/plugins.js
index 030f8f7d..8bcc415a 100644
--- a/src/ui/static/js/plugins.js
+++ b/src/ui/static/js/plugins.js
@@ -259,12 +259,12 @@ class Upload {
     //dropzone logic
     this.dropZoneElement.addEventListener("dragover", (e) => {
       e.preventDefault();
-      this.dropZoneElement.classList.add("bg-gray-100 dark:bg-gray-800");
+      this.dragInStyle();
     });
 
     ["dragleave", "dragend"].forEach((type) => {
       this.dropZoneElement.addEventListener(type, (e) => {
-        this.dropZoneElement.classList.remove("bg-gray-100 dark:bg-gray-800");
+        this.dragOutStyle();
       });
     });
 
@@ -272,15 +272,17 @@ class Upload {
       e.preventDefault();
       this.fileInput.files = e.dataTransfer.files;
       this.fileInput.dispatchEvent(new Event("change"));
-      this.dropZoneElement.classList.remove("bg-gray-100 dark:bg-gray-800");
+      this.dragOutStyle();
     });
     //when added file, set upload logic
     this.fileInput.addEventListener("change", () => {
+      this.dragOutStyle();
       const timeout = 500;
       for (let i = 0; i < this.fileInput.files.length; i++) {
         setTimeout(() => this.uploadFile(this.fileInput.files[i]), timeout * i);
       }
     });
+
     //close fail/success log
     this.container.addEventListener("click", (e) => {
       try {
@@ -292,6 +294,24 @@ class Upload {
     });
   }
 
+  dragOutStyle() {
+    this.dropZoneElement.classList.remove(
+      "border-solid",
+      "bg-gray-100",
+      "dark:bg-slate-700/50"
+    );
+    this.dropZoneElement.classList.add("border-dashed");
+  }
+
+  dragInStyle() {
+    this.dropZoneElement.classList.add(
+      "border-solid",
+      "bg-gray-100",
+      "dark:bg-slate-700/50"
+    );
+    this.dropZoneElement.classList.remove("border-dashed");
+  }
+
   uploadFile(file) {
     let name = file.name;
     if (name.length >= 12) {
@@ -304,7 +324,6 @@ class Upload {
     let fileSize;
 
     xhr.upload.addEventListener("progress", ({ loaded, total }) => {
-      let fileLoaded = Math.floor((loaded / total) * 100);
       let fileTotal = Math.floor(total / 1000);
 
       fileTotal < 1024
@@ -320,11 +339,19 @@ class Upload {
     xhr.addEventListener("readystatechange", () => {
       if (xhr.readyState === XMLHttpRequest.DONE) {
         this.progressArea.innerHTML = "";
-        let uploadedHTML =
-          xhr.status == 201
-            ? this.fileSuccess(name, fileSize)
-            : this.fileFail(name, fileSize);
-        this.uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML);
+
+        if (xhr.status == 201) {
+          this.uploadedArea.insertAdjacentHTML(
+            "afterbegin",
+            this.fileSuccess(name, fileSize)
+          );
+          this.allowReload();
+        } else {
+          this.uploadedArea.insertAdjacentHTML(
+            "afterbegin",
+            this.fileFail(name, fileSize)
+          );
+        }
       }
     });
 
@@ -334,68 +361,73 @@ class Upload {
     xhr.send(data);
   }
 
+  allowReload() {
+    const reloadBtn = document.querySelector("[plugin-reload-btn]");
+    reloadBtn.removeAttribute("disabled");
+  }
+
   fileLoad(name, fileSize) {
     const str = `<div u class="mt-2 rounded p-2 w-full bg-gray-100 dark:bg-gray-800">
-  <div class="flex items-center justify-between">
-  <svg class="fill-sky-500 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM385 215c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V392c0 13.3-10.7 24-24 24s-24-10.7-24-24V177.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 103c9.4-9.4 24.6-9.4 33.9 0L385 215z"/></svg>  
-  <span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
-    <span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
-    <svg  class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-3 w-3 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"/></svg>
-  </div>
-</div>
-</div>`;
+      <div class="flex items-center justify-between">
+      <svg class="fill-sky-500 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM385 215c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V392c0 13.3-10.7 24-24 24s-24-10.7-24-24V177.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 103c9.4-9.4 24.6-9.4 33.9 0L385 215z"/></svg>  
+      <span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
+        <span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
+        <svg  class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-3 w-3 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"/></svg>
+      </div>
+    </div>
+    </div>`;
     return str;
   }
 
   fileSuccess(name, fileSize) {
     const str = `<div upload-message class="mt-2 rounded p-2 w-full bg-gray-100 dark:bg-gray-800">
-  <div class="flex items-center justify-between">
-  <svg
-  class="fill-green-500 h-5 w-5"
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 512 512"
->
-  <path
-    d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
-  />
-</svg>          
-  <span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
-    <span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
-    <button type="button" upload-message-delete>
-    <svg  class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-4 w-4 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-<path  d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path>
-</svg>
-</button>
-  </div>
-</div>
-</div>`;
+      <div class="flex items-center justify-between">
+      <svg
+      class="fill-green-500 h-5 w-5"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <path
+        d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
+      />
+    </svg>          
+      <span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
+        <span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
+        <button type="button" upload-message-delete>
+        <svg  class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-4 w-4 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+    <path  d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path>
+    </svg>
+    </button>
+      </div>
+    </div>
+    </div>`;
     return str;
   }
 
   fileFail(name, fileSize) {
     const str = `<div upload-message class="mt-2 rounded p-2 w-full bg-gray-100 dark:bg-gray-800">
-  <div class="flex items-center justify-between">
-  <svg
-  class="fill-red-500 h-5 w-5 mr-4"
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 512 512"
->
-  <path
-    d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
-  />
-</svg>                
-  <span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
-    <span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
-    <button type="button" upload-message-delete>
+      <div class="flex items-center justify-between">
+      <svg
+      class="fill-red-500 h-5 w-5 mr-4"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <path
+        d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
+      />
+    </svg>                
+      <span class="text-sm text-slate-700 dark:text-gray-300 mr-4">${name} </span>
+        <span class="text-sm text-slate-700 dark:text-gray-300">${fileSize}</span>
+        <button type="button" upload-message-delete>
 
-    <svg  class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-4 w-4 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-<path  d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path>
-</svg>
-</button>
+        <svg  class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 h-4 w-4 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+    <path  d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"></path>
+    </svg>
+    </button>
 
-  </div>
-</div>
-</div>`;
+      </div>
+    </div>
+    </div>`;
     return str;
   }
 }
diff --git a/src/ui/templates/file-manager.html b/src/ui/templates/file-manager.html
index 78adbb9f..3550a308 100644
--- a/src/ui/templates/file-manager.html
+++ b/src/ui/templates/file-manager.html
@@ -66,7 +66,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
       >
         <button type="button">
           <svg
-            class="relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary stroke-gray-100"
+            class="relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary stroke-gray-100 dark:stroke-gray-600"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
@@ -94,7 +94,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
       >
         <button type="button">
           <svg
-              class="-translate-x-1 relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary stroke-gray-100"
+              class="-translate-x-1 relative dark:brightness-125 h-8 w-8 lg:h-9 lg:w-9 fill-primary stroke-gray-100 dark:stroke-gray-600"
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
@@ -147,7 +147,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
         <!-- service root-->
          {% if child['type'] == "folder" and current_endpoint == "configs" and loop.depth == 1 %}
          <svg
-            class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:brightness-150"
+            class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
@@ -171,23 +171,23 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
 
         <!-- services folder -->
          {% if child['type'] == "folder" and current_endpoint == "configs" and loop.depth != 1 %}
-         <svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:brightness-150" 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="M21.75 17.25v-.228a4.5 4.5 0 00-.12-1.03l-2.268-9.64a3.375 3.375 0 00-3.285-2.602H7.923a3.375 3.375 0 00-3.285 2.602l-2.268 9.64a4.5 4.5 0 00-.12 1.03v.228m19.5 0a3 3 0 01-3 3H5.25a3 3 0 01-3-3m19.5 0a3 3 0 00-3-3H5.25a3 3 0 00-3 3m16.5 0h.008v.008h-.008v-.008zm-3 0h.008v.008h-.008v-.008z" /></svg>         {% endif %}
+         <svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" 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="M21.75 17.25v-.228a4.5 4.5 0 00-.12-1.03l-2.268-9.64a3.375 3.375 0 00-3.285-2.602H7.923a3.375 3.375 0 00-3.285 2.602l-2.268 9.64a4.5 4.5 0 00-.12 1.03v.228m19.5 0a3 3 0 01-3 3H5.25a3 3 0 01-3-3m19.5 0a3 3 0 00-3-3H5.25a3 3 0 00-3 3m16.5 0h.008v.008h-.008v-.008zm-3 0h.008v.008h-.008v-.008z" /></svg>         {% endif %}
           <!-- end services folder-->
           <!-- services files -->
           {% if child['type'] == "file" and current_endpoint == "configs" and loop.depth != 1 %}
-          <svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:brightness-150" 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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
+          <svg class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" 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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
           {% endif %}
           <!-- end services files-->
         <!-- cache folder-->
         {% if child['type'] == "folder" and current_endpoint == "cache" and loop.depth == 1 %}
-        <svg  class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:brightness-150" 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">
+        <svg  class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150" 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="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
         </svg>
         {% endif %}
         <!-- end cache folder -->
         <!-- cache file -->
          {% if child['type'] == "file" and current_endpoint == "cache" %}
-         <svg             class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:brightness-150"
+         <svg             class="absolute left-3 top-5 h-10 w-10 fill-primary stroke-gray-100 dark:stroke-gray-600 dark:brightness-150"
          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="M15 13.5H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
         </svg>
diff --git a/src/ui/templates/flashs.html b/src/ui/templates/flashs.html
index 80736b2a..a25d5af8 100644
--- a/src/ui/templates/flashs.html
+++ b/src/ui/templates/flashs.html
@@ -18,7 +18,7 @@
     class="px-2 translate-x-2 bottom-0 right-0 absolute rounded-full bg-white"
   >
     <p flash-count class="mb-0 text-sm text-bold text-red-500">
-      {%if messages %} {{messages.length}}{%else%}0 {%endif%}
+      {%if messages %} {{messages|length}}{%else%} 0 {%endif%}
     </p>
   </div>
 </button>
@@ -73,7 +73,8 @@
       class="{% if category == 'error' %}bg-red-500 {%else%} bg-green-500 {%endif %} my-2 border relative p-4 w-11/12 min-h-20 rounded-lg hover:scale-102 transition shadow-md break-words dark:brightness-90"
     >
       <div class="flex justify-between align-top items-start">
-        {% if category == 'error' %}
+        {% if category == 'error' or "Please log in to access this page." in
+        message|safe %}
         <h5 class="text-lg mb-0 text-white">Error</h5>
         {%else%}
         <h5 class="text-lg mb-0 text-white">Success</h5>
@@ -95,7 +96,9 @@
           </svg>
         </button>
       </div>
-      <p class="text-white mt-2 mb-0 text-sm">{{ message|safe }}</p>
+      <p class="text-white mt-2 mb-0 text-sm">
+        {{ message|safe }} {%if "log in" in message|safe%} test {%endif%}
+      </p>
     </div>
     {% endfor %}
     <!-- end flash message-->
diff --git a/src/ui/templates/jobs.html b/src/ui/templates/jobs.html
index 4ed2c364..e13f2eb7 100644
--- a/src/ui/templates/jobs.html
+++ b/src/ui/templates/jobs.html
@@ -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-2 font-bold dark:text-white">{{current_endpoint}}</h5>
+  <h5 class="mb-4 mt-2 font-bold dark:text-white mx-2">JOBS</h5>
   <!-- list container-->
   <div class="min-w-[900px] w-full grid grid-cols-12 rounded p-2">
     <!-- header-->
@@ -232,28 +232,30 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
     <ul class="col-span-12 w-full" {{current_endpoint}}-list>
       {% for job_name, value in jobs.items() %}
       <!-- job item-->
-      <li class="grid grid-cols-12 border-b border-gray-300 py-2.5">
+      <li
+        class="items-center grid grid-cols-12 border-b border-gray-300 py-2.5"
+      >
         <p
-          class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0"
+          class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0 my-1"
           {{current_endpoint}}-name
         >
           {{job_name}}
         </p>
         <p
-          class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0"
+          class="dark:text-gray-400 dark:opacity-80 text-sm col-span-3 m-0 my-1"
           {{current_endpoint}}-last_run
         >
           {{value['last_run']}}
         </p>
         <p
-          class="dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
+          class="dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
           {{current_endpoint}}-every
         >
           {{value["every"]}}
         </p>
         {% if value["reload"] %}
         <p
-          class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
+          class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
           {{current_endpoint}}-reload="true"
         >
           <svg
@@ -269,7 +271,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
 
         {%endif %} {% if not value["reload"] %}
         <p
-          class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
+          class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
           {{current_endpoint}}-reload="false"
         >
           <svg
@@ -284,7 +286,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
         </p>
         {% endif %} {% if value["success"] %}
         <p
-          class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
+          class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
           {{current_endpoint}}-success="true"
         >
           <svg
@@ -299,7 +301,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
         </p>
         {% elif not value["success"] %}
         <p
-          class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0"
+          class="ml-6 dark:text-gray-400 dark:opacity-80 text-sm col-span-1 m-0 my-1"
           {{current_endpoint}}-success="false"
         >
           <svg
@@ -314,20 +316,20 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
         </p>
         {% endif %}
         <div
-          class="relative dark:text-gray-400 text-sm col-span-3 m-0"
+          class="relative dark:text-gray-400 text-sm col-span-3 m-0 my-1"
           {{current_endpoint}}-files
         >
           {% if value['cache']%}
           <button
             {{current_endpoint}}-setting-select="{{job_name}}"
             type="button"
-            class="text-sm 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 leading-6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+            class="py-1 text-sm 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 leading-6 ease w-full rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 md:px-3 font-normal text-gray-700 transition-all placeholder:text-gray-500"
           >
             <span
               id="{{current_endpoint}}-{{job_name}}"
               name="{{current_endpoint}}-{{job_name}}"
               {{current_endpoint}}-setting-select-text="{{job_name}}"
-              >list</span
+              >files</span
             >
             <!-- chevron -->
             <svg
@@ -345,7 +347,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
           <!-- dropdown-->
           <div
             {{current_endpoint}}-setting-select-dropdown="{{job_name}}"
-            class="hidden z-100 absolute h-full flex-col w-full"
+            class="hidden z-100 absolute h-full flex-col w-full translate-y-0.5"
           >
             {% for file in value['cache'] %}
             <button
diff --git a/src/ui/templates/logs.html b/src/ui/templates/logs.html
index ef69ed8c..04cb733a 100644
--- a/src/ui/templates/logs.html
+++ b/src/ui/templates/logs.html
@@ -289,7 +289,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-2 font-bold dark:text-white">LOGS</h5>
+  <h5 class="mb-4 mt-2 font-bold dark:text-white 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 0081895e..83fced5c 100644
--- a/src/ui/templates/plugins.html
+++ b/src/ui/templates/plugins.html
@@ -70,7 +70,7 @@ include "plugins-modal.html" %}
     <form
       id="dropzone-form"
       action="#"
-      class="cursor-pointer col-span-12 border-2 rounded-lg p-2 border-dashed border-primary dark:brightness-125 drop-zone"
+      class="hover:bg-gray-100 dark:hover:bg-slate-700/50 cursor-pointer col-span-12 border-2 rounded-lg p-2 border-dashed border-primary dark:brightness-125 drop-zone"
     >
       <input
         type="hidden"
@@ -94,21 +94,18 @@ include "plugins-modal.html" %}
     <section class="col-span-12 uploaded-area"></section>
 
     <!-- end dropzone -->
-    <div class="col-span-12 flex flex-col justify-center items-center">
-      <p
-        class="dark:text-gray-300 mx-4 my-3 font-sans font-semibold leading-normal uppercase text-sm"
-      >
-        or
-      </p>
+    <div class="col-span-12 flex flex-col justify-center items-center mt-2">
       <form
         method="post"
-        class="col-span-12 flex flex-col justify-center align-middle items-center"
+        class="col-span-12 flex flex-col justify-center align-middle items-cente"
       >
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
         <button
+          plugin-reload-btn
+          disabled
           type="submit"
-          class="tracking-wide dark:brightness-125 hover:brightness-75 w-full 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="disabled:hover:translate-y-0 disabled:cursor-not-allowed 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 tracking-wide dark:brightness-125 hover:brightness-75 w-full 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"
         >
           Reload
         </button>
@@ -214,12 +211,12 @@ 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="col-mb-2 font-bold dark:text-white">LIST</h5>
+  <h5 class="mb-4 mt-2 font-bold dark:text-white mx-2">LIST</h5>
 
   <div {{current_endpoint}}-list class="grid grid-cols-12 gap-3">
     {% for plugin in plugins %} {% if plugin['external'] %}
     <div
-      {{current_endpoint}}-external="{% if plugin['external'] %} external {%else%} internal {%endif%}"
+      {{current_endpoint}}-external="{% if plugin['external'] %} external {% else %} internal {% endif %}"
       class="py-3 min-h-12 relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 p-1 flex justify-between items-center transition rounded bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800"
     >
       <p