From 365d133fda629ffbfbad75c99682e7e41926319e Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Tue, 17 Sep 2024 16:01:49 +0200
Subject: [PATCH 1/5] REFACTOR: add external service modal on edit page

---
 .../stereumplus-icons/stereumplus-icon.png    | Bin 0 -> 2568 bytes
 launcher/public/output.css                    | 202 ++++++++++++----
 .../edit-page/components/modals/AddPanel.vue  | 218 +++++++++++-------
 3 files changed, 293 insertions(+), 127 deletions(-)
 create mode 100644 launcher/public/img/icon/stereumplus-icons/stereumplus-icon.png

diff --git a/launcher/public/img/icon/stereumplus-icons/stereumplus-icon.png b/launcher/public/img/icon/stereumplus-icons/stereumplus-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd4c667dc01b29e921e7bc077746e5554094b2df
GIT binary patch
literal 2568
zcmV+j3itJiP)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZyvPnciRA@uZS_xQG*A@QXn}wOElqk5w6%$)a)heR_
z5&<!BVL*&=Nl{R%CK@+dvNf8RSWOJ6v5Cen+7dNtUFwn;fv9yWnmA}N?n@&sL2(6f
zff<;Y_j2xo!5L<Ik4WkLKE4m$J?Gr>zq8*5hljMZhW?#-wYrzc!@!ALH;zL`fNM_T
z1FDax0K}X0a{(fMROIaWg2*4LG-aQD7%Ff-M~F5eK8y$d0>>kj<aFR@DUm1ABKks6
z6jli~eqH5%vQH@CccxWzu!B+aq_L-3g_!`KM5^<3J=~eE3KW-Z6NR}}Q%;^znaY6l
zh!4>Pa39i(AEWf`D^W}o#0_S<I30&_uF2(-4MZDZ9IE2E4fP42wuS6=F{Scg&RTlT
zT+rw855!>51ZbLnq~cZ6{0Xa%eZej)wG@kKIQI=D3-8M}5W}EH^jiCFj^iWhLrJ+Z
zDSYzHC8cpV`|Uk%Jl=swAcQ02N}c2$Sf6wv#PjCj((c~Ccm_i5q}R6C*U*-z{bI;6
zhs}2`MB&t_%G!G#fdoXxFKnoo@Ml#)5Hc;MoR?}R05>2kJE>LtMt=eua^EW0##&9=
zzVKcUsZQv1{Pq7;immI*V8zp1X={!A?N=Q#Tr8rCG%n+L{`Yk~fbsS1)g3d&C8NvZ
z9iXQ2&r|;bI)xQ(yInxJ#e$7H_aS4&dfY6%Q|F_oXs$DxvXk9_RJ9%4!Ma*w#k;Q}
zDfTI7HEPIdxfrn0`(+qEdp@=w$X5)ASw$4=F_ye-`x$eMMf6d|FDXksr&MCMCqj|6
za4wn#HjxFOwtRsA9XWdr(c{yV9t}ajHx^Ttu?7h1Vkt`<SK0s$i0X;;AIyYCtyZjr
zGXt~EjgnGyOd7374l|0)CWc!N<s6YLqKinF&8xUsN~DB58i=!-S0F&EQNrexmVr5Y
z=`swXCM%L>7lgl7m~zr3Ao{3;^W@i|N+cXvy9AxuwN}F7mzIH<mhmZ;Z{6XS)<Hns
zWTE-Htacom>{MFKDJ4N38{Q4s6c=)WTDC^jge<cK_Z^B#n@tugb1yr@-*UPLV=AxW
zSIXk5COW=;DLS@!ObLr@T4t3t@yRH?S0<Z>+Wje9K$P)g700K^<|4x2pkH9vGtn5G
z_$<11>PWT1|1{uBepTiwz{;$DVQcOITr0k<L>&<S=bSDwVK>inaf&#dh=Uq8LTKw&
zXxkzft(ym<O^XmTe>4a|O&TGP_Ih{kB2gFJEXIj~i?~Cz<3`DC6kfZDAL*y?`VACZ
zzA8Ph>mn;2;3&{9lCQU~s}Ns&p^vr1i4A|3NH*-u#n^ZLQXj{#uHiBPNh~MN(EB<;
z#q${cYz+EG8L0ILCD#f>d4&bX{(Avyx9>srzC31LHxbc2x?tO<^Q7ndzdwNiQ{VJ>
zOdmrxOc-KBM3>HzB}?w!C)ov3#b2GX3zkZ^uH8ir%_<fK#O|vQ4vLP%qBo`>gxtm3
z+V<Tcq`sX&eU$4onmjNLnQvEB?1I7~bo<>z7ZL0QEl8gzf$+BOm6c=W;^kQO^>(RW
z^R!sz@(F}lVa4p%WVyqt?46kO{wFT9Gsh=W136N9R%W(H*{IU`AgvCHiNv~jbgLv|
z&0Dq>b3b3>3rK>QVnkP)f(7jPtt(~Kih|2Un3}N|xrdL{hzV-a7~ik?49%N9u;fRp
zHe%M22V;aztHlS?$7AfE{<7Mfm<j2~KmCInm}=KbxI{qO)!t1@9)kC$j`RAiEESbF
zc=C+o!|Qka8#cS$g?9cQUc$@62e~}EUv5U&un8!>bJyiLYdGH+I|9b1Bd9*L@_ObD
zQ$B{g@~%4&QM^K~W!y_$Z*1+|tsl=pOn6snk2wnL3Y5^{*KXa0A*>T}^N(T3tFzsd
zca|}tUo0|brGv$RW3lubHD<cU#NeQrG9n2droD*6^yb^P3_&xhS&lkIV=kJ-xmSHr
z5KNptGVv3deWuHBQ;Fp2j`e7)*P$6}Bb@x*6aSJK(~+9cPugNi{AT!zR6A~XJ&LtF
zMcdaRuu&rf#XbkC&5lO;0Cb=<t`7*n#iHxD<zW~j*~>XyRQzb3Q@PB)zCaah`2sD2
zn_~EDe?|^vD_?8Q%VUt9GOPwjQ0x#;x9XK8p?3uSnemncIxu>$|LetSNp{gbjnhUZ
z{947~q}-<Q=B^ERM5mKdVT*nvq-^AEEqZ+l#tj}=vmKh4f*ZFzkGC2ci%a%w294Sh
zy~85@JVlyG>|75=8}BjTJ-bU9QjE{w@R@U9S;W`cJpUcA;mfi5PI?`A$Gv|JIlVCx
z?OL_K>grVP_rjM16OJq91KDk=2CK;Uxje6um(Yp+PVQGwt5j$j_dF^ptzNO5r1pgQ
zw`0AsU@4Yt%JN9B576S)?oHAj3uu4U+#!Tqbs-H_X%Y}^&x9^24UWlmFXjSlGBl)2
z#+eI+9u;dvarDDiD_rW(mwWaj<*f{l^y#C9V$S5T(q3T9VClxi-;&%)Krd@vcD~c)
zL*iCS8j1dx*?!5MO$0<Mb*!O@si?5JTjh@<pU2!Ot~X29sq1|_X^dN|;oMv@`AvE!
z`ApFc9R)$$X)$F>X|V=~Cej$8;dzrBAa`@OK&9d-{aUers`VTXtwU|Ma>)JDqD(AW
zx25J7mU3CEGJ9ewe%ZdQ^jvPB3xX}qV%oOX1ql0tW|P%4n~d@WrgMk3(j|en29EKr
zdGAdO?(>vKF${e8$jP`+<oRP1%UUe{7@e;r3fN>eWmV;NXNyRG^)j~9tGOb%vEuC@
zdKqq_ooU%i@bx16d4+UkYO}V-p&c~=>VAp+q;aHL&Huxnu!h_h?6!$?!}vF69Xt)&
z>_Xx*x{z=k9vV_}r?cr(+)7Jc4$C4gY0dMk!4vTT`VjtGaxugIiT;ur<d8?rKbAz{
z@&R*gy}Vz4{Oai@`es3N70J<mFf{z4u()J4mvzUHy``SC@qLfOz%&h_HlGV`NGOse
z%FFtA1L2;vJZT#irqu;@SWIbgLPLO&V&cl}NuJ!vU$A?$oF;PMXf>x={&Q2a+?P@P
z{bLekr_9=ct=zS0a~KA+(reTUs2_NtJ^|6!sISd->s04D;qL|1>8?{3F|ao{^$d;^
z2R<x7k_ANU0_^WO+75rp*TuCw%GC5ScIQ<XP4P2~N_88hpd{7lHkB^-HVGoPl6A34
zlz(VIoCRs4j9oc_i>CQMoXi|Xdu_=DgDLq}{o@&j3i`d602h+>r$tUYEZ9~1tOv7>
e)>V0DzMlYVa?7f@?{&5S0000<MNUMnLSTYi7x+s6

literal 0
HcmV?d00001

diff --git a/launcher/public/output.css b/launcher/public/output.css
index 187d9c36dd..5641597422 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.4 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -807,10 +807,6 @@ video {
   top: -90px;
 }
 
-.bottom-0{
-  bottom: 0px;
-}
-
 .bottom-0\.5{
   bottom: 0.125rem;
 }
@@ -1091,10 +1087,6 @@ video {
   grid-column-start: 14;
 }
 
-.col-start-16{
-  grid-column-start: 16;
-}
-
 .col-start-17{
   grid-column-start: 17;
 }
@@ -1159,6 +1151,10 @@ video {
   grid-column-start: 9;
 }
 
+.col-start-16{
+  grid-column-start: 16;
+}
+
 .col-end-10{
   grid-column-end: 10;
 }
@@ -1430,6 +1426,11 @@ video {
   margin-right: auto;
 }
 
+.my-4{
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .my-auto{
   margin-top: auto;
   margin-bottom: auto;
@@ -1455,6 +1456,10 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.mb-4{
+  margin-bottom: 1rem;
+}
+
 .mb-\[1px\]{
   margin-bottom: 1px;
 }
@@ -1543,10 +1548,6 @@ video {
   margin-top: 1rem;
 }
 
-.mt-40{
-  margin-top: 10rem;
-}
-
 .mt-5{
   margin-top: 1.25rem;
 }
@@ -1563,6 +1564,14 @@ video {
   margin-top: 9.5rem;
 }
 
+.mt-40{
+  margin-top: 10rem;
+}
+
+.-mr-1{
+  margin-right: -0.25rem;
+}
+
 .box-border{
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -1620,10 +1629,6 @@ video {
   height: 33.333333%;
 }
 
-.h-1\/6{
-  height: 16.666667%;
-}
-
 .h-10{
   height: 2.5rem;
 }
@@ -1668,10 +1673,6 @@ video {
   height: 75%;
 }
 
-.h-3\/6{
-  height: 50%;
-}
-
 .h-32{
   height: 8rem;
 }
@@ -1756,6 +1757,10 @@ video {
   height: 210px;
 }
 
+.h-\[240px\]{
+  height: 240px;
+}
+
 .h-\[250px\]{
   height: 250px;
 }
@@ -1788,6 +1793,10 @@ video {
   height: 34px;
 }
 
+.h-\[35px\]{
+  height: 35px;
+}
+
 .h-\[36px\]{
   height: 36px;
 }
@@ -1874,6 +1883,14 @@ video {
   height: 100vh;
 }
 
+.h-1\/6{
+  height: 16.666667%;
+}
+
+.h-3\/6{
+  height: 50%;
+}
+
 .max-h-10{
   max-height: 2.5rem;
 }
@@ -1946,6 +1963,10 @@ video {
   max-height: 185px;
 }
 
+.max-h-\[190px\]{
+  max-height: 190px;
+}
+
 .max-h-\[200px\]{
   max-height: 200px;
 }
@@ -2122,10 +2143,6 @@ video {
   width: 66.666667%;
 }
 
-.w-2\/4{
-  width: 50%;
-}
-
 .w-20{
   width: 5rem;
 }
@@ -2262,6 +2279,10 @@ video {
   width: 15px;
 }
 
+.w-\[170px\]{
+  width: 170px;
+}
+
 .w-\[178px\]{
   width: 178px;
 }
@@ -2366,6 +2387,10 @@ video {
   width: 100vw;
 }
 
+.w-2\/4{
+  width: 50%;
+}
+
 .min-w-\[100px\]{
   min-width: 100px;
 }
@@ -2410,11 +2435,6 @@ video {
           flex: none;
 }
 
-.flex-shrink{
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
-}
-
 .flex-shrink-0{
   -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -2736,11 +2756,6 @@ video {
           flex-direction: column;
 }
 
-.flex-wrap{
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}
-
 .place-content-center{
   place-content: center;
 }
@@ -2849,6 +2864,12 @@ video {
   row-gap: 1.25rem;
 }
 
+.gap-x-1\.5{
+  -webkit-column-gap: 0.375rem;
+     -moz-column-gap: 0.375rem;
+          column-gap: 0.375rem;
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -2959,6 +2980,11 @@ video {
   border-color: rgb(55 65 81 / var(--tw-divide-opacity));
 }
 
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
+}
+
 .self-start{
   -ms-flex-item-align: start;
       align-self: flex-start;
@@ -2994,6 +3020,10 @@ video {
   overflow: hidden;
 }
 
+.overflow-x-auto{
+  overflow-x: auto;
+}
+
 .overflow-y-auto{
   overflow-y: auto;
 }
@@ -3006,6 +3036,10 @@ video {
   overflow-y: hidden;
 }
 
+.overflow-x-clip{
+  overflow-x: clip;
+}
+
 .overflow-x-scroll{
   overflow-x: scroll;
 }
@@ -3441,11 +3475,21 @@ video {
   border-bottom-color: transparent;
 }
 
+.border-b-white{
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .border-l-gray-200{
   --tw-border-opacity: 1;
   border-left-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.border-l-red-500{
+  --tw-border-opacity: 1;
+  border-left-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
+
 .border-r-\[\#264744\]{
   --tw-border-opacity: 1;
   border-right-color: rgb(38 71 68 / var(--tw-border-opacity));
@@ -3495,6 +3539,11 @@ video {
   background-color: rgb(13 13 14 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#101111\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(16 17 17 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#111213\]{
   --tw-bg-opacity: 1;
   background-color: rgb(17 18 19 / var(--tw-bg-opacity));
@@ -3885,11 +3934,6 @@ video {
   background-color: rgb(96 152 121 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#70E763\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(112 231 99 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#A0A0A0\]{
   --tw-bg-opacity: 1;
   background-color: rgb(160 160 160 / var(--tw-bg-opacity));
@@ -3900,11 +3944,6 @@ video {
   background-color: rgb(209 187 158 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#EB5353\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(235 83 83 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#F7C566\]{
   --tw-bg-opacity: 1;
   background-color: rgb(247 197 102 / var(--tw-bg-opacity));
@@ -4149,11 +4188,31 @@ video {
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
 
+.bg-zinc-200{
+  --tw-bg-opacity: 1;
+  background-color: rgb(228 228 231 / var(--tw-bg-opacity));
+}
+
+.bg-zinc-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(161 161 170 / var(--tw-bg-opacity));
+}
+
 .bg-zinc-700{
   --tw-bg-opacity: 1;
   background-color: rgb(63 63 70 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#70E763\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(112 231 99 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#EB5353\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 83 83 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }
@@ -4425,6 +4484,10 @@ video {
   text-align: center;
 }
 
+.text-right{
+  text-align: right;
+}
+
 .indent-0{
   text-indent: 0px;
 }
@@ -4789,6 +4852,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-yellow-300{
+  --tw-text-opacity: 1;
+  color: rgb(253 224 71 / var(--tw-text-opacity));
+}
+
 .text-yellow-400{
   --tw-text-opacity: 1;
   color: rgb(250 204 21 / var(--tw-text-opacity));
@@ -4963,6 +5031,11 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.shadow-\[\#101111\]{
+  --tw-shadow-color: #101111;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .shadow-\[\#111010\]{
   --tw-shadow-color: #111010;
   --tw-shadow: var(--tw-shadow-colored);
@@ -5038,6 +5111,11 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.shadow-gray-700{
+  --tw-shadow-color: #374151;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .shadow-gray-800{
   --tw-shadow-color: #1f2937;
   --tw-shadow: var(--tw-shadow-colored);
@@ -5072,11 +5150,20 @@ video {
           box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.ring-inset{
+  --tw-ring-inset: inset;
+}
+
 .ring-black{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
 }
 
+.ring-gray-300{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+}
+
 .ring-opacity-5{
   --tw-ring-opacity: 0.05;
 }
@@ -5172,6 +5259,11 @@ video {
           transition-duration: 500ms;
 }
 
+.duration-75{
+  -webkit-transition-duration: 75ms;
+          transition-duration: 75ms;
+}
+
 .ease-in{
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
@@ -5386,11 +5478,6 @@ html body {
   left: 2px;
 }
 
-.after\:top-0::after{
-  content: var(--tw-content);
-  top: 0px;
-}
-
 .after\:top-0\.5::after{
   content: var(--tw-content);
   top: 0.125rem;
@@ -5672,11 +5759,21 @@ html body {
   background-color: rgb(60 67 74 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-\[\#407d7d\]:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 125 125 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-\[\#447a75\]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(68 122 117 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-\[\#488d8d\]:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(72 141 141 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-\[\#4c7960\]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(76 121 96 / var(--tw-bg-opacity));
@@ -5807,6 +5904,11 @@ html body {
   background-color: rgb(4 47 46 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-50:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-opacity-10:hover{
   --tw-bg-opacity: 0.1;
 }
diff --git a/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue b/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
index 2d279dfb0f..d98bb0dc90 100644
--- a/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
+++ b/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
@@ -1,10 +1,18 @@
 import { onMounted, watch, onUnmounted, ref } from 'vue';
 <template>
-  <div class="w-full h-full flex flex-col justify-evenly items-center mx-auto px-4 py-2 space-y-2 mt-6 relative">
+  <div
+    class="w-full h-full flex flex-col justify-evenly items-center mx-auto px-4 py-2 space-y-2 mt-6 relative"
+  >
     <div class="w-full flex justify-center items-center">
       <div class="w-full grid grid-cols-12 items-center text-md">
-        <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-save-path.png" alt="Path Icon" />
-        <span class="col-start-2 col-span-3 text-gray-400 text-left">{{ $t("editModals.installationPath") }}</span>
+        <img
+          class="col-start-1 w-8"
+          src="/img/icon/edit-node-icons/service-save-path.png"
+          alt="Path Icon"
+        />
+        <span class="col-start-2 col-span-3 text-gray-400 text-left">{{
+          $t("editModals.installationPath")
+        }}</span>
         <input
           v-model="props.properties.installDir"
           class="col-start-6 col-span-7 min-h-[30px] border border-gray-500 px-2 py-1 text-left text-gray-400 text-xs rounded bg-[#141516] focus:border-teal-500"
@@ -14,25 +22,117 @@ import { onMounted, watch, onUnmounted, ref } from 'vue';
       </div>
     </div>
     <div
-      v-if="client.category === 'consensus' && client.service !== 'ExternalConsensusService'"
+      v-if="
+        client.category === 'consensus' && client.service !== 'ExternalConsensusService'
+      "
       class="w-full flex justify-center items-center"
     >
       <div class="w-full grid grid-cols-12 items-center text-md">
-        <img class="w-8 col-start-1" src="/animation/synchronisation/synchronisation-icon-active.gif" alt="Sync Icon" />
-        <span class="col-start-2 col-span-3 text-gray-400 text-md text-left">{{ $t("editModals.syncMode") }}</span>
+        <img
+          class="w-8 col-start-1"
+          src="/animation/synchronisation/synchronisation-icon-active.gif"
+          alt="Sync Icon"
+        />
+        <span class="col-start-2 col-span-3 text-gray-400 text-md text-left">{{
+          $t("editModals.syncMode")
+        }}</span>
         <SyncCarousel :cat="client.category" />
       </div>
     </div>
 
     <div
-      v-if="props.client.service === 'ExternalExecutionService' || props.client.service === 'ExternalConsensusService'"
+      v-if="
+        props.client.service === 'ExternalExecutionService' ||
+        props.client.service === 'ExternalConsensusService'
+      "
       class="w-full flex justify-center items-center"
     >
       <div class="w-full grid grid-cols-12 items-center text-md">
-        <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-external-source.png" alt="Path Icon" />
-        <span class="col-start-2 col-span-3 text-gray-400 text-left">External Source</span>
+        <img
+          class="col-start-1 w-8"
+          src="/img/icon/edit-node-icons/service-category.png"
+          alt="Path Icon"
+        />
+        <span class="col-start-2 col-span-3 text-gray-400 text-md text-left"
+          >EXTERNAL SOURCE</span
+        >
+
+        <div
+          class="col-start-6 col-span-full w-full relative bg-[#141516] border border-gray-500 rounded-md grid grid-cols-12 items-center"
+          @click="dropdown"
+        >
+          <div
+            class="col-start-1 col-span-full flex justify-center items-center overflow-hidden"
+          >
+            <div
+              class="w-3/4 px-4 py-2 text-sm text-gray-400 capitalize flex justify-start items-center space-x-4"
+            >
+              <img
+                v-if="selectedSource.icon ? selectedSource.icon : null"
+                :src="selectedSource.icon"
+                class="w-5"
+              />
+              <span>{{
+                selectedSource.name ? selectedSource.name : "Select Source"
+              }}</span>
+            </div>
+
+            <button
+              class="w-1/4 h-full p-2 text-gray-500 hover:text-gray-200 flex justify-end items-center"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+
+          <div
+            v-if="isOpen"
+            class="absolute top-8 end-2 z-10 mt-2 max-h-[160px] w-56 rounded-md bg-gray-700 shadow-lg overflow-x-hidden overflow-y-auto"
+            role="menu"
+            @mouseleave="isOpen = false"
+          >
+            <div class="p-2 divide-y" @mouseleave="isOpen = false">
+              <div
+                v-for="source in sources"
+                :key="source"
+                class="flex justify-center items-center space-x-4 rounded-lg px-4 py-2 text-sm text-gray-500 hover:text-gray-100 hover:bg-blue-500 uppercase cursor-pointer"
+                role="menuitem"
+                @click="pickSource(source)"
+              >
+                <img v-if="source.icon" :src="source.icon" class="w-6" />
+                <span>{{ source.name }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="
+        props.client.service === 'ExternalExecutionService' ||
+        props.client.service === 'ExternalConsensusService'
+      "
+      class="w-full flex justify-center items-center"
+    >
+      <div class="w-full grid grid-cols-12 items-center text-md">
+        <img
+          class="col-start-1 w-8"
+          src="/img/icon/edit-node-icons/service-external-source.png"
+          alt="Path Icon"
+        />
+        <span class="col-start-2 col-span-3 text-gray-400 text-left">ADDRESS</span>
         <input
-          v-model="sourceLink"
+          v-model="addressLink"
           class="col-start-6 col-span-7 min-h-[30px] border border-gray-500 px-2 py-1 text-left text-gray-400 text-xs rounded bg-[#141516] focus:border-teal-500"
           type="text"
           autofocus
@@ -41,11 +141,17 @@ import { onMounted, watch, onUnmounted, ref } from 'vue';
     </div>
 
     <div
-      v-if="client.service === 'ExternalExecutionService' && client.category == 'execution'"
+      v-if="
+        client.service === 'ExternalExecutionService' && client.category == 'execution'
+      "
       class="w-full flex justify-center items-center"
     >
       <div class="w-full grid grid-cols-12 items-center text-md">
-        <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-jwt-token-connection.png" alt="Path Icon" />
+        <img
+          class="col-start-1 w-8"
+          src="/img/icon/edit-node-icons/service-jwt-token-connection.png"
+          alt="Path Icon"
+        />
         <span class="col-start-2 col-span-3 text-gray-400 text-left">JWT TOKEN</span>
         <input
           v-model="jwtToken"
@@ -55,59 +161,6 @@ import { onMounted, watch, onUnmounted, ref } from 'vue';
         />
       </div>
     </div>
-    <div v-if="client.service === 'ExternalConsensusService'" class="w-full grid grid-cols-12 items-center text-md">
-      <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-category.png" alt="Path Icon" />
-      <span class="col-start-2 col-span-3 text-gray-400 text-left">Client Selection</span>
-
-      <div
-        class="col-start-6 col-span-full w-full relative bg-[#141516] border border-gray-500 rounded-md grid grid-cols-12 items-center"
-        @click="dropdown"
-      >
-        <div class="col-start-1 col-span-full flex justify-center items-center overflow-hidden">
-          <div class="w-3/4 px-4 py-2 text-sm/none text-gray-400 capitalize">
-            {{ selectedService ? selectedService : "Select Existing Service" }}
-          </div>
-
-          <button class="w-1/4 h-full p-2 text-gray-500 hover:text-gray-200 flex justify-end items-center">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-              <path
-                fill-rule="evenodd"
-                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
-
-        <div
-          v-if="isOpen"
-          class="absolute top-8 end-2 z-10 mt-2 max-h-[160px] w-56 rounded-md border border-gray-100 bg-white shadow-lg overflow-x-hidden overflow-y-auto"
-          role="menu"
-        >
-          <div class="p-2" @mouseleave="isOpen = false">
-            <span
-              v-for="service in services"
-              :key="service"
-              class="block rounded-lg px-4 py-2 text-sm text-gray-500 hover:text-gray-100 hover:bg-blue-500 uppercase cursor-pointer"
-              role="menuitem"
-              @click="pickService(service), (isOpen = false)"
-            >
-              {{ service }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-if="selectedService === 'prysm'" class="w-full grid grid-cols-12 items-center text-md">
-      <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-port.png" alt="Path Icon" />
-      <span class="col-start-2 col-span-3 text-gray-400 text-left">Gateway</span>
-      <input
-        v-model="gateway"
-        class="col-start-6 col-span-7 min-h-[30px] border border-gray-500 px-2 py-1 text-left text-gray-400 text-xs rounded bg-[#141516] focus:border-teal-500"
-        type="text"
-        autofocus
-      />
-    </div>
   </div>
 </template>
 
@@ -129,29 +182,38 @@ const props = defineProps({
 });
 
 const manageStore = useNodeManage();
-const sourceLink = ref("");
+const addressLink = ref("");
 const jwtToken = ref("");
 const gateway = ref("");
-const selectedService = ref("");
+const selectedSource = ref("");
 const isOpen = ref(false);
-const services = ["prysm", "lighthouse", "teku", "nimbus", "lodestar"];
+const sources = [
+  { name: "custom", icon: null },
+  { name: "stereumplus 1", icon: "/img/icon/stereumplus-icons/stereumplus-icon.png" },
+  { name: "stereumplus 2", icon: "/img/icon/stereumplus-icons/stereumplus-icon.png" },
+  { name: "stereumplus 3", icon: "/img/icon/stereumplus-icons/stereumplus-icon.png" },
+];
 
 //Computed & Watcher
 
+//Replace Sources by a computed source like below then remove the source above
+// const sources = computed(() => {
+//   return logic to get source
+// });
+
 watchEffect(() => {
-  props.client.config.source = sourceLink.value;
+  props.client.config.source = addressLink.value;
   props.client.config.jwtToken = jwtToken.value;
-  props.client.config.gateway = gateway.value;
 });
 
 //Lifecycle Hooks
 
 onMounted(() => {
-  sourceLink.value = "";
+  addressLink.value = "";
   jwtToken.value = "";
   props.properties.installDir = "";
   gateway.value = "";
-  selectedService.value = "";
+  selectedSource.value = "";
   getInstallPath();
 });
 
@@ -161,16 +223,18 @@ const dropdown = () => {
   isOpen.value = !isOpen.value;
 };
 
-const pickService = (service) => {
-  selectedService.value = service;
-  manageStore.ExternalConsensusSelectedService = service;
-  dropdown();
+const pickSource = (source) => {
+  selectedSource.value = source;
+  manageStore.ExternalConsensusSelectedService = source;
+  isOpen.value = false;
 };
 
 const getInstallPath = async () => {
   let largestVolumePath = await ControlService.getLargestVolumePath();
   if (largestVolumePath === "/") largestVolumePath = largestVolumePath + "opt";
-  const stereumInstallationPath = [largestVolumePath, "/stereum"].join("/").replace(/\/{2,}/, "/");
+  const stereumInstallationPath = [largestVolumePath, "/stereum"]
+    .join("/")
+    .replace(/\/{2,}/, "/");
   props.properties.installDir = stereumInstallationPath;
 };
 </script>

From 1061616401589d90fccc76c12b5d8a4471f09547 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Tue, 17 Sep 2024 16:28:54 +0200
Subject: [PATCH 2/5] CHANGE: input height

---
 launcher/public/output.css                    | 13 +++++++++++++
 .../edit-page/components/modals/AddPanel.vue  | 19 +++++++++----------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/launcher/public/output.css b/launcher/public/output.css
index 5641597422..313b560c78 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -999,6 +999,10 @@ video {
   top: 7rem;
 }
 
+.left-2{
+  left: 0.5rem;
+}
+
 .z-0{
   z-index: 0;
 }
@@ -2391,6 +2395,10 @@ video {
   width: 50%;
 }
 
+.w-64{
+  width: 16rem;
+}
+
 .min-w-\[100px\]{
   min-width: 100px;
 }
@@ -2985,6 +2993,11 @@ video {
   border-color: rgb(243 244 246 / var(--tw-divide-opacity));
 }
 
+.divide-gray-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-divide-opacity));
+}
+
 .self-start{
   -ms-flex-item-align: start;
       align-self: flex-start;
diff --git a/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue b/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
index d98bb0dc90..0651fe8c7b 100644
--- a/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
+++ b/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
@@ -65,7 +65,7 @@ import { onMounted, watch, onUnmounted, ref } from 'vue';
             class="col-start-1 col-span-full flex justify-center items-center overflow-hidden"
           >
             <div
-              class="w-3/4 px-4 py-2 text-sm text-gray-400 capitalize flex justify-start items-center space-x-4"
+              class="w-3/4 px-2 py-1 text-sm text-gray-400 capitalize flex justify-start items-center space-x-4"
             >
               <img
                 v-if="selectedSource.icon ? selectedSource.icon : null"
@@ -78,7 +78,7 @@ import { onMounted, watch, onUnmounted, ref } from 'vue';
             </div>
 
             <button
-              class="w-1/4 h-full p-2 text-gray-500 hover:text-gray-200 flex justify-end items-center"
+              class="w-1/4 h-full p-1 text-gray-500 hover:text-gray-200 flex justify-end items-center"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -97,16 +97,14 @@ import { onMounted, watch, onUnmounted, ref } from 'vue';
 
           <div
             v-if="isOpen"
-            class="absolute top-8 end-2 z-10 mt-2 max-h-[160px] w-56 rounded-md bg-gray-700 shadow-lg overflow-x-hidden overflow-y-auto"
-            role="menu"
+            class="absolute top-8 left-0 z-10 mt-2 max-h-[160px] w-64 rounded-md bg-gray-700 shadow-lg overflow-x-hidden overflow-y-auto"
             @mouseleave="isOpen = false"
           >
-            <div class="p-2 divide-y" @mouseleave="isOpen = false">
+            <div class="divide-y divide-gray-500">
               <div
                 v-for="source in sources"
                 :key="source"
-                class="flex justify-center items-center space-x-4 rounded-lg px-4 py-2 text-sm text-gray-500 hover:text-gray-100 hover:bg-blue-500 uppercase cursor-pointer"
-                role="menuitem"
+                class="w-full flex justify-center items-center space-x-4 px-4 py-2 text-sm text-gray-300 hover:text-gray-100 hover:bg-blue-500 uppercase cursor-pointer"
                 @click="pickSource(source)"
               >
                 <img v-if="source.icon" :src="source.icon" class="w-6" />
@@ -119,8 +117,9 @@ import { onMounted, watch, onUnmounted, ref } from 'vue';
     </div>
     <div
       v-if="
-        props.client.service === 'ExternalExecutionService' ||
-        props.client.service === 'ExternalConsensusService'
+        (props.client.service === 'ExternalExecutionService' ||
+          props.client.service === 'ExternalConsensusService') &&
+        selectedSource.name === 'custom'
       "
       class="w-full flex justify-center items-center"
     >
@@ -224,9 +223,9 @@ const dropdown = () => {
 };
 
 const pickSource = (source) => {
+  isOpen.value = false;
   selectedSource.value = source;
   manageStore.ExternalConsensusSelectedService = source;
-  isOpen.value = false;
 };
 
 const getInstallPath = async () => {

From 9b6752d8ad18bd1997846293a56ad538d15ee531 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Wed, 18 Sep 2024 13:00:59 +0200
Subject: [PATCH 3/5] ADD: external services fn

---
 .../components/UI/edit-page/EditScreen.vue    | 184 ++++++++++---
 .../edit-page/components/edit/ConfigBody.vue  |  36 ++-
 .../UI/edit-page/components/edit/EditBody.vue |  16 +-
 .../edit/clients/ConsensusClients.vue         |  23 +-
 .../edit/clients/ExecutionClients.vue         |  29 ++-
 .../components/edit/clients/GeneralMenu.vue   |  49 +++-
 .../edit-page/components/modals/AddModal.vue  |  42 ++-
 .../edit-page/components/modals/AddPanel.vue  |   3 +-
 .../components/modals/ExternalModifying.vue   | 244 ++++++++++++++++++
 .../UI/edit-page/sections/ServiceSection.vue  |   4 +-
 .../components/UI/node-page/NodeScreen.vue    |  87 ++++++-
 .../components/modals/CustomModal.vue         |  27 +-
 .../node-page/components/node/ConfigBody.vue  |  19 +-
 .../UI/node-page/components/node/NodeBody.vue |  60 ++++-
 .../components/node/clients/ClientButtons.vue | 145 +++++++++--
 .../node/clients/ConsensusClients.vue         |  27 +-
 .../node/clients/ExecutionClients.vue         |  34 ++-
 .../UI/node-page/sections/NodeSection.vue     |  13 +-
 18 files changed, 911 insertions(+), 131 deletions(-)
 create mode 100644 launcher/src/components/UI/edit-page/components/modals/ExternalModifying.vue

diff --git a/launcher/src/components/UI/edit-page/EditScreen.vue b/launcher/src/components/UI/edit-page/EditScreen.vue
index 6afc4ce562..0d2dbec0b7 100644
--- a/launcher/src/components/UI/edit-page/EditScreen.vue
+++ b/launcher/src/components/UI/edit-page/EditScreen.vue
@@ -4,7 +4,10 @@
 
     <div class="w-full h-full grid grid-cols-24 relative select-none">
       <div class="col-start-1 col-span-1 flex justify-center items-center">
-        <SidebarSection @network-modal="displaySwitchNetwork" @nuke-node="openNukeNodeModal" />
+        <SidebarSection
+          @network-modal="displaySwitchNetwork"
+          @nuke-node="openNukeNodeModal"
+        />
       </div>
       <div class="col-start-2 col-end-17 w-full h-full relative">
         <EditBody
@@ -17,14 +20,21 @@
           @delete-setup="deleteSetup"
           @confirm-consensus="confirmConsensusConnection"
           @info-modal="openInfoModal"
+          @external-modify="openExternalModifyingModal"
         />
       </div>
       <div class="col-start-17 col-end-21 ml-1 grid grid-cols-2 grid-rows-9">
         <NetworkStatus />
-        <ServiceSection @change-connection="serviceModifyHandler" @delete-service="selectedServiceToRemove" />
+        <ServiceSection
+          @change-connection="serviceModifyHandler"
+          @delete-service="selectedServiceToRemove"
+        />
       </div>
       <div class="col-start-21 col-end-25 px-1 flex flex-col justify-between">
-        <ChangesSection @remove-change="cancelChangeHandler" @confirm-changes="confirmHandler" />
+        <ChangesSection
+          @remove-change="cancelChangeHandler"
+          @confirm-changes="confirmHandler"
+        />
       </div>
     </div>
     <!-- End Node main layout -->
@@ -53,7 +63,11 @@
             @create-custom="createCustomSetup"
             @get-network="getSetupNetwork"
           />
-          <ServicesDrawer v-else-if="manageStore.isServicesDrawerActive" :dragging="startDrag" @add-services="addServices" />
+          <ServicesDrawer
+            v-else-if="manageStore.isServicesDrawerActive"
+            :dragging="startDrag"
+            @add-services="addServices"
+          />
         </template>
       </drawer-box>
     </transition>
@@ -61,7 +75,11 @@
     <!-- Custom Modals -->
     <TransitionGroup name="fadeModal">
       <!-- Start Network Switch Modal -->
-      <NetworkModal v-if="manageStore.displayNetworkList" @close-window="closeNetworkModal" @switch-confirm="switchNetworkConfirm" />
+      <NetworkModal
+        v-if="manageStore.displayNetworkList"
+        @close-window="closeNetworkModal"
+        @switch-confirm="switchNetworkConfirm"
+      />
       <!-- End Switch Network Modal -->
       <!-- Start Switch Client Modal -->
       <SwitchModal
@@ -72,7 +90,12 @@
       />
       <!-- End Switch Client Modal -->
       <!-- Start Info Modal -->
-      <InfoModal v-if="isInfoModalOpen" :client="clientForInfo" @close-window="closeInfoModal" @ok-button="isInfoModalOpen = false" />
+      <InfoModal
+        v-if="isInfoModalOpen"
+        :client="clientForInfo"
+        @close-window="closeInfoModal"
+        @ok-button="isInfoModalOpen = false"
+      />
       <!-- End Info Modal -->
       <!-- Start Modify Services Modal -->
       <ModifyModal
@@ -82,6 +105,15 @@
         @confirm-modify="confirmModifyingService"
       />
       <!-- End Modify Services Modal -->
+      <!-- Start External Modify for External Service -->
+      <ExternalModifying
+        v-if="isExternalModifyOpen"
+        :client="clientToModify"
+        @close-window="hideExternalModify"
+        @confirm-install="confirmExternalModifying"
+      />
+      <!-- End External Modify for External Service -->
+
       <!-- Start Add configs for Custom Service -->
 
       <AddCustom
@@ -112,16 +144,25 @@
       <!-- End Nuke Modal -->
 
       <!-- Start Import Setup -->
-      <ImportSetup v-if="manageStore.isImportSetupYamlActive" @confirm-import="confirmImportSingleSetup" />
+      <ImportSetup
+        v-if="manageStore.isImportSetupYamlActive"
+        @confirm-import="confirmImportSingleSetup"
+      />
       <!-- End Import Setup -->
       <!-- Start Create Setup -->
-      <CreateSetup v-if="setupStore.isCreateSetupModalActive" :network="selectedSetupNetwork" />
+      <CreateSetup
+        v-if="setupStore.isCreateSetupModalActive"
+        :network="selectedSetupNetwork"
+      />
       <!-- End Create Setup -->
 
       <!-- Start Setup Infos -->
       <SetupInfos v-if="setupStore.selectedSetupInfos" />
     </TransitionGroup>
-    <LoaderAnime v-if="manageStore.disableConfirmButton || setupStore.isImportAnimeActive" :anime="getAimationSrc" />
+    <LoaderAnime
+      v-if="manageStore.disableConfirmButton || setupStore.isImportAnimeActive"
+      :anime="getAimationSrc"
+    />
   </base-layout>
 </template>
 <script setup>
@@ -149,6 +190,7 @@ import AddModal from "./components/modals/AddModal.vue";
 import InfoModal from "./components/modals/InfoModal.vue";
 import ModifyModal from "./components/modals/ModifyModal.vue";
 import NetworkModal from "./components/modals/NetworkModal.vue";
+import ExternalModifying from "./components/modals/ExternalModifying.vue";
 import NukeModal from "./components/modals/NukeModal.vue";
 import SwitchModal from "./components/modals/SwitchModal.vue";
 import AddCustom from "./components/modals/custom-service/AddCustom.vue";
@@ -184,6 +226,7 @@ const isModifyModalOpen = ref(false);
 const isAddModalOpen = ref(false);
 const clientToConnect = ref(null);
 const isNukeModalOpen = ref(false);
+const isExternalModifyOpen = ref(false);
 const nukeModalComponent = ref();
 const selectedSetupNetwork = ref("");
 const changeAnime = ref("/animation/confirm-changes/modify.gif");
@@ -307,7 +350,9 @@ const switchClientModalhandler = (item) => {
 
 const switchClientConfirm = (properties) => {
   isSwitchModalOpen.value = false;
-  const current = manageStore.newConfiguration.find((e) => e?.config.serviceID === properties.itemToReplace.config.serviceID);
+  const current = manageStore.newConfiguration.find(
+    (e) => e?.config.serviceID === properties.itemToReplace.config.serviceID
+  );
 
   const currentClientIndex = manageStore.newConfiguration.indexOf(current);
 
@@ -344,7 +389,9 @@ const switchClientConfirm = (properties) => {
         executionClients: [],
         consensusClients: [],
         otherServices: [],
-        checkpointURL: properties.checkPointSyncUrl ? properties.checkPointSyncUrl : false,
+        checkpointURL: properties.checkPointSyncUrl
+          ? properties.checkPointSyncUrl
+          : false,
       },
     },
   });
@@ -352,6 +399,12 @@ const switchClientConfirm = (properties) => {
 };
 // Clients Modifying methods
 
+const confirmExternalModifying = (client, properties) => {
+  isExternalModifyOpen.value = false;
+  console.log("External Confirm", client);
+  console.log("External Confirm", properties);
+};
+
 const confirmModifyingService = (item) => {
   isModifyModalOpen.value = false;
   if (item.client.service === "FlashbotsMevBoostService") {
@@ -381,7 +434,9 @@ const serviceModifyHandler = (item) => {
 const hideModifyModal = () => {
   manageStore.isLineHidden = false;
   isModifyModalOpen.value = false;
-  manageStore.newConfiguration = JSON.parse(JSON.stringify(serviceStore.installedServices));
+  manageStore.newConfiguration = JSON.parse(
+    JSON.stringify(serviceStore.installedServices)
+  );
 };
 const confirmConsensusConnection = (item) => {
   clientToConnect.value.isNotConnectedToConsensus = false;
@@ -480,7 +535,9 @@ const cancelChangeHandler = (item) => {
       const event = manageStore.newConfiguration.find((e) => e.id === item.service.id);
       const eventIdx = manageStore.newConfiguration.indexOf(event);
       manageStore.newConfiguration.splice(eventIdx, 1);
-      manageStore.newConfiguration = JSON.parse(JSON.stringify(serviceStore.installedServices));
+      manageStore.newConfiguration = JSON.parse(
+        JSON.stringify(serviceStore.installedServices)
+      );
     }
 
     if (item.content === "MODIFY") {
@@ -520,7 +577,10 @@ const addServices = (service) => {
 const addServerServices = (service) => {
   let item = useDeepClone(service);
 
-  if (item.category === "service" && manageStore.newConfiguration.map((s) => s?.service).includes(item?.service)) {
+  if (
+    item.category === "service" &&
+    manageStore.newConfiguration.map((s) => s?.service).includes(item?.service)
+  ) {
     return;
   } else {
     item.id = manageStore.newConfiguration.length;
@@ -530,7 +590,9 @@ const addServerServices = (service) => {
     };
     manageStore.newConfiguration.push(newItem);
 
-    setupStore.editSetups.find((s) => s.setupId === setupStore.selectedSetup?.setupId)?.services.push(newItem);
+    setupStore.editSetups
+      .find((s) => s.setupId === setupStore.selectedSetup?.setupId)
+      ?.services.push(newItem);
 
     clientToInstall.value = newItem;
     clientToInstall.value.addPanel = true;
@@ -553,7 +615,10 @@ const onDrop = (event) => {
   const allServices = useDeepClone(serviceStore.allServices);
   const itemId = event.dataTransfer.getData("itemId");
   let item = allServices.find((item) => item.id == itemId);
-  if (item.category === "service" && manageStore.newConfiguration.map((s) => s.service).includes(item.service)) {
+  if (
+    item.category === "service" &&
+    manageStore.newConfiguration.map((s) => s.service).includes(item.service)
+  ) {
     return;
   } else {
     item.id = manageStore.newConfiguration.length;
@@ -642,7 +707,9 @@ const switchNetworkConfirm = (network) => {
   manageStore.displayNetworkList = false;
   if (network?.network != setupStore.selectedSetup?.network) {
     if (manageStore.confirmChanges.map((j) => j.content).includes("CHANGE NETWORK")) {
-      let index = manageStore.confirmChanges.findIndex((j) => j.content.includes("CHANGE NETWORK"));
+      let index = manageStore.confirmChanges.findIndex((j) =>
+        j.content.includes("CHANGE NETWORK")
+      );
       if (setupStore.selectedSetup.network === network.network) {
         manageStore.confirmChanges.splice(index, 1);
       } else {
@@ -686,7 +753,12 @@ const selectedServiceToRemove = (item) => {
   let commonService = setupStore.editSetups.find((s) => {
     return s.setupName === "commonServices";
   });
-  if (item.isNotConnectedToConsensus || item.isNotConnectedToValidator || item.isNotConnectedToMevboost || item.isDisplayPluginMenu) {
+  if (
+    item.isNotConnectedToConsensus ||
+    item.isNotConnectedToValidator ||
+    item.isNotConnectedToMevboost ||
+    item.isDisplayPluginMenu
+  ) {
     return;
   } else {
     clientToRemove.value = item;
@@ -701,7 +773,9 @@ const selectedServiceToRemove = (item) => {
     content: "DELETE",
     contentIcon: "/img/icon/edit-node-icons/delete-service.png",
     service: item,
-    setupId: commonServiceExistance ? commonService.setupId : setupStore.selectedSetup?.setupId,
+    setupId: commonServiceExistance
+      ? commonService.setupId
+      : setupStore.selectedSetup?.setupId,
   };
   const itemExists = manageStore.confirmChanges.some(
     (e) => (e.id === item.config?.serviceID || e.id === item.id) && e.content === "DELETE"
@@ -777,25 +851,39 @@ const confirmHandler = async () => {
   manageStore.disableConfirmButton = true;
 
   const setupExists = manageStore.confirmChanges.some(
-    (item) => item.service?.hasOwnProperty("setupName") && item.service?.hasOwnProperty("setupId") && item.service.setupId == item.id
+    (item) =>
+      item.service?.hasOwnProperty("setupName") &&
+      item.service?.hasOwnProperty("setupId") &&
+      item.service.setupId == item.id
   );
 
   const serverServiceExists = manageStore.confirmChanges.some(
-    (change) => change.content === "INSTALL" && setupStore.serverServices.includes(change.service.service)
+    (change) =>
+      change.content === "INSTALL" &&
+      setupStore.serverServices.includes(change.service.service)
   );
 
   try {
     if (serverServiceExists) {
       await handleServerServiceChanges();
-    } else if (setupExists && manageStore.confirmChanges.some((e) => e.content === "DELETE")) {
+    } else if (
+      setupExists &&
+      manageStore.confirmChanges.some((e) => e.content === "DELETE")
+    ) {
       await handleSetupChanges();
     } else if (manageStore.confirmChanges.some((e) => e.content === "NETWORK")) {
       await handleSwitchSetupNetwork();
-      await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
+      await ControlService.handleServiceChanges(
+        JSON.parse(JSON.stringify(manageStore.confirmChanges))
+      );
     } else if (manageStore.confirmChanges.some((e) => e.content === "MODIFY")) {
-      await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
+      await ControlService.handleServiceChanges(
+        JSON.parse(JSON.stringify(manageStore.confirmChanges))
+      );
     } else {
-      await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
+      await ControlService.handleServiceChanges(
+        JSON.parse(JSON.stringify(manageStore.confirmChanges))
+      );
     }
   } catch (error) {
     console.error("Error processing changes:", error);
@@ -806,17 +894,27 @@ const confirmHandler = async () => {
 };
 
 const handleServerServiceChanges = async () => {
-  const commonServicesId = setupStore.editSetups.find((s) => s.setupName === "commonServices")?.setupId;
+  const commonServicesId = setupStore.editSetups.find(
+    (s) => s.setupName === "commonServices"
+  )?.setupId;
   manageStore.confirmChanges.forEach((change) => {
     change.data.setupId = commonServicesId ?? change.data.setupId;
   });
-  await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
+  await ControlService.handleServiceChanges(
+    JSON.parse(JSON.stringify(manageStore.confirmChanges))
+  );
 };
 
 const handleSetupChanges = async () => {
-  const setupsToRemoveIds = new Set(setupStore.selectedSetupToRemove.map((s) => s.setupId));
-  setupStore.allSetups = setupStore.allSetups.filter((e) => !setupsToRemoveIds.has(e.setupId));
-  setupStore.editSetups = setupStore.editSetups.filter((e) => !setupsToRemoveIds.has(e.setupId));
+  const setupsToRemoveIds = new Set(
+    setupStore.selectedSetupToRemove.map((s) => s.setupId)
+  );
+  setupStore.allSetups = setupStore.allSetups.filter(
+    (e) => !setupsToRemoveIds.has(e.setupId)
+  );
+  setupStore.editSetups = setupStore.editSetups.filter(
+    (e) => !setupsToRemoveIds.has(e.setupId)
+  );
 
   let subtasks = manageStore.confirmChanges.flatMap((e) => e.subTasks);
   await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(subtasks)));
@@ -882,7 +980,9 @@ const deleteSetup = async (item) => {
   });
   const subtasks =
     item?.services.flatMap((service) => {
-      const matchedServices = manageStore.newConfiguration.filter((e) => e.config?.serviceID === service.config?.serviceID);
+      const matchedServices = manageStore.newConfiguration.filter(
+        (e) => e.config?.serviceID === service.config?.serviceID
+      );
 
       return matchedServices.map((e) => ({
         id: e.config?.serviceID,
@@ -902,7 +1002,9 @@ const deleteSetup = async (item) => {
     subTasks: subtasks,
   };
 
-  const itemExists = manageStore.confirmChanges.some((e) => e.id === item.setupId && e.content === "DELETE");
+  const itemExists = manageStore.confirmChanges.some(
+    (e) => e.id === item.setupId && e.content === "DELETE"
+  );
   if (!itemExists) {
     manageStore.confirmChanges.push(confirmDelete);
   }
@@ -918,6 +1020,20 @@ const confirmImportSingleSetup = async (data) => {
   setupStore.isImportAnimeActive = true;
 };
 
+const openExternalModifyingModal = (item) => {
+  console.log("item", item);
+
+  clientToModify.value = item;
+  console.log("clientToModify", clientToModify.value);
+
+  isExternalModifyOpen.value = true;
+};
+
+const hideExternalModify = () => {
+  manageStore.isLineHidden = false;
+  isExternalModifyOpen.value = false;
+};
+
 const closeNetworkModal = () => {
   manageStore.displayNetworkList = false;
   manageStore.isLineHidden = false;
@@ -926,7 +1042,9 @@ const closeNetworkModal = () => {
 const closeSwitchModal = () => {
   isSwitchModalOpen.value = false;
   manageStore.isLineHidden = false;
-  manageStore.newConfiguration = JSON.parse(JSON.stringify(serviceStore.installedServices));
+  manageStore.newConfiguration = JSON.parse(
+    JSON.stringify(serviceStore.installedServices)
+  );
 };
 
 const closeInfoModal = () => {
diff --git a/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue b/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue
index a21523442f..e7183d0c47 100644
--- a/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue
@@ -11,11 +11,20 @@
   >
     <div
       class="absolute top-0 w-full mx-auto grid grid-cols-3 h-6 border border-gray-950 rounded-t-[5px] text-xs font-[400] font-sans"
-      :class="[setupStore.getBGColor(setupStore.selectedSetup?.color), setupStore.getTextColor(setupStore.selectedSetup?.color)]"
+      :class="[
+        setupStore.getBGColor(setupStore.selectedSetup?.color),
+        setupStore.getTextColor(setupStore.selectedSetup?.color),
+      ]"
     >
-      <span class="col-start-1 justify-self-center self-center">{{ $t("editBody.executionClient") }}</span>
-      <span class="col-start-2 justify-self-center self-center">{{ $t("editBody.consensusClient") }}</span>
-      <span class="col-start-3 justify-self-center self-center">{{ $t("editBody.validator") }}</span>
+      <span class="col-start-1 justify-self-center self-center">{{
+        $t("editBody.executionClient")
+      }}</span>
+      <span class="col-start-2 justify-self-center self-center">{{
+        $t("editBody.consensusClient")
+      }}</span>
+      <span class="col-start-3 justify-self-center self-center">{{
+        $t("editBody.validator")
+      }}</span>
     </div>
     <div
       ref="dropZoneRef"
@@ -38,6 +47,7 @@
         @switch-client="switchClient"
         @confirm-consensus="confirmConsensus"
         @info-modal="infoModal"
+        @external-modify="externalModify"
         @mouse-over="lineDraw"
         @mouse-leave="removeLines"
       />
@@ -49,6 +59,7 @@
         @switch-client="switchClient"
         @modify-service="modifyService"
         @info-modal="infoModal"
+        @external-modify="externalModify"
         @mouse-over="lineDraw"
         @mouse-leave="removeLines"
       />
@@ -82,6 +93,7 @@ const emit = defineEmits([
   "deleteService",
   "confirmConsensus",
   "infoModal",
+  "externalModify",
   "modifyService",
   "removeLines",
   "lineDraw",
@@ -94,9 +106,15 @@ const { updateDom } = useMultiSetups();
 const isOverDropZone = ref(false);
 
 const activateScrollBar = computed(() => {
-  const validators = manageStore.newConfiguration.filter((service) => service.category === "validator");
-  const consensus = manageStore.newConfiguration.filter((service) => service.category === "consensus");
-  const execution = manageStore.newConfiguration.filter((service) => service.category === "execution");
+  const validators = manageStore.newConfiguration.filter(
+    (service) => service.category === "validator"
+  );
+  const consensus = manageStore.newConfiguration.filter(
+    (service) => service.category === "consensus"
+  );
+  const execution = manageStore.newConfiguration.filter(
+    (service) => service.category === "execution"
+  );
   return !!(validators.length > 3 || consensus.length > 3 || execution.length > 3);
 });
 
@@ -151,4 +169,8 @@ const infoModal = (service) => {
 const modifyService = (service) => {
   emit("modifyService", service);
 };
+
+const externalModify = (service) => {
+  emit("externalModify", service);
+};
 </script>
diff --git a/launcher/src/components/UI/edit-page/components/edit/EditBody.vue b/launcher/src/components/UI/edit-page/components/edit/EditBody.vue
index e183b90f29..10d9d200dc 100644
--- a/launcher/src/components/UI/edit-page/components/edit/EditBody.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/EditBody.vue
@@ -10,9 +10,16 @@
       @confirm-consensus="confirmConsensus"
       @info-modal="infoModal"
       @modify-service="modifyService"
+      @external-modify="externalModify"
       @remove-lines="removeConnectionLines"
     />
-    <SetupBody v-else @delete-setup="deleteSetup" @connect-setup="connectSetup" @setup-infos="setupInfos" @open-configs="openConfigs" />
+    <SetupBody
+      v-else
+      @delete-setup="deleteSetup"
+      @connect-setup="connectSetup"
+      @setup-infos="setupInfos"
+      @open-configs="openConfigs"
+    />
   </div>
 </template>
 
@@ -37,7 +44,7 @@ const emit = defineEmits([
   "confirmConsensus",
   "infoModal",
   "modifyService",
-
+  "externalModify",
   "openConfigs",
   "deleteSetup",
 ]);
@@ -115,6 +122,11 @@ const infoModal = (item) => {
   emit("infoModal", item);
 };
 
+const externalModify = (item) => {
+  manageStore.isLineHidden = true;
+  emit("externalModify", item);
+};
+
 const selectRename = async (setup) => {
   setupStore.setupToRename = setup.setupName;
   setupStore.isRenameSetupActive = true;
diff --git a/launcher/src/components/UI/edit-page/components/edit/clients/ConsensusClients.vue b/launcher/src/components/UI/edit-page/components/edit/clients/ConsensusClients.vue
index e3c3a7adac..50bf9df98e 100755
--- a/launcher/src/components/UI/edit-page/components/edit/clients/ConsensusClients.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/clients/ConsensusClients.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="col-start-2 col-end-3 gap-y-5 pt-4 pb-2 grid grid-flow-row auto-rows-max relative">
+  <div
+    class="col-start-2 col-end-3 gap-y-5 pt-4 pb-2 grid grid-flow-row auto-rows-max relative"
+  >
     <div
       v-for="item in getConsensus"
       :key="item.config.serviceID + item.id"
@@ -23,6 +25,7 @@
           @modify-service="modifyService"
           @delete-service="deleteService"
           @info-modal="infoModal"
+          @external-modify="externalModify"
         />
       </TransitionGroup>
     </div>
@@ -38,7 +41,15 @@ import { computed } from "vue";
 import { useSetups } from "../../../../../../store/setups";
 
 //Props & Emits
-const emit = defineEmits(["deleteService", "switchClient", "modifyService", "infoModal", "mouseOver", "mouseLeave"]);
+const emit = defineEmits([
+  "deleteService",
+  "switchClient",
+  "modifyService",
+  "externalModify",
+  "infoModal",
+  "mouseOver",
+  "mouseLeave",
+]);
 
 //Refs
 
@@ -48,7 +59,9 @@ const setupStore = useSetups();
 // computed & watchers properties
 const getConsensus = computed(() => {
   const services = manageStore.newConfiguration
-    .filter((s) => s.setupId === setupStore.selectedSetup?.setupId && s.category === "consensus")
+    .filter(
+      (s) => s.setupId === setupStore.selectedSetup?.setupId && s.category === "consensus"
+    )
     .sort((a, b) => {
       const fa = a.name.toLowerCase();
       const fb = b.name.toLowerCase();
@@ -114,6 +127,10 @@ const modifyService = (item) => {
 const infoModal = (item) => {
   emit("infoModal", item);
 };
+
+const externalModify = (item) => {
+  emit("externalModify", item);
+};
 </script>
 <style scoped>
 .slide-fade-enter-active {
diff --git a/launcher/src/components/UI/edit-page/components/edit/clients/ExecutionClients.vue b/launcher/src/components/UI/edit-page/components/edit/clients/ExecutionClients.vue
index eac164dcd0..00c7337abb 100755
--- a/launcher/src/components/UI/edit-page/components/edit/clients/ExecutionClients.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/clients/ExecutionClients.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="w-full col-start-1 col-end-2 pt-4 pb-2 gap-1 space-y-4 grid grid-flow-row auto-rows-max relative">
+  <div
+    class="w-full col-start-1 col-end-2 pt-4 pb-2 gap-1 space-y-4 grid grid-flow-row auto-rows-max relative"
+  >
     <div
       v-for="item in getExecutions"
       :key="item"
@@ -23,6 +25,7 @@
           @connect-client="connectClient"
           @delete-service="deleteService"
           @info-modal="infoModal"
+          @external-modify="externalModify"
         />
       </TransitionGroup>
     </div>
@@ -38,14 +41,23 @@ import GeneralMenu from "./GeneralMenu.vue";
 import { computed } from "vue";
 import { useSetups } from "../../../../../../store/setups";
 
-const emit = defineEmits(["deleteService", "switchClient", "connectClient", "infoModal", "mouseOver", "mouseLeave"]);
+const emit = defineEmits([
+  "deleteService",
+  "switchClient",
+  "connectClient",
+  "infoModal",
+  "mouseOver",
+  "mouseLeave",
+]);
 const manageStore = useNodeManage();
 const serviceStore = useServices();
 const setupStore = useSetups();
 
 const getExecutions = computed(() => {
   const services = manageStore.newConfiguration
-    .filter((s) => s.category === "execution" && s.setupId === setupStore.selectedSetup.setupId)
+    .filter(
+      (s) => s.category === "execution" && s.setupId === setupStore.selectedSetup.setupId
+    )
     .sort((a, b) => {
       const fa = a.name.toLowerCase();
       const fb = b.name.toLowerCase();
@@ -73,7 +85,12 @@ const displayMenu = (item) => {
   serviceStore.installedServices.forEach((service) => {
     service.displayPluginMenu = false;
   });
-  if (!item.isNotConnectedToConsensus && !item.isNotConnectedToValidator && !item.isRemoveProcessing && !item.isNewClient) {
+  if (
+    !item.isNotConnectedToConsensus &&
+    !item.isNotConnectedToValidator &&
+    !item.isRemoveProcessing &&
+    !item.isNewClient
+  ) {
     item.displayPluginMenu = true;
   }
 };
@@ -108,6 +125,10 @@ const switchClient = (item) => {
 const infoModal = (item) => {
   emit("infoModal", item);
 };
+
+const externalModify = (item) => {
+  emit("externalModify", item);
+};
 </script>
 <style scoped>
 .slide-fade-enter-active {
diff --git a/launcher/src/components/UI/edit-page/components/edit/clients/GeneralMenu.vue b/launcher/src/components/UI/edit-page/components/edit/clients/GeneralMenu.vue
index 2c2f791cc7..dc0bac9406 100644
--- a/launcher/src/components/UI/edit-page/components/edit/clients/GeneralMenu.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/clients/GeneralMenu.vue
@@ -1,8 +1,17 @@
 <template>
-  <div class="absolute inset-x-0 w-full h-full flex justify-center items-center z-10" @mousedown.prevent>
-    <div class="w-2/3 h-2/3 grid grid-cols-2 grid-rows-2 bg-gray-800 p-1 rounded-md gap-1">
+  <div
+    class="absolute inset-x-0 w-full h-full flex justify-center items-center z-10"
+    @mousedown.prevent
+  >
+    <div
+      class="w-2/3 h-2/3 grid grid-cols-2 grid-rows-2 bg-gray-800 p-1 rounded-md gap-1"
+    >
       <img
-        v-if="item.category !== 'execution' && item.service !== 'ExternalExecutionService' && item.service !== 'ExternalConsensusService'"
+        v-if="
+          item.category !== 'execution' &&
+          item.service !== 'ExternalExecutionService' &&
+          item.service !== 'ExternalConsensusService'
+        "
         class="w-7 bg-gray-900 hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200 border border-gray-700 rounded-md"
         src="/img/icon/edit-node-icons/service-connecting.png"
         alt="Trash Icon"
@@ -11,7 +20,10 @@
         @mouseleave="footerStore.cursorLocation = ''"
       />
       <img
-        v-if="item.service !== 'ExternalExecutionService' && item.service !== 'ExternalConsensusService'"
+        v-if="
+          item.service !== 'ExternalExecutionService' &&
+          item.service !== 'ExternalConsensusService'
+        "
         class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
         src="/img/icon/edit-node-icons/switch-client.png"
         alt="Trash Icon"
@@ -19,12 +31,26 @@
         @mouseenter="footerStore.cursorLocation = `${switchClientTooltip}`"
         @mouseleave="footerStore.cursorLocation = ''"
       />
+      <img
+        v-if="
+          item.service === 'ExternalExecutionService' ||
+          item.service === 'ExternalConsensusService'
+        "
+        class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
+        src="/img/icon/edit-node-icons/service-connecting.png"
+        alt="Trash Icon"
+        @click="externalModify"
+        @mouseenter="footerStore.cursorLocation = `${switchClientTooltip}`"
+        @mouseleave="footerStore.cursorLocation = ''"
+      />
       <img
         class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
         src="/img/icon/edit-node-icons/service-delete.png"
         alt="Trash Icon"
         @click="deleteService"
-        @mouseenter="footerStore.cursorLocation = `${deleteServiceTooltip} ${item.name} ${service}`"
+        @mouseenter="
+          footerStore.cursorLocation = `${deleteServiceTooltip} ${item.name} ${service}`
+        "
         @mouseleave="footerStore.cursorLocation = ''"
       />
       <img
@@ -60,7 +86,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["deleteService", "switchClient", "modifyService", "infoModal"]);
+const emit = defineEmits([
+  "deleteService",
+  "switchClient",
+  "modifyService",
+  "infoModal",
+  "externalModify",
+]);
 
 const deleteService = () => {
   emit("deleteService", props.item);
@@ -81,4 +113,9 @@ const infoModal = () => {
   emit("infoModal", props.item);
   footerStore.cursorLocation = "";
 };
+
+const externalModify = () => {
+  emit("externalModify", props.item);
+  footerStore.cursorLocation = "";
+};
 </script>
diff --git a/launcher/src/components/UI/edit-page/components/modals/AddModal.vue b/launcher/src/components/UI/edit-page/components/modals/AddModal.vue
index 4f201dc812..571b058e5f 100644
--- a/launcher/src/components/UI/edit-page/components/modals/AddModal.vue
+++ b/launcher/src/components/UI/edit-page/components/modals/AddModal.vue
@@ -10,8 +10,17 @@
     @confirm-action="confirmInstall"
   >
     <template #content>
-      <AddPanel v-if="isAddPanelActivated" ref="addPanelComponent" :client="client" :properties="properties" />
-      <MevboostRelays v-if="isRelaysActivated" :client="client" :properties="properties" />
+      <AddPanel
+        v-if="isAddPanelActivated"
+        ref="addPanelComponent"
+        :client="client"
+        :properties="properties"
+      />
+      <MevboostRelays
+        v-if="isRelaysActivated"
+        :client="client"
+        :properties="properties"
+      />
       <AddConnection v-if="isModifyActivated" :client="client" :properties="properties" />
     </template>
   </custom-modal>
@@ -59,19 +68,32 @@ const properties = ref({
 const getConfirmText = computed(() => {
   let text = "";
   if (isAddPanelActivated.value) {
-    if (props.client.category === "consensus" && props.client.service === "ExternalConsensusService") {
+    if (
+      props.client.category === "consensus" &&
+      props.client.service === "ExternalConsensusService"
+    ) {
       text = "confirm";
-    } else if (props.client.category === "execution" && props.client.service === "ExternalExecutionService") {
+    } else if (
+      props.client.category === "execution" &&
+      props.client.service === "ExternalExecutionService"
+    ) {
       text = "confirm";
     } else if (
       props.client.category === "consensus" ||
-      (props.client.category === "validator" && !/Web3Signer/.test(props.client.service)) ||
+      (props.client.category === "validator" &&
+        !/Web3Signer/.test(props.client.service)) ||
       /LidoObolExit|ValidatorEjector/.test(props.client.service)
     ) {
       text = "next";
-    } else if (props.client.category === "service" && props.client.service !== "FlashbotsMevBoostService") {
+    } else if (
+      props.client.category === "service" &&
+      props.client.service !== "FlashbotsMevBoostService"
+    ) {
       text = "confirm";
-    } else if (props.client.category === "service" && props.client.service === "FlashbotsMevBoostService") {
+    } else if (
+      props.client.category === "service" &&
+      props.client.service === "FlashbotsMevBoostService"
+    ) {
       text = "next";
     }
   } else if (isRelaysActivated.value) {
@@ -96,11 +118,9 @@ const getSubTitles = computed(() => {
 
 const externalServiceConfirmBtn = computed(() => {
   if (props.client.service === "ExternalExecutionService") {
-    return props.client.config.source === "" || props.client.config.jwtToken === "";
-  } else if (props.client.service === "ExternalConsensusService" && manageStore.externalConsensusSelectedService !== "prysm") {
+    return props.client.config.source === "" && props.client.config.jwtToken === "";
+  } else if (props.client.service === "ExternalConsensusService") {
     return props.client.config.source === "";
-  } else if (props.client.service === "ExternalConsensusService" && manageStore.externalConsensusSelectedService === "prysm") {
-    return props.client.config.source === "" || props.client.config.gateway === "";
   }
   return false;
 });
diff --git a/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue b/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
index 0651fe8c7b..36548dd54f 100644
--- a/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
+++ b/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
@@ -201,7 +201,8 @@ const sources = [
 // });
 
 watchEffect(() => {
-  props.client.config.source = addressLink.value;
+  props.client.config.source = selectedSource.value.name;
+  props.client.config.address = addressLink.value;
   props.client.config.jwtToken = jwtToken.value;
 });
 
diff --git a/launcher/src/components/UI/edit-page/components/modals/ExternalModifying.vue b/launcher/src/components/UI/edit-page/components/modals/ExternalModifying.vue
new file mode 100644
index 0000000000..beea8631b1
--- /dev/null
+++ b/launcher/src/components/UI/edit-page/components/modals/ExternalModifying.vue
@@ -0,0 +1,244 @@
+<template>
+  <custom-modal
+    :main-title="`${client.name} - ${client.category}`"
+    :client="client"
+    :sub-title="getSubTitles"
+    :confirm-text="getConfirmText"
+    :disabled-button="disabledButton || externalServiceConfirmBtn"
+    click-outside-text="Click outside to cancel"
+    @close-window="closeWindow"
+    @confirm-action="confirmInstall"
+  >
+    <template #content>
+      <div
+        class="w-full h-full flex flex-col justify-evenly items-center mx-auto px-4 py-2 space-y-2 mt-6 relative"
+      >
+        <div
+          v-if="
+            props.client.service === 'ExternalExecutionService' ||
+            props.client.service === 'ExternalConsensusService'
+          "
+          class="w-full flex justify-center items-center"
+        >
+          <div class="w-full grid grid-cols-12 items-center text-md">
+            <img
+              class="col-start-1 w-8"
+              src="/img/icon/edit-node-icons/service-category.png"
+              alt="Path Icon"
+            />
+            <span class="col-start-2 col-span-3 text-gray-400 text-md text-left"
+              >EXTERNAL SOURCE</span
+            >
+
+            <div
+              class="col-start-6 col-span-full w-full relative bg-[#141516] border border-gray-500 rounded-md grid grid-cols-12 items-center"
+              @click="dropdown"
+            >
+              <div
+                class="col-start-1 col-span-full flex justify-center items-center overflow-hidden"
+              >
+                <div
+                  class="w-3/4 px-2 py-1 text-sm text-gray-400 capitalize flex justify-start items-center space-x-4"
+                >
+                  <img
+                    v-if="selectedSource.icon ? selectedSource.icon : null"
+                    :src="selectedSource.icon"
+                    class="w-5"
+                  />
+                  <span>{{
+                    selectedSource.name ? selectedSource.name : "Select Source"
+                  }}</span>
+                </div>
+
+                <button
+                  class="w-1/4 h-full p-1 text-gray-500 hover:text-gray-200 flex justify-end items-center"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-4 w-4"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              <div
+                v-if="isOpen"
+                class="absolute top-8 left-0 z-10 mt-2 max-h-[160px] w-64 rounded-md bg-gray-700 shadow-lg overflow-x-hidden overflow-y-auto"
+                @mouseleave="isOpen = false"
+              >
+                <div class="divide-y divide-gray-500">
+                  <div
+                    v-for="source in sources"
+                    :key="source"
+                    class="w-full flex justify-center items-center space-x-4 px-4 py-2 text-sm text-gray-300 hover:text-gray-100 hover:bg-blue-500 uppercase cursor-pointer"
+                    @click="pickSource(source)"
+                  >
+                    <img v-if="source.icon" :src="source.icon" class="w-6" />
+                    <span>{{ source.name }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="
+            (props.client.service === 'ExternalExecutionService' ||
+              props.client.service === 'ExternalConsensusService') &&
+            selectedSource.name === 'custom'
+          "
+          class="w-full flex justify-center items-center"
+        >
+          <div class="w-full grid grid-cols-12 items-center text-md">
+            <img
+              class="col-start-1 w-8"
+              src="/img/icon/edit-node-icons/service-external-source.png"
+              alt="Path Icon"
+            />
+            <span class="col-start-2 col-span-3 text-gray-400 text-left">ADDRESS</span>
+            <input
+              v-model="addressLink"
+              class="col-start-6 col-span-7 min-h-[30px] border border-gray-500 px-2 py-1 text-left text-gray-400 text-xs rounded bg-[#141516] focus:border-teal-500"
+              type="text"
+              autofocus
+            />
+          </div>
+        </div>
+
+        <!-- <div
+          v-if="
+            client.service === 'ExternalExecutionService' &&
+            client.category == 'execution'
+          "
+          class="w-full flex justify-center items-center"
+        >
+          <div class="w-full grid grid-cols-12 items-center text-md">
+            <img
+              class="col-start-1 w-8"
+              src="/img/icon/edit-node-icons/service-jwt-token-connection.png"
+              alt="Path Icon"
+            />
+            <span class="col-start-2 col-span-3 text-gray-400 text-left">JWT TOKEN</span>
+            <input
+              v-model="jwtToken"
+              class="col-start-6 col-span-7 min-h-[30px] border border-gray-500 px-2 py-1 text-left text-gray-400 text-xs rounded bg-[#141516] focus:border-teal-500"
+              type="text"
+              autofocus
+            />
+          </div>
+        </div> -->
+      </div>
+    </template>
+  </custom-modal>
+</template>
+<script setup>
+import CustomModal from "./CustomModal.vue";
+import { ref, onMounted, computed, watch } from "vue";
+
+const props = defineProps({
+  client: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(["closeWindow", "confirmInstall"]);
+
+//Refs
+
+const selectedSource = ref("");
+const addressLink = ref("");
+const isOpen = ref(false);
+const disabledButton = ref(true);
+const properties = ref(null);
+
+const sources = [
+  { name: "custom", icon: null },
+  { name: "stereumplus 1", icon: "/img/icon/stereumplus-icons/stereumplus-icon.png" },
+  { name: "stereumplus 2", icon: "/img/icon/stereumplus-icons/stereumplus-icon.png" },
+  { name: "stereumplus 3", icon: "/img/icon/stereumplus-icons/stereumplus-icon.png" },
+];
+
+//Computed & Watcher
+
+//Replace Sources by a computed source like below then remove the source above
+// const sources = computed(() => {
+//   return logic to get source
+// });
+
+//Computed & Watcher
+
+const getConfirmText = computed(() => {
+  return "confirm";
+});
+
+const getSubTitles = computed(() => {
+  return "External Source";
+});
+
+const externalServiceConfirmBtn = computed(() => {
+  const isCustomSource = selectedSource.value.name === "custom";
+  const hasAddressLink = addressLink.value !== "";
+  const hasSelectedSource = selectedSource.value.name !== "";
+  return !(isCustomSource ? hasAddressLink : hasSelectedSource);
+});
+
+watch([selectedSource, addressLink], () => {
+  disabledButton.value = externalServiceConfirmBtn.value;
+});
+//Lifecycle Hooks
+
+onMounted(() => {
+  addressLink.value = "";
+  selectedSource.value = "";
+});
+
+//Methods
+
+const dropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const pickSource = (source) => {
+  isOpen.value = false;
+  selectedSource.value = source;
+};
+
+const confirmInstall = () => {
+  properties.value = {
+    source: selectedSource.value.name,
+    address: addressLink.value,
+  };
+
+  emit("confirmInstall", props.client, properties.value);
+};
+
+const closeWindow = () => {
+  emit("closeWindow", props.client);
+};
+</script>
+
+<style scoped>
+.slide-enter-from,
+.slide-leave-to {
+  opacity: 0;
+}
+
+.slide-enter-active {
+  transition: opacity 0.3s ease-out;
+}
+.slide-leave-active {
+  transition: opacity 0.3s ease-in;
+}
+.slide-enter-to,
+.slide-leave-from {
+  opacity: 1;
+}
+</style>
diff --git a/launcher/src/components/UI/edit-page/sections/ServiceSection.vue b/launcher/src/components/UI/edit-page/sections/ServiceSection.vue
index 47d227206e..bd4ef2fe10 100644
--- a/launcher/src/components/UI/edit-page/sections/ServiceSection.vue
+++ b/launcher/src/components/UI/edit-page/sections/ServiceSection.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="w-full h-full col-start-1 col-span-full row-start-2 row-span-full pt-1 mt-1">
+  <div
+    class="w-full h-full col-start-1 col-span-full row-start-2 row-span-full pt-1 mt-1"
+  >
     <ServiceBody @change-connection="changeConnection" @delete-service="deleteService" />
   </div>
 </template>
diff --git a/launcher/src/components/UI/node-page/NodeScreen.vue b/launcher/src/components/UI/node-page/NodeScreen.vue
index 6097434155..55e3285821 100755
--- a/launcher/src/components/UI/node-page/NodeScreen.vue
+++ b/launcher/src/components/UI/node-page/NodeScreen.vue
@@ -6,14 +6,21 @@
         <SidebarSection />
       </div>
       <div class="col-start-2 col-end-17 w-full h-full">
-        <NodeSection @open-expert="openExpertModal" @open-log="openLogPage" @export-setup="exportSetup" />
+        <NodeSection
+          @open-expert="openExpertModal"
+          @open-log="openLogPage"
+          @export-setup="exportSetup"
+          @external-modify="openExternalModifying"
+        />
       </div>
       <div class="col-start-17 col-end-21 ml-1 grid grid-cols-2 grid-rows-9">
         <NetworkStatus />
         <ServiceSection @open-expert="openExpertModal" @open-logs="openLogPage" />
       </div>
       <div class="col-start-21 col-end-25 px-1 flex flex-col justify-between">
-        <div class="h-[60px] self-center w-full flex flex-col justify-center items-center">
+        <div
+          class="h-[60px] self-center w-full flex flex-col justify-center items-center"
+        >
           <button
             class="info-toggle-btn w-full h-[34px] rounded-full bg-[#264744] hover:bg-[#325e5a] px-2 py-1 text-gray-200 active:scale-95 shadow-md shadow-zinc-800 active:shadow-none transition-all duration-200 ease-in-out uppercase flex justify-center items-center"
             @click="alarmToggle"
@@ -24,10 +31,20 @@
             "
             @mouseleave="footerStore.cursorLocation = ''"
           >
-            <img class="w-8" src="/img/icon/node-page-icons/access-tutorial-icon.png" alt="information" />
+            <img
+              class="w-8"
+              src="/img/icon/node-page-icons/access-tutorial-icon.png"
+              alt="information"
+            />
           </button>
         </div>
         <AlertSection :info-aralm="nodeStore.infoAlarm" />
+        <ExternalModifying
+          v-if="isExternalModifyingActive"
+          :client="externalService"
+          @close-window="closeExternalModal"
+          @confirm-install="confirmExternalModifying"
+        />
       </div>
       <LogsSection
         v-if="isLogsPageActive"
@@ -37,7 +54,11 @@
         @export-all-log="updateAndExportAllLogs"
         @export-customized-logs="updateAndExportAllLogs"
       />
-      <ExpertWindow v-if="isExpertModeOpen" :item="expertModeClient" @hide-modal="closeExpertMode" />
+      <ExpertWindow
+        v-if="isExpertModeOpen"
+        :item="expertModeClient"
+        @hide-modal="closeExpertMode"
+      />
     </div>
 
     <!-- End Node main layout -->
@@ -65,6 +86,7 @@ import LogsSection from "./sections/LogsSection.vue";
 import NodeSection from "./sections/NodeSection.vue";
 import ServiceSection from "./sections/ServiceSection.vue";
 import SidebarSection from "./sections/SidebarSection";
+import ExternalModifying from "../edit-page/components/modals/ExternalModifying.vue";
 
 //*****************  Store & Refs *****************
 const nodeStore = useNodeStore();
@@ -79,6 +101,8 @@ const { updateDom } = useMultiSetups();
 const expertModeClient = ref(null);
 const isExpertModeOpen = ref(false);
 const isLogsPageActive = ref(false);
+const isExternalModifyingActive = ref(false);
+const externalService = ref(null);
 
 let polling = null;
 let pollingVitals = null;
@@ -176,7 +200,10 @@ const checkForListingKeys = async () => {
     serviceStore.installedServices &&
     serviceStore.installedServices.length > 0 &&
     serviceStore.installedServices.some(
-      (s) => s.category === "validator" && s.state === "running" && (!s.config.keys || !s.config.keys.length > 0)
+      (s) =>
+        s.category === "validator" &&
+        s.state === "running" &&
+        (!s.config.keys || !s.config.keys.length > 0)
     )
   ) {
     clearInterval(pollingListingKeys);
@@ -190,7 +217,11 @@ const updateConnectionStats = async () => {
   controlStore.ipAddress = stats.ipAddress;
 };
 const updateServiceLogs = async () => {
-  if (serviceStore.installedServices && serviceStore.installedServices.length > 0 && headerStore.refresh) {
+  if (
+    serviceStore.installedServices &&
+    serviceStore.installedServices.length > 0 &&
+    headerStore.refresh
+  ) {
     const data = await ControlService.getServiceLogs({ logs_tail: 150 });
     nodeStore.serviceLogs = data;
   }
@@ -205,9 +236,13 @@ const updateAndExportAllLogs = async (client) => {
     until: nodeStore.untilDateParsDays,
   });
 
-  const fileName = `${client.name}_${nodeStore.isExportCustomizedDateLoading ? "customized" : "all"}_logs.txt`;
+  const fileName = `${client.name}_${
+    nodeStore.isExportCustomizedDateLoading ? "customized" : "all"
+  }_logs.txt`;
   const data = [...nodeStore.allLogsForExp.logs].reverse();
-  const lineByLine = data.map((line, index) => `#${data.length - index}: ${line}`).join("\n\n");
+  const lineByLine = data
+    .map((line, index) => `#${data.length - index}: ${line}`)
+    .join("\n\n");
   const blob = new Blob([lineByLine], { type: "text/plain;charset=utf-8" });
   saveAs(blob, fileName);
 
@@ -219,7 +254,11 @@ const updateAndExportAllLogs = async (client) => {
 
 const updateServerVitals = async () => {
   try {
-    if (serviceStore.installedServices && serviceStore.installedServices.length > 0 && headerStore.refresh) {
+    if (
+      serviceStore.installedServices &&
+      serviceStore.installedServices.length > 0 &&
+      headerStore.refresh
+    ) {
       const data = await ControlService.getServerVitals();
       controlStore.cpu = data.cpu;
       controlStore.availDisk = data.availDisk;
@@ -236,6 +275,15 @@ const openExpertModal = (item) => {
   expertModeClient.value.expertOptionsModal = true;
   isExpertModeOpen.value = true;
 };
+const closeExternalModal = () => {
+  isExternalModifyingActive.value = false;
+};
+
+const confirmExternalModifying = async (client, properties) => {
+  console.log("confirmExternalModifying", properties);
+
+  isExternalModifyingActive.value = false;
+};
 
 const updateNodeStats = async () => {
   await useRefreshNodeStats();
@@ -251,18 +299,31 @@ const closeExpertMode = () => {
 // ********** LOGS **********
 
 const exportLogs = async (client) => {
-  const currentService = nodeStore.serviceLogs.find((service) => service.config?.serviceID === client.config?.serviceID);
+  const currentService = nodeStore.serviceLogs.find(
+    (service) => service.config?.serviceID === client.config?.serviceID
+  );
 
-  const fileName = nodeStore.exportLogs ? `${client.name}_150_logs.txt` : `${client.name}_all_logs.txt`;
+  const fileName = nodeStore.exportLogs
+    ? `${client.name}_150_logs.txt`
+    : `${client.name}_all_logs.txt`;
 
   // Select the data based on the condition
-  const data = nodeStore.exportLogs ? currentService.logs.slice(-150).reverse() : currentService.logs.reverse();
+  const data = nodeStore.exportLogs
+    ? currentService.logs.slice(-150).reverse()
+    : currentService.logs.reverse();
 
-  const lineByLine = data.map((line, index) => `#${data.length - index}: ${line}`).join("\n\n");
+  const lineByLine = data
+    .map((line, index) => `#${data.length - index}: ${line}`)
+    .join("\n\n");
   const blob = new Blob([lineByLine], { type: "text/plain;charset=utf-8" });
   saveAs(blob, fileName);
 };
 
+const openExternalModifying = (item) => {
+  externalService.value = item;
+  isExternalModifyingActive.value = true;
+};
+
 const openLogPage = (item) => {
   nodeStore.clientToLogs = item;
   isLogsPageActive.value = true;
diff --git a/launcher/src/components/UI/node-page/components/modals/CustomModal.vue b/launcher/src/components/UI/node-page/components/modals/CustomModal.vue
index fd8f8ad186..5fe24d7d95 100644
--- a/launcher/src/components/UI/node-page/components/modals/CustomModal.vue
+++ b/launcher/src/components/UI/node-page/components/modals/CustomModal.vue
@@ -18,14 +18,18 @@
           <div v-if="mainTitle" class="text-xl font-bold py-2 text-gray-200 uppercase">
             <p>{{ mainTitle }}</p>
           </div>
-          <div v-if="messageText" class="text-md font-bold py-2" :class="bgColor ? 'text-gray-200' : null">
+          <div
+            v-if="messageText"
+            class="text-md font-bold py-2"
+            :class="bgColor ? 'text-gray-200' : null"
+          >
             <p>{{ messageText }}</p>
           </div>
           <slot name="content"></slot>
         </div>
         <div class="flex justify-end text-md font-bold py-3 mt-2 text-center space-y-4">
           <button
-            v-if="confirmText !== ''"
+            v-if="confirmText !== '' && confirmText !== null"
             class="w-[8rem] mr-2 px-5 py-2 shadow-sm rounded-full hover:shadow-lg transition-all duration-300 ease-in-out hover:scale-110 active:scale-100 text-gray-200 font-semibold uppercase"
             :class="[
               btnColor === 'red'
@@ -38,9 +42,10 @@
             {{ confirmText }}
           </button>
 
-          <span class="absolute bottom-1 left-[17rem] text-xs flex justify-center items-center text-red-500 mx-auto">{{
-            clickOutsideText
-          }}</span>
+          <span
+            class="absolute bottom-1 left-[17rem] text-xs flex justify-center items-center text-red-500 mx-auto"
+            >{{ clickOutsideText }}</span
+          >
         </div>
       </div>
     </div>
@@ -58,7 +63,17 @@ const emitConfirmAction = () => {
   emit("confirmAction");
 };
 
-const { icon, altText, mainTitle, messageText, confirmText, clickOutsideText, bgColor, btnColor, iconSize } = defineProps({
+const {
+  icon,
+  altText,
+  mainTitle,
+  messageText,
+  confirmText,
+  clickOutsideText,
+  bgColor,
+  btnColor,
+  iconSize,
+} = defineProps({
   icon: String,
   altText: String,
   mainTitle: String,
diff --git a/launcher/src/components/UI/node-page/components/node/ConfigBody.vue b/launcher/src/components/UI/node-page/components/node/ConfigBody.vue
index 3440309bae..d8c5b4b384 100644
--- a/launcher/src/components/UI/node-page/components/node/ConfigBody.vue
+++ b/launcher/src/components/UI/node-page/components/node/ConfigBody.vue
@@ -11,9 +11,15 @@
       <div
         class="col-start-1 col-span-full row-start-1 row-span-1 w-full mx-auto grid grid-cols-3 h-6 bg-[#33393E] border border-gray-950 rounded-t-[5px] text-gray-300 text-xs font-[400] font-sans"
       >
-        <span class="col-start-1 justify-self-center self-center">{{ $t("editModals.executionClients") }}</span>
-        <span class="col-start-2 justify-self-center self-center">{{ $t("editModals.consensusClients") }}</span>
-        <span class="col-start-3 justify-self-center self-center">{{ $t("editBody.validator") }} </span>
+        <span class="col-start-1 justify-self-center self-center">{{
+          $t("editModals.executionClients")
+        }}</span>
+        <span class="col-start-2 justify-self-center self-center">{{
+          $t("editModals.consensusClients")
+        }}</span>
+        <span class="col-start-3 justify-self-center self-center"
+          >{{ $t("editBody.validator") }}
+        </span>
       </div>
       <ClientSkeleton v-for="i in skeletons" v-show="loadingClients" :key="i" />
       <ExecutionClients
@@ -26,6 +32,7 @@
         @mouse-over="lineDraw"
         @mouse-leave="removeLines"
         @copy-jwt="copyJwt"
+        @external-modify="externalModify"
       />
       <ConsensusClients
         @open-expert="openExpert"
@@ -36,6 +43,7 @@
         @open-doc="openDocs"
         @mouse-over="lineDraw"
         @mouse-leave="removeLines"
+        @external-modify="externalModify"
       />
       <ValidatorClients
         @open-expert="openExpert"
@@ -71,6 +79,7 @@ const emit = defineEmits([
   "lineDraw",
   "removeLines",
   "copyJwt",
+  "externalModify",
 ]);
 
 // Refs
@@ -121,4 +130,8 @@ const removeLines = () => {
 const copyJwt = (jwt) => {
   emit("copyJwt", jwt);
 };
+
+const externalModify = (service) => {
+  emit("externalModify", service);
+};
 </script>
diff --git a/launcher/src/components/UI/node-page/components/node/NodeBody.vue b/launcher/src/components/UI/node-page/components/node/NodeBody.vue
index 579ac60344..f1d940a4f9 100755
--- a/launcher/src/components/UI/node-page/components/node/NodeBody.vue
+++ b/launcher/src/components/UI/node-page/components/node/NodeBody.vue
@@ -1,17 +1,28 @@
 <template>
-  <div class="w-full h-full max-h-[430px] rounded-md border border-gray-600 overflow-hidden bg-[#151618] flex justify-center items-center">
+  <div
+    class="w-full h-full max-h-[430px] rounded-md border border-gray-600 overflow-hidden bg-[#151618] flex justify-center items-center"
+  >
     <ConfigBody
       v-if="setupStore.isConfigViewActive"
       @open-expert="openExpert"
       @open-docs="openDocs"
       @open-log="openLog"
       @copy-jwt="copyJwt"
+      @external-modify="externalModify"
       @click-outside="clickOutside"
       @line-draw="lineDrawHandler"
       @remove-lines="removeConnectionLines"
     />
-    <SetupBody v-if="!setupStore.isConfigViewActive" @open-setup="openSetup" @export-setup="exportSetup" />
-    <PluginLogs v-if="isPluginLogPageActive" :item="itemToLogs" @close-log="closePluginLogsPage" />
+    <SetupBody
+      v-if="!setupStore.isConfigViewActive"
+      @open-setup="openSetup"
+      @export-setup="exportSetup"
+    />
+    <PluginLogs
+      v-if="isPluginLogPageActive"
+      :item="itemToLogs"
+      @close-log="closePluginLogsPage"
+    />
   </div>
 </template>
 
@@ -28,7 +39,13 @@ import ControlService from "@/store/ControlService";
 import LeaderLine from "leader-line-new";
 import { useSetups } from "@/store/setups";
 
-const emit = defineEmits(["openExpert", "openLog", "setupState", "exportSetup"]);
+const emit = defineEmits([
+  "openExpert",
+  "openLog",
+  "setupState",
+  "exportSetup",
+  "externalModify",
+]);
 
 // Refs
 const isPluginLogPageActive = ref(false);
@@ -61,7 +78,12 @@ watchEffect(() => {
 
 const oneWayConnection = (start, end, startSocket, endSocket) => {
   if (start && end) {
-    let newLine = new LeaderLine(start, end, { dash: { animation: true } }, { hide: true });
+    let newLine = new LeaderLine(
+      start,
+      end,
+      { dash: { animation: true } },
+      { hide: true }
+    );
     newLine.position();
     newLine.setOptions({
       size: 2,
@@ -83,7 +105,9 @@ const lineDrawHandler = (item) => {
         const dependencies = serviceStore.installedServices.filter(
           (s) =>
             s.config?.dependencies?.executionClients?.length > 0 &&
-            s.config?.dependencies?.executionClients.some((d) => d.id === item.config?.serviceID)
+            s.config?.dependencies?.executionClients.some(
+              (d) => d.id === item.config?.serviceID
+            )
         );
         dependencies.forEach((d) => {
           if (d.category === "consensus") {
@@ -100,8 +124,12 @@ const lineDrawHandler = (item) => {
         const dependencies = serviceStore.installedServices.filter(
           (s) =>
             (s.config?.dependencies?.consensusClients?.length > 0 &&
-              s.config?.dependencies?.consensusClients.some((d) => d.id === item.config?.serviceID)) ||
-            item.config?.dependencies?.executionClients.some((d) => d.id === s.config?.serviceID)
+              s.config?.dependencies?.consensusClients.some(
+                (d) => d.id === item.config?.serviceID
+              )) ||
+            item.config?.dependencies?.executionClients.some(
+              (d) => d.id === s.config?.serviceID
+            )
         );
         dependencies.forEach((d) => {
           if (d.category === "validator") {
@@ -124,9 +152,15 @@ const lineDrawHandler = (item) => {
       case "validator": {
         const dependencies = serviceStore.installedServices.filter(
           (s) =>
-            item.config?.dependencies?.executionClients.some((d) => d.id === s.config?.serviceID) ||
-            item.config?.dependencies?.consensusClients.some((d) => d.id === s.config?.serviceID) ||
-            s.config?.dependencies?.consensusClients.some((d) => d.id === item.config?.serviceID)
+            item.config?.dependencies?.executionClients.some(
+              (d) => d.id === s.config?.serviceID
+            ) ||
+            item.config?.dependencies?.consensusClients.some(
+              (d) => d.id === s.config?.serviceID
+            ) ||
+            s.config?.dependencies?.consensusClients.some(
+              (d) => d.id === item.config?.serviceID
+            )
         );
         dependencies.forEach((d) => {
           if (d.category === "validator") {
@@ -205,6 +239,10 @@ const exportSetup = (setup) => {
   emit("exportSetup", setup);
 };
 
+const externalModify = (item) => {
+  emit("externalModify", item);
+};
+
 const copyJwt = async (item) => {
   let volume = "";
   item.config?.volumes.forEach((vol) => {
diff --git a/launcher/src/components/UI/node-page/components/node/clients/ClientButtons.vue b/launcher/src/components/UI/node-page/components/node/clients/ClientButtons.vue
index fa6baef13e..132caff2b0 100755
--- a/launcher/src/components/UI/node-page/components/node/clients/ClientButtons.vue
+++ b/launcher/src/components/UI/node-page/components/node/clients/ClientButtons.vue
@@ -1,12 +1,26 @@
 import { useNodeStore } from '@/store/theNode';
 <template>
-  <div class="col-start-2 col-span-1 grid grid-cols-3 grid-rows-3 gap-1 p-1" @pointerdown.prevent.stop>
+  <div
+    class="col-start-2 col-span-1 grid grid-cols-3 grid-rows-3 gap-1 p-1"
+    @pointerdown.prevent.stop
+  >
     <div
-      v-if="props.client.service !== 'ExternalExecutionService' && props.client.service !== 'ExternalConsensusService'"
+      v-if="
+        props.client.service !== 'ExternalExecutionService' &&
+        props.client.service !== 'ExternalConsensusService'
+      "
       class="p-1 col-start-1 col-span-1 flex justify-center items-center bg-gray-900 hover:bg-gray-600 rounded-md"
     >
-      <button v-if="props.client.serviceIsPending" type="button" class="w-full h-full rounded-md disabled">
-        <img src="/img/icon/loading-icons/loading-circle.png" alt="icon" class="w-4 animate-spin" />
+      <button
+        v-if="props.client.serviceIsPending"
+        type="button"
+        class="w-full h-full rounded-md disabled"
+      >
+        <img
+          src="/img/icon/loading-icons/loading-circle.png"
+          alt="icon"
+          class="w-4 animate-spin"
+        />
       </button>
       <button
         v-else-if="props.client.state == 'running'"
@@ -15,14 +29,22 @@ import { useNodeStore } from '@/store/theNode';
         @mouseenter="footerStore.cursorLocation = `${turnOff}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
-        <img src="/img/icon/node-page-icons/service-command-turn-off.png" alt="icon" class="w-4 active:scale-95" />
+        <img
+          src="/img/icon/node-page-icons/service-command-turn-off.png"
+          alt="icon"
+          class="w-4 active:scale-95"
+        />
       </button>
       <button
         v-else-if="props.client.state == 'restarting'"
         class="w-full h-full transition-colors duration-200 rounded-md flex justify-center items-center"
         @click="stateHandler"
       >
-        <img src="/img/icon/node-page-icons/service-command-pending.png" alt="icon" class="w-4 active:scale-95" />
+        <img
+          src="/img/icon/node-page-icons/service-command-pending.png"
+          alt="icon"
+          class="w-4 active:scale-95"
+        />
       </button>
       <button
         v-else
@@ -31,44 +53,89 @@ import { useNodeStore } from '@/store/theNode';
         @mouseenter="footerStore.cursorLocation = `${turnOn}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
-        <img src="/img/icon/node-page-icons/service-command-turn-on.png" alt="icon" class="w-4 active:scale-95" />
+        <img
+          src="/img/icon/node-page-icons/service-command-turn-on.png"
+          alt="icon"
+          class="w-4 active:scale-95"
+        />
       </button>
     </div>
     <button
-      v-if="props.client.service !== 'ExternalExecutionService' && props.client.service !== 'ExternalConsensusService'"
+      v-if="
+        props.client.service !== 'ExternalExecutionService' &&
+        props.client.service !== 'ExternalConsensusService'
+      "
       class="col-start-2 col-span-1 p-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md flex justify-center items-center"
       @click="restartHandler"
       @mouseenter="footerStore.cursorLocation = `${restart}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img src="/img/icon//node-page-icons/service-command-restart.png" alt="icon" class="w-4 active:scale-95" />
+      <img
+        src="/img/icon//node-page-icons/service-command-restart.png"
+        alt="icon"
+        class="w-4 active:scale-95"
+      />
+    </button>
+    <button
+      v-if="
+        props.client.service === 'ExternalExecutionService' ||
+        props.client.service === 'ExternalConsensusService'
+      "
+      class="col-start-1 col-span-1 p-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md flex justify-center items-center"
+      @click="externalModify"
+      @mouseenter="footerStore.cursorLocation = `${restart}`"
+      @mouseleave="footerStore.cursorLocation = ''"
+    >
+      <img
+        src="/img/icon//edit-node-icons/service-connecting.png"
+        alt="icon"
+        class="w-4 active:scale-95"
+      />
     </button>
     <button
       class="col-span-1 p-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md"
-      :class="props.client.name === 'External' ? 'col-start-1' : 'col-start-3'"
+      :class="props.client.name === 'External' ? '' : 'col-start-3'"
       @click="openExpert"
       @mouseenter="footerStore.cursorLocation = `${expert}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img src="/img/icon/node-page-icons/service-command-open-settings.png" alt="icon" class="w-8 active:scale-95" />
+      <img
+        src="/img/icon/node-page-icons/service-command-open-settings.png"
+        alt="icon"
+        class="w-8 active:scale-95"
+      />
     </button>
     <button
-      v-if="props.client.service !== 'ExternalExecutionService' && props.client.service !== 'ExternalConsensusService'"
+      v-if="
+        props.client.service !== 'ExternalExecutionService' &&
+        props.client.service !== 'ExternalConsensusService'
+      "
       class="col-start-1 row-start-2 col-span-1 p-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md flex justify-center items-center"
       @click="openLog"
       @mouseenter="footerStore.cursorLocation = `${logs}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img src="/img/icon/node-page-icons/service-command-open-logs.png" alt="icon" class="w-4 active:scale-95" />
+      <img
+        src="/img/icon/node-page-icons/service-command-open-logs.png"
+        alt="icon"
+        class="w-4 active:scale-95"
+      />
     </button>
     <button
-      v-if="props.client.service !== 'ExternalExecutionService' && props.client.service !== 'ExternalConsensusService'"
+      v-if="
+        props.client.service !== 'ExternalExecutionService' &&
+        props.client.service !== 'ExternalConsensusService'
+      "
       class="col-start-2 row-start-2 col-span-1 p-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md flex justify-center items-center"
       @click="openDoc"
       @mouseenter="footerStore.cursorLocation = `${docs}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img src="/img/icon/node-page-icons/service-command-open-docs.png" alt="icon" class="w-5 active:scale-95" />
+      <img
+        src="/img/icon/node-page-icons/service-command-open-docs.png"
+        alt="icon"
+        class="w-5 active:scale-95"
+      />
     </button>
     <button
       v-if="
@@ -81,7 +148,11 @@ import { useNodeStore } from '@/store/theNode';
       @mouseenter="footerStore.cursorLocation = `${resync}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img src="/img/icon/node-page-icons/service-command-resync-client.png" alt="icon" class="w-4 active:scale-95" />
+      <img
+        src="/img/icon/node-page-icons/service-command-resync-client.png"
+        alt="icon"
+        class="w-4 active:scale-95"
+      />
     </button>
     <button
       v-if="props.client.service == 'TekuValidatorService'"
@@ -90,7 +161,11 @@ import { useNodeStore } from '@/store/theNode';
       @mouseenter="footerStore.cursorLocation = `${removeLockBtn}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img src="/img/icon/node-page-icons/service-command-delete-lockfile.png" alt="icon" class="w-4 h-4 active:scale-95" />
+      <img
+        src="/img/icon/node-page-icons/service-command-delete-lockfile.png"
+        alt="icon"
+        class="w-4 h-4 active:scale-95"
+      />
     </button>
     <button
       v-if="props.client.service == 'GethService'"
@@ -99,18 +174,30 @@ import { useNodeStore } from '@/store/theNode';
       @mouseenter="footerStore.cursorLocation = `${pruning}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img src="/img/icon/node-page-icons/service-command-pruning.png" alt="icon" class="active:scale-95" />
+      <img
+        src="/img/icon/node-page-icons/service-command-pruning.png"
+        alt="icon"
+        class="active:scale-95"
+      />
     </button>
     <button
-      v-if="props.client.category == 'execution' && props.client.service !== 'ExternalExecutionService'"
+      v-if="
+        props.client.category == 'execution' &&
+        props.client.service !== 'ExternalExecutionService'
+      "
       class="row-start-3 col-span-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md flex justify-center items-center"
       :class="props.client.service == 'GethService' ? 'col-start-2' : 'col-start-1'"
       @click="copyJwt"
       @mouseenter="footerStore.cursorLocation = `${copyToken}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img src="/img/icon/node-page-icons/service-command-copy-jwt.png" alt="icon" class="w-4 h-4 active:scale-95" />
+      <img
+        src="/img/icon/node-page-icons/service-command-copy-jwt.png"
+        alt="icon"
+        class="w-4 h-4 active:scale-95"
+      />
     </button>
+
     <slot></slot>
   </div>
 </template>
@@ -138,7 +225,17 @@ const props = defineProps({
   client: Object,
 });
 
-const emit = defineEmits(["openExpert", "openLog", "openDoc", "stateHandler", "restartHandler", "openResync", "openPruning", "copyJwt"]);
+const emit = defineEmits([
+  "openExpert",
+  "openLog",
+  "openDoc",
+  "stateHandler",
+  "restartHandler",
+  "openResync",
+  "openPruning",
+  "copyJwt",
+  "externalModify",
+]);
 
 const nodeStore = useNodeStore();
 
@@ -192,4 +289,10 @@ const copyJwt = () => {
   emit("copyJwt", props.client);
   footerStore.cursorLocation = "";
 };
+
+const externalModify = () => {
+  nodeStore.isLineHidden = true;
+  emit("externalModify", props.client);
+  footerStore.cursorLocation = "";
+};
 </script>
diff --git a/launcher/src/components/UI/node-page/components/node/clients/ConsensusClients.vue b/launcher/src/components/UI/node-page/components/node/clients/ConsensusClients.vue
index 73ed42ffdb..e8653803c1 100755
--- a/launcher/src/components/UI/node-page/components/node/clients/ConsensusClients.vue
+++ b/launcher/src/components/UI/node-page/components/node/clients/ConsensusClients.vue
@@ -21,9 +21,15 @@
         @restart-handler="restartHandler"
         @open-doc="openDoc"
         @open-resync="openResync(item)"
+        @external-modify="externalModify"
       />
       <TransitionGroup name="fadeModal">
-        <ResyncModal v-if="item.isResyncModalOpen" icon-size="w-14" :item="item" @close-window="closeResyncModal(item)" />
+        <ResyncModal
+          v-if="item.isResyncModalOpen"
+          icon-size="w-14"
+          :item="item"
+          @close-window="closeResyncModal(item)"
+        />
       </TransitionGroup>
     </div>
   </div>
@@ -38,7 +44,16 @@ import ClientLayout from "./ClientLayout.vue";
 import ClientButtons from "./ClientButtons.vue";
 import { useSetups } from "../../../../../../store/setups";
 
-const emit = defineEmits(["openExpert", "openLog", "openDoc", "stateHandler", "restartHandler", "mouseOver", "mouseLeave"]);
+const emit = defineEmits([
+  "openExpert",
+  "openLog",
+  "openDoc",
+  "stateHandler",
+  "restartHandler",
+  "mouseOver",
+  "mouseLeave",
+  "externalModify",
+]);
 
 //Refs
 const nodeStore = useNodeStore();
@@ -51,7 +66,9 @@ const getConsensusServices = computed(() => {
   }
 
   const services = serviceStore.installedServices
-    .filter((s) => s.category === "consensus" && s.setupId === setupStore.selectedSetup?.setupId)
+    .filter(
+      (s) => s.category === "consensus" && s.setupId === setupStore.selectedSetup?.setupId
+    )
     .sort((a, b) => {
       const fa = a.name.toLowerCase();
       const fb = b.name.toLowerCase();
@@ -97,6 +114,10 @@ const stateHandler = (item) => {
 const restartHandler = (item) => {
   emit("restartHandler", item);
 };
+
+const externalModify = (item) => {
+  emit("externalModify", item);
+};
 </script>
 
 <style scoped>
diff --git a/launcher/src/components/UI/node-page/components/node/clients/ExecutionClients.vue b/launcher/src/components/UI/node-page/components/node/clients/ExecutionClients.vue
index 7f900513dc..492ada50bd 100755
--- a/launcher/src/components/UI/node-page/components/node/clients/ExecutionClients.vue
+++ b/launcher/src/components/UI/node-page/components/node/clients/ExecutionClients.vue
@@ -23,10 +23,20 @@
         @open-resync="openResync(item)"
         @open-pruning="openPruning"
         @copy-jwt="copyJwt"
+        @external-modify="externalModify"
       />
       <TransitionGroup name="fadeModal">
-        <ResyncModal v-if="item.isResyncModalOpen" icon-size="w-14" :item="item" @close-window="closeResyncModal(item)" />
-        <PrunningModal v-if="showPruningModal" :item="item" @cancel-warning="closePruning" />
+        <ResyncModal
+          v-if="item.isResyncModalOpen"
+          icon-size="w-14"
+          :item="item"
+          @close-window="closeResyncModal(item)"
+        />
+        <PrunningModal
+          v-if="showPruningModal"
+          :item="item"
+          @cancel-warning="closePruning"
+        />
       </TransitionGroup>
     </div>
   </div>
@@ -43,7 +53,17 @@ import { computed, ref } from "vue";
 import { useSetups } from "../../../../../../store/setups";
 
 //Emits
-const emit = defineEmits(["openExpert", "openLog", "openDoc", "stateHandler", "restartHandler", "mouseOver", "mouseLeave", "copyJwt"]);
+const emit = defineEmits([
+  "openExpert",
+  "openLog",
+  "openDoc",
+  "stateHandler",
+  "restartHandler",
+  "mouseOver",
+  "mouseLeave",
+  "copyJwt",
+  "externalModify",
+]);
 
 //Refs
 const showPruningModal = ref(false);
@@ -58,7 +78,9 @@ const getExecutionServices = computed(() => {
     return [];
   }
   const services = serviceStore.installedServices
-    .filter((s) => s.category === "execution" && s.setupId === setupStore.selectedSetup?.setupId)
+    .filter(
+      (s) => s.category === "execution" && s.setupId === setupStore.selectedSetup?.setupId
+    )
     .sort((a, b) => {
       const fa = a.name.toLowerCase();
       const fb = b.name.toLowerCase();
@@ -117,6 +139,10 @@ const restartHandler = (item) => {
 const copyJwt = (item) => {
   emit("copyJwt", item);
 };
+
+const externalModify = (item) => {
+  emit("externalModify", item);
+};
 </script>
 
 <style scoped>
diff --git a/launcher/src/components/UI/node-page/sections/NodeSection.vue b/launcher/src/components/UI/node-page/sections/NodeSection.vue
index b0fe556f53..e27d993236 100755
--- a/launcher/src/components/UI/node-page/sections/NodeSection.vue
+++ b/launcher/src/components/UI/node-page/sections/NodeSection.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="w-full h-full flex flex-col justify-between items-center">
     <NodeHeader />
-    <NodeBody @open-expert="openExpert" @open-log="openLog" @export-setup="exportSetup" />
+    <NodeBody
+      @open-expert="openExpert"
+      @open-log="openLog"
+      @export-setup="exportSetup"
+      @external-modify="externalModify"
+    />
   </div>
 </template>
 
@@ -9,7 +14,7 @@
 import NodeHeader from "../components/node/NodeHeader.vue";
 import NodeBody from "../components/node/NodeBody.vue";
 
-const emit = defineEmits(["openExpert", "openLog", "exportSetup"]);
+const emit = defineEmits(["openExpert", "openLog", "exportSetup", "externalModify"]);
 
 const openExpert = (item) => {
   emit("openExpert", item);
@@ -21,4 +26,8 @@ const openLog = (item) => {
 const exportSetup = (item) => {
   emit("exportSetup", item);
 };
+
+const externalModify = (item) => {
+  emit("externalModify", item);
+};
 </script>

From 2afbf3321d4ba4ca2a08ffd4cc3b8d5524674023 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Wed, 18 Sep 2024 14:15:44 +0200
Subject: [PATCH 4/5] ADD: vc only preset to one click

---
 .../one-click-icons/preset-icons/vconly.png   | Bin 0 -> 4691 bytes
 launcher/public/output.css                    | 212 ++++--------------
 .../UI/one-click/OneclickScreen.vue           |   6 +
 .../components/plugin/ConfigBody.vue          | 139 +++++++++---
 .../one-click/components/vconly/OnlyBody.vue  | 142 ++++++++++++
 .../components/vconly/OnlyFooter.vue          |  26 +++
 .../components/vconly/OnlyHeader.vue          |  51 +++++
 .../UI/one-click/sections/OnlySource.vue      |  15 ++
 launcher/src/composables/nextRoute.js         |  12 +-
 launcher/src/router/index.js                  |   6 +
 launcher/src/store/clickInstallation.js       |   9 +-
 launcher/src/store/nodeManage.js              |  19 +-
 12 files changed, 422 insertions(+), 215 deletions(-)
 create mode 100644 launcher/public/img/icon/one-click-icons/preset-icons/vconly.png
 create mode 100644 launcher/src/components/UI/one-click/components/vconly/OnlyBody.vue
 create mode 100644 launcher/src/components/UI/one-click/components/vconly/OnlyFooter.vue
 create mode 100644 launcher/src/components/UI/one-click/components/vconly/OnlyHeader.vue
 create mode 100644 launcher/src/components/UI/one-click/sections/OnlySource.vue

diff --git a/launcher/public/img/icon/one-click-icons/preset-icons/vconly.png b/launcher/public/img/icon/one-click-icons/preset-icons/vconly.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ae50a701c69229a60fb179cbb66a215a6bac2de
GIT binary patch
literal 4691
zcmV-Z60GfsP)<h;3K|Lk000e1NJLTq003M7003MF1^@s6<L}Z~00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZ){YgYYRCr$Poe6YP*O|vZNtP|k`-1TjjLq0AHkjBz
zz@(7Qp%9Y-O$RcRG+P5DB@ldirleVzbVx(9kerqnNYaodY0?u&AR&cGfWU<1utRB0
zu!A99!Fa=~Y*~^e&G)~~6Hm6Wg|KAV);-6^($jrU@BQwl|NXx2-uJG8t``-*R3~r=
z3=Ev5R;%YJmCEr7g(8f%<1=sRfq>O&HE@-3v)O#eXf%FST3UKkr_(j?HWU9@vAg2?
zV*sc&IXQV|aB%S3{5p(5OP_f`J4e85u~_mM`uv)jnle5_E1(0a5B~+Grl$T{qtQIY
zoPC`;zIU&#2(Z-`R8>_iDJv^G!=LK`JR~V8X>LeJ$h!<1@V%v%39zNtUA}zz-x++q
zB04&HQfzGO9@cAUwXGNxN~%-_lZpRZZOYTjXEMMJ2U39+BSlzrq?BD7Te-EhwRQ9P
z^XFG7Mvff$Tu@NZ|Hw7FR;i^5pWp$8!+n?IXEo7nrh4)tv+YZnc}r1I(H)Akw6vqX
zzP_2#C$Q{G>L~Y}-2nY2AFG*?Ox1RluGj0ADl#%M>R3)frRy$Jg;JABGe9x8@v^K|
zN^Gkof3|k1u$8~8m@r|2ndQVLIfXvq)T;D4D!1M=RvK=qr2rXlKITTn#EBDyLoSu?
zd?Lu8RNwmdd5`ctaHHJ9-?$~<IZrO9Az`8Pv!~bE4!Y&VXX(`sKB3cj1!CK>1#{@G
z3FGOBmp4##J%X<GGW*U+^zfWnc6G5mB{80!Tl%1=Q+&08o_hTqTU~h@zVXRUI{1%V
zyJmf9<zh;RiSBeh9ot?yF1F)*Gt*KiGBlWW9y;FXeDJxvJpbnpD6gp0A#-ZC@LmLt
zZ*4xZlLGFXD^B3&vuDu8r&iF9mi^WS9G_>cc$#)^c+pl5b(jC=JbESjm$dMy7iibv
z6LuGnw{0`E8cmdO|1z;%s(b4E1**7KC$`O<KE>{M<B}5T`1`NZlk4B6XC7TdaaoH*
zJqZ}<qX4P|{Jk}+=*K^pO#4rsB{bl&`{s5!F3w-tPpk2x8F!@HeQ$T<T?YKzr6QX0
z@Ja#vmFy+9i<KJ08Q>p&v7i3%myhg#%NqwEzC3c07CiZTQRha$B_I+w$vC8QE4f-p
zDGQd^xS`&bJqKv<^RJ0*^8MnYqbPs-JADfr*7U$VGsH>b<g(XoqRl(L6eoLS_eZqn
z*cn>A>0LVU*BoI*-9ePD8W!#d@I(JNN3)-J#s=n3fBTfSesz$Jy|-Tcst%w1#ttOj
zbObJcF9F7{K$1xb_=c^Y(~5;Zp*OefqW}8iTiqG9?K78H_~LuB==D|0>G2m|r%g|<
zv|UhefR+kAdzXUvzf?AV_9bP%y6J{i>n!k?$Z)#!`TKSda6a$v`l?6ZU0Ha})*Yhn
zkXv}}#X=eq8bae2{fe6P$V2s9TmoEvQlEW&gdSM^k~ot&(<al_msZo5`HO95CjUA1
zq~YCJIDP@cV}?@V+y|+uww_*IxkPB|fBa^R_%1Xyeo-B*xub<+KWMuoDbjIov>&X!
zlKYSm^B(G%HrH?&aGW@PZXbTJj~-jQUYra%r2Bp}z0*abQ``9Q-)$YC{LFEo)6&O^
z4i;tQx{dVCj@@0>MW2Db1Lf<t){(}~mogv87Vkp>1E_q@7P}6)D-D-_mvkQKY{3Pk
zSGxRV;JA>h!)MRguCqJxE(7jRa}UBwUf^zSbT9D13><pcplfzB0{4EMM_4#qtDN7i
z5Z*z@P#RHTUSSD6|MrJ=WaQzs<R5noxjSx`hv4$#J~U@0-E-$1oyg166TQ_eeGYtN
zd>ozq=uJ9!CYQGCJs>Vzo_B#KArEGx3x^B2cKI(lr3`B78|heXo~R}dRCXUdMOjlP
z**qlqaV6l>GsX#T28}M?zqerHIDHNrQR%ab?-ywR$)%HDV0Xaf`4Q}Mqq^80d-u<T
zTlnWs|CfIK+M8Y0g?pElJi_5H-I<2)2;fp0psNeGS>W<xNWlt@QQxGa+>1pN7ZpKi
z3m+TYz?a-Ro5n3%+GTirv%tHO9|<_Jh4M^g$GU^U!lek%)sg}W2k`7gKczpccvSol
z1|@J@xReHv<e+29^+qy*?Vs#BM34M#ov0#(>QeoVk|O29rFw%FxHFwkf8D3gJI($I
z&e`+!0(X|2llysrI|<I&-Mqk^CFkURUf@oGb9Of`a2dI2i8XY%DAHM$4(;a!{ynA<
z;mvf<m`d7kWQ0TDoUP;q&g9Z#>uG#!1L+JtwC!A+vn(CjZ%_jd^lhX0Y2|dOCV;Lr
z`_kCxMlW!O%*KgI{^~ZG!xB<f?@tY_K2)dorRl8UALriY#L*nzWzbo;0=IzpwNcin
zDmqabMk6AcsiaOz(SZhv;=j-HVjQREM9o159G*yWWHX(<97=vZ7K#ZnFmQj02r$yc
z>HsQhxIQb)37$RfGAMwn6c&nRu<$}IvR>m(gZfrA{To|%MUx-3wy7vCSWjPk8%;*D
z{MM%)`Q3Dd0S_D!GG%z3fP1_oj8x21XHe07+*zKv5=vJaHKb9SsY>T3{#;!KEO38@
zcssj$_1qaoY7JD&|9zBJ3f7ot)DRu*%!?+oRY{LdDxpu$#n7c|fv#pPjz8dltCSW>
z9oi&1Kr7!=UE882+^`;@HIm7!pwUBhEFC=QGpvOhq=CM>7C^i5qul~~zyVh(tn`aX
zr7Rm(VYQ>9ny8}DpRW_LQcF#&+W<T|N=LpvX3DP&rY4pbcUkv<0S=v>9N(_f=NV$X
zUQLM{szamIDl09XSVDd*F{jF);qCW}A*u{zdD+R<Z4r+ba8K#?lH#i})7+FwYB8!P
zuPTUQgInp`)nFPI(@3Qp)ZE2xV0E(}C#51pqXe-JUd|n52*W<Zu3@9Wy?5vJbKq9G
zH?>0Ov_@@VsNt0TgF<@kP!cW6EMk{WBj7{V!?h-AV9Q5mI%!xv?YlUH^0|TBUHT>P
zn4nf6ACL#=b|Y(Z5l4%|LtAJJcbL%Wq1<Wy>uQMTEaO7-)NJ&jWZuWjih@q`{nPO-
z_qn@j%zg!2t+LRR_*&uKh5DPQ&7u&NIySnAPM3w!%#l?L+9<4A$#vjg58()MNPs~E
zH}JWKvv=~BQ^VbD*tYNMH^7nEn{Zpb$m$IX)02j^yGHLv1yuo}V~k<#PGRddwDAKo
zxD%{s^5w*oR!9h3L|+c$(NRLT0l%+GzW^Q+q-UT83g!;4f}_EBmIz2lB+Eq;O9lQn
zGEDf{MYRD!&qsvoM6LwV;_qt~pfA+~_KA$h8`pz@TZMF_vA2;CS5N;c51}AU8<|-~
zAPsfg0p86SzbpLOU{Z=m5}!e{Vbyw*io&>~gx*)_d^xyrZ5GhcUyR2BhaU|W4i*aC
zz0%-Mm2BN`=a67hac2q71IZ^TY>($o6Ov+J$$-U2v38?_{QA2{xBA-M!S_JmRvO9a
zQ{+34*_*{ye3J9l0Eqx)ByWfBY_*UWI56|JCLt$EVc~839#)RV2x8seTQGzS=DySH
zj_^GW_;^k@1+XL(u->lC`j&pTca-o#^eh`1)?|1ph$I`>6*RJD7qe!=&z_o4M}FLq
zMlk4v@D`CT`6tVerxlL^o)n=Y9e0B8NC2&dBSZ`P&FCxxcpLm}1xtyAA8=N|+6@cG
z=nXs+D_b|Vs~J9mcZ}v-e*~lFVD}i{5u8FD%7X+g+}Q=QS22`3y90%hG%LAEbdZVM
z0Qd}+4fn37Rx47i(0Ob_NFT<&IR+Mv6^9F{@x<a0z<t;%GvXSA#ln>Xsz?r4;DKav
zmJgj|Ged^A(QNYJtRMgJdjoGz;^+~2kB;+nSqNQg!K0!)6ShZW3lRn0!AT_~pK>`u
z#CRh{UedV%E;nd|cM{}>hjOuGuvWmL1Nax<%UT}77L8KLo(hsvo(x+0we_imYkb=1
z!HmmnwJO?E5Je#jGm2%!pL5l)T;xRH62i?ZWB6+J%VE`M99TWP5m@#&75(RVihTwg
z1G|&r>nV^u5~NWf9}_urhZh3PMrIFQNexQ`0JpMR80z0fw{eu2z>R=VegDNsmJoET
zo+}|9;}%X&yv7k>8+U~59U#1oR34!zVfe_6AWW~+@c=JdJ0eHz_XEAcTVX%^3R`@e
z#kC{suIP08#KN@<8hPu#^FS`b_gc2*+hZC;hlv?bux6xF;d>*|WaRhoNPM{=w5;DJ
zOGEqZvv2zZIOc$e$&(BfmW%Mblrwt(j7%R2EE`iA;CGK^F9eMMO-InvpC2^bC%`Af
z)p4h%qA@HX@U3fEr>i;b+Qu>h4+LHvLU~v}awd9yUC6NeGw43^QX<(6oR(NCK#EyV
z47HK1Hktz$So<-atdqd`ZUiuw*(Drk#qAajFJnR4752G9*pRIPDk4RG4lWG~)l(At
z;d?Gb2?^12hw4npxi^<5_*{QdX5lq0o#YYw#h;|x4)@mlf6@c&lE(i2Zt?x{(!6#T
zWo^zBzCB(q{BWY(+?8?B4Rrj8!}Rc$bi3)z+aEe9CW+ql#+^KO(eBafw!^y>H~`Nd
zSI#~)dm?Pv^&Bx`2n<?{Am>6=;4RAr0Kr|H_g?!`H&JGfuB2@bo}x8hjiOf$B#Uhl
zaJ&w9cFs)!N9DZV>=%vr$kq(8FAV9zllwb0PM^Ak$d?53AOeQM;9Fym00Rq{sDnVJ
zJ^$gnPyNTa=ftG?S(~TYI$!C6hjFg_+g1N(gA3re%_NmGk<aZJO`A_9*x2-B;i!n{
zx8k`yw&VRgy^Pk)IZyFxXLakYy3N8vHAYGv(oAC+b}>&6#$ZA@TQz*@-U?h!XCI&!
z_Kl()=R1$?VE)SK?1SR-k8|UMg~zjmZRZ(U>wof%os~NR9ME?>d_v^sQ(m1Rq$m6H
zv33pD(Yo>8Ex-{y!q0~B=2r%?JLsCpH@N7I@*uzHFBcyZQSD>fZ?^%T{Z1woKeLzW
zcy3GPhUvoZcN92|jk=G2nno{V<<qdWcX!3uZkx-2W8TQ5VRb?%Fd*Q{5p!pOhxr@n
z^6I@bC1)C)s|dL%;K*j~TY6MTNqeTU`{HuoNs&4V=d4~Khwm6raAk28IL>MPyj)r`
zxm5f@ZpOkfj+!s)8+y7v7Xr5me;R|n7=eKs=;|WrGGwA-!FiPb_w`P$tGdTl91`=!
zpPf<Aty?HRw#NWR-Wov;GJY4T1ADDw?5@!Oan6_uO8?UjIj3&FNXS>eJR&;NjYr#W
zeC-N&I#0*=+oCg^64v)G;K+ku!em*!Mod${<Q#Vucn&j1R@2gL<85C#Be|M>ntGKc
z=iDU*r*8xt+hOIH3nLGFHXTi{8<0l&821CAc!Y&xB0TPY#2p4liZK%7{&HpYZrhh`
zJ~^C6|Hs&!1blWxwhKP!{D4U8i|xls!byG{=>V96KI`qN;w=K66HgqZxEHb<y2xJF
za72@HQ!40JQ;KQHw%d6w_Q1=BI7Idam3kStl^)Mz(36X4)vi?9f62SLRY&f<3LFE%
z%cmC6i(e;;aY%3JOrTeRqqD?xGgCht`f`_XbP1f71~c-~V7B<Xh?fS_dzS{g^)}%g
z^l)B_O};c3uf>+5NKa2MSE*FC3{bT)kg9#$bK~f(UzO(`LCG^v6HV9bmU!fKlGi9w
zQc`wnwOU&yh9|00p*oU`-o;~YsWn5*EfiyJv`awq+Q|1S;^N{~^Qy6H<SPyuc#-cC
zbvU)*(EuW4?R?()md?7r?aVTQRbzuKtrW|!<%L%QuR447>`VpA$-J>+$FApP)f40u
zVCe>ycKr7OceLgCP7an5zCXjxL|MBn)z#HGyaM<eFx|;4DdTyG^)(FLeK(>zdJX-&
z9@azVm12)xxNzY$w(?T|jttKTUiCYJSN~qkuLHen+V@T?!?IgiT8`)E=VLXg68<Xy
za4gRYFD0HWJ&85_9$u7s1~1#|+JtuRT$9Hhg{_(U$eQit<>iO?HKrAm@m~diBTPgR
z1W9bb58x8U;8VB(Vi~;FYw?b?E3aSQW-^%?bvoUp;^N|qycbr<L+@G7e@*BX{~vja
V`@U$o*BSr-002ovPDHLkV1fYOFsuLo

literal 0
HcmV?d00001

diff --git a/launcher/public/output.css b/launcher/public/output.css
index 313b560c78..0f3446fd17 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -843,10 +843,6 @@ video {
   inset-inline-end: 0.25rem;
 }
 
-.end-2{
-  inset-inline-end: 0.5rem;
-}
-
 .left-0{
   left: 0px;
 }
@@ -999,10 +995,6 @@ video {
   top: 7rem;
 }
 
-.left-2{
-  left: 0.5rem;
-}
-
 .z-0{
   z-index: 0;
 }
@@ -1091,6 +1083,10 @@ video {
   grid-column-start: 14;
 }
 
+.col-start-16{
+  grid-column-start: 16;
+}
+
 .col-start-17{
   grid-column-start: 17;
 }
@@ -1155,10 +1151,6 @@ video {
   grid-column-start: 9;
 }
 
-.col-start-16{
-  grid-column-start: 16;
-}
-
 .col-end-10{
   grid-column-end: 10;
 }
@@ -1430,11 +1422,6 @@ video {
   margin-right: auto;
 }
 
-.my-4{
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .my-auto{
   margin-top: auto;
   margin-bottom: auto;
@@ -1460,10 +1447,6 @@ video {
   margin-bottom: 0.75rem;
 }
 
-.mb-4{
-  margin-bottom: 1rem;
-}
-
 .mb-\[1px\]{
   margin-bottom: 1px;
 }
@@ -1552,6 +1535,10 @@ video {
   margin-top: 1rem;
 }
 
+.mt-40{
+  margin-top: 10rem;
+}
+
 .mt-5{
   margin-top: 1.25rem;
 }
@@ -1568,14 +1555,6 @@ video {
   margin-top: 9.5rem;
 }
 
-.mt-40{
-  margin-top: 10rem;
-}
-
-.-mr-1{
-  margin-right: -0.25rem;
-}
-
 .box-border{
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -1633,6 +1612,10 @@ video {
   height: 33.333333%;
 }
 
+.h-1\/6{
+  height: 16.666667%;
+}
+
 .h-10{
   height: 2.5rem;
 }
@@ -1677,6 +1660,10 @@ video {
   height: 75%;
 }
 
+.h-3\/6{
+  height: 50%;
+}
+
 .h-32{
   height: 8rem;
 }
@@ -1761,10 +1748,6 @@ video {
   height: 210px;
 }
 
-.h-\[240px\]{
-  height: 240px;
-}
-
 .h-\[250px\]{
   height: 250px;
 }
@@ -1797,10 +1780,6 @@ video {
   height: 34px;
 }
 
-.h-\[35px\]{
-  height: 35px;
-}
-
 .h-\[36px\]{
   height: 36px;
 }
@@ -1887,14 +1866,6 @@ video {
   height: 100vh;
 }
 
-.h-1\/6{
-  height: 16.666667%;
-}
-
-.h-3\/6{
-  height: 50%;
-}
-
 .max-h-10{
   max-height: 2.5rem;
 }
@@ -1967,10 +1938,6 @@ video {
   max-height: 185px;
 }
 
-.max-h-\[190px\]{
-  max-height: 190px;
-}
-
 .max-h-\[200px\]{
   max-height: 200px;
 }
@@ -2147,6 +2114,10 @@ video {
   width: 66.666667%;
 }
 
+.w-2\/4{
+  width: 50%;
+}
+
 .w-20{
   width: 5rem;
 }
@@ -2227,6 +2198,10 @@ video {
   width: 15rem;
 }
 
+.w-64{
+  width: 16rem;
+}
+
 .w-7{
   width: 1.75rem;
 }
@@ -2283,10 +2258,6 @@ video {
   width: 15px;
 }
 
-.w-\[170px\]{
-  width: 170px;
-}
-
 .w-\[178px\]{
   width: 178px;
 }
@@ -2391,14 +2362,6 @@ video {
   width: 100vw;
 }
 
-.w-2\/4{
-  width: 50%;
-}
-
-.w-64{
-  width: 16rem;
-}
-
 .min-w-\[100px\]{
   min-width: 100px;
 }
@@ -2872,12 +2835,6 @@ video {
   row-gap: 1.25rem;
 }
 
-.gap-x-1\.5{
-  -webkit-column-gap: 0.375rem;
-     -moz-column-gap: 0.375rem;
-          column-gap: 0.375rem;
-}
-
 .space-x-1 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -2978,6 +2935,11 @@ video {
   border-color: rgb(156 163 175 / var(--tw-divide-opacity));
 }
 
+.divide-gray-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-divide-opacity));
+}
+
 .divide-gray-600 > :not([hidden]) ~ :not([hidden]){
   --tw-divide-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-divide-opacity));
@@ -2988,16 +2950,6 @@ video {
   border-color: rgb(55 65 81 / var(--tw-divide-opacity));
 }
 
-.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
-  --tw-divide-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
-}
-
-.divide-gray-500 > :not([hidden]) ~ :not([hidden]){
-  --tw-divide-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-divide-opacity));
-}
-
 .self-start{
   -ms-flex-item-align: start;
       align-self: flex-start;
@@ -3033,10 +2985,6 @@ video {
   overflow: hidden;
 }
 
-.overflow-x-auto{
-  overflow-x: auto;
-}
-
 .overflow-y-auto{
   overflow-y: auto;
 }
@@ -3049,10 +2997,6 @@ video {
   overflow-y: hidden;
 }
 
-.overflow-x-clip{
-  overflow-x: clip;
-}
-
 .overflow-x-scroll{
   overflow-x: scroll;
 }
@@ -3488,21 +3432,11 @@ video {
   border-bottom-color: transparent;
 }
 
-.border-b-white{
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
-
 .border-l-gray-200{
   --tw-border-opacity: 1;
   border-left-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
-.border-l-red-500{
-  --tw-border-opacity: 1;
-  border-left-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
-
 .border-r-\[\#264744\]{
   --tw-border-opacity: 1;
   border-right-color: rgb(38 71 68 / var(--tw-border-opacity));
@@ -3552,11 +3486,6 @@ video {
   background-color: rgb(13 13 14 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#101111\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(16 17 17 / var(--tw-bg-opacity));
-}
-
 .bg-\[\#111213\]{
   --tw-bg-opacity: 1;
   background-color: rgb(17 18 19 / var(--tw-bg-opacity));
@@ -3947,6 +3876,11 @@ video {
   background-color: rgb(96 152 121 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#70E763\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(112 231 99 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#A0A0A0\]{
   --tw-bg-opacity: 1;
   background-color: rgb(160 160 160 / var(--tw-bg-opacity));
@@ -3957,6 +3891,11 @@ video {
   background-color: rgb(209 187 158 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#EB5353\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 83 83 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#F7C566\]{
   --tw-bg-opacity: 1;
   background-color: rgb(247 197 102 / var(--tw-bg-opacity));
@@ -4201,31 +4140,11 @@ video {
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
 
-.bg-zinc-200{
-  --tw-bg-opacity: 1;
-  background-color: rgb(228 228 231 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-400{
-  --tw-bg-opacity: 1;
-  background-color: rgb(161 161 170 / var(--tw-bg-opacity));
-}
-
 .bg-zinc-700{
   --tw-bg-opacity: 1;
   background-color: rgb(63 63 70 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#70E763\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(112 231 99 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#EB5353\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(235 83 83 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }
@@ -4497,10 +4416,6 @@ video {
   text-align: center;
 }
 
-.text-right{
-  text-align: right;
-}
-
 .indent-0{
   text-indent: 0px;
 }
@@ -4586,11 +4501,6 @@ video {
   line-height: 1.25rem;
 }
 
-.text-sm\/none{
-  font-size: 0.875rem;
-  line-height: 1;
-}
-
 .text-xl{
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -4865,11 +4775,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-yellow-300{
-  --tw-text-opacity: 1;
-  color: rgb(253 224 71 / var(--tw-text-opacity));
-}
-
 .text-yellow-400{
   --tw-text-opacity: 1;
   color: rgb(250 204 21 / var(--tw-text-opacity));
@@ -5044,11 +4949,6 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
-.shadow-\[\#101111\]{
-  --tw-shadow-color: #101111;
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .shadow-\[\#111010\]{
   --tw-shadow-color: #111010;
   --tw-shadow: var(--tw-shadow-colored);
@@ -5124,11 +5024,6 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
-.shadow-gray-700{
-  --tw-shadow-color: #374151;
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .shadow-gray-800{
   --tw-shadow-color: #1f2937;
   --tw-shadow: var(--tw-shadow-colored);
@@ -5163,20 +5058,11 @@ video {
           box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.ring-inset{
-  --tw-ring-inset: inset;
-}
-
 .ring-black{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
 }
 
-.ring-gray-300{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-}
-
 .ring-opacity-5{
   --tw-ring-opacity: 0.05;
 }
@@ -5272,11 +5158,6 @@ video {
           transition-duration: 500ms;
 }
 
-.duration-75{
-  -webkit-transition-duration: 75ms;
-          transition-duration: 75ms;
-}
-
 .ease-in{
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
@@ -5772,21 +5653,11 @@ html body {
   background-color: rgb(60 67 74 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-\[\#407d7d\]:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(64 125 125 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-\[\#447a75\]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(68 122 117 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-\[\#488d8d\]:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(72 141 141 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-\[\#4c7960\]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(76 121 96 / var(--tw-bg-opacity));
@@ -5917,11 +5788,6 @@ html body {
   background-color: rgb(4 47 46 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-50:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-opacity-10:hover{
   --tw-bg-opacity: 0.1;
 }
diff --git a/launcher/src/components/UI/one-click/OneclickScreen.vue b/launcher/src/components/UI/one-click/OneclickScreen.vue
index 97f8f0e0ce..84df7b7d49 100644
--- a/launcher/src/components/UI/one-click/OneclickScreen.vue
+++ b/launcher/src/components/UI/one-click/OneclickScreen.vue
@@ -10,6 +10,7 @@ import ConfigPlugins from "./sections/ConfigPlugins.vue";
 import MevboostRelays from "./sections/MevboostRelays.vue";
 import SelectSync from "./sections/SelectSync.vue";
 import VerifyCheck from "./sections/VerifyCheck.vue";
+import OnlySource from "./sections/OnlySource.vue";
 import AnimationSection from "./sections/AnimationSection.vue";
 import { computed } from "vue";
 import { useRouter } from "vue-router";
@@ -25,6 +26,11 @@ const components = [
     path: "/oneClick/config",
     component: ConfigPlugins,
   },
+  {
+    path: "/oneClick/source",
+    component: OnlySource,
+  },
+
   {
     path: "/oneClick/mevboost",
     component: MevboostRelays,
diff --git a/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue b/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
index 207ee627fe..eae5357035 100644
--- a/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
+++ b/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
@@ -1,23 +1,41 @@
 import { ref, computed, onMounted, watch } from 'vue';
 <template>
-  <div class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto">
+  <div
+    class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto"
+  >
     <div
       class="w-full h-full col-start-3 col-end-11 row-start-1 row-span-full bg-[#1E2429] rounded-md grid grid-cols-12 grid-rows-7 p-4 gap-1"
     >
-      <div class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-2 gap-1">
+      <div
+        class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-2 gap-1"
+      >
         <div class="w-full h-10 col-start-1 col-span-1 flex justify-center items-center">
-          <div class="w-full h-8 border border-gray-600 rounded-md p-1 flex justify-center items-center">
-            <span class="text-center text-gray-400 text-md font-normal">{{ $t("oneClick.installedService") }}</span>
+          <div
+            class="w-full h-8 border border-gray-600 rounded-md p-1 flex justify-center items-center"
+          >
+            <span class="text-center text-gray-400 text-md font-normal">{{
+              $t("oneClick.installedService")
+            }}</span>
           </div>
         </div>
-        <div class="w-full h-10 col-start-2 col-span-1 flex justify-center items-center relative">
-          <div class="w-full h-8 border border-gray-600 rounded-md p-1 flex flex-col justify-between items-center">
-            <span class="text-center text-gray-400 text-md font-normal">{{ $t("oneClick.addOption") }}</span>
+        <div
+          class="w-full h-10 col-start-2 col-span-1 flex justify-center items-center relative"
+        >
+          <div
+            class="w-full h-8 border border-gray-600 rounded-md p-1 flex flex-col justify-between items-center"
+          >
+            <span class="text-center text-gray-400 text-md font-normal">{{
+              $t("oneClick.addOption")
+            }}</span>
           </div>
         </div>
       </div>
 
-      <PluginRows :filtered-plugin="filteredPluginsOnCategory" @change-handler="pluginChangeHandler" @plugin-exchange="pluginExChange" />
+      <PluginRows
+        :filtered-plugin="filteredPluginsOnCategory"
+        @change-handler="pluginChangeHandler"
+        @plugin-exchange="pluginExChange"
+      />
 
       <InstallationPath />
     </div>
@@ -53,12 +71,14 @@ watch(
 //Lifecycle Hooks
 
 onMounted(() => {
-  clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.map((item) => {
-    return {
-      ...item,
-      openReplaceModal: false,
-    };
-  });
+  clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.map(
+    (item) => {
+      return {
+        ...item,
+        openReplaceModal: false,
+      };
+    }
+  );
 });
 onMounted(() => {
   getInstallPath();
@@ -72,12 +92,23 @@ const filterMonitoringServices = () => {
   if (clickStore.installMonitoring) {
     clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.concat(
       serviceStore.allServices.filter((s) =>
-        ["GrafanaService", "PrometheusNodeExporterService", "PrometheusService", "MetricsExporterService"].includes(s.service)
+        [
+          "GrafanaService",
+          "PrometheusNodeExporterService",
+          "PrometheusService",
+          "MetricsExporterService",
+        ].includes(s.service)
       )
     );
   } else {
     clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.filter(
-      (s) => !["GrafanaService", "PrometheusNodeExporterService", "PrometheusService", "MetricsExporterService"].includes(s.service)
+      (s) =>
+        ![
+          "GrafanaService",
+          "PrometheusNodeExporterService",
+          "PrometheusService",
+          "MetricsExporterService",
+        ].includes(s.service)
     );
   }
 };
@@ -89,7 +120,9 @@ const selectedPluginsValidation = () => {
 };
 const pluginChangeHandler = (plugin, item, idx) => {
   plugin.openReplaceModal = false;
-  const oldPluginIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.id === plugin?.id);
+  const oldPluginIndex = clickStore.selectedPreset.includedPlugins.findIndex(
+    (e) => e.id === plugin?.id
+  );
 
   if (oldPluginIndex !== -1) {
     clickStore.selectedPreset.includedPlugins.splice(oldPluginIndex, 1);
@@ -97,15 +130,25 @@ const pluginChangeHandler = (plugin, item, idx) => {
 
   clickStore.selectedPreset.includedPlugins.splice(idx, 0, item);
 
-  if (["staking", "mev boost", "stereum on arm", "archive", "lidocsm"].includes(clickStore.selectedPreset.name)) {
+  if (
+    ["staking", "mev boost", "stereum on arm", "archive", "lidocsm", "vc only"].includes(
+      clickStore.selectedPreset.name
+    )
+  ) {
     if (item.category === "consensus") {
-      let valIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.category === "validator");
+      let valIndex = clickStore.selectedPreset.includedPlugins.findIndex(
+        (e) => e.category === "validator"
+      );
       clickStore.selectedPreset.includedPlugins[valIndex] = serviceStore.allServices.find(
         (e) => e.service === item.name + "ValidatorService"
       );
     } else if (item.category === "validator") {
-      let conIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.category === "consensus");
-      clickStore.selectedPreset.includedPlugins[conIndex] = serviceStore.allServices.find((e) => e.service === item.name + "BeaconService");
+      let conIndex = clickStore.selectedPreset.includedPlugins.findIndex(
+        (e) => e.category === "consensus"
+      );
+      clickStore.selectedPreset.includedPlugins[conIndex] = serviceStore.allServices.find(
+        (e) => e.service === item.name + "BeaconService"
+      );
     }
   }
   sortPlugins();
@@ -113,10 +156,18 @@ const pluginChangeHandler = (plugin, item, idx) => {
 
 const sortPlugins = () => {
   if (clickStore.selectedPreset.includedPlugins) {
-    const ec = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "execution");
-    const cc = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "consensus");
-    const vc = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "validator");
-    const services = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "service");
+    const ec = clickStore.selectedPreset.includedPlugins.filter(
+      (p) => p.category === "execution"
+    );
+    const cc = clickStore.selectedPreset.includedPlugins.filter(
+      (p) => p.category === "consensus"
+    );
+    const vc = clickStore.selectedPreset.includedPlugins.filter(
+      (p) => p.category === "validator"
+    );
+    const services = clickStore.selectedPreset.includedPlugins.filter(
+      (p) => p.category === "service"
+    );
     clickStore.selectedPreset.includedPlugins = new Array().concat(ec, cc, vc, services);
   }
 };
@@ -138,9 +189,14 @@ const checkPluginCategory = (element) => {
   switch (clickStore.selectedPreset.name) {
     case "lidocsm":
     case "staking":
-      filter = (item) => item.category === element.category && !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
+    case "vc only":
+      filter = (item) =>
+        item.category === element.category &&
+        !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
       if (manageStore.currentNetwork.network == "gnosis") {
-        filter = (item) => item.category === element.category && /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
+        filter = (item) =>
+          item.category === element.category &&
+          /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
       }
       break;
     case "ssv.network":
@@ -160,7 +216,10 @@ const checkPluginCategory = (element) => {
     case "lidoobol":
       filter = (item) => {
         if (element.category === "validator" && element.service !== "CharonService") {
-          return /Teku|Lodestar|Lighthouse|Nimbus/.test(item.service) && item.category === element.category;
+          return (
+            /Teku|Lodestar|Lighthouse|Nimbus/.test(item.service) &&
+            item.category === element.category
+          );
         } else if (element.category === "validator") {
           return item.service === "CharonService";
         } else {
@@ -172,18 +231,28 @@ const checkPluginCategory = (element) => {
       //filter = (item) => item.category === element.category
       break;
     case "mev boost":
-      filter = (item) => item.category === element.category && !/(SSVNetwork|Reth|Web3Signer|Charon)/.test(item.service);
+      filter = (item) =>
+        item.category === element.category &&
+        !/(SSVNetwork|Reth|Web3Signer|Charon)/.test(item.service);
       break;
     case "stereum on arm":
-      filter = (item) => item.category === element.category && !/(Prysm|Reth|SSVNetwork|Web3Signer|Charon)/.test(item.service);
+      filter = (item) =>
+        item.category === element.category &&
+        !/(Prysm|Reth|SSVNetwork|Web3Signer|Charon)/.test(item.service);
       if (manageStore.currentNetwork.network == "gnosis") {
-        filter = (item) => item.category === element.category && /(Lighthouse|Teku|Nethermind)/.test(item.service);
+        filter = (item) =>
+          item.category === element.category &&
+          /(Lighthouse|Teku|Nethermind)/.test(item.service);
       }
       break;
     case "archive":
-      filter = (item) => item.category === element.category && !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
+      filter = (item) =>
+        item.category === element.category &&
+        !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
       if (manageStore.currentNetwork.network == "gnosis") {
-        filter = (item) => item.category === element.category && /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
+        filter = (item) =>
+          item.category === element.category &&
+          /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
       }
       break;
     default:
@@ -195,7 +264,9 @@ const checkPluginCategory = (element) => {
 const getInstallPath = async () => {
   let largestVolumePath = await ControlService.getLargestVolumePath();
   if (largestVolumePath === "/") largestVolumePath = largestVolumePath + "opt";
-  const stereumInstallationPath = [largestVolumePath, "/stereum"].join("/").replace(/\/{2,}/, "/");
+  const stereumInstallationPath = [largestVolumePath, "/stereum"]
+    .join("/")
+    .replace(/\/{2,}/, "/");
   clickStore.installationPath = stereumInstallationPath;
 };
 </script>
diff --git a/launcher/src/components/UI/one-click/components/vconly/OnlyBody.vue b/launcher/src/components/UI/one-click/components/vconly/OnlyBody.vue
new file mode 100644
index 0000000000..3176acc490
--- /dev/null
+++ b/launcher/src/components/UI/one-click/components/vconly/OnlyBody.vue
@@ -0,0 +1,142 @@
+import { onMounted, ref } from 'vue';
+<template>
+  <div
+    class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto"
+  >
+    <div
+      class="w-full h-full col-start-3 col-end-11 row-start-1 row-span-full bg-[#1c1d1d] grid grid-cols-12 grid-rows-7 p-4 border border-gray-600 rounded-md"
+    >
+      <div class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full">
+        <div
+          class="w-full h-full flex flex-col justify-start items-center mx-auto px-4 py-2 space-y-2 mt-6 relative"
+        >
+          <div class="w-full flex justify-center items-center">
+            <div class="w-full grid grid-cols-12 items-center text-md">
+              <img
+                class="col-start-1 w-8"
+                src="/img/icon/edit-node-icons/service-category.png"
+                alt="Path Icon"
+              />
+              <span class="col-start-2 col-span-3 text-gray-400 text-md text-left"
+                >EXTERNAL SOURCE</span
+              >
+
+              <div
+                class="col-start-6 col-span-full w-full relative bg-[#141516] border border-gray-500 rounded-md grid grid-cols-12 items-center"
+                @click="dropdown"
+              >
+                <div
+                  class="col-start-1 col-span-full flex justify-center items-center overflow-hidden"
+                >
+                  <div
+                    class="w-3/4 px-2 py-1 text-sm text-gray-400 capitalize flex justify-start items-center space-x-4"
+                  >
+                    <img
+                      v-if="selectedSource.icon ? selectedSource.icon : null"
+                      :src="selectedSource.icon"
+                      class="w-5"
+                    />
+                    <span>{{
+                      selectedSource.name ? selectedSource.name : "Select Source"
+                    }}</span>
+                  </div>
+
+                  <button
+                    class="w-1/4 h-full p-1 text-gray-500 hover:text-gray-200 flex justify-end items-center"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-4 w-4"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                </div>
+
+                <div
+                  v-if="isOpen"
+                  class="absolute top-8 left-0 z-10 mt-2 max-h-[160px] w-64 rounded-md bg-gray-700 shadow-lg overflow-x-hidden overflow-y-auto"
+                  @mouseleave="isOpen = false"
+                >
+                  <div class="divide-y divide-gray-500">
+                    <div
+                      v-for="source in sources"
+                      :key="source"
+                      class="w-full flex justify-center items-center space-x-4 px-4 py-2 text-sm text-gray-300 hover:text-gray-100 hover:bg-blue-500 uppercase cursor-pointer"
+                      @click="pickSource(source)"
+                    >
+                      <img v-if="source.icon" :src="source.icon" class="w-6" />
+                      <span>{{ source.name }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="selectedSource.name === 'custom'"
+            class="w-full flex justify-center items-center"
+          >
+            <div class="w-full grid grid-cols-12 items-center text-md">
+              <img
+                class="col-start-1 w-8"
+                src="/img/icon/edit-node-icons/service-external-source.png"
+                alt="Path Icon"
+              />
+              <span class="col-start-2 col-span-3 text-gray-400 text-left">ADDRESS</span>
+              <input
+                v-model="addressLink"
+                class="col-start-6 col-span-7 min-h-[30px] border border-gray-500 px-2 py-1 text-left text-gray-400 text-xs rounded bg-[#141516] focus:border-teal-500"
+                type="text"
+                autofocus
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+const selectedSource = ref("");
+const addressLink = ref("");
+const isOpen = ref(false);
+const properties = ref(null);
+
+const sources = [
+  { name: "custom", icon: null },
+  { name: "stereumplus 1", icon: "/img/icon/stereumplus-icons/stereumplus-icon.png" },
+  { name: "stereumplus 2", icon: "/img/icon/stereumplus-icons/stereumplus-icon.png" },
+  { name: "stereumplus 3", icon: "/img/icon/stereumplus-icons/stereumplus-icon.png" },
+];
+
+onMounted(() => {
+  addressLink.value = "";
+  selectedSource.value = "";
+  addressLink.value = "";
+});
+
+//Methods
+
+const dropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const pickSource = (source) => {
+  isOpen.value = false;
+  selectedSource.value = source;
+  properties.value = {
+    source: selectedSource.value,
+    address: addressLink.value,
+  };
+};
+</script>
diff --git a/launcher/src/components/UI/one-click/components/vconly/OnlyFooter.vue b/launcher/src/components/UI/one-click/components/vconly/OnlyFooter.vue
new file mode 100644
index 0000000000..75d9ce2367
--- /dev/null
+++ b/launcher/src/components/UI/one-click/components/vconly/OnlyFooter.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="w-full h-full col-start-1 col-span-full row-start-11 row-span-2 grid grid-cols-12 gird-rows-2 px-4"
+    @mousedown.prevent
+  >
+    <router-link
+      to="/oneClick/preset"
+      class="col-start-1 col-span-2 row-start-1 row-span-2 justify-self-end w-[120px] h-12 bg-[#264744] hover:bg-[#447a75] rounded-full py-2 px-4 flex justify-center items-center hover:scale-110 hover:shadow-lg hover:shadow-[#1e2a29] transition-all duration-300 ease-in-out active:scale-100 active:shadow-none"
+    >
+      <span class="text-gray-200 text-xl font-semibold text-center uppercase">Back</span>
+    </router-link>
+    <router-link
+      :to="nextRoute"
+      class="col-start-11 col-span-1 row-start-1 row-span-2 w-[120px] h-12 bg-[#264744] hover:bg-[#447a75] rounded-full py-2 px-4 flex justify-center items-center hover:scale-110 hover:shadow-lg hover:shadow-[#1e2a29] transition-all duration-300 ease-in-out active:scale-100 active:shadow-none cursor-pointer"
+    >
+      <span class="text-gray-200 text-xl font-semibold text-center uppercase">{{
+        $t("customFooter.next")
+      }}</span>
+    </router-link>
+  </div>
+</template>
+<script setup>
+import { goToNext } from "@/composables/nextRoute";
+
+const nextRoute = goToNext();
+</script>
diff --git a/launcher/src/components/UI/one-click/components/vconly/OnlyHeader.vue b/launcher/src/components/UI/one-click/components/vconly/OnlyHeader.vue
new file mode 100644
index 0000000000..8da94d7d73
--- /dev/null
+++ b/launcher/src/components/UI/one-click/components/vconly/OnlyHeader.vue
@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="col-start-5 col-end-21 row-start-1 row-span-2 grid grid-cols-6 grid-rows-2 p-1 items-end gap-2"
+  >
+    <div
+      class="h-14 col-start-1 col-end-4 row-start-1 row-span-2 flex justify-center bg-[#1E2429] rounded-md p-1"
+    >
+      <img
+        class="w-[50px] h-[50px] col-start-1 col-span-2 row-start-1 row-span-2 z-10 self-center"
+        :src="selectedPreset?.icon"
+        :alt="`${network?.name} Icon`"
+      />
+      <div class="w-full h-full flex justify-center items-center ml-4">
+        <span class="w-full text-[24px] font-bold text-gray-400 uppercase tracking-wider">
+          {{ selectedPreset?.name }}</span
+        >
+      </div>
+    </div>
+    <div
+      v-if="network.name"
+      class="h-14 col-start-4 col-span-full row-start-1 row-span-2 flex justify-end bg-[#1E2429] rounded-md p-1"
+    >
+      <div class="w-fit h-full flex justify-end items-center mr-2">
+        <span class="w-full text-[22px] font-bold text-gray-400 uppercase tracking-wider">
+          {{ network?.name }}</span
+        >
+      </div>
+      <img
+        class="w-[50px] h-[50px] col-start-1 col-span-2 row-start-1 row-span-2 z-10 self-center"
+        :src="network?.icon"
+        :alt="`${network?.name} Icon`"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import { useClickInstall } from "@/store/clickInstallation";
+import { computed } from "vue";
+import { useNodeManage } from "@/store/nodeManage";
+
+const installStore = useClickInstall();
+const manageStore = useNodeManage();
+
+const network = computed(() => {
+  return manageStore.currentNetwork;
+});
+
+const selectedPreset = computed(() => {
+  return installStore.selectedPreset;
+});
+</script>
diff --git a/launcher/src/components/UI/one-click/sections/OnlySource.vue b/launcher/src/components/UI/one-click/sections/OnlySource.vue
new file mode 100644
index 0000000000..1ab154353a
--- /dev/null
+++ b/launcher/src/components/UI/one-click/sections/OnlySource.vue
@@ -0,0 +1,15 @@
+<template>
+  <div
+    class="col-start-1 col-span-full row-start-1 row-span-full grid grid-cols-24 grid-rows-12"
+  >
+    <OnlyHeader />
+    <OnlyBody />
+    <OnlyFooter />
+  </div>
+</template>
+
+<script setup>
+import OnlyHeader from "../components/vconly/OnlyHeader.vue";
+import OnlyBody from "../components/vconly/OnlyBody.vue";
+import OnlyFooter from "../components/vconly/OnlyFooter.vue";
+</script>
diff --git a/launcher/src/composables/nextRoute.js b/launcher/src/composables/nextRoute.js
index e03da06f82..00ae799ba6 100644
--- a/launcher/src/composables/nextRoute.js
+++ b/launcher/src/composables/nextRoute.js
@@ -14,11 +14,17 @@ export function goToNext() {
     case "/oneClick/preset":
       return "/oneClick/config";
     case "/oneClick/config":
-      if (installStore.selectedPreset.includedPlugins.some((plugin) => plugin.service === "FlashbotsMevBoostService")) {
-        return "/oneClick/mevboost";
+      if (installStore.selectedPreset.name === "vc only") {
+        return "/oneClick/source";
       } else {
-        return "/oneClick/sync";
+        if (installStore.selectedPreset.includedPlugins.some((plugin) => plugin.service === "FlashbotsMevBoostService")) {
+          return "/oneClick/mevboost";
+        } else {
+          return "/oneClick/sync";
+        }
       }
+    case "/oneClick/source":
+      return "/oneClick/sync";
     case "/oneClick/mevboost":
       return "/oneClick/sync";
     case "/oneClick/sync":
diff --git a/launcher/src/router/index.js b/launcher/src/router/index.js
index 4617831334..78f27bab0e 100755
--- a/launcher/src/router/index.js
+++ b/launcher/src/router/index.js
@@ -7,6 +7,7 @@ import OneclickPage from "@/pages/OneclickPage.vue";
 import SelectPreset from "../../src/components/UI/one-click/sections/SelectPreset.vue";
 import ConfigPlugins from "../../src/components/UI/one-click/sections/ConfigPlugins.vue";
 import MevboostRelays from "../../src/components/UI/one-click/sections/MevboostRelays.vue";
+import OnlySource from "../../src/components/UI/one-click/sections/OnlySource.vue";
 import SelectSync from "../../src/components/UI/one-click/sections/SelectSync.vue";
 import VerifyCheck from "../../src/components/UI/one-click/sections/VerifyCheck.vue";
 import AnimationSection from "../../src/components/UI/one-click/sections/AnimationSection.vue";
@@ -79,6 +80,11 @@ const routes = [
         name: "ConfigPlugins",
         component: ConfigPlugins,
       },
+      {
+        path: "source",
+        name: "OnlySource",
+        component: OnlySource,
+      },
       {
         path: "mevboost",
         name: "MevboostRelays",
diff --git a/launcher/src/store/clickInstallation.js b/launcher/src/store/clickInstallation.js
index 9dc6bc0aeb..88ea03d82c 100755
--- a/launcher/src/store/clickInstallation.js
+++ b/launcher/src/store/clickInstallation.js
@@ -118,12 +118,19 @@ export const useClickInstall = defineStore("clickInstallation", {
           includedPlugins: [],
         },
         {
-          id: 7,
+          id: 8,
           name: "lidocsm",
           defaultPath: "/opt/stereum",
           icon: "/img/icon/one-click-icons/preset-icons/LIDO-CSM.png",
           includedPlugins: [],
         },
+        {
+          id: 9,
+          name: "vc only",
+          defaultPath: "/opt/stereum",
+          icon: "/img/icon/one-click-icons/preset-icons/vconly.png",
+          includedPlugins: [],
+        },
       ],
       services: [
         {
diff --git a/launcher/src/store/nodeManage.js b/launcher/src/store/nodeManage.js
index 0e2180a70e..29217ce8c1 100755
--- a/launcher/src/store/nodeManage.js
+++ b/launcher/src/store/nodeManage.js
@@ -196,7 +196,7 @@ export const useNodeManage = defineStore("nodeManage", {
           icon: "/img/icon/network-icons/ethereum-mainnet.png",
           currencyIcon: "/img/icon/control-page-icons/mainnet-currency-symbol.png",
           dataEndpoint: "https://mainnet.beaconcha.in/api/v1",
-          support: ["staking", "mev boost", "stereum on arm", "ssv.network", "obol", "archive", "lidoobol", "lidossv"],
+          support: ["staking", "mev boost", "stereum on arm", "ssv.network", "obol", "archive", "lidoobol", "lidossv", "vc only"],
         },
 
         {
@@ -206,7 +206,7 @@ export const useNodeManage = defineStore("nodeManage", {
           icon: "/img/icon/network-icons/ethereum-testnet-icon.png",
           currencyIcon: "/img/icon/control-page-icons/network-currency-icons/network-currency-icons-goerli-testnet.png",
           dataEndpoint: "https://sepolia.beaconcha.in/api/v1",
-          support: ["staking", "mev boost", "stereum on arm", "archive"],
+          support: ["staking", "mev boost", "stereum on arm", "archive", "vc only"],
         },
         {
           id: 3,
@@ -215,7 +215,7 @@ export const useNodeManage = defineStore("nodeManage", {
           icon: "/img/icon/network-icons/gnosis-mainnet.png",
           currencyIcon: "/img/icon/control-page-icons/network-currency-icons/network-currency-icons-gnosis-mainnet.png",
           dataEndpoint: "https://beacon.gnosischain.com/api/v1",
-          support: ["staking", "stereum on arm", "archive"],
+          support: ["staking", "stereum on arm", "archive", "vc only"],
         },
         {
           id: 4,
@@ -224,7 +224,18 @@ export const useNodeManage = defineStore("nodeManage", {
           icon: "/img/icon/network-icons/ethereum-testnet-icon.png",
           currencyIcon: "/img/icon/control-page-icons/network-currency-icons/network-currency-icons-goerli-testnet.png",
           dataEndpoint: "https://holesky.beaconcha.in/api/v1",
-          support: ["staking", "ssv.network", "stereum on arm", "mev boost", "archive", "obol", "lidoobol", "lidossv", "lidocsm"],
+          support: [
+            "staking",
+            "ssv.network",
+            "stereum on arm",
+            "mev boost",
+            "archive",
+            "obol",
+            "lidoobol",
+            "lidossv",
+            "lidocsm",
+            "vc only",
+          ],
         },
       ],
       currentNetwork: {},

From b5d5ad3c4652c9768dc46d5efc3ea8cc78f8cb48 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Wed, 18 Sep 2024 14:17:37 +0200
Subject: [PATCH 5/5] REFACTOR: format

---
 .../components/UI/edit-page/EditScreen.vue    | 152 ++++--------------
 .../edit-page/components/edit/ConfigBody.vue  |  29 +---
 .../UI/edit-page/components/edit/EditBody.vue |   8 +-
 .../edit/clients/ConsensusClients.vue         |  18 +--
 .../edit/clients/ExecutionClients.vue         |  24 +--
 .../components/edit/clients/GeneralMenu.vue   |  37 +----
 .../edit-page/components/modals/AddModal.vue  |  36 +----
 .../edit-page/components/modals/AddPanel.vue  |  95 +++--------
 .../components/modals/ExternalModifying.vue   |  57 ++-----
 .../UI/edit-page/sections/ServiceSection.vue  |   4 +-
 .../components/UI/node-page/NodeScreen.vue    |  57 ++-----
 .../components/modals/CustomModal.vue         |  25 +--
 .../node-page/components/node/ConfigBody.vue  |  12 +-
 .../UI/node-page/components/node/NodeBody.vue |  55 ++-----
 .../components/node/clients/ClientButtons.vue | 119 +++-----------
 .../node/clients/ConsensusClients.vue         |  11 +-
 .../node/clients/ExecutionClients.vue         |  17 +-
 .../UI/node-page/sections/NodeSection.vue     |   7 +-
 .../components/plugin/ConfigBody.vue          | 138 ++++------------
 .../one-click/components/vconly/OnlyBody.vue  |  58 ++-----
 .../components/vconly/OnlyFooter.vue          |   9 +-
 .../components/vconly/OnlyHeader.vue          |  21 +--
 .../UI/one-click/sections/OnlySource.vue      |   4 +-
 23 files changed, 207 insertions(+), 786 deletions(-)

diff --git a/launcher/src/components/UI/edit-page/EditScreen.vue b/launcher/src/components/UI/edit-page/EditScreen.vue
index 0d2dbec0b7..50dc40ef5b 100644
--- a/launcher/src/components/UI/edit-page/EditScreen.vue
+++ b/launcher/src/components/UI/edit-page/EditScreen.vue
@@ -4,10 +4,7 @@
 
     <div class="w-full h-full grid grid-cols-24 relative select-none">
       <div class="col-start-1 col-span-1 flex justify-center items-center">
-        <SidebarSection
-          @network-modal="displaySwitchNetwork"
-          @nuke-node="openNukeNodeModal"
-        />
+        <SidebarSection @network-modal="displaySwitchNetwork" @nuke-node="openNukeNodeModal" />
       </div>
       <div class="col-start-2 col-end-17 w-full h-full relative">
         <EditBody
@@ -25,16 +22,10 @@
       </div>
       <div class="col-start-17 col-end-21 ml-1 grid grid-cols-2 grid-rows-9">
         <NetworkStatus />
-        <ServiceSection
-          @change-connection="serviceModifyHandler"
-          @delete-service="selectedServiceToRemove"
-        />
+        <ServiceSection @change-connection="serviceModifyHandler" @delete-service="selectedServiceToRemove" />
       </div>
       <div class="col-start-21 col-end-25 px-1 flex flex-col justify-between">
-        <ChangesSection
-          @remove-change="cancelChangeHandler"
-          @confirm-changes="confirmHandler"
-        />
+        <ChangesSection @remove-change="cancelChangeHandler" @confirm-changes="confirmHandler" />
       </div>
     </div>
     <!-- End Node main layout -->
@@ -63,11 +54,7 @@
             @create-custom="createCustomSetup"
             @get-network="getSetupNetwork"
           />
-          <ServicesDrawer
-            v-else-if="manageStore.isServicesDrawerActive"
-            :dragging="startDrag"
-            @add-services="addServices"
-          />
+          <ServicesDrawer v-else-if="manageStore.isServicesDrawerActive" :dragging="startDrag" @add-services="addServices" />
         </template>
       </drawer-box>
     </transition>
@@ -75,11 +62,7 @@
     <!-- Custom Modals -->
     <TransitionGroup name="fadeModal">
       <!-- Start Network Switch Modal -->
-      <NetworkModal
-        v-if="manageStore.displayNetworkList"
-        @close-window="closeNetworkModal"
-        @switch-confirm="switchNetworkConfirm"
-      />
+      <NetworkModal v-if="manageStore.displayNetworkList" @close-window="closeNetworkModal" @switch-confirm="switchNetworkConfirm" />
       <!-- End Switch Network Modal -->
       <!-- Start Switch Client Modal -->
       <SwitchModal
@@ -90,12 +73,7 @@
       />
       <!-- End Switch Client Modal -->
       <!-- Start Info Modal -->
-      <InfoModal
-        v-if="isInfoModalOpen"
-        :client="clientForInfo"
-        @close-window="closeInfoModal"
-        @ok-button="isInfoModalOpen = false"
-      />
+      <InfoModal v-if="isInfoModalOpen" :client="clientForInfo" @close-window="closeInfoModal" @ok-button="isInfoModalOpen = false" />
       <!-- End Info Modal -->
       <!-- Start Modify Services Modal -->
       <ModifyModal
@@ -144,25 +122,16 @@
       <!-- End Nuke Modal -->
 
       <!-- Start Import Setup -->
-      <ImportSetup
-        v-if="manageStore.isImportSetupYamlActive"
-        @confirm-import="confirmImportSingleSetup"
-      />
+      <ImportSetup v-if="manageStore.isImportSetupYamlActive" @confirm-import="confirmImportSingleSetup" />
       <!-- End Import Setup -->
       <!-- Start Create Setup -->
-      <CreateSetup
-        v-if="setupStore.isCreateSetupModalActive"
-        :network="selectedSetupNetwork"
-      />
+      <CreateSetup v-if="setupStore.isCreateSetupModalActive" :network="selectedSetupNetwork" />
       <!-- End Create Setup -->
 
       <!-- Start Setup Infos -->
       <SetupInfos v-if="setupStore.selectedSetupInfos" />
     </TransitionGroup>
-    <LoaderAnime
-      v-if="manageStore.disableConfirmButton || setupStore.isImportAnimeActive"
-      :anime="getAimationSrc"
-    />
+    <LoaderAnime v-if="manageStore.disableConfirmButton || setupStore.isImportAnimeActive" :anime="getAimationSrc" />
   </base-layout>
 </template>
 <script setup>
@@ -350,9 +319,7 @@ const switchClientModalhandler = (item) => {
 
 const switchClientConfirm = (properties) => {
   isSwitchModalOpen.value = false;
-  const current = manageStore.newConfiguration.find(
-    (e) => e?.config.serviceID === properties.itemToReplace.config.serviceID
-  );
+  const current = manageStore.newConfiguration.find((e) => e?.config.serviceID === properties.itemToReplace.config.serviceID);
 
   const currentClientIndex = manageStore.newConfiguration.indexOf(current);
 
@@ -389,9 +356,7 @@ const switchClientConfirm = (properties) => {
         executionClients: [],
         consensusClients: [],
         otherServices: [],
-        checkpointURL: properties.checkPointSyncUrl
-          ? properties.checkPointSyncUrl
-          : false,
+        checkpointURL: properties.checkPointSyncUrl ? properties.checkPointSyncUrl : false,
       },
     },
   });
@@ -434,9 +399,7 @@ const serviceModifyHandler = (item) => {
 const hideModifyModal = () => {
   manageStore.isLineHidden = false;
   isModifyModalOpen.value = false;
-  manageStore.newConfiguration = JSON.parse(
-    JSON.stringify(serviceStore.installedServices)
-  );
+  manageStore.newConfiguration = JSON.parse(JSON.stringify(serviceStore.installedServices));
 };
 const confirmConsensusConnection = (item) => {
   clientToConnect.value.isNotConnectedToConsensus = false;
@@ -535,9 +498,7 @@ const cancelChangeHandler = (item) => {
       const event = manageStore.newConfiguration.find((e) => e.id === item.service.id);
       const eventIdx = manageStore.newConfiguration.indexOf(event);
       manageStore.newConfiguration.splice(eventIdx, 1);
-      manageStore.newConfiguration = JSON.parse(
-        JSON.stringify(serviceStore.installedServices)
-      );
+      manageStore.newConfiguration = JSON.parse(JSON.stringify(serviceStore.installedServices));
     }
 
     if (item.content === "MODIFY") {
@@ -577,10 +538,7 @@ const addServices = (service) => {
 const addServerServices = (service) => {
   let item = useDeepClone(service);
 
-  if (
-    item.category === "service" &&
-    manageStore.newConfiguration.map((s) => s?.service).includes(item?.service)
-  ) {
+  if (item.category === "service" && manageStore.newConfiguration.map((s) => s?.service).includes(item?.service)) {
     return;
   } else {
     item.id = manageStore.newConfiguration.length;
@@ -590,9 +548,7 @@ const addServerServices = (service) => {
     };
     manageStore.newConfiguration.push(newItem);
 
-    setupStore.editSetups
-      .find((s) => s.setupId === setupStore.selectedSetup?.setupId)
-      ?.services.push(newItem);
+    setupStore.editSetups.find((s) => s.setupId === setupStore.selectedSetup?.setupId)?.services.push(newItem);
 
     clientToInstall.value = newItem;
     clientToInstall.value.addPanel = true;
@@ -615,10 +571,7 @@ const onDrop = (event) => {
   const allServices = useDeepClone(serviceStore.allServices);
   const itemId = event.dataTransfer.getData("itemId");
   let item = allServices.find((item) => item.id == itemId);
-  if (
-    item.category === "service" &&
-    manageStore.newConfiguration.map((s) => s.service).includes(item.service)
-  ) {
+  if (item.category === "service" && manageStore.newConfiguration.map((s) => s.service).includes(item.service)) {
     return;
   } else {
     item.id = manageStore.newConfiguration.length;
@@ -707,9 +660,7 @@ const switchNetworkConfirm = (network) => {
   manageStore.displayNetworkList = false;
   if (network?.network != setupStore.selectedSetup?.network) {
     if (manageStore.confirmChanges.map((j) => j.content).includes("CHANGE NETWORK")) {
-      let index = manageStore.confirmChanges.findIndex((j) =>
-        j.content.includes("CHANGE NETWORK")
-      );
+      let index = manageStore.confirmChanges.findIndex((j) => j.content.includes("CHANGE NETWORK"));
       if (setupStore.selectedSetup.network === network.network) {
         manageStore.confirmChanges.splice(index, 1);
       } else {
@@ -753,12 +704,7 @@ const selectedServiceToRemove = (item) => {
   let commonService = setupStore.editSetups.find((s) => {
     return s.setupName === "commonServices";
   });
-  if (
-    item.isNotConnectedToConsensus ||
-    item.isNotConnectedToValidator ||
-    item.isNotConnectedToMevboost ||
-    item.isDisplayPluginMenu
-  ) {
+  if (item.isNotConnectedToConsensus || item.isNotConnectedToValidator || item.isNotConnectedToMevboost || item.isDisplayPluginMenu) {
     return;
   } else {
     clientToRemove.value = item;
@@ -773,9 +719,7 @@ const selectedServiceToRemove = (item) => {
     content: "DELETE",
     contentIcon: "/img/icon/edit-node-icons/delete-service.png",
     service: item,
-    setupId: commonServiceExistance
-      ? commonService.setupId
-      : setupStore.selectedSetup?.setupId,
+    setupId: commonServiceExistance ? commonService.setupId : setupStore.selectedSetup?.setupId,
   };
   const itemExists = manageStore.confirmChanges.some(
     (e) => (e.id === item.config?.serviceID || e.id === item.id) && e.content === "DELETE"
@@ -851,39 +795,25 @@ const confirmHandler = async () => {
   manageStore.disableConfirmButton = true;
 
   const setupExists = manageStore.confirmChanges.some(
-    (item) =>
-      item.service?.hasOwnProperty("setupName") &&
-      item.service?.hasOwnProperty("setupId") &&
-      item.service.setupId == item.id
+    (item) => item.service?.hasOwnProperty("setupName") && item.service?.hasOwnProperty("setupId") && item.service.setupId == item.id
   );
 
   const serverServiceExists = manageStore.confirmChanges.some(
-    (change) =>
-      change.content === "INSTALL" &&
-      setupStore.serverServices.includes(change.service.service)
+    (change) => change.content === "INSTALL" && setupStore.serverServices.includes(change.service.service)
   );
 
   try {
     if (serverServiceExists) {
       await handleServerServiceChanges();
-    } else if (
-      setupExists &&
-      manageStore.confirmChanges.some((e) => e.content === "DELETE")
-    ) {
+    } else if (setupExists && manageStore.confirmChanges.some((e) => e.content === "DELETE")) {
       await handleSetupChanges();
     } else if (manageStore.confirmChanges.some((e) => e.content === "NETWORK")) {
       await handleSwitchSetupNetwork();
-      await ControlService.handleServiceChanges(
-        JSON.parse(JSON.stringify(manageStore.confirmChanges))
-      );
+      await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
     } else if (manageStore.confirmChanges.some((e) => e.content === "MODIFY")) {
-      await ControlService.handleServiceChanges(
-        JSON.parse(JSON.stringify(manageStore.confirmChanges))
-      );
+      await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
     } else {
-      await ControlService.handleServiceChanges(
-        JSON.parse(JSON.stringify(manageStore.confirmChanges))
-      );
+      await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
     }
   } catch (error) {
     console.error("Error processing changes:", error);
@@ -894,27 +824,17 @@ const confirmHandler = async () => {
 };
 
 const handleServerServiceChanges = async () => {
-  const commonServicesId = setupStore.editSetups.find(
-    (s) => s.setupName === "commonServices"
-  )?.setupId;
+  const commonServicesId = setupStore.editSetups.find((s) => s.setupName === "commonServices")?.setupId;
   manageStore.confirmChanges.forEach((change) => {
     change.data.setupId = commonServicesId ?? change.data.setupId;
   });
-  await ControlService.handleServiceChanges(
-    JSON.parse(JSON.stringify(manageStore.confirmChanges))
-  );
+  await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
 };
 
 const handleSetupChanges = async () => {
-  const setupsToRemoveIds = new Set(
-    setupStore.selectedSetupToRemove.map((s) => s.setupId)
-  );
-  setupStore.allSetups = setupStore.allSetups.filter(
-    (e) => !setupsToRemoveIds.has(e.setupId)
-  );
-  setupStore.editSetups = setupStore.editSetups.filter(
-    (e) => !setupsToRemoveIds.has(e.setupId)
-  );
+  const setupsToRemoveIds = new Set(setupStore.selectedSetupToRemove.map((s) => s.setupId));
+  setupStore.allSetups = setupStore.allSetups.filter((e) => !setupsToRemoveIds.has(e.setupId));
+  setupStore.editSetups = setupStore.editSetups.filter((e) => !setupsToRemoveIds.has(e.setupId));
 
   let subtasks = manageStore.confirmChanges.flatMap((e) => e.subTasks);
   await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(subtasks)));
@@ -980,9 +900,7 @@ const deleteSetup = async (item) => {
   });
   const subtasks =
     item?.services.flatMap((service) => {
-      const matchedServices = manageStore.newConfiguration.filter(
-        (e) => e.config?.serviceID === service.config?.serviceID
-      );
+      const matchedServices = manageStore.newConfiguration.filter((e) => e.config?.serviceID === service.config?.serviceID);
 
       return matchedServices.map((e) => ({
         id: e.config?.serviceID,
@@ -1002,9 +920,7 @@ const deleteSetup = async (item) => {
     subTasks: subtasks,
   };
 
-  const itemExists = manageStore.confirmChanges.some(
-    (e) => e.id === item.setupId && e.content === "DELETE"
-  );
+  const itemExists = manageStore.confirmChanges.some((e) => e.id === item.setupId && e.content === "DELETE");
   if (!itemExists) {
     manageStore.confirmChanges.push(confirmDelete);
   }
@@ -1042,9 +958,7 @@ const closeNetworkModal = () => {
 const closeSwitchModal = () => {
   isSwitchModalOpen.value = false;
   manageStore.isLineHidden = false;
-  manageStore.newConfiguration = JSON.parse(
-    JSON.stringify(serviceStore.installedServices)
-  );
+  manageStore.newConfiguration = JSON.parse(JSON.stringify(serviceStore.installedServices));
 };
 
 const closeInfoModal = () => {
diff --git a/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue b/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue
index e7183d0c47..4004f98614 100644
--- a/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue
@@ -11,20 +11,11 @@
   >
     <div
       class="absolute top-0 w-full mx-auto grid grid-cols-3 h-6 border border-gray-950 rounded-t-[5px] text-xs font-[400] font-sans"
-      :class="[
-        setupStore.getBGColor(setupStore.selectedSetup?.color),
-        setupStore.getTextColor(setupStore.selectedSetup?.color),
-      ]"
+      :class="[setupStore.getBGColor(setupStore.selectedSetup?.color), setupStore.getTextColor(setupStore.selectedSetup?.color)]"
     >
-      <span class="col-start-1 justify-self-center self-center">{{
-        $t("editBody.executionClient")
-      }}</span>
-      <span class="col-start-2 justify-self-center self-center">{{
-        $t("editBody.consensusClient")
-      }}</span>
-      <span class="col-start-3 justify-self-center self-center">{{
-        $t("editBody.validator")
-      }}</span>
+      <span class="col-start-1 justify-self-center self-center">{{ $t("editBody.executionClient") }}</span>
+      <span class="col-start-2 justify-self-center self-center">{{ $t("editBody.consensusClient") }}</span>
+      <span class="col-start-3 justify-self-center self-center">{{ $t("editBody.validator") }}</span>
     </div>
     <div
       ref="dropZoneRef"
@@ -106,15 +97,9 @@ const { updateDom } = useMultiSetups();
 const isOverDropZone = ref(false);
 
 const activateScrollBar = computed(() => {
-  const validators = manageStore.newConfiguration.filter(
-    (service) => service.category === "validator"
-  );
-  const consensus = manageStore.newConfiguration.filter(
-    (service) => service.category === "consensus"
-  );
-  const execution = manageStore.newConfiguration.filter(
-    (service) => service.category === "execution"
-  );
+  const validators = manageStore.newConfiguration.filter((service) => service.category === "validator");
+  const consensus = manageStore.newConfiguration.filter((service) => service.category === "consensus");
+  const execution = manageStore.newConfiguration.filter((service) => service.category === "execution");
   return !!(validators.length > 3 || consensus.length > 3 || execution.length > 3);
 });
 
diff --git a/launcher/src/components/UI/edit-page/components/edit/EditBody.vue b/launcher/src/components/UI/edit-page/components/edit/EditBody.vue
index 10d9d200dc..9a2e06fa98 100644
--- a/launcher/src/components/UI/edit-page/components/edit/EditBody.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/EditBody.vue
@@ -13,13 +13,7 @@
       @external-modify="externalModify"
       @remove-lines="removeConnectionLines"
     />
-    <SetupBody
-      v-else
-      @delete-setup="deleteSetup"
-      @connect-setup="connectSetup"
-      @setup-infos="setupInfos"
-      @open-configs="openConfigs"
-    />
+    <SetupBody v-else @delete-setup="deleteSetup" @connect-setup="connectSetup" @setup-infos="setupInfos" @open-configs="openConfigs" />
   </div>
 </template>
 
diff --git a/launcher/src/components/UI/edit-page/components/edit/clients/ConsensusClients.vue b/launcher/src/components/UI/edit-page/components/edit/clients/ConsensusClients.vue
index 50bf9df98e..94a8886b6e 100755
--- a/launcher/src/components/UI/edit-page/components/edit/clients/ConsensusClients.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/clients/ConsensusClients.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="col-start-2 col-end-3 gap-y-5 pt-4 pb-2 grid grid-flow-row auto-rows-max relative"
-  >
+  <div class="col-start-2 col-end-3 gap-y-5 pt-4 pb-2 grid grid-flow-row auto-rows-max relative">
     <div
       v-for="item in getConsensus"
       :key="item.config.serviceID + item.id"
@@ -41,15 +39,7 @@ import { computed } from "vue";
 import { useSetups } from "../../../../../../store/setups";
 
 //Props & Emits
-const emit = defineEmits([
-  "deleteService",
-  "switchClient",
-  "modifyService",
-  "externalModify",
-  "infoModal",
-  "mouseOver",
-  "mouseLeave",
-]);
+const emit = defineEmits(["deleteService", "switchClient", "modifyService", "externalModify", "infoModal", "mouseOver", "mouseLeave"]);
 
 //Refs
 
@@ -59,9 +49,7 @@ const setupStore = useSetups();
 // computed & watchers properties
 const getConsensus = computed(() => {
   const services = manageStore.newConfiguration
-    .filter(
-      (s) => s.setupId === setupStore.selectedSetup?.setupId && s.category === "consensus"
-    )
+    .filter((s) => s.setupId === setupStore.selectedSetup?.setupId && s.category === "consensus")
     .sort((a, b) => {
       const fa = a.name.toLowerCase();
       const fb = b.name.toLowerCase();
diff --git a/launcher/src/components/UI/edit-page/components/edit/clients/ExecutionClients.vue b/launcher/src/components/UI/edit-page/components/edit/clients/ExecutionClients.vue
index 00c7337abb..412417bf48 100755
--- a/launcher/src/components/UI/edit-page/components/edit/clients/ExecutionClients.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/clients/ExecutionClients.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="w-full col-start-1 col-end-2 pt-4 pb-2 gap-1 space-y-4 grid grid-flow-row auto-rows-max relative"
-  >
+  <div class="w-full col-start-1 col-end-2 pt-4 pb-2 gap-1 space-y-4 grid grid-flow-row auto-rows-max relative">
     <div
       v-for="item in getExecutions"
       :key="item"
@@ -41,23 +39,14 @@ import GeneralMenu from "./GeneralMenu.vue";
 import { computed } from "vue";
 import { useSetups } from "../../../../../../store/setups";
 
-const emit = defineEmits([
-  "deleteService",
-  "switchClient",
-  "connectClient",
-  "infoModal",
-  "mouseOver",
-  "mouseLeave",
-]);
+const emit = defineEmits(["deleteService", "switchClient", "connectClient", "infoModal", "mouseOver", "mouseLeave"]);
 const manageStore = useNodeManage();
 const serviceStore = useServices();
 const setupStore = useSetups();
 
 const getExecutions = computed(() => {
   const services = manageStore.newConfiguration
-    .filter(
-      (s) => s.category === "execution" && s.setupId === setupStore.selectedSetup.setupId
-    )
+    .filter((s) => s.category === "execution" && s.setupId === setupStore.selectedSetup.setupId)
     .sort((a, b) => {
       const fa = a.name.toLowerCase();
       const fb = b.name.toLowerCase();
@@ -85,12 +74,7 @@ const displayMenu = (item) => {
   serviceStore.installedServices.forEach((service) => {
     service.displayPluginMenu = false;
   });
-  if (
-    !item.isNotConnectedToConsensus &&
-    !item.isNotConnectedToValidator &&
-    !item.isRemoveProcessing &&
-    !item.isNewClient
-  ) {
+  if (!item.isNotConnectedToConsensus && !item.isNotConnectedToValidator && !item.isRemoveProcessing && !item.isNewClient) {
     item.displayPluginMenu = true;
   }
 };
diff --git a/launcher/src/components/UI/edit-page/components/edit/clients/GeneralMenu.vue b/launcher/src/components/UI/edit-page/components/edit/clients/GeneralMenu.vue
index dc0bac9406..e141ec75ee 100644
--- a/launcher/src/components/UI/edit-page/components/edit/clients/GeneralMenu.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/clients/GeneralMenu.vue
@@ -1,17 +1,8 @@
 <template>
-  <div
-    class="absolute inset-x-0 w-full h-full flex justify-center items-center z-10"
-    @mousedown.prevent
-  >
-    <div
-      class="w-2/3 h-2/3 grid grid-cols-2 grid-rows-2 bg-gray-800 p-1 rounded-md gap-1"
-    >
+  <div class="absolute inset-x-0 w-full h-full flex justify-center items-center z-10" @mousedown.prevent>
+    <div class="w-2/3 h-2/3 grid grid-cols-2 grid-rows-2 bg-gray-800 p-1 rounded-md gap-1">
       <img
-        v-if="
-          item.category !== 'execution' &&
-          item.service !== 'ExternalExecutionService' &&
-          item.service !== 'ExternalConsensusService'
-        "
+        v-if="item.category !== 'execution' && item.service !== 'ExternalExecutionService' && item.service !== 'ExternalConsensusService'"
         class="w-7 bg-gray-900 hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200 border border-gray-700 rounded-md"
         src="/img/icon/edit-node-icons/service-connecting.png"
         alt="Trash Icon"
@@ -20,10 +11,7 @@
         @mouseleave="footerStore.cursorLocation = ''"
       />
       <img
-        v-if="
-          item.service !== 'ExternalExecutionService' &&
-          item.service !== 'ExternalConsensusService'
-        "
+        v-if="item.service !== 'ExternalExecutionService' && item.service !== 'ExternalConsensusService'"
         class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
         src="/img/icon/edit-node-icons/switch-client.png"
         alt="Trash Icon"
@@ -32,10 +20,7 @@
         @mouseleave="footerStore.cursorLocation = ''"
       />
       <img
-        v-if="
-          item.service === 'ExternalExecutionService' ||
-          item.service === 'ExternalConsensusService'
-        "
+        v-if="item.service === 'ExternalExecutionService' || item.service === 'ExternalConsensusService'"
         class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
         src="/img/icon/edit-node-icons/service-connecting.png"
         alt="Trash Icon"
@@ -48,9 +33,7 @@
         src="/img/icon/edit-node-icons/service-delete.png"
         alt="Trash Icon"
         @click="deleteService"
-        @mouseenter="
-          footerStore.cursorLocation = `${deleteServiceTooltip} ${item.name} ${service}`
-        "
+        @mouseenter="footerStore.cursorLocation = `${deleteServiceTooltip} ${item.name} ${service}`"
         @mouseleave="footerStore.cursorLocation = ''"
       />
       <img
@@ -86,13 +69,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits([
-  "deleteService",
-  "switchClient",
-  "modifyService",
-  "infoModal",
-  "externalModify",
-]);
+const emit = defineEmits(["deleteService", "switchClient", "modifyService", "infoModal", "externalModify"]);
 
 const deleteService = () => {
   emit("deleteService", props.item);
diff --git a/launcher/src/components/UI/edit-page/components/modals/AddModal.vue b/launcher/src/components/UI/edit-page/components/modals/AddModal.vue
index 571b058e5f..fd25a21045 100644
--- a/launcher/src/components/UI/edit-page/components/modals/AddModal.vue
+++ b/launcher/src/components/UI/edit-page/components/modals/AddModal.vue
@@ -10,17 +10,8 @@
     @confirm-action="confirmInstall"
   >
     <template #content>
-      <AddPanel
-        v-if="isAddPanelActivated"
-        ref="addPanelComponent"
-        :client="client"
-        :properties="properties"
-      />
-      <MevboostRelays
-        v-if="isRelaysActivated"
-        :client="client"
-        :properties="properties"
-      />
+      <AddPanel v-if="isAddPanelActivated" ref="addPanelComponent" :client="client" :properties="properties" />
+      <MevboostRelays v-if="isRelaysActivated" :client="client" :properties="properties" />
       <AddConnection v-if="isModifyActivated" :client="client" :properties="properties" />
     </template>
   </custom-modal>
@@ -68,32 +59,19 @@ const properties = ref({
 const getConfirmText = computed(() => {
   let text = "";
   if (isAddPanelActivated.value) {
-    if (
-      props.client.category === "consensus" &&
-      props.client.service === "ExternalConsensusService"
-    ) {
+    if (props.client.category === "consensus" && props.client.service === "ExternalConsensusService") {
       text = "confirm";
-    } else if (
-      props.client.category === "execution" &&
-      props.client.service === "ExternalExecutionService"
-    ) {
+    } else if (props.client.category === "execution" && props.client.service === "ExternalExecutionService") {
       text = "confirm";
     } else if (
       props.client.category === "consensus" ||
-      (props.client.category === "validator" &&
-        !/Web3Signer/.test(props.client.service)) ||
+      (props.client.category === "validator" && !/Web3Signer/.test(props.client.service)) ||
       /LidoObolExit|ValidatorEjector/.test(props.client.service)
     ) {
       text = "next";
-    } else if (
-      props.client.category === "service" &&
-      props.client.service !== "FlashbotsMevBoostService"
-    ) {
+    } else if (props.client.category === "service" && props.client.service !== "FlashbotsMevBoostService") {
       text = "confirm";
-    } else if (
-      props.client.category === "service" &&
-      props.client.service === "FlashbotsMevBoostService"
-    ) {
+    } else if (props.client.category === "service" && props.client.service === "FlashbotsMevBoostService") {
       text = "next";
     }
   } else if (isRelaysActivated.value) {
diff --git a/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue b/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
index 36548dd54f..864efde3fc 100644
--- a/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
+++ b/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
@@ -1,18 +1,10 @@
 import { onMounted, watch, onUnmounted, ref } from 'vue';
 <template>
-  <div
-    class="w-full h-full flex flex-col justify-evenly items-center mx-auto px-4 py-2 space-y-2 mt-6 relative"
-  >
+  <div class="w-full h-full flex flex-col justify-evenly items-center mx-auto px-4 py-2 space-y-2 mt-6 relative">
     <div class="w-full flex justify-center items-center">
       <div class="w-full grid grid-cols-12 items-center text-md">
-        <img
-          class="col-start-1 w-8"
-          src="/img/icon/edit-node-icons/service-save-path.png"
-          alt="Path Icon"
-        />
-        <span class="col-start-2 col-span-3 text-gray-400 text-left">{{
-          $t("editModals.installationPath")
-        }}</span>
+        <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-save-path.png" alt="Path Icon" />
+        <span class="col-start-2 col-span-3 text-gray-400 text-left">{{ $t("editModals.installationPath") }}</span>
         <input
           v-model="props.properties.installDir"
           class="col-start-6 col-span-7 min-h-[30px] border border-gray-500 px-2 py-1 text-left text-gray-400 text-xs rounded bg-[#141516] focus:border-teal-500"
@@ -22,70 +14,36 @@ import { onMounted, watch, onUnmounted, ref } from 'vue';
       </div>
     </div>
     <div
-      v-if="
-        client.category === 'consensus' && client.service !== 'ExternalConsensusService'
-      "
+      v-if="client.category === 'consensus' && client.service !== 'ExternalConsensusService'"
       class="w-full flex justify-center items-center"
     >
       <div class="w-full grid grid-cols-12 items-center text-md">
-        <img
-          class="w-8 col-start-1"
-          src="/animation/synchronisation/synchronisation-icon-active.gif"
-          alt="Sync Icon"
-        />
-        <span class="col-start-2 col-span-3 text-gray-400 text-md text-left">{{
-          $t("editModals.syncMode")
-        }}</span>
+        <img class="w-8 col-start-1" src="/animation/synchronisation/synchronisation-icon-active.gif" alt="Sync Icon" />
+        <span class="col-start-2 col-span-3 text-gray-400 text-md text-left">{{ $t("editModals.syncMode") }}</span>
         <SyncCarousel :cat="client.category" />
       </div>
     </div>
 
     <div
-      v-if="
-        props.client.service === 'ExternalExecutionService' ||
-        props.client.service === 'ExternalConsensusService'
-      "
+      v-if="props.client.service === 'ExternalExecutionService' || props.client.service === 'ExternalConsensusService'"
       class="w-full flex justify-center items-center"
     >
       <div class="w-full grid grid-cols-12 items-center text-md">
-        <img
-          class="col-start-1 w-8"
-          src="/img/icon/edit-node-icons/service-category.png"
-          alt="Path Icon"
-        />
-        <span class="col-start-2 col-span-3 text-gray-400 text-md text-left"
-          >EXTERNAL SOURCE</span
-        >
+        <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-category.png" alt="Path Icon" />
+        <span class="col-start-2 col-span-3 text-gray-400 text-md text-left">EXTERNAL SOURCE</span>
 
         <div
           class="col-start-6 col-span-full w-full relative bg-[#141516] border border-gray-500 rounded-md grid grid-cols-12 items-center"
           @click="dropdown"
         >
-          <div
-            class="col-start-1 col-span-full flex justify-center items-center overflow-hidden"
-          >
-            <div
-              class="w-3/4 px-2 py-1 text-sm text-gray-400 capitalize flex justify-start items-center space-x-4"
-            >
-              <img
-                v-if="selectedSource.icon ? selectedSource.icon : null"
-                :src="selectedSource.icon"
-                class="w-5"
-              />
-              <span>{{
-                selectedSource.name ? selectedSource.name : "Select Source"
-              }}</span>
+          <div class="col-start-1 col-span-full flex justify-center items-center overflow-hidden">
+            <div class="w-3/4 px-2 py-1 text-sm text-gray-400 capitalize flex justify-start items-center space-x-4">
+              <img v-if="selectedSource.icon ? selectedSource.icon : null" :src="selectedSource.icon" class="w-5" />
+              <span>{{ selectedSource.name ? selectedSource.name : "Select Source" }}</span>
             </div>
 
-            <button
-              class="w-1/4 h-full p-1 text-gray-500 hover:text-gray-200 flex justify-end items-center"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
+            <button class="w-1/4 h-full p-1 text-gray-500 hover:text-gray-200 flex justify-end items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                 <path
                   fill-rule="evenodd"
                   d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
@@ -117,18 +75,13 @@ import { onMounted, watch, onUnmounted, ref } from 'vue';
     </div>
     <div
       v-if="
-        (props.client.service === 'ExternalExecutionService' ||
-          props.client.service === 'ExternalConsensusService') &&
+        (props.client.service === 'ExternalExecutionService' || props.client.service === 'ExternalConsensusService') &&
         selectedSource.name === 'custom'
       "
       class="w-full flex justify-center items-center"
     >
       <div class="w-full grid grid-cols-12 items-center text-md">
-        <img
-          class="col-start-1 w-8"
-          src="/img/icon/edit-node-icons/service-external-source.png"
-          alt="Path Icon"
-        />
+        <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-external-source.png" alt="Path Icon" />
         <span class="col-start-2 col-span-3 text-gray-400 text-left">ADDRESS</span>
         <input
           v-model="addressLink"
@@ -140,17 +93,11 @@ import { onMounted, watch, onUnmounted, ref } from 'vue';
     </div>
 
     <div
-      v-if="
-        client.service === 'ExternalExecutionService' && client.category == 'execution'
-      "
+      v-if="client.service === 'ExternalExecutionService' && client.category == 'execution'"
       class="w-full flex justify-center items-center"
     >
       <div class="w-full grid grid-cols-12 items-center text-md">
-        <img
-          class="col-start-1 w-8"
-          src="/img/icon/edit-node-icons/service-jwt-token-connection.png"
-          alt="Path Icon"
-        />
+        <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-jwt-token-connection.png" alt="Path Icon" />
         <span class="col-start-2 col-span-3 text-gray-400 text-left">JWT TOKEN</span>
         <input
           v-model="jwtToken"
@@ -232,9 +179,7 @@ const pickSource = (source) => {
 const getInstallPath = async () => {
   let largestVolumePath = await ControlService.getLargestVolumePath();
   if (largestVolumePath === "/") largestVolumePath = largestVolumePath + "opt";
-  const stereumInstallationPath = [largestVolumePath, "/stereum"]
-    .join("/")
-    .replace(/\/{2,}/, "/");
+  const stereumInstallationPath = [largestVolumePath, "/stereum"].join("/").replace(/\/{2,}/, "/");
   props.properties.installDir = stereumInstallationPath;
 };
 </script>
diff --git a/launcher/src/components/UI/edit-page/components/modals/ExternalModifying.vue b/launcher/src/components/UI/edit-page/components/modals/ExternalModifying.vue
index beea8631b1..d09e6c327c 100644
--- a/launcher/src/components/UI/edit-page/components/modals/ExternalModifying.vue
+++ b/launcher/src/components/UI/edit-page/components/modals/ExternalModifying.vue
@@ -10,55 +10,27 @@
     @confirm-action="confirmInstall"
   >
     <template #content>
-      <div
-        class="w-full h-full flex flex-col justify-evenly items-center mx-auto px-4 py-2 space-y-2 mt-6 relative"
-      >
+      <div class="w-full h-full flex flex-col justify-evenly items-center mx-auto px-4 py-2 space-y-2 mt-6 relative">
         <div
-          v-if="
-            props.client.service === 'ExternalExecutionService' ||
-            props.client.service === 'ExternalConsensusService'
-          "
+          v-if="props.client.service === 'ExternalExecutionService' || props.client.service === 'ExternalConsensusService'"
           class="w-full flex justify-center items-center"
         >
           <div class="w-full grid grid-cols-12 items-center text-md">
-            <img
-              class="col-start-1 w-8"
-              src="/img/icon/edit-node-icons/service-category.png"
-              alt="Path Icon"
-            />
-            <span class="col-start-2 col-span-3 text-gray-400 text-md text-left"
-              >EXTERNAL SOURCE</span
-            >
+            <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-category.png" alt="Path Icon" />
+            <span class="col-start-2 col-span-3 text-gray-400 text-md text-left">EXTERNAL SOURCE</span>
 
             <div
               class="col-start-6 col-span-full w-full relative bg-[#141516] border border-gray-500 rounded-md grid grid-cols-12 items-center"
               @click="dropdown"
             >
-              <div
-                class="col-start-1 col-span-full flex justify-center items-center overflow-hidden"
-              >
-                <div
-                  class="w-3/4 px-2 py-1 text-sm text-gray-400 capitalize flex justify-start items-center space-x-4"
-                >
-                  <img
-                    v-if="selectedSource.icon ? selectedSource.icon : null"
-                    :src="selectedSource.icon"
-                    class="w-5"
-                  />
-                  <span>{{
-                    selectedSource.name ? selectedSource.name : "Select Source"
-                  }}</span>
+              <div class="col-start-1 col-span-full flex justify-center items-center overflow-hidden">
+                <div class="w-3/4 px-2 py-1 text-sm text-gray-400 capitalize flex justify-start items-center space-x-4">
+                  <img v-if="selectedSource.icon ? selectedSource.icon : null" :src="selectedSource.icon" class="w-5" />
+                  <span>{{ selectedSource.name ? selectedSource.name : "Select Source" }}</span>
                 </div>
 
-                <button
-                  class="w-1/4 h-full p-1 text-gray-500 hover:text-gray-200 flex justify-end items-center"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
+                <button class="w-1/4 h-full p-1 text-gray-500 hover:text-gray-200 flex justify-end items-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                     <path
                       fill-rule="evenodd"
                       d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
@@ -90,18 +62,13 @@
         </div>
         <div
           v-if="
-            (props.client.service === 'ExternalExecutionService' ||
-              props.client.service === 'ExternalConsensusService') &&
+            (props.client.service === 'ExternalExecutionService' || props.client.service === 'ExternalConsensusService') &&
             selectedSource.name === 'custom'
           "
           class="w-full flex justify-center items-center"
         >
           <div class="w-full grid grid-cols-12 items-center text-md">
-            <img
-              class="col-start-1 w-8"
-              src="/img/icon/edit-node-icons/service-external-source.png"
-              alt="Path Icon"
-            />
+            <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-external-source.png" alt="Path Icon" />
             <span class="col-start-2 col-span-3 text-gray-400 text-left">ADDRESS</span>
             <input
               v-model="addressLink"
diff --git a/launcher/src/components/UI/edit-page/sections/ServiceSection.vue b/launcher/src/components/UI/edit-page/sections/ServiceSection.vue
index bd4ef2fe10..47d227206e 100644
--- a/launcher/src/components/UI/edit-page/sections/ServiceSection.vue
+++ b/launcher/src/components/UI/edit-page/sections/ServiceSection.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="w-full h-full col-start-1 col-span-full row-start-2 row-span-full pt-1 mt-1"
-  >
+  <div class="w-full h-full col-start-1 col-span-full row-start-2 row-span-full pt-1 mt-1">
     <ServiceBody @change-connection="changeConnection" @delete-service="deleteService" />
   </div>
 </template>
diff --git a/launcher/src/components/UI/node-page/NodeScreen.vue b/launcher/src/components/UI/node-page/NodeScreen.vue
index 55e3285821..4ab22f3be4 100755
--- a/launcher/src/components/UI/node-page/NodeScreen.vue
+++ b/launcher/src/components/UI/node-page/NodeScreen.vue
@@ -18,9 +18,7 @@
         <ServiceSection @open-expert="openExpertModal" @open-logs="openLogPage" />
       </div>
       <div class="col-start-21 col-end-25 px-1 flex flex-col justify-between">
-        <div
-          class="h-[60px] self-center w-full flex flex-col justify-center items-center"
-        >
+        <div class="h-[60px] self-center w-full flex flex-col justify-center items-center">
           <button
             class="info-toggle-btn w-full h-[34px] rounded-full bg-[#264744] hover:bg-[#325e5a] px-2 py-1 text-gray-200 active:scale-95 shadow-md shadow-zinc-800 active:shadow-none transition-all duration-200 ease-in-out uppercase flex justify-center items-center"
             @click="alarmToggle"
@@ -31,11 +29,7 @@
             "
             @mouseleave="footerStore.cursorLocation = ''"
           >
-            <img
-              class="w-8"
-              src="/img/icon/node-page-icons/access-tutorial-icon.png"
-              alt="information"
-            />
+            <img class="w-8" src="/img/icon/node-page-icons/access-tutorial-icon.png" alt="information" />
           </button>
         </div>
         <AlertSection :info-aralm="nodeStore.infoAlarm" />
@@ -54,11 +48,7 @@
         @export-all-log="updateAndExportAllLogs"
         @export-customized-logs="updateAndExportAllLogs"
       />
-      <ExpertWindow
-        v-if="isExpertModeOpen"
-        :item="expertModeClient"
-        @hide-modal="closeExpertMode"
-      />
+      <ExpertWindow v-if="isExpertModeOpen" :item="expertModeClient" @hide-modal="closeExpertMode" />
     </div>
 
     <!-- End Node main layout -->
@@ -200,10 +190,7 @@ const checkForListingKeys = async () => {
     serviceStore.installedServices &&
     serviceStore.installedServices.length > 0 &&
     serviceStore.installedServices.some(
-      (s) =>
-        s.category === "validator" &&
-        s.state === "running" &&
-        (!s.config.keys || !s.config.keys.length > 0)
+      (s) => s.category === "validator" && s.state === "running" && (!s.config.keys || !s.config.keys.length > 0)
     )
   ) {
     clearInterval(pollingListingKeys);
@@ -217,11 +204,7 @@ const updateConnectionStats = async () => {
   controlStore.ipAddress = stats.ipAddress;
 };
 const updateServiceLogs = async () => {
-  if (
-    serviceStore.installedServices &&
-    serviceStore.installedServices.length > 0 &&
-    headerStore.refresh
-  ) {
+  if (serviceStore.installedServices && serviceStore.installedServices.length > 0 && headerStore.refresh) {
     const data = await ControlService.getServiceLogs({ logs_tail: 150 });
     nodeStore.serviceLogs = data;
   }
@@ -236,13 +219,9 @@ const updateAndExportAllLogs = async (client) => {
     until: nodeStore.untilDateParsDays,
   });
 
-  const fileName = `${client.name}_${
-    nodeStore.isExportCustomizedDateLoading ? "customized" : "all"
-  }_logs.txt`;
+  const fileName = `${client.name}_${nodeStore.isExportCustomizedDateLoading ? "customized" : "all"}_logs.txt`;
   const data = [...nodeStore.allLogsForExp.logs].reverse();
-  const lineByLine = data
-    .map((line, index) => `#${data.length - index}: ${line}`)
-    .join("\n\n");
+  const lineByLine = data.map((line, index) => `#${data.length - index}: ${line}`).join("\n\n");
   const blob = new Blob([lineByLine], { type: "text/plain;charset=utf-8" });
   saveAs(blob, fileName);
 
@@ -254,11 +233,7 @@ const updateAndExportAllLogs = async (client) => {
 
 const updateServerVitals = async () => {
   try {
-    if (
-      serviceStore.installedServices &&
-      serviceStore.installedServices.length > 0 &&
-      headerStore.refresh
-    ) {
+    if (serviceStore.installedServices && serviceStore.installedServices.length > 0 && headerStore.refresh) {
       const data = await ControlService.getServerVitals();
       controlStore.cpu = data.cpu;
       controlStore.availDisk = data.availDisk;
@@ -299,22 +274,14 @@ const closeExpertMode = () => {
 // ********** LOGS **********
 
 const exportLogs = async (client) => {
-  const currentService = nodeStore.serviceLogs.find(
-    (service) => service.config?.serviceID === client.config?.serviceID
-  );
+  const currentService = nodeStore.serviceLogs.find((service) => service.config?.serviceID === client.config?.serviceID);
 
-  const fileName = nodeStore.exportLogs
-    ? `${client.name}_150_logs.txt`
-    : `${client.name}_all_logs.txt`;
+  const fileName = nodeStore.exportLogs ? `${client.name}_150_logs.txt` : `${client.name}_all_logs.txt`;
 
   // Select the data based on the condition
-  const data = nodeStore.exportLogs
-    ? currentService.logs.slice(-150).reverse()
-    : currentService.logs.reverse();
+  const data = nodeStore.exportLogs ? currentService.logs.slice(-150).reverse() : currentService.logs.reverse();
 
-  const lineByLine = data
-    .map((line, index) => `#${data.length - index}: ${line}`)
-    .join("\n\n");
+  const lineByLine = data.map((line, index) => `#${data.length - index}: ${line}`).join("\n\n");
   const blob = new Blob([lineByLine], { type: "text/plain;charset=utf-8" });
   saveAs(blob, fileName);
 };
diff --git a/launcher/src/components/UI/node-page/components/modals/CustomModal.vue b/launcher/src/components/UI/node-page/components/modals/CustomModal.vue
index 5fe24d7d95..0a7ac05cf0 100644
--- a/launcher/src/components/UI/node-page/components/modals/CustomModal.vue
+++ b/launcher/src/components/UI/node-page/components/modals/CustomModal.vue
@@ -18,11 +18,7 @@
           <div v-if="mainTitle" class="text-xl font-bold py-2 text-gray-200 uppercase">
             <p>{{ mainTitle }}</p>
           </div>
-          <div
-            v-if="messageText"
-            class="text-md font-bold py-2"
-            :class="bgColor ? 'text-gray-200' : null"
-          >
+          <div v-if="messageText" class="text-md font-bold py-2" :class="bgColor ? 'text-gray-200' : null">
             <p>{{ messageText }}</p>
           </div>
           <slot name="content"></slot>
@@ -42,10 +38,9 @@
             {{ confirmText }}
           </button>
 
-          <span
-            class="absolute bottom-1 left-[17rem] text-xs flex justify-center items-center text-red-500 mx-auto"
-            >{{ clickOutsideText }}</span
-          >
+          <span class="absolute bottom-1 left-[17rem] text-xs flex justify-center items-center text-red-500 mx-auto">{{
+            clickOutsideText
+          }}</span>
         </div>
       </div>
     </div>
@@ -63,17 +58,7 @@ const emitConfirmAction = () => {
   emit("confirmAction");
 };
 
-const {
-  icon,
-  altText,
-  mainTitle,
-  messageText,
-  confirmText,
-  clickOutsideText,
-  bgColor,
-  btnColor,
-  iconSize,
-} = defineProps({
+const { icon, altText, mainTitle, messageText, confirmText, clickOutsideText, bgColor, btnColor, iconSize } = defineProps({
   icon: String,
   altText: String,
   mainTitle: String,
diff --git a/launcher/src/components/UI/node-page/components/node/ConfigBody.vue b/launcher/src/components/UI/node-page/components/node/ConfigBody.vue
index d8c5b4b384..b5641ea09d 100644
--- a/launcher/src/components/UI/node-page/components/node/ConfigBody.vue
+++ b/launcher/src/components/UI/node-page/components/node/ConfigBody.vue
@@ -11,15 +11,9 @@
       <div
         class="col-start-1 col-span-full row-start-1 row-span-1 w-full mx-auto grid grid-cols-3 h-6 bg-[#33393E] border border-gray-950 rounded-t-[5px] text-gray-300 text-xs font-[400] font-sans"
       >
-        <span class="col-start-1 justify-self-center self-center">{{
-          $t("editModals.executionClients")
-        }}</span>
-        <span class="col-start-2 justify-self-center self-center">{{
-          $t("editModals.consensusClients")
-        }}</span>
-        <span class="col-start-3 justify-self-center self-center"
-          >{{ $t("editBody.validator") }}
-        </span>
+        <span class="col-start-1 justify-self-center self-center">{{ $t("editModals.executionClients") }}</span>
+        <span class="col-start-2 justify-self-center self-center">{{ $t("editModals.consensusClients") }}</span>
+        <span class="col-start-3 justify-self-center self-center">{{ $t("editBody.validator") }} </span>
       </div>
       <ClientSkeleton v-for="i in skeletons" v-show="loadingClients" :key="i" />
       <ExecutionClients
diff --git a/launcher/src/components/UI/node-page/components/node/NodeBody.vue b/launcher/src/components/UI/node-page/components/node/NodeBody.vue
index f1d940a4f9..7fa135585b 100755
--- a/launcher/src/components/UI/node-page/components/node/NodeBody.vue
+++ b/launcher/src/components/UI/node-page/components/node/NodeBody.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="w-full h-full max-h-[430px] rounded-md border border-gray-600 overflow-hidden bg-[#151618] flex justify-center items-center"
-  >
+  <div class="w-full h-full max-h-[430px] rounded-md border border-gray-600 overflow-hidden bg-[#151618] flex justify-center items-center">
     <ConfigBody
       v-if="setupStore.isConfigViewActive"
       @open-expert="openExpert"
@@ -13,16 +11,8 @@
       @line-draw="lineDrawHandler"
       @remove-lines="removeConnectionLines"
     />
-    <SetupBody
-      v-if="!setupStore.isConfigViewActive"
-      @open-setup="openSetup"
-      @export-setup="exportSetup"
-    />
-    <PluginLogs
-      v-if="isPluginLogPageActive"
-      :item="itemToLogs"
-      @close-log="closePluginLogsPage"
-    />
+    <SetupBody v-if="!setupStore.isConfigViewActive" @open-setup="openSetup" @export-setup="exportSetup" />
+    <PluginLogs v-if="isPluginLogPageActive" :item="itemToLogs" @close-log="closePluginLogsPage" />
   </div>
 </template>
 
@@ -39,13 +29,7 @@ import ControlService from "@/store/ControlService";
 import LeaderLine from "leader-line-new";
 import { useSetups } from "@/store/setups";
 
-const emit = defineEmits([
-  "openExpert",
-  "openLog",
-  "setupState",
-  "exportSetup",
-  "externalModify",
-]);
+const emit = defineEmits(["openExpert", "openLog", "setupState", "exportSetup", "externalModify"]);
 
 // Refs
 const isPluginLogPageActive = ref(false);
@@ -78,12 +62,7 @@ watchEffect(() => {
 
 const oneWayConnection = (start, end, startSocket, endSocket) => {
   if (start && end) {
-    let newLine = new LeaderLine(
-      start,
-      end,
-      { dash: { animation: true } },
-      { hide: true }
-    );
+    let newLine = new LeaderLine(start, end, { dash: { animation: true } }, { hide: true });
     newLine.position();
     newLine.setOptions({
       size: 2,
@@ -105,9 +84,7 @@ const lineDrawHandler = (item) => {
         const dependencies = serviceStore.installedServices.filter(
           (s) =>
             s.config?.dependencies?.executionClients?.length > 0 &&
-            s.config?.dependencies?.executionClients.some(
-              (d) => d.id === item.config?.serviceID
-            )
+            s.config?.dependencies?.executionClients.some((d) => d.id === item.config?.serviceID)
         );
         dependencies.forEach((d) => {
           if (d.category === "consensus") {
@@ -124,12 +101,8 @@ const lineDrawHandler = (item) => {
         const dependencies = serviceStore.installedServices.filter(
           (s) =>
             (s.config?.dependencies?.consensusClients?.length > 0 &&
-              s.config?.dependencies?.consensusClients.some(
-                (d) => d.id === item.config?.serviceID
-              )) ||
-            item.config?.dependencies?.executionClients.some(
-              (d) => d.id === s.config?.serviceID
-            )
+              s.config?.dependencies?.consensusClients.some((d) => d.id === item.config?.serviceID)) ||
+            item.config?.dependencies?.executionClients.some((d) => d.id === s.config?.serviceID)
         );
         dependencies.forEach((d) => {
           if (d.category === "validator") {
@@ -152,15 +125,9 @@ const lineDrawHandler = (item) => {
       case "validator": {
         const dependencies = serviceStore.installedServices.filter(
           (s) =>
-            item.config?.dependencies?.executionClients.some(
-              (d) => d.id === s.config?.serviceID
-            ) ||
-            item.config?.dependencies?.consensusClients.some(
-              (d) => d.id === s.config?.serviceID
-            ) ||
-            s.config?.dependencies?.consensusClients.some(
-              (d) => d.id === item.config?.serviceID
-            )
+            item.config?.dependencies?.executionClients.some((d) => d.id === s.config?.serviceID) ||
+            item.config?.dependencies?.consensusClients.some((d) => d.id === s.config?.serviceID) ||
+            s.config?.dependencies?.consensusClients.some((d) => d.id === item.config?.serviceID)
         );
         dependencies.forEach((d) => {
           if (d.category === "validator") {
diff --git a/launcher/src/components/UI/node-page/components/node/clients/ClientButtons.vue b/launcher/src/components/UI/node-page/components/node/clients/ClientButtons.vue
index 132caff2b0..3a67917879 100755
--- a/launcher/src/components/UI/node-page/components/node/clients/ClientButtons.vue
+++ b/launcher/src/components/UI/node-page/components/node/clients/ClientButtons.vue
@@ -1,26 +1,12 @@
 import { useNodeStore } from '@/store/theNode';
 <template>
-  <div
-    class="col-start-2 col-span-1 grid grid-cols-3 grid-rows-3 gap-1 p-1"
-    @pointerdown.prevent.stop
-  >
+  <div class="col-start-2 col-span-1 grid grid-cols-3 grid-rows-3 gap-1 p-1" @pointerdown.prevent.stop>
     <div
-      v-if="
-        props.client.service !== 'ExternalExecutionService' &&
-        props.client.service !== 'ExternalConsensusService'
-      "
+      v-if="props.client.service !== 'ExternalExecutionService' && props.client.service !== 'ExternalConsensusService'"
       class="p-1 col-start-1 col-span-1 flex justify-center items-center bg-gray-900 hover:bg-gray-600 rounded-md"
     >
-      <button
-        v-if="props.client.serviceIsPending"
-        type="button"
-        class="w-full h-full rounded-md disabled"
-      >
-        <img
-          src="/img/icon/loading-icons/loading-circle.png"
-          alt="icon"
-          class="w-4 animate-spin"
-        />
+      <button v-if="props.client.serviceIsPending" type="button" class="w-full h-full rounded-md disabled">
+        <img src="/img/icon/loading-icons/loading-circle.png" alt="icon" class="w-4 animate-spin" />
       </button>
       <button
         v-else-if="props.client.state == 'running'"
@@ -29,22 +15,14 @@ import { useNodeStore } from '@/store/theNode';
         @mouseenter="footerStore.cursorLocation = `${turnOff}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
-        <img
-          src="/img/icon/node-page-icons/service-command-turn-off.png"
-          alt="icon"
-          class="w-4 active:scale-95"
-        />
+        <img src="/img/icon/node-page-icons/service-command-turn-off.png" alt="icon" class="w-4 active:scale-95" />
       </button>
       <button
         v-else-if="props.client.state == 'restarting'"
         class="w-full h-full transition-colors duration-200 rounded-md flex justify-center items-center"
         @click="stateHandler"
       >
-        <img
-          src="/img/icon/node-page-icons/service-command-pending.png"
-          alt="icon"
-          class="w-4 active:scale-95"
-        />
+        <img src="/img/icon/node-page-icons/service-command-pending.png" alt="icon" class="w-4 active:scale-95" />
       </button>
       <button
         v-else
@@ -53,44 +31,26 @@ import { useNodeStore } from '@/store/theNode';
         @mouseenter="footerStore.cursorLocation = `${turnOn}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
-        <img
-          src="/img/icon/node-page-icons/service-command-turn-on.png"
-          alt="icon"
-          class="w-4 active:scale-95"
-        />
+        <img src="/img/icon/node-page-icons/service-command-turn-on.png" alt="icon" class="w-4 active:scale-95" />
       </button>
     </div>
     <button
-      v-if="
-        props.client.service !== 'ExternalExecutionService' &&
-        props.client.service !== 'ExternalConsensusService'
-      "
+      v-if="props.client.service !== 'ExternalExecutionService' && props.client.service !== 'ExternalConsensusService'"
       class="col-start-2 col-span-1 p-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md flex justify-center items-center"
       @click="restartHandler"
       @mouseenter="footerStore.cursorLocation = `${restart}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img
-        src="/img/icon//node-page-icons/service-command-restart.png"
-        alt="icon"
-        class="w-4 active:scale-95"
-      />
+      <img src="/img/icon//node-page-icons/service-command-restart.png" alt="icon" class="w-4 active:scale-95" />
     </button>
     <button
-      v-if="
-        props.client.service === 'ExternalExecutionService' ||
-        props.client.service === 'ExternalConsensusService'
-      "
+      v-if="props.client.service === 'ExternalExecutionService' || props.client.service === 'ExternalConsensusService'"
       class="col-start-1 col-span-1 p-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md flex justify-center items-center"
       @click="externalModify"
       @mouseenter="footerStore.cursorLocation = `${restart}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img
-        src="/img/icon//edit-node-icons/service-connecting.png"
-        alt="icon"
-        class="w-4 active:scale-95"
-      />
+      <img src="/img/icon//edit-node-icons/service-connecting.png" alt="icon" class="w-4 active:scale-95" />
     </button>
     <button
       class="col-span-1 p-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md"
@@ -99,43 +59,25 @@ import { useNodeStore } from '@/store/theNode';
       @mouseenter="footerStore.cursorLocation = `${expert}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img
-        src="/img/icon/node-page-icons/service-command-open-settings.png"
-        alt="icon"
-        class="w-8 active:scale-95"
-      />
+      <img src="/img/icon/node-page-icons/service-command-open-settings.png" alt="icon" class="w-8 active:scale-95" />
     </button>
     <button
-      v-if="
-        props.client.service !== 'ExternalExecutionService' &&
-        props.client.service !== 'ExternalConsensusService'
-      "
+      v-if="props.client.service !== 'ExternalExecutionService' && props.client.service !== 'ExternalConsensusService'"
       class="col-start-1 row-start-2 col-span-1 p-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md flex justify-center items-center"
       @click="openLog"
       @mouseenter="footerStore.cursorLocation = `${logs}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img
-        src="/img/icon/node-page-icons/service-command-open-logs.png"
-        alt="icon"
-        class="w-4 active:scale-95"
-      />
+      <img src="/img/icon/node-page-icons/service-command-open-logs.png" alt="icon" class="w-4 active:scale-95" />
     </button>
     <button
-      v-if="
-        props.client.service !== 'ExternalExecutionService' &&
-        props.client.service !== 'ExternalConsensusService'
-      "
+      v-if="props.client.service !== 'ExternalExecutionService' && props.client.service !== 'ExternalConsensusService'"
       class="col-start-2 row-start-2 col-span-1 p-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md flex justify-center items-center"
       @click="openDoc"
       @mouseenter="footerStore.cursorLocation = `${docs}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img
-        src="/img/icon/node-page-icons/service-command-open-docs.png"
-        alt="icon"
-        class="w-5 active:scale-95"
-      />
+      <img src="/img/icon/node-page-icons/service-command-open-docs.png" alt="icon" class="w-5 active:scale-95" />
     </button>
     <button
       v-if="
@@ -148,11 +90,7 @@ import { useNodeStore } from '@/store/theNode';
       @mouseenter="footerStore.cursorLocation = `${resync}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img
-        src="/img/icon/node-page-icons/service-command-resync-client.png"
-        alt="icon"
-        class="w-4 active:scale-95"
-      />
+      <img src="/img/icon/node-page-icons/service-command-resync-client.png" alt="icon" class="w-4 active:scale-95" />
     </button>
     <button
       v-if="props.client.service == 'TekuValidatorService'"
@@ -161,11 +99,7 @@ import { useNodeStore } from '@/store/theNode';
       @mouseenter="footerStore.cursorLocation = `${removeLockBtn}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img
-        src="/img/icon/node-page-icons/service-command-delete-lockfile.png"
-        alt="icon"
-        class="w-4 h-4 active:scale-95"
-      />
+      <img src="/img/icon/node-page-icons/service-command-delete-lockfile.png" alt="icon" class="w-4 h-4 active:scale-95" />
     </button>
     <button
       v-if="props.client.service == 'GethService'"
@@ -174,28 +108,17 @@ import { useNodeStore } from '@/store/theNode';
       @mouseenter="footerStore.cursorLocation = `${pruning}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img
-        src="/img/icon/node-page-icons/service-command-pruning.png"
-        alt="icon"
-        class="active:scale-95"
-      />
+      <img src="/img/icon/node-page-icons/service-command-pruning.png" alt="icon" class="active:scale-95" />
     </button>
     <button
-      v-if="
-        props.client.category == 'execution' &&
-        props.client.service !== 'ExternalExecutionService'
-      "
+      v-if="props.client.category == 'execution' && props.client.service !== 'ExternalExecutionService'"
       class="row-start-3 col-span-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md flex justify-center items-center"
       :class="props.client.service == 'GethService' ? 'col-start-2' : 'col-start-1'"
       @click="copyJwt"
       @mouseenter="footerStore.cursorLocation = `${copyToken}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img
-        src="/img/icon/node-page-icons/service-command-copy-jwt.png"
-        alt="icon"
-        class="w-4 h-4 active:scale-95"
-      />
+      <img src="/img/icon/node-page-icons/service-command-copy-jwt.png" alt="icon" class="w-4 h-4 active:scale-95" />
     </button>
 
     <slot></slot>
diff --git a/launcher/src/components/UI/node-page/components/node/clients/ConsensusClients.vue b/launcher/src/components/UI/node-page/components/node/clients/ConsensusClients.vue
index e8653803c1..11f541fa18 100755
--- a/launcher/src/components/UI/node-page/components/node/clients/ConsensusClients.vue
+++ b/launcher/src/components/UI/node-page/components/node/clients/ConsensusClients.vue
@@ -24,12 +24,7 @@
         @external-modify="externalModify"
       />
       <TransitionGroup name="fadeModal">
-        <ResyncModal
-          v-if="item.isResyncModalOpen"
-          icon-size="w-14"
-          :item="item"
-          @close-window="closeResyncModal(item)"
-        />
+        <ResyncModal v-if="item.isResyncModalOpen" icon-size="w-14" :item="item" @close-window="closeResyncModal(item)" />
       </TransitionGroup>
     </div>
   </div>
@@ -66,9 +61,7 @@ const getConsensusServices = computed(() => {
   }
 
   const services = serviceStore.installedServices
-    .filter(
-      (s) => s.category === "consensus" && s.setupId === setupStore.selectedSetup?.setupId
-    )
+    .filter((s) => s.category === "consensus" && s.setupId === setupStore.selectedSetup?.setupId)
     .sort((a, b) => {
       const fa = a.name.toLowerCase();
       const fb = b.name.toLowerCase();
diff --git a/launcher/src/components/UI/node-page/components/node/clients/ExecutionClients.vue b/launcher/src/components/UI/node-page/components/node/clients/ExecutionClients.vue
index 492ada50bd..88d9fbedb9 100755
--- a/launcher/src/components/UI/node-page/components/node/clients/ExecutionClients.vue
+++ b/launcher/src/components/UI/node-page/components/node/clients/ExecutionClients.vue
@@ -26,17 +26,8 @@
         @external-modify="externalModify"
       />
       <TransitionGroup name="fadeModal">
-        <ResyncModal
-          v-if="item.isResyncModalOpen"
-          icon-size="w-14"
-          :item="item"
-          @close-window="closeResyncModal(item)"
-        />
-        <PrunningModal
-          v-if="showPruningModal"
-          :item="item"
-          @cancel-warning="closePruning"
-        />
+        <ResyncModal v-if="item.isResyncModalOpen" icon-size="w-14" :item="item" @close-window="closeResyncModal(item)" />
+        <PrunningModal v-if="showPruningModal" :item="item" @cancel-warning="closePruning" />
       </TransitionGroup>
     </div>
   </div>
@@ -78,9 +69,7 @@ const getExecutionServices = computed(() => {
     return [];
   }
   const services = serviceStore.installedServices
-    .filter(
-      (s) => s.category === "execution" && s.setupId === setupStore.selectedSetup?.setupId
-    )
+    .filter((s) => s.category === "execution" && s.setupId === setupStore.selectedSetup?.setupId)
     .sort((a, b) => {
       const fa = a.name.toLowerCase();
       const fb = b.name.toLowerCase();
diff --git a/launcher/src/components/UI/node-page/sections/NodeSection.vue b/launcher/src/components/UI/node-page/sections/NodeSection.vue
index e27d993236..5f9a2b5416 100755
--- a/launcher/src/components/UI/node-page/sections/NodeSection.vue
+++ b/launcher/src/components/UI/node-page/sections/NodeSection.vue
@@ -1,12 +1,7 @@
 <template>
   <div class="w-full h-full flex flex-col justify-between items-center">
     <NodeHeader />
-    <NodeBody
-      @open-expert="openExpert"
-      @open-log="openLog"
-      @export-setup="exportSetup"
-      @external-modify="externalModify"
-    />
+    <NodeBody @open-expert="openExpert" @open-log="openLog" @export-setup="exportSetup" @external-modify="externalModify" />
   </div>
 </template>
 
diff --git a/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue b/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
index eae5357035..3318736e65 100644
--- a/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
+++ b/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
@@ -1,41 +1,23 @@
 import { ref, computed, onMounted, watch } from 'vue';
 <template>
-  <div
-    class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto"
-  >
+  <div class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto">
     <div
       class="w-full h-full col-start-3 col-end-11 row-start-1 row-span-full bg-[#1E2429] rounded-md grid grid-cols-12 grid-rows-7 p-4 gap-1"
     >
-      <div
-        class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-2 gap-1"
-      >
+      <div class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-2 gap-1">
         <div class="w-full h-10 col-start-1 col-span-1 flex justify-center items-center">
-          <div
-            class="w-full h-8 border border-gray-600 rounded-md p-1 flex justify-center items-center"
-          >
-            <span class="text-center text-gray-400 text-md font-normal">{{
-              $t("oneClick.installedService")
-            }}</span>
+          <div class="w-full h-8 border border-gray-600 rounded-md p-1 flex justify-center items-center">
+            <span class="text-center text-gray-400 text-md font-normal">{{ $t("oneClick.installedService") }}</span>
           </div>
         </div>
-        <div
-          class="w-full h-10 col-start-2 col-span-1 flex justify-center items-center relative"
-        >
-          <div
-            class="w-full h-8 border border-gray-600 rounded-md p-1 flex flex-col justify-between items-center"
-          >
-            <span class="text-center text-gray-400 text-md font-normal">{{
-              $t("oneClick.addOption")
-            }}</span>
+        <div class="w-full h-10 col-start-2 col-span-1 flex justify-center items-center relative">
+          <div class="w-full h-8 border border-gray-600 rounded-md p-1 flex flex-col justify-between items-center">
+            <span class="text-center text-gray-400 text-md font-normal">{{ $t("oneClick.addOption") }}</span>
           </div>
         </div>
       </div>
 
-      <PluginRows
-        :filtered-plugin="filteredPluginsOnCategory"
-        @change-handler="pluginChangeHandler"
-        @plugin-exchange="pluginExChange"
-      />
+      <PluginRows :filtered-plugin="filteredPluginsOnCategory" @change-handler="pluginChangeHandler" @plugin-exchange="pluginExChange" />
 
       <InstallationPath />
     </div>
@@ -71,14 +53,12 @@ watch(
 //Lifecycle Hooks
 
 onMounted(() => {
-  clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.map(
-    (item) => {
-      return {
-        ...item,
-        openReplaceModal: false,
-      };
-    }
-  );
+  clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.map((item) => {
+    return {
+      ...item,
+      openReplaceModal: false,
+    };
+  });
 });
 onMounted(() => {
   getInstallPath();
@@ -92,23 +72,12 @@ const filterMonitoringServices = () => {
   if (clickStore.installMonitoring) {
     clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.concat(
       serviceStore.allServices.filter((s) =>
-        [
-          "GrafanaService",
-          "PrometheusNodeExporterService",
-          "PrometheusService",
-          "MetricsExporterService",
-        ].includes(s.service)
+        ["GrafanaService", "PrometheusNodeExporterService", "PrometheusService", "MetricsExporterService"].includes(s.service)
       )
     );
   } else {
     clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.filter(
-      (s) =>
-        ![
-          "GrafanaService",
-          "PrometheusNodeExporterService",
-          "PrometheusService",
-          "MetricsExporterService",
-        ].includes(s.service)
+      (s) => !["GrafanaService", "PrometheusNodeExporterService", "PrometheusService", "MetricsExporterService"].includes(s.service)
     );
   }
 };
@@ -120,9 +89,7 @@ const selectedPluginsValidation = () => {
 };
 const pluginChangeHandler = (plugin, item, idx) => {
   plugin.openReplaceModal = false;
-  const oldPluginIndex = clickStore.selectedPreset.includedPlugins.findIndex(
-    (e) => e.id === plugin?.id
-  );
+  const oldPluginIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.id === plugin?.id);
 
   if (oldPluginIndex !== -1) {
     clickStore.selectedPreset.includedPlugins.splice(oldPluginIndex, 1);
@@ -130,25 +97,15 @@ const pluginChangeHandler = (plugin, item, idx) => {
 
   clickStore.selectedPreset.includedPlugins.splice(idx, 0, item);
 
-  if (
-    ["staking", "mev boost", "stereum on arm", "archive", "lidocsm", "vc only"].includes(
-      clickStore.selectedPreset.name
-    )
-  ) {
+  if (["staking", "mev boost", "stereum on arm", "archive", "lidocsm", "vc only"].includes(clickStore.selectedPreset.name)) {
     if (item.category === "consensus") {
-      let valIndex = clickStore.selectedPreset.includedPlugins.findIndex(
-        (e) => e.category === "validator"
-      );
+      let valIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.category === "validator");
       clickStore.selectedPreset.includedPlugins[valIndex] = serviceStore.allServices.find(
         (e) => e.service === item.name + "ValidatorService"
       );
     } else if (item.category === "validator") {
-      let conIndex = clickStore.selectedPreset.includedPlugins.findIndex(
-        (e) => e.category === "consensus"
-      );
-      clickStore.selectedPreset.includedPlugins[conIndex] = serviceStore.allServices.find(
-        (e) => e.service === item.name + "BeaconService"
-      );
+      let conIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.category === "consensus");
+      clickStore.selectedPreset.includedPlugins[conIndex] = serviceStore.allServices.find((e) => e.service === item.name + "BeaconService");
     }
   }
   sortPlugins();
@@ -156,18 +113,10 @@ const pluginChangeHandler = (plugin, item, idx) => {
 
 const sortPlugins = () => {
   if (clickStore.selectedPreset.includedPlugins) {
-    const ec = clickStore.selectedPreset.includedPlugins.filter(
-      (p) => p.category === "execution"
-    );
-    const cc = clickStore.selectedPreset.includedPlugins.filter(
-      (p) => p.category === "consensus"
-    );
-    const vc = clickStore.selectedPreset.includedPlugins.filter(
-      (p) => p.category === "validator"
-    );
-    const services = clickStore.selectedPreset.includedPlugins.filter(
-      (p) => p.category === "service"
-    );
+    const ec = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "execution");
+    const cc = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "consensus");
+    const vc = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "validator");
+    const services = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "service");
     clickStore.selectedPreset.includedPlugins = new Array().concat(ec, cc, vc, services);
   }
 };
@@ -190,13 +139,9 @@ const checkPluginCategory = (element) => {
     case "lidocsm":
     case "staking":
     case "vc only":
-      filter = (item) =>
-        item.category === element.category &&
-        !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
+      filter = (item) => item.category === element.category && !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
       if (manageStore.currentNetwork.network == "gnosis") {
-        filter = (item) =>
-          item.category === element.category &&
-          /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
+        filter = (item) => item.category === element.category && /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
       }
       break;
     case "ssv.network":
@@ -216,10 +161,7 @@ const checkPluginCategory = (element) => {
     case "lidoobol":
       filter = (item) => {
         if (element.category === "validator" && element.service !== "CharonService") {
-          return (
-            /Teku|Lodestar|Lighthouse|Nimbus/.test(item.service) &&
-            item.category === element.category
-          );
+          return /Teku|Lodestar|Lighthouse|Nimbus/.test(item.service) && item.category === element.category;
         } else if (element.category === "validator") {
           return item.service === "CharonService";
         } else {
@@ -231,28 +173,18 @@ const checkPluginCategory = (element) => {
       //filter = (item) => item.category === element.category
       break;
     case "mev boost":
-      filter = (item) =>
-        item.category === element.category &&
-        !/(SSVNetwork|Reth|Web3Signer|Charon)/.test(item.service);
+      filter = (item) => item.category === element.category && !/(SSVNetwork|Reth|Web3Signer|Charon)/.test(item.service);
       break;
     case "stereum on arm":
-      filter = (item) =>
-        item.category === element.category &&
-        !/(Prysm|Reth|SSVNetwork|Web3Signer|Charon)/.test(item.service);
+      filter = (item) => item.category === element.category && !/(Prysm|Reth|SSVNetwork|Web3Signer|Charon)/.test(item.service);
       if (manageStore.currentNetwork.network == "gnosis") {
-        filter = (item) =>
-          item.category === element.category &&
-          /(Lighthouse|Teku|Nethermind)/.test(item.service);
+        filter = (item) => item.category === element.category && /(Lighthouse|Teku|Nethermind)/.test(item.service);
       }
       break;
     case "archive":
-      filter = (item) =>
-        item.category === element.category &&
-        !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
+      filter = (item) => item.category === element.category && !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
       if (manageStore.currentNetwork.network == "gnosis") {
-        filter = (item) =>
-          item.category === element.category &&
-          /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
+        filter = (item) => item.category === element.category && /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
       }
       break;
     default:
@@ -264,9 +196,7 @@ const checkPluginCategory = (element) => {
 const getInstallPath = async () => {
   let largestVolumePath = await ControlService.getLargestVolumePath();
   if (largestVolumePath === "/") largestVolumePath = largestVolumePath + "opt";
-  const stereumInstallationPath = [largestVolumePath, "/stereum"]
-    .join("/")
-    .replace(/\/{2,}/, "/");
+  const stereumInstallationPath = [largestVolumePath, "/stereum"].join("/").replace(/\/{2,}/, "/");
   clickStore.installationPath = stereumInstallationPath;
 };
 </script>
diff --git a/launcher/src/components/UI/one-click/components/vconly/OnlyBody.vue b/launcher/src/components/UI/one-click/components/vconly/OnlyBody.vue
index 3176acc490..a9d6e1ddbf 100644
--- a/launcher/src/components/UI/one-click/components/vconly/OnlyBody.vue
+++ b/launcher/src/components/UI/one-click/components/vconly/OnlyBody.vue
@@ -1,55 +1,28 @@
 import { onMounted, ref } from 'vue';
 <template>
-  <div
-    class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto"
-  >
+  <div class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto">
     <div
       class="w-full h-full col-start-3 col-end-11 row-start-1 row-span-full bg-[#1c1d1d] grid grid-cols-12 grid-rows-7 p-4 border border-gray-600 rounded-md"
     >
       <div class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full">
-        <div
-          class="w-full h-full flex flex-col justify-start items-center mx-auto px-4 py-2 space-y-2 mt-6 relative"
-        >
+        <div class="w-full h-full flex flex-col justify-start items-center mx-auto px-4 py-2 space-y-2 mt-6 relative">
           <div class="w-full flex justify-center items-center">
             <div class="w-full grid grid-cols-12 items-center text-md">
-              <img
-                class="col-start-1 w-8"
-                src="/img/icon/edit-node-icons/service-category.png"
-                alt="Path Icon"
-              />
-              <span class="col-start-2 col-span-3 text-gray-400 text-md text-left"
-                >EXTERNAL SOURCE</span
-              >
+              <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-category.png" alt="Path Icon" />
+              <span class="col-start-2 col-span-3 text-gray-400 text-md text-left">EXTERNAL SOURCE</span>
 
               <div
                 class="col-start-6 col-span-full w-full relative bg-[#141516] border border-gray-500 rounded-md grid grid-cols-12 items-center"
                 @click="dropdown"
               >
-                <div
-                  class="col-start-1 col-span-full flex justify-center items-center overflow-hidden"
-                >
-                  <div
-                    class="w-3/4 px-2 py-1 text-sm text-gray-400 capitalize flex justify-start items-center space-x-4"
-                  >
-                    <img
-                      v-if="selectedSource.icon ? selectedSource.icon : null"
-                      :src="selectedSource.icon"
-                      class="w-5"
-                    />
-                    <span>{{
-                      selectedSource.name ? selectedSource.name : "Select Source"
-                    }}</span>
+                <div class="col-start-1 col-span-full flex justify-center items-center overflow-hidden">
+                  <div class="w-3/4 px-2 py-1 text-sm text-gray-400 capitalize flex justify-start items-center space-x-4">
+                    <img v-if="selectedSource.icon ? selectedSource.icon : null" :src="selectedSource.icon" class="w-5" />
+                    <span>{{ selectedSource.name ? selectedSource.name : "Select Source" }}</span>
                   </div>
 
-                  <button
-                    class="w-1/4 h-full p-1 text-gray-500 hover:text-gray-200 flex justify-end items-center"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4"
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                    >
+                  <button class="w-1/4 h-full p-1 text-gray-500 hover:text-gray-200 flex justify-end items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                       <path
                         fill-rule="evenodd"
                         d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
@@ -79,16 +52,9 @@ import { onMounted, ref } from 'vue';
               </div>
             </div>
           </div>
-          <div
-            v-if="selectedSource.name === 'custom'"
-            class="w-full flex justify-center items-center"
-          >
+          <div v-if="selectedSource.name === 'custom'" class="w-full flex justify-center items-center">
             <div class="w-full grid grid-cols-12 items-center text-md">
-              <img
-                class="col-start-1 w-8"
-                src="/img/icon/edit-node-icons/service-external-source.png"
-                alt="Path Icon"
-              />
+              <img class="col-start-1 w-8" src="/img/icon/edit-node-icons/service-external-source.png" alt="Path Icon" />
               <span class="col-start-2 col-span-3 text-gray-400 text-left">ADDRESS</span>
               <input
                 v-model="addressLink"
diff --git a/launcher/src/components/UI/one-click/components/vconly/OnlyFooter.vue b/launcher/src/components/UI/one-click/components/vconly/OnlyFooter.vue
index 75d9ce2367..7fa08793ed 100644
--- a/launcher/src/components/UI/one-click/components/vconly/OnlyFooter.vue
+++ b/launcher/src/components/UI/one-click/components/vconly/OnlyFooter.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="w-full h-full col-start-1 col-span-full row-start-11 row-span-2 grid grid-cols-12 gird-rows-2 px-4"
-    @mousedown.prevent
-  >
+  <div class="w-full h-full col-start-1 col-span-full row-start-11 row-span-2 grid grid-cols-12 gird-rows-2 px-4" @mousedown.prevent>
     <router-link
       to="/oneClick/preset"
       class="col-start-1 col-span-2 row-start-1 row-span-2 justify-self-end w-[120px] h-12 bg-[#264744] hover:bg-[#447a75] rounded-full py-2 px-4 flex justify-center items-center hover:scale-110 hover:shadow-lg hover:shadow-[#1e2a29] transition-all duration-300 ease-in-out active:scale-100 active:shadow-none"
@@ -13,9 +10,7 @@
       :to="nextRoute"
       class="col-start-11 col-span-1 row-start-1 row-span-2 w-[120px] h-12 bg-[#264744] hover:bg-[#447a75] rounded-full py-2 px-4 flex justify-center items-center hover:scale-110 hover:shadow-lg hover:shadow-[#1e2a29] transition-all duration-300 ease-in-out active:scale-100 active:shadow-none cursor-pointer"
     >
-      <span class="text-gray-200 text-xl font-semibold text-center uppercase">{{
-        $t("customFooter.next")
-      }}</span>
+      <span class="text-gray-200 text-xl font-semibold text-center uppercase">{{ $t("customFooter.next") }}</span>
     </router-link>
   </div>
 </template>
diff --git a/launcher/src/components/UI/one-click/components/vconly/OnlyHeader.vue b/launcher/src/components/UI/one-click/components/vconly/OnlyHeader.vue
index 8da94d7d73..2281609126 100644
--- a/launcher/src/components/UI/one-click/components/vconly/OnlyHeader.vue
+++ b/launcher/src/components/UI/one-click/components/vconly/OnlyHeader.vue
@@ -1,29 +1,18 @@
 <template>
-  <div
-    class="col-start-5 col-end-21 row-start-1 row-span-2 grid grid-cols-6 grid-rows-2 p-1 items-end gap-2"
-  >
-    <div
-      class="h-14 col-start-1 col-end-4 row-start-1 row-span-2 flex justify-center bg-[#1E2429] rounded-md p-1"
-    >
+  <div class="col-start-5 col-end-21 row-start-1 row-span-2 grid grid-cols-6 grid-rows-2 p-1 items-end gap-2">
+    <div class="h-14 col-start-1 col-end-4 row-start-1 row-span-2 flex justify-center bg-[#1E2429] rounded-md p-1">
       <img
         class="w-[50px] h-[50px] col-start-1 col-span-2 row-start-1 row-span-2 z-10 self-center"
         :src="selectedPreset?.icon"
         :alt="`${network?.name} Icon`"
       />
       <div class="w-full h-full flex justify-center items-center ml-4">
-        <span class="w-full text-[24px] font-bold text-gray-400 uppercase tracking-wider">
-          {{ selectedPreset?.name }}</span
-        >
+        <span class="w-full text-[24px] font-bold text-gray-400 uppercase tracking-wider"> {{ selectedPreset?.name }}</span>
       </div>
     </div>
-    <div
-      v-if="network.name"
-      class="h-14 col-start-4 col-span-full row-start-1 row-span-2 flex justify-end bg-[#1E2429] rounded-md p-1"
-    >
+    <div v-if="network.name" class="h-14 col-start-4 col-span-full row-start-1 row-span-2 flex justify-end bg-[#1E2429] rounded-md p-1">
       <div class="w-fit h-full flex justify-end items-center mr-2">
-        <span class="w-full text-[22px] font-bold text-gray-400 uppercase tracking-wider">
-          {{ network?.name }}</span
-        >
+        <span class="w-full text-[22px] font-bold text-gray-400 uppercase tracking-wider"> {{ network?.name }}</span>
       </div>
       <img
         class="w-[50px] h-[50px] col-start-1 col-span-2 row-start-1 row-span-2 z-10 self-center"
diff --git a/launcher/src/components/UI/one-click/sections/OnlySource.vue b/launcher/src/components/UI/one-click/sections/OnlySource.vue
index 1ab154353a..42fd42c3b6 100644
--- a/launcher/src/components/UI/one-click/sections/OnlySource.vue
+++ b/launcher/src/components/UI/one-click/sections/OnlySource.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="col-start-1 col-span-full row-start-1 row-span-full grid grid-cols-24 grid-rows-12"
-  >
+  <div class="col-start-1 col-span-full row-start-1 row-span-full grid grid-cols-24 grid-rows-12">
     <OnlyHeader />
     <OnlyBody />
     <OnlyFooter />