diff --git a/launcher/public/output.css b/launcher/public/output.css
index 6bba3c77a..c572ee888 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -791,6 +791,10 @@ video {
   right: -1.25rem;
 }
 
+.-top-1{
+  top: -0.25rem;
+}
+
 .-top-11{
   top: -2.75rem;
 }
@@ -887,10 +891,6 @@ video {
   left: 1.3rem;
 }
 
-.left-\[100px\]{
-  left: 100px;
-}
-
 .left-\[17rem\]{
   left: 17rem;
 }
@@ -903,6 +903,10 @@ video {
   left: 40%;
 }
 
+.left-\[45px\]{
+  left: 45px;
+}
+
 .left-\[920px\]{
   left: 920px;
 }
@@ -935,10 +939,6 @@ video {
   right: 1.25rem;
 }
 
-.right-8{
-  right: 2rem;
-}
-
 .right-\[10\.5rem\]{
   right: 10.5rem;
 }
@@ -983,10 +983,6 @@ video {
   top: 2rem;
 }
 
-.top-9{
-  top: 2.25rem;
-}
-
 .top-\[-18px\]{
   top: -18px;
 }
@@ -995,14 +991,6 @@ video {
   top: 7rem;
 }
 
-.-top-1{
-  top: -0.25rem;
-}
-
-.left-\[45px\]{
-  left: 45px;
-}
-
 .z-0{
   z-index: 0;
 }
@@ -1295,10 +1283,6 @@ video {
   grid-row-start: 12;
 }
 
-.row-start-14{
-  grid-row-start: 14;
-}
-
 .row-start-2{
   grid-row-start: 2;
 }
@@ -1327,10 +1311,6 @@ video {
   grid-row-start: 8;
 }
 
-.row-start-9{
-  grid-row-start: 9;
-}
-
 .row-end-10{
   grid-row-end: 10;
 }
@@ -1347,10 +1327,6 @@ video {
   grid-row-end: 13;
 }
 
-.row-end-14{
-  grid-row-end: 14;
-}
-
 .row-end-2{
   grid-row-end: 2;
 }
@@ -1379,10 +1355,6 @@ video {
   grid-row-end: 8;
 }
 
-.row-end-9{
-  grid-row-end: 9;
-}
-
 .float-right{
   float: right;
 }
@@ -1435,10 +1407,6 @@ video {
   margin-bottom: 0.5rem;
 }
 
-.mb-3{
-  margin-bottom: 0.75rem;
-}
-
 .mb-\[1px\]{
   margin-bottom: 1px;
 }
@@ -1507,10 +1475,6 @@ video {
   margin-top: 2.5rem;
 }
 
-.mt-12{
-  margin-top: 3rem;
-}
-
 .mt-2{
   margin-top: 0.5rem;
 }
@@ -1676,10 +1640,6 @@ video {
   height: 110px;
 }
 
-.h-\[120px\]{
-  height: 120px;
-}
-
 .h-\[150px\]{
   height: 150px;
 }
@@ -1720,10 +1680,6 @@ video {
   height: 25px;
 }
 
-.h-\[27px\]{
-  height: 27px;
-}
-
 .h-\[280px\]{
   height: 280px;
 }
@@ -1938,10 +1894,6 @@ video {
   max-height: 503px;
 }
 
-.max-h-\[60px\]{
-  max-height: 60px;
-}
-
 .max-h-\[78px\]{
   max-height: 78px;
 }
@@ -1954,10 +1906,6 @@ video {
   min-height: 2.75rem;
 }
 
-.min-h-20{
-  min-height: 5rem;
-}
-
 .min-h-7{
   min-height: 1.75rem;
 }
@@ -2090,18 +2038,6 @@ video {
   width: 66.666667%;
 }
 
-.w-40{
-  width: 10rem;
-}
-
-.w-44{
-  width: 11rem;
-}
-
-.w-48{
-  width: 12rem;
-}
-
 .w-5{
   width: 1.25rem;
 }
@@ -2158,10 +2094,6 @@ video {
   width: 120px;
 }
 
-.w-\[130px\]{
-  width: 130px;
-}
-
 .w-\[150px\]{
   width: 150px;
 }
@@ -2206,10 +2138,6 @@ video {
   width: 25px;
 }
 
-.w-\[27px\]{
-  width: 27px;
-}
-
 .w-\[30\%\]{
   width: 30%;
 }
@@ -2258,14 +2186,14 @@ video {
   width: 74px;
 }
 
-.w-\[807px\]{
-  width: 807px;
-}
-
 .w-\[8rem\]{
   width: 8rem;
 }
 
+.w-\[925px\]{
+  width: 925px;
+}
+
 .w-fit{
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -2280,10 +2208,6 @@ video {
   width: 100vw;
 }
 
-.w-\[925px\]{
-  width: 925px;
-}
-
 .min-w-\[100px\]{
   min-width: 100px;
 }
@@ -2300,10 +2224,6 @@ video {
   min-width: 50px;
 }
 
-.max-w-10{
-  max-width: 2.5rem;
-}
-
 .max-w-\[180px\]{
   max-width: 180px;
 }
@@ -2355,36 +2275,18 @@ video {
           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-1\/2{
-  --tw-translate-y: -50%;
-  -webkit-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: 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-8{
   --tw-translate-x: 2rem;
   -webkit-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: 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;
-  -webkit-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: 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-90{
   --tw-rotate: -90deg;
   -webkit-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: 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-0{
-  --tw-rotate: 0deg;
-  -webkit-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: 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;
   -webkit-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));
@@ -2432,18 +2334,6 @@ video {
           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-0{
-  --tw-scale-y: 0;
-  -webkit-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: 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-100{
-  --tw-scale-y: 1;
-  -webkit-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: 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{
   -webkit-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: 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));
@@ -2548,10 +2438,6 @@ video {
   grid-auto-flow: row;
 }
 
-.auto-rows-fr{
-  grid-auto-rows: minmax(0, 1fr);
-}
-
 .auto-rows-max{
   grid-auto-rows: -webkit-max-content;
   grid-auto-rows: max-content;
@@ -2729,6 +2615,10 @@ video {
   gap: 0.5rem;
 }
 
+.gap-3{
+  gap: 0.75rem;
+}
+
 .gap-4{
   gap: 1rem;
 }
@@ -2737,10 +2627,6 @@ video {
   gap: 1.25rem;
 }
 
-.gap-3{
-  gap: 0.75rem;
-}
-
 .gap-x-1{
   -webkit-column-gap: 0.25rem;
      -moz-column-gap: 0.25rem;
@@ -2972,18 +2858,10 @@ video {
   border-radius: 35px;
 }
 
-.rounded-\[4px\]{
-  border-radius: 4px;
-}
-
 .rounded-\[55px\]{
   border-radius: 55px;
 }
 
-.rounded-\[5px\]{
-  border-radius: 5px;
-}
-
 .rounded-\[75px\]{
   border-radius: 75px;
 }
@@ -3043,11 +2921,6 @@ video {
   border-bottom-right-radius: 0.375rem;
 }
 
-.rounded-t-\[0\.28rem\]{
-  border-top-left-radius: 0.28rem;
-  border-top-right-radius: 0.28rem;
-}
-
 .rounded-t-\[5px\]{
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
@@ -3247,11 +3120,6 @@ video {
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
-.border-gray-800{
-  --tw-border-opacity: 1;
-  border-color: rgb(31 41 55 / var(--tw-border-opacity));
-}
-
 .border-gray-950{
   --tw-border-opacity: 1;
   border-color: rgb(3 7 18 / var(--tw-border-opacity));
@@ -3524,11 +3392,6 @@ video {
   background-color: rgb(29 31 32 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#1d1f21\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 31 33 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#1f2123\]{
   --tw-bg-opacity: 1;
   background-color: rgb(31 33 35 / var(--tw-bg-opacity));
@@ -3574,16 +3437,6 @@ video {
   background-color: rgb(34 65 65 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#232428\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(35 36 40 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#232528\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(35 37 40 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#23272c\]{
   --tw-bg-opacity: 1;
   background-color: rgb(35 39 44 / var(--tw-bg-opacity));
@@ -3624,11 +3477,6 @@ video {
   background-color: rgb(40 42 44 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#292e32\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(41 46 50 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#2a2e30\]{
   --tw-bg-opacity: 1;
   background-color: rgb(42 46 48 / var(--tw-bg-opacity));
@@ -3679,11 +3527,6 @@ video {
   background-color: rgb(50 54 58 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#333539\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(51 53 57 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#33393E\]{
   --tw-bg-opacity: 1;
   background-color: rgb(51 57 62 / var(--tw-bg-opacity));
@@ -3714,6 +3557,11 @@ video {
   background-color: rgb(52 52 52 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#38504e\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(56 80 78 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#387272\]{
   --tw-bg-opacity: 1;
   background-color: rgb(56 114 114 / var(--tw-bg-opacity));
@@ -3749,11 +3597,6 @@ video {
   background-color: rgb(77 117 117 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#503C3C\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(80 60 60 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#505f6d\]{
   --tw-bg-opacity: 1;
   background-color: rgb(80 95 109 / var(--tw-bg-opacity));
@@ -3774,16 +3617,6 @@ video {
   background-color: rgb(96 152 121 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#D1BB9E\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 187 158 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#F7C566\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 197 102 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#a7aeb5\]{
   --tw-bg-opacity: 1;
   background-color: rgb(167 174 181 / var(--tw-bg-opacity));
@@ -3809,11 +3642,6 @@ video {
   background-color: rgb(234 236 238 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#fb923c\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
-}
-
 .bg-amber-400{
   --tw-bg-opacity: 1;
   background-color: rgb(251 191 36 / var(--tw-bg-opacity));
@@ -3839,26 +3667,11 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.bg-blue-900{
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-200{
-  --tw-bg-opacity: 1;
-  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
-}
-
 .bg-cyan-300{
   --tw-bg-opacity: 1;
   background-color: rgb(103 232 249 / var(--tw-bg-opacity));
 }
 
-.bg-cyan-500{
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 182 212 / var(--tw-bg-opacity));
-}
-
 .bg-gray-100{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -3929,11 +3742,6 @@ video {
   background-color: rgb(22 101 52 / var(--tw-bg-opacity));
 }
 
-.bg-lime-900{
-  --tw-bg-opacity: 1;
-  background-color: rgb(54 83 20 / var(--tw-bg-opacity));
-}
-
 .bg-orange-500{
   --tw-bg-opacity: 1;
   background-color: rgb(249 115 22 / var(--tw-bg-opacity));
@@ -3944,11 +3752,6 @@ video {
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
-.bg-red-300{
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
-}
-
 .bg-red-500{
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -4003,31 +3806,11 @@ video {
   background-color: transparent;
 }
 
-.bg-violet-500{
-  --tw-bg-opacity: 1;
-  background-color: rgb(139 92 246 / var(--tw-bg-opacity));
-}
-
-.bg-violet-900{
-  --tw-bg-opacity: 1;
-  background-color: rgb(76 29 149 / var(--tw-bg-opacity));
-}
-
 .bg-white{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-zinc-700{
-  --tw-bg-opacity: 1;
-  background-color: rgb(63 63 70 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#38504e\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(56 80 78 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }
@@ -4386,14 +4169,6 @@ video {
   line-height: 1rem;
 }
 
-.font-\[400\]{
-  font-weight: 400;
-}
-
-.font-\[500\]{
-  font-weight: 500;
-}
-
 .font-bold{
   font-weight: 700;
 }
@@ -4723,10 +4498,6 @@ video {
   opacity: 0.4;
 }
 
-.opacity-45{
-  opacity: 0.45;
-}
-
 .opacity-50{
   opacity: 0.5;
 }
@@ -5397,11 +5168,6 @@ html body {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.hover\:border-gray-500:hover{
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
-
 .hover\:border-gray-600:hover{
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -5527,11 +5293,6 @@ html body {
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-blue-300:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-blue-400:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
@@ -5887,22 +5648,6 @@ html body {
   }
 }
 
-@media (forced-colors: active){
-  .forced-colors\:block{
-    display: block;
-  }
-
-  .forced-colors\:hidden{
-    display: none;
-  }
-
-  .forced-colors\:appearance-auto{
-    -webkit-appearance: auto;
-       -moz-appearance: auto;
-            appearance: auto;
-  }
-}
-
 .\[\&\:checked_\+_span_svg\[data-checked-icon\]\]\:block:checked + span svg[data-checked-icon]{
   display: block;
 }
diff --git a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index 2739ab903..bce1cc9b7 100644
--- a/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
+++ b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
@@ -2,19 +2,25 @@
   <div
     class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full bg-[#1b1b1d] rounded-md grid grid-cols-12 grid-rows-12 p-2 pt-0"
   >
-    <div class="w-full h-full col-start-1 col-span-full row-start-1 row-span-1 flex justify-start items-center">
+    <div
+      class="w-full h-full col-start-1 col-span-full row-start-1 row-span-1 flex justify-start items-center"
+    >
       <span class="text-md font-semibold text-gray-300 uppercase">Login to server</span>
     </div>
     <form
       class="w-full h-full col-start-1 col-span-full row-start-3 row-span-full grid grid-cols-12 grid-rows-6 space-y-1"
       @submit.prevent="internalLogin"
     >
-      <div class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-12 grid-rows-3">
+      <div
+        class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-12 grid-rows-3"
+      >
         <label
           for="servername"
           class="col-start-1 col-span-full row-start-1 row-span-1 block text-xs font-bold"
           :class="serverNameError ? 'text-red-500' : 'text-gray-300'"
-          >{{ serverNameError ? serverNameError : `${$t("multiServer.serverName")}` }}</label
+          >{{
+            serverNameError ? serverNameError : `${$t("multiServer.serverName")}`
+          }}</label
         >
         <input
           id="servername"
@@ -65,7 +71,9 @@
           </div>
         </div>
       </div>
-      <div class="col-start-1 col-end-7 row-start-2 row-span-1 grid grid-cols-12 grid-rows-3 mr-1">
+      <div
+        class="col-start-1 col-end-7 row-start-2 row-span-1 grid grid-cols-12 grid-rows-3 mr-1"
+      >
         <label
           for="hostname"
           class="col-start-1 col-span-full row-start-1 row-span-1 block text-gray-300 text-xs font-bold mb-2"
@@ -97,7 +105,9 @@
           ></span>
         </div>
       </div>
-      <div class="col-start-7 col-span-full row-start-2 row-span-1 grid grid-cols-12 grid-rows-3">
+      <div
+        class="col-start-7 col-span-full row-start-2 row-span-1 grid grid-cols-12 grid-rows-3"
+      >
         <label
           for="port"
           class="col-start-1 col-span-full row-start-1 row-span-1 block text-gray-300 text-xs font-bold mb-2"
@@ -112,7 +122,9 @@
           class="h-8 self-center col-start-1 col-span-full row-start-2 row-span-2 shadow appearance-none border rounded w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
         />
       </div>
-      <div class="col-start-1 col-end-7 row-start-3 row-span-1 grid grid-cols-12 grid-rows-3">
+      <div
+        class="col-start-1 col-end-7 row-start-3 row-span-1 grid grid-cols-12 grid-rows-3"
+      >
         <label
           for="username"
           class="col-start-1 col-span-full row-start-1 row-span-1 block text-xs font-bold mb-2"
@@ -129,7 +141,9 @@
           @change="serverUsernameChanged = true"
         />
       </div>
-      <div class="col-start-7 col-span-full row-start-3 row-span-1 grid grid-cols-12 grid-rows-3">
+      <div
+        class="col-start-7 col-span-full row-start-3 row-span-1 grid grid-cols-12 grid-rows-3"
+      >
         <span
           class="w-full col-start-1 col-span-full row-start-1 row-span-1 text-gray-300 font-semibold text-xs ml-1 capitalize text-center"
           >{{ $t("formsetup.usessh") }}</span
@@ -179,7 +193,9 @@
             </svg>
           </span>
 
-          <span class="absolute inset-0 rounded-full bg-gray-300 transition peer-checked:bg-green-500"></span>
+          <span
+            class="absolute inset-0 rounded-full bg-gray-300 transition peer-checked:bg-green-500"
+          ></span>
         </label>
       </div>
 
@@ -206,13 +222,20 @@
           for="keypath-file"
           class="h-8 col-start-12 col-span-full row-start-2 row-span-2 self-center w-full flex justify-center items-center cursor-pointer bg-gray-200 rounded-r-md"
         >
-          <div class="w-6 h-6 border-2 border-gray-400 rounded-full flex justify-center items-center">
+          <div
+            class="w-6 h-6 border-2 border-gray-400 rounded-full flex justify-center items-center"
+          >
             <span
               class="text-xl text-teal-700 text-center font-bold hover:scale-125 active:scale-100 transition-all duration-150 ease-in-out"
               >+</span
             >
           </div>
-          <input id="keypath-file" type="file" class="hidden" @change="handleFileSelect" />
+          <input
+            id="keypath-file"
+            type="file"
+            class="hidden"
+            @change="handleFileSelect"
+          />
         </label>
       </div>
       <div
@@ -253,7 +276,9 @@
         />
       </div>
 
-      <div class="col-start-1 col-span-full row-start-6 row-span-1 flex justify-center items-center">
+      <div
+        class="col-start-1 col-span-full row-start-6 row-span-1 flex justify-center items-center"
+      >
         <button
           v-if="!serverStore.connectingProcess"
           class="w-full h-[50px] hover:bg-teal-700 text-gray-800 hover:text-white font-bold py-1 px-4 rounded-md focus:outline-none focus:shadow-outline active:scale-95 transition-all ease-in-out duration-100 shadow-lg shadow-black active:shadow-none text-md uppercase"
@@ -451,9 +476,10 @@ const validateServerName = () => {
 };
 
 const validateIP = () => {
-  const ip = serverStore.loginState.ip || ""; // Default to empty string if undefined or null
-  const ipPattern = /^[0-9]{1,3}(\.[0-9]{1,3}){3}$/;
-  ipError.value = ipPattern.test(ip.trim()) ? "" : "Server IP is required .";
+  const ipOrHostname = serverStore.loginState.ip || "";
+
+  ipError.value =
+    ipOrHostname.trim().length > 0 ? "" : "IP address or hostname is required.";
 };
 
 const validateUsername = () => {