diff --git a/launcher/src/backend/Monitoring.js b/launcher/src/backend/Monitoring.js
index f37ad573b..d745bfd0a 100755
--- a/launcher/src/backend/Monitoring.js
+++ b/launcher/src/backend/Monitoring.js
@@ -1421,6 +1421,7 @@ export class Monitoring {
         details[clientType]["service"] = clt.service;
         details[clientType]["client"] = clt.service.replace(/Beacon|Service/gi, "").toUpperCase();
         details[clientType]["state"] = clt.state;
+        details[clientType]["serviceID"] = clt.config.serviceID;
         opttyp = Object.keys(services).find((key) => services[key].hasOwnProperty(clt.service));
         if (!opttyp) {
           return;
diff --git a/launcher/src/components/UI/control-page/components/fragments/ClientStatus.vue b/launcher/src/components/UI/control-page/components/fragments/ClientStatus.vue
new file mode 100644
index 000000000..09104d78b
--- /dev/null
+++ b/launcher/src/components/UI/control-page/components/fragments/ClientStatus.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="p2pBarCont">
+    <div class="titleVal">
+      <span>{{ props.clientName }}</span>
+    </div>
+    <div class="p2pVal">
+      <div class="p2pVal_value" :style="{ width: props.clientVal + '%' }"></div>
+    </div>
+    <div class="valNo">
+      <span>{{ props.clientNum }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+  clientName: {
+    type: String,
+    required: true,
+  },
+  clientVal: {
+    type: Number,
+    required: true,
+  },
+  clientNum: {
+    type: Number,
+    required: true,
+  },
+});
+</script>
+
+<style scoped>
+.p2pBarCont {
+  width: 95%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 40%;
+}
+
+.titleVal {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 40%;
+  height: 100%;
+  font-size: 42%;
+  font-weight: 600;
+  color: #c1c1c1;
+}
+
+.p2pVal {
+  width: 60%;
+  height: 80%;
+  margin-right: 5px;
+  background: #33393e;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 5px;
+  box-shadow: 1px 1px 11px 1px #1f1f1f;
+}
+
+.p2pVal_value {
+  background: #568d50;
+  height: 98%;
+}
+
+.valNo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 65%;
+  font-weight: 800;
+  width: 12%;
+  height: 100%;
+  color: #c1c1c1;
+}
+</style>
diff --git a/launcher/src/components/UI/control-page/components/widgets/PeerToPeer.vue b/launcher/src/components/UI/control-page/components/widgets/PeerToPeer.vue
index f4145a8f2..9fd10eeef 100755
--- a/launcher/src/components/UI/control-page/components/widgets/PeerToPeer.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/PeerToPeer.vue
@@ -3,274 +3,53 @@
     <div class="p2pBox">
       <div class="p2pIco">
         <div class="p2pIco-container">
-          <img :src="p2pSituation()" />
+          <img src="/img/icon/control-page-icons/PeerToPeerIcon.svg" alt="Peer to Peer Icon" />
         </div>
         <span>PEER NETWORK</span>
       </div>
       <div class="wrapper">
         <no-data
-          v-if="isConsensusMissing || prometheusIsOff || !isConsensusRunning"
-          @mouseenter="cursorLocation = `${nodataMessage}`"
+          v-if="isConsensusMissing || !footerStore.isConsensusRunning"
+          @mouseenter="cursorLocation = footerStore.nodataMessage"
           @mouseleave="cursorLocation = ''"
         />
         <div v-else class="p2pBarBox">
-          <div class="p2pBarCont">
-            <div class="titleVal">
-              <span>{{ consensusClient }}</span>
-            </div>
-            <div class="p2pVal">
-              <div class="p2pVal_value" :style="firstBar"></div>
-            </div>
-            <div class="valNo">
-              <span>{{ consensusNumPeer }}</span>
-            </div>
-          </div>
-          <div class="p2pBarCont">
-            <div class="titleVal">
-              <span>{{ executionClient }}</span>
-            </div>
-            <div class="p2pVal">
-              <div class="p2pVal_value" :style="secondBar"></div>
-            </div>
-            <div class="valNo">
-              <span>{{ executionNumPeer }}</span>
-            </div>
-          </div>
+          <ClientStatus :client-name="consensusClient" :client-val="consensusValPeer" :client-num="consensusNumPeer" />
+          <ClientStatus :client-name="executionClient" :client-val="executionValPeer" :client-num="executionNumPeer" />
         </div>
       </div>
     </div>
-    <div v-if="isMultiService" v-show="p2pItemsShow" class="arrowBox">
-      <div class="arrowUp" @click="backPage">
-        <img src="/img/icon/control-page-icons/arrow-up-small.png" alt="arrow" />
-      </div>
-      <div class="pageNumber">
-        <span>{{ pageNumber }}</span>
-      </div>
-      <div class="arrowDown" @click="nextPage">
-        <img src="/img/icon/control-page-icons/arrow-up-small.png" alt="arrow" />
-      </div>
-    </div>
   </div>
 </template>
-<script>
-import { mapState } from "pinia";
+
+<script setup>
+import { computed } from "vue";
 import { useControlStore } from "@/store/theControl";
+import { useSetups } from "@/store/setups";
 import { useFooter } from "@/store/theFooter";
 import NoData from "./NoData.vue";
-import { useSetups } from "@/store/setups";
-export default {
-  components: { NoData },
-  data() {
-    return {
-      p2p: this.$t("controlPage.p2p"),
-      pageNumber: 1,
-      isMultiService: false,
-      p2pItemsShow: false,
-      p2pIcoUnknown: true,
-      noDataLayerShow: false,
-      consensusClient: "CC",
-      consensusNumPeer: "100",
-      consensusValPeer: "0",
-      executionClient: "EC",
-      executionNumPeer: "100",
-      executionValPeer: "0",
-      p2pIco: [
-        {
-          id: 1,
-          name: "default",
-          icon: "/img/icon/control-page-icons/PeerToPeerIcon.svg",
-        },
-        {
-          id: 2,
-          name: "unknown",
-          icon: "/animation/loading/mushroom-spinner.gif",
-        },
-      ],
-    };
-  },
+import ClientStatus from "../fragments/ClientStatus.vue";
 
-  computed: {
-    ...mapState(useSetups, {
-      selectedSetup: "selectedSetup",
-    }),
-    ...mapState(useControlStore, {
-      code: "code",
-      p2pstatus: "p2pstatus",
-    }),
-    ...mapState(useFooter, {
-      installedServicesController: "installedServicesController",
-      missingServices: "missingServices",
-      prometheusIsOff: "prometheusIsOff",
-      isConsensusRunning: "isConsensusRunning",
-      nodataMessage: "nodataMessage",
-    }),
-    filteredP2PStatus() {
-      if (!Array.isArray(this.p2pstatus.data) || !this.selectedSetup) {
-        return [];
-      }
+const controlStore = useControlStore();
+const setupStore = useSetups();
+const footerStore = useFooter();
 
-      const setupServices = this.selectedSetup?.services.map((service) => service.service);
+const consensusClient = computed(() => setupStore.selectedServicePairs?.consensusService?.name || "Unknown");
+const executionClient = computed(() => setupStore.selectedServicePairs?.executionService?.name || "Unknown");
 
-      const filtered = this.p2pstatus.data.filter((status) => {
-        const details = status.details;
-        if (!details) {
-          return false;
-        }
+const findPeerDetails = (serviceType, id) =>
+  controlStore.p2pstatus?.data?.find((pair) => pair.details[serviceType].serviceID === id)?.details[serviceType] || {};
 
-        const consensusService = details.consensus?.service;
-        const executionService = details.execution?.service;
+const consensusValPeer = computed(() => findPeerDetails("consensus", setupStore.selectedServicePairs?.consensusService?.id).valPeer || 0);
+const consensusNumPeer = computed(() => findPeerDetails("consensus", setupStore.selectedServicePairs?.consensusService?.id).numPeer || 0);
 
-        if (!consensusService || !executionService) {
-          return false;
-        }
+const executionValPeer = computed(() => findPeerDetails("execution", setupStore.selectedServicePairs?.executionService?.id).valPeer || 0);
+const executionNumPeer = computed(() => findPeerDetails("execution", setupStore.selectedServicePairs?.executionService?.id).numPeer || 0);
 
-        const consensusMatch = setupServices.includes(consensusService);
-        const executionMatch = setupServices.includes(executionService);
-
-        return consensusMatch && executionMatch;
-      });
-
-      return filtered;
-    },
-    defaultIco() {
-      return this.p2pIco[0].icon;
-    },
-    unknownIco() {
-      return this.p2pIco[1].icon;
-    },
-    firstBar() {
-      return { width: this.consensusValPeer + "%" };
-    },
-    secondBar() {
-      return { width: this.executionValPeer + "%" };
-    },
-    isConsensusMissing() {
-      return this.missingServices?.includes("consensus");
-    },
-  },
-  watch: {
-    selectedSetup() {
-      this.pageNumber = 1;
-      this.p2pControler();
-    },
-    filteredP2PStatus() {
-      this.pageNumber = 1;
-      this.p2pControler();
-    },
-  },
-  mounted() {
-    this.p2pControler();
-  },
-  unmounted() {
-    if (this.refresher) clearTimeout(this.refresher);
-  },
-  methods: {
-    nextPage() {
-      this.refresh(true, "next");
-    },
-    backPage() {
-      this.refresh(true, "prev");
-    },
-    p2pSituation() {
-      if (this.p2pIcoUnknown) {
-        return this.unknownIco;
-      }
-      return this.defaultIco;
-    },
-    refresh(instant = false, loadPage = "") {
-      if (this.refresher) clearTimeout(this.refresher);
-      if (instant) return this.p2pControler(loadPage);
-      this.refresher = setTimeout(() => {
-        this.p2pControler(loadPage);
-      }, 3000);
-    },
-    p2pControler(loadPage = "") {
-      let pageNumber = this.pageNumber;
-      if (loadPage === "next") {
-        pageNumber++;
-        if (pageNumber > this.filteredP2PStatus.length) {
-          pageNumber = 1; // cycle to first page
-        }
-      } else if (loadPage === "prev") {
-        pageNumber--;
-        if (pageNumber < 1) {
-          pageNumber = this.filteredP2PStatus.length; // cycle to last page
-        }
-      }
-
-      let gid = pageNumber - 1;
-      let clients = this.filteredP2PStatus[gid] || false;
-
-      if (!clients) {
-        // console.log("No clients found for the current page.");
-        return;
-      }
-
-      let isMultiService = this.filteredP2PStatus.length > 1;
-      let p2pItemsShow = true;
-      let p2pIcoUnknown = false;
-      let noDataLayerShow = false;
-      let consensusClient = clients.details.consensus.client;
-      let consensusNumPeer = clients.details.consensus.numPeer;
-      let consensusValPeer = clients.details.consensus.valPeer;
-      let executionClient = clients.details.execution.client;
-      let executionNumPeer = clients.details.execution.numPeer;
-      let executionValPeer = clients.details.execution.valPeer;
-
-      this.pageNumber = pageNumber;
-      this.isMultiService = isMultiService;
-      this.p2pItemsShow = p2pItemsShow;
-      this.p2pIcoUnknown = p2pIcoUnknown;
-      this.noDataLayerShow = noDataLayerShow;
-      this.consensusClient = consensusClient;
-      this.consensusNumPeer = consensusNumPeer;
-      this.consensusValPeer = consensusValPeer;
-      this.executionClient = executionClient;
-      this.executionNumPeer = executionNumPeer;
-      this.executionValPeer = executionValPeer;
-    },
-  },
-};
+const isConsensusMissing = computed(() => footerStore.missingServices?.includes("consensus"));
 </script>
+
 <style scoped>
-.valNo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 65%;
-  font-weight: 800;
-  width: 12%;
-  height: 100%;
-  color: #c1c1c1;
-}
-.pageNumber {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 70%;
-  width: 98%;
-  height: 30%;
-  color: #c1c1c1;
-}
-.arrowBox {
-  width: 6%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.arrowUp,
-.arrowDown {
-  height: 30%;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  cursor: pointer;
-}
-.arrowDown img {
-  transform: rotate(180deg);
-}
 .p2pBarBox {
   width: 100%;
   height: 100%;
@@ -356,47 +135,4 @@ export default {
   width: 70%;
   height: 90%;
 }
-
-.p2pBarCont {
-  width: 95%;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  height: 40%;
-}
-.p2pVal {
-  width: 60%;
-  height: 80%;
-  margin-right: 5px;
-  background: #33393e;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  overflow: hidden;
-  border-radius: 5px;
-  box-shadow: 1px 1px 11px 1px #1f1f1f;
-}
-.p2pVal_value {
-  background: #568d50;
-  height: 98%;
-}
-/* width */
-::-webkit-scrollbar {
-  width: 5px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  border: 1px solid #343434;
-  background: rgb(42, 42, 42);
-  box-sizing: border-box;
-  box-shadow: 1px 1px 10px 1px rgb(23, 23, 23);
-  border-radius: 10px;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: #324b3f;
-  border-radius: 10px;
-}
 </style>