diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css
index d63e7a7ad..cc519d729 100644
--- a/src/ui/static/css/dashboard.css
+++ b/src/ui/static/css/dashboard.css
@@ -811,6 +811,14 @@ h6 {
   z-index: 50;
 }
 
+.z-\[1500\] {
+  z-index: 1500;
+}
+
+.z-\[10000\] {
+  z-index: 10000;
+}
+
 .order-2 {
   order: 2;
 }
@@ -1310,6 +1318,10 @@ h6 {
   width: 20rem;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1523,6 +1535,10 @@ h6 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -2393,6 +2409,10 @@ h6 {
   opacity: 0.6;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .shadow-md {
   --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);
@@ -2902,11 +2922,6 @@ h6 {
   border-color: rgb(58 65 111 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-slate-850 {
-  --tw-border-opacity: 1;
-  border-color: rgb(17 28 68 / var(--tw-border-opacity));
-}
-
 .dark .dark\:border-gray-700 {
   --tw-border-opacity: 1;
   border-color: rgb(73 80 87 / var(--tw-border-opacity));
@@ -3127,6 +3142,10 @@ h6 {
     grid-column: span 1 / span 1;
   }
 
+  .sm\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
   .sm\:col-start-5 {
     grid-column-start: 5;
   }
@@ -3165,6 +3184,18 @@ h6 {
     height: 1.75rem;
   }
 
+  .sm\:h-16 {
+    height: 4rem;
+  }
+
+  .sm\:h-20 {
+    height: 5rem;
+  }
+
+  .sm\:h-14 {
+    height: 3.5rem;
+  }
+
   .sm\:max-h-28 {
     max-height: 7rem;
   }
@@ -3185,6 +3216,14 @@ h6 {
     width: 1.75rem;
   }
 
+  .sm\:w-60 {
+    width: 15rem;
+  }
+
+  .sm\:w-50 {
+    width: 12.5rem;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -3283,6 +3322,14 @@ h6 {
     display: none;
   }
 
+  .md\:h-25 {
+    height: 6.25rem;
+  }
+
+  .md\:h-16 {
+    height: 4rem;
+  }
+
   .md\:max-h-160 {
     max-height: 40rem;
   }
@@ -3295,6 +3342,14 @@ h6 {
     width: 50%;
   }
 
+  .md\:w-80 {
+    width: 20rem;
+  }
+
+  .md\:w-60 {
+    width: 15rem;
+  }
+
   .md\:justify-end {
     justify-content: flex-end;
   }
@@ -3391,6 +3446,14 @@ h6 {
     height: 7.5rem;
   }
 
+  .lg\:h-20 {
+    height: 5rem;
+  }
+
+  .lg\:h-24 {
+    height: 6rem;
+  }
+
   .lg\:w-9 {
     width: 2.25rem;
   }
@@ -3403,6 +3466,10 @@ h6 {
     width: 50%;
   }
 
+  .lg\:w-80 {
+    width: 20rem;
+  }
+
   .lg\:flex-none {
     flex: none;
   }
@@ -3454,6 +3521,10 @@ h6 {
     top: 0.75rem;
   }
 
+  .xl\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
   .xl\:mx-4 {
     margin-left: 1rem;
     margin-right: 1rem;
@@ -3514,6 +3585,10 @@ h6 {
     grid-column: span 4 / span 4;
   }
 
+  .\32xl\:col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+
   .\32xl\:my-2 {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
diff --git a/src/ui/static/js/dashboard.js b/src/ui/static/js/dashboard.js
index 3861d6986..d05613685 100644
--- a/src/ui/static/js/dashboard.js
+++ b/src/ui/static/js/dashboard.js
@@ -1,4 +1,4 @@
-import { Checkbox } from "./utils.js";
+import { Checkbox, Loader } from "./utils.js";
 
 class Menu {
   constructor() {
@@ -97,6 +97,7 @@ class FlashMsg {
   }
 }
 
+const setLoader = new Loader();
 const setMenu = new Menu();
 const setNews = new News();
 const setDarkM = new darkMode();
diff --git a/src/ui/static/js/plugins.js b/src/ui/static/js/plugins.js
index 82a80333e..2b7dccb3f 100644
--- a/src/ui/static/js/plugins.js
+++ b/src/ui/static/js/plugins.js
@@ -403,5 +403,5 @@ class Upload {
 }
 
 const setDropdown = new Dropdown("plugins");
-const setFilter = new Plugins("plugins");
+const setFilter = new Filter("plugins");
 const setUpload = new Upload();
diff --git a/src/ui/static/js/utils.js b/src/ui/static/js/utils.js
index d395ec80f..f71b067b9 100644
--- a/src/ui/static/js/utils.js
+++ b/src/ui/static/js/utils.js
@@ -911,6 +911,44 @@ class FormatValue {
     });
   }
 }
+
+class Loader {
+  constructor() {
+    this.menuContainer = document.querySelector("[menu-container]");
+    this.logoContainer = document.querySelector("[loader]");
+    this.logoEl = document.querySelector("[loader-img]");
+    this.isLoading = true;
+    this.init();
+  }
+
+  init() {
+    this.loading();
+    window.addEventListener("load", (e) => {
+      setTimeout(() => {
+        this.logoContainer.classList.add("opacity-0");
+      }, 350);
+
+      setTimeout(() => {
+        this.isLoading = false;
+        this.logoContainer.classList.add("hidden");
+      }, 650);
+
+      setTimeout(() => {
+        this.logoContainer.remove();
+      }, 800);
+    });
+  }
+
+  loading() {
+    if ((this.isLoading = true)) {
+      setTimeout(() => {
+        this.logoEl.classList.toggle("scale-105");
+        this.loading();
+      }, 300);
+    }
+  }
+}
+
 export {
   Checkbox,
   Popover,
@@ -921,4 +959,5 @@ export {
   FolderEditor,
   FolderDropdown,
   FormatValue,
+  Loader,
 };
diff --git a/src/ui/templates/base.html b/src/ui/templates/base.html
index d88aa8ee9..6d5c840a6 100644
--- a/src/ui/templates/base.html
+++ b/src/ui/templates/base.html
@@ -9,10 +9,17 @@
     <noscript class="relative w-full p-4 text-white bg-yellow-500 rounded-lg"
       >Your browser does not support JavaScript!</noscript
     >
-
-    <!--fixed background-->
-    <div class="absolute w-full dark:hidden bg-primary"></div>
-    <!-- end fixed background-->
+    <div
+      loader
+      class="fixed z-[10000] transition duration-300 h-screen w-screen bg-primary flex justify-center align-middle items-center"
+    >
+      <img
+        loader-img
+        src="images/logo-menu-2.png"
+        class="duration-300 w-40 h-12 sm:w-50 sm:h-14 md:w-60 md:h-16 lg:w-80 lg:h-24 inline transition-all"
+        alt="main logo"
+      />
+    </div>
 
     {% include "menu.html" %} {% include "news.html" %}
 
diff --git a/src/ui/templates/jobs.html b/src/ui/templates/jobs.html
index cccb49e8c..4e244bf5a 100644
--- a/src/ui/templates/jobs.html
+++ b/src/ui/templates/jobs.html
@@ -47,7 +47,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip() %}
 <!-- filter -->
 <div
   {{current_endpoint}}-filter
-  class="col-span-12 md:col-span-8 3xl: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"
+  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>
   <div class="grid grid-cols-12 gap-x-4 gap-y-2">
diff --git a/src/ui/templates/loading.html b/src/ui/templates/loading.html
index 4e88733ef..c325ec8d6 100644
--- a/src/ui/templates/loading.html
+++ b/src/ui/templates/loading.html
@@ -9,19 +9,15 @@
       href="data:image/svg+xml, %%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='96.000000pt' height='96.000000pt' viewBox='0 0 96.000000 96.000000' preserveAspectRatio='xMidYMid meet'%%3E%%3Cg transform='translate(0.000000,96.000000) scale(0.100000,-0.100000)'%%0Afill='%%23085577' stroke='none'%%3E%%3Cpath d='M535 863 c-22 -2 -139 -17 -260 -34 -228 -31 -267 -43 -272 -85 -2%%0A-10 23 -181 55 -379 l57 -360 400 0 400 0 20 40 c16 31 20 59 19 125 -1 100%%0A-24 165 -73 199 -41 29 -46 57 -22 111 30 67 29 188 -3 256 -13 28 -37 60 -53%%0A72 -55 39 -169 62 -268 55z m-15 -348 c30 -16 60 -61 60 -90 0 -10 -8 -33 -17%%0A-52 -16 -34 -16 -41 0 -116 9 -44 15 -82 12 -85 -6 -7 -92 -21 -131 -21 l-31%%0A-1 -6 85 c-4 75 -8 89 -31 112 -20 20 -26 36 -26 70 0 38 5 50 34 79 39 39 86%%0A45 136 19z'/%%3E%%3C/g%%3E%%3C/svg%%3E"
       type="image/svg+xml"
     />
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="http://127.0.0.1:5501/static/css/dashboard.css"
-    />
+    <link rel="stylesheet" type="text/css" href="./css/dashboard.css" />
   </head>
   <body>
     <div
-      class="h-screen w-screen bg-primary flex justify-center align-middle items-center"
+      class="fixed h-screen w-screen bg-primary flex justify-center align-middle items-center"
     >
       <img
         src="images/logo-menu-2.png"
-        class="duration-300 w-60 h-16 sm:w-80 sm:h-24 lg:w-90 lg:h-30 inline transition-all"
+        class="duration-300 w-40 h-12 sm:w-50 sm:h-14 md:w-60 md:h-16 lg:w-80 lg:h-24 inline transition-all"
         alt="main logo"
       />
     </div>
@@ -36,7 +32,7 @@
 
     async function check_reloading() {
       const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), 3000);
+      const timeoutId = setTimeout(() => controller.abort(), 500);
       const response = await fetch(
         `${location.href.replace("/loading", "/check_reloading")}`,
         { signal: controller.signal }
diff --git a/src/ui/templates/logs.html b/src/ui/templates/logs.html
index 5114fbdc9..062297fd1 100644
--- a/src/ui/templates/logs.html
+++ b/src/ui/templates/logs.html
@@ -10,7 +10,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
   <div class="grid grid-cols-12 gap-x-4 gap-y-2">
     <!-- select instance -->
     <div
-      class="flex flex-col relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3"
+      class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
     >
       <h5
         class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
@@ -63,7 +63,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
     <!-- end select instance  -->
     <!-- from date input -->
     <div
-      class="flex flex-col relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3"
+      class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
     >
       <h5
         class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
@@ -74,7 +74,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
         type="text"
         id="from-date"
         name="from-date"
-        class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3 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-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+        class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 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-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
         placeholder="dd/mm/yyyy or yyyy/mm/dd"
         pattern="(.*?)"
         required
@@ -83,7 +83,7 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
     <!-- end from date input -->
     <!-- to date input -->
     <div
-      class="flex flex-col relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3"
+      class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
     >
       <h5
         class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
@@ -94,46 +94,17 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
         type="text"
         id="to-date"
         name="to-date"
-        class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3 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-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+        class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 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-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
         placeholder="dd/mm/yyyy or yyyy/mm/dd"
         pattern="(.*?)"
         required
       />
     </div>
     <!-- end to date input -->
-    <!-- refresh input -->
-    <div
-      class="flex flex-col relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3"
-    >
-      <h5
-        class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
-      >
-        Update auto
-      </h5>
-      <div checkbox-handler="live-update" class="relative mb-7 md:mb-0">
-        <input
-          id="live-update"
-          class="relative cursor-pointer dark:border-slate-600 dark:bg-slate-700 z-10 checked:z-0 w-5 h-5 ease text-base rounded-1.4 checked:bg-primary checked:border-primary dark:checked:bg-primary dark:checked:border-primary duration-250 float-left mt-1 appearance-none border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition-all disabled:bg-gray-400 disabled:border-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 disabled:text-gray-700 dark:disabled:text-gray-300"
-          type="checkbox"
-          pattern=""
-          value="no"
-        />
-        <svg
-          checkbox-handler="live-update"
-          class="cursor-pointer absolute fill-white dark:fill-gray-300 left-0 top-0 translate-x-1 translate-y-2 h-3 w-3"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-        >
-          <path
-            d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
-          ></path>
-        </svg>
-      </div>
-    </div>
-    <!-- end refresh input -->
+
     <!-- refresh delay input -->
     <div
-      class="flex flex-col relative col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3"
+      class="flex flex-col relative col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3"
     >
       <h5
         class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
@@ -144,13 +115,14 @@ url_for(request.endpoint)[1:].split("/")[-1].strip().replace('_', '-') %}
         type="number"
         id="update-delay"
         name="update-delay"
-        class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 lg:col-span-4 3xl:col-span-3 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-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+        class="disabled:bg-gray-400 dark:disabled:bg-gray-800 dark:disabled:border-gray-800 dark:disabled:text-gray-300 disabled:text-gray-700 col-span-12 sm:col-span-6 2xl:col-span-4 3xl:col-span-3 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-3 py-1 font-normal text-gray-700 transition-all placeholder:text-gray-500"
         placeholder="2"
         pattern="(.*?)"
         required
       />
     </div>
     <!-- end refresh delay input -->
+
     <div class="col-span-12 w-full justify-center flex mt-2">
       <button
         type="button"
diff --git a/src/ui/templates/plugins.html b/src/ui/templates/plugins.html
index 61025ea0d..c67b4bd33 100644
--- a/src/ui/templates/plugins.html
+++ b/src/ui/templates/plugins.html
@@ -217,7 +217,7 @@ plugins = config["CONFIG"].get_plugins() %}
     {% for plugin in plugins %} {% if plugin['page'] %}
     <div
       {{current_endpoint}}-external="{% if plugin['external'] %} external {%else%} internal {%endif%}"
-      class="py-3 min-h-12 relative col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 3xl:col-span-2 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"
+      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
         {{current_endpoint}}-content
@@ -259,11 +259,11 @@ plugins = config["CONFIG"].get_plugins() %}
 
     <div
       {{current_endpoint}}-external="{% if plugin['external'] %} external {%else%} internal {%endif%}"
-      class="py-3 min-h-12 relative col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 3xl:col-span-2 p-1 flex justify-start items-center transition rounded bg-gray-100 hover:bg-gray-300 dark:bg-slate-700 dark:hover:bg-slate-800"
+      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
         {{current_endpoint}}-content
-        class="ml-3 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-center text-sm md:text-base text-slate-700 dark:text-gray-300"
+        class="ml-3 mb-0 transition duration-300 ease-in-out dark:opacity-90 text-left text-sm md:text-base text-slate-700 dark:text-gray-300"
       >
         {{plugin['name']}}
       </p>
diff --git a/src/ui/templates/services.html b/src/ui/templates/services.html
index cef768475..8e230c9e7 100644
--- a/src/ui/templates/services.html
+++ b/src/ui/templates/services.html
@@ -37,10 +37,10 @@
 
     <!-- detail list -->
     <div
-      class="w-full grid grid-cols-2 justify-items-center sm:justify-items-start gap-2 mt-4 mb-6 ml-3 sm:ml-1"
+      class="w-full grid grid-cols-12 justify-items-center sm:justify-items-start gap-2 mt-4 mb-6 ml-3 sm:ml-1"
     >
       <!-- detail -->
-      <div class="flex items-center col-span-2 sm:col-span-1">
+      <div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
         <p
           class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
         >
@@ -75,7 +75,7 @@
       </div>
       <!-- end detail -->
       <!-- detail -->
-      <div class="flex items-center col-span-2 sm:col-span-1">
+      <div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
         <p
           class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
         >
@@ -109,7 +109,7 @@
       </div>
       <!-- end detail -->
       <!-- detail -->
-      <div class="flex items-center col-span-2 sm:col-span-1">
+      <div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
         <p
           class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
         >
@@ -143,7 +143,7 @@
       </div>
       <!-- end detail -->
       <!-- detail -->
-      <div class="flex items-center col-span-2 sm:col-span-1">
+      <div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
         <p
           class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
         >
@@ -178,7 +178,7 @@
       </div>
       <!-- end detail -->
       <!-- detail -->
-      <div class="flex items-center col-span-2 sm:col-span-1">
+      <div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
         <p
           class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
         >
@@ -212,7 +212,7 @@
       </div>
       <!-- end detail -->
       <!-- detail -->
-      <div class="flex items-center col-span-2 sm:col-span-1">
+      <div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
         <p
           class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
         >
@@ -246,7 +246,7 @@
       </div>
       <!-- end detail -->
       <!-- detail -->
-      <div class="flex items-center col-span-2 sm:col-span-1">
+      <div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
         <p
           class="transition duration-300 ease-in-out dark:opacity-90 font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500 "
         >
@@ -280,7 +280,7 @@
       </div>
       <!-- end detail -->
       <!-- detail -->
-      <div class="flex items-center col-span-2 sm:col-span-1">
+      <div class="flex items-center col-span-12 sm:col-span-6 2xl:col-span-4">
         <p
           class="font-bold mb-0 font-sans text-sm leading-normal uppercase dark:text-gray-500"
         >
diff --git a/src/ui/templates/settings_plugins.html b/src/ui/templates/settings_plugins.html
index 785406ac8..0ef425621 100644
--- a/src/ui/templates/settings_plugins.html
+++ b/src/ui/templates/settings_plugins.html
@@ -205,6 +205,7 @@
     <!-- end plugin settings -->
   </div>
   <!-- end plugin settings not multiple -->
+  
   <!-- plugin multiple -->
   {% if not plugin['multiple'] %}
   <div class="flex items-center mx-0 sm:mx-4 md:mx-6 md:my-3 my-2 2xl:mx-6 2xl:my-3  col-span-12 ">