diff --git a/launcher/package.json b/launcher/package.json
index 854ceef57..fad9f6d69 100755
--- a/launcher/package.json
+++ b/launcher/package.json
@@ -51,10 +51,12 @@
     "lodash": "^4.17.21",
     "ping": "^0.4.4",
     "pinia": "^2.0.33",
+    "preline": "^2.7.0",
     "qrcode": "^1.5.1",
     "semver": "^7.6.0",
     "ssh2": "^1.1.0",
     "swiper": "^11.0.6",
+    "tailwindcss-animated": "^1.1.2",
     "vue": "^3.2.33",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.0.15",
@@ -62,11 +64,11 @@
     "vue3-carousel": "^0.3.1",
     "vue3-circle-progress": "^1.0.7",
     "vuedraggable": "^2.24.3",
+    "web3": "^4.15.0",
     "xterm": "^5.3.0",
     "xterm-addon-attach": "^0.9.0",
     "xterm-addon-fit": "^0.8.0",
-    "yaml": "^2.2.1",
-    "web3": "^4.15.0"
+    "yaml": "^2.2.1"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.2",
diff --git a/launcher/public/img/icon/staking-page-icons/balance.png b/launcher/public/img/icon/staking-page-icons/balance.png
new file mode 100755
index 000000000..cfce26436
Binary files /dev/null and b/launcher/public/img/icon/staking-page-icons/balance.png differ
diff --git a/launcher/public/output.css b/launcher/public/output.css
index 5fb3c2c09..d32601d38 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -715,6 +715,10 @@ video {
   visibility: hidden;
 }
 
+.collapse{
+  visibility: collapse;
+}
+
 .static{
   position: static;
 }
@@ -835,6 +839,10 @@ video {
   bottom: 8px;
 }
 
+.bottom-full{
+  bottom: 100%;
+}
+
 .end-0{
   inset-inline-end: 0px;
 }
@@ -995,10 +1003,6 @@ video {
   top: 33%;
 }
 
-.top-\[42\%\]{
-  top: 42%;
-}
-
 .top-\[50\%\]{
   top: 50%;
 }
@@ -1011,6 +1015,10 @@ video {
   top: 7rem;
 }
 
+.top-full{
+  top: 100%;
+}
+
 .z-0{
   z-index: 0;
 }
@@ -1437,11 +1445,21 @@ video {
   margin-right: 0.5rem;
 }
 
+.mx-4{
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
 }
 
+.my-2{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .my-4{
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1633,6 +1651,31 @@ video {
   display: none;
 }
 
+.size-3\.5{
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.size-4{
+  width: 1rem;
+  height: 1rem;
+}
+
+.size-5{
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.size-6{
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.size-8{
+  width: 2rem;
+  height: 2rem;
+}
+
 .h-1\/2{
   height: 50%;
 }
@@ -1935,24 +1978,20 @@ video {
   max-height: 9rem;
 }
 
-.max-h-6{
-  max-height: 1.5rem;
-}
-
-.max-h-60{
-  max-height: 15rem;
+.max-h-4{
+  max-height: 1rem;
 }
 
-.max-h-7{
-  max-height: 1.75rem;
+.max-h-5{
+  max-height: 1.25rem;
 }
 
-.max-h-8{
-  max-height: 2rem;
+.max-h-6{
+  max-height: 1.5rem;
 }
 
-.max-h-9{
-  max-height: 2.25rem;
+.max-h-60{
+  max-height: 15rem;
 }
 
 .max-h-\[100px\]{
@@ -2439,6 +2478,10 @@ video {
   width: 90%;
 }
 
+.w-\[calc\(100\%-2rem\)\]{
+  width: calc(100% - 2rem);
+}
+
 .w-fit{
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -2517,6 +2560,11 @@ video {
       flex-shrink: 0;
 }
 
+.shrink-0{
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+
 .origin-top-right{
   -webkit-transform-origin: top right;
           transform-origin: top right;
@@ -2546,12 +2594,6 @@ video {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-rotate-90{
-  --tw-rotate: -90deg;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .rotate-0{
   --tw-rotate: 0deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2647,8 +2689,8 @@ video {
 }
 
 .animate-pulse{
-  -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-          animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  -webkit-animation: pulse var(--tw-animate-duration, 2s) var(--tw-animate-easing, cubic-bezier(0.4, 0, 0.6, 1)) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, infinite) var(--tw-animate-fill, none);
+          animation: pulse var(--tw-animate-duration, 2s) var(--tw-animate-easing, cubic-bezier(0.4, 0, 0.6, 1)) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, infinite) var(--tw-animate-fill, none);
 }
 
 @-webkit-keyframes spin{
@@ -2666,8 +2708,8 @@ video {
 }
 
 .animate-spin{
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
+  -webkit-animation: spin var(--tw-animate-duration, 1s) var(--tw-animate-easing, linear) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, infinite) var(--tw-animate-fill, none);
+          animation: spin var(--tw-animate-duration, 1s) var(--tw-animate-easing, linear) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, infinite) var(--tw-animate-fill, none);
 }
 
 .cursor-default{
@@ -2850,6 +2892,11 @@ video {
       flex-wrap: wrap;
 }
 
+.flex-nowrap{
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+}
+
 .place-content-center{
   place-content: center;
 }
@@ -2941,6 +2988,12 @@ video {
           column-gap: 0.5rem;
 }
 
+.gap-x-3{
+  -webkit-column-gap: 0.75rem;
+     -moz-column-gap: 0.75rem;
+          column-gap: 0.75rem;
+}
+
 .gap-x-8{
   -webkit-column-gap: 2rem;
      -moz-column-gap: 2rem;
@@ -2963,6 +3016,10 @@ video {
   row-gap: 1.25rem;
 }
 
+.gap-y-\[1px\]{
+  row-gap: 1px;
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -3035,6 +3092,12 @@ video {
   margin-bottom: calc(1px * var(--tw-space-y-reverse));
 }
 
+.space-y-\[2px\] > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2px * var(--tw-space-y-reverse));
+}
+
 .divide-x > :not([hidden]) ~ :not([hidden]){
   --tw-divide-x-reverse: 0;
   border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -3277,11 +3340,6 @@ video {
   border-bottom-right-radius: 0.375rem;
 }
 
-.rounded-r-sm{
-  border-top-right-radius: 0.125rem;
-  border-bottom-right-radius: 0.125rem;
-}
-
 .rounded-t-\[0\.28rem\]{
   border-top-left-radius: 0.28rem;
   border-top-right-radius: 0.28rem;
@@ -3334,6 +3392,10 @@ video {
   border-width: 4px;
 }
 
+.border-\[3px\]{
+  border-width: 3px;
+}
+
 .border-y{
   border-top-width: 1px;
   border-bottom-width: 1px;
@@ -3351,6 +3413,10 @@ video {
   border-left-width: 1px;
 }
 
+.border-l-0{
+  border-left-width: 0px;
+}
+
 .border-r{
   border-right-width: 1px;
 }
@@ -3383,6 +3449,10 @@ video {
   border-top-width: 4px;
 }
 
+.border-solid{
+  border-style: solid;
+}
+
 .border-dashed{
   border-style: dashed;
 }
@@ -3401,6 +3471,11 @@ video {
   border-color: rgb(28 54 52 / var(--tw-border-opacity, 1));
 }
 
+.border-\[\#23272a\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(35 39 42 / var(--tw-border-opacity, 1));
+}
+
 .border-\[\#2c3136\]{
   --tw-border-opacity: 1;
   border-color: rgb(44 49 54 / var(--tw-border-opacity, 1));
@@ -3426,11 +3501,31 @@ video {
   border-color: rgb(75 133 133 / var(--tw-border-opacity, 1));
 }
 
+.border-\[\#503C3C\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(80 60 60 / var(--tw-border-opacity, 1));
+}
+
 .border-\[\#6c7e78\]{
   --tw-border-opacity: 1;
   border-color: rgb(108 126 120 / var(--tw-border-opacity, 1));
 }
 
+.border-\[\#D1BB9E\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(209 187 158 / var(--tw-border-opacity, 1));
+}
+
+.border-\[\#dc9105\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(220 145 5 / var(--tw-border-opacity, 1));
+}
+
+.border-\[\#fb923c\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
+}
+
 .border-blue-100{
   --tw-border-opacity: 1;
   border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
@@ -3451,6 +3546,15 @@ video {
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
 }
 
+.border-blue-900{
+  --tw-border-opacity: 1;
+  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
+}
+
+.border-current{
+  border-color: currentColor;
+}
+
 .border-gray-100{
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
@@ -3501,11 +3605,26 @@ video {
   border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
 }
 
+.border-lime-300{
+  --tw-border-opacity: 1;
+  border-color: rgb(190 242 100 / var(--tw-border-opacity, 1));
+}
+
+.border-lime-900{
+  --tw-border-opacity: 1;
+  border-color: rgb(54 83 20 / var(--tw-border-opacity, 1));
+}
+
 .border-orange-500{
   --tw-border-opacity: 1;
   border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
 }
 
+.border-red-300{
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
+}
+
 .border-red-400{
   --tw-border-opacity: 1;
   border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
@@ -3565,11 +3684,21 @@ video {
   border-color: transparent;
 }
 
+.border-violet-900{
+  --tw-border-opacity: 1;
+  border-color: rgb(76 29 149 / var(--tw-border-opacity, 1));
+}
+
 .border-white{
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
 
+.border-zinc-700{
+  --tw-border-opacity: 1;
+  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
+}
+
 .border-b-transparent{
   border-bottom-color: transparent;
 }
@@ -3623,6 +3752,10 @@ video {
   border-top-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
 }
 
+.border-t-transparent{
+  border-top-color: transparent;
+}
+
 .border-t-white{
   --tw-border-opacity: 1;
   border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
@@ -3838,6 +3971,11 @@ video {
   background-color: rgb(34 65 65 / var(--tw-bg-opacity, 1));
 }
 
+.bg-\[\#232426\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(35 36 38 / var(--tw-bg-opacity, 1));
+}
+
 .bg-\[\#232428\]{
   --tw-bg-opacity: 1;
   background-color: rgb(35 36 40 / var(--tw-bg-opacity, 1));
@@ -3848,6 +3986,11 @@ video {
   background-color: rgb(35 37 40 / var(--tw-bg-opacity, 1));
 }
 
+.bg-\[\#23272a\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(35 39 42 / var(--tw-bg-opacity, 1));
+}
+
 .bg-\[\#242529\]{
   --tw-bg-opacity: 1;
   background-color: rgb(36 37 41 / var(--tw-bg-opacity, 1));
@@ -3888,11 +4031,6 @@ video {
   background-color: rgb(41 46 50 / var(--tw-bg-opacity, 1));
 }
 
-.bg-\[\#2a2c30\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(42 44 48 / var(--tw-bg-opacity, 1));
-}
-
 .bg-\[\#2a2e30\]{
   --tw-bg-opacity: 1;
   background-color: rgb(42 46 48 / var(--tw-bg-opacity, 1));
@@ -3933,11 +4071,6 @@ video {
   background-color: rgb(48 50 50 / var(--tw-bg-opacity, 1));
 }
 
-.bg-\[\#313539\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(49 53 57 / var(--tw-bg-opacity, 1));
-}
-
 .bg-\[\#32363A\]{
   --tw-bg-opacity: 1;
   background-color: rgb(50 54 58 / var(--tw-bg-opacity, 1));
@@ -3978,11 +4111,6 @@ video {
   background-color: rgb(52 52 52 / var(--tw-bg-opacity, 1));
 }
 
-.bg-\[\#363934\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(54 57 52 / var(--tw-bg-opacity, 1));
-}
-
 .bg-\[\#387272\]{
   --tw-bg-opacity: 1;
   background-color: rgb(56 114 114 / var(--tw-bg-opacity, 1));
@@ -4088,6 +4216,11 @@ video {
   background-color: rgb(202 206 209 / var(--tw-bg-opacity, 1));
 }
 
+.bg-\[\#dc9105\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 145 5 / var(--tw-bg-opacity, 1));
+}
+
 .bg-\[\#e8ebeb\]{
   --tw-bg-opacity: 1;
   background-color: rgb(232 235 235 / var(--tw-bg-opacity, 1));
@@ -4103,11 +4236,6 @@ video {
   background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
 }
 
-.bg-amber-400{
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
-}
-
 .bg-black{
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -4128,6 +4256,11 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
 }
 
+.bg-blue-600{
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
+
 .bg-blue-900{
   --tw-bg-opacity: 1;
   background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
@@ -4327,6 +4460,10 @@ video {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
 }
 
+.bg-opacity-50{
+  --tw-bg-opacity: 0.5;
+}
+
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }
@@ -4336,12 +4473,23 @@ video {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
 
+.bg-gradient-to-r{
+  background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
 .from-\[\#264744\]{
   --tw-gradient-from: #264744 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(38 71 68 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-gray-200{
+  --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-10\%{
   --tw-gradient-from-position: 10%;
 }
@@ -4351,10 +4499,19 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), #325d5a var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
+.via-gray-300{
+  --tw-gradient-to: rgb(209 213 219 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #d1d5db var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
 .to-\[\#264744\]{
   --tw-gradient-to: #264744 var(--tw-gradient-to-position);
 }
 
+.to-gray-200{
+  --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
+}
+
 .to-95\%{
   --tw-gradient-to-position: 95%;
 }
@@ -4379,6 +4536,10 @@ video {
   background-repeat: no-repeat;
 }
 
+.fill-black{
+  fill: #000;
+}
+
 .fill-current{
   fill: currentColor;
 }
@@ -4486,6 +4647,11 @@ video {
   padding-right: 2px;
 }
 
+.py-0{
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .py-1{
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -4550,6 +4716,10 @@ video {
   padding-left: 1rem;
 }
 
+.pl-6{
+  padding-left: 1.5rem;
+}
+
 .pr-0{
   padding-right: 0px;
 }
@@ -4602,6 +4772,10 @@ video {
   padding-top: 2rem;
 }
 
+.pt-\[2px\]{
+  padding-top: 2px;
+}
+
 .text-left{
   text-align: left;
 }
@@ -4614,10 +4788,18 @@ video {
   text-align: right;
 }
 
+.text-end{
+  text-align: end;
+}
+
 .indent-0{
   text-indent: 0px;
 }
 
+.align-bottom{
+  vertical-align: bottom;
+}
+
 .font-mono{
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -4652,10 +4834,6 @@ video {
   font-size: 10px;
 }
 
-.text-\[11px\]{
-  font-size: 11px;
-}
-
 .text-\[12px\]{
   font-size: 12px;
 }
@@ -4888,6 +5066,16 @@ video {
   color: rgb(96 165 250 / var(--tw-text-opacity, 1));
 }
 
+.text-blue-500{
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+}
+
+.text-blue-600{
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+}
+
 .text-cyan-400{
   --tw-text-opacity: 1;
   color: rgb(34 211 238 / var(--tw-text-opacity, 1));
@@ -5335,6 +5523,12 @@ video {
   --tw-ring-opacity: 0.05;
 }
 
+.blur{
+  --tw-blur: blur(8px);
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .invert{
   --tw-invert: invert(100%);
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -5867,11 +6061,6 @@ html body {
   background-color: rgb(34 65 65 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-\[\#23272a\]:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(35 39 42 / var(--tw-bg-opacity, 1));
-}
-
 .hover\:bg-\[\#234545\]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(35 69 69 / var(--tw-bg-opacity, 1));
@@ -5977,6 +6166,11 @@ html body {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-blue-700:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-cyan-600:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
@@ -6101,6 +6295,11 @@ html body {
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-gray-800:hover{
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+}
+
 .hover\:text-teal-500:hover{
   --tw-text-opacity: 1;
   color: rgb(20 184 166 / var(--tw-text-opacity, 1));
@@ -6219,6 +6418,11 @@ html body {
   border-color: rgb(20 184 166 / var(--tw-border-opacity, 1));
 }
 
+.focus\:bg-gray-100:focus{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
 .focus\:outline-none:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -6236,6 +6440,11 @@ html body {
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
 }
 
+.focus\:ring-blue-500:focus{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
+}
+
 .focus\:ring-opacity-40:focus{
   --tw-ring-opacity: 0.4;
 }
@@ -6289,6 +6498,32 @@ html body {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.disabled\:pointer-events-none:disabled{
+  pointer-events: none;
+}
+
+.disabled\:opacity-50:disabled{
+  opacity: 0.5;
+}
+
+.selected .hs-combo-box-selected\:block{
+  display: block;
+}
+
+.selected.hs-combo-box-selected\:block{
+  display: block;
+}
+
+.complete .hs-file-upload-complete\:bg-green-600{
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
+}
+
+.complete.hs-file-upload-complete\:bg-green-600{
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
+}
+
 @media (min-width: 640px){
   .sm\:text-sm{
     font-size: 0.875rem;
@@ -6311,6 +6546,49 @@ html body {
 }
 
 @media (prefers-color-scheme: dark){
+  .dark\:border-neutral-600{
+    --tw-border-opacity: 1;
+    border-color: rgb(82 82 82 / var(--tw-border-opacity, 1));
+  }
+
+  .dark\:border-neutral-700{
+    --tw-border-opacity: 1;
+    border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
+  }
+
+  .dark\:bg-blue-500{
+    --tw-bg-opacity: 1;
+    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:bg-neutral-700{
+    --tw-bg-opacity: 1;
+    background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:bg-neutral-800{
+    --tw-bg-opacity: 1;
+    background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:bg-neutral-900{
+    --tw-bg-opacity: 1;
+    background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:bg-opacity-80{
+    --tw-bg-opacity: 0.8;
+  }
+
+  .dark\:fill-neutral-200{
+    fill: #e5e5e5;
+  }
+
+  .dark\:text-blue-500{
+    --tw-text-opacity: 1;
+    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+  }
+
   .dark\:text-gray-300{
     --tw-text-opacity: 1;
     color: rgb(209 213 219 / var(--tw-text-opacity, 1));
@@ -6321,15 +6599,50 @@ html body {
     color: rgb(156 163 175 / var(--tw-text-opacity, 1));
   }
 
+  .dark\:text-neutral-200{
+    --tw-text-opacity: 1;
+    color: rgb(229 229 229 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-neutral-400{
+    --tw-text-opacity: 1;
+    color: rgb(163 163 163 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-neutral-500{
+    --tw-text-opacity: 1;
+    color: rgb(115 115 115 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-white{
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  }
+
   .dark\:hover\:bg-gray-700:hover{
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
   }
 
+  .dark\:hover\:bg-neutral-800:hover{
+    --tw-bg-opacity: 1;
+    background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
+  }
+
+  .dark\:hover\:text-neutral-200:hover{
+    --tw-text-opacity: 1;
+    color: rgb(229 229 229 / var(--tw-text-opacity, 1));
+  }
+
   .dark\:hover\:text-white:hover{
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   }
+
+  .dark\:focus\:bg-neutral-800:focus{
+    --tw-bg-opacity: 1;
+    background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
+  }
 }
 
 .\[\&\:checked_\+_span_svg\[data-checked-icon\]\]\:block:checked + span svg[data-checked-icon]{
diff --git a/launcher/src/components/UI/edit-page/EditScreen.vue b/launcher/src/components/UI/edit-page/EditScreen.vue
index 5555a7af6..c9f36bffe 100644
--- a/launcher/src/components/UI/edit-page/EditScreen.vue
+++ b/launcher/src/components/UI/edit-page/EditScreen.vue
@@ -1,7 +1,5 @@
 <template>
   <base-layout>
-    <!-- Start Node main layouts -->
-
     <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" />
@@ -127,9 +125,10 @@
     <LoaderAnime v-if="manageStore.disableConfirmButton || setupStore.isImportAnimeActive" :anime="getAimationSrc" />
   </base-layout>
 </template>
+
 <script setup>
+import { useFrontendServices } from "@/composables/services";
 import { useDeepClone } from "@/composables/utils";
-import { useListKeys } from "@/composables/validators";
 import ControlService from "@/store/ControlService";
 import { useNodeHeader } from "@/store/nodeHeader";
 import { useNodeManage } from "@/store/nodeManage";
@@ -140,6 +139,7 @@ import { useStakingStore } from "@/store/theStaking";
 import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
 import { useRouter } from "vue-router";
 import { useMultiSetups } from "../../../composables/multiSetups";
+import { useGenesis } from "../../../store/genesis";
 import { useSetups } from "../../../store/setups";
 import NetworkStatus from "../../layers/NetworkStatus.vue";
 import DrawerBox from "./components/drawer/DrawerBox.vue";
@@ -154,16 +154,14 @@ import ModifyModal from "./components/modals/ModifyModal.vue";
 import NetworkModal from "./components/modals/NetworkModal.vue";
 import NukeModal from "./components/modals/NukeModal.vue";
 import SwitchModal from "./components/modals/SwitchModal.vue";
-import DevnetSetup from "./components/modals/devnet/DevnetSetup.vue";
 import AddCustom from "./components/modals/custom-service/AddCustom.vue";
+import DevnetSetup from "./components/modals/devnet/DevnetSetup.vue";
 import CreateSetup from "./components/modals/setups/CreateSetup.vue";
 import ImportSetup from "./components/modals/setups/ImportSetup.vue";
 import SetupInfos from "./components/modals/setups/SetupInfos.vue";
 import ChangesSection from "./sections/ChangesSection.vue";
 import ServiceSection from "./sections/ServiceSection.vue";
 import SidebarSection from "./sections/SidebarSection.vue";
-import { useFrontendServices } from "@/composables/services";
-import { useGenesis } from "../../../store/genesis";
 
 const setupStore = useSetups();
 const footerStore = useFooter();
@@ -292,10 +290,6 @@ const fetchSetups = async () => {
   setupStore.editSetups = getAllSetups();
 };
 
-const listKeys = async (forceRefresh) => {
-  await useListKeys(forceRefresh);
-};
-
 // Random ID generator
 function generateRandomId() {
   const timestamp = new Date().getTime().toString(16);
@@ -398,6 +392,7 @@ const serviceModifyHandler = (item) => {
 const hideModifyModal = () => {
   manageStore.isLineHidden = false;
   isModifyModalOpen.value = false;
+
   manageStore.newConfiguration = useDeepClone(serviceStore.installedServices);
 };
 const confirmConsensusConnection = (item) => {
@@ -516,6 +511,7 @@ const setupDevnet = async () => {
     await Promise.all(installPromises);
 
     await ControlService.handleServiceChanges(useDeepClone(manageStore.confirmChanges));
+
     await ControlService.startServicesForSetup(setupId);
     await ControlService.removeConfigGenesisCopy();
 
@@ -583,6 +579,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 = useDeepClone(serviceStore.installedServices);
     }
 
@@ -892,11 +889,12 @@ const confirmHandler = async () => {
       await handleSetupChanges();
     } else if (manageStore.confirmChanges.some((e) => e.content === "NETWORK")) {
       await handleSwitchSetupNetwork();
-      await ControlService.handleServiceChanges(useDeepClone(manageStore.confirmChanges));
+
+      await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
     } else if (manageStore.confirmChanges.some((e) => e.content === "MODIFY")) {
-      await ControlService.handleServiceChanges(useDeepClone(manageStore.confirmChanges));
+      await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
     } else {
-      await ControlService.handleServiceChanges(useDeepClone(manageStore.confirmChanges));
+      await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
     }
   } catch (error) {
     console.error("Error processing changes:", error);
@@ -912,7 +910,8 @@ const handleServerServiceChanges = async () => {
   manageStore.confirmChanges.forEach((change) => {
     change.data.setupId = commonServicesId ?? change.data.setupId;
   });
-  await ControlService.handleServiceChanges(useDeepClone(manageStore.confirmChanges));
+
+  await ControlService.handleServiceChanges(JSON.parse(JSON.stringify(manageStore.confirmChanges)));
 };
 
 const handleSetupChanges = async () => {
@@ -942,7 +941,6 @@ const resetState = async () => {
   manageStore.selectedNetwork = {};
   setupStore.selectedSetupToRemove = [];
   manageStore.isLineHidden = false;
-  await listKeys();
   await updateDom();
   setTimeout(() => {
     manageStore.disableConfirmButton = false;
@@ -985,6 +983,7 @@ const deleteSetup = async (item) => {
   const subtasks =
     item?.services.flatMap((service) => {
       const matchedServices = manageStore.newConfiguration.filter((e) => e.config?.serviceID === service.config?.serviceID);
+
       return matchedServices.map((e) => ({
         id: e.config?.serviceID,
         content: "DELETE",
@@ -1027,7 +1026,8 @@ const closeNetworkModal = () => {
 const closeSwitchModal = () => {
   isSwitchModalOpen.value = false;
   manageStore.isLineHidden = false;
-  manageStore.newConfiguration = useDeepClone(serviceStore.installedServices);
+
+  manageStore.newConfiguration = JSON.parse(JSON.stringify(serviceStore.installedServices));
 };
 
 const closeInfoModal = () => {
diff --git a/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue b/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue
index 5e6bb7904..a3d4a8f9a 100644
--- a/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue
@@ -16,12 +16,7 @@
 
     <!-- Dropdown toggle button -->
 
-    <div
-      v-else
-      class="col-start-1 relative p-1 grid rounded-[4px] border border-gray-600"
-      :class="route.path === '/edit' ? 'col-end-6 grid-cols-9' : 'col-span-full  grid-cols-12'"
-      @click="toggleDropdown"
-    >
+    <div v-else class="col-start-1 relative p-1 grid rounded-[4px]" :class="dynamicClasses" @click="toggleDropdown">
       <span
         v-if="setupStore.selectedSetup !== null && setupStore.selectedSetup?.isActive"
         class="col-start-1 col-span-1 w-4 h-4 rounded-full self-center justify-self-center shadow-sm shadow-black"
@@ -114,7 +109,7 @@ import RenameSetup from "./RenameSetup.vue";
 import { useServices } from "@/store/services";
 import { useDeepClone } from "@/composables/utils";
 
-const { newHeight } = defineProps({
+const { newHeight, newBorder } = defineProps({
   list: {
     type: Array,
     required: true,
@@ -124,6 +119,11 @@ const { newHeight } = defineProps({
     required: false,
     default: "h-full",
   },
+  newBorder: {
+    type: String,
+    required: false,
+    default: "border border-gray-600",
+  },
 });
 
 const emit = defineEmits(["selectRename", "selectSetup", "serverView", "confirmRename"]);
@@ -153,6 +153,12 @@ const setupsList = computed(() => {
   return useDeepClone(output);
 });
 
+const borderClass = computed(() => {
+  if (newBorder === "") return "";
+  return newBorder;
+});
+const dynamicClasses = computed(() => [route.path === "/edit" ? "col-end-6 grid-cols-9" : "col-span-full grid-cols-12", borderClass.value]);
+
 const getDropdownWidth = computed(() => {
   let width;
   if (route.path === "/edit") {
diff --git a/launcher/src/components/UI/edit-page/sections/SidebarSection.vue b/launcher/src/components/UI/edit-page/sections/SidebarSection.vue
index 1ed2352f2..6316501a6 100644
--- a/launcher/src/components/UI/edit-page/sections/SidebarSection.vue
+++ b/launcher/src/components/UI/edit-page/sections/SidebarSection.vue
@@ -2,67 +2,66 @@
   <aside class="flex flex-col items-center w-18 h-full custom-gradient" @pointerdown.prevent.stop @mousedown.prevent.stop>
     <div class="w-full grid grid-rows-3 mt-20 p-1 gap-y-5">
       <div
-        class="col-span-1 row-start-1 row-end-2 p-1 rounded-md text-gray-700 focus:outline-nones transition-colors duration-200 hover:bg-[#23272a] flex justify-center items-center"
-        @click="hoverRouter"
+        class="col-span-1 row-start-1 row-end-2 p-1 rounded-md text-gray-700 bg-[#23272a] flex justify-center items-center scale-90 hover:scale-105 active:scale-100 border border-[#23272a] hover:border-gray-500 duration-150 hover:shadow-md shadow-[#23272a] transition-all"
         @mouseenter="footerStore.cursorLocation = `${toNode}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
-        <img class="w-8 h-5" src="/img/icon/edit-node-icons/back-to-node.png" alt="Manage Icon" />
-      </div>
-      <Transition name="slide-fade">
-        <router-link
-          v-if="routerHovered"
-          to="/node"
-          class="w-fit h-9 absolute col-span-1 row-start-1 row-end-2 py-1 px-2 rounded-md bg-gray-700 border border-gray-500 flex justify-between items-center space-x-2 ml-1 transition duration-200 shadow-md shadow-[#23272a] z-50"
-          @mouseleave="routerHovered = false"
-        >
+        <router-link to="/node" class="w-fit h-full flex justify-between items-center" @mouseleave="routerHovered = false">
           <img class="w-6 h-4 mr-1" src="/img/icon/edit-node-icons/back-to-node.png" alt="Manage Icon" />
-          <span class="text-sm text-gray-200 font-semibold">{{ $t("sidebarSect.toNode") }}</span>
         </router-link>
-      </Transition>
+      </div>
+
       <button
         v-if="setupStore.isEditConfigViewActive && setupStore.selectedSetup"
-        class="col-span-1 row-start-2 row-end-3 p-1 rounded-md text-gray-700 focus:outline-nones transition-colors duration-200 hover:bg-[#23272a] flex justify-center items-center"
+        class="col-span-1 row-start-2 row-end-3 p-1 rounded-md text-gray-700 bg-[#23272a] flex justify-center items-center scale-90 hover:scale-105 active:scale-100 border border-[#23272a] hover:border-gray-500 duration-150 hover:shadow-md shadow-[#23272a] transition-all ease-in-out"
         :class="disabledForDevnet ? 'pointer-events-none opacity-50' : ''"
-        @click="hoverNetwork"
+        @click="networkModal"
         @mouseenter="footerStore.cursorLocation = `${setchNet}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
         <img class="w-6" src="/img/icon/edit-node-icons/change-network.png" alt="Network" />
       </button>
-      <Transition name="slide-fade">
+      <!-- <Transition name="slide-fade">
         <button
           v-if="networkHovered"
           class="w-fit h-9 absolute row-start-2 row-end-3 py-1 px-2 rounded-md duration-200 bg-gray-700 border border-gray-500 flex justify-between items-center z-10 space-x-2 ml-1"
           :class="disabledForDevnet ? 'pointer-events-none opacity-50' : ''"
           @mouseleave="networkHovered = false"
-          @click="networkModal"
         >
-          <img class="w-4 mr-1" src="/img/icon/edit-node-icons/change-network.png" alt="Network Icon" />
+          <img
+            class="w-4 mr-1"
+            src="/img/icon/edit-node-icons/change-network.png"
+            alt="Network Icon"
+          />
           <span class="text-sm text-gray-200 font-semibold">{{ setchNet }}</span>
         </button>
-      </Transition>
+      </Transition> -->
 
       <button
         v-if="!setupStore.isEditConfigViewActive && setupStore.selectedSetup === null"
-        class="row-start-2 row-end-3 p-1 rounded-md text-gray-700 focus:outline-nones transition-colors duration-200 hover:bg-[#23272a] flex justify-center items-center"
-        @click="hoverNuke"
+        class="col-span-1 row-start-2 row-end-3 p-1 rounded-md text-gray-700 bg-[#23272a] flex justify-center items-center scale-90 hover:scale-105 active:scale-100 border border-[#23272a] hover:border-gray-500 duration-150 hover:shadow-md shadow-[#23272a] transition-all ease-in-out"
         @mouseenter="footerStore.cursorLocation = `${nukTheNud}`"
         @mouseleave="footerStore.cursorLocation = ''"
+        @click="nukeNode"
       >
-        <img class="w-6" src="/img/icon/edit-node-icons/nuke-node.png" alt="Export Icon" />
+        <img class="w-5" src="/img/icon/edit-node-icons/nuke-node.png" alt="Export Icon" />
       </button>
-      <Transition name="slide-fade">
+      <!-- <Transition name="slide-fade">
         <button
           v-if="nukeHovered"
           class="w-fit h-9 absolute row-start-2 row-end-3 py-1 px-2 rounded-md duration-200 bg-gray-700 border border-gray-500 flex justify-between items-center z-10 space-x-2 ml-1"
           @mouseleave="nukeHovered = false"
-          @click="nukeNode"
         >
-          <img class="w-4" src="/img/icon/edit-node-icons/nuke-node.png" alt="Export Icon" />
-          <span class="text-xs text-gray-200 font-semibold">{{ $t("sidebarSect.nukNod") }}</span>
+          <img
+            class="w-4"
+            src="/img/icon/edit-node-icons/nuke-node.png"
+            alt="Export Icon"
+          />
+          <span class="text-xs text-gray-200 font-semibold">{{
+            $t("sidebarSect.nukNod")
+          }}</span>
         </button>
-      </Transition>
+      </Transition> -->
     </div>
   </aside>
 </template>
@@ -79,8 +78,6 @@ const setchNet = t("sidebarSect.setchNet");
 const nukTheNud = t("sidebarSect.nukTheNud");
 
 const routerHovered = ref(false);
-const networkHovered = ref(false);
-const nukeHovered = ref(false);
 const footerStore = useFooter();
 const setupStore = useSetups();
 
@@ -98,32 +95,32 @@ const networkModal = () => {
   emit("networkModal");
 };
 
-const hoverRouter = () => {
-  if (routerHovered.value || networkHovered.value || nukeHovered.value) {
-    routerHovered.value = false;
-    networkHovered.value = false;
-    nukeHovered.value = false;
-  }
-  routerHovered.value = true;
-};
-
-const hoverNetwork = () => {
-  if (routerHovered.value || networkHovered.value || nukeHovered.value) {
-    routerHovered.value = false;
-    networkHovered.value = false;
-    nukeHovered.value = false;
-  }
-  networkHovered.value = true;
-};
-
-const hoverNuke = () => {
-  if (routerHovered.value || networkHovered.value || nukeHovered.value) {
-    routerHovered.value = false;
-    networkHovered.value = false;
-    nukeHovered.value = false;
-  }
-  nukeHovered.value = true;
-};
+// const hoverRouter = () => {
+//   if (routerHovered.value || networkHovered.value || nukeHovered.value) {
+//     routerHovered.value = false;
+//     networkHovered.value = false;
+//     nukeHovered.value = false;
+//   }
+//   routerHovered.value = true;
+// };
+
+// const hoverNetwork = () => {
+//   if (routerHovered.value || networkHovered.value || nukeHovered.value) {
+//     routerHovered.value = false;
+//     networkHovered.value = false;
+//     nukeHovered.value = false;
+//   }
+//   networkHovered.value = true;
+// };
+
+// const hoverNuke = () => {
+//   if (routerHovered.value || networkHovered.value || nukeHovered.value) {
+//     routerHovered.value = false;
+//     networkHovered.value = false;
+//     nukeHovered.value = false;
+//   }
+//   nukeHovered.value = true;
+// };
 </script>
 
 <style scoped>
diff --git a/launcher/src/components/UI/node-page/sections/ExpertWindow.vue b/launcher/src/components/UI/node-page/sections/ExpertWindow.vue
index bcf43bbf8..c627c2c8f 100755
--- a/launcher/src/components/UI/node-page/sections/ExpertWindow.vue
+++ b/launcher/src/components/UI/node-page/sections/ExpertWindow.vue
@@ -19,7 +19,7 @@
             {{ item.category }}
             <span v-if="item.category != 'service'">client</span>
           </p>
-          <span class="text-sm text-gray-200">ID: {{ item.config.serviceID }}</span>
+          <span class="text-sm text-gray-200">ID: {{ item.config?.serviceID }}</span>
         </div>
       </div>
 
diff --git a/launcher/src/components/UI/node-page/sections/SidebarSection.vue b/launcher/src/components/UI/node-page/sections/SidebarSection.vue
index c9768f390..d76361166 100755
--- a/launcher/src/components/UI/node-page/sections/SidebarSection.vue
+++ b/launcher/src/components/UI/node-page/sections/SidebarSection.vue
@@ -2,46 +2,54 @@
   <aside class="flex flex-col items-center w-18 h-full custom-gradient" @pointerdown.prevent.stop @mousedown.prevent.stop>
     <div class="w-full max-h-[144px] grid grid-rows-3 mt-20 p-1 gap-y-5">
       <div
-        class="col-span-1 row-start-1 row-end-2 p-1 rounded-md text-gray-700 focus:outline-nones transition-colors duration-200 hover:bg-[#23272a] flex justify-center items-center cursor-pointer"
-        @click="hoverRouter"
+        class="col-span-1 row-start-1 row-end-2 p-1 rounded-md text-gray-700 bg-[#23272a] flex justify-center items-center scale-90 hover:scale-105 active:scale-100 border border-[#23272a] hover:border-gray-500 duration-150 hover:shadow-md shadow-[#23272a] transition-all ease-in-out"
         @mouseenter="footerStore.cursorLocation = `${toEdit}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
-        <img class="w-7" src="/img/icon/node-page-icons/edit-node-icon.png" alt="Manage Icon" />
+        <router-link to="/edit" class="w-full h-full flex justify-between items-center" @mouseleave="routerHovered = false">
+          <img class="w-6 mr-1" src="/img/icon/node-page-icons/edit-node-icon.png" alt="Manage Icon" />
+        </router-link>
       </div>
-      <Transition name="slide-fade">
+      <!-- <Transition name="slide-fade">
         <router-link
           v-if="routerHovered"
           to="/edit"
           class="w-fit h-9 absolute col-span-1 row-start-1 row-end-2 py-1 px-2 rounded-md bg-gray-700 border border-gray-500 flex justify-between items-center z-10 space-x-2 ml-1 transition duration-200 shadow-md shadow-[#23272a]"
           @mouseleave="routerHovered = false"
         >
-          <img class="w-6 mr-1" src="/img/icon/node-page-icons/edit-node-icon.png" alt="Manage Icon" />
+          <img
+            class="w-6 mr-1"
+            src="/img/icon/node-page-icons/edit-node-icon.png"
+            alt="Manage Icon"
+          />
           <span class="text-sm text-gray-200 font-semibold">{{ toEdit }}</span>
         </router-link>
-      </Transition>
+      </Transition> -->
 
-      <button v-if="isloading" class="row-start-2 row-end-3 p-1 rounded-md relative flex justify-center items-center">
+      <button
+        v-if="isloading"
+        class="col-span-1 row-start-2 row-end-3 p-1 rounded-md text-gray-700 bg-[#23272a] flex justify-center items-center scale-90 hover:scale-105 active:scale-100 border border-[#23272a] hover:border-gray-500 duration-150 hover:shadow-md shadow-[#23272a] transition-all ease-in-out"
+      >
         <img v-if="loading" src="/animation/loading/turning-circle-blue.gif" alt="loading" />
       </button>
       <button
         v-else-if="checkStatus"
-        class="row-start-2 row-end-3 p-1 rounded-md transition-colors duration-200 hover:bg-[#23272a] flex justify-center items-center"
+        class="col-span-1 row-start-2 row-end-3 p-1 rounded-md text-gray-700 bg-[#23272a] flex justify-center items-center scale-90 hover:scale-105 active:scale-100 border border-[#23272a] hover:border-gray-500 duration-150 hover:shadow-md shadow-[#23272a] transition-all ease-in-out"
         @click="hoverPower"
         @mouseenter="footerStore.cursorLocation = `${trnOn}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
-        <img class="w-5" src="/img/icon/node-page-icons/turn-on.png" alt="Stop Icon" />
+        <img class="w-4" src="/img/icon/node-page-icons/turn-on.png" alt="Stop Icon" />
       </button>
 
       <button
         v-else-if="!checkStatus"
-        class="row-start-2 row-end-3 p-1 rounded-md text-gray-700 focus:outline-nones transition-colors duration-200 hover:bg-[#23272a] flex justify-center items-center"
+        class="col-span-1 row-start-2 row-end-3 p-1 rounded-md text-gray-700 bg-[#23272a] flex justify-center items-center scale-90 hover:scale-105 active:scale-100 border border-[#23272a] hover:border-gray-500 duration-150 hover:shadow-md shadow-[#23272a] transition-all ease-in-out"
         @click="hoverPower"
         @mouseenter="footerStore.cursorLocation = `${trnOff}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
-        <img class="w-5" src="/img/icon/node-page-icons/turn-off.png" alt="Stop Icon" />
+        <img class="w-4" src="/img/icon/node-page-icons/turn-off.png" alt="Stop Icon" />
       </button>
       <Transition name="slide-fade">
         <button
@@ -64,26 +72,15 @@
           <span class="text-xs text-gray-200">{{ trnOff }}</span>
         </button>
       </Transition>
-      <Transition name="slide-fade">
-        <button
-          v-if="!exportHovered"
-          class="row-start-3 row-end-4 p-1 rounded-md text-gray-700 focus:outline-nones transition-colors duration-200 hover:bg-[#23272a] flex justify-center items-center"
-          @click="hoverExport"
-          @mouseenter="footerStore.cursorLocation = `${expNode}`"
-          @mouseleave="footerStore.cursorLocation = ''"
-        >
-          <img class="w-5" src="/img/icon/node-page-icons/export-config-icon.png" alt="Export Icon" />
-        </button>
-        <button
-          v-else
-          class="w-fit h-9 absolute row-start-2 row-end-3 py-1 px-2 rounded-md duration-200 bg-gray-700 border border-gray-500 flex justify-between items-center z-10 space-x-2 ml-1 top-[42%]"
-          @mouseleave="exportHovered = false"
-          @click="exportData"
-        >
-          <img class="w-4" src="/img/icon/node-page-icons/export-config-icon.png" alt="Export Icon" />
-          <span class="text-xs text-gray-200 font-semibold">{{ expNode }}</span>
-        </button>
-      </Transition>
+
+      <button
+        class="col-span-1 row-start-3 row-end-4 p-1 rounded-md text-gray-700 bg-[#23272a] flex justify-center items-center scale-90 hover:scale-105 active:scale-100 border border-[#23272a] hover:border-gray-500 duration-150 hover:shadow-md shadow-[#23272a] transition-all ease-in-out"
+        @click="exportData"
+        @mouseenter="footerStore.cursorLocation = `${expNode}`"
+        @mouseleave="footerStore.cursorLocation = ''"
+      >
+        <img class="w-4" src="/img/icon/node-page-icons/export-config-icon.png" alt="Export Icon" />
+      </button>
     </div>
     <StateModal
       v-if="nodeStore.runNodePowerModal"
@@ -203,14 +200,14 @@ const exportData = async () => {
   }
 };
 
-const hoverRouter = () => {
-  if (routerHovered.value || exportHovered.value || powerHovered.value) {
-    routerHovered.value = false;
-    exportHovered.value = false;
-    powerHovered.value = false;
-  }
-  routerHovered.value = true;
-};
+// const hoverRouter = () => {
+//   if (routerHovered.value || exportHovered.value || powerHovered.value) {
+//     routerHovered.value = false;
+//     exportHovered.value = false;
+//     powerHovered.value = false;
+//   }
+//   routerHovered.value = true;
+// };
 
 const hoverPower = () => {
   if (routerHovered.value || exportHovered.value || powerHovered.value) {
@@ -221,14 +218,14 @@ const hoverPower = () => {
   powerHovered.value = true;
 };
 
-const hoverExport = () => {
-  if (routerHovered.value || exportHovered.value || powerHovered.value) {
-    routerHovered.value = false;
-    exportHovered.value = false;
-    powerHovered.value = false;
-  }
-  exportHovered.value = true;
-};
+// const hoverExport = () => {
+//   if (routerHovered.value || exportHovered.value || powerHovered.value) {
+//     routerHovered.value = false;
+//     exportHovered.value = false;
+//     powerHovered.value = false;
+//   }
+//   exportHovered.value = true;
+// };
 </script>
 
 <style scoped>
diff --git a/launcher/src/components/UI/staking-page/StakingScreen.vue b/launcher/src/components/UI/staking-page/StakingScreen.vue
index 6689000c0..feb9d6b53 100644
--- a/launcher/src/components/UI/staking-page/StakingScreen.vue
+++ b/launcher/src/components/UI/staking-page/StakingScreen.vue
@@ -41,11 +41,12 @@ import { useListGroups } from "@/composables/groups";
 import { useMultiSetups } from "@/composables/multiSetups";
 import { useDeepClone } from "@/composables/utils";
 import { useListKeys } from "@/composables/validators";
+import { useImportKeys } from "@/composables/importKey";
 import { useServices } from "@/store/services";
 import { useSetups } from "@/store/setups";
 import { useStakingStore } from "@/store/theStaking";
 import { saveAs } from "file-saver";
-import { computed, onUnmounted, watch, watchEffect } from "vue";
+import { computed, onMounted, onUnmounted, watch, watchEffect } from "vue";
 import ControlService from "../../../store/ControlService";
 import ImportRemote from "./components/modals/ImportRemote.vue";
 import ImportValidator from "./components/modals/ImportValidator.vue";
@@ -63,6 +64,7 @@ const serviceStore = useServices();
 const setupStore = useSetups();
 const { listGroups } = useListGroups();
 const { getServerView } = useMultiSetups();
+const { uploadValidatorKey, onDrop, importingKey, importValidatorProcessing } = useImportKeys(stakingStore.forceRefresh);
 
 const modals = {
   import: {
@@ -122,114 +124,28 @@ watch(
   }
 );
 
+onMounted(async () => {
+  stakingStore.forceRefresh = true;
+  getServerView();
+  await listKeys();
+});
+
 // *************** Methods *****************
 
-//**** List Keys ****
 //Methods
 
+//**** List Keys ****
 const listKeys = async () => {
   await useListKeys(stakingStore.forceRefresh);
+  stakingStore.isSkeletonActive = false;
 };
 
 // const updateValidatorStats = async () => {
 //   await useUpdateValidatorStats();
 // };
 
-//**** Validator Key File ****
-
-//Read File Content
-const readFileContent = (file) => {
-  const reader = new FileReader();
-
-  reader.onload = (event) => {
-    try {
-      if (file.type === "application/json") {
-        const jsonContent = JSON.parse(event.target.result);
-
-        // Add filename property to jsonContent
-        jsonContent.filename = file.name;
-        stakingStore.previewKeys.push(jsonContent);
-      }
-    } catch (e) {
-      console.error("Error parsing JSON file:", e);
-    }
-  };
-  reader.onerror = (event) => {
-    console.error("Error reading file:", event.target.error);
-  };
-
-  reader.readAsText(file);
-};
-
-//Handle multiple files
-const handleFiles = (files) => {
-  if (files.length > 1) {
-    for (let file of files) {
-      if (file.type === "application/json") {
-        readFileContent(file);
-      }
-    }
-  } else if (files[0].type === "application/json") {
-    readFileContent(files[0]);
-  }
-};
-
-const uploadValidatorKey = (event) => {
-  let uploadedFiles = event.target.files;
-  stakingStore.previewKeys = [];
-  handleFiles(uploadedFiles);
-  stakingStore.passwordFiles = [...uploadedFiles].filter((file) => file.type === "text/plain");
-  stakingStore.keyFiles = [...uploadedFiles].filter((file) => file.type === "application/json");
-  stakingStore.isOverDropZone = false;
-  stakingStore.isPreviewListActive = true;
-  stakingStore.setActivePanel("validator");
-};
-
-const onDrop = (event) => {
-  let validator = serviceStore.installedServices.filter((s) => s.category === "validator");
-  if (validator && validator.map((e) => e.state).includes("running")) {
-    stakingStore.previewKeys = [];
-    let droppedFiles = event.dataTransfer.files;
-    if (droppedFiles[0]["type"] === "application/json" || droppedFiles[0]["type"] === "text/plain") {
-      stakingStore.isOverDropZone = false;
-      stakingStore.isPreviewListActive = true;
-      handleFiles(droppedFiles);
-      stakingStore.passwordFiles = [...droppedFiles].filter((file) => file.type === "text/plain");
-      stakingStore.keyFiles = [...droppedFiles].filter((file) => file.type === "application/json");
-      stakingStore.setActivePanel("validator");
-    } else {
-      stakingStore.inputWrongKey = true;
-    }
-  }
-};
-
-//Group Keys by GroupName and GroupId
-
 //****End of Validator Key File ****
 
-//**** Import Key Validation ****
-
-const importKey = async (val) => {
-  stakingStore.importEnteredPassword = val;
-  stakingStore.importKeyMessage = await ControlService.importKey(stakingStore.selectedValidatorService.config.serviceID);
-
-  stakingStore.isPreviewListActive = false;
-  stakingStore.setActivePanel("insert");
-  stakingStore.keyFiles = [];
-  stakingStore.passwordFiles = [];
-  stakingStore.previewKeys = [];
-
-  stakingStore.importEnteredPassword = "";
-  stakingStore.forceRefresh = true;
-  if (stakingStore.isDoppelgangerProtectionActive && stakingStore.doppelgangerKeys.length > 0) {
-    setTimeout(() => {
-      stakingStore.setActiveModal(null);
-    }, 10000);
-  }
-  await listKeys();
-  listGroups();
-};
-
 //Risk Accepted
 
 const riskAccepted = async () => {
@@ -242,7 +158,7 @@ const riskAccepted = async () => {
       })
     );
   } else {
-    await importKey(stakingStore.importEnteredPassword);
+    await importingKey(stakingStore.importEnteredPassword);
   }
   stakingStore.setActiveModal(null);
 };
@@ -254,31 +170,6 @@ const confirmPassword = async (pass) => {
   stakingStore.setActiveModal("import");
 };
 
-const importValidatorProcessing = async () => {
-  stakingStore.checkActiveValidatorsResponse = await ControlService.checkActiveValidators({
-    files: stakingStore.keyFiles,
-    passwordFiles: stakingStore.passwordFiles,
-    password: stakingStore.importEnteredPassword,
-    serviceID: stakingStore.selectedValidatorService.config?.serviceID,
-    slashingDB: stakingStore.slashingDB?.path || null,
-  });
-
-  if (
-    stakingStore.checkActiveValidatorsResponse.length === 0 ||
-    stakingStore.checkActiveValidatorsResponse.includes("Validator check error:\n")
-  ) {
-    importKey(stakingStore.importEnteredPassword);
-
-    stakingStore.setActivePanel(null);
-    stakingStore.keyFiles = [];
-    stakingStore.passwordFiles = [];
-  } else {
-    stakingStore.setActiveModal("risk");
-    stakingStore.doppelgangerKeys = [];
-    console.log("error: there are active validators");
-  }
-};
-
 //****End of Import Key Validation ****
 
 //**** Grouping ****
@@ -436,6 +327,7 @@ const removeGroupConfirm = async (item) => {
 
 //Confirm Rename Validator Key
 const confirmValidatorKeyRename = async (name) => {
+  stakingStore.isRenameKeyActive = true;
   stakingStore.keys.find((key) => key.key === stakingStore.selectKeyToRename.key).selected = false;
   let el = stakingStore.selectKeyToRename;
 
@@ -449,6 +341,8 @@ const confirmValidatorKeyRename = async (name) => {
   } else {
     console.log("Couldn't read KeyFile!");
   }
+  await useListKeys(stakingStore.forceRefresh);
+  stakingStore.isRenameKeyActive = false;
 };
 
 const resetValidatorKeyName = async (el) => {
@@ -470,11 +364,11 @@ const resetValidatorKeyName = async (el) => {
 //Doppelganger
 const doppelgangerController = async (item) => {
   try {
-    const res = await ControlService.getServiceYAML(item?.config.serviceID);
+    const res = await ControlService.getServiceYAML(item?.config?.serviceID);
     item.expertOptions.map((option) => {
-      if (item.service === "LighthouseValidatorService" && option.title === "Doppelganger") {
+      if (item.service === "LighthouseValidatorService" && option.title === "Doppelganger Protection") {
         stakingStore.doppelgangerStatus = res.indexOf(option.pattern[0]) === -1 ? false : true;
-      } else if (option.title === "Doppelganger") {
+      } else if (option.title === "Doppelganger Protection") {
         const matchedValue = res.match(new RegExp(option.pattern[0])) ? [...res.match(new RegExp(option.pattern[0]))][2] : "";
 
         stakingStore.doppelgangerStatus = matchedValue === "true" ? true : false;
@@ -508,7 +402,6 @@ const pickValidatorService = async (service) => {
 
 const deletePreviewKey = async (item) => {
   stakingStore.previewKeys = stakingStore.previewKeys.filter((key) => key.filename !== item.filename);
-  stakingStore.doppelgangerKeys = stakingStore.doppelgangerKeys.filter((key) => key.filename !== item.filename);
 
   const indexItem = stakingStore.keyFiles.findIndex((key) => key.name === item.filename);
   if (indexItem !== -1) {
@@ -517,6 +410,8 @@ const deletePreviewKey = async (item) => {
 
   if (!stakingStore.previewKeys.length) {
     stakingStore.isPreviewListActive = false;
+    stakingStore.selectedValidatorService = null;
+    stakingStore.doppelgangerKeys = stakingStore.doppelgangerKeys.filter((key) => key.filename !== item.filename);
     stakingStore.setActivePanel("insert");
   }
 
@@ -850,8 +745,6 @@ watchEffect(() => {
   }
 });
 
-//Lifecycle Hooks
-
 onUnmounted(() => {
   setupStore.selectedSetup = null;
   getServerView();
diff --git a/launcher/src/components/UI/staking-page/components/header/SearchKeys.vue b/launcher/src/components/UI/staking-page/components/header/SearchKeys.vue
new file mode 100644
index 000000000..5b97acd25
--- /dev/null
+++ b/launcher/src/components/UI/staking-page/components/header/SearchKeys.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="w-full h-full rounded-md flex justify-start items-center cursor-pointer">
+    <div class="w-full h-full flex justify-evenly items-center px-2 relative rounded-md bg-[#232426]">
+      <div class="flex items-center pointer-events-none" @mousedown.prevent>
+        <svg aria-hidden="true" class="w-5 h-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </div>
+      <input
+        v-model="stakingStore.searchContent"
+        type="search"
+        class="z-10 text-gray-300 text-sm rounded-full block w-full px-2 py-1 placeholder-gray-500 bg-transparent"
+        placeholder="Search for keys"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useStakingStore } from "@/store/theStaking";
+import { onMounted, onUnmounted } from "vue";
+
+const stakingStore = useStakingStore();
+
+onMounted(() => {
+  stakingStore.searchContent = "";
+});
+
+onUnmounted(() => {
+  stakingStore.searchContent = "";
+});
+</script>
diff --git a/launcher/src/components/UI/staking-page/components/header/StakingHeader.vue b/launcher/src/components/UI/staking-page/components/header/StakingHeader.vue
index a2b31fafd..de78ca8c8 100644
--- a/launcher/src/components/UI/staking-page/components/header/StakingHeader.vue
+++ b/launcher/src/components/UI/staking-page/components/header/StakingHeader.vue
@@ -1,15 +1,17 @@
 <template>
   <div
-    class="w-full h-full col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-24 items-center rounded-md bg-[#151618] border border-gray-600 px-[2px] space-x-1"
+    class="w-full h-7 col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-24 items-center rounded-md bg-[#151618] py-0 divide-x divide-gray-600"
   >
-    <div class="col-start-1 col-end-8 h-8 flex justify-end items-center">
-      <TotalBalance />
-    </div>
-    <div class="col-start-8 col-end-18 h-8 flex justify-center items-center relative">
-      <NetworkStatus :copatible-size="getNetworkSize" />
+    <div class="col-start-1 col-end-13 h-full flex justify-start items-center bg-[#232426] divide-x divide-gray-600 rounded-l-md">
+      <p class="w-2/5 text-[10px] text-gray-400 font-medium font-sans uppercase pl-6 relative flex items-center text-center">
+        Page Filter
+
+        <span class="ml-2 w-2 h-2 border-t-2 border-r-2 border-gray-400 transform rotate-45 text-right"></span>
+      </p>
+      <SetupDropdown :list="setupList" :new-height="newHeight" new-border="" @select-setup="selectSetup" @server-view="serverView" />
     </div>
-    <div class="col-start-18 col-span-full h-8 flex justify-end items-center">
-      <SetupDropdown :list="setupList" :new-height="newHeight" @select-setup="selectSetup" @server-view="serverView" />
+    <div class="col-start-13 col-span-full h-full flex justify-center items-center">
+      <SearchKeys />
     </div>
   </div>
 </template>
@@ -17,23 +19,19 @@
 import { useMultiSetups } from "@/composables/multiSetups";
 import { computed } from "vue";
 import { useSetups } from "../../../../../store/setups";
-import NetworkStatus from "../../../../layers/NetworkStatus.vue";
 import SetupDropdown from "../../../edit-page/components/edit/setups/SetupDropdown.vue";
-import TotalBalance from "../management/components/val-rewards/TotalBalance.vue";
+import SearchKeys from "./SearchKeys.vue";
 
 const setupStore = useSetups();
+
 const { getSelectedSetup, getServerView } = useMultiSetups();
 
-const newHeight = "h-8";
+const newHeight = "h-7";
 
 const setupList = computed(() => {
   return setupStore.stakingSetups;
 });
 
-const getNetworkSize = computed(() => {
-  return "w-full h-full flex justify-center items-center";
-});
-
 const selectSetup = (setup) => {
   getSelectedSetup(setup);
 };
diff --git a/launcher/src/components/UI/staking-page/components/list/ListBody.vue b/launcher/src/components/UI/staking-page/components/list/ListBody.vue
index 7d18c10b0..0dd247c27 100644
--- a/launcher/src/components/UI/staking-page/components/list/ListBody.vue
+++ b/launcher/src/components/UI/staking-page/components/list/ListBody.vue
@@ -1,23 +1,22 @@
-import { ref, computed, watchEffect, watch, onMounted, onUnmounted } from 'vue';
 <template>
   <div
     class="col-start-1 col-span-full overflow-x-hidden overflow-y-auto px-1 flex justify-start items-center space-y-2 border bg-[#151618] rounded-b-sm mb-[1px]"
     :class="[
-      stakingStore.isOverDropZone ? 'border-dashed  border-blue-500 ' : 'border-gray-600',
+      stakingStore.isOverDropZone ? 'border-dashed border-blue-500' : 'border-gray-600',
       stakingStore.inputWrongKey ? 'border-red-500' : '',
       stakingStore.isPreviewListActive || stakingStore.isRemoteListActive || stakingStore.isGroupListActive
         ? 'row-start-2 row-end-12'
         : 'row-start-1 row-end-12 rounded-t-md',
     ]"
   >
-    <GroupList v-if="stakingStore.isGroupListActive" :is-loading="isLoading" />
-    <RemoteList v-else-if="stakingStore.isRemoteListActive" :is-loading="isLoading" />
+    <GroupList v-if="stakingStore.isGroupListActive" :is-loading="stakingStore.isSkeletonActive" />
+    <RemoteList v-else-if="stakingStore.isRemoteListActive" :is-loading="stakingStore.isSkeletonActive" />
 
     <div
       v-else
       ref="dropZoneRef"
       class="w-full h-full max-h-[423px] animate__animated animate__fadeIn"
-      :class="{ 'cursor-not-allowed': isDropZoneDisabled }"
+      :class="{ 'cursor-not-allowed': stakingStore.isSkeletonActive }"
       @dragover.prevent="onDragOver"
       @dragleave.prevent="onDragLeave"
       @drop.prevent="onDrop"
@@ -25,53 +24,37 @@ import { ref, computed, watchEffect, watch, onMounted, onUnmounted } from 'vue';
       <span
         v-if="stakingStore.isOverDropZone"
         class="w-full h-full self-center justify-self-center flex justify-center items-center text-2xl"
-        :class="[stakingStore.inputWrongKey ? 'text-red-500' : 'text-blue-400', isDropZoneDisabled ? 'cursor-not-allowed ' : '']"
+        :class="[stakingStore.inputWrongKey ? 'text-red-500' : 'text-blue-400', stakingStore.isSkeletonActive ? 'cursor-not-allowed' : '']"
         >+</span
       >
       <div
-        v-if="!stakingStore.isOverDropZone"
+        v-else
         class="w-full h-full flex flex-col justify-start items-center space-y-2 z-10 scrollbar scrollbar-rounded-* scrollbar-thumb-teal-800 scrollbar-track-transparent overflow-y-auto pt-2"
       >
-        <span
-          v-if="
-            !getFilteredValidators?.length > 0 &&
-            !isLoading &&
-            !stakingStore.isPreviewListActive &&
-            !searchNotFound &&
-            !filteredDoppelgangerKeys?.length
-          "
-          class="text-lg font-bold text-gray-300 text-center uppercase select-none"
-          >{{ $t("stakingPage.noVal") }}</span
-        >
+        <span v-if="shouldShowNoValidators" class="text-lg font-bold text-gray-300 text-center uppercase select-none">{{
+          $t("stakingPage.noVal")
+        }}</span>
         <span v-if="searchNotFound && getFilteredValidators?.length > 0" class="text-lg font-bold text-gray-300 text-center uppercase">{{
           $t("stakingPage.noMatch")
         }}</span>
-        <SkeletonRow v-if="!stakingStore.isPreviewListActive && isLoading" />
-        <SkeletonRow v-if="!stakingStore.isPreviewListActive && isLoading" />
-        <SkeletonRow v-if="!stakingStore.isPreviewListActive && isLoading" />
-        <SkeletonRow v-if="!stakingStore.isPreviewListActive && isLoading" />
-        <SkeletonRow v-if="!stakingStore.isPreviewListActive && isLoading" />
-        <SkeletonRow v-if="!stakingStore.isPreviewListActive && isLoading" />
-        <SkeletonRow v-if="!stakingStore.isPreviewListActive && isLoading" />
-        <SkeletonRow v-if="!stakingStore.isPreviewListActive && isLoading" />
-        <SkeletonRow v-if="!stakingStore.isPreviewListActive && isLoading" />
-        <SkeletonRow v-if="!stakingStore.isPreviewListActive && isLoading" />
+
+        <SkeletonRow v-for="i in 10" v-show="!stakingStore.isPreviewListActive && stakingStore.isSkeletonActive" :key="i" />
 
         <PreviewKey
           v-for="item in stakingStore.previewKeys"
-          v-show="stakingStore.isPreviewListActive && !isLoading"
+          v-show="stakingStore.isPreviewListActive && !stakingStore.isSkeletonActive"
           :key="item.pubkey"
           :item="item"
-          @delete-preview="deletePreview"
+          @delete-preview="emit('deletePreview', $event)"
         />
 
         <DoppelGCheckRow
-          v-for="key in filteredDoppelgangerKeys"
+          v-for="key in stakingStore.doppelgangerKeys"
           v-show="
-            stakingStore.doppelgangerKeys?.length &&
+            stakingStore.isDoppelgangerProtectionActive &&
+            !stakingStore.isSkeletonActive &&
             !stakingStore.isPreviewListActive &&
-            !isLoading &&
-            stakingStore.selectedServiceToFilter?.config?.serviceID === key.serviceID
+            !stakingStore.isSkeletonActive
           "
           :key="key"
           :item="key"
@@ -79,27 +62,29 @@ import { ref, computed, watchEffect, watch, onMounted, onUnmounted } from 'vue';
 
         <GroupRow
           v-for="group in getCorrectValidatorGroups"
-          v-show="!stakingStore.isPreviewListActive && stakingStore.validatorKeyGroups?.length > 0 && !isLoading"
+          v-show="shouldShowGroups"
           :key="group.groupID"
           :item="group"
-          @open-group="openGroup"
-          @rename-group="renameGroup(group)"
-          @withdraw-group="withdrawGroup"
+          @open-group="emit('openGroup', $event)"
+          @rename-group="emit('renameGroup', group)"
+          @withdraw-group="emit('withdrawGroup', $event)"
         />
 
         <KeyRow
           v-for="key in getFilteredValidators"
-          v-show="!isKeyInGroup(key) && !stakingStore.isPreviewListActive && stakingStore.keys?.length > 0 && !isLoading"
+          v-show="shouldShowKeys(key)"
           :key="key.pubkey"
           :item="key"
-          @remove-single="removeSingle"
-          @rename-single="renameSingle"
+          @remove-single="emit('removeSingle', $event)"
+          @rename-single="emit('renameSingle', $event)"
         />
       </div>
     </div>
   </div>
 </template>
+
 <script setup>
+import { ref, computed, watch, onUnmounted } from "vue";
 import KeyRow from "./rows/KeyRow.vue";
 import PreviewKey from "./rows/PreviewKey.vue";
 import GroupRow from "./rows/GroupRow.vue";
@@ -107,10 +92,7 @@ import SkeletonRow from "./rows/SkeletonRow.vue";
 import DoppelGCheckRow from "./rows/DoppelGCheckRow.vue";
 import GroupList from "./GroupList.vue";
 import RemoteList from "./RemoteList.vue";
-import { useListGroups } from "@/composables/groups";
 import { useStakingStore } from "@/store/theStaking";
-import { computed, onMounted, onUnmounted, ref, watch, watchEffect } from "vue";
-import { useListKeys } from "@/composables/validators";
 import { useSetups } from "@/store/setups";
 
 const emit = defineEmits([
@@ -123,209 +105,129 @@ const emit = defineEmits([
   "deletePreview",
   "renameSingle",
 ]);
+
 const stakingStore = useStakingStore();
 const setupStore = useSetups();
-const { listGroups } = useListGroups();
-const isLoading = ref(true);
 const dropZoneRef = ref(null);
-const isDropZoneActive = ref(true);
 
-// Computed
 stakingStore.filteredKeys = computed(() => {
-  if (stakingStore.searchContent === "") {
-    return stakingStore.keys;
+  let filteredKeys = stakingStore.keys;
+  if (stakingStore.searchContent) {
+    filteredKeys = stakingStore.keys.filter(
+      (key) =>
+        key.key?.toLowerCase().includes(stakingStore.searchContent.toLowerCase()) ||
+        (key.displayName && key.displayName.toLowerCase()?.includes(stakingStore.searchContent.toLowerCase()))
+    );
   }
 
-  return stakingStore.keys.filter(
-    (key) =>
-      (key.key && key.key.toLowerCase().includes(stakingStore.searchContent.toLowerCase())) ||
-      (key.displayName && key.displayName !== "" && key.displayName.toLowerCase()?.includes(stakingStore.searchContent.toLowerCase()))
-  );
-});
+  const uniqueKeys = [];
+  const seenKeys = new Set();
 
-console.log(stakingStore.filteredKeys);
-console.log("All keys", stakingStore.keys);
+  for (const key of filteredKeys) {
+    if (key.key && !seenKeys.has(key.key)) {
+      uniqueKeys.push(key);
+      seenKeys.add(key.key);
+    }
+  }
+
+  return uniqueKeys;
+});
 
 const getFilteredValidators = computed(() => {
-  // No setup and no service filter
   if (!setupStore.selectedSetup && !stakingStore.selectedServiceToFilter) {
     return stakingStore.filteredKeys;
   }
 
-  // No setup but a service filter exists
   if (!setupStore.selectedSetup && stakingStore.selectedServiceToFilter) {
     return stakingStore.filteredKeys.filter((key) => key.validatorID === stakingStore.selectedServiceToFilter?.config?.serviceID);
   }
 
-  // Setup exists but no service filter
   if (setupStore.selectedSetup && !stakingStore.selectedServiceToFilter) {
     const serviceIds = setupStore.selectedSetup?.services?.map((service) => service.config?.serviceID);
     return stakingStore.filteredKeys.filter((key) => serviceIds?.includes(key.validatorID));
   }
 
-  // Both setup and service filter exist
   const selectedServiceId = stakingStore.selectedServiceToFilter.config?.serviceID;
   return stakingStore.filteredKeys.filter((key) => key.validatorID === selectedServiceId);
 });
 
-const getCorrectValidatorGroups = computed(() => {
-  return stakingStore.validatorKeyGroups.filter(
+const getCorrectValidatorGroups = computed(() =>
+  stakingStore.validatorKeyGroups.filter(
     (group) => group.keys.length > 0 && group.validatorClientID === stakingStore.selectedServiceToFilter?.config?.serviceID
-  );
-});
-
-const searchNotFound = computed(() => {
-  return (
-    !stakingStore.isPreviewListActive && !isLoading.value && stakingStore.searchContent !== "" && stakingStore.filteredKeys.length === 0
-  );
-});
-
-const filteredDoppelgangerKeys = computed(() => {
-  return stakingStore.doppelgangerKeys;
-});
-
-const isDropZoneDisabled = computed(() => {
-  return isLoading.value;
-});
-
-// Watchers
-
-watchEffect(() => {
-  if (stakingStore.inputWrongKey) {
-    setTimeout(() => {
-      stakingStore.inputWrongKey = false;
-    });
-  }
-});
-
-watchEffect(() => {
-  if (stakingStore.keys.length === 0) {
-    isLoading.value = true;
-  } else if (stakingStore.keys.length > 0) {
-    isLoading.value = false;
-  }
-
-  setTimeout(() => {
-    if (isLoading.value) {
-      isLoading.value = false;
-    }
-  }, 2000);
-});
+  )
+);
 
-watch(
-  () => stakingStore.selectedServiceToFilter,
-  async () => {
-    await listGroups();
-  }
+const searchNotFound = computed(
+  () =>
+    !stakingStore.isPreviewListActive &&
+    !stakingStore.isSkeletonActive &&
+    stakingStore.searchContent !== "" &&
+    stakingStore.filteredKeys.length === 0
 );
 
-watchEffect(() => {
-  if (!stakingStore.isPreviewListActive) {
-    isLoading.value = true;
-    setTimeout(() => {
-      isLoading.value = false;
-    }, 6000);
-  }
-});
+const shouldShowNoValidators = computed(
+  () =>
+    !getFilteredValidators.value?.length &&
+    !stakingStore.isSkeletonActive &&
+    !stakingStore.isPreviewListActive &&
+    !searchNotFound.value &&
+    !stakingStore.doppelgangerKeys?.length
+);
 
-watch(
-  () => stakingStore.keys.length,
-  async (newLength, oldLength) => {
-    if (newLength !== oldLength) {
-      await listKeys();
-      removeDuplicatedDoppelgangerKeys();
-    }
-  }
+const shouldShowGroups = computed(
+  () => !stakingStore.isPreviewListActive && stakingStore.validatorKeyGroups?.length > 0 && !stakingStore.isSkeletonActive
 );
 
-// Lifecycle Hooks
-onMounted(async () => {
-  stakingStore.forceRefresh = true;
-  if (getFilteredValidators.value.length > 0 && stakingStore.searchContent === "") {
-    await listGroups();
-  }
-});
 onUnmounted(() => {
   stakingStore.setActivePanel(null);
 });
 
-//Methods
-
-const onDragOver = () => {
-  if (!isDropZoneDisabled.value) {
-    stakingStore.isOverDropZone = true;
-  }
-};
-
-const onDragLeave = () => {
-  if (isDropZoneActive.value) {
-    stakingStore.isOverDropZone = false;
-  }
-};
-
-const normalizeKey = (key) => {
-  return key.startsWith("0x") ? key.substring(2) : key;
-};
+function normalizeKey(key) {
+  return key?.startsWith("0x") ? key.substring(2) : key;
+}
 
-const removeDuplicatedDoppelgangerKeys = () => {
+function removeDuplicatedDoppelgangerKeys() {
   const normalizedKeysSet = new Set(stakingStore.keys.map((k) => normalizeKey(k.key)));
-  let removed = false;
-
-  const filteredDoppelgangerKeys = stakingStore.doppelgangerKeys.filter((doppelKey) => {
-    const isDuplicate = normalizedKeysSet.has(normalizeKey(doppelKey.pubkey));
-    if (isDuplicate) {
-      removed = true;
-    }
-    return !isDuplicate;
-  });
+  // const filteredKeys = stakingStore.doppelgangerKeys.filter(
+  //   (doppelKey) => !normalizedKeysSet.has(normalizeKey(doppelKey.pubkey))
+  // );
 
-  if (removed) {
-    stakingStore.doppelgangerKeys = filteredDoppelgangerKeys;
-  }
+  // if (filteredKeys.length !== stakingStore.doppelgangerKeys.length) {
+  //   stakingStore.doppelgangerKeys = filteredKeys;
+  // }
 
-  return removed;
-};
+  stakingStore.doppelgangerKeys = stakingStore.doppelgangerKeys.filter((item) => !normalizedKeysSet.has(item.pubkey));
+}
 
-const listKeys = async () => {
-  await useListKeys(stakingStore.forceRefresh);
-};
+watch(
+  () => stakingStore.keys,
+  async () => {
+    removeDuplicatedDoppelgangerKeys();
+  },
+  { deep: true }
+);
 
-const isKeyInGroup = (key) => {
+function isKeyInGroup(key) {
   return stakingStore.validatorKeyGroups.some((group) => group.keys.some((groupKey) => groupKey.key === key.key));
-};
+}
+function shouldShowKeys(key) {
+  return !isKeyInGroup(key) && !stakingStore.isPreviewListActive && stakingStore.keys?.length > 0 && !stakingStore.isSkeletonActive;
+}
 
-const onDrop = (event) => {
-  if (!isDropZoneDisabled.value) {
-    stakingStore.isOverDropZone = false;
-  }
-  if (isDropZoneActive.value) {
-    emit("onDrop", event);
+function onDragOver() {
+  if (!stakingStore.isSkeletonActive) {
+    stakingStore.isOverDropZone = true;
   }
-};
-
-const deletePreview = (item) => {
-  emit("deletePreview", item);
-};
-
-const removeSingle = (item) => {
-  emit("removeSingle", item);
-};
-
-const renameSingle = (item) => {
-  emit("renameSingle", item);
-};
-
-const openGroup = (item) => {
-  emit("openGroup", item);
-};
+}
 
-const renameGroup = (item) => {
-  emit("renameGroup", item);
-};
+function onDragLeave() {
+  stakingStore.isOverDropZone = false;
+}
 
-const withdrawGroup = (item) => {
-  emit("withdrawGroup", item);
-};
+function onDrop(event) {
+  stakingStore.isOverDropZone = false;
+  emit("onDrop", event);
+}
 </script>
 
 <style scoped>
@@ -338,6 +240,7 @@ const withdrawGroup = (item) => {
 .fade-leave-to {
   opacity: 0;
 }
+
 ::-webkit-scrollbar {
   width: 10px;
   height: 5px;
diff --git a/launcher/src/components/UI/staking-page/components/list/ListPanels.vue b/launcher/src/components/UI/staking-page/components/list/ListPanels.vue
index 2bd20c62a..2b5fb2fcd 100644
--- a/launcher/src/components/UI/staking-page/components/list/ListPanels.vue
+++ b/launcher/src/components/UI/staking-page/components/list/ListPanels.vue
@@ -2,7 +2,7 @@
   <div
     class="w-full h-full min-h-9 col-start-1 col-span-full row-start-12 row-span-1 grid grid-cols-12 items-center border border-gray-600 rounded-b-md bg-[#151618] px-1 pr-0"
   >
-    <div class="w-full h-full col-start-1 col-end-4 grid grid-cols-3 py-1">
+    <div class="w-full h-full col-start-1 col-end-3 grid grid-cols-3 py-1">
       <div
         class="w-2/3 h-full col-start-1 col-span-1 flex justify-center items-center rounded-sm bg-[#336666] hover:bg-[#234545] transition-all duration-100 cursor-pointer px-1 active:scale-95"
         :class="stakingStore.isPreviewListActive || stakingStore.isStakingDisabled ? 'opacity-50 pointer-events-none ' : ''"
@@ -28,6 +28,7 @@
           @mouseleave="footerStore.cursorLocation = ''"
         />
       </div>
+
       <div
         class="w-2/3 h-full col-start-2 col-span-1 flex justify-center items-center rounded-sm bg-[#336666] hover:bg-[#234545] transition-all duration-100 cursor-pointer active:scale-95 px-1"
         :class="
@@ -35,18 +36,6 @@
             ? 'opacity-50 pointer-events-none '
             : ''
         "
-        @mouseenter="footerStore.cursorLocation = `${openSrch}`"
-        @mouseleave="footerStore.cursorLocation = ''"
-      >
-        <img class="h-6" src="/img/icon/staking-page-icons/filter.png" alt="Insert Icon" @click="searchPanel" @mousedown.prevent />
-      </div>
-      <div
-        class="w-2/3 h-full col-start-3 col-span-1 flex justify-center items-center rounded-sm bg-[#336666] hover:bg-[#234545] transition-all duration-100 cursor-pointer active:scale-95 px-1"
-        :class="
-          stakingStore.isGroupListActive || stakingStore.isPreviewListActive || stakingStore.isStakingDisabled
-            ? 'opacity-50 pointer-events-none '
-            : ''
-        "
         @mouseenter="footerStore.cursorLocation = `${nameNumber}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
@@ -54,7 +43,7 @@
       </div>
     </div>
 
-    <div class="w-full h-full col-start-4 col-end-13 grid grid-cols-12 items-center self-center px-1 relative">
+    <div class="w-full h-full col-start-3 col-end-13 grid grid-cols-12 items-center self-center px-1 relative">
       <component :is="activePanel.component" v-bind="activePanel.props" v-on="activePanel.events" />
     </div>
   </div>
@@ -73,7 +62,6 @@ const stakingStore = useStakingStore();
 
 const crteGrp = t("displayValidator.crteGrp");
 const removGrp = t("displayValidator.removGrp");
-const openSrch = t("displayValidator.openSrch");
 const showValKey = t("displayValidator.showValKey");
 const showKeyNam = t("displayValidator.showKeyNam");
 
@@ -180,14 +168,4 @@ const removeGroup = () => {
     emit("removeGroup", stakingStore.currentGroup);
   }
 };
-
-const searchPanel = () => {
-  stakingStore.isPreviewListActive = false;
-  if (stakingStore.activePanel === "search") {
-    stakingStore.setActivePanel(null);
-    stakingStore.searchContent = "";
-  } else {
-    stakingStore.setActivePanel("search");
-  }
-};
 </script>
diff --git a/launcher/src/components/UI/staking-page/components/list/panels/PasswordPanel.vue b/launcher/src/components/UI/staking-page/components/list/panels/PasswordPanel.vue
index e5b419e5d..276e7fcab 100644
--- a/launcher/src/components/UI/staking-page/components/list/panels/PasswordPanel.vue
+++ b/launcher/src/components/UI/staking-page/components/list/panels/PasswordPanel.vue
@@ -1,6 +1,10 @@
 <template>
   <div
     class="animate__animated animate__fadeIn w-full h-full max-h-[32px] col-start-1 col-span-full bg-[#3e4347] rounded-sm grid grid-cols-12 items-center cursor-pointer shadow-md shadow-gray-800 border border-gray-600"
+    :class="{ 'border-blue-500': isDragging, 'border-gray-600': !isDragging }"
+    @dragover.prevent="onDragOver"
+    @dragleave.prevent="onDragLeave"
+    @drop.prevent="onDrop"
   >
     <div class="w-full h-full col-start-1 col-end-11 relative flex justify-start items-center">
       <button class="absolute right-2 focus:outline-none rtl:left-0 rtl:right-auto" @click="togglePasswordVisibility">
@@ -9,9 +13,9 @@
       </button>
 
       <input
-        v-model="eneteredPassword"
+        v-model="enteredPassword"
         :type="isPasswordVisible ? 'text' : 'password'"
-        placeholder="Enter password"
+        placeholder="Enter password or drop a file"
         class="w-full max-h-[28px] text-gray-400 placeholder-gray-400/70 rounded-sm items-center py-1 pl-4 bg-[#171D22]"
       />
     </div>
@@ -41,17 +45,18 @@ import { onMounted, onUnmounted, ref } from "vue";
 const emit = defineEmits(["confirmPassword"]);
 
 const stakingStore = useStakingStore();
-let eneteredPassword = ref("");
+let enteredPassword = ref("");
 let isPasswordVisible = ref(false);
+let isDragging = ref(false);
 
-//Methods
+// Methods
 
 const togglePasswordVisibility = () => {
   isPasswordVisible.value = !isPasswordVisible.value;
 };
 
 const cancelPassword = () => {
-  eneteredPassword.value = "";
+  enteredPassword.value = "";
   stakingStore.isPreviewListActive = false;
   stakingStore.setActivePanel(null);
   stakingStore.previewKeys = [];
@@ -59,16 +64,42 @@ const cancelPassword = () => {
 };
 
 const confirmPassword = () => {
-  emit("confirmPassword", eneteredPassword.value.trim());
-  eneteredPassword.value = "";
+  emit("confirmPassword", enteredPassword.value.trim());
+  enteredPassword.value = "";
   isPasswordVisible.value = false;
 };
 
+const onDragOver = () => {
+  isDragging.value = true;
+};
+
+const onDragLeave = () => {
+  isDragging.value = false;
+};
+
+const onDrop = (event) => {
+  isDragging.value = false;
+  const files = event.dataTransfer.files;
+  if (files.length > 0) {
+    const file = files[0];
+    if (file.type === "text/plain") {
+      const reader = new FileReader();
+      reader.onload = () => {
+        enteredPassword.value = reader.result.trim();
+        console.log("Password from file:", enteredPassword.value);
+      };
+      reader.readAsText(file);
+    } else {
+      alert("Only plain text files are allowed!");
+    }
+  }
+};
+
 onMounted(() => {
-  eneteredPassword.value = "";
+  enteredPassword.value = "";
 });
 
 onUnmounted(() => {
-  eneteredPassword.value = "";
+  enteredPassword.value = "";
 });
 </script>
diff --git a/launcher/src/components/UI/staking-page/components/list/panels/ValidatorPanel.vue b/launcher/src/components/UI/staking-page/components/list/panels/ValidatorPanel.vue
index d734f3564..432ba4f88 100644
--- a/launcher/src/components/UI/staking-page/components/list/panels/ValidatorPanel.vue
+++ b/launcher/src/components/UI/staking-page/components/list/panels/ValidatorPanel.vue
@@ -2,16 +2,16 @@
   <div
     class="animate__animated animate__fadeIn w-full h-full max-h-[32px] col-start-1 col-span-full bg-[#3e4347] rounded-sm flex justify-center items-center cursor-pointer p-1"
   >
-    <div class="w-full h-full grid grid-cols-4 bg-[#171D22]">
+    <div class="w-full h-full grid grid-cols-7 bg-[#171D22]">
       <div
         v-for="service in runningValidators"
         :key="service.config?.serviceID"
-        class="col-span-1 colst w-24 h-full flex justify-start items-center hover:bg-slate-300 rounded-sm space-x-1 cursor-pointer transition-all duration-150 px-1"
+        class="col-span-1 w-22 h-full flex justify-start items-center hover:bg-slate-300 rounded-sm space-x-1 cursor-pointer transition-all duration-150 px-1 border border-gray-700"
         :class="getBgColor(service.setupId)?.background"
         @click="pickValidator(service)"
       >
-        <img class="w-5 h-5" :src="service.icon" alt="Service Icon" @mousedown.prevent />
-        <span class="text-[10px] font-semibold hover:text-black transition-all duration-150" :class="getBgColor(service.setupId)?.text">{{
+        <img class="w-4 h-4" :src="service.icon" alt="Service Icon" @mousedown.prevent />
+        <span class="text-[9px] font-medium hover:text-black transition-all duration-150" :class="getBgColor(service.setupId)?.text">{{
           service.name
         }}</span>
       </div>
diff --git a/launcher/src/components/UI/staking-page/components/list/rows/DoppelGCheckRow.vue b/launcher/src/components/UI/staking-page/components/list/rows/DoppelGCheckRow.vue
index 3b35af33a..122bce2c7 100644
--- a/launcher/src/components/UI/staking-page/components/list/rows/DoppelGCheckRow.vue
+++ b/launcher/src/components/UI/staking-page/components/list/rows/DoppelGCheckRow.vue
@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, ref, onMounted, watchEffect } from 'vue';
 <template>
   <div
     class="w-full h-8 rounded-full grid grid-cols-24 items-center p-1 cursor-pointer animate__animated animate animate__slideInLeft bg-gray-400"
@@ -18,19 +18,24 @@ import { computed } from 'vue';
 
     <div class="w-full h-full col-start-18 col-span-full flex justify-center items-center">
       <span class="w-full bg-[#1d1e1f] rounded-full px-4 py-[3px] text-xs font-semibold text-red-400 text-center">
-        Doppelganger Protection
+        {{ displayText }}
       </span>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref, onMounted, watchEffect, onUnmounted } from "vue";
 import { useFooter } from "@/store/theFooter";
+import { useListKeys } from "@/composables/validators";
+import { useTruncate } from "@/composables/utils";
+import { useStakingStore } from "@/store/theStaking";
 
 const footerStore = useFooter();
+const stakingStore = useStakingStore();
+const displayText = ref("Doppelganger Protection");
+const isProtectionActive = ref(false);
 
-import { useTruncate } from "@/composables/utils";
 const props = defineProps({
   item: {
     type: Object,
@@ -41,6 +46,40 @@ const props = defineProps({
 const formattedPubKey = computed(() => {
   return useTruncate(props.item.pubkey, 20, 20);
 });
+
+const warningText = () => {
+  setTimeout(() => {
+    displayText.value = "Waiting for response";
+  }, 900000);
+  setTimeout(() => {
+    displayText.value = "No response";
+    stakingStore.doppelgangerKeys = [];
+  }, 1800000);
+};
+
+watchEffect(() => {
+  if (isProtectionActive.value) {
+    warningText();
+  }
+});
+
+let fetchInterval = null;
+
+const fetchKeysWhileDplProtection = async () => {
+  if (stakingStore.doppelgangerKeys.length > 0) {
+    await useListKeys(true);
+  }
+};
+
+onMounted(() => {
+  isProtectionActive.value = true;
+  fetchKeysWhileDplProtection();
+  fetchInterval = setInterval(fetchKeysWhileDplProtection, 30000);
+});
+
+onUnmounted(() => {
+  if (fetchInterval) clearInterval(fetchInterval);
+});
 </script>
 
 <style scoped>
diff --git a/launcher/src/components/UI/staking-page/components/list/rows/KeyRow.vue b/launcher/src/components/UI/staking-page/components/list/rows/KeyRow.vue
index 42e525d1f..013ddfed6 100644
--- a/launcher/src/components/UI/staking-page/components/list/rows/KeyRow.vue
+++ b/launcher/src/components/UI/staking-page/components/list/rows/KeyRow.vue
@@ -2,18 +2,17 @@ import { computed } from 'vue';
 <template>
   <div
     class="w-full h-8 rounded-full grid grid-cols-24 items-center p-1 cursor-pointer animate__animated animate__slideInLeft animate__delay-0.5s mt-1"
-    :class="[props.item?.selected ? 'bg-blue-400 ' : 'bg-gray-700 ', props.item?.showExitText ? 'bg-red-500 z-10' : '']"
+    :class="[props.item?.selected ? 'bg-blue-400 ' : getKeyStyleBySetupColor, props.item?.showExitText ? 'bg-red-500 z-10' : '']"
     @click="selectKey(props.item)"
   >
     <div class="col-start-1 col-span-2 self-center overflow-hidden flex justify-start items-center space-x-2">
       <div
         class="w-6 h-6 rounded-full cursor-pointer p-[2px]"
-        :class="setupStore.getBGColor(props.item?.color)"
-        @mouseenter="footerStore.cursorLocation = `${props.item.isRemote ? rm : pk}`"
+        @mouseenter="footerStore.cursorLocation = `${props.item?.isRemote ? rm : pk}`"
         @mouseleave="footerStore.cursorLocation = ''"
       >
         <img
-          v-if="props.item.isRemote"
+          v-if="props.item?.isRemote"
           class="w-full h-full"
           src="/img/icon/staking-page-icons/remote-key-icon.svg"
           alt="Key Icon"
@@ -43,13 +42,21 @@ import { computed } from 'vue';
     </div>
 
     <div
+      v-if="stakingStore.isRenameKeyActive"
+      class="col-start-3 col-end-8 self-center overflow-hidden flex justify-start items-center text-[10px]"
+      @mouseenter="footerStore.cursorLocation = `${props.item.key}`"
+      @mouseleave="footerStore.cursorLocation = ''"
+    >
+      <svg class="animate-spin h-3 w-3 border rounded-full border-t-transparent border-r-transparent mr-2" viewBox="0 0 24 24"></svg>
+      Processing...
+    </div>
+    <div
+      v-else
       class="col-start-3 col-end-8 self-center overflow-hidden flex justify-start items-center"
       @mouseenter="footerStore.cursorLocation = `${props.item.key}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <span class="text-center font-semibold text-[10px]" :class="props.item?.selected ? 'text-gray-800' : 'text-gray-300'">{{
-        displayText
-      }}</span>
+      <span class="text-center font-semibold text-[10px]" :class="props.item?.selected ? 'text-gray-800' : ''">{{ displayText }}</span>
     </div>
 
     <img
@@ -62,8 +69,8 @@ import { computed } from 'vue';
     />
 
     <span
-      class="col-start-9 col-end-12 self-center text-center text-[10px] text-gray-300 overflow-hidden"
-      :class="props.item.selected ? 'text-gray-800' : 'text-gray-300'"
+      class="col-start-9 col-end-12 self-center text-center text-[10px] overflow-hidden"
+      :class="props.item?.selected ? 'text-gray-800' : ''"
       :style="{ color: getStatusColor }"
       @mouseenter="
         footerStore.cursorLocation = `${t('displayValidator.activeExpl', {
@@ -83,8 +90,8 @@ import { computed } from 'vue';
     </div>
 
     <span
-      class="col-start-14 col-end-17 self-center text-center text-[10px] text-gray-300 overflow-hidden"
-      :class="props.item.selected ? 'text-gray-800' : 'text-gray-300'"
+      class="col-start-14 col-end-17 self-center text-center text-[10px] overflow-hidden"
+      :class="props.item?.selected ? 'text-gray-800' : ''"
       @mouseenter="footerStore.cursorLocation = `${balExpl}`"
       @mouseleave="footerStore.cursorLocation = ''"
       >{{ props.item.balance }}</span
@@ -92,7 +99,7 @@ import { computed } from 'vue';
 
     <div class="h-full col-start-17 col-span-full bg-[#151618] rounded-full grid grid-cols-6 items-center" @mousedown.prevent>
       <div
-        v-if="getValidatorClients.service !== 'LCOMService'"
+        v-if="getValidatorClients?.service !== 'LCOMService'"
         class="col-span-1 w-full h-full rounded-md justify-self-center flex justify-center items-center"
         @mouseenter="footerStore.cursorLocation = `Beaconcha.in`"
         @mouseleave="footerStore.cursorLocation = ''"
@@ -102,7 +109,7 @@ import { computed } from 'vue';
           src="/img/icon/staking-page-icons/beaconcha.png"
           alt="Icon"
           @mousedown.prevent
-          @click="navToBeaconcha(props.item.network)"
+          @click="navToBeaconcha(props.item?.network)"
         />
       </div>
       <div
@@ -133,9 +140,9 @@ import { computed } from 'vue';
       </div>
       <div
         v-if="
-          getValidatorClients.service !== 'CharonService' &&
-          getValidatorClients.service !== 'SSVNetworkService' &&
-          getValidatorClients.service !== 'LCOMService'
+          getValidatorClients?.service !== 'CharonService' &&
+          getValidatorClients?.service !== 'SSVNetworkService' &&
+          getValidatorClients?.service !== 'LCOMService'
         "
         class="col-start-4 col-span-1 w-full h-full rounded-md justify-self-center flex justify-center items-center"
         @mouseenter="footerStore.cursorLocation = `${setFee}`"
@@ -151,9 +158,9 @@ import { computed } from 'vue';
       </div>
       <div
         v-if="
-          getValidatorClients.service !== 'LCOMService' &&
-          getValidatorClients.service !== 'CharonService' &&
-          getValidatorClients.service !== 'SSVNetworkService'
+          getValidatorClients?.service !== 'LCOMService' &&
+          getValidatorClients?.service !== 'CharonService' &&
+          getValidatorClients?.service !== 'SSVNetworkService'
         "
         class="col-span-1 w-full h-full rounded-md justify-self-center flex justify-center items-center"
         @mouseenter="footerStore.cursorLocation = `${removVal}`"
@@ -169,9 +176,9 @@ import { computed } from 'vue';
       </div>
       <div
         v-if="
-          getValidatorClients.service !== 'CharonService' &&
-          getValidatorClients.service !== 'SSVNetworkService' &&
-          getValidatorClients.service !== 'LCOMService'
+          getValidatorClients?.service !== 'CharonService' &&
+          getValidatorClients?.service !== 'SSVNetworkService' &&
+          getValidatorClients?.service !== 'LCOMService'
         "
         class="col-start-6 col-span-1 w-full h-full rounded-md justify-self-center flex justify-center items-center"
         @mouseenter="footerStore.cursorLocation = `${exitChain}`"
@@ -344,10 +351,16 @@ const displayText = computed(() => {
 const getValidatorClients = computed(() => {
   const clients = serviceStore.installedServices
     .filter((service) => service.category === "validator")
-    .find((service) => service.config.serviceID === props.item.validatorID);
+    .find((service) => service.config?.serviceID === props.item.validatorID);
   return clients;
 });
 
+const getKeyStyleBySetupColor = computed(() => {
+  return (
+    setupStore.getBGColor(getValidatorClients.value?.setupColor) + " " + setupStore.getTextColor(getValidatorClients.value?.setupColor)
+  );
+});
+
 const checkValidatorKeyType = computed(() => {
   const { item } = props;
   if (!item?.dvt) return null;
diff --git a/launcher/src/components/UI/staking-page/components/management/ClientCommands.vue b/launcher/src/components/UI/staking-page/components/management/ClientCommands.vue
index 1eef3f059..16725de5b 100644
--- a/launcher/src/components/UI/staking-page/components/management/ClientCommands.vue
+++ b/launcher/src/components/UI/staking-page/components/management/ClientCommands.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="col-start-1 col-span-full row-start-5 row-end-10 flex justify-center items-center overflow-hidden">
-    <div class="w-full h-full border border-gray-600 rounded-b-md grid grid-cols-12 grid-rows-6 items-center bg-[#151618]">
+    <div class="w-full h-full border border-gray-600 rounded-b-md grid grid-cols-12 grid-rows-6 items-center bg-[#232426]">
       <ValidatorState />
       <ButtonBox @graffiti-panel="graffitiPanel" @import-remote="importRemote" @withdraw-multiple="withdrawMultiple" />
     </div>
diff --git a/launcher/src/components/UI/staking-page/components/management/EpochDuty.vue b/launcher/src/components/UI/staking-page/components/management/EpochDuty.vue
index 62a97f0d6..ff00e1145 100644
--- a/launcher/src/components/UI/staking-page/components/management/EpochDuty.vue
+++ b/launcher/src/components/UI/staking-page/components/management/EpochDuty.vue
@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 <template>
   <div class="col-start-1 col-span-full row-start-10 row-span-full flex justify-center items-center">
-    <div class="w-full h-full border border-gray-600 rounded-md grid grid-cols-12 grid-rows-4 items-center bg-[#151618]">
+    <div class="w-full h-full border border-gray-600 rounded-md grid grid-cols-12 grid-rows-4 items-center bg-[#232426]">
       <DutyHeader />
       <DutyBody :epoch="epoch" />
       <DutyFooter :client="{ name: stakingStore.selectedServiceToFilter?.name }" />
diff --git a/launcher/src/components/UI/staking-page/components/management/ValidatorRewards.vue b/launcher/src/components/UI/staking-page/components/management/ValidatorRewards.vue
index f9219eacf..a435f50ce 100644
--- a/launcher/src/components/UI/staking-page/components/management/ValidatorRewards.vue
+++ b/launcher/src/components/UI/staking-page/components/management/ValidatorRewards.vue
@@ -1,15 +1,18 @@
 <template>
   <div
-    class="max-h-[165px] col-start-1 col-span-full row-start-1 row-end-5 grid grid-cols-6 space-y-1"
+    class="max-h-[165px] col-start-1 col-span-full row-start-1 row-end-5 grid grid-cols-6 justify-normal items-center bg-[#232426] space-y-[2px]"
     :class="
       stakingStore?.selectedServiceToFilter?.service === 'CharonService' ||
       stakingStore?.selectedServiceToFilter?.service === 'SSVNetworkService'
-        ? 'grid-rows-5'
-        : 'grid-rows-4'
+        ? 'grid-rows-8'
+        : 'grid-rows-7'
     "
     @mousedown.prevent
   >
+    <SelectedValidator />
     <EpochSlot />
+    <TotalKeys />
+    <TotalBalance />
     <StatusInfoRow
       v-if="
         stakingStore.selectedServiceToFilter?.service === 'CharonService' ||
@@ -65,6 +68,9 @@ import ParticipationRow from "./components/val-rewards/ParticipationRow.vue";
 import PerformanceRow from "./components/val-rewards/PerformanceRow.vue";
 import StatusInfoRow from "./components/val-rewards/StatusInfoRow.vue";
 import { useObolStats, useSSVStats } from "../../../../../composables/validators";
+import TotalBalance from "./components/val-rewards/TotalBalance.vue";
+import TotalKeys from "./components/val-rewards/TotalKeys.vue";
+import SelectedValidator from "./components/val-rewards/SelectedValidator.vue";
 
 const stakingStore = useStakingStore();
 const pollingInterval = ref(null);
diff --git a/launcher/src/components/UI/staking-page/components/management/components/client-commands/ButtonRow.vue b/launcher/src/components/UI/staking-page/components/management/components/client-commands/ButtonRow.vue
index 5fda3aafb..46049835d 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/client-commands/ButtonRow.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/client-commands/ButtonRow.vue
@@ -35,9 +35,11 @@ const displayButtonByCondition = computed(() => {
   const isImportRemoteButton = props.button.text === "Import Remote Keys";
 
   //Imported keys for selected validator service
-  const matchingKeyForService = stakingStore.keys.some((key) => key.validatorID === stakingStore.selectedServiceToFilter?.config.serviceID);
+  const matchingKeyForService = stakingStore.keys.some(
+    (key) => key.validatorID === stakingStore.selectedServiceToFilter?.config?.serviceID
+  );
 
-  if (isImportRemoteButton && stakingStore.isStakingDisabled) {
+  if ((isImportRemoteButton && stakingStore.isStakingDisabled) || (isImportRemoteButton && !isValidatorFilterRunning)) {
     return true;
   }
 
diff --git a/launcher/src/components/UI/staking-page/components/management/components/client-commands/ValidatorState.vue b/launcher/src/components/UI/staking-page/components/management/components/client-commands/ValidatorState.vue
index 246e44c5d..4a8c14e38 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/client-commands/ValidatorState.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/client-commands/ValidatorState.vue
@@ -53,10 +53,10 @@
 </template>
 
 <script setup>
-import { computed, watch } from "vue";
-import { useStakingStore } from "@/store/theStaking";
-import { useFooter } from "@/store/theFooter";
 import i18n from "@/includes/i18n";
+import { useFooter } from "@/store/theFooter";
+import { useStakingStore } from "@/store/theStaking";
+import { computed, watch } from "vue";
 
 const t = i18n.global.t;
 
@@ -68,33 +68,35 @@ const numValidator = t("displayValidator.numValidator");
 
 const stakingStore = useStakingStore();
 
-const getServiceState = computed(() => {
-  return stakingStore.selectedServiceToFilter?.state ?? null;
-});
-
 const getServiceIcon = computed(() => {
   return stakingStore.selectedServiceToFilter?.icon ?? null;
 });
 
+const getServiceState = computed(() => {
+  let state;
+  if (stakingStore.selectedServiceToFilter?.state === "running") {
+    state = "online";
+  } else {
+    state = "offline";
+  }
+  return state;
+});
+
 const getTextColor = computed(() => {
-  if (getServiceState.value === "running") {
+  if (getServiceState.value === "online") {
     return "text-green-500";
-  } else if (getServiceState.value === "off") {
+  } else if (getServiceState.value === "offline") {
     return "text-red-500";
-  } else if (getServiceState.value === "restarting") {
-    return "text-amber-400";
   }
 
   return "text-gray-500";
 });
 
 const getStateColor = computed(() => {
-  if (getServiceState.value === "running") {
+  if (getServiceState.value === "online") {
     return "bg-green-400";
-  } else if (getServiceState.value === "off") {
+  } else if (getServiceState.value === "offline") {
     return "bg-red-500";
-  } else if (getServiceState.value === "restarting") {
-    return "bg-amber-400";
   }
 
   return "bg-gray-500";
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/AttestationReward.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/AttestationReward.vue
index 50777c333..5545df1ba 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/AttestationReward.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/AttestationReward.vue
@@ -1,14 +1,14 @@
 <template>
   <div
-    class="w-full h-full max-h-8 col-start-1 col-span-full row-span-1 border border-gray-500 rounded-full grid grid-cols-6 bg-[#313539] items-center p-[1px]"
+    class="w-full h-full max-h-5 col-start-1 col-span-full row-start-5 row-span-1 grid grid-cols-6 items-center p-[1px]"
     @mouseenter="footerStore.cursorLocation = `${attestReward}`"
     @mouseleave="footerStore.cursorLocation = ''"
   >
     <div class="h-full col-start-1 col-end-3 self-center grid grid-cols-3 justify-center items-center gap-1 px-[2px]">
-      <img class="col-start-1 col-span-1 w-4 h-4" src="/img/icon/staking-page-icons/eye.png" alt="Block Icon" @mousedown.prevent />
-      <span class="col-start-2 col-span-full text-[9px] text-amber-300 font-semibold">{{ $t("stakingPage.reward") }}</span>
+      <img class="col-start-1 col-span-1 w-3 h-3" src="/img/icon/staking-page-icons/eye.png" alt="Block Icon" @mousedown.prevent />
+      <span class="col-start-2 col-span-full text-[8px] text-amber-300 font-normal font-sans">{{ $t("stakingPage.reward") }}</span>
     </div>
-    <div class="w-full h-full col-start-3 col-span-full rounded-r-full self-center flex justify-center items-center bg-[#151618] px-1">
+    <div class="w-full h-full col-start-3 col-span-full rounded-full self-center flex justify-center items-center bg-black px-1">
       <span class="text-2xs text-gray-300 font-semibold">{{ totalRewards }}</span>
     </div>
   </div>
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/BlockReward.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/BlockReward.vue
index 885f9ea5e..dd60c20d6 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/BlockReward.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/BlockReward.vue
@@ -1,14 +1,14 @@
 <template>
   <div
-    class="w-full h-full max-h-8 col-start-1 col-span-full row-span-1 border border-gray-500 rounded-full grid grid-cols-6 bg-[#313539] items-center p-[1px]"
+    class="w-full h-full max-h-5 col-start-1 col-span-full row-start-7 row-span-1 grid grid-cols-6 items-center p-[1px]"
     @mouseenter="footerStore.cursorLocation = `${blockProdreward}`"
     @mouseleave="footerStore.cursorLocation = ''"
   >
     <div class="h-full col-start-1 col-end-3 self-center grid grid-cols-3 justify-center items-center gap-1 px-[2px]">
-      <img class="col-start-1 col-span-1 w-4 h-4" src="/img/icon/staking-page-icons/cube.png" alt="Block Icon" @mousedown.prevent />
-      <span class="col-start-2 col-span-full text-[9px] text-amber-300 font-semibold">{{ $t("stakingPage.reward") }}</span>
+      <img class="col-start-1 col-span-1 w-3 h-3" src="/img/icon/staking-page-icons/cube.png" alt="Block Icon" @mousedown.prevent />
+      <span class="col-start-2 col-span-full text-[8px] text-amber-300 font-normal font-sans">{{ $t("stakingPage.reward") }}</span>
     </div>
-    <div class="w-full h-full col-start-3 col-span-full rounded-r-full self-center flex justify-center items-center bg-[#151618] px-1">
+    <div class="w-full h-full col-start-3 col-span-full rounded-full self-center flex justify-center items-center bg-black px-1">
       <span class="text-2xs text-gray-300 font-semibold">{{ totalRewards }}</span>
     </div>
   </div>
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/CommitteeReward.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/CommitteeReward.vue
index 6dc1098e3..3284a3cc0 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/CommitteeReward.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/CommitteeReward.vue
@@ -1,19 +1,19 @@
 <template>
   <div
-    class="w-full h-full max-h-8 col-start-1 col-span-full row-span-1 border border-gray-500 rounded-full grid grid-cols-6 bg-[#313539] items-center p-[1px]"
+    class="w-full h-full max-h-5 col-start-1 col-span-full row-start-6 row-span-1 grid grid-cols-6 items-center p-[1px]"
     @mouseenter="footerStore.cursorLocation = `${syncCommitteeReward}`"
     @mouseleave="footerStore.cursorLocation = ''"
   >
     <div class="h-full col-start-1 col-end-3 self-center grid grid-cols-3 justify-center items-center gap-1 px-[2px]">
       <img
-        class="col-start-1 col-span-1 w-4 h-4"
+        class="col-start-1 col-span-1 w-3 h-3"
         src="/img/icon/staking-page-icons/sync-committee.png"
         alt="Block Icon"
         @mousedown.prevent
       />
-      <span class="col-start-2 col-span-full text-[9px] text-amber-300 font-semibold">{{ $t("stakingPage.reward") }}</span>
+      <span class="col-start-2 col-span-full text-[8px] text-amber-300 font-normal font-sans">{{ $t("stakingPage.reward") }}</span>
     </div>
-    <div class="w-full h-full col-start-3 col-span-full rounded-r-full self-center flex justify-center items-center bg-[#151618] px-1">
+    <div class="w-full h-full col-start-3 col-span-full rounded-full self-center flex justify-center items-center bg-black px-1">
       <span class="text-2xs text-gray-300 font-semibold">{{ totalRewards }}</span>
     </div>
   </div>
@@ -43,11 +43,11 @@ watchEffect(() => {
         if (stakingStore.currentSlot % stakingStore.slotsPerEpoch == 0) totalRewards.value = 0;
         lastSlotChecked.value = stakingStore.currentSlot;
         ControlService.getSyncCommitteeRewards(
-          stakingStore.keys.map((k) => k.index).filter((k) => k),
+          stakingStore.keys?.map((k) => k.index).filter((k) => k),
           lastSlotChecked.value
         ).then((data) => {
-          data.forEach((element) => {
-            totalRewards.value += parseInt(element.reward);
+          data?.forEach((element) => {
+            totalRewards.value += parseInt(element?.reward);
           });
         });
       }
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/EpochSlot.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/EpochSlot.vue
index defe15c8d..1c4f98fe4 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/EpochSlot.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/EpochSlot.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="max-h-9 col-start-1 col-span-full row-span-1 border border-gray-500 rounded-md grid grid-cols-7 items-center bg-[#334B3F]">
+  <div class="h-full col-start-1 col-span-full row-start-2 row-span-1 grid grid-cols-7 items-center bg-[#334B3F]">
     <div
       class="col-start-1 col-end-4 flex justify-between items-center px-1 space-x-1"
       @mouseenter="footerStore.cursorLocation = `epoch: ${stakingStore.currentEpoch}`"
@@ -9,9 +9,7 @@
 
       <span class="w-1/2 text-[10px] text-amber-300 font-semibold text-center"> {{ stakingStore.currentEpoch }}</span>
     </div>
-    <div
-      class="w-full h-full col-start-4 col-span-full bg-[#151618] rounded-r-md overflow-hidden grid grid-cols-3 divide-x divide-gray-600"
-    >
+    <div class="w-full h-full col-start-4 col-span-full bg-black overflow-hidden grid grid-cols-3 divide-x divide-gray-600">
       <span
         class="col-start-1 col-span-1 text-[8px] text-amber-300 font-semibold self-center text-center overflow-hidden"
         @mouseenter="footerStore.cursorLocation = `slot index`"
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/IsPrivate.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/IsPrivate.vue
index f4a4da247..73c2edb3e 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/IsPrivate.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/IsPrivate.vue
@@ -1,12 +1,10 @@
 <template>
-  <div
-    class="w-full h-full max-h-7 col-start-1 col-span-full row-span-1 border border-gray-600 rounded-full grid grid-cols-6 bg-[#2a2c30] items-center p-[1px]"
-  >
+  <div class="w-full h-full max-h-5 col-start-1 col-span-full row-span-1 grid grid-cols-6 items-center px-[1px]">
     <div class="h-full col-start-1 col-end-4 self-center flex justify-start items-center px-2 rounded-l-full">
-      <span class="text-[10px] text-amber-300 font-normal font-sans text-left">IS PRIVATE</span>
+      <span class="text-[8px] text-amber-300 font-normal font-sans text-left">IS PRIVATE</span>
     </div>
-    <div class="w-full h-full col-start-4 col-span-full rounded-r-full self-center flex justify-center items-center bg-[#151618] px-1">
-      <span class="text-2xs font-semibold" :class="getStatusColor">{{ getPrivateText }}</span>
+    <div class="w-full col-start-4 col-span-full rounded-full self-center flex justify-center items-center bg-black h-full max-h-4 px-1">
+      <span class="text-[8px] font-normal" :class="getStatusColor">{{ getPrivateText }}</span>
     </div>
   </div>
 </template>
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/NodeStatus.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/NodeStatus.vue
index ac9e7ada7..a116f4143 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/NodeStatus.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/NodeStatus.vue
@@ -1,12 +1,10 @@
 <template>
-  <div
-    class="w-full h-full max-h-7 col-start-1 col-span-full row-span-1 border border-gray-600 rounded-full grid grid-cols-6 bg-[#2a2c30] items-center p-[1px]"
-  >
+  <div class="w-full h-full max-h-5 col-start-1 col-span-full row-span-1 grid grid-cols-6 items-center px-[1px]">
     <div class="h-full col-start-1 col-end-4 self-center flex justify-start items-center px-2 rounded-l-full">
-      <span class="text-[10px] text-amber-300 font-normal font-sans text-left">NODE STATUS</span>
+      <span class="text-[8px] text-amber-300 font-normal font-sans text-left">NODE STATUS</span>
     </div>
-    <div class="w-full h-full col-start-4 col-span-full rounded-r-full self-center flex justify-center items-center bg-[#151618] px-1">
-      <span class="text-2xs font-semibold" :class="getStatusColor">{{ getNodeStatus }}</span>
+    <div class="w-full col-start-4 col-span-full rounded-full self-center flex justify-center items-center bg-black h-full max-h-4 px-1">
+      <span class="text-[8px] font-semibold" :class="getStatusColor">{{ getNodeStatus }}</span>
     </div>
   </div>
 </template>
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/ParticipationRow.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/ParticipationRow.vue
index 2b2596669..59862e907 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/ParticipationRow.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/ParticipationRow.vue
@@ -1,12 +1,10 @@
 <template>
-  <div
-    class="w-full h-full max-h-7 col-start-1 col-span-full row-span-1 border border-gray-600 rounded-full grid grid-cols-6 bg-[#2a2c30] items-center p-[1px]"
-  >
+  <div class="w-full h-full max-h-5 col-start-1 col-span-full row-span-1 grid grid-cols-6 items-center px-[1px]">
     <div class="h-full col-start-1 col-end-4 self-center flex justify-start items-center px-2 rounded-l-full">
-      <span class="text-[10px] text-amber-300 font-normal font-sans text-left">PARTICIPATION</span>
+      <span class="text-[8px] text-amber-300 font-normal font-sans text-left">PARTICIPATION</span>
     </div>
-    <div class="w-full h-full col-start-4 col-span-full rounded-r-full self-center flex justify-center items-center bg-[#151618] px-1">
-      <span class="text-2xs text-gray-300 font-semibold">{{ getObolParticipation }}</span>
+    <div class="w-full bg-black h-full max-h-4 col-start-4 col-span-full rounded-full self-center flex justify-center items-center px-1">
+      <span class="text-[8px] text-gray-300 font-normal">{{ getObolParticipation }}</span>
     </div>
   </div>
 </template>
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/PerformanceRow.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/PerformanceRow.vue
index db301be80..34a9c3e2b 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/PerformanceRow.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/PerformanceRow.vue
@@ -1,27 +1,25 @@
 <template>
-  <div
-    class="w-full h-full max-h-7 col-start-1 col-span-full row-span-1 border border-gray-600 rounded-full grid grid-cols-6 bg-[#2a2c30] items-center p-[1px]"
-  >
+  <div class="w-full h-full max-h-5 col-start-1 col-span-full row-span-1 grid grid-cols-6 items-center px-[1px]">
     <div class="h-full col-start-1 col-end-4 self-center flex justify-start items-center px-2 rounded-l-full">
-      <span class="text-[10px] text-amber-300 font-normal font-sans text-left">PERFORMANCE</span>
+      <span class="text-[8px] text-amber-300 font-normal font-sans text-left">PERFORMANCE</span>
     </div>
-    <div class="w-full h-full col-start-4 col-span-full rounded-r-full self-center flex justify-center items-center bg-[#151618] px-1">
-      <span class="text-2xs text-gray-300 font-semibold">{{ getPerformance }}</span>
+    <div class="w-full col-start-4 col-span-full rounded-full self-center flex justify-center items-center bg-black h-full max-h-4 px-1">
+      <span class="text-[8px] text-gray-300 font-normal">{{ getPerformance }}</span>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
 import { useStakingStore } from "@/store/theStaking";
+import { computed } from "vue";
 
 const stakingStore = useStakingStore();
 
 const getPerformance = computed(() => {
   if (stakingStore.selectedServiceToFilter?.service === "SSVNetworkService") {
-    return stakingStore.ssvStats?.performance ? stakingStore.ssvStats?.performance + "%" : "N/A";
+    return stakingStore.ssvStats?.performance ? Math.floor(stakingStore.ssvStats?.performance) + "%" : "N/A";
   } else if (stakingStore.selectedServiceToFilter?.service === "CharonService") {
-    return stakingStore.obolStats?.attestationPerformance ? stakingStore.obolStats?.attestationPerformance.substring(0, 5) + "%" : "N/A";
+    return stakingStore.obolStats?.attestationPerformance ? Math.floor(stakingStore.obolStats?.attestationPerformance) + "%" : "N/A";
   }
   return "N/A";
 });
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/SelectedValidator.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/SelectedValidator.vue
new file mode 100644
index 000000000..bb28b909d
--- /dev/null
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/SelectedValidator.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="h-full col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-7 items-center"
+    :class="getBackgroundColor ?? 'bg-[#232426]'"
+  >
+    <div
+      v-if="stakingStore.selectedServiceToFilter"
+      class="col-start-1 col-end-4 flex justify-start items-center px-1 space-x-3"
+      @mouseenter="footerStore.cursorLocation = `Selected Client: ${stakingStore.selectedServiceToFilter?.service}`"
+      @mouseleave="footerStore.cursorLocation = ''"
+    >
+      <img :src="stakingStore.selectedServiceToFilter?.icon" alt="Client Icon" class="w-4 h-4" />
+
+      <span class="w-1/2 text-[10px] font-semibold text-center"> {{ stakingStore.selectedServiceToFilter?.service }}</span>
+    </div>
+    <div v-else class="w-10/12 h-5 col-start-1 col-span-full flex justify-center items-center p-1 space-x-3 mx-auto mb-1">
+      <div class="shrink-0 flex justify-center items-center">
+        <span class="w-4 h-4 rounded-full bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 skeleton-pulse"></span>
+      </div>
+      <div
+        class="w-full col-start-2 col-end-9 h-2 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 self-center overflow-hidden flex justify-center items-center rounded-xl skeleton-pulse"
+      ></div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useStakingStore } from "@/store/theStaking";
+const stakingStore = useStakingStore();
+import { useFooter } from "@/store/theFooter";
+import { useSetups } from "@/store/setups";
+import { computed } from "vue";
+
+const footerStore = useFooter();
+const setupStore = useSetups();
+
+const getBackgroundColor = computed(() => {
+  return (
+    setupStore.getBGColor(stakingStore.selectedServiceToFilter?.setupColor) +
+      " " +
+      setupStore.getTextColor(stakingStore.selectedServiceToFilter?.setupColor) ?? "bg-[#232426]"
+  );
+});
+</script>
+<style scoped>
+.skeleton-pulse {
+  background-size: 200% 100%;
+  animation: pulse 1.5s infinite linear;
+}
+
+@keyframes pulse {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+</style>
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/StatusInfoRow.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/StatusInfoRow.vue
index aefe90d7b..1f7e0a375 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/StatusInfoRow.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/StatusInfoRow.vue
@@ -1,22 +1,22 @@
 import { useStakingStore } from '@/store/theStaking';
 <template>
-  <div
-    class="max-h-9 col-start-1 col-span-full row-span-1 border border-gray-500 rounded-md grid grid-cols-12 justify-center items-center bg-[#363934] gap-x-1"
-  >
+  <div class="h-full max-h-5 col-start-1 col-span-full row-span-1 grid grid-cols-12 justify-center items-center gap-x-1">
     <span
       v-if="stakingStore.selectedServiceToFilter?.service === 'CharonService'"
-      class="col-start-1 col-end-4 text-[8px] text-gray-200 font-normal font-sans text-left pl-2"
+      class="col-start-1 col-end-5 text-[8px] text-gray-200 font-normal font-sans text-left pl-2"
       >Peer-Name</span
     >
     <span
       v-if="stakingStore.selectedServiceToFilter?.service === 'SSVNetworkService'"
-      class="col-start-1 col-span-2 text-[10px] text-amber-300 font-normal font-sans text-left pl-2"
+      class="col-start-1 col-span-2 text-[8px] text-amber-300 font-normal font-sans text-left pl-2"
       >ID:</span
     >
     <span
-      class="text-[10px] text-amber-300 font-normal font-sans text-left"
+      class="text-[8px] h-full max-h-4 text-amber-300 font-normal font-sans text-center bg-black rounded-full"
       :class="
-        stakingStore.selectedServiceToFilter?.service === 'SSVNetworkService' ? 'col-start-3 col-span-2' : 'col-start-4 col-span-full'
+        stakingStore.selectedServiceToFilter?.service === 'SSVNetworkService'
+          ? 'col-start-5 col-span-full pt-[2px]'
+          : 'col-start-5 col-span-full'
       "
     >
       {{ stakingStore.selectedServiceToFilter?.service === "SSVNetworkService" ? getSSVId : getObolPeerName }}
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/TotalBalance.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/TotalBalance.vue
index 5c0925dc1..27fa6bba7 100644
--- a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/TotalBalance.vue
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/TotalBalance.vue
@@ -1,22 +1,17 @@
 <template>
-  <div class="w-full h-full border border-gray-600 rounded-[4px] grid grid-cols-7 items-center">
-    <div
-      class="col-start-1 col-end-4 flex justify-between items-center px-1 space-x-1"
-      @mouseenter="footerStore.cursorLocation = `${ttlKeys}`"
-      @mouseleave="footerStore.cursorLocation = ''"
-    >
-      <div class="w-full flex justify-between items-center">
-        <img class="w-4 -rotate-90" src="/img/icon/staking-page-icons/keyIcon.png" alt="Key Icon" @mousedown.prevent />
-        <span class="w-full text-[12px] text-green-600 font-semibold text-center">{{ totalKeys }}</span>
-      </div>
-      <span class="w-1/3 text-[10px] text-amber-300 font-semibold text-center">{{ $t("stakingPage.ttl") }}</span>
+  <div
+    class="w-full max-h-5 col-start-1 col-span-full row-start-4 row-span-1 grid grid-cols-6 items-center p-[1px]"
+    @mouseenter="footerStore.cursorLocation = `${ttlBal}`"
+    @mouseleave="footerStore.cursorLocation = ''"
+  >
+    <div class="h-full col-start-1 col-end-3 self-center grid grid-cols-3 justify-center items-center gap-1 px-[2px]">
+      <img class="col-start-1 col-span-1 w-3 h-3" src="/img/icon/staking-page-icons/balance.png" alt="Block Icon" @mousedown.prevent />
+      <span class="col-start-2 col-span-full text-[10px] text-amber-300 font-normal font-sans">{{ $t("stakingPage.ttl") }}</span>
     </div>
     <div
-      class="w-full h-full col-start-4 col-span-full bg-[#151618] rounded-r-sm overflow-hidden flex justify-center items-center px-1 text-center"
-      @mouseenter="footerStore.cursorLocation = `${ttlBal}`"
-      @mouseleave="footerStore.cursorLocation = ''"
+      class="w-full h-full col-start-3 col-span-full rounded-full self-center flex justify-center items-center bg-black px-1 min-h-[18px]"
     >
-      <span class="text-[11px] text-gray-300 font-normal self-center text-center">{{ totalBalance }}</span>
+      <span class="w-full text-[10px] text-green-600 font-medium text-center">{{ totalBalance }}</span>
     </div>
   </div>
 </template>
@@ -31,15 +26,10 @@ const t = i18n.global.t;
 
 const footerStore = useFooter();
 
-const ttlKeys = t("displayValidator.ttlKeys");
 const ttlBal = t("displayValidator.ttlBal");
 
 const stakingStore = useStakingStore();
 
-const totalKeys = computed(() => {
-  return stakingStore.keys?.filter((key) => key.key && key.key.trim() !== "").length || 0;
-});
-
 const totalBalance = computed(() => {
   const validatorID = stakingStore.selectedServiceToFilter?.config?.serviceID;
 
diff --git a/launcher/src/components/UI/staking-page/components/management/components/val-rewards/TotalKeys.vue b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/TotalKeys.vue
new file mode 100644
index 000000000..681b888b3
--- /dev/null
+++ b/launcher/src/components/UI/staking-page/components/management/components/val-rewards/TotalKeys.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="w-full col-start-1 col-span-full row-start-3 row-span-1 grid grid-cols-6 items-center p-[1px] mt-1"
+    @mouseenter="footerStore.cursorLocation = `${ttlKeys}`"
+    @mouseleave="footerStore.cursorLocation = ''"
+  >
+    <div class="h-full col-start-1 col-end-3 self-center grid grid-cols-3 justify-center items-center gap-1 px-[2px]">
+      <img class="col-start-1 col-span-1 w-3" src="/img/icon/staking-page-icons/keyIcon.png" alt="Block Icon" @mousedown.prevent />
+      <span class="col-start-2 col-span-full text-[10px] text-amber-300 font-normal font-sans">{{ $t("stakingPage.ttl") }}</span>
+    </div>
+
+    <div
+      class="w-full h-full col-start-3 col-span-full rounded-full self-center flex justify-center items-center bg-black px-1 min-h-[18px]"
+    >
+      <span class="w-full text-[10px] text-green-600 font-medium text-center">{{ totalKeys }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useStakingStore } from "@/store/theStaking"; // Import your staking store as needed
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+
+const t = i18n.global.t;
+
+const footerStore = useFooter();
+
+const ttlKeys = t("displayValidator.ttlKeys");
+
+const stakingStore = useStakingStore();
+
+const totalKeys = computed(() => {
+  return stakingStore.keys?.filter((key) => key.key && key.key.trim() !== "").length || 0;
+});
+</script>
diff --git a/launcher/src/components/UI/staking-page/components/modals/ImportValidator.vue b/launcher/src/components/UI/staking-page/components/modals/ImportValidator.vue
index 140fd3069..07102fb1b 100644
--- a/launcher/src/components/UI/staking-page/components/modals/ImportValidator.vue
+++ b/launcher/src/components/UI/staking-page/components/modals/ImportValidator.vue
@@ -101,9 +101,8 @@
   </staking-custom-modal>
 </template>
 <script setup>
-import { computed, ref, watch, onMounted, nextTick, onUnmounted } from "vue";
 import { useStakingStore } from "@/store/theStaking";
-import { useListKeys } from "@/composables/validators";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 
 const emit = defineEmits(["importKey"]);
 
@@ -197,10 +196,6 @@ const handleFileUpload = (event) => {
   }
 };
 
-const listKeys = async () => {
-  await useListKeys(stakingStore.forceRefresh);
-};
-
 const importValidator = () => {
   clickOut.value = null;
   isSlashingActive.value = false;
@@ -212,7 +207,6 @@ const importValidator = () => {
 const okHandler = async () => {
   stakingStore.setActiveModal(null);
   stakingStore.setActivePanel(null);
-  await listKeys();
 };
 </script>
 <style scoped>
diff --git a/launcher/src/components/UI/staking-page/sections/ManagementSection.vue b/launcher/src/components/UI/staking-page/sections/ManagementSection.vue
index 79a8eaa91..39ec7ad8c 100644
--- a/launcher/src/components/UI/staking-page/sections/ManagementSection.vue
+++ b/launcher/src/components/UI/staking-page/sections/ManagementSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full col-start-20 col-span-full row-start-1 row-span-full grid grid-cols-12 grid-rows-12 px-1 gap-y-1">
+  <div class="h-full col-start-20 col-span-full row-start-1 row-span-full grid grid-cols-12 grid-rows-12 px-1 gap-y-[1px]">
     <ValidatorRewards />
     <ClientCommands @graffiti-panel="graffitiPanel" @import-remote="importRemote" @withdraw-multiple="withdrawMultiple" />
     <EpochDuty />
diff --git a/launcher/src/components/UI/staking-page/sections/SidebarSection.vue b/launcher/src/components/UI/staking-page/sections/SidebarSection.vue
index d31c0c26c..1280dc5d4 100644
--- a/launcher/src/components/UI/staking-page/sections/SidebarSection.vue
+++ b/launcher/src/components/UI/staking-page/sections/SidebarSection.vue
@@ -7,11 +7,12 @@
     <div class="w-full h-full row-start-2 row-span-full grid grid-rows-12 items-center justify-start">
       <!-- All Keys Button -->
       <div
+        v-if="showAllKeysButton"
         class="w-9 h-9 max-h-[35px] row-span-1 py-1 rounded-r-full text-gray-700 transition-colors duration-200 flex justify-center items-center cursor-pointer"
         :class="{
-          'bg-[#336666] shadow-md shadow-[#191a1b] animate__animated animate__slideInLeft animate__faster pointer-events-none':
+          'bg-[#336666] border-2 border-l-0 border-lime-300 shadow-md shadow-[#191a1b] animate__animated animate__slideInLeft animate__faster pointer-events-none':
             stakingStore.displayAllKeysActive,
-          'bg-[#202123] border border-gray-600': !stakingStore.displayAllKeysActive,
+          'bg-[#336666] border-gray-400': !stakingStore.displayAllKeysActive,
         }"
         @click="clearServiceFilter"
         @mouseenter="footerStore.cursorLocation = `All Keys`"
@@ -25,11 +26,12 @@
         v-for="item in installedValidators"
         :key="item.config?.serviceID"
         class="w-9 h-9 max-h-[35px] row-span-1 py-1 rounded-r-full text-gray-700 transition-colors duration-200 flex justify-center items-center cursor-pointer"
-        :class="{
-          'bg-[#336666] shadow-md shadow-[#191a1b] animate__animated animate__slideInLeft animate__faster pointer-events-none':
-            currentService === item.config?.serviceID,
-          'bg-[#202123] border border-gray-600': currentService !== item.config?.serviceID,
-        }"
+        :class="[
+          item.setupColor === 'default' ? 'bg-[#336666]' : setupStore.getBGColor(item.setupColor),
+          currentService === item.config?.serviceID
+            ? 'shadow-md shadow-[#191a1b] animate__animated animate__slideInLeft animate__faster pointer-events-none'
+            : 'bg-[#202123] border border-gray-600',
+        ]"
         @click="filterByService(item)"
         @mouseenter="footerStore.cursorLocation = `Filter by ${item.name}`"
         @mouseleave="[(footerStore.cursorLocation = ''), (hoveredIndex = null)]"
@@ -63,44 +65,41 @@ const serviceStore = useServices();
 
 const currentService = ref(null);
 const hoveredIndex = ref(null);
+const isInitialMount = ref(true);
 
-// Computed: Filters installed validators based on selected setup
 const installedValidators = computed(() => {
   if (!setupStore.selectedSetup) {
     return serviceStore.installedServices.filter((s) => s.category === "validator");
   }
-
-  // Apply setup filter to validators
   return serviceStore.installedServices
     .filter(
       (s) =>
-        s.category === "validator" &&
-        s.service !== "LCOMService" &&
-        setupStore.selectedSetup.services?.map((s) => s.config.serviceID).includes(s.config.serviceID)
+        s.category === "validator" && setupStore.selectedSetup.services?.map((setup) => setup.config.serviceID).includes(s.config.serviceID)
     )
     .sort((a, b) => a.name.localeCompare(b.name));
 });
 
-// Lifecycle Hooks: Initialize current service and validator
-onMounted(() => {
-  clearServiceFilter(); // Set default to All Keys view
-});
+const showAllKeysButton = computed(() => installedValidators.value.length > 1);
+
+const clearServiceFilter = () => {
+  stakingStore.selectedServiceToFilter = null;
+  currentService.value = null;
+  stakingStore.displayAllKeysActive = true;
+};
+
+const selectSingleValidator = (validator) => {
+  currentService.value = validator.config?.serviceID;
+  stakingStore.selectedServiceToFilter = validator;
+  stakingStore.displayAllKeysActive = false;
+  filterKeys();
+  useObolStats();
+  useSSVStats();
+};
 
-// Methods
 const filterKeys = () => {
-  if (stakingStore.displayAllKeysActive) {
-    // Default: Show all keys, or apply only setup filter if setup is selected
-    stakingStore.keys = setupStore.selectedSetup
-      ? stakingStore.keys.filter((key) => setupStore.selectedSetup.services.some((service) => service.config.serviceID === key.validatorID))
-      : stakingStore.keys;
-  } else {
-    // Apply both selectedServiceToFilter and selectedSetup filtering
-    stakingStore.keys = stakingStore.keys.filter(
-      (key) =>
-        key.validatorID === stakingStore.selectedServiceToFilter?.config?.serviceID &&
-        (!setupStore.selectedSetup || setupStore.selectedSetup.services.some((service) => service.config.serviceID === key.validatorID))
-    );
-  }
+  stakingStore.keys?.filter((key) =>
+    stakingStore.displayAllKeysActive ? true : key.validatorID === stakingStore.selectedServiceToFilter?.config?.serviceID
+  ) || [];
 };
 
 const filterByService = (item) => {
@@ -112,21 +111,35 @@ const filterByService = (item) => {
   useSSVStats();
 };
 
-const clearServiceFilter = () => {
-  stakingStore.selectedServiceToFilter = null;
-  currentService.value = null;
-  stakingStore.displayAllKeysActive = true;
-  filterKeys();
-};
-
 watch(
-  () => setupStore.selectedSetup,
+  () => stakingStore.displayAllKeysActive,
   () => {
-    if (stakingStore.displayAllKeysActive) {
-      filterKeys();
-    }
+    filterKeys();
   }
 );
+
+watch(
+  () => installedValidators.value,
+  (newValidators) => {
+    if (isInitialMount.value) {
+      if (newValidators.length === 1) {
+        selectSingleValidator(newValidators[0]);
+      } else {
+        clearServiceFilter();
+      }
+      isInitialMount.value = false;
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  if (installedValidators.value.length === 1) {
+    selectSingleValidator(installedValidators.value[0]);
+  } else {
+    clearServiceFilter();
+  }
+});
 </script>
 
 <style scoped>
diff --git a/launcher/src/components/base/BaseLayout.vue b/launcher/src/components/base/BaseLayout.vue
index 4783eb400..fde4b9905 100755
--- a/launcher/src/components/base/BaseLayout.vue
+++ b/launcher/src/components/base/BaseLayout.vue
@@ -47,6 +47,7 @@
     <StakeGuide v-if="headerStore.stakeGuideActive" />
   </div>
 </template>
+
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from "vue";
 
diff --git a/launcher/src/composables/importKey.js b/launcher/src/composables/importKey.js
new file mode 100644
index 000000000..4e8829024
--- /dev/null
+++ b/launcher/src/composables/importKey.js
@@ -0,0 +1,128 @@
+import { useStakingStore } from "../store/theStaking";
+import ControlService from "../store/ControlService";
+import { useListKeys } from "./validators";
+import { useListGroups } from "./groups";
+import { useServices } from "../store/services";
+
+export function useImportKeys(forceRefresh) {
+  const stakingStore = useStakingStore();
+  const serviceStore = useServices();
+
+  const readFileContent = (file) => {
+    const reader = new FileReader();
+
+    reader.onload = (event) => {
+      try {
+        if (file.type === "application/json") {
+          const jsonContent = JSON.parse(event.target.result);
+
+          // Add filename property to jsonContent
+          jsonContent.filename = file.name;
+          stakingStore.previewKeys.push(jsonContent);
+        }
+      } catch (e) {
+        console.error("Error parsing JSON file:", e);
+      }
+    };
+    reader.onerror = (event) => {
+      console.error("Error reading file:", event.target.error);
+    };
+
+    reader.readAsText(file);
+  };
+
+  //Handle multiple files
+  const handleFiles = (files) => {
+    if (files.length > 1) {
+      for (let file of files) {
+        if (file.type === "application/json") {
+          readFileContent(file);
+        }
+      }
+    } else if (files[0].type === "application/json") {
+      readFileContent(files[0]);
+    }
+  };
+
+  const uploadValidatorKey = (event) => {
+    let uploadedFiles = event.target.files;
+    stakingStore.previewKeys = [];
+    handleFiles(uploadedFiles);
+    stakingStore.passwordFiles = [...uploadedFiles].filter((file) => file.type === "text/plain");
+    stakingStore.keyFiles = [...uploadedFiles].filter((file) => file.type === "application/json");
+    stakingStore.isOverDropZone = false;
+    stakingStore.isPreviewListActive = true;
+    stakingStore.setActivePanel("validator");
+  };
+
+  const onDrop = (event) => {
+    let validator = serviceStore.installedServices.filter((s) => s.category === "validator");
+    if (validator && validator.map((e) => e.state).includes("running")) {
+      stakingStore.previewKeys = [];
+      let droppedFiles = event.dataTransfer.files;
+      if (droppedFiles[0]["type"] === "application/json" || droppedFiles[0]["type"] === "text/plain") {
+        stakingStore.isOverDropZone = false;
+        stakingStore.isPreviewListActive = true;
+        handleFiles(droppedFiles);
+        stakingStore.passwordFiles = [...droppedFiles].filter((file) => file.type === "text/plain");
+        stakingStore.keyFiles = [...droppedFiles].filter((file) => file.type === "application/json");
+        stakingStore.setActivePanel("validator");
+      } else {
+        stakingStore.inputWrongKey = true;
+      }
+    }
+  };
+
+  const importingKey = async (val) => {
+    stakingStore.importEnteredPassword = val;
+    stakingStore.importKeyMessage = await ControlService.importKey(stakingStore.selectedValidatorService.config.serviceID);
+    stakingStore.isPreviewListActive = false;
+    stakingStore.setActivePanel("insert");
+    stakingStore.keyFiles = [];
+    stakingStore.passwordFiles = [];
+    stakingStore.previewKeys = [];
+
+    stakingStore.importEnteredPassword = "";
+    stakingStore.forceRefresh = true;
+    if (stakingStore.isDoppelgangerProtectionActive && stakingStore.doppelgangerKeys.length > 0) {
+      stakingStore.displayDoppelgangerPreview = true;
+      setTimeout(() => {
+        stakingStore.setActiveModal(null);
+      }, 10000);
+    }
+    await useListKeys(forceRefresh);
+    await useListGroups();
+  };
+
+  const importValidatorProcessing = async () => {
+    stakingStore.isImportValidatorButtonClicked = true;
+    stakingStore.checkActiveValidatorsResponse = await ControlService.checkActiveValidators({
+      files: stakingStore.keyFiles,
+      passwordFiles: stakingStore.passwordFiles,
+      password: stakingStore.importEnteredPassword,
+      serviceID: stakingStore.selectedValidatorService.config?.serviceID,
+      slashingDB: stakingStore.slashingDB?.path || null,
+    });
+
+    if (
+      stakingStore.checkActiveValidatorsResponse.length === 0 ||
+      stakingStore.checkActiveValidatorsResponse.includes("Validator check error:\n")
+    ) {
+      await importingKey(stakingStore.importEnteredPassword);
+
+      stakingStore.setActivePanel(null);
+      stakingStore.keyFiles = [];
+      stakingStore.passwordFiles = [];
+    } else {
+      stakingStore.setActiveModal("risk");
+      stakingStore.doppelgangerKeys = [];
+    }
+  };
+
+  return {
+    uploadValidatorKey,
+    onDrop,
+    importingKey,
+    importValidatorProcessing,
+  };
+}
diff --git a/launcher/src/composables/services.js b/launcher/src/composables/services.js
index 7b8e3243c..1ad75a928 100644
--- a/launcher/src/composables/services.js
+++ b/launcher/src/composables/services.js
@@ -124,6 +124,7 @@ export async function useFrontendServices() {
                   ...service,
                   setupId: setup.setupId,
                   setupName: setup.setupName,
+                  setupColor: setup.color,
                 };
               }
             }
diff --git a/launcher/src/composables/validators.js b/launcher/src/composables/validators.js
index a30c23c59..c127f80f0 100644
--- a/launcher/src/composables/validators.js
+++ b/launcher/src/composables/validators.js
@@ -141,13 +141,23 @@ export async function useUpdateValidatorStats() {
     return;
   }
   // Get queue keys
-  const keysInQueue = await ControlService.getSigningKeysWithQueueInfo();
+  let keysInQueue = [];
+  try {
+    keysInQueue = (await ControlService.getSigningKeysWithQueueInfo()) || [];
+    if (!Array.isArray(keysInQueue)) {
+      console.warn("Unexpected response from getSigningKeysWithQueueInfo:", keysInQueue);
+      keysInQueue = [];
+    }
+  } catch (error) {
+    console.error("Error fetching signing keys with queue info:", error);
+    keysInQueue = [];
+  }
+
   stakingStore.keys.forEach((key) => {
     let info = data.find((k) => k.pubkey === key.key);
 
     // Check if the key is in queue here
-    let inQueue = false;
-    if (Array.isArray(keysInQueue)) inQueue = keysInQueue.some((k) => k.key === key.key && k.queuePosition != 0);
+    let inQueue = keysInQueue.some((k) => k.key === key.key && k.queuePosition != 0);
 
     if (info) {
       let dateActive = new Date();
diff --git a/launcher/src/main.js b/launcher/src/main.js
index f0aab35f8..06ab47ddf 100755
--- a/launcher/src/main.js
+++ b/launcher/src/main.js
@@ -5,6 +5,7 @@ import { createPinia } from "pinia";
 import VueApexCharts from "vue3-apexcharts";
 
 import "./main.css";
+import "preline/preline";
 
 import i18n from "./includes/i18n";
 import BaseLayout from "./components/base/BaseLayout.vue";
diff --git a/launcher/src/store/setups.js b/launcher/src/store/setups.js
index d9b81192c..0d48e4c21 100644
--- a/launcher/src/store/setups.js
+++ b/launcher/src/store/setups.js
@@ -96,7 +96,7 @@ export const useSetups = defineStore("setups", {
       default: { text: "text-gray-100", background: "bg-[#336666]" },
       blue: { text: "text-gray-100", background: "bg-blue-900" }, //#172554
       red: { text: "text-gray-800", background: "bg-red-300" }, //#fca5a5
-      yellow: { text: "text-gray-800", background: "bg-[#F7C566]" },
+      yellow: { text: "text-gray-800", background: "bg-[#dc9105]" },
       orange: { text: "text-gray-800", background: "bg-[#fb923c]" },
       green: { text: "text-gray-100", background: "bg-lime-900" }, //#365314
       beige: { text: "text-gray-800", background: "bg-[#D1BB9E]" },
@@ -104,6 +104,18 @@ export const useSetups = defineStore("setups", {
       brown: { text: "text-gray-100", background: "bg-[#503C3C]" },
       gray: { text: "text-white", background: "bg-zinc-700" }, //#3f3f46
     },
+    borderColorMappings: {
+      default: { border: "border border-[#336666]" },
+      blue: { border: "border border-blue-900" }, //#172554
+      red: { border: "border border-red-300" }, //#fca5a5
+      yellow: { border: "border border-[#dc9105]" },
+      orange: { border: "border border-[#fb923c]" },
+      green: { border: "border border-lime-900" }, //#365314
+      beige: { border: "border border-[#D1BB9E]" },
+      purple: { border: "border border-violet-900" }, //#4c1d95
+      brown: { border: "border border-[#503C3C]" },
+      gray: { border: "border border-zinc-700" }, //#3f3f46
+    },
   }),
   getters: {
     //Setup layouts
@@ -119,6 +131,9 @@ export const useSetups = defineStore("setups", {
     getTextColor: (state) => (color) => {
       return state.colorMappings[color]?.text || "text-gray-300";
     },
+    getBorderColor: (state) => (color) => {
+      return state.borderColorMappings[color]?.border || "border border-[#33393E]";
+    },
   },
   actions: {
     updateSelectedSetup() {
diff --git a/launcher/src/store/theStaking.js b/launcher/src/store/theStaking.js
index f7299b334..5534be451 100755
--- a/launcher/src/store/theStaking.js
+++ b/launcher/src/store/theStaking.js
@@ -53,6 +53,8 @@ export const useStakingStore = defineStore("theStaking", {
       // ***** End Staking Remote Keys *****
 
       // ***** Validator Keys *****
+      isImportValidatorButtonClicked: false,
+      displayDoppelgangerPreview: false,
       passwordFiles: [],
       isPubkeyVisible: false,
       removeResponse: [],
@@ -62,6 +64,7 @@ export const useStakingStore = defineStore("theStaking", {
       selectedKeyToRemove: null,
       selectKeyToRename: null,
       selectKeyForFee: null,
+      isRenameKeyActive: false,
       validatorDisplayName: "",
       enteredFeeRecipientAddress: "",
       feeRecepientAddress: "",
@@ -95,6 +98,7 @@ export const useStakingStore = defineStore("theStaking", {
       keyCounter: 0,
       obolStats: {},
       ssvStats: {},
+      isSkeletonActive: true,
     };
   },
   actions: {
diff --git a/launcher/tailwind.config.js b/launcher/tailwind.config.js
index 5aed78eac..3d39d7b14 100755
--- a/launcher/tailwind.config.js
+++ b/launcher/tailwind.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", "./node_modules/preline/preline.js"],
   theme: {
     extend: {
       backgroundImage: {
@@ -74,5 +74,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwind-scrollbar")],
+  plugins: [require("tailwind-scrollbar"), require("tailwindcss-animated"), require("preline/plugin")],
 };