diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css
index c3c611c2a..fa7b858a5 100644
--- a/src/ui/static/css/dashboard.css
+++ b/src/ui/static/css/dashboard.css
@@ -807,6 +807,10 @@ h6 {
   z-index: 50;
 }
 
+.-z-10 {
+  z-index: -10;
+}
+
 .order-2 {
   order: 2;
 }
@@ -908,11 +912,6 @@ h6 {
   margin-bottom: 0.25rem;
 }
 
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -923,9 +922,9 @@ h6 {
   margin-right: 0.625rem;
 }
 
-.mx-3 {
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
 }
 
 .my-3 {
@@ -933,14 +932,19 @@ h6 {
   margin-bottom: 0.75rem;
 }
 
+.mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
 .my-5 {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
 }
 
 .mb-1 {
@@ -1023,6 +1027,10 @@ h6 {
   margin-bottom: 1rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -1047,10 +1055,6 @@ h6 {
   margin-top: 1.5rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mr-6 {
   margin-right: 1.5rem;
 }
@@ -1071,6 +1075,10 @@ h6 {
   margin-bottom: 1.25rem;
 }
 
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .box-content {
   box-sizing: content-box;
 }
@@ -1187,10 +1195,18 @@ h6 {
   max-height: 25rem;
 }
 
+.max-h-60 {
+  max-height: 15rem;
+}
+
 .max-h-16 {
   max-height: 4rem;
 }
 
+.max-h-80 {
+  max-height: 20rem;
+}
+
 .max-h-90 {
   max-height: 22.5rem;
 }
@@ -1199,12 +1215,8 @@ h6 {
   max-height: 2rem;
 }
 
-.max-h-116 {
-  max-height: 29rem;
-}
-
-.max-h-80 {
-  max-height: 20rem;
+.max-h-30 {
+  max-height: 7.5rem;
 }
 
 .min-h-20 {
@@ -1227,6 +1239,10 @@ h6 {
   min-height: 13rem;
 }
 
+.min-h-\[55vh\] {
+  min-height: 55vh;
+}
+
 .min-h-12 {
   min-height: 3rem;
 }
@@ -1239,16 +1255,8 @@ h6 {
   min-height: 85vh;
 }
 
-.min-h-\[40vh\] {
-  min-height: 40vh;
-}
-
-.min-h-\[45vh\] {
-  min-height: 45vh;
-}
-
-.min-h-\[55vh\] {
-  min-height: 55vh;
+.min-h-screen {
+  min-height: 100vh;
 }
 
 .w-full {
@@ -1335,6 +1343,10 @@ h6 {
   max-width: 10rem;
 }
 
+.max-w-120 {
+  max-width: 30rem;
+}
+
 .max-w-64 {
   max-width: 16rem;
 }
@@ -1351,6 +1363,22 @@ h6 {
   max-width: 300px;
 }
 
+.max-w-60 {
+  max-width: 15rem;
+}
+
+.max-w-\[460px\] {
+  max-width: 460px;
+}
+
+.max-w-\[40px\] {
+  max-width: 40px;
+}
+
+.max-w-\[400px\] {
+  max-width: 400px;
+}
+
 .flex-auto {
   flex: 1 1 auto;
 }
@@ -1525,10 +1553,6 @@ h6 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.flex-row {
-  flex-direction: row;
-}
-
 .flex-col {
   flex-direction: column;
 }
@@ -2003,6 +2027,10 @@ h6 {
   padding: 1.5rem;
 }
 
+.p-12 {
+  padding: 3rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2088,6 +2116,16 @@ h6 {
   padding-bottom: 1.25rem;
 }
 
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -2124,10 +2162,6 @@ h6 {
   padding-bottom: 0.5rem;
 }
 
-.pt-5 {
-  padding-top: 1.25rem;
-}
-
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -2164,6 +2198,10 @@ h6 {
   padding-left: 1.75rem;
 }
 
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -3080,10 +3118,19 @@ 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;
   }
 
+  .sm\:my-0 {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+
   .sm\:mx-6 {
     margin-left: 1.5rem;
     margin-right: 1.5rem;
@@ -3094,11 +3141,6 @@ h6 {
     margin-right: 1rem;
   }
 
-  .sm\:my-0 {
-    margin-top: 0px;
-    margin-bottom: 0px;
-  }
-
   .sm\:ml-1 {
     margin-left: 0.25rem;
   }
@@ -3107,6 +3149,10 @@ h6 {
     margin-right: 4rem;
   }
 
+  .sm\:block {
+    display: block;
+  }
+
   .sm\:hidden {
     display: none;
   }
@@ -3198,6 +3244,10 @@ h6 {
     grid-column: span 7 / span 7;
   }
 
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
   .md\:my-0 {
     margin-top: 0px;
     margin-bottom: 0px;
@@ -3249,6 +3299,11 @@ h6 {
     justify-content: flex-end;
   }
 
+  .md\:bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }
+
   .md\:py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -3276,6 +3331,10 @@ h6 {
 }
 
 @media (min-width: 992px) {
+  .lg\:relative {
+    position: relative;
+  }
+
   .lg\:order-1 {
     order: 1;
   }
@@ -3304,6 +3363,10 @@ h6 {
     grid-column: span 3 / span 3;
   }
 
+  .lg\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
   .lg\:mx-8 {
     margin-left: 2rem;
     margin-right: 2rem;
@@ -3322,6 +3385,18 @@ h6 {
     margin-bottom: 0px;
   }
 
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
   .lg\:h-9 {
     height: 2.25rem;
   }
@@ -3370,6 +3445,21 @@ h6 {
     gap: 1.5rem;
   }
 
+  .lg\:bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }
+
+  .lg\:bg-gray-100 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(235 239 244 / var(--tw-bg-opacity));
+  }
+
+  .lg\:bg-gray-50 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(248 249 250 / var(--tw-bg-opacity));
+  }
+
   .lg\:text-left {
     text-align: left;
   }
@@ -3477,3 +3567,8 @@ h6 {
     grid-column: span 2 / span 2;
   }
 }
+
+.\[\&\>\*\]\:bg-primary>* {
+  --tw-bg-opacity: 1;
+  background-color: rgb(8 85 119 / var(--tw-bg-opacity));
+}
diff --git a/src/ui/templates/login.html b/src/ui/templates/login.html
index e390a4dc9..3418d9e78 100755
--- a/src/ui/templates/login.html
+++ b/src/ui/templates/login.html
@@ -8,138 +8,126 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>BunkerWeb UI</title>
     <link href="images/favicon.ico" rel="icon" type="image/x-icon" />
-    <link href="webfonts/karla.css" rel="stylesheet" />
-    <link rel="stylesheet" href="css/bootstrap.min.css" />
-    <link rel="stylesheet" href="css/login.css" />
+    <!--     Fonts and icons     -->
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="css/dashboard.css" />
   </head>
   <body>
-    <div class="position-fixed bottom-0 end-0 p-3 pt-5 toast-container">
-      {% if error %}
-      <div
-        class="toast fade show"
-        role="alert"
-        aria-live="assertive"
-        aria-atomic="true"
-      >
-        <div class="toast-header">
-          <img
-            src="images/favicon.ico"
-            class="rounded me-2"
-            alt="BunkerWeb icon"
-            width="14"
-            height="14"
-          />
-          <strong class="me-auto">BunkerWeb</strong>
-          <small style="color: rgb(168, 0, 0)">error</small>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="toast"
-            aria-label="Close"
-          ></button>
-        </div>
-        <div class="toast-body">{{ error }}</div>
-      </div>
-      {% endif %} {% with messages = get_flashed_messages(with_categories=true)
-      %} {% if messages %} {% for category, message in messages %}
-      <div
-        class="toast fade show"
-        role="alert"
-        aria-live="assertive"
-        aria-atomic="true"
-      >
-        <div class="toast-header">
-          <img
-            src="images/favicon.ico"
-            class="rounded me-2"
-            alt="BunkerWeb icon"
-            width="14"
-            height="14"
-          />
-          <strong class="me-auto">BunkerWeb</strong>
-          <small style="color: rgb(168, 0, 0)">error</small>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="toast"
-            aria-label="Close"
-          ></button>
-        </div>
-        <div class="toast-body">{{ message|safe }}</div>
-      </div>
-      {% endfor %} {% endif %} {% endwith %}
+    {% if error %}
+    <!-- flash message-->
+    {% with messages = get_flashed_messages(with_categories=true) %} {% if
+    messages %} {% for category, message in messages %}
+    <div
+      flash-message
+      class="hidden p-4 mb-1 md:mb-3 md:mr-3 z-[1001] flex flex-col fixed bottom-0 right-0 w-full md:w-1/2 max-w-screen-sm min-h-20 bg-white rounded-lg dark:brightness-110 hover:scale-102 transition shadow-md break-words dark:bg-slate-850 dark:shadow-dark-xl bg-clip-border"
+    >
+      {% if category == 'error' %}
+      <h5 class="text-lg mb-0 text-red-500">error</h5>
+      <p class="text-red-500 mb-0 text-sm">{{ message|safe }}</p>
+      {% endif %} {% if category == 'success' %}
+      <h5 class="text-lg mb-0 text-green-500">success</h5>
+      <p class="text-green-500 mb-0 text-sm">{{ message|safe }}</p>
+      {% endif %}
     </div>
-    <main>
-      <div class="container-fluid">
-        <div class="row">
-          <div class="col-sm-6 login-section-wrapper">
-            <div class="brand-wrapper d-sm-none">
-              <img
-                src="images/BUNKERWEB-print-hd.png"
-                alt="logo"
-                class="logo"
-              />
-            </div>
-            <div class="login-wrapper my-auto">
-              <h1 class="login-title">Log in</h1>
-              <form action="login" method="POST" autocomplete="off">
-                <input
-                  type="hidden"
-                  name="csrf_token"
-                  value="{{ csrf_token() }}"
-                />
-                <input
-                  type="hidden"
-                  name="next"
-                  value="{{ request.values.get('next', '') }}"
-                />
-                <div class="form-group">
-                  <label for="username">Username</label>
-                  <input
-                    type="username"
-                    name="username"
-                    id="username"
-                    class="form-control"
-                    placeholder="Username"
-                    required=""
-                  />
-                </div>
-                <div class="form-group mb-4">
-                  <label for="password">Password</label>
-                  <input
-                    type="password"
-                    name="password"
-                    id="password"
-                    class="form-control"
-                    placeholder="enter your password"
-                    required=""
-                  />
-                </div>
-                <input
-                  name="login"
-                  id="login"
-                  class="btn btn-block login-btn"
-                  type="submit"
-                  value="Login"
-                />
-              </form>
-            </div>
-          </div>
-          <div class="col-sm-6 px-0 d-none d-sm-block">
-            <div id="particles-js" class="login-img"></div>
+    {% endfor %} {% endif %} {% endwith %} {%endif %}
+    <!-- end flash message-->
+    <!--content -->
+    <main class="grid grid-cols-2 align-middle items-center min-h-screen">
+      <!--form -->
+      <div
+        class="col-span-2 lg:col-span-1 bg-none lg:bg-gray-50 h-full flex flex-col items-center justify-center"
+      >
+        <div class="bg-gray-50 rounded px-12 py-16 w-full max-w-[400px]">
+          <div class="flex justify-center">
             <img
-              src="images/BUNKERWEB-print-hd-blanc.png"
+              class="lg:hidden max-w-60 max-h-30 mb-6"
+              src="images/BUNKERWEB-print-hd.png"
               alt="logo"
-              class="images login-logo"
+              class="logo"
             />
           </div>
+          <h1
+            class="hidden lg:block text-center font-bold dark:text-white mb-8"
+          >
+            Log in
+          </h1>
+          <form action="login" method="POST" autocomplete="off">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+            <input
+              type="hidden"
+              name="next"
+              value="{{ request.values.get('next', '') }}"
+            />
+            <!-- username inpt-->
+            <div class="flex flex-col relative col-span-12 my-3">
+              <h5
+                class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-md font-bold m-0 dark:text-gray-300"
+              >
+                Username
+              </h5>
+              <input
+                type="username"
+                id="username"
+                name="username"
+                class="col-span-12 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-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+                placeholder="enter username"
+                pattern="(.*?)"
+                required
+              />
+            </div>
+            <!-- end username inpt-->
+            <!-- password inpt-->
+            <div class="flex flex-col relative col-span-12 my-3">
+              <h5
+                class="my-1 transition duration-300 ease-in-out dark:opacity-90 text-md font-bold m-0 dark:text-gray-300"
+              >
+                Password
+              </h5>
+              <input
+                type="password"
+                id="password"
+                name="password"
+                class="col-span-12 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-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+                placeholder="enter password"
+                pattern="(.*?)"
+                required
+              />
+            </div>
+            <!-- end password inpt-->
+            <div class="flex justify-center">
+              <button
+                type="submit"
+                id="login"
+                name="login"
+                value="login"
+                class="my-4 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-primary hover:bg-primary/80 focus:bg-primary/80 leading-normal text-sm ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+              >
+                Log in
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <!-- end form -->
+      <!-- particles -->
+      <div class="-z-10 fixed lg:relative lg:col-span-1 bg-primary">
+        <div id="particles-js" class="login-img [&>*]:bg-primary"></div>
+        <div class="hidden lg:flex justify-center">
+          <img
+            class="max-w-60 max-h-30"
+            src="images/BUNKERWEB-print-hd-blanc.png"
+            alt="logo"
+            class="images login-logo"
+          />
         </div>
       </div>
     </main>
+    <!-- end particles -->
+    <!-- end content -->
     <script src="js/tsparticles.bundle.min.js"></script>
-    <script src="js/jquery.min.js"></script>
-    <script src="js/popper.min.js"></script>
-    <script src="js/bootstrap.bundle.min.js"></script>
     <script>
       tsParticles.loadJSON("particles-js", "json/particles.json");
     </script>