diff --git a/launcher/src/components/UI/control-page/components/fragments/ValidatorItem.vue b/launcher/src/components/UI/control-page/components/fragments/ValidatorItem.vue
new file mode 100644
index 000000000..c446c8a16
--- /dev/null
+++ b/launcher/src/components/UI/control-page/components/fragments/ValidatorItem.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="val-client flex h-[90%] w-1/5 flex-col">
+    <div
+      class="icon-box w-full h-3/4 flex justify-center items-center mb-1"
+      @mouseenter="$emit('mouseenter-name')"
+      @mouseleave="$emit('mouseleave-name')"
+    >
+      <img class="w-10 h-10" :src="props.validator.icon" :alt="props.validator.name" />
+    </div>
+    <div class="key-count w-full h-1/4 flex justify-center items-center">
+      <div
+        class="status-val h-2 w-2 flex rounded-lg"
+        :class="props.validator.state === 'running' ? 'bg-green-500' : 'bg-red-500'"
+        @mouseenter="$emit('mouseenter-state')"
+        @mouseleave="$emit('mouseleave-state')"
+      />
+      <span
+        class="w-3/4 h-full flex justify-center items-center font-semibold text-gray-200 text-xs"
+        @mouseenter="$emit('mouseenter-keyCount')"
+        @mouseleave="$emit('mouseleave-keyCount')"
+      >
+        {{ props.keyCount }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  validator: Object,
+  keyCount: Number,
+});
+</script>
diff --git a/launcher/src/components/UI/control-page/components/widgets/ConnectedValidatorWidget.vue b/launcher/src/components/UI/control-page/components/widgets/ConnectedValidatorWidget.vue
index 3e0002387..c72de5aa4 100644
--- a/launcher/src/components/UI/control-page/components/widgets/ConnectedValidatorWidget.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/ConnectedValidatorWidget.vue
@@ -1,38 +1,20 @@
 <template>
   <div class="connected-val-parent flex w-full h-full flex-col p-1">
     <div class="val-box flex w-full h-5/6 justify-start items-center gap-1">
-      <!-- items start -->
-      <div v-for="validator in setupStore.relatedValidators" :key="validator" class="val-client flex h-[90%] w-1/5 flex-col">
-        <div
-          class="icon-box w-full h-3/4 flex justify-center items-center mb-1"
-          @mouseenter="footerStore.cursorLocation = `${validator.name}`"
-          @mouseleave="footerStore.cursorLocation = ''"
-        >
-          <img class="w-10 h-10" :src="validator.icon" :alt="validator.name" />
-        </div>
-        <div class="key-count w-full h-1/4 flex justify-center items-center">
-          <div
-            class="status-val h-2 w-2 flex rounded-lg"
-            :class="validator.state == 'running' ? 'bg-green-500' : 'bg-red-500'"
-            @mouseenter="footerStore.cursorLocation = `${validator.state}`"
-            @mouseleave="footerStore.cursorLocation = ''"
-          />
-          <span
-            class="w-3/4 h-full flex justify-center items-center font-semibold text-gray-200 text-xs"
-            @mouseenter="
-              footerStore.cursorLocation = `${t('controlPage.keyImported', {
-                imported: getKeyCount(validator),
-                key: getKeyCount(validator) > 1 ? 'keys' : 'key',
-                isAre: getKeyCount(validator) > 1 ? 'are' : 'is',
-              })}`
-            "
-            @mouseleave="footerStore.cursorLocation = ''"
-            >{{ getKeyCount(validator) }}</span
-          >
-        </div>
-      </div>
-      <!-- items end -->
+      <ValidatorItem
+        v-for="validator in relatedValidators"
+        :key="validator.config.serviceID"
+        :validator="validator"
+        :key-count="getKeyCount(validator)"
+        @mouseenter-name="setCursor(validator.name)"
+        @mouseleave-name="clearCursor"
+        @mouseenter-state="setCursor(validator.state)"
+        @mouseleave-state="clearCursor"
+        @mouseenter-key-count="setCursorKeyCount(validator)"
+        @mouseleave-key-count="clearCursor"
+      />
     </div>
+
     <div class="widget-name flex w-full h-1/6 justify-center items-center uppercase text-gray-200 text-[50%] font-semibold">
       {{ t("controlPage.connectValWidg") }}
     </div>
@@ -40,11 +22,12 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
 import { useSetups } from "@/store/setups";
 import { useStakingStore } from "@/store/theStaking";
 import { useFooter } from "@/store/theFooter";
-
 import i18n from "@/includes/i18n";
+import ValidatorItem from "../fragments/ValidatorItem.vue";
 
 const t = i18n.global.t;
 
@@ -52,12 +35,31 @@ const footerStore = useFooter();
 const setupStore = useSetups();
 const stakingStore = useStakingStore();
 
+const relatedValidators = computed(() => setupStore.relatedValidators || []);
+
 const getKeyCount = (validator) => {
   if (!validator || stakingStore.keys.length === 0) {
     return 0;
   }
   return stakingStore.keys.filter((key) => key.validatorID === validator.config.serviceID).length;
 };
-</script>
 
-<style scoped></style>
+const setCursor = (info) => {
+  footerStore.cursorLocation = info;
+};
+
+const clearCursor = () => {
+  footerStore.cursorLocation = "";
+};
+
+const setCursorKeyCount = (validator) => {
+  const count = getKeyCount(validator);
+  const keyLabel = count > 1 ? "keys" : "key";
+  const isAre = count > 1 ? "are" : "is";
+  footerStore.cursorLocation = t("controlPage.keyImported", {
+    imported: count,
+    key: keyLabel,
+    isAre: isAre,
+  });
+};
+</script>