diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 30eb5cf6f..bafc1bb67 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -6,7 +6,7 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "Vue.volar"
+    "Vue.official"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []
diff --git a/launcher/package.json b/launcher/package.json
index c00034b88..ae161ef35 100755
--- a/launcher/package.json
+++ b/launcher/package.json
@@ -97,4 +97,4 @@
     "type": "git",
     "url": "git@github.com:stereum-dev/ethereum-node.git"
   }
-}
+}
\ No newline at end of file
diff --git a/launcher/public/img/icon/server-management-icons/write.png b/launcher/public/img/icon/server-management-icons/write.png
new file mode 100755
index 000000000..782c40dbf
Binary files /dev/null and b/launcher/public/img/icon/server-management-icons/write.png differ
diff --git a/launcher/public/output.css b/launcher/public/output.css
index a9903bab3..fb1d1f1f5 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -217,6 +217,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -240,9 +242,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -524,6 +526,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::-ms-backdrop{
@@ -574,6 +580,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop{
@@ -624,6 +634,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::-webkit-scrollbar {
@@ -965,10 +979,6 @@ video {
   top: 5rem;
 }
 
-.top-5{
-  top: 1.25rem;
-}
-
 .top-8{
   top: 2rem;
 }
@@ -981,10 +991,6 @@ video {
   top: 7rem;
 }
 
-.-z-10{
-  z-index: -10;
-}
-
 .z-0{
   z-index: 0;
 }
diff --git a/launcher/src/components/UI/server-management/MultiServerScreen.vue b/launcher/src/components/UI/server-management/MultiServerScreen.vue
index 412a69af4..bf0e4eb7d 100644
--- a/launcher/src/components/UI/server-management/MultiServerScreen.vue
+++ b/launcher/src/components/UI/server-management/MultiServerScreen.vue
@@ -4,7 +4,10 @@ import ServerHeader from './components/ServerHeader.vue';
     class="w-full h-full absolute inset-0 grid grid-cols-24 grid-rows-7 bg-[#336666] z-10 p-2 rounded-md divide-y-2 divide-gray-300"
   >
     <SwitchAnimation
-      v-if="(serverStore.isServerAnimationActive || serverStore.connectingProcess) && !serverStore.errorMsgExists"
+      v-if="
+        (serverStore.isServerAnimationActive || serverStore.connectingProcess) &&
+        !serverStore.errorMsgExists
+      "
       @cancel-login="cancelLoginHandler"
     />
     <ServerHeader @tab-picker="tabPicker" />
@@ -28,7 +31,11 @@ import ServerHeader from './components/ServerHeader.vue';
       @remove-handler="removeServerHandler"
       @close-window="closeWindow"
     />
-    <ErrorModal v-if="serverStore.errorMsgExists" :description="serverStore.error" @close-window="closeErrorDialog" />
+    <ErrorModal
+      v-if="serverStore.errorMsgExists"
+      :description="serverStore.error"
+      @close-window="closeErrorDialog"
+    />
   </div>
 </template>
 
@@ -53,7 +60,6 @@ const { login, remove, loadStoredConnections } = useServerLogin();
 const router = useRouter();
 const keyLocation = ref("");
 let loginAbortController = new AbortController();
-console.log("Server Management Screen", loginAbortController);
 const serverBodyComponentKey = ref(0);
 
 watchEffect(() => {
@@ -113,6 +119,8 @@ const loginHandler = async () => {
       serverStore.connectingProcess = true;
       serverStore.isServerAnimationActive = true;
       await ControlService.logout();
+      serverStore.loginState = {};
+      // serverStore.selectedServerToConnect
       await ControlService.stopShell();
       await login(loginAbortController.signal);
 
@@ -179,7 +187,9 @@ const serverHandler = (server) => {
     server.isSelected = true;
   }
 
-  serverStore.savedServers.savedConnections = [...serverStore.savedServers.savedConnections];
+  serverStore.savedServers.savedConnections = [
+    ...serverStore.savedServers.savedConnections,
+  ];
 };
 
 //Change password handling
@@ -211,10 +221,17 @@ const removeServerHandler = async () => {
   serverStore.isRemoveProcessing = true;
   serverStore.savedServers.savedConnections = serverStore.savedServers.savedConnections.filter(
     (item) =>
-      item.host !== serverStore.selectedServerToConnect?.host && item.name !== serverStore.selectedServerToConnect?.name
+      item.host !== serverStore.selectedServerToConnect?.host &&
+      item.name !== serverStore.selectedServerToConnect?.name
   );
 
   await remove();
+  serverStore.selectedServerToConnect = null;
+  serverStore.loginState.hostName = "";
+  serverStore.loginState.ip = "";
+  serverStore.loginState.port = "";
+  serverStore.loginState.username = "";
+  serverStore.loginState.useAuth = false;
   serverStore.isRemoveProcessing = false;
   serverStore.isRemoveModalActive = false;
   serverBodyComponentKey.value++;
@@ -229,7 +246,9 @@ const readSSHKeyFile = async () => {
 const confirmDelete = async (key) => {
   serverStore.sshKeys = serverStore.sshKeys.filter((item) => item !== key);
   try {
-    await ControlService.writeSSHKeyFile(serverStore.sshKeys.filter((item) => item !== key));
+    await ControlService.writeSSHKeyFile(
+      serverStore.sshKeys.filter((item) => item !== key)
+    );
     await readSSHKeyFile();
   } catch (err) {
     console.log(err);
diff --git a/launcher/src/components/UI/server-management/components/ServerBody.vue b/launcher/src/components/UI/server-management/components/ServerBody.vue
index 959849306..ff243513e 100644
--- a/launcher/src/components/UI/server-management/components/ServerBody.vue
+++ b/launcher/src/components/UI/server-management/components/ServerBody.vue
@@ -6,7 +6,11 @@
       class="col-start-14 col-span-full row-start-1 row-span-full p-1 grid grid-cols-12 grid-rows-12 bg-[#1b3231] rounded-md"
     >
       <LoginPanel v-if="isLoginActive" @server-login="serverLogin" />
-      <DetailsPanel v-if="isDetailsActive" @change-password="changePassword" @set-avatar="setServerAvatar" />
+      <DetailsPanel
+        v-if="isDetailsActive"
+        @change-password="changePassword"
+        @set-avatar="setServerAvatar"
+      />
       <UpdatePanel v-if="isUpdateActive" />
       <SshPanel v-if="isSSHActive" @file-upload="fileUpload" @delete-key="deleteKey" />
       <SettingsPanel v-if="isSettingsActive" />
@@ -14,7 +18,11 @@
     <div
       class="col-start-1 col-end-14 row-start-1 row-span-full p-3 grid grid-cols-12 grid-rows-12 bg-[#1b3231] rounded-md"
     >
-      <ServerPanel @select-server="selectServer" @server-login="addNewServer" @quick-login="quickLogin" />
+      <ServerPanel
+        @select-server="selectServer"
+        @server-login="addNewServer"
+        @quick-login="quickLogin"
+      />
     </div>
   </div>
 </template>
@@ -32,17 +40,34 @@ import { useControlStore } from "@/store/theControl";
 import { computed, onUnmounted, watch } from "vue";
 import { useRoute } from "vue-router";
 
-const emit = defineEmits(["selectServer", "serverLogin", "changePassword", "fileUpload", "deleteKey", "quickLogin"]);
+const emit = defineEmits([
+  "selectServer",
+  "serverLogin",
+  "changePassword",
+  "fileUpload",
+  "deleteKey",
+  "quickLogin",
+]);
 
 const serverStore = useServers();
 const controlStore = useControlStore();
 const route = useRoute();
 
-const isLoginActive = computed(() => route.path === "/login" || serverStore.isServerLoginActive);
-const isSSHActive = computed(() => route.path !== "/login" && serverStore.isServerSSHActive);
-const isDetailsActive = computed(() => route.path !== "/login" && serverStore.isServerDetailsActive);
-const isUpdateActive = computed(() => route.path !== "/login" && serverStore.isServerUpdateActive);
-const isSettingsActive = computed(() => route.path !== "/login" && serverStore.isServerSettingsActive);
+const isLoginActive = computed(
+  () => route.path === "/login" || serverStore.isServerLoginActive
+);
+const isSSHActive = computed(
+  () => route.path !== "/login" && serverStore.isServerSSHActive
+);
+const isDetailsActive = computed(
+  () => route.path !== "/login" && serverStore.isServerDetailsActive
+);
+const isUpdateActive = computed(
+  () => route.path !== "/login" && serverStore.isServerUpdateActive
+);
+const isSettingsActive = computed(
+  () => route.path !== "/login" && serverStore.isServerSettingsActive
+);
 
 watch(
   () => serverStore.selectedServerConnection,
@@ -92,7 +117,11 @@ const selectServer = (server) => {
 };
 
 const addNewServer = () => {
+  serverStore.savedServers.savedConnections.forEach((s) => {
+    if (s.isSelected) s.isSelected = false;
+  });
   if (serverStore.connectExistingServer) {
+    serverStore.addNewServer = false;
     serverStore.connectExistingServer = false;
     serverStore.selectServerToConnect = null;
   }
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 b898546a8..2739ab903 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
@@ -1,5 +1,3 @@
-import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted, watch, watchEffect, onUnmounted } from
-'vue';
 <template>
   <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"
@@ -9,6 +7,7 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
     </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">
         <label
@@ -24,34 +23,32 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
           :placeholder="`${$t('multiServer.serverName')}`"
           class="h-8 self-center col-start-1 col-end-10 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"
           required
+          @change="serverNameChanged = true"
         />
 
         <div
           class="w-full h-full col-start-10 col-span-full row-start-2 row-span-2 flex justify-evenly items-center relative"
         >
           <img
-            class="w-8 hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 cursor-pointer self-center border-4 border-gray-400 rounded-full shadow-md shadow-[#141414]"
+            class="w-7 hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 cursor-pointer self-center border-4 border-gray-400 rounded-full shadow-md shadow-[#141414]"
             :src="getTrashImg"
-            alt=""
+            alt="Trash Icon"
             :class="removeButtonDisabled ? 'opacity-50 pointer-events-none ' : ''"
             @mousedown.prevent
-            @mouseenter="(hovered = true), (removeHovered = true)"
-            @mouseleave="(hovered = false), (removeHovered = false)"
+            @mouseenter="removeHovered = true"
+            @mouseleave="removeHovered = false"
             @click="removeServer"
           />
 
           <div
             v-if="removeHovered"
-            class="absolute -top-11 right-5 w-28 break-words rounded bg-[#202632] px-3 py-2 text-center text-xs font-medium text-white outline-none"
+            class="absolute -top-11 right-5 w-36 rounded-sm bg-[#202632] px-3 py-2 text-center text-xs font-medium text-white outline-none capitalize"
           >
-            <span
-              class="bg-dark dark:bg-dark-2 absolute top-5 left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45"
-            ></span>
             {{ $t("loginServer.removeServer") }}
           </div>
 
           <img
-            class="w-8 hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 cursor-pointer self-center border-4 border-gray-400 rounded-full shadow-md shadow-[#141414]"
+            class="w-7 hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 cursor-pointer self-center border-4 border-gray-400 rounded-full shadow-md shadow-[#141414]"
             :class="addButtonDisabled ? 'opacity-50 pointer-events-none ' : ''"
             src="/img/icon/server-management-icons/plus-icon.png"
             alt="icon"
@@ -62,11 +59,8 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
           />
           <div
             v-if="addHovered"
-            class="absolute -top-11 -right-5 w-28 rounded bg-[#202632] px-3 py-2 text-center text-xs font-medium text-white outline-none"
+            class="absolute -top-11 -right-5 w-28 rounded-sm uppercase bg-[#202632] px-3 py-2 text-center text-xs font-medium text-white outline-none"
           >
-            <span
-              class="bg-dark dark:bg-dark-2 absolute top-5 left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45"
-            ></span>
             {{ $t("multiServer.saveServer") }}
           </div>
         </div>
@@ -88,13 +82,14 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
             placeholder="114.72.86.90"
             class="h-8 self-center col-start-1 col-end-11 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"
             required
+            @change="serverIPChanged = true"
           />
           <img
             v-if="!serverStore.isIpScannerModalActive"
             class="w-6 h-6 col-start-11 col-span-full self-center p-[2px] cursor-pointer hover:scale-110 active:scale-100 transition-all ease-in-out duration-200 justify-self-center"
             src="/img/icon/server-management-icons/local-lan.png"
             alt="Scanner Icon"
-            @click="IpScanLan1"
+            @click="IpScanner"
           />
           <span
             v-else
@@ -131,6 +126,7 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
           placeholder="root"
           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"
           required
+          @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">
@@ -148,7 +144,7 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
             v-model="serverStore.loginState.useAuth"
             type="checkbox"
             class="peer sr-only [&:checked_+_span_svg[data-checked-icon]]:block [&:checked_+_span_svg[data-unchecked-icon]]:hidden bg-gray-200"
-            @change="changeLabel"
+            @input="toggleSSH"
           />
 
           <span
@@ -187,25 +183,10 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
         </label>
       </div>
 
-      <div v-if="!useSSHKey" class="col-start-1 col-span-full row-start-4 row-span-1 grid grid-cols-12 grid-rows-3">
-        <label
-          for="password"
-          class="col-start-1 col-span-full row-start-1 row-span-1 block text-gray-300 text-xs font-bold"
-          :class="passwordError ? 'text-red-500' : 'text-gray-300'"
-          >{{ passwordError ? passwordError : $t("multiServer.pass") }}</label
-        >
-        <input
-          id="password"
-          v-model="serverStore.loginState.password"
-          type="password"
-          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"
-          placeholder="******************"
-          :disabled="useSSHKey"
-          required
-          @keydown.enter="internalLogin"
-        />
-      </div>
-      <div v-if="useSSHKey" class="col-start-1 col-span-full row-start-4 row-span-1 grid grid-cols-12 grid-rows-3">
+      <div
+        v-if="useSSHKey && !usePassword"
+        class="col-start-1 col-span-full row-start-4 row-span-1 grid grid-cols-12 grid-rows-3"
+      >
         <label
           for="keypath"
           class="col-start-1 col-end-12 row-start-1 row-span-1 block text-xs font-bold"
@@ -218,8 +199,8 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
           type="text"
           placeholder="/user/.ssh/id_rsa"
           class="h-8 self-center col-start-1 col-end-12 row-start-2 row-span-2 overflow-hidden appearance-none border rounded-l-md w-full py-1 px-2 text-gray-800 text-sm font-semibold leading-tight focus:outline-none focus:shadow-outline bg-gray-200"
-          :disabled="!useSSHKey"
           required
+          @input="validateSSHKeyPath"
         />
         <label
           for="keypath-file"
@@ -231,10 +212,13 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
               >+</span
             >
           </div>
-          <input id="keypath-file" type="file" class="hidden" :disabled="!useSSHKey" @change="handleFileSelect" />
+          <input id="keypath-file" type="file" class="hidden" @change="handleFileSelect" />
         </label>
       </div>
-      <div v-if="useSSHKey" class="col-start-1 col-span-full row-start-5 row-span-1 grid grid-cols-12 grid-rows-3">
+      <div
+        v-if="useSSHKey && !usePassword"
+        class="col-start-1 col-span-full row-start-5 row-span-1 grid grid-cols-12 grid-rows-3"
+      >
         <label
           for="password"
           class="col-start-1 col-span-full row-start-1 row-span-1 block text-gray-300 text-xs font-bold"
@@ -248,6 +232,26 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
           placeholder="******************"
         />
       </div>
+      <div
+        v-if="usePassword && !useSSHKey"
+        class="col-start-1 col-span-full row-start-4 row-span-1 grid grid-cols-12 grid-rows-3"
+      >
+        <label
+          for="password"
+          class="col-start-1 col-span-full row-start-1 row-span-1 block text-gray-300 text-xs font-bold"
+          :class="passwordError ? 'text-red-500' : 'text-gray-300'"
+          >{{ passwordError ? passwordError : $t("multiServer.pass") }}</label
+        >
+        <input
+          id="password"
+          v-model="serverStore.loginState.password"
+          type="password"
+          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"
+          placeholder="******************"
+          required
+          @input="validatePassword"
+        />
+      </div>
 
       <div class="col-start-1 col-span-full row-start-6 row-span-1 flex justify-center items-center">
         <button
@@ -258,8 +262,8 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
               ? 'bg-gray-400 opacity-50 pointer-events-none '
               : 'bg-gray-200'
           "
-          type="button"
-          @click="internalLogin"
+          type="submit"
+          :disabled="buttonDisabled"
         >
           {{ $t("multiServer.login") }}
         </button>
@@ -280,7 +284,8 @@ import { V2_MetaFunction } from "@remix-run/react"; import { computed, onMounted
 </template>
 
 <script setup>
-import { computed, onUnmounted, ref, watchEffect } from "vue";
+import { computed, ref, onUnmounted, watchEffect, watch, onMounted } from "vue";
+
 import { useServers } from "@/store/servers";
 import { useServerLogin } from "@/composables/useLogin";
 import ControlService from "@/store/ControlService";
@@ -289,210 +294,234 @@ import { useRouter } from "vue-router";
 const emit = defineEmits(["serverLogin"]);
 
 const serverStore = useServers();
+const router = useRouter();
 
 const { add } = useServerLogin();
 
-const hovered = ref(false);
-const removeHovered = ref(false);
-const addHovered = ref(false);
-const message = ref("");
+//Refs
+
 const serverNameError = ref("");
 const ipError = ref("");
 const usernameError = ref("");
 const passwordError = ref("");
 const sshError = ref("");
 const devices = ref([]);
-const buttonDisabled = ref(false);
+const removeHovered = ref(false);
+const addHovered = ref(false);
+const isFormValid = ref(false);
+const useSSHKey = ref(false);
+const usePassword = ref(false);
+const serverNameChanged = ref(false);
+const serverIPChanged = ref(false);
+const serverUsernameChanged = ref(false);
 
-const router = useRouter();
+//*********** Computed ***********//
+
+const buttonDisabled = computed(() => {
+  return !!(serverNameError.value || ipError.value || usernameError.value);
+});
 
 const getTrashImg = computed(() => {
-  if (hovered.value) {
+  if (removeHovered.value) {
     return "./img/icon/server-management-icons/trash-can-2.png";
   } else {
     return "./img/icon/server-management-icons/trash-can.png";
   }
 });
 
-const useSSHKey = computed(() => {
-  if (serverStore.loginState.useAuth) {
-    return true;
-  } else {
-    return false;
-  }
-});
-
 const addButtonDisabled = computed(() => {
-  const existingServer = serverStore.savedServers?.savedConnections?.some(
-    (item) => item.host === serverStore.selectedServerToConnect?.host
-  );
-
-  if (existingServer) {
-    return true;
-  } else {
+  if (
+    !ipError.value &&
+    !usernameError.value &&
+    !serverNameError.value &&
+    serverStore.loginState.hostName &&
+    serverStore.loginState.ip &&
+    serverStore.loginState.username
+  ) {
     return false;
+  } else {
+    return true;
   }
 });
 
 const removeButtonDisabled = computed(() => {
-  if (serverStore.selectedServerToConnect) {
-    return false;
-  } else {
-    return true;
-  }
+  return !serverStore.selectedServerToConnect;
 });
 
+//*********** Watchers ***********//
+
+watch(
+  () => serverStore.loginState.useAuth,
+  () => {
+    toggleSSH();
+  }
+);
+
 watchEffect(() => {
-  if (serverStore.connectExistingServer) {
-    serverStore.loginState.hostName = serverStore.selectedServerToConnect.name;
-    serverStore.loginState.ip = serverStore.selectedServerToConnect.host;
-    serverStore.loginState.port = serverStore.selectedServerToConnect.port;
-    serverStore.loginState.username = serverStore.selectedServerToConnect.user;
-    serverStore.loginState.useAuth = serverStore.selectedServerToConnect.useAuthKey;
-    serverStore.loginState.keyPath = serverStore.selectedServerToConnect.keylocation;
-    serverStore.loginState.password = "";
-    serverStore.loginState.passphrase = "";
-  } else {
+  if (serverStore.addNewServer) {
     serverStore.selectedServerToConnect = null;
     serverStore.loginState.hostName = "";
     serverStore.loginState.ip = "";
     serverStore.loginState.port = "";
     serverStore.loginState.username = "";
-    serverStore.loginState.useAuth = false;
     serverStore.loginState.keyPath = "";
-    serverStore.loginState.password = "";
-    serverStore.loginState.passphrase = "";
+    serverStore.loginState.useAuth = false;
   }
 });
 
 watchEffect(() => {
-  if (!useSSHKey.value && serverStore.loginState.password === "") {
-    buttonDisabled.value = true;
-  } else {
-    buttonDisabled.value = false;
+  if (serverStore.selectedServerToConnect) {
+    serverStore.loginState.hostName = serverStore.selectedServerToConnect.name;
+    serverStore.loginState.ip = serverStore.selectedServerToConnect.host;
+    serverStore.loginState.port = serverStore.selectedServerToConnect.port;
+    serverStore.loginState.username = serverStore.selectedServerToConnect.user;
+    serverStore.loginState.useAuth = serverStore.selectedServerToConnect.useAuthKey;
+
+    if (serverStore.loginState.useAuth) {
+      useSSHKey.value = true;
+      usePassword.value = false;
+      serverStore.loginState.keyPath = serverStore.selectedServerToConnect.keylocation;
+      serverStore.loginState.passphrase = serverStore.selectedServerToConnect?.passphrase;
+      serverStore.loginState.password = "";
+    } else {
+      useSSHKey.value = false;
+      usePassword.value = true;
+      serverStore.loginState.keyPath = "";
+      serverStore.loginState.passphrase = "";
+      serverStore.loginState.password = serverStore.selectedServerToConnect.password;
+    }
   }
 });
 
-// Lifecycle
+watch(
+  () => serverStore.loginState.hostName,
+  () => {
+    if (serverNameChanged.value) {
+      validateServerName();
+    }
+  }
+);
 
-onUnmounted(() => {
-  serverStore.loginState.hostName = "";
-  serverStore.loginState.ip = "";
-  serverStore.loginState.port = "";
-  serverStore.loginState.username = "";
-  serverStore.loginState.useAuth = false;
-  serverStore.loginState.keyPath = "";
-  serverStore.loginState.password = "";
-  serverStore.loginState.passphrase = "";
-  serverStore.connectExistingServer = false;
-  serverStore.selectedServerToConnect = null;
-});
+watch(
+  () => serverStore.loginState.ip,
+  () => {
+    if (serverIPChanged.value) {
+      validateIP();
+    }
+  }
+);
 
-// Methods
-const handleFileSelect = (event) => {
-  const selectedFile = event.target.files[0];
-  if (selectedFile) {
-    if (selectedFile.size > 0) {
-      serverStore.loginState.keyPath = selectedFile.path;
-    } else {
-      serverStore.loginState.keyPath = "";
-      message.value = "Selected file is empty.";
+watch(
+  () => serverStore.loginState.username,
+  () => {
+    if (serverUsernameChanged.value) {
+      validateUsername();
     }
-  } else {
-    serverStore.loginState.keyPath = "";
   }
-};
+);
 
-const validateServerName = () => {
-  if (!serverStore.loginState.hostName) {
-    serverNameError.value = "Server name is required.";
-    return false;
+watchEffect(() => {
+  if (!serverNameError.value && !ipError.value && !usernameError.value) {
+    isFormValid.value = true;
+  } else {
+    isFormValid.value = false;
   }
+});
+
+//*********** Lifecycle Hooks ***********//
+
+onMounted(() => {
+  ipError.value = "";
+  usernameError.value = "";
   serverNameError.value = "";
-  return true;
-};
 
-const validateIPorHostname = () => {
-  const ipRegex =
-    /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+  serverStore.loginState = {};
+});
 
-  const hostnameRegex = /^[a-zA-Z0-9.-]+$/;
+onUnmounted(() => {
+  serverStore.loginState = {};
+});
 
-  const input = serverStore.loginState.ip;
+//*********** Methods ***********//
 
-  if (ipRegex.test(input.trim()) || hostnameRegex.test(input.trim())) {
-    ipError.value = "";
-    return true;
-  } else {
-    ipError.value = "Invalid IP address or hostname.";
-    return false;
-  }
+// Validation functions
+const validateServerName = () => {
+  const serverName = serverStore.loginState.hostName || ""; // Default to empty string if undefined or null
+  serverNameError.value = serverName.trim() ? "" : "Server name is required.";
+};
+
+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 validateUsername = () => {
-  if (!serverStore.loginState.username) {
-    usernameError.value = "Username is required.";
-    return false;
-  }
-  usernameError.value = "";
-  return true;
+  const username = serverStore.loginState.username || ""; // Default to empty string if undefined or null
+  usernameError.value = username.trim() ? "" : "Username is required.";
 };
 
-const validateSshKey = () => {
-  if (serverStore.loginState.keyPath) {
-    sshError.value = "";
-    return true;
-  } else {
-    sshError.value = "SSH key path is required.";
-    return false;
-  }
+const validateSSHKeyPath = () => {
+  const keyPath = serverStore.loginState.keyPath || ""; // Default to empty string if undefined or null
+  sshError.value = keyPath.trim() ? "" : "SSH key path is required.";
 };
 
 const validatePassword = () => {
-  if (serverStore.loginState.password) {
-    passwordError.value = "";
-    return true;
+  const password = serverStore.loginState.password || ""; // Default to empty string if undefined or null
+  passwordError.value = password.trim() ? "" : "Password is required.";
+};
+
+const validateForm = () => {
+  validateServerName();
+  validateIP();
+  validateUsername();
+
+  if (!serverNameError.value && !ipError.value && !usernameError.value) {
+    isFormValid.value = true;
   } else {
-    passwordError.value = "Password is required.";
-    return false;
+    isFormValid.value = false;
   }
 };
 
-const changeLabel = () => {
+const toggleSSH = () => {
   if (serverStore.loginState.useAuth) {
-    serverStore.loginState.password = "";
+    useSSHKey.value = true;
+    usePassword.value = false;
+  } else {
+    useSSHKey.value = false;
+    usePassword.value = true;
   }
 };
 
-const internalLogin = async () => {
-  serverStore.isServerAnimationActive = true;
-  serverStore.connectingProcess = true;
-  serverNameError.value = "";
-  ipError.value = "";
-  usernameError.value = "";
-  passwordError.value = "";
-  sshError.value = "";
-
-  let isValid = true;
-  isValid = isValid && validateServerName();
-  isValid = isValid && validateIPorHostname();
-  isValid = isValid && validateUsername();
+// Lifecycle
 
-  if (useSSHKey.value) {
-    isValid = isValid && validateSshKey();
-  } else {
-    isValid = isValid && validatePassword();
-  }
+onUnmounted(() => {
+  serverStore.loginState.hostName = "";
+  serverStore.loginState.ip = "";
+  serverStore.loginState.port = "";
+  serverStore.loginState.username = "";
+  serverStore.loginState.useAuth = false;
+  serverStore.loginState.keyPath = "";
+  serverStore.loginState.password = "";
+  serverStore.loginState.passphrase = "";
+  serverStore.connectExistingServer = false;
+  serverStore.selectedServerToConnect = null;
+});
 
-  if (isValid) {
-    emit("serverLogin");
+const handleFileSelect = (event) => {
+  const selectedFile = event.target.files[0];
+  if (selectedFile) {
+    if (selectedFile.size > 0) {
+      serverStore.loginState.keyPath = selectedFile.path;
+    } else {
+      serverStore.loginState.keyPath = "";
+    }
   } else {
-    serverStore.isServerAnimationActive = false;
-    router.push("/login");
+    serverStore.loginState.keyPath = "";
   }
 };
 
-const IpScanLan1 = async () => {
+const IpScanner = async () => {
   serverStore.isIpScannerModalActive = true;
   try {
     let res = await ControlService.IpScanLan();
@@ -510,11 +539,29 @@ const IpScanLan1 = async () => {
 };
 
 const saveServer = async () => {
-  await add();
-  //reload the page
+  if (isFormValid.value) {
+    await add();
+    serverStore.selectedServerToConnect = null;
+    serverStore.loginState.hostName = "";
+    serverStore.loginState.ip = "";
+    serverStore.loginState.port = "";
+    serverStore.loginState.username = "";
+    serverStore.loginState.useAuth = false;
+  }
 };
 
 const removeServer = () => {
   serverStore.isRemoveModalActive = true;
 };
+
+const internalLogin = () => {
+  validateForm();
+  if (isFormValid.value) {
+    serverStore.isServerAnimationActive = true;
+    serverStore.connectingProcess = true;
+    emit("serverLogin");
+  } else {
+    router.push("/login");
+  }
+};
 </script>
diff --git a/launcher/src/composables/useLogin.js b/launcher/src/composables/useLogin.js
index c4197460d..88df7b10b 100644
--- a/launcher/src/composables/useLogin.js
+++ b/launcher/src/composables/useLogin.js
@@ -153,8 +153,8 @@ export const useServerLogin = () => {
     let savedConnections = storageSavedConnections.savedConnections || [];
     const server = serverStore.selectedServerToConnect;
 
-    serverStore.connections = serverStore.connections.filter((conn) => conn?.host !== server?.host);
-    savedConnections = savedConnections.filter((conn) => conn?.host !== server?.host);
+    serverStore.connections = serverStore.connections.filter((conn) => conn?.name !== server?.name);
+    savedConnections = savedConnections.filter((conn) => conn?.name !== server?.name);
 
     const updatedConfig = {
       ...storageSavedConnections,