From 484caafaf4656f0f26bea5c4a6f5cf57a092c32a Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Wed, 3 Jul 2024 21:29:16 +0200
Subject: [PATCH] UPDATE: tooltips and languages  (#1921)

* update the fetching

* fix the new api for the testers

* Revert "fix the new api for the testers"

This reverts commit ab01562bba614a5ac3a60f186204e4ba992a178a.

* Revert "update the fetching"

This reverts commit b5a052c880f412cd597f73d00b5e0c6ad9702836.

* Fix the nuke modal animation

* Revert "Fix the nuke modal animation"

This reverts commit 3c5b547c69f0681fc0651fa392d327489d46ecc2.

* FIX: footer and multi Server size

* ADD: tooltips to the server details

* ADD: tooltip for change the password

* ADD:tooltip to the server panel

* ADD:tooltip to the login page

* ADD: tooltips to ssh manaement tab

* ADD: tooltips to os update management

* ADD: tooltip to server node setting

* ADD: tooltips to the 2fa tab
---
 launcher/public/output.css                    |  17 +-
 .../server-management/MultiServerScreen.vue   |  25 +-
 .../components/login-form/LoginForm.vue       |  79 ++-
 .../components/saved-servers/ServerPanel.vue  |  13 +-
 .../server-details/ChangePassword.vue         |  22 +-
 .../server-details/ServerDetails.vue          |  75 ++-
 .../server-settings/ServerSettings.vue        |  16 +-
 .../components/server-update/UpdateRow.vue    |  13 +
 .../components/server-update/UpdateServer.vue |  19 +-
 .../ssh-management/SshManagement.vue          |   9 +
 .../two-factor-auth/TwoFactoSetupBox.vue      |   7 +
 .../two-factor-auth/TwoFactorAuth.vue         |  21 +
 .../components/UI/the-control/PeerToPeer.vue  |   4 +-
 .../components/UI/the-control/SyncStatus.vue  |   2 +-
 .../UI/the-node/ResyncSeparateServices.vue    | 546 ------------------
 launcher/src/components/layers/TheFooter.vue  |   2 +-
 launcher/src/languages/en.json                |  52 ++
 17 files changed, 275 insertions(+), 647 deletions(-)
 delete mode 100755 launcher/src/components/UI/the-node/ResyncSeparateServices.vue

diff --git a/launcher/public/output.css b/launcher/public/output.css
index 0546724a0..5df92cdad 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.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -1808,6 +1808,10 @@ video {
   height: 95%;
 }
 
+.h-\[95\.5\%\]{
+  height: 95.5%;
+}
+
 .h-fit{
   height: -webkit-fit-content;
   height: -moz-fit-content;
@@ -2380,12 +2384,6 @@ video {
       flex-shrink: 0;
 }
 
-.flex-grow{
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-
 .origin-top-right{
   -webkit-transform-origin: top right;
           transform-origin: top right;
@@ -5513,6 +5511,11 @@ html body {
   border-color: rgb(77 117 117 / var(--tw-border-opacity));
 }
 
+.hover\:border-amber-300:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(252 211 77 / var(--tw-border-opacity));
+}
+
 .hover\:border-blue-400:hover{
   --tw-border-opacity: 1;
   border-color: rgb(96 165 250 / var(--tw-border-opacity));
diff --git a/launcher/src/components/UI/server-management/MultiServerScreen.vue b/launcher/src/components/UI/server-management/MultiServerScreen.vue
index 9f24287ae..0edac6472 100644
--- a/launcher/src/components/UI/server-management/MultiServerScreen.vue
+++ b/launcher/src/components/UI/server-management/MultiServerScreen.vue
@@ -1,7 +1,7 @@
 import ServerHeader from './components/ServerHeader.vue';
 <template>
   <div
-    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"
+    class="w-full h-[95.5%] 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="
@@ -32,16 +32,8 @@ import ServerHeader from './components/ServerHeader.vue';
       @remove-handler="removeServerHandler"
       @close-window="closeWindow"
     />
-    <TwofactorModal
-      v-if="isTwoFactorAuthActive"
-      @submit-auth="submitAuthHandler"
-      @close-window="closeAndCancel"
-    />
-    <ErrorModal
-      v-if="serverStore.errorMsgExists"
-      :description="serverStore.error"
-      @close-window="closeErrorDialog"
-    />
+    <TwofactorModal v-if="isTwoFactorAuthActive" @submit-auth="submitAuthHandler" @close-window="closeAndCancel" />
+    <ErrorModal v-if="serverStore.errorMsgExists" :description="serverStore.error" @close-window="closeErrorDialog" />
     <QRcodeModal v-if="authStore.isBarcodeModalActive" @close-window="closeBarcode" />
   </div>
 </template>
@@ -220,9 +212,7 @@ const serverHandler = (server) => {
     server.isSelected = true;
   }
 
-  serverStore.savedServers.savedConnections = [
-    ...serverStore.savedServers.savedConnections,
-  ];
+  serverStore.savedServers.savedConnections = [...serverStore.savedServers.savedConnections];
 };
 
 //Change password handling
@@ -260,8 +250,7 @@ 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();
@@ -285,9 +274,7 @@ 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/login-form/LoginForm.vue b/launcher/src/components/UI/server-management/components/login-form/LoginForm.vue
index bce1cc9b7..ab7d72bd8 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,34 +2,30 @@
   <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"
           v-model="serverStore.loginState.hostName"
           type="text"
-          :placeholder="`${$t('multiServer.serverName')}`"
+          :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"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.addServerName')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         />
 
         <div
@@ -41,8 +37,8 @@
             alt="Trash Icon"
             :class="removeButtonDisabled ? 'opacity-50 pointer-events-none ' : ''"
             @mousedown.prevent
-            @mouseenter="removeHovered = true"
-            @mouseleave="removeHovered = false"
+            @mouseenter="(removeHovered = true), (footerStore.cursorLocation = `${t('loginForm.rem')}`)"
+            @mouseleave="(removeHovered = false), (footerStore.cursorLocation = '')"
             @click="removeServer"
           />
 
@@ -59,8 +55,8 @@
             src="/img/icon/server-management-icons/plus-icon.png"
             alt="icon"
             @mousedown.prevent
-            @mouseenter="addHovered = true"
-            @mouseleave="addHovered = false"
+            @mouseenter="(addHovered = true), (footerStore.cursorLocation = `${t('loginForm.save')}`)"
+            @mouseleave="(addHovered = false), (footerStore.cursorLocation = '')"
             @click="saveServer"
           />
           <div
@@ -71,9 +67,7 @@
           </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"
@@ -90,6 +84,8 @@
             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
+            @mouseenter="footerStore.cursorLocation = `${t('loginForm.ipOrHost')}`"
+            @mouseleave="footerStore.cursorLocation = ''"
             @change="serverIPChanged = true"
           />
           <img
@@ -105,9 +101,7 @@
           ></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"
@@ -120,11 +114,11 @@
           type="text"
           placeholder="22"
           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"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.port')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         />
       </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"
@@ -139,11 +133,11 @@
           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"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.uName')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         />
       </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
@@ -152,6 +146,8 @@
         <label
           for="AcceptConditions"
           class="col-start-6 col-end-9 row-start-2 row-span-full self-center relative h-6 w-12 cursor-pointer [-webkit-tap-highlight-color:_transparent] flex justify-center items-center"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.tgll')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         >
           <input
             id="AcceptConditions"
@@ -193,9 +189,7 @@
             </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>
 
@@ -222,20 +216,13 @@
           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,6 +240,8 @@
           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="******************"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.pass')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         />
       </div>
       <div
@@ -273,12 +262,12 @@
           placeholder="******************"
           required
           @input="validatePassword"
+          @mouseenter="footerStore.cursorLocation = `${t('loginForm.pass')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         />
       </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"
@@ -315,9 +304,14 @@ import { useServers } from "@/store/servers";
 import { useServerLogin } from "@/composables/useLogin";
 import ControlService from "@/store/ControlService";
 import { useRouter } from "vue-router";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
 
 const emit = defineEmits(["serverLogin"]);
 
+const footerStore = useFooter();
 const serverStore = useServers();
 const router = useRouter();
 
@@ -478,8 +472,7 @@ const validateServerName = () => {
 const validateIP = () => {
   const ipOrHostname = serverStore.loginState.ip || "";
 
-  ipError.value =
-    ipOrHostname.trim().length > 0 ? "" : "IP address or hostname is required.";
+  ipError.value = ipOrHostname.trim().length > 0 ? "" : "IP address or hostname is required.";
 };
 
 const validateUsername = () => {
diff --git a/launcher/src/components/UI/server-management/components/saved-servers/ServerPanel.vue b/launcher/src/components/UI/server-management/components/saved-servers/ServerPanel.vue
index 41ce0fe8a..a79c93561 100644
--- a/launcher/src/components/UI/server-management/components/saved-servers/ServerPanel.vue
+++ b/launcher/src/components/UI/server-management/components/saved-servers/ServerPanel.vue
@@ -13,8 +13,10 @@
         ref="searchInputRef"
         v-model="searchQuery"
         type="text"
-        :placeholder="`${$t('multiServer.serchFor')}`"
+        :placeholder="`${t('multiServer.serchFor')}`"
         class="w-full h-8 rounded-md border-gray-200 py-2.5 pe-10 shadow-sm sm:text-sm px-2"
+        @mouseenter="footerStore.cursorLocation = `${t('serverList.search')}`"
+        @mouseleave="footerStore.cursorLocation = ''"
       />
 
       <span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
@@ -49,11 +51,15 @@
         :server="server"
         @select-server="selectServer"
         @quick-login="quickLogin"
+        @mouseenter="footerStore.cursorLocation = `${server.name}`"
+        @mouseleave="footerStore.cursorLocation = ''"
       />
     </div>
     <button
       class="w-full h-[50px] self-end col-start-1 col-span-full row-start-11 row-span-2 bg-gray-200 rounded-md px-4 py-2 flex justify-center items-center shadow-lg shadow-black active:shadow-none active:scale-95 cursor-pointer space-x-4 transition-all duration-200 ease-in-out hover:bg-[#336666] text-gray-800 hover:text-gray-100"
       @click="serverLogin"
+      @mouseenter="footerStore.cursorLocation = `${t('serverList.addServer')}`"
+      @mouseleave="footerStore.cursorLocation = ''"
     >
       <img
         class="w-7 h-7 border border-gray-500 bg-teal-500 rounded-full p-1"
@@ -70,9 +76,14 @@ import ControlService from "@/store/ControlService";
 import { useServers } from "@/store/servers";
 import { useControlStore } from "@/store/theControl";
 import { onMounted, watch, ref } from "vue";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
 
 const emit = defineEmits(["selectServer", "serverLogin", "quickLogin"]);
 
+const footerStore = useFooter();
 const serverStore = useServers();
 const controlStore = useControlStore();
 const searchQuery = ref("");
diff --git a/launcher/src/components/UI/server-management/components/server-details/ChangePassword.vue b/launcher/src/components/UI/server-management/components/server-details/ChangePassword.vue
index 421c5ff89..27cca1b20 100644
--- a/launcher/src/components/UI/server-management/components/server-details/ChangePassword.vue
+++ b/launcher/src/components/UI/server-management/components/server-details/ChangePassword.vue
@@ -27,6 +27,8 @@
           class="w-full h-8 text-sm col-start-1 col-end-11 row-start-2 row-span-1 bg-gray-300 text-gray-700 font-semibold px-2 outline-none border rounded-sm"
           :class="error ? 'border-red-500' : 'border-transparent'"
           :placeholder="`${$t('multiServer.EnterNewPass')}`"
+          @mouseenter="footerStore.cursorLocation = `${t('serverDetail.confirmPass')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
           @input="handleInput"
         />
       </div>
@@ -44,6 +46,8 @@
             class="col-start-1 col-span-full w-full h-8 text-sm bg-gray-300 text-gray-700 font-semibold px-2 outline-none border rounded-sm"
             :class="error ? 'border-red-500' : 'border-transparent'"
             :placeholder="`${$t('multiServer.verifyPass')}`"
+            @mouseenter="footerStore.cursorLocation = `${t('serverDetail.confirmPass2')}`"
+            @mouseleave="footerStore.cursorLocation = ''"
             @input="handleInput"
             @keydown.enter="changePassword"
           />
@@ -55,12 +59,16 @@
         <div
           class="w-1/3 h-7 flex items-center justify-center rounded-sm bg-teal-800 hover:bg-teal-950 p-[3px] border border-teal-800 hover:border-gray-200 shadow-md shadow-black active:shadow-none active:scale-95 transition duration-150 ease-in-out cursor-pointer text-gray-100 text-sm font-semibold uppercase"
           @click="changePassword"
+          @mouseenter="footerStore.cursorLocation = `${t('serverDetail.confirmBtn')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         >
           Confirm
         </div>
         <div
           class="w-1/3 h-7 flex items-center justify-center rounded-sm bg-red-800 hover:bg-red-950 p-[3px] border border-red-800 hover:border-gray-200 shadow-md shadow-black active:shadow-none active:scale-95 transition duration-150 ease-in-out cursor-pointer text-gray-100 text-sm font-semibold uppercase"
           @click="denyPassChange"
+          @mouseenter="footerStore.cursorLocation = `${t('serverDetail.cancel')}`"
+          @mouseleave="footerStore.cursorLocation = ''"
         >
           Cancel
         </div>
@@ -69,9 +77,11 @@
     <div v-else class="w-full h-full col-start-1 col-span-full row-start-2 row-span-1 flex justify-center items-center">
       <button
         class="w-full h-10 bg-teal-700 hover:bg-teal-900 text-gray-200 font-semibold py-1 px-4 rounded-md flex justify-center items-center cursor-pointer space-x-2 transition-all duration-200 ease-in-out active:scale-95 shadow-lg shadow-black active:shadow-none"
-        @click="serverStore.isChangingPasswordActive = true"
+        @mouseenter="footerStore.cursorLocation = `${t('serverDetail.chngPass')}`"
+        @mouseleave="footerStore.cursorLocation = ''"
+        @click="(serverStore.isChangingPasswordActive = true), (footerStore.cursorLocation = '')"
       >
-        <span class="text-md uppercase font-semibold text-gray-100">{{ $t("multiServer.chngPass") }}</span>
+        <span class="text-md uppercase font-semibold text-gray-100">{{ t("multiServer.chngPass") }}</span>
       </button>
     </div>
   </div>
@@ -80,6 +90,12 @@
 <script setup>
 import { ref } from "vue";
 import { useServers } from "@/store/servers";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const footerStore = useFooter();
 
 const emit = defineEmits(["changePassword"]);
 
@@ -99,6 +115,7 @@ const handleInput = () => {
 };
 
 const changePassword = () => {
+  footerStore.cursorLocation = "";
   if (!isPasswordValid(serverStore.newPassword) || !isPasswordValid(serverStore.verifyPassword)) {
     error.value = true;
     errorMessage.value = "Password must be at least 8 characters and contain no spaces";
@@ -115,6 +132,7 @@ const changePassword = () => {
 };
 
 const denyPassChange = () => {
+  footerStore.cursorLocation = "";
   serverStore.newPassword = "";
   serverStore.verifyPassword = "";
   error.value = false;
diff --git a/launcher/src/components/UI/server-management/components/server-details/ServerDetails.vue b/launcher/src/components/UI/server-management/components/server-details/ServerDetails.vue
index 862df3fc0..804d0648f 100644
--- a/launcher/src/components/UI/server-management/components/server-details/ServerDetails.vue
+++ b/launcher/src/components/UI/server-management/components/server-details/ServerDetails.vue
@@ -4,47 +4,70 @@
   >
     <div class="col-start-1 col-span-1 row-start-1 row-span-1 flex flex-col justify-start items-start">
       <p class="text-md text-gray-300 font-semibold uppercase">
-        {{ $t("multiServer.serverName") }}
+        {{ t("multiServer.serverName") }}
       </p>
-      <span class="text-lg text-amber-300 font-semibold text-left">{{
-        serverStore.selectedServerConnection?.name
-          ? serverStore.selectedServerConnection?.name
-          : controlStore.ServerName
-      }}</span>
+      <span
+        class="text-lg text-amber-300 font-semibold text-left"
+        @mouseenter="footerStore.cursorLocation = `${serverName}`"
+        @mouseleave="footerStore.cursorLocation = ''"
+        >{{
+          serverStore.selectedServerConnection?.name
+            ? serverStore.selectedServerConnection?.name
+            : controlStore.ServerName
+        }}</span
+      >
     </div>
-    <div class="col-start-2 col-span-1 row-start-1 row-span-1 flex flex-col justify-start items-start">
+    <div
+      class="col-start-2 col-span-1 row-start-1 row-span-1 flex flex-col justify-start items-start"
+      @mouseenter="footerStore.cursorLocation = `${machine}`"
+      @mouseleave="footerStore.cursorLocation = ''"
+    >
       <p class="text-md text-gray-300 font-semibold uppercase">
-        {{ $t("multiServer.machineName") }}
+        {{ t("multiServer.machineName") }}
       </p>
       <span class="text-lg text-amber-300 font-semibold text-left">{{ controlStore.ServerName }}</span>
     </div>
-    <div class="col-start-1 col-span-1 row-start-2 row-span-1 flex flex-col justify-start items-start">
+    <div
+      class="col-start-1 col-span-1 row-start-2 row-span-1 flex flex-col justify-start items-start"
+      @mouseenter="footerStore.cursorLocation = `${serverIp}`"
+      @mouseleave="footerStore.cursorLocation = ''"
+    >
       <p class="text-md text-gray-300 font-semibold uppercase">
-        {{ $t("multiServer.ipOrHost") }}
+        {{ t("multiServer.ipOrHost") }}
       </p>
       <span class="text-lg text-amber-300 font-semibold text-left">{{ controlStore.ipAddress }}</span>
     </div>
-    <div class="col-start-2 col-span-1 row-start-2 row-span-1 flex flex-col justify-start items-start">
+    <div
+      class="col-start-2 col-span-1 row-start-2 row-span-1 flex flex-col justify-start items-start"
+      @mouseenter="footerStore.cursorLocation = `${portTooltip}`"
+      @mouseleave="footerStore.cursorLocation = ''"
+    >
       <p class="text-md text-gray-300 font-semibold uppercase">
-        {{ $t("multiServer.port") }}
+        {{ t("multiServer.port") }}
       </p>
       <span class="text-lg text-amber-300 font-semibold text-left">{{ port }}</span>
     </div>
-    <div class="col-start-2 col-span-1 row-start-3 row-span-1 flex flex-col justify-start items-start">
+    <div
+      class="col-start-2 col-span-1 row-start-3 row-span-1 flex flex-col justify-start items-start"
+      @mouseenter="footerStore.cursorLocation = `${userNameTooltip}`"
+      @mouseleave="footerStore.cursorLocation = ''"
+    >
       <p class="text-md text-gray-300 font-semibold uppercase">
-        {{ $t("multiServer.userName") }}
+        {{ t("multiServer.userName") }}
       </p>
       <span class="text-lg text-amber-300 font-semibold text-left">{{ userName }}</span>
     </div>
     <div class="col-start-1 col-span-1 row-start-3 row-span-1 flex justify-start items-start relative space-x-1">
       <img
-        class="w-8 h-8 rounded-full border border-gray-300"
+        class="w-8 h-8 rounded-full border border-gray-300 cursor-pointer hover:border-amber-300 transition duration-200 ease-in-out"
         :src="selectedAvatar"
         alt="Avatar"
         @click="avatarModal"
+        @mouseenter="footerStore.cursorLocation = `${chngAvatar}`"
+        @mouseleave="footerStore.cursorLocation = ''"
       />
       <p class="text-md text-gray-300 font-semibold uppercase pt-1">
-        {{ $t("multiServer.chngAvatar") }}
+        {{ t("multiServer.chngAvatar") }}
       </p>
       <AvatarModal v-if="serverStore.isAvatarModalActive" @pick-avatar="setAvatar" />
     </div>
@@ -59,11 +82,31 @@ import { computed, onMounted } from "vue";
 import ControlService from "@/store/ControlService";
 import { useControlStore } from "@/store/theControl";
 import { useServers } from "@/store/servers";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
 
 const emit = defineEmits(["changePassword", "setAvatar"]);
 
 const controlStore = useControlStore();
 const serverStore = useServers();
+const footerStore = useFooter();
+
+const serverName = t("serverDetail.serverName", {
+  serverName: serverStore.selectedServerConnection?.name
+    ? serverStore.selectedServerConnection?.name
+    : controlStore.ServerName,
+});
+const serverIp = t("serverDetail.serverIp", { serverIp: controlStore.ipAddress });
+const machine = t("serverDetail.machine", { machineName: controlStore.ServerName });
+const portTooltip = t("serverDetail.port", {
+  port: serverStore.selectedServerConnection?.port !== "" ? serverStore.selectedServerConnection?.port : 22,
+});
+const userNameTooltip = t("serverDetail.userName", {
+  userName: serverStore.selectedServerConnection?.user,
+});
+const chngAvatar = t("serverDetail.chngAvatar");
 
 const userName = computed(() => {
   return serverStore.selectedServerConnection?.user;
diff --git a/launcher/src/components/UI/server-management/components/server-settings/ServerSettings.vue b/launcher/src/components/UI/server-management/components/server-settings/ServerSettings.vue
index 67677f836..86a5948eb 100644
--- a/launcher/src/components/UI/server-management/components/server-settings/ServerSettings.vue
+++ b/launcher/src/components/UI/server-management/components/server-settings/ServerSettings.vue
@@ -6,11 +6,15 @@
       class="col-start-1 col-span-full row-start-1 row-span-2 border-b border-gray-700 p-1 grid grid-cols-12 grid-rows-2"
     >
       <div class="col-start-1 col-span-full row-start-1 row-span-1 text-xs font-bold uppercase text-[#336666]">
-        NODE & SERVER SETTINGS
+        {{ t("serverSetting.nodeServerTtl") }}
       </div>
       <div class="col-start-1 col-span-full row-start-2 row-span-1 rounded-sm px-1 grid grid-cols-12 items-center">
-        <span class="col-start-1 col-end-11 text-left text-gray-200 text-xs">Automated Node Updates</span>
-        <label class="h-full col-start-11 col-span-full items-center relative cursor-pointer p-[2px]">
+        <span class="col-start-1 col-end-11 text-left text-gray-200 text-xs"> {{ t("serverSetting.auto") }}</span>
+        <label
+          class="h-full col-start-11 col-span-full items-center relative cursor-pointer p-[2px]"
+          @mouseenter="footerStore.cursorLocation = `${t('serverSetting.tgl')} `"
+          @mouseleave="footerStore.cursorLocation = ''"
+        >
           <input v-model="isAutoUpdateEnabled" type="checkbox" class="sr-only" />
           <div
             class="w-full h-full flex items-center rounded-full p-1 transition-colors duration-300 ease-in-out"
@@ -34,6 +38,12 @@
 import { ref, computed, onMounted, watch, toRaw } from "vue";
 import ControlService from "@/store/ControlService";
 import { useUpdateCheck } from "@/composables/version.js";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const footerStore = useFooter();
 
 const isAutoUpdateEnabled = ref(false);
 
diff --git a/launcher/src/components/UI/server-management/components/server-update/UpdateRow.vue b/launcher/src/components/UI/server-management/components/server-update/UpdateRow.vue
index 933cb6dee..8d226b807 100644
--- a/launcher/src/components/UI/server-management/components/server-update/UpdateRow.vue
+++ b/launcher/src/components/UI/server-management/components/server-update/UpdateRow.vue
@@ -20,6 +20,8 @@ import { useServers } from '@/store/servers';
       v-else
       class="w-full h-full col-start-11 col-span-full self-center flex justify-center items-center bg-[#4d7575] hover:bg-[#243535] active:border-none active:shadow-none border border-transparent hover:border-[#4d7575] rounded-sm cursor-pointer transition-colors shadow-sm shadow-[#182020]"
       @click="updatePackage"
+      @mouseenter="footerStore.cursorLocation = `${update} `"
+      @mouseleave="footerStore.cursorLocation = ''"
     >
       <img class="w-4" src="/img/icon/base-header-icons/update-modal-download.png" alt="icon" />
     </div>
@@ -28,13 +30,24 @@ import { useServers } from '@/store/servers';
 
 <script setup>
 import { useServers } from "@/store/servers";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
 
 const emit = defineEmits(["updatePackage"]);
 const serverStore = useServers();
+const footerStore = useFooter();
 
 const props = defineProps({
   item: Object,
 });
+
+const update = t("osUpdate.updateBtn", {
+  name: props.item.packageName,
+  version: props.item.newVersion,
+});
+
 const updatePackage = () => {
   emit("updatePackage", props.item);
 };
diff --git a/launcher/src/components/UI/server-management/components/server-update/UpdateServer.vue b/launcher/src/components/UI/server-management/components/server-update/UpdateServer.vue
index 1496e9d14..4198d418c 100644
--- a/launcher/src/components/UI/server-management/components/server-update/UpdateServer.vue
+++ b/launcher/src/components/UI/server-management/components/server-update/UpdateServer.vue
@@ -3,7 +3,7 @@
     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 gap-y-2"
   >
     <div class="w-full h-full col-start-1 col-span-full row-start-1 row-span-1 flex justify-start items-center py-1">
-      <span class="text-md font-semibold text-gray-300">{{ $t("updateServer.opSysUpdate") }}</span>
+      <span class="text-md font-semibold text-gray-300">{{ t("updateServer.opSysUpdate") }}</span>
     </div>
     <div
       class="w-full h-full col-start-1 col-span-full row-start-2 row-end-4 grid grid-cols-12 grid-rows-2 items-center gap-x-1"
@@ -12,7 +12,7 @@
         <img class="w-full" src="/img/icon/control-page-icons/ubuntuIco.svg" />
       </div>
       <div class="w-full h-full col-start-3 col-end-10 row-start-1 row-span-1 flex justify-start items-center ml-2">
-        <span class="text-lg font-semibold text-gray-400 uppercase">{{ $t("updateServer.ubuntu") }}</span>
+        <span class="text-lg font-semibold text-gray-400 uppercase">{{ t("updateServer.ubuntu") }}</span>
       </div>
       <!-- <div class="w-full h-full col-start-10 col-span-full row-start-1 row-span-1 flex justify-center items-center">
         <div
@@ -26,7 +26,7 @@
 
       <div class="w-full h-full col-start-3 col-span-full row-start-2 row-span-1 ml-2 grid grid-cols-3 items-center">
         <span class="col-start-1 col-end-3 text-sm font-semibold text-gray-400 uppercase">{{
-          $t("updateServer.opSysVersion")
+          t("updateServer.opSysVersion")
         }}</span>
         <span class="col-start-3 col-span-full justify-self-center text-sm font-semibold text-amber-400 uppercase">{{
           osVersionCurrent
@@ -49,7 +49,7 @@
         </div>
 
         <span class="col-start-2 col-span-full text-md font-semibold text-gray-300">{{
-          $t("updateServer.availServerOsUpdate")
+          t("updateServer.availServerOsUpdate")
         }}</span>
       </div>
 
@@ -72,15 +72,17 @@
               'opacity-40 pointer-events-none bg-[#3d4244] scale-95':
                 serverStore.isUpdateProcessing || serverStore.isMajorUpgradeActive,
             }"
+            @mouseenter="footerStore.cursorLocation = `${t('osUpdate.updateAll')} `"
+            @mouseleave="footerStore.cursorLocation = ''"
             @click.prevent="updateAll"
           >
-            <span class="text-gray-100 text-sm font-semibold uppercase">{{ $t("updatePanel.all") }}</span>
+            <span class="text-gray-100 text-sm font-semibold uppercase">{{ t("updatePanel.all") }}</span>
             <img class="w-4" src="/img/icon/base-header-icons/update-modal-download.png" alt="icon" />
           </div>
         </div>
         <div class="w-full h-full col-start-7 col-span-full flex justify-center items-center p-1">
           <span class="text-gray-200 text-md font-semibold"
-            >{{ $t("updatePanel.auto") }} :
+            >{{ t("updatePanel.auto") }} :
             <span class="text-md uppercase font-semibold" :class="onOff">{{ stereumApp.autoUpdate }}</span></span
           >
         </div>
@@ -94,7 +96,12 @@ import UpdateRow from "./UpdateRow.vue";
 import ControlService from "@/store/ControlService";
 import { ref, onMounted, computed, reactive, watchEffect } from "vue";
 import { useServers } from "@/store/servers";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
 
+const t = i18n.global.t;
+
+const footerStore = useFooter();
 const serverStore = useServers();
 
 const osVersionCurrent = ref("");
diff --git a/launcher/src/components/UI/server-management/components/ssh-management/SshManagement.vue b/launcher/src/components/UI/server-management/components/ssh-management/SshManagement.vue
index 9b69a5b30..98a2c9efc 100644
--- a/launcher/src/components/UI/server-management/components/ssh-management/SshManagement.vue
+++ b/launcher/src/components/UI/server-management/components/ssh-management/SshManagement.vue
@@ -9,12 +9,16 @@
       <button
         class="min-w-[170px] h-8 bg-teal-700 hover:bg-teal-900 rounded-full px-2 flex justify-center items-center active:scale-95 active:shadow-none shadow-lg shadow-black transition duration-150 ease-in-out"
         @click="generateModal"
+        @mouseenter="footerStore.cursorLocation = `${t('sshManage.genSshKey')}`"
+        @mouseleave="footerStore.cursorLocation = ''"
       >
         <span class="text-[12px] font-semibold text-gray-100">{{ $t("multiServer.createNewKey") }}</span>
       </button>
       <label
         for="ssh"
         class="min-w-[170px] h-8 bg-teal-700 hover:bg-teal-900 rounded-full px-2 flex justify-center items-center active:scale-95 active:shadow-none shadow-lg shadow-black transition duration-150 ease-in-out cursor-pointer"
+        @mouseenter="footerStore.cursorLocation = `${t('sshManage.addkey')}`"
+        @mouseleave="footerStore.cursorLocation = ''"
       >
         <input id="ssh" type="file" name="sshFile" accept=".pub" class="hidden" @change="fileUpload" />
         <span class="text-[12px] font-semibold text-gray-100"> {{ $t("multiServer.addExistingKey") }}</span>
@@ -31,10 +35,15 @@
 <script setup>
 import SshRow from "./SshRow.vue";
 import { useServers } from "@/store/servers";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
 
 const emit = defineEmits(["fileUpload", "deleteKey"]);
 
 const serverStore = useServers();
+const footerStore = useFooter();
 
 const generateModal = () => {
   serverStore.isGenerateModalActive = true;
diff --git a/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactoSetupBox.vue b/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactoSetupBox.vue
index 66ac4a51e..3289af7df 100644
--- a/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactoSetupBox.vue
+++ b/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactoSetupBox.vue
@@ -30,6 +30,8 @@
         v-if="props.timeBased"
         class="send-btn w-16 h-[95%] rounded-xl text-xs uppercase bg-teal-700 hover:bg-teal-900 flex justify-center items-center text-gray-100 cursor-pointer absolute right-[1px]"
         @click="sendCode"
+        @mouseenter="footerStore.cursorLocation = `${t('twoFactor.send')} `"
+        @mouseleave="footerStore.cursorLocation = ''"
       >
         <span>{{ t("twoFactorAuth.send") }}</span>
       </div>
@@ -53,6 +55,8 @@
     <div
       class="barcode-box w-full h-full flex justify-center items-center col-start-10 col-span-full row-start-2 row-span-full cursor-pointer"
       @click="barcodeModal"
+      @mouseenter="footerStore.cursorLocation = `${t('twoFactor.zoomQr')} `"
+      @mouseleave="footerStore.cursorLocation = ''"
     >
       <img
         :src="props.barcode ? props.barcode : '/img/icon/base-header-icons/notification-modal-dummy-qr-code.png'"
@@ -65,11 +69,13 @@
 <script setup>
 import { useTwoFactorAuth } from "@/store/twoFactorAuth";
 import i18n from "@/includes/i18n";
+import { useFooter } from "@/store/theFooter";
 
 const t = i18n.global.t;
 
 const wait = t("twoFactorAuth.wait");
 
+const footerStore = useFooter();
 const authStore = useTwoFactorAuth();
 
 const emit = defineEmits(["sendCode"]);
@@ -82,6 +88,7 @@ const props = defineProps({
 
 const barcodeModal = () => {
   authStore.isBarcodeModalActive = true;
+  footerStore.cursorLocation = "";
 };
 
 const sendCode = () => {
diff --git a/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactorAuth.vue b/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactorAuth.vue
index d8a88cb4b..18293a0d5 100644
--- a/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactorAuth.vue
+++ b/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactorAuth.vue
@@ -8,6 +8,8 @@
       class="row-start-7 row-span-1"
       btn-name="Setup"
       @btnClick="enableTwoFactor"
+      @mouseenter="footerStore.cursorLocation = `${t('twoFactor.setup')} `"
+      @mouseleave="footerStore.cursorLocation = ''"
     />
     <div
       v-if="!twoFactorIsEnabled && !twoFactorSetupIsActive && !configured2fa"
@@ -26,6 +28,8 @@
       :class="['row-start-2 ', 'remove-btn', removeTwoFactorActive ? 'disabled' : '']"
       :btn-name="`${rem2fa}`"
       @btnClick="removeTwoFactor"
+      @mouseenter="footerStore.cursorLocation = `${t('twoFactor.rem')} `"
+      @mouseleave="footerStore.cursorLocation = ''"
     />
     <TwoFactorCheckLine
       v-if="twoFactorIsEnabled"
@@ -33,6 +37,8 @@
       class="row-start-2"
       :check-text="`${timeBased}`"
       @update="timaBaseActive"
+      @mouseenter="footerStore.cursorLocation = `${t('twoFactor.timeBase')} `"
+      @mouseleave="footerStore.cursorLocation = ''"
     />
     <TwoFactorCheckLine
       v-if="twoFactorIsEnabled"
@@ -41,6 +47,8 @@
       :check-text="`${increaseTime}`"
       :multi-line="true"
       @update="orgGenTimeLimit"
+      @mouseenter="footerStore.cursorLocation = `${t('twoFactor.timeLimit')} `"
+      @mouseleave="footerStore.cursorLocation = ''"
     />
     <TwoFactorCheckLine
       v-if="twoFactorIsEnabled"
@@ -48,6 +56,8 @@
       class="row-start-5"
       :check-text="`${rateLimit}`"
       @update="rateLimiting"
+      @mouseenter="footerStore.cursorLocation = `${t('twoFactor.rateLimit')} `"
+      @mouseleave="footerStore.cursorLocation = ''"
     />
     <!-- barcode and secret-key are passed as props to TwoFactoSetupBox and they have to bind ':' before theme to bind, at the moment is 
     hardcoded to test -->
@@ -70,6 +80,8 @@
       v-if="twoFactorSetupIsActive && secretKey"
       :class="['row-start-9', !authStore.validVerificationCode ? 'disabled' : '']"
       @save-backup="onSaveScratch"
+      @mouseenter="footerStore.cursorLocation = `${t('twoFactor.confirm')} `"
+      @mouseleave="footerStore.cursorLocation = ''"
     />
     <div
       v-if="twoFactorSetupIsActive && secretKey"
@@ -82,6 +94,8 @@
       :class="['row-start-13', 'col-start-8', twoFactorSetupIsActive && !authStore.scratchCodeSaved ? 'disabled' : '']"
       :btn-name="`${t('twoFactorAuth.nxt')}`"
       @btnClick="startSetup"
+      @mouseenter="footerStore.cursorLocation = `${t('twoFactor.next')} `"
+      @mouseleave="footerStore.cursorLocation = ''"
     />
     <TwoFactorBtn
       v-if="twoFactorSetupIsActive"
@@ -92,6 +106,8 @@
       ]"
       :btn-name="`${t('twoFactorAuth.conf')}`"
       @btnClick="startSetup"
+      @mouseenter="footerStore.cursorLocation = `${t('twoFactor.confirm')} `"
+      @mouseleave="footerStore.cursorLocation = ''"
     />
   </div>
 </template>
@@ -108,6 +124,7 @@ import ControlService from "@/store/ControlService";
 import { saveAs } from "file-saver";
 import { useRouter } from "vue-router";
 import i18n from "@/includes/i18n";
+import { useFooter } from "@/store/theFooter";
 
 const t = i18n.global.t;
 
@@ -128,6 +145,7 @@ const rateLimit = t("twoFactorAuth.rateLimit");
 const router = useRouter();
 const authStore = useTwoFactorAuth();
 const controlStore = useControlStore();
+const footerStore = useFooter();
 //enable two factor authentication
 const twoFactorIsEnabled = ref(false);
 //setup two factor authentication
@@ -157,10 +175,12 @@ onUnmounted(() => {
 //function to enable two factor authentication
 const enableTwoFactor = () => {
   twoFactorIsEnabled.value = true;
+  footerStore.cursorLocation = "";
 };
 
 //setup button functions
 const startSetup = async () => {
+  footerStore.cursorLocation = "";
   if (twoFactorIsEnabled.value) {
     //first check box value to enable time based authentication
     twoFactorIsEnabled.value = false;
@@ -261,6 +281,7 @@ const checkAuth = async () => {
 };
 
 const removeTwoFactor = async () => {
+  footerStore.cursorLocation = "";
   if (!removeTwoFactorActive.value) {
     removeTwoFactorActive.value = true;
     await ControlService.removeAuthenticator();
diff --git a/launcher/src/components/UI/the-control/PeerToPeer.vue b/launcher/src/components/UI/the-control/PeerToPeer.vue
index 057386cc6..0dedb56a9 100755
--- a/launcher/src/components/UI/the-control/PeerToPeer.vue
+++ b/launcher/src/components/UI/the-control/PeerToPeer.vue
@@ -103,7 +103,7 @@ export default {
         return [];
       }
 
-      const setupServices = this.selectedSetup.services.map((service) => service.service);
+      const setupServices = this.selectedSetup?.services.map((service) => service.service);
 
       const filtered = this.p2pstatus.data.filter((status) => {
         const consensusService = status.details.consensus.service;
@@ -182,7 +182,7 @@ export default {
       let clients = this.filteredP2PStatus[gid] || false;
 
       if (!clients) {
-        console.log("No clients found for the current page.");
+        // console.log("No clients found for the current page.");
         return;
       }
 
diff --git a/launcher/src/components/UI/the-control/SyncStatus.vue b/launcher/src/components/UI/the-control/SyncStatus.vue
index b10bb34f0..77aaf90e5 100755
--- a/launcher/src/components/UI/the-control/SyncStatus.vue
+++ b/launcher/src/components/UI/the-control/SyncStatus.vue
@@ -331,7 +331,7 @@ export default {
       let clients = this.filteredSyncStatus[gid] || false;
 
       if (!clients) {
-        console.log("No clients found for the current page.");
+        // console.log("No clients found for the current page.");
         this.syncItemsShow = false;
         return;
       }
diff --git a/launcher/src/components/UI/the-node/ResyncSeparateServices.vue b/launcher/src/components/UI/the-node/ResyncSeparateServices.vue
deleted file mode 100755
index d34b43157..000000000
--- a/launcher/src/components/UI/the-node/ResyncSeparateServices.vue
+++ /dev/null
@@ -1,546 +0,0 @@
-<template>
-  <div class="resync-modal_parent">
-    <div class="bg-dark" @click="$emit('closeWindow')"></div>
-    <div class="browser-modal">
-      <div class="resync-icon">
-        <img src="/img/icon/plugin-menu-icons/resync.png" alt="" />
-      </div>
-      <div class="resync-message">
-        <div>
-          <span>{{ $t("resyncSeparateService.message") }}</span>
-        </div>
-        <div class="resync-message_nameId">
-          <span>{{ item.name }} - [{{ item.config.serviceID }}]</span>
-        </div>
-        <div>
-          <span>
-            {{ item.category === "consensus" ? "choose what" : "genesis" }}
-            {{ $t("resyncSeparateService.msgPartTwo") }}</span
-          >
-        </div>
-      </div>
-      <div class="resync-box">
-        <carousel
-          ref="carousel"
-          v-model="currentSlide"
-          :items-to-show="1"
-          :wrap-around="true"
-          :transition="500"
-          :class="{ disabled: item.category === 'execution' }"
-        >
-          <slide v-for="(Stype, index) in syncType" :key="index">
-            <div class="syncBox">
-              <div v-if="Stype.type === 'Syncs from genesis' || item.category === 'execution'" class="syncContent">
-                <div class="syncText">
-                  <span>{{ Stype.name }}</span>
-                  <span>{{ Stype.type }}</span>
-                </div>
-              </div>
-              <div v-else-if="Stype.type === 'custom source' && item.category === 'consensus'" class="syncContent">
-                <div class="syncText">
-                  <span>{{ Stype.name }}</span>
-                  <span>{{ Stype.type }}</span>
-                </div>
-                <div class="inputBox">
-                  <input
-                    id="url-input"
-                    v-model="checkPointSync"
-                    type="text"
-                    placeholder="https://example.cc/"
-                    @input="validateUrl"
-                  />
-                </div>
-              </div>
-              <div v-else-if="Stype.type === 'recommended' && item.category === 'consensus'" class="syncContent">
-                <div class="syncText">
-                  <span>{{ Stype.name }}</span>
-                  <span>{{ Stype.type }}</span>
-                </div>
-                <div class="inputBox_select-box">
-                  <div v-if="selectedItem == '- SELECT A SOURCE -'" class="select-button" @click="tglDropdown">
-                    {{ selectedItem }}
-                  </div>
-                  <div v-else class="wrapper">
-                    <div v-if="selectedIcon !== ''" class="icon-box" @click="tglDropdown">
-                      <img :src="selectedIcon" :alt="selectedItem" />
-                    </div>
-                    <div v-if="selectedIcon !== ''" class="selected-item" @click="tglDropdown">
-                      {{ selectedItem }}
-                    </div>
-                    <div v-else class="w-selected" @click="tglDropdown">
-                      {{ selectedItem }}
-                    </div>
-                    <div class="openURL" @click="handleOpenWindow">
-                      <img src="/img/icon/service-icons/internet.png" alt="Internet" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </slide>
-
-          <template v-if="item.category === 'consensus'" #addons>
-            <navigation />
-          </template>
-        </carousel>
-        <div v-if="drpDown" class="selection-column-modal">
-          <ul class="link-wapper">
-            <li v-for="link in selectedLinks" :key="link" class="option-row" @click="linkPicker(link)">
-              <div class="iconSelector"><img :src="link.icon" alt="" /></div>
-              <div class="nameSelector">
-                <span>{{ link.name }}</span>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="resync-confirm deactive" :class="{ active: btnActive }">resync</div>
-      <div class="error">
-        <span v-if="error">{{ error }}</span>
-      </div>
-      <div class="resync-confirm deactive" :class="{ active: btnActive }" @click="resync(item)">
-        {{ $t("resyncSeparateService.resync") }}
-      </div>
-      <span class="clickOut">{{ $t("resyncSeparateService.close") }}</span>
-    </div>
-  </div>
-</template>
-<script>
-import { mapWritableState } from "pinia";
-import { useClickInstall } from "@/store/clickInstallation";
-import { useNodeManage } from "@/store/nodeManage";
-import "vue3-carousel/dist/carousel.css";
-import { Carousel, Slide, Navigation } from "vue3-carousel";
-import ControlService from "@/store/ControlService";
-
-export default {
-  components: {
-    Carousel,
-    Slide,
-    Navigation,
-  },
-  props: {
-    item: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      currentSlide: 0,
-      btnActive: true,
-      checkPointSync: "",
-      serviceID: "",
-      error: "",
-      drpDown: false,
-      selectedLinks: [],
-      selectedItem: "- SELECT A SOURCE -", // selected link to use for resync
-      prevVal: 0,
-      selectedIcon: "",
-    };
-  },
-  computed: {
-    ...mapWritableState(useClickInstall, {
-      syncType: "syncType",
-      mainnet: "mainnet",
-      sepolia: "sepolia",
-      gnosis: "gnosis",
-    }),
-    ...mapWritableState(useNodeManage, {
-      currentNetwork: "currentNetwork",
-      resyncSeparateModal: "resyncSeparateModal",
-    }),
-  },
-  watch: {
-    currentSlide(val) {
-      if (val != this.prevVal) {
-        this.prevVal = val;
-        this.checkPointSync = "";
-        this.selectedItem = "- SELECT A SOURCE -";
-        this.selectedIcon = "";
-      }
-      this.btnActive = val === 0 || this.checkPointSync !== "";
-      if (val === 2) {
-        this.btnActive = true;
-      }
-    },
-
-    checkPointSync(val) {
-      this.btnActive = val !== "" || this.currentSlide === 0;
-    },
-  },
-  mounted() {
-    if (this.item.category === "execution") this.currentSlide = 2;
-    this.setSelectedLinks();
-  },
-  methods: {
-    handleOpenWindow() {
-      let url = this.checkPointSync;
-      window.open(url, "_blank");
-    },
-    async resync(el) {
-      this.resyncSeparateModal = false;
-      await ControlService.chooseServiceAction({
-        action: "reSync",
-        service: el.config.serviceID,
-        data: this.checkPointSync,
-      });
-    },
-    validateUrl() {
-      const regex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
-      if (!this.checkPointSync) {
-        this.error = "";
-      } else if (!regex.test(this.checkPointSync)) {
-        this.error = "Please enter a valid URL without spaces";
-        this.btnActive = false;
-      } else {
-        this.error = "";
-      }
-    },
-    tglDropdown() {
-      this.drpDown = !this.drpDown;
-    },
-    linkPicker(item) {
-      this.selectedItem = item.name;
-      this.selectedIcon = item.icon;
-      this.checkPointSync = item.url;
-      this.drpDown = false;
-      this.btnActive = true;
-    },
-    setSelectedLinks() {
-      switch (this.currentNetwork.id) {
-        case 1:
-          this.selectedLinks = this.mainnet;
-          break;
-
-        case 2:
-          this.selectedLinks = this.sepolia;
-          break;
-        case 3:
-          this.selectedLinks = this.gnosis;
-          break;
-        case 4:
-          this.selectedLinks = this.holesky;
-          break;
-        default:
-          break;
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.inputBox_select-box {
-  width: 59%;
-  height: 120%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.wrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.icon-box {
-  width: 20%;
-  height: 90%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #151a1e;
-  border: 2px solid rgb(161, 161, 161);
-  border-radius: 10px;
-  overflow: hidden;
-  cursor: pointer;
-}
-.icon-box img {
-  width: 92%;
-  height: 95%;
-}
-.selected-item {
-  width: 58%;
-  height: 90%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #151a1e;
-  border: 2px solid #a1a1a1;
-  border-radius: 10px;
-  color: #c1c1c1;
-  font-size: 80%;
-  font-weight: 600;
-  cursor: pointer;
-}
-.w-selected {
-  width: 80%;
-  height: 90%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #151a1e;
-  border: 2px solid #c1c1c1;
-  border-radius: 10px;
-  color: #c1c1c1;
-  font-size: 100%;
-  font-weight: 600;
-  cursor: pointer;
-}
-.openURL {
-  width: 15%;
-  height: 95%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-.openURL img {
-  width: 90%;
-  height: 65%;
-}
-.openURL:active {
-  transform: scale(0.9);
-}
-.select-button {
-  border: none;
-  width: 100%;
-  height: 80%;
-  border-radius: 10px;
-  color: #c1c1c1;
-  background: #151a1e;
-  font-size: 80%;
-  font-weight: 500;
-  cursor: pointer;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.select-button:hover {
-  border: none;
-  color: #c1c1c1;
-  box-sizing: border-box;
-  border: 2px solid #c1c1c1;
-}
-
-.select span {
-  display: flex;
-  width: 55%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  font-size: 100%;
-  font-weight: 600;
-}
-.selected-icon {
-  width: 40%;
-  height: 120%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-.selected-icon img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-.selection-column-modal {
-  width: 32%;
-  height: 50%;
-  display: flex;
-  background: #1258a2;
-  color: #d5d5d5;
-  font-weight: 400;
-  position: absolute;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  top: 75%;
-  left: 46%;
-  z-index: 500;
-  border-radius: 0 0 10px 10px;
-}
-.link-wapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-  justify-content: flex-start;
-  align-items: flex-start;
-  border-radius: 0 0 10px 10px;
-}
-.option-row {
-  width: 100%;
-  height: 30%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 100%;
-  font-weight: 600;
-  padding: 1%;
-  margin-bottom: 1%;
-  border-bottom: 1px solid #d5d5d5;
-  flex-shrink: 0;
-  flex-grow: 0;
-  overflow-x: auto;
-  cursor: pointer;
-  color: #c1c1c1;
-}
-.iconSelector {
-  width: 25%;
-  height: 90%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 2%;
-}
-.nameSelector {
-  width: 75%;
-  height: 90%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  font-size: 85%;
-}
-.iconSelector img {
-  width: 70%;
-}
-.option-row:hover {
-  background-color: #c1c1c1;
-  color: #1258a2;
-}
-.option-row span {
-  white-space: nowrap;
-}
-
-::-webkit-scrollbar-track {
-  background: none;
-}
-
-::-webkit-scrollbar-thumb {
-  background: none;
-}
-.error {
-  color: red;
-  width: 90%;
-  height: 4%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 50%;
-}
-.disabled {
-  pointer-events: none;
-}
-.clickOut {
-  font-size: 70%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 6%;
-  color: red;
-  position: absolute;
-  bottom: 0;
-}
-.resync-modal_parent {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 300;
-}
-.bg-dark {
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  opacity: 0.3;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 202;
-  cursor: default;
-}
-.browser-modal {
-  width: 50%;
-  height: 55%;
-  background-color: #212122;
-  border: 5px solid rgb(161, 161, 161);
-  border-radius: 70px;
-  position: absolute;
-  top: 24%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 1050;
-  cursor: default;
-}
-
-.resync-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 95%;
-  height: 25%;
-}
-.resync-icon img {
-  width: 11%;
-}
-.resync-message {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  width: 100%;
-  height: 30%;
-  flex-direction: column;
-  font-size: 80%;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: #eee;
-}
-.resync-message_nameId {
-  font-size: 130%;
-  font-weight: 800;
-}
-.resync-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 95%;
-  height: 18%;
-}
-.resync-confirm {
-  width: 40%;
-  height: 12%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: red;
-  font-size: 100%;
-  text-transform: uppercase;
-  font-weight: 700;
-  border-radius: 15px;
-  color: #eee;
-  cursor: pointer;
-}
-.resync-confirm:active {
-  transform: scale(0.9);
-}
-.deactive {
-  opacity: 50%;
-  pointer-events: none;
-}
-.active {
-  opacity: 1;
-  pointer-events: visible;
-}
-</style>
diff --git a/launcher/src/components/layers/TheFooter.vue b/launcher/src/components/layers/TheFooter.vue
index b38817fa0..bce06c875 100644
--- a/launcher/src/components/layers/TheFooter.vue
+++ b/launcher/src/components/layers/TheFooter.vue
@@ -24,7 +24,7 @@
     <div
       class="col-start-7 col-span-full rounded-full text-sm text-gray-200 capitalize z-20 flex justify-start items-center"
     >
-      <span class="w-1/2 text-xs font-sans ml-2">{{ footerStore.cursorLocation }}</span>
+      <span class="w-full text-xs font-sans ml-2">{{ footerStore.cursorLocation }}</span>
     </div>
   </div>
 </template>
diff --git a/launcher/src/languages/en.json b/launcher/src/languages/en.json
index 71ec09ef3..c32078227 100755
--- a/launcher/src/languages/en.json
+++ b/launcher/src/languages/en.json
@@ -999,5 +999,57 @@
     "turnoff": "Turn off the {service}",
     "restart": "Restart the {service}",
     "log": "Open the logs of the {service}"
+  },
+  "serverDetail": {
+    "serverName": "Server Name is {serverName}",
+    "serverIp": "Server IP is {serverIp}",
+    "machine": "Machine Name is {machineName}",
+    "port": "Port is {port}",
+    "userName": "Username is {userName}",
+    "chngAvatar": "Click to change the avatar",
+    "chngPass": "Click to change the password",
+    "confirmPass": "Please enter a password to change it",
+    "confirmPass2": "Please enter the password again",
+    "confirmBtn": "click to change your password",
+    "cancel": "cancel password change"
+  },
+  "serverList": {
+    "search": "Search for a saved server",
+    "addServer": "Add a new server connection"
+  },
+  "loginForm": {
+    "addServerName": "Add a server name",
+    "ipOrHost": "IP or Hostname",
+    "port": "default port is 22 but you can change it",
+    "uName": "Username",
+    "pass": "enter your password",
+    "tgll": "toggle to SSH key or password",
+    "save": "save added server",
+    "rem": "remove server"
+  },
+  "sshManage": {
+    "genSshKey": "Generate SSH Key",
+    "addkey": "add an existing key"
+  },
+  "osUpdate": {
+    "updateBtn": "Ready to update “{name}” to the new version “{version}”",
+    "updateAll": "Update all available updates"
+  },
+  "serverSetting": {
+    "nodeServerTtl": "NODE & SERVER SETTINGS",
+    "auto": "Automated Node Updates",
+    "tgl": "Toggle to enable or disable automated node updates"
+  },
+  "twoFactor": {
+    "setup": "agree to the terms and conditions",
+    "timeBase": "check if you want authentication tokens to be time-based",
+    "timeLimit": "check if you want to increase the original generation time limit to permit a time skew of up to 4 minutes",
+    "rateLimit": "check if you want to enable rate-limiting",
+    "next": "if you already check configuration click next",
+    "backUp": "do a backup by pressing the save button",
+    "confirm": "click confirm to activate 2FA",
+    "rem": "click to remove 2FA",
+    "send": "click to send the verification code",
+    "zoomQr": "click to zoom in the QR code"
   }
 }