ADD: parent & child nested components

launcher/public/output.css

@@ -2483,6 +2483,12 @@ video {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.divide-y-2 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
+}
+
 .divide-gray-300 > :not([hidden]) ~ :not([hidden]){
   --tw-divide-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-divide-opacity));
@@ -2503,6 +2509,11 @@ video {
   border-color: rgb(55 65 81 / var(--tw-divide-opacity));
 }
 
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
 .self-start{
   -ms-flex-item-align: start;
       align-self: flex-start;

launcher/src/components/UI/multi-server/components/ManagementParent.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="w-full h-full col-start-1 col-end-10 row-start-1 row-span-full grid grid-cols-12 grid-rows-12 p-2"
+  >
+    <ServerDetails />
+    <SshManagement />
+  </div>
+</template>
+
+<script setup>
+import ServerDetails from "./ServerDetails.vue";
+import SshManagement from "./SshManagement.vue";
+</script>

launcher/src/components/UI/multi-server/components/SavedServers.vue

@@ -1,3 +1,13 @@
 <template>
-  <div>Saved Server</div>
+  <div
+    class="col-start-11 col-span-full row-start-1 row-span-full p-2 grid grid-cols-12 grid-rows-12 items-center"
+  >
+    <div
+      class="col-start-1 col-span-full row-start-1 row-span-1 flex justify-start items-center"
+    >
+      <span>SAVED SERVER CONNECTIONS</span>
+    </div>
+
+    <div class="col-start-1 col-span-full row-start-2 row-span-full">saved servers</div>
+  </div>
 </template>

launcher/src/components/UI/multi-server/components/ServerBody.vue

@@ -1,7 +1,20 @@
 <template>
   <div
-    class="w-full h-full col-start-1 col-span-full row-start-2 row-span-full grid grid-cols-24 grid-rows-12"
+    class="w-full h-full col-start-1 col-span-full row-start-2 row-span-full grid grid-cols-24 grid-rows-12 p-2 divide-y-2 divide-gray-200"
   >
-    Body
+    <div
+      class="col-start-1 col-end-10 row-start-1 row-span-full p-1 grid grid-cols-12 grid-rows-12"
+    >
+      <LoginBox v-if="isServerLoginActive" />
+      <ManagementParent v-if="isServerManagementActive" />
+    </div>
+
+    <SavedServers />
   </div>
 </template>
+
+<script setup>
+import SavedServers from "./SavedServers.vue";
+import LoginBox from "./LoginBox.vue";
+import ManagementParent from "./ManagementParent.vue";
+</script>

launcher/src/store/nodeHeader.js

@@ -3,6 +3,8 @@ export const useNodeHeader = defineStore("nodeHeader", {
   state: () => {
     return {
       isServerAccessManagementActive: false,
+      isServerLoginActive: false,
+      isServerManagementActive: true,
       importBoxModel: "",
       passwordBoxModel: "",
       selectedValidatorFromNodeAlert: {},