diff --git a/src/ui/static/css/dashboard.css b/src/ui/static/css/dashboard.css
index 36bc20d92..7d4081bb1 100644
--- a/src/ui/static/css/dashboard.css
+++ b/src/ui/static/css/dashboard.css
@@ -743,26 +743,14 @@ h6 {
   left: 0px;
 }
 
-.top-3 {
-  top: 0.75rem;
+.top-20 {
+  top: 5rem;
 }
 
 .right-4 {
   right: 1rem;
 }
 
-.top-2 {
-  top: 0.5rem;
-}
-
-.right-2 {
-  right: 0.5rem;
-}
-
-.top-20 {
-  top: 5rem;
-}
-
 .-right-0 {
   right: -0px;
 }
@@ -775,6 +763,18 @@ h6 {
   top: 1rem;
 }
 
+.top-3 {
+  top: 0.75rem;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
 .top-3\.5 {
   top: 0.875rem;
 }
@@ -783,6 +783,50 @@ h6 {
   right: -22.5rem;
 }
 
+.bottom-20 {
+  bottom: 5rem;
+}
+
+.right-20 {
+  right: 5rem;
+}
+
+.top-16 {
+  top: 4rem;
+}
+
+.right-16 {
+  right: 4rem;
+}
+
+.right-19 {
+  right: 4.75rem;
+}
+
+.right-6 {
+  right: 1.5rem;
+}
+
+.right-5 {
+  right: 1.25rem;
+}
+
+.right-10 {
+  right: 2.5rem;
+}
+
+.right-14 {
+  right: 3.5rem;
+}
+
+.right-1 {
+  right: 0.25rem;
+}
+
+.right-8 {
+  right: 2rem;
+}
+
 .z-100 {
   z-index: 100;
 }
@@ -799,6 +843,18 @@ h6 {
   z-index: 110;
 }
 
+.z-990 {
+  z-index: 990;
+}
+
+.z-sticky {
+  z-index: 1020;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
 .z-20 {
   z-index: 20;
 }
@@ -811,22 +867,10 @@ h6 {
   z-index: 0;
 }
 
-.z-10 {
-  z-index: 10;
-}
-
-.z-990 {
-  z-index: 990;
-}
-
 .z-\[1000\] {
   z-index: 1000;
 }
 
-.z-sticky {
-  z-index: 1020;
-}
-
 .z-50 {
   z-index: 50;
 }
@@ -875,14 +919,14 @@ h6 {
   margin: 0px;
 }
 
-.m-4 {
-  margin: 1rem;
-}
-
 .m-2 {
   margin: 0.5rem;
 }
 
+.m-4 {
+  margin: 1rem;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -898,6 +942,16 @@ h6 {
   margin-bottom: 0px;
 }
 
+.mx-0 {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -918,11 +972,6 @@ h6 {
   margin-right: 0.125rem;
 }
 
-.mx-0 {
-  margin-left: 0px;
-  margin-right: 0px;
-}
-
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -933,11 +982,6 @@ h6 {
   margin-bottom: 1rem;
 }
 
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
 .mx-2\.5 {
   margin-left: 0.625rem;
   margin-right: 0.625rem;
@@ -998,6 +1042,30 @@ h6 {
   margin-right: 0.75rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mb-7 {
+  margin-bottom: 1.75rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1014,10 +1082,6 @@ h6 {
   margin-right: 3rem;
 }
 
-.ml-3 {
-  margin-left: 0.75rem;
-}
-
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -1030,26 +1094,10 @@ h6 {
   margin-left: 1.5rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .mb-8 {
   margin-bottom: 2rem;
 }
 
-.mb-7 {
-  margin-bottom: 1.75rem;
-}
-
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-0 {
   margin-top: 0px;
 }
@@ -1062,10 +1110,6 @@ h6 {
   margin-left: 0px;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .ml-auto {
   margin-left: auto;
 }
@@ -1158,6 +1202,14 @@ h6 {
   height: 12rem;
 }
 
+.h-px {
+  height: 1px;
+}
+
+.h-30 {
+  height: 7.5rem;
+}
+
 .h-3 {
   height: 0.75rem;
 }
@@ -1166,10 +1218,6 @@ h6 {
   height: 4.75rem;
 }
 
-.h-px {
-  height: 1px;
-}
-
 .h-sidenav {
   height: calc(100vh - 360px);
 }
@@ -1178,10 +1226,6 @@ h6 {
   height: 1.375rem;
 }
 
-.h-30 {
-  height: 7.5rem;
-}
-
 .h-\[90vh\] {
   height: 90vh;
 }
@@ -1230,6 +1274,10 @@ h6 {
   min-height: 91vh;
 }
 
+.min-h-52 {
+  min-height: 13rem;
+}
+
 .min-h-50-screen {
   min-height: 50vh;
 }
@@ -1242,10 +1290,6 @@ h6 {
   min-height: 1.5rem;
 }
 
-.min-h-52 {
-  min-height: 13rem;
-}
-
 .min-h-\[55vh\] {
   min-height: 55vh;
 }
@@ -1298,14 +1342,18 @@ h6 {
   width: 12rem;
 }
 
-.w-12 {
-  width: 3rem;
+.w-90 {
+  width: 22.5rem;
 }
 
 .w-3 {
   width: 0.75rem;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
 .w-28 {
   width: 7rem;
 }
@@ -1318,14 +1366,18 @@ h6 {
   width: 1.375rem;
 }
 
-.w-90 {
-  width: 22.5rem;
-}
-
 .w-80 {
   width: 20rem;
 }
 
+.w-11\/12 {
+  width: 91.666667%;
+}
+
+.w-10\/12 {
+  width: 83.333333%;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1350,6 +1402,10 @@ h6 {
   max-width: 10rem;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .max-w-\[400px\] {
   max-width: 400px;
 }
@@ -1362,10 +1418,6 @@ h6 {
   max-width: 16rem;
 }
 
-.max-w-full {
-  max-width: 100%;
-}
-
 .max-w-screen-sm {
   max-width: 576px;
 }
@@ -1410,6 +1462,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-x-90 {
+  --tw-translate-x: 22.5rem;
+  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-x-1 {
+  --tw-translate-x: 0.25rem;
+  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-x-0\.5 {
   --tw-translate-x: 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));
@@ -1440,11 +1502,6 @@ h6 {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-x-1 {
-  --tw-translate-x: 0.25rem;
-  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-x-full {
   --tw-translate-x: -100%;
   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));
@@ -1455,11 +1512,6 @@ h6 {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-x-90 {
-  --tw-translate-x: 22.5rem;
-  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-7 {
   --tw-translate-y: -1.75rem;
   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));
@@ -1480,11 +1532,46 @@ 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\.4 {
+  --tw-translate-y: -0.1rem;
+  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-2 {
+  --tw-translate-y: -0.5rem;
+  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-x-2 {
+  --tw-translate-x: -0.5rem;
+  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-180 {
   --tw-rotate: 180deg;
   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-6 {
+  --tw-rotate: 6deg;
+  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-6 {
+  --tw-rotate: -6deg;
+  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));
+}
+
+.-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));
+}
+
 .scale-50 {
   --tw-scale-x: .5;
   --tw-scale-y: .5;
@@ -1503,6 +1590,12 @@ 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-90 {
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  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));
 }
@@ -1575,10 +1668,6 @@ h6 {
   justify-content: space-between;
 }
 
-.justify-evenly {
-  justify-content: space-evenly;
-}
-
 .justify-items-center {
   justify-items: center;
 }
@@ -1624,6 +1713,10 @@ h6 {
   overflow-x: hidden;
 }
 
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1690,6 +1783,11 @@ h6 {
   border-top-right-radius: 0.25rem;
 }
 
+.rounded-t-2xl {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+
 .rounded-b-lg {
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -1705,11 +1803,6 @@ h6 {
   border-bottom-left-radius: 0.25rem;
 }
 
-.rounded-t-2xl {
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-}
-
 .border-2 {
   border-width: 2px;
 }
@@ -1780,6 +1873,11 @@ h6 {
   border-color: rgb(147 197 253 / var(--tw-border-opacity));
 }
 
+.border-gray-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(20 23 39 / var(--tw-border-opacity));
+}
+
 .bg-primary {
   --tw-bg-opacity: 1;
   background-color: rgb(8 85 119 / var(--tw-bg-opacity));
@@ -1859,16 +1957,16 @@ h6 {
   background-color: rgb(64 187 107 / 0.8);
 }
 
-.bg-none {
-  background-image: none;
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
 .bg-gradient-to-tl {
   background-image: linear-gradient(to top left, var(--tw-gradient-stops));
 }
 
-.bg-gradient-to-r {
-  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+.bg-none {
+  background-image: none;
 }
 
 .from-transparent {
@@ -2075,9 +2173,9 @@ h6 {
   padding-right: 0.25rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+.px-0\.5 {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
 }
 
 .px-0 {
@@ -2085,6 +2183,11 @@ h6 {
   padding-right: 0px;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -2115,11 +2218,6 @@ h6 {
   padding-bottom: 1.5rem;
 }
 
-.px-0\.5 {
-  padding-left: 0.125rem;
-  padding-right: 0.125rem;
-}
-
 .py-1\.5 {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
@@ -2152,6 +2250,14 @@ h6 {
   padding-top: 0.25rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .pl-0 {
   padding-left: 0px;
 }
@@ -2180,14 +2286,6 @@ h6 {
   padding-left: 1rem;
 }
 
-.pt-4 {
-  padding-top: 1rem;
-}
-
-.pt-3 {
-  padding-top: 0.75rem;
-}
-
 .pb-8 {
   padding-bottom: 2rem;
 }
@@ -2260,16 +2358,16 @@ h6 {
   line-height: 1rem;
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .font-normal {
   font-weight: 400;
 }
@@ -2360,6 +2458,11 @@ h6 {
   color: rgb(52 71 103 / var(--tw-text-opacity));
 }
 
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(94 114 228 / var(--tw-text-opacity));
+}
+
 .text-yellow-500 {
   --tw-text-opacity: 1;
   color: rgb(251 177 64 / var(--tw-text-opacity));
@@ -2380,11 +2483,6 @@ h6 {
   color: rgb(210 214 218 / var(--tw-text-opacity));
 }
 
-.text-blue-500 {
-  --tw-text-opacity: 1;
-  color: rgb(94 114 228 / var(--tw-text-opacity));
-}
-
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(108 117 125 / var(--tw-text-opacity));
@@ -2449,12 +2547,6 @@ h6 {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-none {
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-sm {
   --tw-shadow: 0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07);
   --tw-shadow-colored: 0 .25rem .375rem -.0625rem var(--tw-shadow-color), 0 .125rem .25rem -.0625rem var(--tw-shadow-color);
@@ -2467,6 +2559,12 @@ h6 {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-none {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2483,11 +2581,6 @@ h6 {
   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);
 }
 
-.brightness-75 {
-  --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);
-}
-
 .brightness-90 {
   --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);
@@ -2974,16 +3067,16 @@ h6 {
   background-color: rgb(52 71 103 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-primary {
-  --tw-bg-opacity: 1;
-  background-color: rgb(8 85 119 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(173 181 189 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-primary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(8 85 119 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-primary\/50 {
   background-color: rgb(8 85 119 / 0.5);
 }
@@ -3167,6 +3260,26 @@ h6 {
     right: 5rem;
   }
 
+  .sm\:bottom-3 {
+    bottom: 0.75rem;
+  }
+
+  .sm\:right-40 {
+    right: 10rem;
+  }
+
+  .sm\:right-42 {
+    right: 10.5rem;
+  }
+
+  .sm\:right-36 {
+    right: 9rem;
+  }
+
+  .sm\:right-4 {
+    right: 1rem;
+  }
+
   .sm\:col-span-6 {
     grid-column: span 6 / span 6;
   }
@@ -3233,6 +3346,12 @@ h6 {
     width: 1.75rem;
   }
 
+  .sm\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 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));
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -3258,6 +3377,11 @@ h6 {
     padding-right: 1.5rem;
   }
 
+  .sm\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
   .sm\:pt-6 {
     padding-top: 1.5rem;
   }
@@ -3386,6 +3510,10 @@ h6 {
     position: relative;
   }
 
+  .lg\:bottom-24 {
+    bottom: 6rem;
+  }
+
   .lg\:order-1 {
     order: 1;
   }
@@ -3494,18 +3622,22 @@ h6 {
 }
 
 @media (min-width: 1200px) {
-  .xl\:left-0 {
-    left: 0px;
-  }
-
   .xl\:right-4 {
     right: 1rem;
   }
 
+  .xl\:left-0 {
+    left: 0px;
+  }
+
   .xl\:top-3 {
     top: 0.75rem;
   }
 
+  .xl\:right-20 {
+    right: 5rem;
+  }
+
   .xl\:mx-4 {
     margin-left: 1rem;
     margin-right: 1rem;
diff --git a/src/ui/static/js/global.js b/src/ui/static/js/global.js
index 91ed2db61..6421826cb 100644
--- a/src/ui/static/js/global.js
+++ b/src/ui/static/js/global.js
@@ -39,6 +39,26 @@ class News {
   }
 }
 
+class Sidebar {
+  constructor(elAtt, btnOpenAtt, btnCloseAtt) {
+    this.sidebarEl = document.querySelector(elAtt);
+    this.openBtn = document.querySelector(btnOpenAtt);
+    this.closeBtn = document.querySelector(btnCloseAtt);
+    this.openBtn.addEventListener("click", this.open.bind(this));
+    this.closeBtn.addEventListener("click", this.close.bind(this));
+  }
+
+  open() {
+    this.sidebarEl.classList.add("translate-x-0");
+    this.sidebarEl.classList.remove("translate-x-90");
+  }
+
+  close() {
+    this.sidebarEl.classList.add("translate-x-90");
+    this.sidebarEl.classList.remove("translate-x-0");
+  }
+}
+
 class darkMode {
   constructor() {
     this.htmlEl = document.querySelector("html");
@@ -83,22 +103,26 @@ class darkMode {
 class FlashMsg {
   constructor() {
     this.delayBeforeRemove = 8000;
+    this.openBtn = document.querySelector("[flash-sidebar-open]");
+    this.flashCount = document.querySelector("[flash-count]");
+    this.isMsgCheck = false;
     this.init();
   }
 
-  //remove flash message after this.delay if exist
   init() {
-    window.addEventListener("DOMContentLoaded", () => {
+    //animate message button if message + never opened
+    window.addEventListener("load", (e) => {
+      if (this.flashCount.textContent > 0) this.animeBtn();
+    });
+    //stop animate if clicked once
+    this.openBtn.addEventListener("click", (e) => {
       try {
-        const flashEl = document.querySelector("[flash-message]");
-        setTimeout(() => {
-          try {
-            flashEl.remove();
-          } catch (err) {}
-        }, this.delayBeforeRemove);
+        if (e.target.closest("button").hasAttribute("flash-sidebar-open")) {
+          this.isMsgCheck = true;
+        }
       } catch (err) {}
     });
-
+    //remove message after click
     window.addEventListener("click", (e) => {
       try {
         if (e.target.closest("button").hasAttribute("close-flash-message")) {
@@ -109,6 +133,25 @@ class FlashMsg {
       } catch (err) {}
     });
   }
+
+  animeBtn() {
+    this.openBtn.classList.add("rotate-12");
+
+    setTimeout(() => {
+      this.openBtn.classList.remove("rotate-12");
+      this.openBtn.classList.add("-rotate-12");
+    }, 150);
+
+    setTimeout(() => {
+      this.openBtn.classList.remove("-rotate-12");
+    }, 300);
+
+    setTimeout(() => {
+      if (!this.isMsgCheck) {
+        this.animeBtn();
+      }
+    }, 1500);
+  }
 }
 
 class Loader {
@@ -151,6 +194,11 @@ class Loader {
 const setLoader = new Loader();
 const setMenu = new Menu();
 const setNews = new News();
+const setFlashSidebar = new Sidebar(
+  "[flash-sidebar]",
+  "[flash-sidebar-open]",
+  "[flash-sidebar-close]"
+);
 const setDarkM = new darkMode();
 const setCheckbox = new Checkbox("[sidebar-info]");
 const setFlash = new FlashMsg();
diff --git a/src/ui/templates/base.html b/src/ui/templates/base.html
index 131e8e7de..44ce8a5ff 100644
--- a/src/ui/templates/base.html
+++ b/src/ui/templates/base.html
@@ -21,50 +21,12 @@
       />
     </div>
 
-    {% include "menu.html" %} {% include "news.html" %}
-
+    {% include "menu.html" %} {% include "news.html" %} {% include "flashs.html"
+    %}
     <div
       class="w-full relative h-full max-h-screen transition-all duration-200 ease-in-out xl:ml-68 rounded-xl"
     >
-      {% include "header.html" %} {% with messages =
-      get_flashed_messages(with_categories=true) %} {% if messages %}
-      <!-- flash message-->
-      {% for category, message in messages %}
-      <div
-        flash-message
-        class="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-[300px] 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"
-      >
-        <button
-          close-flash-message
-          role="close alert message"
-          type="button"
-          class="absolute right-7 top-1.5"
-        >
-          <svg
-            class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-5 w-5"
-            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>
-        {% if category == 'error' %}
-        <h5 class="text-lg mb-0 text-red-500">Error</h5>
-        <p class="text-gray-700 dark:text-gray-300 mb-0 text-sm">
-          {{ message|safe }}
-        </p>
-        {% else %}
-        <h5 class="text-lg mb-0 text-green-500">Success</h5>
-        <p class="text-gray-700 dark:text-gray-300 mb-0 text-sm">
-          {{ message|safe }}
-        </p>
-        {% endif %}
-      </div>
-      {% endfor %}
-      <!-- end flash message-->
-      {% endif %} {% endwith %}
+      {% include "header.html" %}
     </div>
 
     <!-- info -->
diff --git a/src/ui/templates/flashs.html b/src/ui/templates/flashs.html
new file mode 100644
index 000000000..4f54c9f91
--- /dev/null
+++ b/src/ui/templates/flashs.html
@@ -0,0 +1,108 @@
+<!-- float button-->
+{% with messages = get_flashed_messages(with_categories=true) %}
+<button
+  type="button"
+  flash-sidebar-open
+  class="transition scale-90 sm:scale-100 dark:bg-gray-500 dark:brightness-110 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-2 sm:top-3 right-19 sm:right-20 xl:right-20 z-990 rounded-circle text-slate-700"
+>
+  <svg
+    class="fill-yellow-500 -translate-y-0.4 h-6 w-6"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 448 512"
+  >
+    <path
+      d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"
+    />
+  </svg>
+  <div
+    class="px-2 translate-x-1 bottom-0 right-0 absolute rounded-full dark:bg-gray-500 bg-white"
+  >
+    <p flash-count class="mb-0 text-sm text-bold text-red-500">
+      {%if messages %} {{messages.length}}{%else%}0 {%endif%}
+    </p>
+  </div>
+</button>
+<!-- end float button-->
+
+<!-- right sidebar -->
+<aside
+  flash-sidebar
+  class="translate-x-90 -right-0 transition z-sticky dark:bg-slate-850 dark:brightness-110 shadow-3xl max-w-full w-90 ease fixed top-0 left-auto flex h-full min-w-0 flex-col break-words rounded-none border-0 bg-white bg-clip-border px-0.5"
+>
+  <!-- close btn-->
+  <svg
+    flash-sidebar-close
+    class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-8 w-8 top-4 right-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"
+    />
+  </svg>
+  <!-- close btn-->
+
+  <!-- header -->
+  <div class="px-6 pt-4 pb-0 mb-0 border-b-0 rounded-t-2xl">
+    <div class="float-left">
+      <h5 class="mt-4 mb-1 dark:text-white font-bold">MESSAGES</h5>
+      <p class="dark:text-white dark:opacity-80 mb-0">Feedback actions</p>
+    </div>
+    <!-- close button -->
+    <div class="float-right mt-6">
+      <button
+        flash-sidebar-close
+        class="inline-block p-0 mb-4 text-sm font-bold leading-normal text-center uppercase align-middle transition-all ease-in bg-transparent border-0 rounded-lg shadow-none cursor-pointer hover:-translate-y-px tracking-tight-rem bg-150 bg-x-25 active:opacity-85 dark:text-white text-slate-700"
+      >
+        <i class="fa fa-close"></i>
+      </button>
+    </div>
+    <!-- end close button -->
+  </div>
+  <!-- end header -->
+
+  <!-- messages-->
+  <div
+    class="flex flex-col justify-start items-center h-full m-2 overflow-y-auto"
+  >
+    {% if messages %}
+    <!-- flash message-->
+    {% for category, message in messages %}
+    <div
+      flash-message
+      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' %}
+        <h5 class="text-lg mb-0 text-white">Error</h5>
+        {%else%}
+        <h5 class="text-lg mb-0 text-white">Success</h5>
+        {%endif%}
+        <button
+          close-flash-message
+          role="close alert message"
+          type="button"
+          class="absolute right-8 top-2"
+        >
+          <svg
+            class="cursor-pointer fill-white dark:opacity-80 absolute h-5 w-5"
+            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>
+      <p class="text-white mt-2 mb-0 text-sm">{{ message|safe }}</p>
+    </div>
+    {% endfor %}
+    <!-- end flash message-->
+    {% endif %} {% endwith %}
+  </div>
+  <!-- end message-->
+
+  <!-- end messages -->
+</aside>
+<!-- end right sidebar -->
diff --git a/src/ui/templates/footer.html b/src/ui/templates/footer.html
index 0b2253bb1..23a85a58c 100644
--- a/src/ui/templates/footer.html
+++ b/src/ui/templates/footer.html
@@ -17,12 +17,12 @@
         </div>
       </div>
       <ul
-        class="order-1 lg:order-2 flex justify-center pl-0 mb-0 list-none lg:justify-end"
+        class="order-1 lg:order-2 flex flex-wrap flex-col sm:flex-row items-center justify-center pl-0 mb-0 list-none lg:justify-end"
       >
         <li class="nav-item">
           <a
             href="https://www.bunkerweb.io"
-            class="block px-4 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
+            class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
             target="_blank"
             >Bunkerweb</a
           >
@@ -30,7 +30,7 @@
         <li class="nav-item">
           <a
             href="https://docs.bunkerweb.io"
-            class="block px-4 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
+            class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
             target="_blank"
             >Docs</a
           >
@@ -38,7 +38,7 @@
         <li class="nav-item">
           <a
             href="https://www.bunkerweb.io/privacy-policy"
-            class="block px-4 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
+            class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
             target="_blank"
             >Privacy</a
           >
@@ -46,7 +46,7 @@
         <li class="nav-item">
           <a
             href="https://www.bunkerity.com/fr/blog/"
-            class="block px-4 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
+            class="block sm:px-4 py-1 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
             target="_blank"
             >Blog</a
           >
@@ -54,7 +54,7 @@
         <li class="nav-item">
           <a
             href="https://github.com/bunkerity/bunkerweb/blob/master/LICENSE"
-            class="block px-4 pr-0 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
+            class="block sm:px-4 py-1 pr-0 text-sm tracking-wide font-normal transition duration-300 ease-in-out text-white dark:text-white"
             target="_blank"
             >License</a
           >
diff --git a/src/ui/templates/head.html b/src/ui/templates/head.html
index d9746bc46..0deaf2639 100644
--- a/src/ui/templates/head.html
+++ b/src/ui/templates/head.html
@@ -5,7 +5,10 @@
   <base href="{{ config["ABSOLUTE_URI"] }}">
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1,  maximum-scale=1, minimum-scale=1"
+  />
   <meta name="description" content="bunkerweb user interface" />
   <meta name="author" content="bunkerity" />
   <title>BunkerWeb UI</title>
diff --git a/src/ui/templates/menu.html b/src/ui/templates/menu.html
index 273895065..f1b904023 100644
--- a/src/ui/templates/menu.html
+++ b/src/ui/templates/menu.html
@@ -5,7 +5,7 @@
 <button
   type="button"
   sidebar-menu-toggle
-  class="dark:bg-gray-500 dark:brightness-110 hover:brightness-75 xl:hidden fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-3 right-4 z-990 rounded-circle text-slate-700"
+  class="scale-90 sm:scale-100 dark:bg-gray-500 dark:brightness-110 hover:brightness-75 xl:hidden fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-2 sm:top-3 right-5 sm:right-4 z-990 rounded-circle text-slate-700"
 >
   <svg
     fill="#0D6EFD"
diff --git a/src/ui/templates/news.html b/src/ui/templates/news.html
index 240abe4a3..ef50a4e1e 100644
--- a/src/ui/templates/news.html
+++ b/src/ui/templates/news.html
@@ -2,11 +2,10 @@
 <button
   type="button"
   sidebar-info-open
-  class="dark:bg-gray-500 dark:brightness-110 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-20 sm:top-3 right-4 sm:right-20 xl:right-4 z-990 rounded-circle text-slate-700"
+  class="scale-90 sm:scale-100 dark:bg-gray-500 dark:brightness-110 hover:brightness-75 fixed p-3 text-xl bg-white shadow-sm cursor-pointer top-16 sm:top-3 right-5 sm:right-4 sm:right-20 xl:right-4 z-990 rounded-circle text-slate-700"
 >
   <svg
-    fill="#0D6EFD"
-    class="h-6 w-6"
+    class="fill-sky-500 h-6 w-6"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512"
   >