diff --git a/launcher/public/img/icon/stereum-logo/stereum-logo-2.png b/launcher/public/img/icon/stereum-logo/stereum-logo-2.png
new file mode 100755
index 000000000..801856b51
Binary files /dev/null and b/launcher/public/img/icon/stereum-logo/stereum-logo-2.png differ
diff --git a/launcher/public/img/icon/welcome-page/dislike.png b/launcher/public/img/icon/welcome-page/dislike.png
index ff2a5bb3f..6e14106d2 100755
Binary files a/launcher/public/img/icon/welcome-page/dislike.png and b/launcher/public/img/icon/welcome-page/dislike.png differ
diff --git a/launcher/public/img/icon/welcome-page/like.png b/launcher/public/img/icon/welcome-page/like.png
index 2c1312605..5d85ead8c 100755
Binary files a/launcher/public/img/icon/welcome-page/like.png and b/launcher/public/img/icon/welcome-page/like.png differ
diff --git a/launcher/public/output.css b/launcher/public/output.css
index 037c32ec1..a540dbe95 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -515,7 +515,7 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-::-webkit-backdrop{
+::-ms-backdrop{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -796,6 +796,10 @@ video {
   right: 0.25rem;
 }
 
+.right-10{
+  right: 2.5rem;
+}
+
 .right-2{
   right: 0.5rem;
 }
@@ -824,10 +828,18 @@ video {
   top: 0.25rem;
 }
 
+.top-10{
+  top: 2.5rem;
+}
+
 .top-\[-18px\]{
   top: -18px;
 }
 
+.top-\[-2px\]{
+  top: -2px;
+}
+
 .z-0{
   z-index: 0;
 }
@@ -940,10 +952,18 @@ video {
   grid-column-end: 2;
 }
 
+.col-end-20{
+  grid-column-end: 20;
+}
+
 .col-end-21{
   grid-column-end: 21;
 }
 
+.col-end-23{
+  grid-column-end: 23;
+}
+
 .col-end-25{
   grid-column-end: 25;
 }
@@ -988,6 +1008,10 @@ video {
   grid-row-start: 1;
 }
 
+.row-start-11{
+  grid-row-start: 11;
+}
+
 .row-start-12{
   grid-row-start: 12;
 }
@@ -1614,6 +1638,10 @@ video {
   max-width: 32rem;
 }
 
+.max-w-xs{
+  max-width: 20rem;
+}
+
 .flex-auto{
   -webkit-box-flex: 1;
       -ms-flex: 1 1 auto;
@@ -1984,6 +2012,11 @@ video {
       align-self: flex-start;
 }
 
+.self-end{
+  -ms-flex-item-align: end;
+      align-self: flex-end;
+}
+
 .self-center{
   -ms-flex-item-align: center;
       align-self: center;
@@ -2043,6 +2076,10 @@ video {
   white-space: pre;
 }
 
+.break-words{
+  overflow-wrap: break-word;
+}
+
 .rounded{
   border-radius: 0.25rem;
 }
@@ -2100,6 +2137,11 @@ video {
   border-top-right-radius: 0.5rem;
 }
 
+.rounded-t-md{
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+
 .rounded-bl-\[37px\]{
   border-bottom-left-radius: 37px;
 }
@@ -2174,6 +2216,16 @@ video {
   border-color: rgb(28 54 52 / var(--tw-border-opacity));
 }
 
+.border-\[\#262626\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity));
+}
+
+.border-\[\#336666\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(51 102 102 / var(--tw-border-opacity));
+}
+
 .border-blue-100{
   --tw-border-opacity: 1;
   border-color: rgb(219 234 254 / var(--tw-border-opacity));
@@ -2278,6 +2330,10 @@ video {
   border-right-color: rgb(38 71 68 / var(--tw-border-opacity));
 }
 
+.border-r-transparent{
+  border-right-color: transparent;
+}
+
 .bg-\[\#111315\]{
   --tw-bg-opacity: 1;
   background-color: rgb(17 19 21 / var(--tw-bg-opacity));
@@ -2318,6 +2374,11 @@ video {
   background-color: rgb(25 27 30 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#1E2429\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 36 41 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#1c1d1d\]{
   --tw-bg-opacity: 1;
   background-color: rgb(28 29 29 / var(--tw-bg-opacity));
@@ -2328,6 +2389,11 @@ video {
   background-color: rgb(28 32 33 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#1d1f20\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 31 32 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#1f2123\]{
   --tw-bg-opacity: 1;
   background-color: rgb(31 33 35 / var(--tw-bg-opacity));
@@ -2353,6 +2419,11 @@ video {
   background-color: rgb(36 61 54 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#262626\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#264744\]{
   --tw-bg-opacity: 1;
   background-color: rgb(38 71 68 / var(--tw-bg-opacity));
@@ -2373,6 +2444,11 @@ video {
   background-color: rgb(46 81 81 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#303232\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(48 50 50 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#33393E\]{
   --tw-bg-opacity: 1;
   background-color: rgb(51 57 62 / var(--tw-bg-opacity));
@@ -2388,6 +2464,11 @@ video {
   background-color: rgb(51 77 77 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#336666\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 102 102 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#38504e\]{
   --tw-bg-opacity: 1;
   background-color: rgb(56 80 78 / var(--tw-bg-opacity));
@@ -2590,10 +2671,18 @@ video {
   --tw-gradient-to-position: 95%;
 }
 
+.bg-contain{
+  background-size: contain;
+}
+
 .bg-cover{
   background-size: cover;
 }
 
+.bg-fixed{
+  background-attachment: fixed;
+}
+
 .bg-center{
   background-position: center;
 }
@@ -2650,6 +2739,11 @@ video {
   padding-right: 0.5rem;
 }
 
+.px-3{
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .px-4{
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2741,6 +2835,11 @@ video {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+.text-2xl{
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-\[10px\]{
   font-size: 10px;
 }
@@ -2835,6 +2934,11 @@ video {
   color: rgb(251 191 36 / var(--tw-text-opacity));
 }
 
+.text-amber-500{
+  --tw-text-opacity: 1;
+  color: rgb(245 158 11 / var(--tw-text-opacity));
+}
+
 .text-amber-600{
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity));
@@ -3071,6 +3175,11 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.shadow-\[\#303232\]{
+  --tw-shadow-color: #303232;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .shadow-black{
   --tw-shadow-color: #000;
   --tw-shadow: var(--tw-shadow-colored);
@@ -3432,6 +3541,13 @@ html body {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.hover\:scale-110:hover{
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:scale-95:hover{
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -3594,6 +3710,23 @@ html body {
           box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:shadow-xl:hover{
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:shadow-\[\#1a1b1b\]:hover{
+  --tw-shadow-color: #1a1b1b;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.hover\:shadow-\[\#303232\]:hover{
+  --tw-shadow-color: #303232;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .hover\:brightness-110:hover{
   --tw-brightness: brightness(1.1);
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3640,6 +3773,13 @@ html body {
   --tw-ring-opacity: 0.8;
 }
 
+.active\:scale-100:active{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .active\:scale-75:active{
   --tw-scale-x: .75;
   --tw-scale-y: .75;
diff --git a/launcher/src/components/UI/node-header/ServerAccessManagement.vue b/launcher/src/components/UI/node-header/ServerAccessManagement.vue
index e38610f09..6a57292f6 100644
--- a/launcher/src/components/UI/node-header/ServerAccessManagement.vue
+++ b/launcher/src/components/UI/node-header/ServerAccessManagement.vue
@@ -10,7 +10,7 @@
           <div class="management-info_box_row">
             <span>{{ serverNam }}</span
             ><span @mouseenter="cursorLocation = serverNam" @mouseleave="cursorLocation = ''">{{
-              selectedConnection.name
+              selectedConnection?.name
             }}</span>
           </div>
           <div class="management-info_box_row">
@@ -20,7 +20,7 @@
           <div class="management-info_box_row">
             <span>{{ userNam }}</span
             ><span @mouseenter="cursorLocation = userNam" @mouseleave="cursorLocation = ''">{{
-              selectedConnection.user
+              selectedConnection?.user
             }}</span>
           </div>
         </div>
@@ -32,7 +32,7 @@
           <div class="management-info_box_row">
             <span>{{ port }}</span
             ><span @mouseenter="cursorLocation = port" @mouseleave="cursorLocation = ''">{{
-              selectedConnection.port ? selectedConnection.port : 22
+              selectedConnection?.port ? selectedConnection.port : 22
             }}</span>
           </div>
           <div class="management-info_box_row" />
diff --git a/launcher/src/components/UI/welcome-page/WelcomeScreen.vue b/launcher/src/components/UI/welcome-page/WelcomeScreen.vue
new file mode 100644
index 000000000..5c8f5ee78
--- /dev/null
+++ b/launcher/src/components/UI/welcome-page/WelcomeScreen.vue
@@ -0,0 +1,53 @@
+<template>
+  <welcome-layouts>
+    <WelcomeHeader @logout="logoutModalHandler" />
+    <ServerDetails />
+    <WelcomeBody />
+    <WelcomeFooter />
+    <LogoutModal
+      v-if="isLogoutModalActive"
+      :process="isProcessing"
+      @logout-handler="loggingOut"
+      @close-window="closeModal"
+    />
+  </welcome-layouts>
+</template>
+
+<script setup>
+import WelcomeLayouts from "./components/WelcomeLayouts.vue";
+import LogoutModal from "./components/LogoutModal.vue";
+import WelcomeHeader from "./components/WelcomeHeader.vue";
+import WelcomeBody from "./components/WelcomeBody.vue";
+import WelcomeFooter from "./components/WelcomeFooter.vue";
+import ServerDetails from "./components/ServerDetails.vue";
+import ControlService from "@/store/ControlService";
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+
+//Router
+const router = useRouter();
+
+//Refs
+const refresh = ref(false);
+const isLogoutModalActive = ref(false);
+const isProcessing = ref(false);
+
+//Methods
+
+const closeModal = () => {
+  isLogoutModalActive.value = false;
+};
+
+const logoutModalHandler = () => {
+  isLogoutModalActive.value = true;
+};
+
+const loggingOut = async () => {
+  isProcessing.value = true;
+  router.push("/").then(() => {
+    location.reload();
+  });
+  refresh.value = false;
+  await ControlService.logout();
+};
+</script>
diff --git a/launcher/src/components/UI/welcome-page/components/CardItem.vue b/launcher/src/components/UI/welcome-page/components/CardItem.vue
new file mode 100644
index 000000000..d217c120e
--- /dev/null
+++ b/launcher/src/components/UI/welcome-page/components/CardItem.vue
@@ -0,0 +1,39 @@
+import { computed } from 'vue';
+<template>
+  <router-link
+    :to="props.item.path"
+    class="w-1/4 bg-[#336666] rounded-xl p-4 flex justify-center items-center hover:scale-110 hover:shadow-xl hover:shadow-[#1a1b1b] active:scale-100 transition-all duration-300 ease-in-out"
+  >
+    <div class="" @mouseover="isHovered = true" @mouseleave="isHovered = false">
+      <img
+        class="w-full h-full border border-[#336666] rounded-xl"
+        :src="getImage"
+        alt="Card Item"
+        @mousedown.prevent
+      />
+    </div>
+  </router-link>
+</template>
+<script setup>
+import { computed, ref } from "vue";
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+
+const isHovered = ref(false);
+
+const getImage = computed(() => {
+  if (isHovered.value) return props.item.imgHover;
+  return props.item.img;
+});
+
+// const isCompatible = computed((el) => {
+//   if (process.env.NODE_ENV == "development") return !el.display;
+//   return !el.display;
+//   return false;
+// });
+</script>
diff --git a/launcher/src/components/UI/welcome-page/components/LogoutModal.vue b/launcher/src/components/UI/welcome-page/components/LogoutModal.vue
new file mode 100644
index 000000000..12d580193
--- /dev/null
+++ b/launcher/src/components/UI/welcome-page/components/LogoutModal.vue
@@ -0,0 +1,39 @@
+<template>
+  <custom-modal
+    main-title="Logging out"
+    message-text="Are you sure you want to log out?"
+    confirm-text="Logout"
+    click-outside-text="Click outside to cancel"
+    @close-window="closeWindow"
+    @confirm-action="logoutHandler"
+  >
+    <template #content>
+      <div class="w-2/3 flex justify-center items-center mx-auto p-2 mt-20">
+        <span v-if="props.process" class="text-2xl text-amber-500 font-bold text-center">Please wait . . .</span>
+        <span v-else class="text-lg text-gray-300 font-semibold text-center"
+          >You will be logged out of the Stereum Launcher. You will need to log back in to access your node.</span
+        >
+      </div>
+    </template>
+  </custom-modal>
+</template>
+<script setup>
+import CustomModal from "../../edit-page/components/modals/CustomModal.vue";
+
+const props = defineProps({
+  process: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["logoutHandler", "close-window"]);
+
+const closeWindow = () => {
+  emit("close-window");
+};
+
+const logoutHandler = () => {
+  emit("logoutHandler");
+};
+</script>
diff --git a/launcher/src/components/UI/welcome-page/components/ServerDetails.vue b/launcher/src/components/UI/welcome-page/components/ServerDetails.vue
new file mode 100644
index 000000000..64c09330c
--- /dev/null
+++ b/launcher/src/components/UI/welcome-page/components/ServerDetails.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="col-start-3 col-end-13 row-start-3 row-span-1 py-1 flex justify-between items-center space-x-2">
+    <div class="w-1/2 h-10 p-1 bg-[#1E2429] rounded-md flex justify-center items-center overflow-hidden">
+      <span class="text-md text-amber-500">{{ controlStore.ServerName }}</span>
+    </div>
+    <div class="w-1/2 h-10 p-1 bg-[#1E2429] rounded-md flex justify-center items-center overflow-hidden">
+      <span class="text-md text-amber-500">{{ controlStore.ipAddress }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useControlStore } from "@/store/theControl";
+import { onMounted } from "vue";
+import ControlService from "@/store/ControlService";
+
+const controlStore = useControlStore();
+
+//Hooks
+
+onMounted(() => {
+  updateConnectionStats();
+});
+
+//Methods
+const updateConnectionStats = async () => {
+  const stats = await ControlService.getConnectionStats();
+  controlStore.ServerName = stats.ServerName;
+  controlStore.ipAddress = stats.ipAddress;
+};
+</script>
diff --git a/launcher/src/components/UI/welcome-page/components/WelcomeBody.vue b/launcher/src/components/UI/welcome-page/components/WelcomeBody.vue
new file mode 100644
index 000000000..83f494221
--- /dev/null
+++ b/launcher/src/components/UI/welcome-page/components/WelcomeBody.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="col-start-3 col-end-23 row-start-4 row-span-6 grid grid-cols-12 grid-rows-6 p-4 bg-[#1E2429] rounded-lg">
+    <div class="col-start-1 col-end-13 row-start-1 row-end-2 w-full h-full flex justify-center items-center">
+      <span class="text-xl text-gray-300 font-normal text-center">
+        In this step you choose how you want to install your node. For beginners we recommend the One Click Installation
+        option!</span
+      >
+    </div>
+    <div class="col-start-1 col-end-13 row-start-2 row-end-7 w-full h-full flex justify-evenly items-center space-x-2">
+      <CardItem v-for="item in welStore.installationOptions" :key="item" :item="item" />
+    </div>
+  </div>
+</template>
+<script setup>
+import CardItem from "./CardItem.vue";
+import { useWelcomeStore } from "@/store/welcomePage";
+
+const welStore = useWelcomeStore();
+
+
+</script>
diff --git a/launcher/src/components/UI/welcome-page/components/WelcomeFooter.vue b/launcher/src/components/UI/welcome-page/components/WelcomeFooter.vue
new file mode 100644
index 000000000..51d7d7b48
--- /dev/null
+++ b/launcher/src/components/UI/welcome-page/components/WelcomeFooter.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="col-start-6 col-end-20 row-start-11 row-end-12 w-full h-full">
+    <div
+      v-if="active"
+      class="bg-[#1E2429] rounded-full flex justify-evenly items-center p-2 text-gray-300 font-normal text-md"
+    >
+      {{ t("installitionMenu.osCheck") }}
+      <svg
+        class="animate-spin h-5 w-5 mr-3 border-2 border-gray-200 border-r-2 border-r-transparent rounded-full"
+        viewBox="0 0 24 24"
+      ></svg>
+    </div>
+
+    <div
+      v-if="!active"
+      class="bg-[#1E2429] rounded-full flex justify-center items-center p-2 text-gray-300 font-normal text-md"
+    >
+      <img v-if="isSupported" src="/img/icon/welcome-page/like.png" alt="icon" class="w-5 h-5 mr-2" />
+      <img v-else src="/img/icon/welcome-page/dislike.png" alt="icon" class="w-5 h-5 mr-2" />
+      <span :class="{ 'text-gray-300': isSupported, 'text-red-500': !isSupported }" class="font-semibold text-md">
+        {{ message }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ControlService from "@/store/ControlService";
+import { ref, computed, onMounted } from "vue";
+import i18n from "../../../../includes/i18n";
+
+const t = i18n.global.t;
+
+const supportMessage = t("installitionMenu.osSupported");
+
+const active = ref(false);
+const isSupported = ref(false);
+const running = ref(false);
+let message = ref(null);
+
+const os = computed(() => {
+  return window.navigator.platform;
+});
+
+// Lifecycle Hooks
+
+onMounted(() => {
+  osCheck();
+  checkOsRequirements();
+});
+
+//Methods
+const osCheck = () => {
+  active.value = true;
+  setTimeout(() => {
+    if (os.value.includes("Win")) {
+      message.value = "Windows";
+      isSupported.value = true;
+    } else if (os.value.includes("Mac")) {
+      message.value = "MacOS";
+      isSupported.value = true;
+    } else if (os.value.includes("Linux")) {
+      message.value = "Linux";
+      isSupported.value = true;
+    } else {
+      message.value = "Not Supported";
+      isSupported.value = false;
+    }
+    active.value = false;
+  }, 5000);
+};
+
+const display = async (osResponse, suResponse) => {
+  const osData = await osResponse;
+  const suData = await suResponse;
+  const osName = osData && osData.hasOwnProperty("name") && osData.name ? osData.name : "";
+  const osVers = osData && osData.hasOwnProperty("version") && osData.version ? osData.version : "";
+  if (osName == "Ubuntu" && osVers == "22.04") {
+    message.value = osName.toUpperCase() + " " + supportMessage;
+    if (suData.rc) {
+      // Description of return codes (suData.rc):
+      // 1 = FAIL: user can not sudo without password!
+      // 2 = ERROR: Executed code failed to run (<errmsg>)
+      // There could also be unknown return codes that may happen on the OS!
+      // Those are usually 127 but they could also overwrite the "known" codes
+      // mentioned above. Therefore it's a good idea to parse stdout value in
+      // addition to the return code.
+      let errnum = parseInt(suData.rc);
+      let errmsg = suData.stdout.toLowerCase();
+      if (errnum === 1 && errmsg.indexOf("can not sudo without password")) {
+        // User needs to added in the sudoers file with "%<username> ALL = (ALL) NOPASSWD: ALL"
+        message.value += " BUT YOU NEED TO ENABLE PASSLESS SUDO";
+      } else if (errnum === 2 && errmsg.indexOf("code failed to run")) {
+        // We could not check due to interactive syntax error - allow install but show a warning
+        message.value += " BUT MAKE SURE TO ENABLE PASSLESS SUDO (" + errnum + ")";
+        isSupported.value = true;
+      } else {
+        // We could not check due to unknonw error - allow install but show a warning
+        message.value += " BUT MAKE SURE TO ENABLE PASSLESS SUDO (" + errnum + ")";
+        isSupported.value = true;
+      }
+    } else {
+      // OS supported, passless sudo avail - allow install :)
+      isSupported.value = true;
+    }
+  } else {
+    message.value = "UNSUPPORTED OS";
+  }
+  running.value = false;
+};
+const checkOsRequirements = async () => {
+  const osResponse = await ControlService.checkOS();
+  const suResponse = await ControlService.checkSudo();
+  display(osResponse, suResponse);
+};
+</script>
+
+<style scoped>
+.dot-flashing {
+  @apply relative top-[-2px] w-5 h-5 self-end ml-4 border-2 border-[#262626] bg-[#262626] rounded-full animate-dotFlashing;
+}
+
+@keyframes dotFlashing {
+  0%,
+  100% {
+    background-color: #262626;
+  }
+  50% {
+    background-color: #2b2b2b;
+  }
+}
+</style>
diff --git a/launcher/src/components/UI/welcome-page/components/WelcomeHeader.vue b/launcher/src/components/UI/welcome-page/components/WelcomeHeader.vue
new file mode 100644
index 000000000..c6969194c
--- /dev/null
+++ b/launcher/src/components/UI/welcome-page/components/WelcomeHeader.vue
@@ -0,0 +1,42 @@
+import { ref } from 'vue';
+<template>
+  <div class="col-start-1 col-end-25 row-start-1 row-span-1 grid grid-cols-12 p-1 bg-[#264744] rounded-t-md">
+    <div
+      class="justify-self-center col-start-4 col-end-10 row-start-1 row-span-1 self-center flex justify-center items-center"
+    >
+      <span class="text-2xl text-gray-300 font-bold uppercase">Welcome to Stereum</span>
+    </div>
+    <div
+      class="w-8 h-8 col-start-12 col-span-1 row-start-1 row-span-1 bg-[#303232] rounded-full justify-self-end self-center flex justify-center items-center p-2 border border-gray-500 shadow-md shadow-[#303232] cursor-pointer hover:shadow-lg hover:shadow-[#303232] hover:scale-110 transition-all duration-200 ease-in-out active:scale-100 relative"
+      @mouseenter="runTooltip"
+      @click="logout"
+    >
+      <img class="w-4 h-4 mx-auto" src="/img/icon/header-icons/exit9.png" alt="Logout Icon" />
+    </div>
+    <div
+      v-if="isHovered"
+      role="tooltip"
+      class="absolute top-10 right-10 max-w-xs break-words rounded bg-[#1d1f20] px-3 py-2 text-center text-xs font-medium text-white outline-none"
+    >
+      <span>Logout</span>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+
+const emit = defineEmits(["logout"]);
+const isHovered = ref(false);
+
+const runTooltip = () => {
+  isHovered.value = true;
+
+  setTimeout(() => {
+    isHovered.value = false;
+  }, 1000);
+};
+
+const logout = () => {
+  emit("logout");
+};
+</script>
diff --git a/launcher/src/components/UI/welcome-page/components/WelcomeLayouts.vue b/launcher/src/components/UI/welcome-page/components/WelcomeLayouts.vue
new file mode 100644
index 000000000..7e6e5967a
--- /dev/null
+++ b/launcher/src/components/UI/welcome-page/components/WelcomeLayouts.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="box-border w-screen h-screen border-2 border-slate-500 rounded-lg bg-[#336666]">
+    <div
+      class="w-full h-full bg-no-repeat bg-center bg-contain bg-fixed grid grid-cols-24 grid-rows-12"
+      style="background-image: url('/img/icon/stereum-logo/stereum-logo-2.png')"
+    >
+      <div
+        id="logo"
+        class="absolute left-1 top-1 w-[74px] rounded-tl-lg z-50 p-1 bg-[#537263] rounded-tr-[37px] rounded-br-[37px] rounded-bl-[37px] shadow-md shadow-[#252525]"
+        @pointerdown.prevent.stop
+        @mousedown.prevent.stop
+      >
+        <SecurityButton
+          :tooltip="tooltip"
+          @mouse-enter="mouseEnter"
+          @access-switch="accessSwitch"
+          @mouse-leave="mouseLeave"
+        />
+      </div>
+
+      <slot></slot>
+    </div>
+    <ServerAccessManagement v-if="serverAccessManagement" />
+  </div>
+</template>
+<script setup>
+import SecurityButton from "../../node-header/SecurityButton.vue";
+import ServerAccessManagement from "../../node-header/ServerAccessManagement.vue";
+import { useNodeHeader } from "@/store/nodeHeader";
+import { useFooter } from "@/store/theFooter";
+import { ref, watchEffect, computed } from "vue";
+import i18n from "../../../../includes/i18n";
+
+const t = i18n.global.t;
+
+const footerStore = useFooter();
+const headerStore = useNodeHeader();
+
+const serverAccessManagement = ref(false);
+const tooltip = ref(false);
+
+const serverAccMange = computed(() => {
+  return t("serverManagement.serverAccMange");
+});
+
+//Computed
+
+watchEffect(() => {
+  serverAccessManagement.value = headerStore.serverAccessManagement;
+});
+
+// Methods
+const mouseEnter = () => {
+  tooltip.value = true;
+  footerStore.cursorLocation = serverAccMange.value;
+};
+
+const mouseLeave = () => {
+  tooltip.value = false;
+  footerStore.cursorLocation = "";
+};
+
+const accessSwitch = () => {
+  headerStore.serverAccessManagement = !headerStore.serverAccessManagement;
+};
+</script>
+<style scoped>
+#logo {
+  animation: logoAnimation 1s ease-in-out forwards;
+}
+
+@keyframes logoAnimation {
+  0% {
+    opacity: 0;
+    transform: scale(0) translate(-300px, -300px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translate(0, 0);
+  }
+}
+</style>
diff --git a/launcher/src/pages/WelcomePage.vue b/launcher/src/pages/WelcomePage.vue
index b4236fbaf..bac3cfb70 100755
--- a/launcher/src/pages/WelcomePage.vue
+++ b/launcher/src/pages/WelcomePage.vue
@@ -1,13 +1,8 @@
 <template>
-  <background-page>
-    <installation-menu></installation-menu>
-  </background-page>
+  <WelcomeScreen />
 </template>
-<script>
-import BackgroundPage from "../components/layers/BackgroundPage.vue";
-import InstallationMenu from "../components/UI/the-welcome/InstallitionMenu.vue";
-export default {
-  components: { BackgroundPage, InstallationMenu },
-};
+
+
+<script setup>
+import WelcomeScreen from "../components/UI/welcome-page/WelcomeScreen.vue";
 </script>
-<style scoped></style>
diff --git a/launcher/src/store/welcomePage.js b/launcher/src/store/welcomePage.js
index a7fe00ed9..f8b8ef727 100755
--- a/launcher/src/store/welcomePage.js
+++ b/launcher/src/store/welcomePage.js
@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 export const useWelcomeStore = defineStore("welcomePage", {
   state: () => {
     return {
-      installation: [
+      installationOptions: [
         {
           img: "/img/icon/welcome-page/oneclick-install.png",
           imgHover: "/img/icon/welcome-page/oneclick-install-hover.png",
diff --git a/launcher/tailwind.config.js b/launcher/tailwind.config.js
index 7012bee82..6eeb178dd 100755
--- a/launcher/tailwind.config.js
+++ b/launcher/tailwind.config.js
@@ -3,6 +3,7 @@ module.exports = {
   theme: {
     extend: {
       backgroundImage: {
+   
         drop: "url('/img/icon/manage-node-icons/drag.png')",
       },
       gridTemplateRows: {