diff --git a/frontend/.gitignore b/frontend/.gitignore
index de93b161e..1e90cbeff 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,3 +1,6 @@
+# Dev Environment
+!.vscode/
+
 # Nuxt dev/build outputs
 .output
 .data
diff --git a/frontend/.vscode/extensions.json b/frontend/.vscode/extensions.json
new file mode 100644
index 000000000..fcb6deda8
--- /dev/null
+++ b/frontend/.vscode/extensions.json
@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "vivaxy.vscode-conventional-commits",
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens",
+    "usernamehw.errorlens",
+    "nuxtr.nuxt-vscode-extentions",
+    "vue.volar"
+  ]
+}
\ No newline at end of file
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
new file mode 100644
index 000000000..620085a67
--- /dev/null
+++ b/frontend/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+  "conventionalCommits.scopes": [
+    "i18n",
+    "vscode",
+    "eslint"
+  ],
+  "editor.rulers": [
+    80,
+    120
+],
+
+}
\ No newline at end of file
diff --git a/frontend/README.md b/frontend/README.md
index d86a3591e..669bc409c 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,6 +1,7 @@
 # Beaconch.in Good to know
 
 ## Usefull VSC Plugins
+
 - Nuxtr
 - EsLint
 - Prettier -COde Formatter
@@ -20,6 +21,7 @@ Clone the `beaconchain` repository from git.
 On your console, navigate to folder `beaconchain/frontend`.
 
 Type
+
 ```bash
 cp .npmrc-example .npmrc
 ```
@@ -27,24 +29,30 @@ cp .npmrc-example .npmrc
 In your `.npmrc` file, replace `FA_TOKEN` with an actual key for Font Awesome.
 
 Then type:
+
 ```bash
 cp .env-example .env
 ```
+
 In file `.env`, write the URLs of the API servers and the secret key to access to them.
 The variable evoking the development is used to show/hide features and components that are not ready for production.
 
 Set the following mapping in your `/etc/hosts` file:
+
 ```
 127.0.0.1 local.beaconcha.in
 ```
 
 Create server certificates for locally running on https, by runing these comands in the console (the last two with `sudo`)
+
 ```bash
 openssl genrsa 2048 > server.key
 chmod 400 server.key
 openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt
 ```
+
 Add the following env variable (on Ubuntu: in your `~/.profile`) needed to load local mock data:
+
 ```bash
 export NODE_TLS_REJECT_UNAUTHORIZED=0
 ```
@@ -52,17 +60,21 @@ export NODE_TLS_REJECT_UNAUTHORIZED=0
 Restart.
 
 Navigate to folder `beaconchain/frontend` and run
+
 ```bash
 npm install
 ```
 
 If you prefer to use _pnpm_, _yarn_ or _bun_ instead of _npm_:
+
 ```bash
 sudo npm install -g pnpm
 sudo npm install -g yarn
 sudo npm install -g bun
 ```
+
 then
+
 ```bash
 pnpm install
 yarn install
@@ -79,6 +91,7 @@ pnpm run dev
 yarn dev
 bun run dev
 ```
+
 Now you can browse the front-end at https://local.beaconcha.in:3000/
 
 ## Production
@@ -121,5 +134,3 @@ Check out the [deployment documentation](https://nuxt.com/docs/getting-started/d
 
 We documented our decisions in the [decisions](decisions.md) file.
 The documentation should be inspired by Architecture Decision Records ([ADR](https://adr.github.io/)).
-
-
diff --git a/frontend/app.vue b/frontend/app.vue
index eb357f936..a4891b68f 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -3,15 +3,18 @@ import { generateUUID } from '~/utils/misc'
 
 // Used for debugging purposes, might be removed or moved later
 provide('app-uuid', { value: generateUUID() })
-useHead({
-  script: [
-    {
-      key: 'revive',
-      src: '../js/revive.min.js',
-      async: false
-    }
-  ]
-}, { mode: 'client' })
+useHead(
+  {
+    script: [
+      {
+        key: 'revive',
+        src: '../js/revive.min.js',
+        async: false,
+      },
+    ],
+  },
+  { mode: 'client' },
+)
 useWindowSizeProvider()
 useBcToastProvider()
 useDateProvider()
@@ -27,5 +30,4 @@ useDateProvider()
   </div>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/frontend/app/router.options.ts b/frontend/app/router.options.ts
index 24702e39d..5947aab56 100644
--- a/frontend/app/router.options.ts
+++ b/frontend/app/router.options.ts
@@ -1,5 +1,9 @@
 export default {
-  scrollBehavior (_to: any, _from: any, savedPosition: { left: number, top: number } | null) {
+  scrollBehavior(
+    _to: any,
+    _from: any,
+    savedPosition: { left: number, top: number } | null,
+  ) {
     return { _to, ...savedPosition }
-  }
+  },
 }
diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss
index 1ad281aba..68d69fecb 100644
--- a/frontend/assets/css/colors.scss
+++ b/frontend/assets/css/colors.scss
@@ -22,13 +22,13 @@
   --light-black: #2a262c;
   --dark-blue: #2f2e42;
   --purple-blue: #3e4461;
-  --light-purple-blue: #545C7E;
-  --sky-blue:#cde3ee;
+  --light-purple-blue: #545c7e;
+  --sky-blue: #cde3ee;
   --light-blue: #66bce9;
-  --melllow-blue: #7db5eC;
+  --melllow-blue: #7db5ec;
   --blue: #2e82ae;
   --teal-blue: #116897;
-  --mint-green: #D3E4D4;
+  --mint-green: #d3e4d4;
   --flashy-green: #90ed7d;
   --light-green: #4e7451;
   --green: #7dc382;
@@ -37,7 +37,7 @@
   --light-red: #d42127;
   --dark-red: #ce3438;
   --bold-red: #b10b11;
-  --pastel-red: #F1C5C6;
+  --pastel-red: #f1c5c6;
   --yellow: #ffd600;
   --light-yellow: #969100;
   --purple: #9747ff;
@@ -74,7 +74,7 @@
 
   --button-secondary-color: var(--light-black);
   --button-secondary-hover-color: var(--light-grey-6);
-  --button-secondary-background-color--hover: var(--light-grey-4 );
+  --button-secondary-background-color--hover: var(--light-grey-4);
   --button-secondary-background-color: var(--grey-4);
   --button-secondary-border-color: var(--light-grey-7);
 
@@ -84,7 +84,7 @@
   --container-color: var(--light-black);
   --container-border-color: var(--light-grey-3);
   --container-border: 1px solid var(--container-border-color);
-  
+
   --subcontainer-background: var(--light-grey-2);
 
   --input-background: var(--grey-4);
@@ -153,7 +153,6 @@
   --toast-background-error-color: var(--pastel-red);
   --toast-border-error-color: var(--bold-red);
 
-
   &.dark-mode {
     --primary-color: var(--primary-orange);
     --primary-contrast-color: var(--light-black);
@@ -222,4 +221,4 @@
     --list-hover-background: var(--dark-grey);
     --list-hover-descrete-color: var(--grey);
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/assets/css/fonts.scss b/frontend/assets/css/fonts.scss
index 92458a110..cf44872fc 100644
--- a/frontend/assets/css/fonts.scss
+++ b/frontend/assets/css/fonts.scss
@@ -111,13 +111,11 @@
   --standard_text_medium_font_weight: var(--roboto-medium);
   --standard_text_bold_font_weight: var(--roboto-bold);
 
-  --main_header_font_family:var(--roboto-family);
+  --main_header_font_family: var(--roboto-family);
   --main_header_font_size: 16px;
   --main_header_font_weight: var(--roboto-regular);
   --main_header_bold_font_weight: var(--roboto-bold);
 
-
-
   --small_text_font_family: var(--roboto-family);
   --small_text_font_size: 14px;
   --small_text_font_weight: var(--roboto-light);
@@ -171,14 +169,14 @@ h1 {
   @include subtitle_text;
 }
 
-@mixin big_text(){
+@mixin big_text() {
   font-family: var(--big_text_font_family);
   font-size: var(--big_text_font_size);
   font-weight: var(--big_text_font_weight);
 }
 
-.big_text{
-  @include big_text
+.big_text {
+  @include big_text;
 }
 
 @mixin big_text_label() {
@@ -188,116 +186,115 @@ h1 {
 }
 
 .big_text_label {
-  @include big_text_label
+  @include big_text_label;
 }
 
-@mixin standard_text(){
+@mixin standard_text() {
   font-family: var(--standard_text_font_family);
   font-size: var(--standard_text_font_size);
   font-weight: var(--standard_text_font_weight);
 }
 
-.standard_text{
-  @include standard_text
+.standard_text {
+  @include standard_text;
 }
 
-@mixin standard_text_bold(){
+@mixin standard_text_bold() {
   font-family: var(--standard_text_font_family);
   font-size: var(--standard_text_font_size);
   font-weight: var(--standard_text_bold_font_weight);
 }
 
-.standard_text_bold{
-  @include standard_text_bold
+.standard_text_bold {
+  @include standard_text_bold;
 }
 
-@mixin small_text(){
+@mixin small_text() {
   font-family: var(--small_text_font_family);
   font-size: var(--small_text_font_size);
   font-weight: var(--small_text_font_weight);
 }
 
-.small_text{
-  @include small_text
+.small_text {
+  @include small_text;
 }
 
-@mixin small_text_bold(){
+@mixin small_text_bold() {
   font-family: var(--small_text_font_family);
   font-size: var(--small_text_font_size);
   font-weight: var(--small_text_bold_font_weight);
 }
 
-.small_text_bold{
-  @include small_text_bold
+.small_text_bold {
+  @include small_text_bold;
 }
 
-@mixin tiny_text(){
+@mixin tiny_text() {
   font-family: var(--tiny_text_font_family);
   font-size: var(--tiny_text_font_size);
   font-weight: var(--tiny_text_font_weight);
 }
 
-.tiny_text{
-  @include tiny_text
+.tiny_text {
+  @include tiny_text;
 }
 
-@mixin tiny_text_bold(){
+@mixin tiny_text_bold() {
   font-family: var(--tiny_text_font_family);
   font-size: var(--tiny_text_font_size);
   font-weight: var(--tiny_text_bold_font_weight);
 }
 
-.tiny_text_bold{
-  @include tiny_text_bold
+.tiny_text_bold {
+  @include tiny_text_bold;
 }
 
-@mixin tooltip_text(){
+@mixin tooltip_text() {
   font-family: var(--tooltip_text_font_family);
   font-size: var(--tooltip_text_font_size);
   font-weight: var(--tooltip_text_font_weight);
 }
 
-.tooltip_text{
-  @include tooltip_text
+.tooltip_text {
+  @include tooltip_text;
 }
 
-@mixin tooltip_text_bold(){
+@mixin tooltip_text_bold() {
   font-family: var(--tooltip_text_font_family);
   font-size: var(--tooltip_text_font_size);
   font-weight: var(--tooltip_text_bold_font_weight);
 }
 
-.tooltip_text_bold{
-  @include tooltip_text_bold
+.tooltip_text_bold {
+  @include tooltip_text_bold;
 }
 
-@mixin button_text(){
+@mixin button_text() {
   font-family: var(--button_font_family);
   font-size: var(--button_font_size);
   font-weight: var(--button_font_weight);
 }
 
-
-.button_text{
-  @include button_text
+.button_text {
+  @include button_text;
 }
 
-@mixin text-toast(){
-  font-family:var(--roboto-family);
-  font-size:var(--standard_text_font_size);
+@mixin text-toast() {
+  font-family: var(--roboto-family);
+  font-size: var(--standard_text_font_size);
   font-weight: var(--roboto-bold);
 }
 
-.text-toast{
-  @include text-toast
+.text-toast {
+  @include text-toast;
 }
 
-@mixin text-toast-sm(){
-  font-family:var(--roboto-family);
+@mixin text-toast-sm() {
+  font-family: var(--roboto-family);
   font-size: var(--small_text_font_size);
   font-weight: var(--roboto-regular);
 }
 
-.text-toast-sm{
-  @include text-toast-sm
-}
\ No newline at end of file
+.text-toast-sm {
+  @include text-toast-sm;
+}
diff --git a/frontend/assets/css/main.scss b/frontend/assets/css/main.scss
index ab4335179..e551aa1fd 100644
--- a/frontend/assets/css/main.scss
+++ b/frontend/assets/css/main.scss
@@ -18,12 +18,12 @@ body {
 a {
   color: inherit;
   text-decoration: none;
-  &:hover:not([disabled])  {
+  &:hover:not([disabled]) {
     opacity: 0.8;
   }
 
-  &[disabled]{
-    cursor: unset;    
+  &[disabled] {
+    cursor: unset;
     pointer-events: none;
   }
 }
@@ -34,7 +34,7 @@ a {
   &:hover:not([disabled]) {
     opacity: 0.8;
   }
-  &[disabled]{
+  &[disabled] {
     color: var(--disabled-color);
   }
 }
@@ -60,7 +60,7 @@ a {
   scrollbar-width: thin;
 
   /* Chrome: we must remove the styles above otherwise the styles below will not work correctly */
-  @supports (-webkit-appearance:none){
+  @supports (-webkit-appearance: none) {
     scrollbar-color: unset;
     scrollbar-width: unset;
   }
@@ -86,7 +86,7 @@ a {
 /** To make a SVG monochromatic, assign it to the class `monochromatic`.
  *  It will work if you replace every `fill="#..."` in the SVG with `class="colorX shape"` or `class="colorX background"` (with X depending on the color and as high as the number of colors)
  *  and, in the <style> section of the SVG, you define every `.colorX {fill: #...}` accordingly. */
-svg{
+svg {
   &.monochromatic {
     .shape {
       fill: currentColor;
diff --git a/frontend/assets/css/pricing.scss b/frontend/assets/css/pricing.scss
index 1e20f1f62..4b7e4ed49 100644
--- a/frontend/assets/css/pricing.scss
+++ b/frontend/assets/css/pricing.scss
@@ -23,4 +23,4 @@
 
 .pricing_button {
   @include pricing_button;
-}
\ No newline at end of file
+}
diff --git a/frontend/assets/css/prime.scss b/frontend/assets/css/prime.scss
index 38d8e2735..436ec1980 100644
--- a/frontend/assets/css/prime.scss
+++ b/frontend/assets/css/prime.scss
@@ -23,20 +23,22 @@
   justify-content: center;
   align-items: center;
 
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
-  
+  transition:
+    background-color 0.2s,
+    color 0.2s,
+    border-color 0.2s;
+
   &:not([data-secondary]) {
     color: var(--primary-contrast-color);
     background: var(--button-color-active);
   }
 
-  &[data-secondary]{
+  &[data-secondary] {
     color: var(--button-secondary-color);
     background: var(--button-secondary-background-color);
     border-color: var(--button-secondary-border-color);
   }
 
-
   &.p-disabled {
     color: var(--button-text-color-disabled);
     background: var(--button-color-disabled);
@@ -62,11 +64,11 @@
 
   &.p-button-danger {
     color: var(--button-text-color-dangerous);
-  
+
     &:not(:disabled) {
       background-color: var(--button-color-dangerous);
       border-color: var(--button-color-dangerous);
-  
+
       &:hover {
         background-color: var(--button-color-dangerous-hover);
         border-color: var(--button-color-dangerous-hover);
@@ -82,7 +84,7 @@
   border: 1px solid var(--primary-orange);
   border-radius: var(--border-radius);
   padding: var(--padding-large);
-  min-width: 375px; 
+  min-width: 375px;
   max-height: calc(100% - 60px);
   touch-action: pan-x pan-y;
 
@@ -118,7 +120,10 @@
   padding: 4px 7px;
   border: 1px solid var(--input-border-color);
   border-radius: var(--border-radius);
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+  transition:
+    background-color 0.2s,
+    color 0.2s,
+    border-color 0.2s;
   appearance: none;
 
   ::placeholder {
@@ -206,7 +211,10 @@
 
   .p-inputswitch-slider {
     background: var(--button-color-active);
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s,
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
       box-shadow 0.2s;
     border-radius: 30px;
 
@@ -290,7 +298,10 @@
       height: 32px;
       border-radius: 50%;
       background: transparent;
-      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+      transition:
+        background-color 0.2s,
+        color 0.2s,
+        box-shadow 0.2s;
 
       &:hover {
         background: rgba(255, 255, 255, 0.5);
@@ -349,7 +360,6 @@
   }
 }
 
-
 // Multiselect drop-down
 
 .p-multiselect {
@@ -359,7 +369,10 @@
   border: 1px solid var(--input-border-color);
   height: var(--default-button-height);
   border-radius: var(--border-radius);
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+  transition:
+    background-color 0.2s,
+    color 0.2s,
+    border-color 0.2s;
   justify-content: center;
   width: 100%;
 
@@ -436,7 +449,10 @@
   background: var(--input-background);
   border: 1px solid var(--input-border-color);
   color: var(--input-active-text-color);
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+  transition:
+    background-color 0.2s,
+    color 0.2s,
+    border-color 0.2s;
   border-radius: var(--border-radius);
   padding: var(--padding);
   display: flex;
diff --git a/frontend/assets/css/prime_datatable.scss b/frontend/assets/css/prime_datatable.scss
index e4ff17d47..bbde52a35 100644
--- a/frontend/assets/css/prime_datatable.scss
+++ b/frontend/assets/css/prime_datatable.scss
@@ -4,7 +4,6 @@
   --expander-col-width: 53px;
   --table-header-background: var(--grey-4);
   &.dark-mode {
-
     --table-header-background: var(--very-dark-grey);
   }
 }
@@ -136,12 +135,11 @@
         > .p-column-title {
           font-weight: var(--standard_text_medium_font_weight);
         }
-
       }
       &.bold > td,
       .bold > td,
-      > td.bold{
-          font-weight: var(--standard_text_medium_font_weight);
+      > td.bold {
+        font-weight: var(--standard_text_medium_font_weight);
       }
     }
   }
diff --git a/frontend/assets/css/utils.scss b/frontend/assets/css/utils.scss
index 1b85481db..f1482b8fa 100644
--- a/frontend/assets/css/utils.scss
+++ b/frontend/assets/css/utils.scss
@@ -32,7 +32,7 @@
   white-space: nowrap;
 }
 
-.text-disabled{
+.text-disabled {
   color: var(--text-color-disabled);
 }
 
@@ -52,12 +52,12 @@
   color: var(--orphaned-color);
 }
 
-@mixin positive-background() {  
+@mixin positive-background() {
   background-color: var(--positive-color);
   color: var(--positive-contrast-color);
 }
 
-@mixin negative-background(){
+@mixin negative-background() {
   background-color: var(--negative-color);
   color: var(--negative-contrast-color);
 }
@@ -136,11 +136,17 @@
 }
 
 @keyframes delayed-fadein {
-  0% { opacity: 0; }
-  50% { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 .delayed-fadein-animation {
   animation: delayed-fadein 2s;
-}
\ No newline at end of file
+}
diff --git a/frontend/assets/css/variables.scss b/frontend/assets/css/variables.scss
index afae4dc16..f0483dc3c 100644
--- a/frontend/assets/css/variables.scss
+++ b/frontend/assets/css/variables.scss
@@ -18,7 +18,7 @@
   --default-button-height: 30px;
 
   @media screen and (max-width: 1399px) {
-    --content-width: calc(100% - 2*var(--content-margin));
+    --content-width: calc(100% - 2 * var(--content-margin));
   }
 
   @media screen and (max-width: 800px) {
diff --git a/frontend/components/bc/BcBlurOverlay.vue b/frontend/components/bc/BcBlurOverlay.vue
index 936d56bfb..4357549a3 100644
--- a/frontend/components/bc/BcBlurOverlay.vue
+++ b/frontend/components/bc/BcBlurOverlay.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="gradient-blur" />
 </template>
+
 <style lang="scss" scoped>
 .gradient-blur {
   background: linear-gradient(rgba(233, 233, 233, 0), rgba(233, 233, 233, 1));
diff --git a/frontend/components/bc/BcButton.vue b/frontend/components/bc/BcButton.vue
index bb5a711d2..d8eb8fd83 100644
--- a/frontend/components/bc/BcButton.vue
+++ b/frontend/components/bc/BcButton.vue
@@ -1,23 +1,24 @@
 <script lang="ts" setup>
-
-const props =defineProps<{
+const props = defineProps<{
   /**
    * ℹ️ should only be used rarely, e.g. in cases where the action should not be triggerd twice
    */
-  isDisabled?: boolean,
+  isDisabled?: boolean
   /**
    * ♿️ buttons that are aria-disabled are still perceivable by screen readers
-   * as they can still be focused on 
+   * as they can still be focused on
    */
-  isAriaDisabled?: boolean,
+  isAriaDisabled?: boolean
   variant?: 'secondary' // | 'red'
 }>()
 
-const shouldAppearDisabled = computed(() => props.isDisabled || props.isAriaDisabled)
+const shouldAppearDisabled = computed(
+  () => props.isDisabled || props.isAriaDisabled,
+)
 </script>
 
-<template> 
-  <Button 
+<template>
+  <Button
     type="button"
     :disabled="isDisabled"
     :aria-disabled="isAriaDisabled"
@@ -27,42 +28,41 @@ const shouldAppearDisabled = computed(() => props.isDisabled || props.isAriaDisa
       // 'bc-button--red': variant === 'red'
     }"
   >
-    <slot/>
+    <slot />
     <span
       v-if="$slots.icon"
       class="bc-button__icon"
     >
-      <slot name="icon"/>
+      <slot name="icon" />
     </span>
   </Button>
-
- </template>
+</template>
 
 <style lang="scss" scoped>
-  .bc-button--secondary {
+.bc-button--secondary {
+  border-color: var(--button-secondary-border-color);
+  background-color: var(--button-secondary-background-color);
+  color: var(--button-secondary-color);
+  &:hover {
+    background-color: var(--button-secondary-background-color--hover);
     border-color: var(--button-secondary-border-color);
-    background-color: var(--button-secondary-background-color);
-    color: var(--button-secondary-color);
-    &:hover {
-      background-color: var(--button-secondary-background-color--hover);
-      border-color: var(--button-secondary-border-color);
-    }
-    &:active {
-      background-color: var(--button-secondary-background-color);
-      border-color: var(--button-secondary-border-color);
-    }
   }
-  .bc-button--disabled {
-    &,
-    &:hover,
-    &:focus {
-      background-color: var(--button-color-disabled);
-      border-color: var(--button-color-disabled);
-      color: var(--button-text-color-disabled);
-      cursor: not-allowed;
-    }
+  &:active {
+    background-color: var(--button-secondary-background-color);
+    border-color: var(--button-secondary-border-color);
   }
-  .bc-button__icon {
-    margin-left: var(--padding-small);
+}
+.bc-button--disabled {
+  &,
+  &:hover,
+  &:focus {
+    background-color: var(--button-color-disabled);
+    border-color: var(--button-color-disabled);
+    color: var(--button-text-color-disabled);
+    cursor: not-allowed;
   }
-</style>
\ No newline at end of file
+}
+.bc-button__icon {
+  margin-left: var(--padding-small);
+}
+</style>
diff --git a/frontend/components/bc/BcContentFilter.vue b/frontend/components/bc/BcContentFilter.vue
index a7c98e950..7012f3713 100644
--- a/frontend/components/bc/BcContentFilter.vue
+++ b/frontend/components/bc/BcContentFilter.vue
@@ -1,23 +1,25 @@
 <script lang="ts" setup>
-import { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons'
+import {
+  faMagnifyingGlass,
+} from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type InputText from 'primevue/inputtext'
 
 interface Props {
-  searchPlaceholder?: string;
-  disabledFilter?: boolean;
+  searchPlaceholder?: string
+  disabledFilter?: boolean
 }
 const props = defineProps<Props>()
 
-defineEmits<{(e: 'filter-changed', value: string): void }>()
+defineEmits<{ (e: 'filter-changed', value: string): void }>()
 
 const isFilterVisible = ref(false)
 const filter = ref('')
 
-const button = ref<{$el: HTMLButtonElement} | null>(null)
+const button = ref<{ $el: HTMLButtonElement } | null>(null)
 
-const input = ref<{$el: HTMLInputElement} | null>(null)
-const focusAndSelect = (inputElement: {$el: HTMLInputElement}) => {
+const input = ref<{ $el: HTMLInputElement } | null>(null)
+const focusAndSelect = (inputElement: { $el: HTMLInputElement }) => {
   if (inputElement?.$el) {
     // make sure the input is not disabled anymore
     nextTick(() => {
diff --git a/frontend/components/bc/BcCurrencySelection.vue b/frontend/components/bc/BcCurrencySelection.vue
index 489bbd202..4db775158 100644
--- a/frontend/components/bc/BcCurrencySelection.vue
+++ b/frontend/components/bc/BcCurrencySelection.vue
@@ -6,7 +6,6 @@ defineProps<{
 }>()
 
 const { currency, withLabel, setCurrency } = useCurrency()
-
 </script>
 
 <template>
@@ -19,10 +18,15 @@ const { currency, withLabel, setCurrency } = useCurrency()
     @update:model-value="(currency: Currency) => setCurrency(currency)"
   >
     <template #value>
-      <span class="item in-header ">
-        <span v-if="showCurrencyIcon" class="icon">
-          <IconCurrency v-if="currency" :currency="currency" />
-        </span>{{ currency }}
+      <span class="item in-header">
+        <span
+          v-if="showCurrencyIcon"
+          class="icon"
+        >
+          <IconCurrency
+            v-if="currency"
+            :currency="currency"
+          /> </span>{{ currency }}
       </span>
     </template>
     <template #option="slotProps">
diff --git a/frontend/components/bc/BcDialog.vue b/frontend/components/bc/BcDialog.vue
index 61f9512f2..9000bdc30 100644
--- a/frontend/components/bc/BcDialog.vue
+++ b/frontend/components/bc/BcDialog.vue
@@ -5,15 +5,17 @@ const { width } = useWindowSize()
 const { setTouchableElement } = useSwipe()
 
 interface Props {
-  header?: string,
+  header?: string
 }
 const props = defineProps<Props>()
 
-const dialog = ref<{container: HTMLElement} | undefined>()
+const dialog = ref<{ container: HTMLElement } | undefined>()
 
-const visible = defineModel<boolean>() // requires two way binding as both the parent (only the parent can open the modal) and the component itself (clicking outside the modal closes it) need to update the visibility
+// requires two way binding as both the parent (only the parent can open the modal)
+// and the component itself (clicking outside the modal closes it) need to update the visibility
+const visible = defineModel<boolean>()
 
-const position = computed(() => width.value <= 430 ? 'bottom' : 'center')
+const position = computed(() => (width.value <= 430 ? 'bottom' : 'center'))
 
 const onShow = () => {
   if (dialog.value?.container) {
@@ -35,7 +37,7 @@ const onShow = () => {
     :draggable="false"
     :position="position"
     class="modal_container"
-    :class="{'p-dialog-header-hidden':!props.header && !$slots.header}"
+    :class="{ 'p-dialog-header-hidden': !props.header && !$slots.header }"
     @show="onShow"
   >
     <template #header>
diff --git a/frontend/components/bc/BcDropdown.vue b/frontend/components/bc/BcDropdown.vue
index 307f5c8a0..c781e33f6 100644
--- a/frontend/components/bc/BcDropdown.vue
+++ b/frontend/components/bc/BcDropdown.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-
 interface Props {
-  variant?: 'default' | 'table' | 'header',
+  variant?: 'default' | 'table' | 'header'
   panelClass?: string
 }
 
@@ -9,12 +8,21 @@ defineProps<Props>()
 </script>
 
 <template>
-  <Dropdown :class="variant" :panel-class="[variant, panelClass]">
+  <Dropdown
+    :class="variant"
+    :panel-class="[variant, panelClass]"
+  >
     <template #value="slotProps">
-      <slot name="value" v-bind="slotProps" />
+      <slot
+        name="value"
+        v-bind="slotProps"
+      />
     </template>
     <template #option="slotProps">
-      <slot name="option" v-bind="slotProps.option" />
+      <slot
+        name="option"
+        v-bind="slotProps.option"
+      />
     </template>
   </Dropdown>
 </template>
diff --git a/frontend/components/bc/BcFaq.vue b/frontend/components/bc/BcFaq.vue
index de0e80729..1a4710df5 100644
--- a/frontend/components/bc/BcFaq.vue
+++ b/frontend/components/bc/BcFaq.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faCaretRight
-} from '@fortawesome/pro-solid-svg-icons'
+import { faCaretRight } from '@fortawesome/pro-solid-svg-icons'
+
 interface Props {
   translationPath?: string
 }
@@ -13,39 +12,56 @@ const questions = computed(() => {
   const list = []
   // eslint-disable-next-line no-constant-condition
   while (true) {
-    const path: string = `${props.translationPath}.${(list.length)}`
+    const path: string = `${props.translationPath}.${list.length}`
     const question = tD($t, `${path}.question`)
     if (!question) {
       break
-    } else {
+    }
+    else {
       list.push({
         path,
         question,
         answers: tAll($t, `${path}.answer`),
         linkPath: tD($t, `${path}.link.path`),
-        linkLabel: tD($t, `${path}.link.label`)
+        linkLabel: tD($t, `${path}.link.label`),
       })
     }
   }
   return list
 })
-
 </script>
 
 <template>
-  <div v-if="questions.length" class="faq-container">
+  <div
+    v-if="questions.length"
+    class="faq-container"
+  >
     <h1>FAQ</h1>
     <Accordion class="accordion">
-      <AccordionTab v-for="quest in questions" :key="quest.path" :header="quest.question">
+      <AccordionTab
+        v-for="quest in questions"
+        :key="quest.path"
+        :header="quest.question"
+      >
         <template #headericon>
           <FontAwesomeIcon :icon="faCaretRight" />
         </template>
         <div class="answer">
-          <p v-for="(answer, index) in quest.answers" :key="index">
+          <p
+            v-for="(answer, index) in quest.answers"
+            :key="index"
+          >
             {{ answer }}
           </p>
-          <div v-if="quest.linkPath" class="footer">
-            <BcLink :to="quest.linkPath" target="_blank" class="link">
+          <div
+            v-if="quest.linkPath"
+            class="footer"
+          >
+            <BcLink
+              :to="quest.linkPath"
+              target="_blank"
+              class="link"
+            >
               {{ quest.linkLabel }}
             </BcLink>
           </div>
diff --git a/frontend/components/bc/BcIconToggle.vue b/frontend/components/bc/BcIconToggle.vue
index 91f7971b1..e00b7d717 100644
--- a/frontend/components/bc/BcIconToggle.vue
+++ b/frontend/components/bc/BcIconToggle.vue
@@ -3,8 +3,8 @@ import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 interface Props {
-  trueIcon?: IconDefinition,
-  falseIcon?: IconDefinition,
+  trueIcon?: IconDefinition
+  falseIcon?: IconDefinition
   disabled?: boolean
 }
 
@@ -21,19 +21,29 @@ const toggle = () => {
   }
   selected.value = !selected.value
 }
-
 </script>
 
 <template>
-  <div class="bc-toggle" :class="{ selected }" :disabled="disabled || null" @click="toggle">
+  <div
+    class="bc-toggle"
+    :class="{ selected }"
+    :disabled="disabled || null"
+    @click="toggle"
+  >
     <div class="icon true-icon">
       <slot name="trueIcon">
-        <FontAwesomeIcon v-if="trueIcon" :icon="trueIcon" />
+        <FontAwesomeIcon
+          v-if="trueIcon"
+          :icon="trueIcon"
+        />
       </slot>
     </div>
     <div class="icon false-icon">
       <slot name="falseIcon">
-        <FontAwesomeIcon v-if="falseIcon" :icon="falseIcon" />
+        <FontAwesomeIcon
+          v-if="falseIcon"
+          :icon="falseIcon"
+        />
       </slot>
     </div>
     <span class="slider" />
@@ -48,7 +58,7 @@ const toggle = () => {
   height: 23px;
   cursor: pointer;
 
-  &[disabled]{
+  &[disabled] {
     cursor: unset;
     pointer-events: none;
     opacity: 0.5;
diff --git a/frontend/components/bc/BcLink.vue b/frontend/components/bc/BcLink.vue
index 9202c56c8..b33af7173 100644
--- a/frontend/components/bc/BcLink.vue
+++ b/frontend/components/bc/BcLink.vue
@@ -1,5 +1,5 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
+
 <template>
   <NuxtLink :no-prefetch="true">
     <template #default>
diff --git a/frontend/components/bc/BcMaintenanceBanner.vue b/frontend/components/bc/BcMaintenanceBanner.vue
index 48e18bd35..34ae64220 100644
--- a/frontend/components/bc/BcMaintenanceBanner.vue
+++ b/frontend/components/bc/BcMaintenanceBanner.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { warn } from 'vue'
 
-const { public: { maintenanceTS } } = useRuntimeConfig()
+const {
+  public: { maintenanceTS },
+} = useRuntimeConfig()
 const { tick } = useInterval(60)
 const { t: $t } = useTranslation()
 
@@ -9,30 +11,40 @@ const maintenanceLabel = computed(() => {
   if (!maintenanceTS) {
     return
   }
-  const parsed = typeof maintenanceTS === 'number' ? maintenanceTS : parseInt(maintenanceTS)
+  const parsed
+    = typeof maintenanceTS === 'number' ? maintenanceTS : parseInt(maintenanceTS)
   if (isNaN(parsed)) {
-    warn('NUXT_PUBLIC_MAINTENANCE_TS is not convertible to an integer, a unix ts is expected')
+    warn(
+      'NUXT_PUBLIC_MAINTENANCE_TS is not convertible to an integer, a unix ts is expected',
+    )
     return undefined
-  } else if (parsed === 0) {
+  }
+  else if (parsed === 0) {
     return
   }
   const ts = new Date(parsed * 1000).getTime()
   if (ts > tick.value) {
-    return $t('maintenance.planned', { date: formatTsToAbsolute(ts / 1000, $t('locales.date'), true) })
-  } else {
+    return $t('maintenance.planned', {
+      date: formatTsToAbsolute(ts / 1000, $t('locales.date'), true),
+    })
+  }
+  else {
     return $t('maintenance.ongoing')
   }
 })
-
 </script>
+
 <template>
-  <div v-if="maintenanceLabel" class="maintenance-banner">
+  <div
+    v-if="maintenanceLabel"
+    class="maintenance-banner"
+  >
     {{ maintenanceLabel }}
   </div>
 </template>
 
 <style lang="scss" scoped>
-.maintenance-banner{
+.maintenance-banner {
   width: 100%;
   padding: var(--padding-large);
   background-color: var(--grey-4);
@@ -40,7 +52,7 @@ const maintenanceLabel = computed(() => {
   text-align: center;
 }
 .dark-mode {
-  .maintenance-banner{
+  .maintenance-banner {
     background-color: var(--very-dark-grey);
   }
 }
diff --git a/frontend/components/bc/BcToggle.vue b/frontend/components/bc/BcToggle.vue
index 5e4fe89da..f5597de48 100644
--- a/frontend/components/bc/BcToggle.vue
+++ b/frontend/components/bc/BcToggle.vue
@@ -1,25 +1,35 @@
 <script setup lang="ts">
 interface Props {
-  trueOption?: string,
-  falseOption?: string,
+  trueOption?: string
+  falseOption?: string
   disabled?: boolean
 }
 defineProps<Props>()
 
 const selected = defineModel<boolean>({ required: true })
-
 </script>
 
 <template>
   <div class="toggle-container">
     <slot name="falseOption">
-      <div v-if="falseOption" class="option-label" :class="{ selected: !selected }">
+      <div
+        v-if="falseOption"
+        class="option-label"
+        :class="{ selected: !selected }"
+      >
         {{ falseOption }}
       </div>
     </slot>
-    <InputSwitch v-model="selected" :disabled="disabled" />
+    <InputSwitch
+      v-model="selected"
+      :disabled="disabled"
+    />
     <slot name="trueOption">
-      <div v-if="trueOption" class="option-label" :class="{ selected }">
+      <div
+        v-if="trueOption"
+        class="option-label"
+        :class="{ selected }"
+      >
         {{ trueOption }}
       </div>
     </slot>
@@ -27,7 +37,7 @@ const selected = defineModel<boolean>({ required: true })
 </template>
 
 <style lang="scss" scoped>
-.toggle-container{
+.toggle-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/frontend/components/bc/BcTooltip.vue b/frontend/components/bc/BcTooltip.vue
index 4c2a65bd3..5483be281 100644
--- a/frontend/components/bc/BcTooltip.vue
+++ b/frontend/components/bc/BcTooltip.vue
@@ -2,14 +2,14 @@
 import { useTooltipStore } from '~/stores/useTooltipStore'
 
 interface Props {
-  text?: string,
-  title?: string,
+  text?: string
+  title?: string
   layout?: 'special' | 'default'
-  position?: 'top' | 'left' | 'right' | 'bottom',
-  hide?: boolean,
-  tooltipClass?: string,
-  fitContent?: boolean,
-  renderTextAsHtml?: boolean,
+  position?: 'top' | 'left' | 'right' | 'bottom'
+  hide?: boolean
+  tooltipClass?: string
+  fitContent?: boolean
+  renderTextAsHtml?: boolean
   scrollContainer?: string // query selector for scrollable parent container
   dontOpenPermanently?: boolean
   hoverDelay?: number
@@ -17,7 +17,9 @@ interface Props {
   tooltipTextAlign?: 'left' | 'center' | 'right'
 }
 
-const toolTipTextAlignWithDefault = computed(() => props.tooltipTextAlign || 'center')
+const toolTipTextAlignWithDefault = computed(
+  () => props.tooltipTextAlign || 'center',
+)
 
 const props = defineProps<Props>()
 const bcTooltipOwner = ref<HTMLElement | null>(null)
@@ -33,15 +35,32 @@ const slots = useSlots()
 const hasContent = computed(() => !!slots.tooltip || !!props.text)
 const canBeOpened = computed(() => !props.hide && hasContent.value)
 
-const { value: hover, bounce: bounceHover, instant: instantHover } = useDebounceValue<boolean>(false, 50)
-const { value: hoverTooltip, bounce: bounceHoverTooltip, instant: instantHoverTooltip } = useDebounceValue<boolean>(false, 50)
-const isSelected = computed(() => !!bcTooltipOwner.value && selected.value === bcTooltipOwner.value)
-const isOpen = computed(() => isSelected.value || hover.value || hoverTooltip.value)
+const {
+  value: hover,
+  bounce: bounceHover,
+  instant: instantHover,
+} = useDebounceValue<boolean>(false, 50)
+const {
+  value: hoverTooltip,
+  bounce: bounceHoverTooltip,
+  instant: instantHoverTooltip,
+} = useDebounceValue<boolean>(false, 50)
+const isSelected = computed(
+  () => !!bcTooltipOwner.value && selected.value === bcTooltipOwner.value,
+)
+const isOpen = computed(
+  () => isSelected.value || hover.value || hoverTooltip.value,
+)
 
 const pos = ref<{ top: string, left: string }>({ top: '0', left: '0' })
 
 const classList = computed(() => {
-  return [props.layout || 'default', props.position || 'bottom', isOpen.value ? 'open' : 'closed', props.fitContent ? 'fit-content' : '']
+  return [
+    props.layout || 'default',
+    props.position || 'bottom',
+    isOpen.value ? 'open' : 'closed',
+    props.fitContent ? 'fit-content' : '',
+  ]
 })
 
 const setPosition = () => {
@@ -58,7 +77,8 @@ const setPosition = () => {
     return
   }
   if (!tt) {
-    // we need to wait for the tt to be added to the dome to get it's measure, but we set the pos at an estimated value until then
+    // we need to wait for the tt to be added to the dome to get it's measure,
+    // but we set the pos at an estimated value until then
     tooltipAddedTimeout.value = setTimeout(setPosition, 10)
   }
 
@@ -80,8 +100,8 @@ const setPosition = () => {
       top = rect.top + rect.height / 2 - ttHeight / 2
       break
   }
-  left = Math.max(0, Math.min(left, (width.value - ttWidth)))
-  top = Math.max(0, Math.min(top, (height.value - ttHeight)))
+  left = Math.max(0, Math.min(left, width.value - ttWidth))
+  top = Math.max(0, Math.min(top, height.value - ttHeight))
   pos.value = { top: `${top}px`, left: `${left}px` }
   if (bcTooltip.value) {
     let centerX = -5 + Math.abs(left - rect.left) + rect.width / 2
@@ -119,10 +139,12 @@ const setPosition = () => {
 const handleClick = () => {
   if (isSelected.value) {
     doSelect(null)
-  } else if (canBeOpened.value) {
+  }
+  else if (canBeOpened.value) {
     if (props.dontOpenPermanently) {
       instantHover(true)
-    } else {
+    }
+    else {
       doSelect(bcTooltipOwner.value)
     }
     setPosition()
@@ -133,7 +155,8 @@ const onHover = () => {
   if (canBeOpened.value && !selected.value) {
     if (props.hoverDelay) {
       bounceHover(true, false, false, props.hoverDelay)
-    } else {
+    }
+    else {
       instantHover(true)
       setPosition()
     }
@@ -141,7 +164,10 @@ const onHover = () => {
 }
 
 const doHide = (event?: Event) => {
-  if (event?.target === bcTooltipOwner.value || isParent(bcTooltipOwner.value, event?.target as HTMLElement)) {
+  if (
+    event?.target === bcTooltipOwner.value
+    || isParent(bcTooltipOwner.value, event?.target as HTMLElement)
+  ) {
     return
   }
   removeParentListeners()
@@ -160,7 +186,8 @@ const checkScrollListener = (add: boolean) => {
     if (container) {
       if (add) {
         container.addEventListener('scroll', doHide)
-      } else {
+      }
+      else {
         container.removeEventListener('scroll', doHide)
       }
     }
@@ -176,13 +203,16 @@ const removeScrollParent = () => {
   scrollParents.forEach(elem => elem.removeEventListener('scroll', doHide))
 }
 
-watch(() => [props.title, props.text], () => {
-  if (isOpen.value) {
-    requestAnimationFrame(() => {
-      setPosition()
-    })
-  }
-})
+watch(
+  () => [props.title, props.text],
+  () => {
+    if (isOpen.value) {
+      requestAnimationFrame(() => {
+        setPosition()
+      })
+    }
+  },
+)
 
 const onWindowResize = () => {
   doHide()
@@ -199,7 +229,7 @@ watch(isOpen, (value) => {
   }
 })
 
-function removeParentListeners () {
+function removeParentListeners() {
   document.removeEventListener('click', doHide)
   document.removeEventListener('scroll', doHide)
   window.removeEventListener('resize', onWindowResize)
@@ -213,8 +243,8 @@ onUnmounted(() => {
     doSelect(null)
   }
 })
-
 </script>
+
 <template>
   <div
     ref="bcTooltipOwner"
@@ -225,15 +255,22 @@ onUnmounted(() => {
     @blur="bounceHover(false, false, true)"
   >
     <slot />
-    <Teleport v-if="isOpen" to="body">
-      <div class="bc-tooltip-wrapper" :style="{...pos, ...{ width: tooltipWidth }}"  :class="tooltipClass">
+    <Teleport
+      v-if="isOpen"
+      to="body"
+    >
+      <div
+        class="bc-tooltip-wrapper"
+        :style="{ ...pos, ...{ width: tooltipWidth } }"
+        :class="tooltipClass"
+      >
         <div
-        ref="bcTooltip"
-        class="bc-tooltip"
-        :class="classList"
-        @click="$event.stopImmediatePropagation()"
-        @mouseover="instantHoverTooltip(true)"
-        @mouseleave="bounceHoverTooltip(false, false, true)"
+          ref="bcTooltip"
+          class="bc-tooltip"
+          :class="classList"
+          @click="$event.stopImmediatePropagation()"
+          @mouseover="instantHoverTooltip(true)"
+          @mouseleave="bounceHoverTooltip(false, false, true)"
         >
           <slot name="tooltip">
             <span>
@@ -345,7 +382,6 @@ onUnmounted(() => {
     &::after {
       border-color: var(--tt-bg-color) transparent transparent transparent;
     }
-
   }
 
   &.right {
@@ -375,11 +411,11 @@ onUnmounted(() => {
   }
 }
 
-.dark-mode{
+.dark-mode {
   .bc-tooltip {
-    &.special{
-    --tt-bg-color: var(--light-black);
-    --tt-color: var(--light-grey);
+    &.special {
+      --tt-bg-color: var(--light-black);
+      --tt-color: var(--light-grey);
     }
   }
 }
diff --git a/frontend/components/bc/BcTranslation.vue b/frontend/components/bc/BcTranslation.vue
index a0d47ef38..ba12b3aa1 100644
--- a/frontend/components/bc/BcTranslation.vue
+++ b/frontend/components/bc/BcTranslation.vue
@@ -1,21 +1,21 @@
 <script lang="ts" setup>
-import type { MessageSchema } from '~/i18n.config';
-import type { KeyPaths } from '~/types/helper';
+import type { MessageSchema } from '~/i18n.config'
+import type { KeyPaths } from '~/types/helper'
 
 defineProps<{
   /**
    * The path to the key in the translation file (e.g. en.json)
    */
-  keypath: KeyPaths<MessageSchema>,
-  linkpath?: KeyPaths<MessageSchema>,
+  keypath: KeyPaths<MessageSchema>
+  linkpath?: KeyPaths<MessageSchema>
   tag?: keyof HTMLElementTagNameMap
-   /**
+  /**
    * URL to link to
-   * 
+   *
    * @example
-   * 
+   *
    * Translation key has to be under `${keypath}._link`
-   * 
+   *
    *  // en.json
    * {
    *  "notifications": {
@@ -23,13 +23,12 @@ defineProps<{
    *   "_link": "Click here"
    * }
    */
-  to?: string,
+  to?: string
 }>()
-
 </script>
 
 <template>
-  <I18nT 
+  <I18nT
     :keypath
     scope="global"
     :tag="tag || 'span'"
@@ -51,5 +50,4 @@ defineProps<{
   </I18nT>
 </template>
 
-<style lang="scss" scoped>
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
diff --git a/frontend/components/bc/CookieModal.vue b/frontend/components/bc/CookieModal.vue
index 09ee419d8..291ab0d86 100644
--- a/frontend/components/bc/CookieModal.vue
+++ b/frontend/components/bc/CookieModal.vue
@@ -2,7 +2,10 @@
 import { COOKIE_KEY, type CookiesPreference } from '~/types/cookie'
 import { Target } from '~/types/links'
 
-const cookiePreference = useCookie<CookiesPreference>(COOKIE_KEY.COOKIES_PREFERENCE, { default: () => undefined })
+const cookiePreference = useCookie<CookiesPreference>(
+  COOKIE_KEY.COOKIES_PREFERENCE,
+  { default: () => undefined },
+)
 const { t: $t } = useTranslation()
 
 const setCookiePreference = (value: CookiesPreference) => {
@@ -22,18 +25,25 @@ const visible = computed(() => cookiePreference.value === undefined)
   >
     <div class="dialog-container">
       <div class="text-container">
-        {{ tOf($t, 'cookies.text', 0) }}
-        <BcLink to="https://storage.googleapis.com/legal.beaconcha.in/privacy.pdf" :target="Target.External" class="link">
-          {{ tOf($t, 'cookies.text', 1) }}
+        {{ tOf($t, "cookies.text", 0) }}
+        <BcLink
+          to="https://storage.googleapis.com/legal.beaconcha.in/privacy.pdf"
+          :target="Target.External"
+          class="link"
+        >
+          {{ tOf($t, "cookies.text", 1) }}
         </BcLink>
-        {{ tOf($t, 'cookies.text', 2) }}
+        {{ tOf($t, "cookies.text", 2) }}
       </div>
       <div class="button-container">
-        <div class="necessary-button" @click="setCookiePreference('functional')">
-          {{ $t('cookies.only_necessary') }}
+        <div
+          class="necessary-button"
+          @click="setCookiePreference('functional')"
+        >
+          {{ $t("cookies.only_necessary") }}
         </div>
         <Button @click="setCookiePreference('all')">
-          {{ $t('cookies.accept_all') }}
+          {{ $t("cookies.accept_all") }}
         </Button>
       </div>
     </div>
diff --git a/frontend/components/bc/CopyLabel.vue b/frontend/components/bc/CopyLabel.vue
index 11444f557..b68a0db4a 100644
--- a/frontend/components/bc/CopyLabel.vue
+++ b/frontend/components/bc/CopyLabel.vue
@@ -1,15 +1,24 @@
 <script setup lang="ts">
 interface Props {
-  value?: string,
+  value?: string
   label?: string // will default to value
 }
 defineProps<Props>()
-
 </script>
+
 <template>
-  <div v-if="value" class="copy-label">
-    <input :disabled="true" :value="label || value">
-    <BcCopyToClipboard :value="value" class="copy-icon" />
+  <div
+    v-if="value"
+    class="copy-label"
+  >
+    <input
+      :disabled="true"
+      :value="label || value"
+    >
+    <BcCopyToClipboard
+      :value="value"
+      class="copy-icon"
+    />
   </div>
 </template>
 
diff --git a/frontend/components/bc/CopyToClipboard.vue b/frontend/components/bc/CopyToClipboard.vue
index b10d54bf2..84891abe7 100644
--- a/frontend/components/bc/CopyToClipboard.vue
+++ b/frontend/components/bc/CopyToClipboard.vue
@@ -1,24 +1,28 @@
-<script setup lang="ts">import {
-  faCopy
-} from '@fortawesome/pro-solid-svg-icons'
+<script setup lang="ts">
+import { faCopy } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { warn } from 'vue'
 import BcTooltip from './BcTooltip.vue'
 
 interface Props {
-  value?: string,
+  value?: string
 }
 const props = defineProps<Props>()
 
 const { t: $t } = useTranslation()
-const { value: tooltip, bounce, instant } = useDebounceValue<string>($t('clipboard.copy'), 2000)
+const {
+  value: tooltip,
+  bounce,
+  instant,
+} = useDebounceValue<string>($t('clipboard.copy'), 2000)
 
-function copyToClipboard (): void {
+function copyToClipboard(): void {
   if (!props.value) {
     return
   }
 
-  navigator.clipboard.writeText(props.value)
+  navigator.clipboard
+    .writeText(props.value)
     .catch((error) => {
       warn('Error copying text to clipboard:', error)
     })
@@ -27,16 +31,25 @@ function copyToClipboard (): void {
       bounce($t('clipboard.copy'))
     })
 }
-
 </script>
+
 <template>
-  <BcTooltip v-if="props.value" :text="tooltip" position="top" tooltip-class="tooltip">
-    <FontAwesomeIcon :icon="faCopy" class="pointer" @click.stop.prevent="copyToClipboard" />
+  <BcTooltip
+    v-if="props.value"
+    :text="tooltip"
+    position="top"
+    tooltip-class="tooltip"
+  >
+    <FontAwesomeIcon
+      :icon="faCopy"
+      class="pointer"
+      @click.stop.prevent="copyToClipboard"
+    />
   </BcTooltip>
 </template>
 
 <style>
-.tooltip{
+.tooltip {
   min-width: max-content;
 }
 </style>
diff --git a/frontend/components/bc/DataWrapper.vue b/frontend/components/bc/DataWrapper.vue
index 66f0b14e3..d6e3478f8 100644
--- a/frontend/components/bc/DataWrapper.vue
+++ b/frontend/components/bc/DataWrapper.vue
@@ -6,7 +6,9 @@ const { tick } = useInterval(12)
 const { refreshLatestState } = useLatestStateStore()
 const { loadAvailableNetworks, setCurrentNetwork } = useNetworkStore()
 
-await useAsyncData('latest_state', () => refreshLatestState(), { watch: [tick] })
+await useAsyncData('latest_state', () => refreshLatestState(), {
+  watch: [tick],
+})
 await useAsyncData('get_user', () => getUser())
 await useAsyncData('get-supported-networks', () => loadAvailableNetworks())
 
diff --git a/frontend/components/bc/FeatureCheck.vue b/frontend/components/bc/FeatureCheck.vue
index ac2600be0..4bd8152ef 100644
--- a/frontend/components/bc/FeatureCheck.vue
+++ b/frontend/components/bc/FeatureCheck.vue
@@ -3,14 +3,22 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCheck, faClose } from '@fortawesome/pro-solid-svg-icons'
 
 interface Props {
-  available?: boolean,
+  available?: boolean
 }
 defineProps<Props>()
 </script>
 
 <template>
-  <FontAwesomeIcon v-if="available" :icon="faCheck" class="checkmark" />
-  <FontAwesomeIcon v-else :icon="faClose" class="cross" />
+  <FontAwesomeIcon
+    v-if="available"
+    :icon="faCheck"
+    class="checkmark"
+  />
+  <FontAwesomeIcon
+    v-else
+    :icon="faClose"
+    class="cross"
+  />
 </template>
 
 <style lang="scss" scoped>
diff --git a/frontend/components/bc/FractionBar.vue b/frontend/components/bc/FractionBar.vue
index 758e82c57..d0870db0a 100644
--- a/frontend/components/bc/FractionBar.vue
+++ b/frontend/components/bc/FractionBar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 interface Props {
-  fillPercentage?: number,
+  fillPercentage?: number
 }
 const props = defineProps<Props>()
 
@@ -10,8 +10,14 @@ const fillPercentage = computed(() => {
 </script>
 
 <template>
-  <div v-if="fillPercentage" class="fraction-bar">
-    <div class="fill" :style="{ width: fillPercentage }" />
+  <div
+    v-if="fillPercentage"
+    class="fraction-bar"
+  >
+    <div
+      class="fill"
+      :style="{ width: fillPercentage }"
+    />
   </div>
 </template>
 
diff --git a/frontend/components/bc/InputNumber.vue b/frontend/components/bc/InputNumber.vue
index 93937850c..d9ea19d85 100644
--- a/frontend/components/bc/InputNumber.vue
+++ b/frontend/components/bc/InputNumber.vue
@@ -3,25 +3,42 @@ import type { Nullable } from 'primevue/ts-helpers'
 import InputNumber from 'primevue/inputnumber'
 
 const props = defineProps<{
-  min: number,
-  max: number,
+  min: number
+  max: number
   maxFractionDigits: number
 }>()
 
 const parentVmodel = defineModel<number>({ required: true })
-const bridgedVmodel = usePrimitiveRefBridge<number, Nullable<number>>(parentVmodel, n => (isNaN(n) ? null : n), n => (n ?? NaN))
+const bridgedVmodel = usePrimitiveRefBridge<number, Nullable<number>>(
+  parentVmodel,
+  n => (isNaN(n) ? null : n),
+  n => n ?? NaN,
+)
 
-function sendValue (input: Nullable<number>) : void {
-  if (input === undefined || input === null || isNaN(input) || input < props.min || input > props.max) {
+function sendValue(input: Nullable<number>): void {
+  if (
+    input === undefined
+    || input === null
+    || isNaN(input)
+    || input < props.min
+    || input > props.max
+  ) {
     input = NaN
-  } else {
+  }
+  else {
     const stringifyied = String(input)
     const comma = stringifyied.indexOf('.')
-    if (comma >= 0 && stringifyied.length - comma - 1 > props.maxFractionDigits) {
+    if (
+      comma >= 0
+      && stringifyied.length - comma - 1 > props.maxFractionDigits
+    ) {
       input = NaN
     }
   }
-  bridgedVmodel.pauseBridgeFromNowOn() // this allows us to output the value to the parent v-model without causing an injection of the value back into the InputNumber v-model (that would empty InputNumber at each key stroke if the input is invalid)
+  // this allows us to output the value to the parent v-model without causing
+  // an injection of the value back into the InputNumber v-model (that would
+  // empty InputNumber at each key stroke if the input is invalid)
+  bridgedVmodel.pauseBridgeFromNowOn()
   parentVmodel.value = input
   bridgedVmodel.wakeupBridgeAtNextTick()
 }
@@ -35,12 +52,18 @@ function sendValue (input: Nullable<number>) : void {
     :max-fraction-digits="maxFractionDigits"
     locale="en-US"
     class="why-the-hell-dont-they-fix-this-bug"
-    @input="input => { if (typeof input.value !== 'string') sendValue(input.value) }"
+    @input="
+      (input) => {
+        if (typeof input.value !== 'string') sendValue(input.value);
+      }
+    "
   />
 </template>
 
 <style scoped lang="scss">
 .why-the-hell-dont-they-fix-this-bug {
-  :deep(input) { width: 100%; }
+  :deep(input) {
+    width: 100%;
+  }
 }
 </style>
diff --git a/frontend/components/bc/LoadingSpinner.vue b/frontend/components/bc/LoadingSpinner.vue
index 1ca61bbe9..d50a783fc 100644
--- a/frontend/components/bc/LoadingSpinner.vue
+++ b/frontend/components/bc/LoadingSpinner.vue
@@ -5,11 +5,18 @@ interface Props {
   alignment?: 'center' | 'default'
 }
 defineProps<Props>()
-
 </script>
+
 <template>
-  <div v-if="loading !== false" class="spinning-container" :class="[alignment]">
-    <div class="spinner" :class="[size]">
+  <div
+    v-if="loading !== false"
+    class="spinning-container"
+    :class="[alignment]"
+  >
+    <div
+      class="spinner"
+      :class="[size]"
+    >
       <span />
     </div>
   </div>
@@ -47,7 +54,7 @@ defineProps<Props>()
     border: 2px solid currentColor;
     border-right-color: transparent;
     border-radius: 50%;
-    animation: spinner-rotation .75s linear infinite;
+    animation: spinner-rotation 0.75s linear infinite;
 
     &.small {
       width: 20px;
@@ -65,7 +72,6 @@ defineProps<Props>()
       width: 100%;
       height: 100%;
     }
-
   }
-
-}</style>
+}
+</style>
diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index bc09ee497..313898735 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -14,15 +14,21 @@ const { availableNetworks, isNetworkDisabled } = useNetworkStore()
  *  Otherwise, give a v-model. If the v-model is
  *   a ChainIDs: only one network can be selected by the user,
  *   an array of ChainIDs: several networks can be selected by the user */
-const selection = defineModel<ChainIDs|ChainIDs[]>({ required: false })
+const selection = defineModel<ChainIDs | ChainIDs[]>({ required: false })
 
 let barSelection: Ref<string> | Ref<string[]>
 if (props.readonlyNetworks) {
   barSelection = ref<string[]>([])
-} else if (Array.isArray(selection.value)) {
-  barSelection = useArrayRefBridge<ChainIDs, string>(selection as Ref<ChainIDs[]>)
-} else {
-  barSelection = usePrimitiveRefBridge<ChainIDs, string>(selection as Ref<ChainIDs>)
+}
+else if (Array.isArray(selection.value)) {
+  barSelection = useArrayRefBridge<ChainIDs, string>(
+    selection as Ref<ChainIDs[]>,
+  )
+}
+else {
+  barSelection = usePrimitiveRefBridge<ChainIDs, string>(
+    selection as Ref<ChainIDs>,
+  )
 }
 
 const buttons = computed(() => {
@@ -35,7 +41,7 @@ const buttons = computed(() => {
       componentClass: 'maximum',
       value: String(chainId),
       disabled: isNetworkDisabled(chainId),
-      tooltip: ChainInfo[chainId].name
+      tooltip: ChainInfo[chainId].name,
     })
   }
   return list
@@ -43,8 +49,18 @@ const buttons = computed(() => {
 </script>
 
 <template>
-  <BcToggleMultiBar v-if="Array.isArray(barSelection)" v-model="barSelection" :buttons="buttons" :readonly-mode="!!readonlyNetworks" />
-  <BcToggleSingleBar v-else v-model="barSelection" :buttons="buttons" layout="minimal" />
+  <BcToggleMultiBar
+    v-if="Array.isArray(barSelection)"
+    v-model="barSelection"
+    :buttons="buttons"
+    :readonly-mode="!!readonlyNetworks"
+  />
+  <BcToggleSingleBar
+    v-else
+    v-model="barSelection"
+    :buttons="buttons"
+    layout="minimal"
+  />
 </template>
 
 <style lang="scss">
diff --git a/frontend/components/bc/PageWrapper.vue b/frontend/components/bc/PageWrapper.vue
index 69221b0fb..d4339f532 100644
--- a/frontend/components/bc/PageWrapper.vue
+++ b/frontend/components/bc/PageWrapper.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  isHomePage?: boolean,
+  isHomePage?: boolean
   minimalistHeader?: boolean
 }>()
 </script>
@@ -8,7 +8,10 @@ defineProps<{
 <template>
   <BcCookieModal />
   <div class="page">
-    <BcHeaderMainHeader :is-home-page="!!isHomePage" :minimalist="!!minimalistHeader" />
+    <BcHeaderMainHeader
+      :is-home-page="!!isHomePage"
+      :minimalist="!!minimalistHeader"
+    />
     <BcMaintenanceBanner />
     <div class="content">
       <slot name="top" />
@@ -32,6 +35,7 @@ defineProps<{
 
 .content {
   width: var(--content-width);
-  margin: var(--padding) var(--content-margin) var(--padding) var(--content-margin);
+  margin: var(--padding) var(--content-margin) var(--padding)
+    var(--content-margin);
 }
 </style>
diff --git a/frontend/components/bc/SearchbarGeneral.vue b/frontend/components/bc/SearchbarGeneral.vue
index c0a4b89d8..a3edeb70a 100644
--- a/frontend/components/bc/SearchbarGeneral.vue
+++ b/frontend/components/bc/SearchbarGeneral.vue
@@ -1,76 +1,84 @@
 <script setup lang="ts">
-import { type SearchbarShape, type SearchbarColors, SearchbarPurpose, ResultType, type ResultSuggestion, pickHighestPriorityAmongBestMatchings } from '~/types/searchbar'
+import {
+  type SearchbarShape,
+  type SearchbarColors,
+  SearchbarPurpose,
+  ResultType,
+  type ResultSuggestion,
+  pickHighestPriorityAmongBestMatchings,
+} from '~/types/searchbar'
 
 defineProps<{
-  barShape: SearchbarShape,
-  colorTheme: SearchbarColors,
+  barShape: SearchbarShape
+  colorTheme: SearchbarColors
   screenWidthCausingSuddenChange: number // this information is needed by MiddleEllipsis
 }>()
 
-async function redirectToRelevantPage (result : ResultSuggestion) {
-  let path : string
+async function redirectToRelevantPage(result: ResultSuggestion) {
+  let path: string
   let q = ''
   const networkPath = '/networks/' + result.chainId
 
   switch (result.type) {
-    case ResultType.Tokens :
-    case ResultType.NFTs :
+    case ResultType.Tokens:
+    case ResultType.NFTs:
       path = '/token/' + result.queryParam
       break
-    case ResultType.Epochs :
+    case ResultType.Epochs:
       path = networkPath + '/epoch/' + result.queryParam
       break
-    case ResultType.Slots :
+    case ResultType.Slots:
       path = networkPath + '/slot/' + result.queryParam
       break
-    case ResultType.Blocks :
+    case ResultType.Blocks:
       path = networkPath + '/block/' + result.queryParam
       break
-    case ResultType.BlockRoots :
-    case ResultType.StateRoots :
-    case ResultType.Transactions :
+    case ResultType.BlockRoots:
+    case ResultType.StateRoots:
+    case ResultType.Transactions:
       path = networkPath + '/tx/' + result.queryParam
       break
-    case ResultType.TransactionBatches :
+    case ResultType.TransactionBatches:
       path = networkPath + '/transactionbatch/' + result.queryParam
       break
-    case ResultType.StateBatches :
+    case ResultType.StateBatches:
       path = networkPath + '/batch/' + result.queryParam
       break
-    case ResultType.Contracts :
-    case ResultType.Accounts :
-    case ResultType.EnsAddresses :
+    case ResultType.Contracts:
+    case ResultType.Accounts:
+    case ResultType.EnsAddresses:
       path = '/address/' + result.queryParam
       break
-    case ResultType.EnsOverview :
+    case ResultType.EnsOverview:
       path = '/ens/' + result.queryParam
       break
-    case ResultType.Graffiti :
+    case ResultType.Graffiti:
       path = networkPath + '/slots'
       q = result.queryParam
       break
-    case ResultType.ValidatorsByIndex :
-    case ResultType.ValidatorsByPubkey :
+    case ResultType.ValidatorsByIndex:
+    case ResultType.ValidatorsByPubkey:
       path = networkPath + '/validator/' + result.queryParam
       break
-    case ResultType.ValidatorsByDepositAddress :
-    case ResultType.ValidatorsByDepositEnsName :
+    case ResultType.ValidatorsByDepositAddress:
+    case ResultType.ValidatorsByDepositEnsName:
       path = networkPath + '/validators/deposits'
       q = result.queryParam
       break
-    case ResultType.ValidatorsByWithdrawalCredential :
-    case ResultType.ValidatorsByWithdrawalAddress :
-    case ResultType.ValidatorsByWithdrawalEnsName :
+    case ResultType.ValidatorsByWithdrawalCredential:
+    case ResultType.ValidatorsByWithdrawalAddress:
+    case ResultType.ValidatorsByWithdrawalEnsName:
       path = networkPath + '/validators/withdrawals'
       q = result.queryParam
       break
-    default :
+    default:
       return
   }
 
   if (q !== '') {
     await navigateTo({ path, query: { q } })
-  } else {
+  }
+  else {
     await navigateTo({ path })
   }
 }
diff --git a/frontend/components/bc/ad/AdComponent.vue b/frontend/components/bc/ad/AdComponent.vue
index 94fc6e49b..f17d9d50f 100644
--- a/frontend/components/bc/ad/AdComponent.vue
+++ b/frontend/components/bc/ad/AdComponent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AdConfiguration } from '~/types/adConfiguration'
+
 const reviveId = '5b200397ccf8a9353bf44ef99b45268c'
 interface Props {
   ad: AdConfiguration
@@ -9,7 +10,9 @@ const props = defineProps<Props>()
 const adComponent = ref<HTMLElement | null>(null)
 const interval = ref<NodeJS.Timeout | null>(null)
 
-const containerId = computed(() => `${props.ad.key}-${props.ad.jquery_selector}-${props.ad.insert_mode}`)
+const containerId = computed(
+  () => `${props.ad.key}-${props.ad.jquery_selector}-${props.ad.insert_mode}`,
+)
 
 const refreshAd = () => {
   const ins = document.getElementById(containerId.value)?.firstElementChild
@@ -19,7 +22,12 @@ const refreshAd = () => {
 }
 const makeSureReviveIsInitiated = () => {
   const ins = document.getElementById(containerId.value)?.firstElementChild
-  if (ins && ins.getAttribute('data-revive-id') && !ins.getAttribute('data-revive-seq') && !ins.getAttribute('data-revive-loaded')) {
+  if (
+    ins
+    && ins.getAttribute('data-revive-id')
+    && !ins.getAttribute('data-revive-seq')
+    && !ins.getAttribute('data-revive-loaded')
+  ) {
     window.reviveAsync?.[reviveId].refresh()
   }
 }
@@ -56,17 +64,28 @@ onBeforeUnmount(() => {
   }
 })
 </script>
+
 <template>
   <div ref="adComponent">
     <div v-if="ad.banner_id">
       <div class="ad-banner">
-        <div :id="containerId" class="revive-container">
-          <ins ref="ins" :data-revive-zoneid="ad.banner_id" :data-revive-id="reviveId" />
+        <div
+          :id="containerId"
+          class="revive-container"
+        >
+          <ins
+            ref="ins"
+            :data-revive-zoneid="ad.banner_id"
+            :data-revive-id="reviveId"
+          />
         </div>
       </div>
     </div>
     <!-- eslint-disable vue/no-v-html -->
-    <div v-else v-html="ad.html_content" />
+    <div
+      v-else
+      v-html="ad.html_content"
+    />
   </div>
 </template>
 
diff --git a/frontend/components/bc/ad/AdControl.vue b/frontend/components/bc/ad/AdControl.vue
index 37f9b09db..b11bca88e 100644
--- a/frontend/components/bc/ad/AdControl.vue
+++ b/frontend/components/bc/ad/AdControl.vue
@@ -2,17 +2,26 @@
 const { ads } = useCurrentAds()
 
 const top = computed(() => ads.value?.find(c => c.jquery_selector === 'top'))
-const rest = computed(() => ads.value?.filter(c => c.jquery_selector !== 'top'))
-
+const rest = computed(() =>
+  ads.value?.filter(c => c.jquery_selector !== 'top'),
+)
 </script>
+
 <template>
   <ClientOnly>
-    <BcAdComponent v-if="top" id="revive_top" :ad="top" />
-    <Teleport v-for="config in rest" :key="config.jquery_selector" :to="config.jquery_selector">
+    <BcAdComponent
+      v-if="top"
+      id="revive_top"
+      :ad="top"
+    />
+    <Teleport
+      v-for="config in rest"
+      :key="config.jquery_selector"
+      :to="config.jquery_selector"
+    >
       <BcAdComponent :ad="config" />
     </Teleport>
   </ClientOnly>
 </template>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/frontend/components/bc/dialog/BcDialogConfirm.vue b/frontend/components/bc/dialog/BcDialogConfirm.vue
index 5f71aeff3..f813060de 100644
--- a/frontend/components/bc/dialog/BcDialogConfirm.vue
+++ b/frontend/components/bc/dialog/BcDialogConfirm.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 interface Props {
   title?: string
   question?: string
@@ -20,24 +19,44 @@ const closeDialog = (response: boolean) => {
 
 <template>
   <div class="content">
-    <div v-if="props?.title" class="title">
+    <div
+      v-if="props?.title"
+      class="title"
+    >
       {{ props?.title }}
     </div>
-    <div v-if="props?.question" class="question">
+    <div
+      v-if="props?.question"
+      class="question"
+    >
       {{ props?.question }}
     </div>
     <div class="footer">
-      <Button v-if="props?.severity !== 'danger'" type="button" :label="noLabel" @click="closeDialog(false)" />
-      <div v-else class="discreet-button" @click="closeDialog(false)">
+      <Button
+        v-if="props?.severity !== 'danger'"
+        type="button"
+        :label="noLabel"
+        @click="closeDialog(false)"
+      />
+      <div
+        v-else
+        class="discreet-button"
+        @click="closeDialog(false)"
+      >
         {{ noLabel }}
       </div>
-      <Button type="button" :severity="props?.severity === 'danger' ? `danger` : undefined" :label="yesLabel" @click="closeDialog(true)" />
+      <Button
+        type="button"
+        :severity="props?.severity === 'danger' ? `danger` : undefined"
+        :label="yesLabel"
+        @click="closeDialog(true)"
+      />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/fonts.scss";
 
 .content {
   display: flex;
@@ -63,7 +82,7 @@ const closeDialog = (response: boolean) => {
     margin-top: var(--padding);
     gap: var(--padding);
 
-    .discreet-button{
+    .discreet-button {
       @include fonts.button_text;
       cursor: pointer;
       color: var(--text-color-discreet);
diff --git a/frontend/components/bc/footer/ColorThemeToggle.vue b/frontend/components/bc/footer/ColorThemeToggle.vue
index 8e8aee05a..368015fd4 100644
--- a/frontend/components/bc/footer/ColorThemeToggle.vue
+++ b/frontend/components/bc/footer/ColorThemeToggle.vue
@@ -3,9 +3,11 @@ const colorMode = useColorMode()
 const switchPosition = ref('dark')
 
 onMounted(() => {
-  // intializes the theme with what the user selected the last time or with her/his system preference if (s)he never clicked the button
+  // intializes the theme with what the user selected the last time or with
+  // her/his system preference if (s)he never clicked the button
   switchPosition.value = colorMode.value
-  // colorMode.preference should not be read here because its value can be 'system', whereas colorMode.value contains either 'dark' or 'light'
+  // colorMode.preference should not be read here because its value can be 'system',
+  // whereas colorMode.value contains either 'dark' or 'light'
 })
 </script>
 
@@ -59,7 +61,7 @@ input {
   transition: 0.2s;
 }
 
-input:checked+.slider {
+input:checked + .slider {
   -webkit-transform: translateX(17px);
   -ms-transform: translateX(17px);
   transform: translateX(17px);
diff --git a/frontend/components/bc/footer/LinkList.vue b/frontend/components/bc/footer/LinkList.vue
index bc8966633..d35c24782 100644
--- a/frontend/components/bc/footer/LinkList.vue
+++ b/frontend/components/bc/footer/LinkList.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faDiscord, faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'
+import {
+  faDiscord,
+  faTwitter,
+  faGithub,
+} from '@fortawesome/free-brands-svg-icons'
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import {
   faBuilding,
@@ -8,7 +12,7 @@ import {
   faUserSecret,
   faUserAstronaut,
   faShoppingCart,
-  faCheckCircle
+  faCheckCircle,
 } from '@fortawesome/pro-solid-svg-icons'
 
 import { Target } from '~/types/links'
@@ -19,42 +23,99 @@ const columns: Row[] = [
   {
     title: $t('footer.legal_notices'),
     links: [
-      [$t('footer.imprint'), faBuilding, 'https://beaconcha.in/imprint', Target.External],
-      [$t('footer.terms'), faFileContract, 'https://storage.googleapis.com/legal.beaconcha.in/tos.pdf', Target.External],
-      [$t('footer.privacy'), faUserSecret, 'https://storage.googleapis.com/legal.beaconcha.in/privacy.pdf', Target.External]
-    ]
+      [
+        $t('footer.imprint'),
+        faBuilding,
+        'https://beaconcha.in/imprint',
+        Target.External,
+      ],
+      [
+        $t('footer.terms'),
+        faFileContract,
+        'https://storage.googleapis.com/legal.beaconcha.in/tos.pdf',
+        Target.External,
+      ],
+      [
+        $t('footer.privacy'),
+        faUserSecret,
+        'https://storage.googleapis.com/legal.beaconcha.in/privacy.pdf',
+        Target.External,
+      ],
+    ],
   },
   {
     title: $t('footer.resources'),
     links: [
-      // [$t('footer.api_pricing'), faFileInvoiceDollar, '/pricing', Target.Internal], // TODO: Add link once API prices are available
+      // TODO: Add link once API prices are available
+      // [$t('footer.api_pricing'), faFileInvoiceDollar, '/pricing', Target.Internal],
       [$t('footer.premium'), faUserAstronaut, '/pricing', Target.Internal],
-      // [$t('footer.advertise'), faAd, '/advertisewithus', Target.Internal], // TODO: Add link once advertise page is available
-      [$t('footer.shop'), faShoppingCart, 'https://shop.beaconcha.in', Target.External],
-      [$t('footer.status'), faCheckCircle, 'https://status.beaconcha.in/', Target.External]
-    ]
+      // TODO: Add link once advertise page is available
+      // [$t('footer.advertise'), faAd, '/advertisewithus', Target.Internal],
+      [
+        $t('footer.shop'),
+        faShoppingCart,
+        'https://shop.beaconcha.in',
+        Target.External,
+      ],
+      [
+        $t('footer.status'),
+        faCheckCircle,
+        'https://status.beaconcha.in/',
+        Target.External,
+      ],
+    ],
   },
   {
     title: $t('footer.links'),
     links: [
       ['Discord', faDiscord, 'https://dsc.gg/beaconchain', Target.External],
-      ['Twitter', faTwitter, 'https://twitter.com/beaconcha_in', Target.External],
-      ['Github', faGithub, 'https://github.com/gobitfly/beaconchain', Target.External],
-      ['Github Mobile App', faGithub, 'https://github.com/gobitfly/eth2-beaconchain-explorer-app', Target.External]
-      // [$t('footer.press_kit'), faNewspaper, '/presskit', Target.Internal] // TODO: Add link once press kit is available
-    ]
-  }
+      [
+        'Twitter',
+        faTwitter,
+        'https://twitter.com/beaconcha_in',
+        Target.External,
+      ],
+      [
+        'Github',
+        faGithub,
+        'https://github.com/gobitfly/beaconchain',
+        Target.External,
+      ],
+      [
+        'Github Mobile App',
+        faGithub,
+        'https://github.com/gobitfly/eth2-beaconchain-explorer-app',
+        Target.External,
+      ],
+      // TODO: Add link once press kit is available
+      // [$t('footer.press_kit'), faNewspaper, '/presskit', Target.Internal]
+    ],
+  },
 ]
 </script>
 
 <template>
-  <div v-for="column of columns" :key="column.title">
+  <div
+    v-for="column of columns"
+    :key="column.title"
+  >
     <div class="title">
       {{ column.title }}
     </div>
-    <div v-for="line of column.links" :key="line[0]" class="link-line">
-      <BcLink :to="line[2]" :target="line[3]" class="link">
-        <FontAwesomeIcon class="icon" :icon="line[1]" />
+    <div
+      v-for="line of column.links"
+      :key="line[0]"
+      class="link-line"
+    >
+      <BcLink
+        :to="line[2]"
+        :target="line[3]"
+        class="link"
+      >
+        <FontAwesomeIcon
+          class="icon"
+          :icon="line[1]"
+        />
         {{ line[0] }}
       </BcLink>
     </div>
diff --git a/frontend/components/bc/footer/MainFooter.vue b/frontend/components/bc/footer/MainFooter.vue
index be3b69483..f2c005c24 100644
--- a/frontend/components/bc/footer/MainFooter.vue
+++ b/frontend/components/bc/footer/MainFooter.vue
@@ -1,6 +1,4 @@
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="main-footer">
@@ -25,11 +23,13 @@
   margin-top: 64px;
   background-color: var(--container-background);
 
-  @media (min-width: 600px) { // large screen
+  @media (min-width: 600px) {
+    // large screen
     justify-content: center;
   }
 
-  @media (max-width: 599.9px) { // mobile
+  @media (max-width: 599.9px) {
+    // mobile
     justify-content: flex-start;
     padding-left: var(--padding-large);
   }
@@ -38,13 +38,15 @@
     display: flex;
     position: relative;
 
-    @media (min-width: 600px) { // large screen
+    @media (min-width: 600px) {
+      // large screen
       justify-content: center;
       flex-direction: row;
       gap: 130px;
     }
 
-    @media (max-width: 599.9px) { // mobile
+    @media (max-width: 599.9px) {
+      // mobile
       justify-content: flex-start;
       align-items: flex-start;
       flex-direction: column;
@@ -57,11 +59,13 @@
     flex-direction: row;
     padding-bottom: 13px;
 
-    @media (min-width: 600px) { // large screen
+    @media (min-width: 600px) {
+      // large screen
       justify-content: center;
     }
 
-    @media (max-width: 599.9px) { // mobile
+    @media (max-width: 599.9px) {
+      // mobile
       justify-content: flex-start;
     }
   }
diff --git a/frontend/components/bc/form/BcForm.vue b/frontend/components/bc/form/BcForm.vue
index 1d68559f9..3645433ae 100644
--- a/frontend/components/bc/form/BcForm.vue
+++ b/frontend/components/bc/form/BcForm.vue
@@ -1,10 +1,8 @@
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <form class="bc-form">
-    <slot/>
+    <slot />
   </form>
 </template>
 
@@ -14,4 +12,4 @@
   flex-direction: column;
   row-gap: var(--padding-small);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/components/bc/form/BcFormRow.vue b/frontend/components/bc/form/BcFormRow.vue
index 3fcd8f386..12c10691c 100644
--- a/frontend/components/bc/form/BcFormRow.vue
+++ b/frontend/components/bc/form/BcFormRow.vue
@@ -1,10 +1,8 @@
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <div class="bc-form-row">
-    <slot/>
+    <slot />
   </div>
 </template>
 
@@ -15,9 +13,9 @@
   align-items: center;
   grid-template-columns: 1fr auto;
   row-gap: var(--padding-small);
-  
-  grid-template-areas: 
+
+  grid-template-areas:
     "label input"
     "error error";
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/components/bc/format/FormatGraffiti.vue b/frontend/components/bc/format/FormatGraffiti.vue
index f0a915efe..789b5d403 100644
--- a/frontend/components/bc/format/FormatGraffiti.vue
+++ b/frontend/components/bc/format/FormatGraffiti.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-
 interface Props {
-  graffiti?: string,
+  graffiti?: string
   noCopy?: boolean
 }
 const props = defineProps<Props>()
-
 </script>
+
 <template>
-  <div v-if="props.graffiti" class="format-graffiti">
+  <div
+    v-if="props.graffiti"
+    class="format-graffiti"
+  >
     <BcTooltip class="tt-container">
       <template #tooltip>
         <div class="tt">
@@ -17,7 +19,11 @@ const props = defineProps<Props>()
       </template>
       {{ props.graffiti }}
     </BcTooltip>
-    <BcCopyToClipboard v-if="!props.noCopy" :value="props.graffiti" class="copy" />
+    <BcCopyToClipboard
+      v-if="!props.noCopy"
+      :value="props.graffiti"
+      class="copy"
+    />
   </div>
   <div v-else>
     -
@@ -25,7 +31,7 @@ const props = defineProps<Props>()
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/utils.scss';
+@use "~/assets/css/utils.scss";
 
 .format-graffiti {
   width: 100%;
@@ -39,7 +45,6 @@ const props = defineProps<Props>()
     margin-left: var(--padding);
     line-height: 100%;
   }
-
 }
 
 .tt {
diff --git a/frontend/components/bc/format/FormatHash.vue b/frontend/components/bc/format/FormatHash.vue
index 254a38f3f..04b6a3f8f 100644
--- a/frontend/components/bc/format/FormatHash.vue
+++ b/frontend/components/bc/format/FormatHash.vue
@@ -1,12 +1,18 @@
 <script setup lang="ts">
-
 interface Props {
-  hash?: string,
-  ens?: string,
-  type?: 'address' | 'withdrawal_credentials' | 'public_key' | 'tx' | 'block_hash' | 'root' // if none is provided the default format will be applied
-  full?: boolean, // if true the hash will not be truncated
-  noLink?: boolean, // most of the time we want to render it as a link (if possible), but there might be cases where we don't
-  noCopy?: boolean, // same as for the link
+  hash?: string
+  ens?: string
+  type?:
+    | 'address'
+    | 'withdrawal_credentials'
+    | 'public_key'
+    | 'tx'
+    | 'block_hash'
+    | 'root' // if none is provided the default format will be applied
+  full?: boolean // if true the hash will not be truncated
+  // most of the time we want to render it as a link (if possible), but there might be cases where we don't
+  noLink?: boolean
+  noCopy?: boolean // same as for the link
   noWrap?: boolean // don't wrap elements
 }
 const props = defineProps<Props>()
@@ -16,27 +22,49 @@ const data = computed(() => {
     return
   }
   const hash = props.hash
-  const className = props.full ? 'full' : props.ens ? 'truncate-text' : props.noWrap ? 'no-wrap' : ''
+  const className = props.full
+    ? 'full'
+    : props.ens
+      ? 'truncate-text'
+      : props.noWrap
+        ? 'no-wrap'
+        : ''
   let parts: { value: string, className?: string }[] = []
   let link: string = ''
   if (props.ens) {
-    parts.push({ value: props.ens, className: !props.full ? 'truncate-text' : '' })
-  } else if (props.type === 'withdrawal_credentials') {
+    parts.push({
+      value: props.ens,
+      className: !props.full ? 'truncate-text' : '',
+    })
+  }
+  else if (props.type === 'withdrawal_credentials') {
     const isSet = hash.startsWith('0x01')
     const color = isSet ? 'green' : 'orange'
     parts.push({ value: hash.substring(0, 4), className: color })
     if (props.full) {
       parts.push({ value: hash.substring(4) })
-    } else {
-      parts = parts.concat([{ value: hash.substring(26, 30), className: 'dots-before' }, { value: hash.substring(hash.length - 4), className: 'dots-before' }])
+    }
+    else {
+      parts = parts.concat([
+        { value: hash.substring(26, 30), className: 'dots-before' },
+        { value: hash.substring(hash.length - 4), className: 'dots-before' },
+      ])
     }
     if (isSet && !props.noLink) {
       link = `/address/0x${props.hash.substring(26)}`
     }
-  } else {
+  }
+  else {
     const color = props.full ? 'prime' : undefined
-    const middle = props.full ? { value: hash.substring(6, hash.length - 4) } : { value: '', className: 'dots-before' }
-    parts = [{ value: '0x' }, { value: hash.substring(2, 6), className: color }, middle, { value: hash.substring(hash.length - 4), className: color }]
+    const middle = props.full
+      ? { value: hash.substring(6, hash.length - 4) }
+      : { value: '', className: 'dots-before' }
+    parts = [
+      { value: '0x' },
+      { value: hash.substring(2, 6), className: color },
+      middle,
+      { value: hash.substring(hash.length - 4), className: color },
+    ]
   }
   if (!props.noLink) {
     switch (props.type) {
@@ -61,34 +89,71 @@ const data = computed(() => {
   return {
     parts,
     link,
-    className
+    className,
   }
 })
-
 </script>
+
 <template>
-  <div v-if="data" class="format-hash" :class="{ 'no-wrap': noWrap }">
+  <div
+    v-if="data"
+    class="format-hash"
+    :class="{ 'no-wrap': noWrap }"
+  >
     <BcTooltip class="tt-container">
-      <template v-if="!full || ens" #tooltip>
-        <div v-if="ens" class="tt ens-name full">
+      <template
+        v-if="!full || ens"
+        #tooltip
+      >
+        <div
+          v-if="ens"
+          class="tt ens-name full"
+        >
           {{ ens }}
         </div>
         <div class="tt">
-          <BcFormatHash :hash="hash" :full="true" :no-link="true" :no-copy="true" :type="type" />
+          <BcFormatHash
+            :hash="hash"
+            :full="true"
+            :no-link="true"
+            :no-copy="true"
+            :type="type"
+          />
         </div>
       </template>
-      <span v-if="!data.link" :class="data.className">
-        <span v-for="(part, index) in data.parts" :key="index" :class="part.className">
+      <span
+        v-if="!data.link"
+        :class="data.className"
+      >
+        <span
+          v-for="(part, index) in data.parts"
+          :key="index"
+          :class="part.className"
+        >
           {{ part.value }}
         </span>
       </span>
-      <BcLink v-else :to="data.link" target="_blank" class="link" :class="data.className">
-        <span v-for="(part, index) in data.parts" :key="index" :class="part.className">
+      <BcLink
+        v-else
+        :to="data.link"
+        target="_blank"
+        class="link"
+        :class="data.className"
+      >
+        <span
+          v-for="(part, index) in data.parts"
+          :key="index"
+          :class="part.className"
+        >
           {{ part.value }}
         </span>
       </BcLink>
     </BcTooltip>
-    <BcCopyToClipboard v-if="!props.noCopy" :value="props.hash" class="copy" />
+    <BcCopyToClipboard
+      v-if="!props.noCopy"
+      :value="props.hash"
+      class="copy"
+    />
   </div>
 </template>
 
@@ -136,7 +201,6 @@ const data = computed(() => {
     margin-left: var(--padding);
     line-height: 100%;
   }
-
 }
 
 .full {
diff --git a/frontend/components/bc/format/FormatNumber.vue b/frontend/components/bc/format/FormatNumber.vue
index a39a63832..e8e563a6e 100644
--- a/frontend/components/bc/format/FormatNumber.vue
+++ b/frontend/components/bc/format/FormatNumber.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-
 interface Props {
-  value?: number | string, // can either be a number or a string representing a number
-  text?: string, // for already formatted numbers
-  minDecimals?: number, // defaults to 0
-  maxDecimals?: number, // defaults to 2
+  value?: number | string // can either be a number or a string representing a number
+  text?: string // for already formatted numbers
+  minDecimals?: number // defaults to 0
+  maxDecimals?: number // defaults to 2
   default?: number | string // used if value is not defined
 }
 const props = defineProps<Props>()
@@ -16,10 +15,17 @@ const label = computed(() => {
   if (props.value === undefined || props.value === '') {
     return props.default
   }
-  return formattedNumberToHtml(trim(props.value, props.maxDecimals ?? 2, props.minDecimals ?? 0))
+  return formattedNumberToHtml(
+    trim(props.value, props.maxDecimals ?? 2, props.minDecimals ?? 0),
+  )
 })
 </script>
+
 <template>
-  <!-- eslint-disable-next-line vue/no-v-html -->
-  <span v-if="label" v-html="label" />
+  <!-- eslint-disable vue/no-v-html -->
+  <span
+    v-if="label"
+    v-html="label"
+  />
+  <!-- eslint-enable vue/no-v-html -->
 </template>
diff --git a/frontend/components/bc/format/FormatPercent.vue b/frontend/components/bc/format/FormatPercent.vue
index 21202352a..755096e3a 100644
--- a/frontend/components/bc/format/FormatPercent.vue
+++ b/frontend/components/bc/format/FormatPercent.vue
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
   faArrowUp,
   faArrowDown,
-  faArrowsLeftRight
+  faArrowsLeftRight,
 } from '@fortawesome/pro-solid-svg-icons'
 import { type CompareResult } from '~/types/value'
 
@@ -18,7 +18,8 @@ interface Props {
   fixed?: number
   fullOnEmptyBase?: boolean
   addPositiveSign?: boolean
-  colorBreakPoint?: number // if set then the percentage will be colored accordingly. Do not use it in combination with comparePercent
+  // if set then the percentage will be colored accordingly. Do not use it in combination with comparePercent
+  colorBreakPoint?: number
 }
 
 const props = defineProps<Props>()
@@ -30,7 +31,7 @@ const data = computed(() => {
   if (props.base === 0 && props.fullOnEmptyBase) {
     return {
       label: '100%',
-      className: 'text-positive'
+      className: 'text-positive',
     }
   }
   let leadingIcon: IconDefinition | undefined
@@ -41,42 +42,65 @@ const data = computed(() => {
     return { label, className }
   }
   const percent = props.percent ?? calculatePercent(props.value, props.base)
-  const config = { precision: props.precision ?? 2, fixed: props.fixed ?? 2, addPositiveSign: props.addPositiveSign }
+  const config = {
+    precision: props.precision ?? 2,
+    fixed: props.fixed ?? 2,
+    addPositiveSign: props.addPositiveSign,
+  }
   label = formatPercent(percent, config)
   if (props.comparePercent !== undefined) {
     if (Math.abs(props.comparePercent - percent) <= 0.5) {
       className = 'text-equal'
       leadingIcon = faArrowsLeftRight
       compareResult = 'equal'
-    } else if (percent > props.comparePercent) {
+    }
+    else if (percent > props.comparePercent) {
       className = 'text-positive'
       leadingIcon = faArrowUp
       compareResult = 'higher'
-    } else {
+    }
+    else {
       className = 'text-negative'
       leadingIcon = faArrowDown
       compareResult = 'lower'
     }
-  } else if (props.colorBreakPoint) {
-    if ((props.base === 0 && percent === 0) || percent >= props.colorBreakPoint) {
+  }
+  else if (props.colorBreakPoint) {
+    if (
+      (props.base === 0 && percent === 0)
+      || percent >= props.colorBreakPoint
+    ) {
       className = 'text-positive'
-    } else {
+    }
+    else {
       className = 'text-negative'
     }
   }
   return { label, className, leadingIcon, compareResult }
 })
-
 </script>
+
 <template>
-  <span :class="data.className" class="format-percent">
-    <BcTooltip v-if="data.leadingIcon" class="direction-icon">
+  <span
+    :class="data.className"
+    class="format-percent"
+  >
+    <BcTooltip
+      v-if="data.leadingIcon"
+      class="direction-icon"
+    >
       <template #tooltip>
-        <slot name="leading-tooltip" v-bind="{compare: data.compareResult}" />
+        <slot
+          name="leading-tooltip"
+          v-bind="{ compare: data.compareResult }"
+        />
       </template>
       <FontAwesomeIcon :icon="data.leadingIcon" />
     </BcTooltip>
-    <BcFormatNumber v-if="data.label" :text="data.label" />
+    <BcFormatNumber
+      v-if="data.label"
+      :text="data.label"
+    />
   </span>
 </template>
 
diff --git a/frontend/components/bc/format/FormatTimePassed.vue b/frontend/components/bc/format/FormatTimePassed.vue
index eec3f6a0c..078f7537a 100644
--- a/frontend/components/bc/format/FormatTimePassed.vue
+++ b/frontend/components/bc/format/FormatTimePassed.vue
@@ -7,10 +7,10 @@ import { formatGoTimestamp } from '~/utils/format'
 const { formatEpochToDateTime, formatSlotToDateTime } = useFormat()
 
 interface Props {
-  value?: number | string,
-  type?: 'epoch' | 'go-timestamp' | 'slot', // we can add other types later when needed, we default to epoch
+  value?: number | string
+  type?: 'epoch' | 'go-timestamp' | 'slot' // we can add other types later when needed, we default to epoch
   format?: 'global-setting' | AgeFormat
-  noUpdate?: boolean,
+  noUpdate?: boolean
   unitLength?: StringUnitLength
 }
 const props = defineProps<Props>()
@@ -36,20 +36,41 @@ const label = computed(() => {
   let text: string | null | undefined = ''
   switch (props.type) {
     case 'go-timestamp':
-      text = formatGoTimestamp(props.value, ts, mappedSetting.value, props.unitLength, $t('locales.date'))
+      text = formatGoTimestamp(
+        props.value,
+        ts,
+        mappedSetting.value,
+        props.unitLength,
+        $t('locales.date'),
+      )
       break
     case 'slot':
-      text = formatSlotToDateTime(props.value as number, ts, mappedSetting.value, props.unitLength, $t('locales.date'))
+      text = formatSlotToDateTime(
+        props.value as number,
+        ts,
+        mappedSetting.value,
+        props.unitLength,
+        $t('locales.date'),
+      )
       break
     case 'epoch':
     default:
-      text = formatEpochToDateTime(props.value as number, ts, mappedSetting.value, props.unitLength, $t('locales.date'))
+      text = formatEpochToDateTime(
+        props.value as number,
+        ts,
+        mappedSetting.value,
+        props.unitLength,
+        $t('locales.date'),
+      )
   }
 
   if (text && mappedSetting.value === 'absolute') {
     const lastComma = text.lastIndexOf(',')
     if (lastComma > 0) {
-      return { text: text.slice(0, lastComma), subtext: text.slice(lastComma + 1) }
+      return {
+        text: text.slice(0, lastComma),
+        subtext: text.slice(lastComma + 1),
+      }
     }
   }
 
@@ -58,14 +79,20 @@ const label = computed(() => {
 </script>
 
 <template>
-  <span v-if="label" class="text">
+  <span
+    v-if="label"
+    class="text"
+  >
     <div>{{ label.text }}</div>
-    <div v-if="label.subtext" class="subtext">{{ label.subtext }}</div>
+    <div
+      v-if="label.subtext"
+      class="subtext"
+    >{{ label.subtext }}</div>
   </span>
 </template>
 
 <style lang="scss" scoped>
-.text{
+.text {
   display: flex;
   flex-direction: column;
 
diff --git a/frontend/components/bc/format/FormatValue.vue b/frontend/components/bc/format/FormatValue.vue
index b8b8f598a..0915a2e3d 100644
--- a/frontend/components/bc/format/FormatValue.vue
+++ b/frontend/components/bc/format/FormatValue.vue
@@ -7,11 +7,16 @@ interface Props {
   options?: ValueConvertOptions
   useColors?: boolean
   positiveClass?: string
-  negativeClass?: string,
-  noTooltip?: boolean,
-  fullValue?: boolean,
+  negativeClass?: string
+  noTooltip?: boolean
+  fullValue?: boolean
 }
-const props = withDefaults(defineProps<Props>(), { value: undefined, options: undefined, positiveClass: 'positive', negativeClass: 'negative' })
+const props = withDefaults(defineProps<Props>(), {
+  value: undefined,
+  options: undefined,
+  positiveClass: 'positive',
+  negativeClass: 'negative',
+})
 
 const { converter } = useValue()
 
@@ -19,16 +24,18 @@ const data = computed(() => {
   if (!props.value) {
     return {
       label: '',
-      tooltip: ''
+      tooltip: '',
     }
   }
   const res = converter.value.weiToValue(props.value, props.options)
   let labelClass = ''
-  const label = props.fullValue && res.fullLabel ? res.fullLabel : `${res.label}`
+  const label
+    = props.fullValue && res.fullLabel ? res.fullLabel : `${res.label}`
   if (props.useColors) {
     if (label.startsWith('-')) {
       labelClass = props.negativeClass
-    } else if (res.label !== '0') {
+    }
+    else if (res.label !== '0') {
       labelClass = props.positiveClass
     }
   }
@@ -36,20 +43,29 @@ const data = computed(() => {
     labelClass,
     label,
     fullLabel: res.fullLabel,
-    tooltip: props.noTooltip ? '' : res.fullLabel
+    tooltip: props.noTooltip ? '' : res.fullLabel,
   }
 })
-
 </script>
+
 <template>
   <BcTooltip>
-    <template v-if="!!$slots.tooltip || data.tooltip" #tooltip>
-      <slot name="tooltip" :data="data">
+    <template
+      v-if="!!$slots.tooltip || data.tooltip"
+      #tooltip
+    >
+      <slot
+        name="tooltip"
+        :data="data"
+      >
         <BcFormatNumber :text="data.tooltip" />
       </slot>
     </template>
     <span>
-      <BcFormatNumber :class="data.labelClass" :text="data.label" />
+      <BcFormatNumber
+        :class="data.labelClass"
+        :text="data.label"
+      />
     </span>
   </BcTooltip>
 </template>
diff --git a/frontend/components/bc/header/HeaderLogo.vue b/frontend/components/bc/header/HeaderLogo.vue
index fb18be29a..03be9c4fa 100644
--- a/frontend/components/bc/header/HeaderLogo.vue
+++ b/frontend/components/bc/header/HeaderLogo.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 defineProps<{
-    layoutAdaptability: 'low' | 'high'
-  }>()
+  layoutAdaptability: 'low' | 'high'
+}>()
 </script>
 
 <template>
-  <BcLink to="/" :class="`${layoutAdaptability}-adaptability`">
+  <BcLink
+    to="/"
+    :class="`${layoutAdaptability}-adaptability`"
+  >
     <IconBeaconchainLogo alt="Beaconcha.in logo" />
     <span class="name">beaconcha.in</span>
   </BcLink>
diff --git a/frontend/components/bc/header/MainHeader.vue b/frontend/components/bc/header/MainHeader.vue
index 307c1ca8d..828a2a67c 100644
--- a/frontend/components/bc/header/MainHeader.vue
+++ b/frontend/components/bc/header/MainHeader.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faBars,
-  faCircleUser
-} from '@fortawesome/pro-solid-svg-icons'
+import { faBars, faCircleUser } from '@fortawesome/pro-solid-svg-icons'
 import type { BcHeaderMegaMenu } from '#build/components'
 import { useLatestStateStore } from '~/stores/useLatestStateStore'
 import { useNetworkStore } from '~/stores/useNetworkStore'
@@ -11,7 +8,7 @@ import { SearchbarShape, SearchbarColors } from '~/types/searchbar'
 import { mobileHeaderThreshold, smallHeaderThreshold } from '~/types/header'
 
 defineProps<{
-  isHomePage: boolean,
+  isHomePage: boolean
   minimalist: boolean
 }>()
 const { latestState } = useLatestStateStore()
@@ -26,14 +23,17 @@ const isSmallScreen = computed(() => width.value < smallHeaderThreshold)
 const isMobileScreen = computed(() => width.value < mobileHeaderThreshold)
 
 const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
-const hideInDevelopmentClass = showInDevelopment ? '' : 'hide-because-it-is-unfinished' // TODO: once the searchbar is enabled in production, delete this line
+const hideInDevelopmentClass = showInDevelopment
+  ? ''
+  : 'hide-because-it-is-unfinished' // TODO: once the searchbar is enabled in production, delete this line
 
 const megaMenu = ref<typeof BcHeaderMegaMenu | null>(null)
 
 const rate = computed(() => {
   if (isFiat(currency.value) && rates.value?.[currency.value]) {
     return rates.value[currency.value]
-  } else if (rates.value?.USD) {
+  }
+  else if (rates.value?.USD) {
     return rates.value.USD
   }
   const fiat = available.value?.find(c => isFiat(c))
@@ -43,7 +43,11 @@ const rate = computed(() => {
   return undefined
 })
 
-const currentEpoch = computed(() => latestState.value?.current_slot !== undefined ? slotToEpoch(latestState.value.current_slot) : undefined)
+const currentEpoch = computed(() =>
+  latestState.value?.current_slot !== undefined
+    ? slotToEpoch(latestState.value.current_slot)
+    : undefined,
+)
 
 const toggleMegaMenu = (evt: Event) => {
   megaMenu.value?.toggleMegaMenu(evt)
@@ -55,44 +59,74 @@ const userMenu = computed(() => {
   return [
     {
       label: $t('header.settings'),
-      command: async () => { await navigateTo('../user/settings') }
+      command: async () => {
+        await navigateTo('../user/settings')
+      },
     },
     {
       label: $t('header.logout'),
-      command: () => doLogout()
-    }
+      command: () => doLogout(),
+    },
   ]
 })
 </script>
 
 <template>
-  <div v-if="minimalist" class="minimalist">
+  <div
+    v-if="minimalist"
+    class="minimalist"
+  >
     <div class="top-background" />
     <div class="rows">
       <BcHeaderLogo layout-adaptability="low" />
     </div>
   </div>
 
-  <div v-else class="complete" :class="hideInDevelopmentClass">
+  <div
+    v-else
+    class="complete"
+    :class="hideInDevelopmentClass"
+  >
     <div class="top-background" />
     <div class="rows">
       <div class="grid-cell blockchain-info">
-        <span v-if="latestState?.current_slot"><span>{{ $t('header.current_slot') }}</span>:
-          <BcLink :to="`/slot/${latestState.current_slot}`" :disabled="!showInDevelopment || null">
-            <BcFormatNumber class="bold" :value="latestState.current_slot" />
+        <span v-if="latestState?.current_slot"><span>{{ $t("header.current_slot") }}</span>:
+          <BcLink
+            :to="`/slot/${latestState.current_slot}`"
+            :disabled="!showInDevelopment || null"
+          >
+            <BcFormatNumber
+              class="bold"
+              :value="latestState.current_slot"
+            />
           </BcLink>
         </span>
-        <span v-if="currentEpoch !== undefined"><span>{{ $t('header.current_epoch') }}</span>:
-          <BcLink :to="`/epoch/${currentEpoch}`" :disabled="!showInDevelopment || null">
-            <BcFormatNumber class="bold" :value="currentEpoch" />
+        <span v-if="currentEpoch !== undefined"><span>{{ $t("header.current_epoch") }}</span>:
+          <BcLink
+            :to="`/epoch/${currentEpoch}`"
+            :disabled="!showInDevelopment || null"
+          >
+            <BcFormatNumber
+              class="bold"
+              :value="currentEpoch"
+            />
           </BcLink>
         </span>
         <span v-if="rate">
           <span>
-            <IconNetwork :chain-id="currentNetwork" class="network-icon" :harmonize-perceived-size="true" :colored="false" />{{ networkInfo.elCurrency }}
-          </span>:
-          <span> {{ rate.symbol }}
-            <BcFormatNumber class="bold" :value="rate.rate" :max-decimals="2" />
+            <IconNetwork
+              :chain-id="currentNetwork"
+              class="network-icon"
+              :harmonize-perceived-size="true"
+              :colored="false"
+            />{{ networkInfo.elCurrency }} </span>:
+          <span>
+            {{ rate.symbol }}
+            <BcFormatNumber
+              class="bold"
+              :value="rate.rate"
+              :max-decimals="2"
+            />
           </span>
         </span>
       </div>
@@ -102,22 +136,46 @@ const userMenu = computed(() => {
           v-if="showInDevelopment && !isHomePage"
           class="bar"
           :bar-shape="SearchbarShape.Medium"
-          :color-theme="isSmallScreen && colorMode.value != 'dark' ? SearchbarColors.LightBlue : SearchbarColors.DarkBlue"
+          :color-theme="
+            isSmallScreen && colorMode.value != 'dark'
+              ? SearchbarColors.LightBlue
+              : SearchbarColors.DarkBlue
+          "
           :screen-width-causing-sudden-change="smallHeaderThreshold"
         />
       </div>
 
       <div class="grid-cell controls">
-        <BcCurrencySelection class="currency" :show-currency-icon="!isMobileScreen" />
-        <div v-if="!isLoggedIn" class="logged-out">
+        <BcCurrencySelection
+          class="currency"
+          :show-currency-icon="!isMobileScreen"
+        />
+        <div
+          v-if="!isLoggedIn"
+          class="logged-out"
+        >
           <BcLink to="/login">
-            <Button class="login" :label="$t('header.login')" />
+            <Button
+              class="login"
+              :label="$t('header.login')"
+            />
           </BcLink>
         </div>
-        <div v-else-if="!isSmallScreen" class="user-menu">
-          <BcDropdown :options="userMenu" variant="header" option-label="label" class="menu-component">
+        <div
+          v-else-if="!isSmallScreen"
+          class="user-menu"
+        >
+          <BcDropdown
+            :options="userMenu"
+            variant="header"
+            option-label="label"
+            class="menu-component"
+          >
             <template #value>
-              <FontAwesomeIcon class="menu-icon" :icon="faCircleUser" />
+              <FontAwesomeIcon
+                class="menu-icon"
+                :icon="faCircleUser"
+              />
             </template>
             <template #option="slotProps">
               <span @click="slotProps.command?.()">
@@ -126,7 +184,11 @@ const userMenu = computed(() => {
             </template>
           </BcDropdown>
         </div>
-        <FontAwesomeIcon :icon="faBars" class="burger" @click.stop.prevent="toggleMegaMenu" />
+        <FontAwesomeIcon
+          :icon="faBars"
+          class="burger"
+          @click.stop.prevent="toggleMegaMenu"
+        />
       </div>
 
       <div class="grid-cell explorer-info">
@@ -140,7 +202,10 @@ const userMenu = computed(() => {
 
       <div class="grid-cell mega-menu">
         <BcHeaderMegaMenu ref="megaMenu" />
-        <div v-if="isMobileMegaMenuOpen" class="decoration" />
+        <div
+          v-if="isMobileMegaMenuOpen"
+          class="decoration"
+        />
       </div>
     </div>
   </div>
@@ -184,7 +249,8 @@ $smallHeaderThreshold: 1024px;
   border-bottom: 1px solid var(--container-border-color);
   background-color: var(--container-background);
   @include common();
-  &.hide-because-it-is-unfinished {  // TODO: once the searchbar is enabled in production, delete this block (because border-bottom is always needed, due to the fact that the lower header is always visible (it contains the search bar when the screeen is narrow, otherwise the logo and mega menu))
+  &.hide-because-it-is-unfinished {
+    // TODO: once the searchbar is enabled in production, delete this block (because border-bottom is always needed, due to the fact that the lower header is always visible (it contains the search bar when the screeen is narrow, otherwise the logo and mega menu))
     @media (max-width: $smallHeaderThreshold) {
       border-bottom: none;
     }
@@ -193,8 +259,11 @@ $smallHeaderThreshold: 1024px;
   .rows {
     position: relative;
     display: grid;
-    grid-template-columns: 0px min-content min-content auto min-content 0px;  // the 0px are paddings, useless now but they exist in the structure of the grid so ready to be set if they are wanted one day
-    grid-template-rows: var(--navbar-height) minmax(var(--navbar2-height), min-content);
+    grid-template-columns: 0px min-content min-content auto min-content 0px; // the 0px are paddings, useless now but they exist in the structure of the grid so ready to be set if they are wanted one day
+    grid-template-rows: var(--navbar-height) minmax(
+        var(--navbar2-height),
+        min-content
+      );
     width: var(--content-width);
     color: var(--header-top-font-color);
     font-family: var(--main_header_font_family);
@@ -202,7 +271,7 @@ $smallHeaderThreshold: 1024px;
     font-weight: var(--main_header_font_weight);
     color: var(--header-top-font-color);
     @media (max-width: $smallHeaderThreshold) {
-      grid-template-columns: 0px min-content auto min-content 0px;  // same remark about the 0px
+      grid-template-columns: 0px min-content auto min-content 0px; // same remark about the 0px
       grid-template-rows: var(--navbar-height) min-content;
     }
     @mixin bottom-cell($row) {
@@ -321,16 +390,24 @@ $smallHeaderThreshold: 1024px;
         font-size: var(--tiny_text_font_size);
         color: var(--megamenu-text-color);
         line-height: 10px;
-        .large-screen { display: inline }
-        .mobile { display: none }
+        .large-screen {
+          display: inline;
+        }
+        .mobile {
+          display: none;
+        }
         @media (max-width: $smallHeaderThreshold) {
           color: var(--grey);
         }
         @media (max-width: $mobileHeaderThreshold) {
           margin-bottom: auto;
           font-size: var(--button_font_size);
-          .large-screen { display: none }
-          .mobile { display: inline }
+          .large-screen {
+            display: none;
+          }
+          .mobile {
+            display: inline;
+          }
         }
       }
     }
diff --git a/frontend/components/bc/header/MegaMenu.vue b/frontend/components/bc/header/MegaMenu.vue
index eff320907..0d8df9166 100644
--- a/frontend/components/bc/header/MegaMenu.vue
+++ b/frontend/components/bc/header/MegaMenu.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faDiscord, faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'
+import {
+  faDiscord,
+  faTwitter,
+  faGithub,
+} from '@fortawesome/free-brands-svg-icons'
 import {
   faCaretRight,
   faHistory,
@@ -20,7 +24,7 @@ import {
   faRobot,
   faMegaphone,
   faExternalLinkAlt,
-  faDesktop
+  faDesktop,
 } from '@fortawesome/pro-solid-svg-icons'
 import {
   faDrumstickBite,
@@ -35,11 +39,9 @@ import {
   faGasPump,
   faBell,
   faPaintBrush,
-  faDesktop as farDesktop
+  faDesktop as farDesktop,
 } from '@fortawesome/pro-regular-svg-icons'
-import {
-  faBuildingColumns
-} from '@fortawesome/sharp-solid-svg-icons'
+import { faBuildingColumns } from '@fortawesome/sharp-solid-svg-icons'
 
 import type { MenuItem } from 'primevue/menuitem'
 import MegaMenu from 'primevue/megamenu'
@@ -61,7 +63,10 @@ const { width } = useWindowSize()
 const { doLogout, isLoggedIn } = useUserStore()
 const route = useRoute()
 const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
-const megaMenu = ref<{toggle:(evt:Event)=>void, mobileActive: boolean} | null>(null)
+const megaMenu = ref<{
+  toggle: (evt: Event) => void
+  mobileActive: boolean
+} | null>(null)
 
 const breakpoint = `${smallHeaderThreshold}px`
 const isSmallScreen = computed(() => width.value < smallHeaderThreshold)
@@ -82,35 +87,35 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.overview'),
                   svg: NetworkEthereum,
-                  url: '/'
+                  url: '/',
                 },
                 {
                   label: $t('header.megamenu.epochs'),
                   icon: faHistory,
-                  url: '/epochs'
+                  url: '/epochs',
                 },
                 {
                   label: $t('header.megamenu.slots'),
                   icon: faCube,
-                  url: '/slots'
+                  url: '/slots',
                 },
                 {
                   label: $t('header.megamenu.blocks'),
                   icon: faCubes,
-                  url: '/blocks'
+                  url: '/blocks',
                 },
                 {
                   label: $t('header.megamenu.txs'),
                   icon: faCreditCard,
-                  url: '/transactions'
+                  url: '/transactions',
                 },
                 {
                   label: $t('header.megamenu.mempool'),
                   icon: faUpload,
-                  url: '/mempool'
-                }
-              ]
-            }
+                  url: '/mempool',
+                },
+              ],
+            },
           ],
           [
             {
@@ -119,35 +124,35 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.overview'),
                   icon: faTable,
-                  url: '/validators'
+                  url: '/validators',
                 },
                 {
                   label: $t('header.megamenu.slashings'),
                   icon: faUserSlash,
-                  url: '/validators/slashings'
+                  url: '/validators/slashings',
                 },
                 {
                   label: $t('header.megamenu.validator_leaderboard'),
                   icon: faMedal,
-                  url: '/validators/leaderboard'
+                  url: '/validators/leaderboard',
                 },
                 {
                   label: $t('header.megamenu.deposit_leaderboard'),
                   icon: faFileImport,
-                  url: '/validators/deposit-leaderboard'
+                  url: '/validators/deposit-leaderboard',
                 },
                 {
                   label: $t('header.megamenu.deposits'),
                   icon: faFileSignature,
-                  url: '/validators/deposits'
+                  url: '/validators/deposits',
                 },
                 {
                   label: $t('header.megamenu.withdrawals'),
                   icon: faMoneyBill,
-                  url: '/validators/withdrawals'
-                }
-              ]
-            }
+                  url: '/validators/withdrawals',
+                },
+              ],
+            },
           ],
           [
             {
@@ -158,30 +163,30 @@ const items = computed(() => {
                   svg: IconEthermineStaking,
                   url: 'https://ethpool.org/',
                   class: 'orange-box',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: $t('header.megamenu.eth_store'),
                   svg: IconEthStore,
-                  url: '/ethstore'
+                  url: '/ethstore',
                 },
                 {
                   label: $t('header.megamenu.staking_services'),
                   icon: faDrumstickBite,
-                  url: '/stakingServices'
+                  url: '/stakingServices',
                 },
                 {
                   label: $t('header.megamenu.pool_benchmarks'),
                   icon: faChartPie,
-                  url: '/pools'
+                  url: '/pools',
                 },
                 {
                   label: $t('header.megamenu.rocket_pool_stats'),
                   icon: faRocket,
-                  url: '/pools/rocketpool'
-                }
-              ]
-            }
+                  url: '/pools/rocketpool',
+                },
+              ],
+            },
           ],
           [
             {
@@ -190,40 +195,40 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.charts'),
                   icon: faChartBar,
-                  url: '/charts'
+                  url: '/charts',
                 },
                 {
                   label: $t('header.megamenu.reward_history'),
                   icon: farMoneyBill,
-                  url: '/rewards'
+                  url: '/rewards',
                 },
                 {
                   label: $t('header.megamenu.profit_calculator'),
                   icon: faCalculator,
-                  url: '/calculator'
+                  url: '/calculator',
                 },
                 {
                   label: $t('header.megamenu.block_viz'),
                   icon: faProjectDiagram,
-                  url: '/vis'
+                  url: '/vis',
                 },
                 {
                   label: $t('header.megamenu.correlations'),
                   icon: faChartLine,
-                  url: '/correlations'
+                  url: '/correlations',
                 },
                 {
                   label: $t('header.megamenu.eip1599_burn'),
                   icon: faFireFlame,
-                  url: '/burn'
+                  url: '/burn',
                 },
                 {
                   label: $t('header.megamenu.relays'),
                   icon: faRobot,
-                  url: '/relays'
-                }
-              ]
-            }
+                  url: '/relays',
+                },
+              ],
+            },
           ],
           [
             {
@@ -232,46 +237,46 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.beaconchain_app'),
                   icon: faMobileScreen,
-                  url: '/mobile'
+                  url: '/mobile',
                 },
                 {
                   label: $t('header.megamenu.beaconchain_premium'),
                   icon: faGem,
-                  url: '/pricing'
+                  url: '/pricing',
                 },
                 {
                   label: $t('header.megamenu.webhooks'),
                   svg: IconWebhook,
-                  url: '/user/webhooks'
+                  url: '/user/webhooks',
                 },
                 {
                   label: $t('header.megamenu.api_docs'),
                   icon: faLaptopCode,
-                  url: '/api/v1/docs/index.html'
+                  url: '/api/v1/docs/index.html',
                 },
                 {
                   // TODO: Requires pricing page to set the toggle at the top to "API Pricing"
                   label: $t('header.megamenu.api_pricing'),
                   icon: faLaptopCode,
-                  url: '/pricing'
+                  url: '/pricing',
                 },
                 {
                   label: $t('header.megamenu.unit_converter'),
                   icon: faBuildingColumns,
-                  url: '/tools/unitConverter'
+                  url: '/tools/unitConverter',
                 },
                 {
                   label: $t('header.megamenu.gasnow'),
                   icon: faGasPump,
-                  url: '/gasnow'
+                  url: '/gasnow',
                 },
                 {
                   label: $t('header.megamenu.broadcast_signed_messages'),
                   icon: faMegaphone,
-                  url: '/tools/broadcast'
-                }
-              ]
-            }
+                  url: '/tools/broadcast',
+                },
+              ],
+            },
           ],
           [
             {
@@ -282,36 +287,36 @@ const items = computed(() => {
                   svg: IconEversteel,
                   url: 'https://eversteel.io/',
                   class: 'orange-box',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: $t('header.megamenu.notifications'),
                   icon: faBell,
-                  url: '/notifications'
+                  url: '/notifications',
                 },
                 {
                   label: $t('header.megamenu.graffiti_wall'),
                   icon: faPaintBrush,
-                  url: '/graffitiwall'
+                  url: '/graffitiwall',
                 },
                 {
                   label: $t('header.megamenu.ethereum_clients'),
                   icon: farDesktop,
-                  url: '/ethClients'
+                  url: '/ethClients',
                 },
                 {
                   label: $t('header.megamenu.knowledge_base'),
                   icon: faExternalLinkAlt,
                   url: 'https://kb.beaconcha.in',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: $t('header.megamenu.slot_finder'),
                   icon: faCube,
-                  url: '/slots/finder'
-                }
-              ]
-            }
+                  url: '/slots/finder',
+                },
+              ],
+            },
           ],
           [
             {
@@ -321,29 +326,30 @@ const items = computed(() => {
                   label: 'Discord',
                   icon: faDiscord,
                   url: 'https://dsc.gg/beaconchain',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Twitter',
                   icon: faTwitter,
                   url: 'https://twitter.com/beaconcha_in',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Github',
                   icon: faGithub,
                   url: 'https://github.com/gobitfly/beaconchain',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Github Mobile App',
                   icon: faGithub,
                   url: 'https://github.com/gobitfly/eth2-beaconchain-explorer-app',
-                  target: Target.External
-                }
-              ]
-            }
-          ]]
+                  target: Target.External,
+                },
+              ],
+            },
+          ],
+        ],
       },
       {
         label: 'Gnosis',
@@ -355,40 +361,40 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.overview'),
                   svg: NetworkGnosis,
-                  url: '/'
+                  url: '/',
                 },
                 {
                   label: $t('header.megamenu.epochs'),
                   icon: faHistory,
-                  url: '/epochs'
+                  url: '/epochs',
                 },
                 {
                   label: $t('header.megamenu.slots'),
                   icon: faCube,
-                  url: '/slots'
+                  url: '/slots',
                 },
                 {
                   label: $t('header.megamenu.blocks'),
                   icon: faCubes,
-                  url: '/blocks'
+                  url: '/blocks',
                 },
                 {
                   label: $t('header.megamenu.txs'),
                   icon: faCreditCard,
-                  url: '/transactions'
+                  url: '/transactions',
                 },
                 {
                   label: $t('header.megamenu.validators'),
                   icon: faDesktop,
-                  url: ''
+                  url: '',
                 },
                 {
                   label: $t('header.megamenu.mempool'),
                   icon: faUpload,
-                  url: '/mempool'
-                }
-              ]
-            }
+                  url: '/mempool',
+                },
+              ],
+            },
           ],
           [
             {
@@ -397,35 +403,35 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.overview'),
                   icon: faTable,
-                  url: '/validators'
+                  url: '/validators',
                 },
                 {
                   label: $t('header.megamenu.slashings'),
                   icon: faUserSlash,
-                  url: '/validators/slashings'
+                  url: '/validators/slashings',
                 },
                 {
                   label: $t('header.megamenu.validator_leaderboard'),
                   icon: faMedal,
-                  url: '/validators/leaderboard'
+                  url: '/validators/leaderboard',
                 },
                 {
                   label: $t('header.megamenu.deposit_leaderboard'),
                   icon: faFileImport,
-                  url: '/validators/deposit-leaderboard'
+                  url: '/validators/deposit-leaderboard',
                 },
                 {
                   label: $t('header.megamenu.deposits'),
                   icon: faFileSignature,
-                  url: '/validators/deposits'
+                  url: '/validators/deposits',
                 },
                 {
                   label: $t('header.megamenu.withdrawals'),
                   icon: faMoneyBill,
-                  url: '/validators/withdrawals'
-                }
-              ]
-            }
+                  url: '/validators/withdrawals',
+                },
+              ],
+            },
           ],
           [
             {
@@ -434,40 +440,40 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.charts'),
                   icon: faChartBar,
-                  url: '/charts'
+                  url: '/charts',
                 },
                 {
                   label: $t('header.megamenu.reward_history'),
                   icon: farMoneyBill,
-                  url: '/rewards'
+                  url: '/rewards',
                 },
                 {
                   label: $t('header.megamenu.profit_calculator'),
                   icon: faCalculator,
-                  url: '/calculator'
+                  url: '/calculator',
                 },
                 {
                   label: $t('header.megamenu.block_viz'),
                   icon: faProjectDiagram,
-                  url: '/vis'
+                  url: '/vis',
                 },
                 {
                   label: $t('header.megamenu.correlations'),
                   icon: faChartLine,
-                  url: '/correlations'
+                  url: '/correlations',
                 },
                 {
                   label: $t('header.megamenu.eip1599_burn'),
                   icon: faFireFlame,
-                  url: '/burn'
+                  url: '/burn',
                 },
                 {
                   label: $t('header.megamenu.relays'),
                   icon: faRobot,
-                  url: '/relays'
-                }
-              ]
-            }
+                  url: '/relays',
+                },
+              ],
+            },
           ],
           [
             {
@@ -476,35 +482,35 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.beaconchain_app'),
                   icon: faMobileScreen,
-                  url: '/mobile'
+                  url: '/mobile',
                 },
                 {
                   label: $t('header.megamenu.beaconchain_premium'),
                   icon: faGem,
-                  url: '/premium'
+                  url: '/premium',
                 },
                 {
                   label: $t('header.megamenu.webhooks'),
                   svg: IconWebhook,
-                  url: '/user/webhooks'
+                  url: '/user/webhooks',
                 },
                 {
                   label: $t('header.megamenu.api_docs'),
                   icon: faLaptopCode,
-                  url: '/api/v1/docs/index.html'
+                  url: '/api/v1/docs/index.html',
                 },
                 {
                   label: $t('header.megamenu.api_pricing'),
                   icon: faLaptopCode,
-                  url: '/pricing'
+                  url: '/pricing',
                 },
                 {
                   label: $t('header.megamenu.broadcast_signed_messages'),
                   icon: faMegaphone,
-                  url: '/tools/broadcast'
-                }
-              ]
-            }
+                  url: '/tools/broadcast',
+                },
+              ],
+            },
           ],
           [
             {
@@ -515,21 +521,21 @@ const items = computed(() => {
                   svg: IconEversteel,
                   url: 'https://eversteel.io/',
                   class: 'orange-box',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: $t('header.megamenu.notifications'),
                   icon: faBell,
-                  url: '/notifications'
+                  url: '/notifications',
                 },
                 {
                   label: $t('header.megamenu.knowledge_base'),
                   icon: faExternalLinkAlt,
                   url: 'https://kb.beaconcha.in',
-                  target: Target.External
-                }
-              ]
-            }
+                  target: Target.External,
+                },
+              ],
+            },
           ],
           [
             {
@@ -539,29 +545,30 @@ const items = computed(() => {
                   label: 'Discord',
                   icon: faDiscord,
                   url: 'https://dsc.gg/beaconchain',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Twitter',
                   icon: faTwitter,
                   url: 'https://twitter.com/beaconcha_in',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Github',
                   icon: faGithub,
                   url: 'https://github.com/gobitfly/beaconchain',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Github Mobile App',
                   icon: faGithub,
                   url: 'https://github.com/gobitfly/eth2-beaconchain-explorer-app',
-                  target: Target.External
-                }
-              ]
-            }
-          ]]
+                  target: Target.External,
+                },
+              ],
+            },
+          ],
+        ],
       },
       {
         label: 'Arbitrum',
@@ -573,35 +580,35 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.overview'),
                   svg: NetworkArbitrum,
-                  url: '/'
+                  url: '/',
                 },
                 {
                   label: $t('header.megamenu.blocks'),
                   icon: faCubes,
-                  url: '/blocks'
+                  url: '/blocks',
                 },
                 {
                   label: $t('header.megamenu.txs'),
                   icon: faCreditCard,
-                  url: '/transactions'
+                  url: '/transactions',
                 },
                 {
                   label: $t('header.megamenu.txsL1L2'),
                   icon: faCreditCard,
-                  url: ''
+                  url: '',
                 },
                 {
                   label: $t('header.megamenu.txsL2L1'),
                   icon: faCreditCard,
-                  url: ''
+                  url: '',
                 },
                 {
                   label: $t('header.megamenu.mempool'),
                   icon: faUpload,
-                  url: '/mempool'
-                }
-              ]
-            }
+                  url: '/mempool',
+                },
+              ],
+            },
           ],
           [
             {
@@ -610,20 +617,20 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.webhooks'),
                   svg: IconWebhook,
-                  url: '/user/webhooks'
+                  url: '/user/webhooks',
                 },
                 {
                   label: $t('header.megamenu.api_docs'),
                   icon: faLaptopCode,
-                  url: '/api/v1/docs/index.html'
+                  url: '/api/v1/docs/index.html',
                 },
                 {
                   label: $t('header.megamenu.api_pricing'),
                   icon: faLaptopCode,
-                  url: '/pricing'
-                }
-              ]
-            }
+                  url: '/pricing',
+                },
+              ],
+            },
           ],
           [
             {
@@ -634,16 +641,16 @@ const items = computed(() => {
                   svg: IconEversteel,
                   url: 'https://eversteel.io/',
                   class: 'orange-box',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: $t('header.megamenu.knowledge_base'),
                   icon: faExternalLinkAlt,
                   url: 'https://kb.beaconcha.in',
-                  target: Target.External
-                }
-              ]
-            }
+                  target: Target.External,
+                },
+              ],
+            },
           ],
           [
             {
@@ -653,29 +660,30 @@ const items = computed(() => {
                   label: 'Discord',
                   icon: faDiscord,
                   url: 'https://dsc.gg/beaconchain',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Twitter',
                   icon: faTwitter,
                   url: 'https://twitter.com/beaconcha_in',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Github',
                   icon: faGithub,
                   url: 'https://github.com/gobitfly/beaconchain',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Github Mobile App',
                   icon: faGithub,
                   url: 'https://github.com/gobitfly/eth2-beaconchain-explorer-app',
-                  target: Target.External
-                }
-              ]
-            }
-          ]]
+                  target: Target.External,
+                },
+              ],
+            },
+          ],
+        ],
       },
       {
         label: 'Base',
@@ -687,35 +695,35 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.overview'),
                   svg: NetworkBase,
-                  url: '/'
+                  url: '/',
                 },
                 {
                   label: $t('header.megamenu.blocks'),
                   icon: faCubes,
-                  url: '/blocks'
+                  url: '/blocks',
                 },
                 {
                   label: $t('header.megamenu.txs'),
                   icon: faCreditCard,
-                  url: '/transactions'
+                  url: '/transactions',
                 },
                 {
                   label: $t('header.megamenu.txsL1L2'),
                   icon: faCreditCard,
-                  url: ''
+                  url: '',
                 },
                 {
                   label: $t('header.megamenu.txsL2L1'),
                   icon: faCreditCard,
-                  url: ''
+                  url: '',
                 },
                 {
                   label: $t('header.megamenu.mempool'),
                   icon: faUpload,
-                  url: '/mempool'
-                }
-              ]
-            }
+                  url: '/mempool',
+                },
+              ],
+            },
           ],
           [
             {
@@ -724,20 +732,20 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.webhooks'),
                   svg: IconWebhook,
-                  url: '/user/webhooks'
+                  url: '/user/webhooks',
                 },
                 {
                   label: $t('header.megamenu.api_docs'),
                   icon: faLaptopCode,
-                  url: '/api/v1/docs/index.html'
+                  url: '/api/v1/docs/index.html',
                 },
                 {
                   label: $t('header.megamenu.api_pricing'),
                   icon: faLaptopCode,
-                  url: '/pricing'
-                }
-              ]
-            }
+                  url: '/pricing',
+                },
+              ],
+            },
           ],
           [
             {
@@ -748,16 +756,16 @@ const items = computed(() => {
                   svg: IconEversteel,
                   url: 'https://eversteel.io/',
                   class: 'orange-box',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: $t('header.megamenu.knowledge_base'),
                   icon: faExternalLinkAlt,
                   url: 'https://kb.beaconcha.in',
-                  target: Target.External
-                }
-              ]
-            }
+                  target: Target.External,
+                },
+              ],
+            },
           ],
           [
             {
@@ -767,29 +775,30 @@ const items = computed(() => {
                   label: 'Discord',
                   icon: faDiscord,
                   url: 'https://dsc.gg/beaconchain',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Twitter',
                   icon: faTwitter,
                   url: 'https://twitter.com/beaconcha_in',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Github',
                   icon: faGithub,
                   url: 'https://github.com/gobitfly/beaconchain',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Github Mobile App',
                   icon: faGithub,
                   url: 'https://github.com/gobitfly/eth2-beaconchain-explorer-app',
-                  target: Target.External
-                }
-              ]
-            }
-          ]]
+                  target: Target.External,
+                },
+              ],
+            },
+          ],
+        ],
       },
       {
         label: 'Optimism',
@@ -801,35 +810,35 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.overview'),
                   svg: NetworkOptimism,
-                  url: '/'
+                  url: '/',
                 },
                 {
                   label: $t('header.megamenu.blocks'),
                   icon: faCubes,
-                  url: '/blocks'
+                  url: '/blocks',
                 },
                 {
                   label: $t('header.megamenu.txs'),
                   icon: faCreditCard,
-                  url: '/transactions'
+                  url: '/transactions',
                 },
                 {
                   label: $t('header.megamenu.txsL1L2'),
                   icon: faCreditCard,
-                  url: ''
+                  url: '',
                 },
                 {
                   label: $t('header.megamenu.txsL2L1'),
                   icon: faCreditCard,
-                  url: ''
+                  url: '',
                 },
                 {
                   label: $t('header.megamenu.mempool'),
                   icon: faUpload,
-                  url: '/mempool'
-                }
-              ]
-            }
+                  url: '/mempool',
+                },
+              ],
+            },
           ],
           [
             {
@@ -838,20 +847,20 @@ const items = computed(() => {
                 {
                   label: $t('header.megamenu.webhooks'),
                   svg: IconWebhook,
-                  url: '/user/webhooks'
+                  url: '/user/webhooks',
                 },
                 {
                   label: $t('header.megamenu.api_docs'),
                   icon: faLaptopCode,
-                  url: '/api/v1/docs/index.html'
+                  url: '/api/v1/docs/index.html',
                 },
                 {
                   label: $t('header.megamenu.api_pricing'),
                   icon: faLaptopCode,
-                  url: '/pricing'
-                }
-              ]
-            }
+                  url: '/pricing',
+                },
+              ],
+            },
           ],
           [
             {
@@ -862,16 +871,16 @@ const items = computed(() => {
                   svg: IconEversteel,
                   url: 'https://eversteel.io/',
                   class: 'orange-box',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: $t('header.megamenu.knowledge_base'),
                   icon: faExternalLinkAlt,
                   url: 'https://kb.beaconcha.in',
-                  target: Target.External
-                }
-              ]
-            }
+                  target: Target.External,
+                },
+              ],
+            },
           ],
           [
             {
@@ -881,68 +890,71 @@ const items = computed(() => {
                   label: 'Discord',
                   icon: faDiscord,
                   url: 'https://dsc.gg/beaconchain',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Twitter',
                   icon: faTwitter,
                   url: 'https://twitter.com/beaconcha_in',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Github',
                   icon: faGithub,
                   url: 'https://github.com/gobitfly/beaconchain',
-                  target: Target.External
+                  target: Target.External,
                 },
                 {
                   label: 'Github Mobile App',
                   icon: faGithub,
                   url: 'https://github.com/gobitfly/eth2-beaconchain-explorer-app',
-                  target: Target.External
-                }
-              ]
-            }
-          ]
-        ]
+                  target: Target.External,
+                },
+              ],
+            },
+          ],
+        ],
       },
       {
         label: $t('header.megamenu.dashboard'),
-        url: '/dashboard'
+        url: '/dashboard',
       },
       {
         label: $t('header.megamenu.pricing'),
-        url: '/pricing'
+        url: '/pricing',
       },
       {
         label: $t('header.megamenu.notifications'),
-        url: '/notifications'
-      }
+        url: '/notifications',
+      },
     ]
-  } else {
+  }
+  else {
     list = [
       {
         label: $t('header.megamenu.dashboard'),
-        url: '/dashboard'
+        url: '/dashboard',
       },
       {
         label: $t('header.megamenu.pricing'),
-        url: '/pricing'
-      }
+        url: '/pricing',
+      },
     ]
   }
   if (isMobile.value) {
     if (isLoggedIn.value) {
       list.push({
         label: $t('header.settings'),
-        command: async () => { await navigateTo('../user/settings') }
+        command: async () => {
+          await navigateTo('../user/settings')
+        },
       })
     }
   }
   if (isSmallScreen.value && isLoggedIn.value) {
     list.push({
       label: $t('header.logout'),
-      command: () => doLogout()
+      command: () => doLogout(),
     })
   }
   return list
@@ -957,28 +969,60 @@ const toggleMegaMenu = (evt: Event) => {
 
 defineExpose({
   toggleMegaMenu,
-  isMobileMenuOpen
+  isMobileMenuOpen,
 })
 </script>
 
 <template>
   <ClientOnly>
-    <MegaMenu ref="megaMenu" :model="items" :breakpoint="breakpoint">
-      <template #item="{item, hasSubmenu}">
+    <MegaMenu
+      ref="megaMenu"
+      :model="items"
+      :breakpoint="breakpoint"
+    >
+      <template #item="{ item, hasSubmenu }">
         <span class="p-menuitem-link">
-          <span v-if="item.svg || item.icon" class="p-menuitem-icon iconSpacing" data-pc-section="icon">
-            <component :is="item.svg" v-if="item.svg" class="monochromatic" />
-            <FontAwesomeIcon v-else-if="item.icon" class="icon" :icon="item.icon" />
+          <span
+            v-if="item.svg || item.icon"
+            class="p-menuitem-icon iconSpacing"
+            data-pc-section="icon"
+          >
+            <component
+              :is="item.svg"
+              v-if="item.svg"
+              class="monochromatic"
+            />
+            <FontAwesomeIcon
+              v-else-if="item.icon"
+              class="icon"
+              :icon="item.icon"
+            />
           </span>
-          <BcLink v-if="item.url" :to="item.url" :replace="route.path.startsWith(item.url)">
-            <span :class="[item.class]" class="p-menuitem-text">
+          <BcLink
+            v-if="item.url"
+            :to="item.url"
+            :replace="route.path.startsWith(item.url)"
+          >
+            <span
+              :class="[item.class]"
+              class="p-menuitem-text"
+            >
               <span>{{ item.label }}</span>
             </span>
           </BcLink>
-          <div v-else class="pointer p-menuitem-text" :class="[item.class]" @click="item.command?.(null as any)">
+          <div
+            v-else
+            class="pointer p-menuitem-text"
+            :class="[item.class]"
+            @click="item.command?.(null as any)"
+          >
             {{ item.label }}
           </div>
-          <FontAwesomeIcon v-if="hasSubmenu" :icon="faCaretRight" class="p-icon p-submenu-icon" />
+          <FontAwesomeIcon
+            v-if="hasSubmenu"
+            :icon="faCaretRight"
+            class="p-icon p-submenu-icon"
+          />
         </span>
       </template>
     </MegaMenu>
diff --git a/frontend/components/bc/input/BcInputCheckbox.vue b/frontend/components/bc/input/BcInputCheckbox.vue
index d422901ae..b1676210b 100644
--- a/frontend/components/bc/input/BcInputCheckbox.vue
+++ b/frontend/components/bc/input/BcInputCheckbox.vue
@@ -1,58 +1,55 @@
 <script lang="ts" setup>
-  import {
-    faInfoCircle
-  } from '@fortawesome/pro-regular-svg-icons'
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import type { BcInputError } from '~/components/bc/input/BcInputError.vue';
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import type { BcInputError } from '~/components/bc/input/BcInputError.vue'
 
-  const props = defineProps<{
-    error?: BcInputError,
-    label?: string,
-    infoText?: string,
-  }>()
-
-  const id = props.label ? useId() : undefined
-  const input = defineModel<boolean>()
+const props = defineProps<{
+  error?: BcInputError
+  label?: string
+  infoText?: string
+}>()
 
+const id = props.label ? useId() : undefined
+const input = defineModel<boolean>()
 </script>
 
 <template>
   <BcInputError :error>
-  <span>
-    <label 
-      v-if="label"
-      class="label"
-      :for="id"
-    >
-      {{ label }}
-    </label>
-    <BcTooltip 
-      v-if="infoText || $slots.tooltip"
-      class="bc-input-checkbox__info"
-      tooltip-width="220px"
-      tooltip-text-align="left"
-    >
-      <FontAwesomeIcon :icon="faInfoCircle" />
-      <template #tooltip>
-        {{ infoText }}
-        <slot name="tooltip" />
-      </template>
-    </BcTooltip>
-  </span>
-    <Checkbox 
+    <span>
+      <label
+        v-if="label"
+        class="label"
+        :for="id"
+      >
+        {{ label }}
+      </label>
+      <BcTooltip
+        v-if="infoText || $slots.tooltip"
+        class="bc-input-checkbox__info"
+        tooltip-width="220px"
+        tooltip-text-align="left"
+      >
+        <FontAwesomeIcon :icon="faInfoCircle" />
+        <template #tooltip>
+          {{ infoText }}
+          <slot name="tooltip" />
+        </template>
+      </BcTooltip>
+    </span>
+    <Checkbox
       v-model="input"
-      :input-id="id" 
+      :input-id="id"
       v-bind="$attrs"
       binary
     />
   </BcInputError>
-</template> 
+</template>
 
 <style lang="scss">
-.label{
+.label {
   cursor: pointer;
 }
 .bc-input-checkbox__info {
   margin-left: var(--padding);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/components/bc/input/BcInputError.vue b/frontend/components/bc/input/BcInputError.vue
index 0cd4ddd92..22de10d00 100644
--- a/frontend/components/bc/input/BcInputError.vue
+++ b/frontend/components/bc/input/BcInputError.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-const idError = useId();
-  /**
-   * Spacing of error message will be removed by explicitly passing `false`.
-   * This should encourage to always think about the error message.
-   */
-export type BcInputError = false | string;
+const idError = useId()
+/**
+ * Spacing of error message will be removed by explicitly passing `false`.
+ * This should encourage to always think about the error message.
+ */
+export type BcInputError = false | string
 defineProps<{
-  error?: BcInputError;
-}>();
+  error?: BcInputError
+}>()
 </script>
 
 <template>
@@ -16,7 +16,11 @@ defineProps<{
     :aria-invalid="!!error"
     :aria-describedby="idError"
   />
-  <div v-if="error !== false" :id="idError" class="bc-input-error">
+  <div
+    v-if="error !== false"
+    :id="idError"
+    class="bc-input-error"
+  >
     {{ error }}
   </div>
 </template>
@@ -31,4 +35,4 @@ defineProps<{
   --line-height--default: 1.2;
   min-height: calc(16px * var(--line-height--default));
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/components/bc/input/BcInputLabel.vue b/frontend/components/bc/input/BcInputLabel.vue
index a9cc6b30b..e8b8e4cd4 100644
--- a/frontend/components/bc/input/BcInputLabel.vue
+++ b/frontend/components/bc/input/BcInputLabel.vue
@@ -1,24 +1,21 @@
 <script setup lang="ts">
-import {
-  faCheck,
-  faEdit
-} from '@fortawesome/pro-solid-svg-icons'
+import { faCheck, faEdit } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 interface Props {
-  value?: string,
-  label?: string, // used if not in edit mode, defaults to value,
-  disabled?: boolean,
-  canBeEmpty?: boolean,
-  maxlength?: number,
-  pattern?: RegExp,
-  trimInput?: boolean,
+  value?: string
+  label?: string // used if not in edit mode, defaults to value,
+  disabled?: boolean
+  canBeEmpty?: boolean
+  maxlength?: number
+  pattern?: RegExp
+  trimInput?: boolean
 }
 
 const props = defineProps<Props>()
 const inputRef = ref<ComponentPublicInstance | null>(null)
 
-const emit = defineEmits<{(e: 'setValue', value: string): void }>()
+const emit = defineEmits<{ (e: 'setValue', value: string): void }>()
 
 const isEditing = ref(false)
 const editValue = ref<string>(props.value ?? '')
@@ -46,30 +43,53 @@ const iconClick = () => {
 
 const icon = computed(() => ({
   icon: isEditing.value ? faCheck : faEdit,
-  disabled: (props.disabled || (isEditing.value && (!editValue.value && !props.canBeEmpty)) || (props.pattern && !props.pattern.test(editValue.value))) ? true : null
+  disabled:
+    props.disabled
+    || (isEditing.value && !editValue.value && !props.canBeEmpty)
+    || (props.pattern && !props.pattern.test(editValue.value))
+      ? true
+      : null,
 }))
 
-watch(() => props.value, (v) => {
-  editValue.value = v ?? ''
-})
+watch(
+  () => props.value,
+  (v) => {
+    editValue.value = v ?? ''
+  },
+)
 
 watch([isEditing, inputRef], ([edit, input]) => {
   if (edit) {
     input?.$el?.focus()
   }
 })
-
 </script>
 
 <template>
   <div class="input-container">
-    <div v-if="isEditing" class="input-wrapper">
-      <InputText ref="inputRef" v-model="editValue" :maxlength="maxlength" @keypress.enter="iconClick" />
+    <div
+      v-if="isEditing"
+      class="input-wrapper"
+    >
+      <InputText
+        ref="inputRef"
+        v-model="editValue"
+        :maxlength="maxlength"
+        @keypress.enter="iconClick"
+      />
     </div>
-    <span v-if="!isEditing" class="label">
+    <span
+      v-if="!isEditing"
+      class="label"
+    >
       {{ label || value }}
     </span>
-    <FontAwesomeIcon class="link" :icon="icon.icon" :disabled="icon.disabled" @click="iconClick" />
+    <FontAwesomeIcon
+      class="link"
+      :icon="icon.icon"
+      :disabled="icon.disabled"
+      @click="iconClick"
+    />
   </div>
 </template>
 
@@ -97,11 +117,11 @@ watch([isEditing, inputRef], ([edit, input]) => {
     @include utils.truncate-text;
   }
 
-  .link{
+  .link {
     margin-right: var(--padding);
   }
 
-  >svg[disabled]{
+  > svg[disabled] {
     color: var(--button-color-disabled);
   }
 }
diff --git a/frontend/components/bc/input/BcInputText.vue b/frontend/components/bc/input/BcInputText.vue
index a41eb0f2b..a798cfa8c 100644
--- a/frontend/components/bc/input/BcInputText.vue
+++ b/frontend/components/bc/input/BcInputText.vue
@@ -1,40 +1,40 @@
 <script lang="ts" setup>
-import type { BcInputError } from '~/components/bc/input/BcInputError.vue';
+import type { BcInputError } from '~/components/bc/input/BcInputError.vue'
 
-const idInput = useId();
-const input = defineModel<string>();
+const idInput = useId()
+const input = defineModel<string>()
 
 const props = defineProps<{
-  error?: BcInputError;
-  inputWidth?: `${number}px`;
-  label: string;
-  placeholder?: string;
-  type?: HTMLInputElement['type'];
-  shouldAutoselect?: boolean;
-}>();
+  error?: BcInputError
+  inputWidth?: `${number}px`
+  label: string
+  placeholder?: string
+  type?: HTMLInputElement['type']
+  shouldAutoselect?: boolean
+}>()
 onMounted(() => {
-  if(props.shouldAutoselect) {
-    const input = document.getElementById(idInput);
-    if(input instanceof HTMLInputElement) {
-      input.focus();
-      input.select();
+  if (props.shouldAutoselect) {
+    const input = document.getElementById(idInput)
+    if (input instanceof HTMLInputElement) {
+      input.focus()
+      input.select()
     }
   }
-});
+})
 </script>
 
 <template>
-    <BcInputError :error>
-      <label :for="idInput">{{ label }}</label>
-      <InputText
+  <BcInputError :error>
+    <label :for="idInput">{{ label }}</label>
+    <InputText
       :id="idInput"
       v-model.trim="input"
       v-bind="$attrs"
       class="bc-input-text__input"
       :placeholder
       :type
-      />
-    </BcInputError>
+    />
+  </BcInputError>
 </template>
 
 <style lang="scss">
diff --git a/frontend/components/bc/menu/BcMenuBar.vue b/frontend/components/bc/menu/BcMenuBar.vue
index f0f087863..debcc8f62 100644
--- a/frontend/components/bc/menu/BcMenuBar.vue
+++ b/frontend/components/bc/menu/BcMenuBar.vue
@@ -3,17 +3,25 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { MenuBarEntry } from '~/types/menuBar'
 
 interface Props {
-  buttons?: MenuBarEntry[],
+  buttons?: MenuBarEntry[]
   alignRight?: boolean
 }
 defineProps<Props>()
-
 </script>
 
 <template>
-  <Menubar v-if="buttons?.length" :model="buttons" breakpoint="0px" :class="{ 'right-aligned-submenu': alignRight }">
+  <Menubar
+    v-if="buttons?.length"
+    :model="buttons"
+    breakpoint="0px"
+    :class="{ 'right-aligned-submenu': alignRight }"
+  >
     <template #item="{ item }">
-      <component :is="item.component" v-if="item.component" class="button-content" />
+      <component
+        :is="item.component"
+        v-if="item.component"
+        class="button-content"
+      />
       <BcTooltip
         v-else-if="item.disabledTooltip"
         :text="item.disabledTooltip"
@@ -28,9 +36,16 @@ defineProps<Props>()
         class="pointer"
         :class="{ 'p-active': item.active }"
       >
-        <span class="button-content" :class="[item.class]">
+        <span
+          class="button-content"
+          :class="[item.class]"
+        >
           <span class="text">{{ item.label }}</span>
-          <IconChevron v-if="item.dropdown" class="toggle" direction="bottom" />
+          <IconChevron
+            v-if="item.dropdown"
+            class="toggle"
+            direction="bottom"
+          />
         </span>
       </BcLink>
       <span
@@ -39,9 +54,20 @@ defineProps<Props>()
         :class="[item.class, { 'p-active': item.active }]"
         :highlight="item.highlight || null"
       >
-        <FontAwesomeIcon v-if="item.faIcon" :icon="item.faIcon" class="icon" />
-        <span v-if="item.label" class="text">{{ item.label }}</span>
-        <IconChevron v-if="item.dropdown && (!item.faIcon || item.label)" class="toggle" direction="bottom" />
+        <FontAwesomeIcon
+          v-if="item.faIcon"
+          :icon="item.faIcon"
+          class="icon"
+        />
+        <span
+          v-if="item.label"
+          class="text"
+        >{{ item.label }}</span>
+        <IconChevron
+          v-if="item.dropdown && (!item.faIcon || item.label)"
+          class="toggle"
+          direction="bottom"
+        />
       </span>
     </template>
   </Menubar>
diff --git a/frontend/components/bc/premium/BcPremiumGem.vue b/frontend/components/bc/premium/BcPremiumGem.vue
index 666e1f12b..45152a6f2 100644
--- a/frontend/components/bc/premium/BcPremiumGem.vue
+++ b/frontend/components/bc/premium/BcPremiumGem.vue
@@ -1,15 +1,20 @@
 <script lang="ts" setup>
-import {
-  faGem
-} from '@fortawesome/pro-regular-svg-icons'
+import { faGem } from '@fortawesome/pro-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 </script>
 
 <template>
   <BcTooltip :text="$t('premium.subscribe')">
-    <BcLink :to="`/pricing`" target="_blank" class="link">
+    <BcLink
+      :to="`/pricing`"
+      target="_blank"
+      class="link"
+    >
       <div>
-        <FontAwesomeIcon :icon="faGem" class="gem" />
+        <FontAwesomeIcon
+          :icon="faGem"
+          class="gem"
+        />
       </div>
     </BcLink>
   </BcTooltip>
diff --git a/frontend/components/bc/premium/BcPremiumModal.vue b/frontend/components/bc/premium/BcPremiumModal.vue
index be9bf5d0a..5f82aacc2 100644
--- a/frontend/components/bc/premium/BcPremiumModal.vue
+++ b/frontend/components/bc/premium/BcPremiumModal.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 interface Props {
-  description?: string,
+  description?: string
   dismissLabel?: string
 }
 
-const { props, dialogRef, setHeader } = useBcDialog<Props>({ contentClass: 'premium-modal' })
+const { props, dialogRef, setHeader } = useBcDialog<Props>({
+  contentClass: 'premium-modal',
+})
 const { t: $t } = useTranslation()
 
 const hide = () => {
@@ -14,18 +16,24 @@ const hide = () => {
 onMounted(() => {
   setHeader($t('premium.title'), true)
 })
-
 </script>
 
 <template>
   <div class="text">
-    {{ props?.description || $t('premium.description') }}
+    {{ props?.description || $t("premium.description") }}
   </div>
   <div class="footer">
-    <div class="dismiss" @click="hide()">
-      {{ props?.dismissLabel || $t('navigation.dismiss') }}
+    <div
+      class="dismiss"
+      @click="hide()"
+    >
+      {{ props?.dismissLabel || $t("navigation.dismiss") }}
     </div>
-    <BcLink to="/pricing" target="_blank" @click="hide()">
+    <BcLink
+      to="/pricing"
+      target="_blank"
+      @click="hide()"
+    >
       <Button :label="$t('premium.unlock')" />
     </BcLink>
   </div>
@@ -56,7 +64,7 @@ onMounted(() => {
   }
 }
 
-:global(.p-dialog:has(.premium-modal)>.p-dialog-header) {
+:global(.p-dialog:has(.premium-modal) > .p-dialog-header) {
   color: var(--primary-color);
   font-size: var(--subtitle_font_size);
 }
diff --git a/frontend/components/bc/searchbar/CategorySelectors.vue b/frontend/components/bc/searchbar/CategorySelectors.vue
index 4b0f159ec..98663167b 100644
--- a/frontend/components/bc/searchbar/CategorySelectors.vue
+++ b/frontend/components/bc/searchbar/CategorySelectors.vue
@@ -5,20 +5,22 @@ import {
   CategoryInfo,
   type SearchbarColors,
   type SearchbarDropdownLayout,
-  type CategoryFilter
-} from '~/types/searchbar';
+  type CategoryFilter,
+} from '~/types/searchbar'
 
-const emit = defineEmits<{(e: 'change') : void}>()
+const emit = defineEmits<{ (e: 'change'): void }>()
 defineProps<{
-  barShape: SearchbarShape,
-  colorTheme: SearchbarColors,
-  dropdownLayout : SearchbarDropdownLayout
+  barShape: SearchbarShape
+  colorTheme: SearchbarColors
+  dropdownLayout: SearchbarDropdownLayout
 }>()
-const liveState = defineModel<CategoryFilter>({ required: true }) // each entry has a Category as key and the state of the option as value. The component will write directly into it, so the data of the parent is always up-to-date.
+// each entry has a Category as key and the state of the option as value.
+// The component will write directly into it, so the data of the parent is always up-to-date.
+const liveState = defineModel<CategoryFilter>({ required: true })
 
 const { t } = useTranslation()
 
-function selectionHasChanged (category : Category, selected : boolean) {
+function selectionHasChanged(category: Category, selected: boolean) {
   liveState.value.set(category, selected)
   emit('change')
 }
@@ -34,7 +36,7 @@ function selectionHasChanged (category : Category, selected : boolean) {
       :bar-shape="barShape"
       :color-theme="colorTheme"
       :dropdown-layout="dropdownLayout"
-      @change="(selected : boolean) => selectionHasChanged(filter[0], selected)"
+      @change="(selected: boolean) => selectionHasChanged(filter[0], selected)"
     >
       {{ t(...CategoryInfo[filter[0]].filterLabel) }}
     </BcSearchbarFilterButton>
diff --git a/frontend/components/bc/searchbar/FilterButton.vue b/frontend/components/bc/searchbar/FilterButton.vue
index 87e81bb62..747fe4740 100644
--- a/frontend/components/bc/searchbar/FilterButton.vue
+++ b/frontend/components/bc/searchbar/FilterButton.vue
@@ -2,29 +2,36 @@
 import type {
   SearchbarShape,
   SearchbarColors,
-  SearchbarDropdownLayout
-} from '~/types/searchbar';
+  SearchbarDropdownLayout,
+} from '~/types/searchbar'
 
 defineProps<{
-  barShape: SearchbarShape,
-  colorTheme: SearchbarColors,
-  dropdownLayout: SearchbarDropdownLayout,
-  state?: boolean,
-  look?: 'on'|'off' // forces the look of the button statically instead of having the color changing with its state
+  barShape: SearchbarShape
+  colorTheme: SearchbarColors
+  dropdownLayout: SearchbarDropdownLayout
+  state?: boolean
+  look?: 'on' | 'off' // forces the look of the button statically instead of having the color changing with its state
 }>()
 
-const emit = defineEmits<{(e: 'change', activated : boolean) : void}>()
+const emit = defineEmits<{ (e: 'change', activated: boolean): void }>()
 </script>
 
 <template>
-  <label class="frame" :class="[barShape,colorTheme,dropdownLayout,look]">
+  <label
+    class="frame"
+    :class="[barShape, colorTheme, dropdownLayout, look]"
+  >
     <input
       type="checkbox"
       class="hidden-checkbox"
       :true-value="true"
       :false-value="false"
       :checked="state"
-      :onchange="(e:any) => {emit('change', e.target.checked)}"
+      :onchange="
+        (e: any) => {
+          emit('change', e.target.checked);
+        }
+      "
     >
     <div class="content">
       <slot />
diff --git a/frontend/components/bc/searchbar/MiddleEllipsis.vue b/frontend/components/bc/searchbar/MiddleEllipsis.vue
index 67b89af96..578426317 100644
--- a/frontend/components/bc/searchbar/MiddleEllipsis.vue
+++ b/frontend/components/bc/searchbar/MiddleEllipsis.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/max-len -- TODO: plz fix this -->
 <script setup lang="ts">
 import { type ComponentPublicInstance, warn } from 'vue'
 
@@ -6,23 +7,23 @@ const DEBUG = false // Use Chromium or Chrome. Firefox will show messages with b
 const ResizeObserverLagMargin = 1 // This safety margin is important, because the resizing observer happens to lag. If a small decrease of width making the frame as large as its content does not trigger the observer, then it will not fire anymore because the frame cannot shrink anymore.
 
 const props = defineProps<{
-  text?: string,
-  initialFlexGrow?: number, // If the component has no defined size (meaning that its width collapses to 0 when it contains nothing) then you must set a value in this props.
-  ellipses?: number | number[], // If number: number of ellipses to use (the same for any room available), 1 by default. If array, its meaning is: [room above which two `…` are used, room above which three `…` are used, and so on]. Ex: [8,30,100] tells the component to use one ellipsis if there is room for 8 characters or less, or two ellipses between 9 and 30 characters, and so on.
-  widthMediaqueryThreshold?: number, // Very important: if a `@media (min-width: AAApx)` or a `@media (max-width: AAApx)` somewhere in your CSS has an effect on the size of the component (sudden changes of width), give AAA to this pros.
+  text?: string
+  initialFlexGrow?: number // If the component has no defined size (meaning that its width collapses to 0 when it contains nothing) then you must set a value in this props.
+  ellipses?: number | number[] // If number: number of ellipses to use (the same for any room available), 1 by default. If array, its meaning is: [room above which two `…` are used, room above which three `…` are used, and so on]. Ex: [8,30,100] tells the component to use one ellipsis if there is room for 8 characters or less, or two ellipses between 9 and 30 characters, and so on.
+  widthMediaqueryThreshold?: number // Very important: if a `@media (min-width: AAApx)` or a `@media (max-width: AAApx)` somewhere in your CSS has an effect on the size of the component (sudden changes of width), give AAA to this pros.
   // !! The props below are for internal use only !!
   meCallbackToInformParentAboutChanges?: typeof enterUpdateCycleAsAparent
   class?: string | string[] // to make the list of classes reactive
 }>()
 
 interface ExposedMembers {
-  amIofDefinedWidth: ComputedRef<boolean>,
-  whatIsMyFlexGrow: typeof whatIsMyFlexGrow,
-  howMuchCanIshrinkOrGrow: typeof howMuchCanIshrinkOrGrow,
-  getReadyForUpdate: typeof getReadyForUpdate,
-  updateContent: typeof updateContent,
-  settleAfterUpdate: typeof settleAfterUpdate,
-  saveFinalState: typeof saveFinalState,
+  amIofDefinedWidth: ComputedRef<boolean>
+  whatIsMyFlexGrow: typeof whatIsMyFlexGrow
+  howMuchCanIshrinkOrGrow: typeof howMuchCanIshrinkOrGrow
+  getReadyForUpdate: typeof getReadyForUpdate
+  updateContent: typeof updateContent
+  settleAfterUpdate: typeof settleAfterUpdate
+  saveFinalState: typeof saveFinalState
   enterUpdateCycleAsAparent: typeof enterUpdateCycleAsAparent
 }
 
@@ -32,14 +33,14 @@ enum WhatIcanBe {
   Error = 0,
   Parent,
   Child,
-  Standalone
+  Standalone,
 }
 
 enum WidthMode {
   NoFlexGrow,
   NoWidth,
   FixedFlexGrow,
-  FixedWidth
+  FixedWidth,
 }
 
 // This identifiers will tell us how the gap between the end of the text and the right edge of the frame changes
@@ -47,29 +48,31 @@ enum UpdateReason {
   None = 0,
   GapChangeToBeDetermined,
   GapChangeMinus,
-  GapChangePlus
+  GapChangePlus,
 }
 
 enum SignalDirection {
   ChildrenToParent,
-  ParentToChildren
+  ParentToChildren,
 }
 
 type TextProperties = { text: string, width: number }
 
 const _s = useSlots() // Not meant to be used directly. Use the reactive variable `slot` defined just below:
-const slot = computed(() => _s.default ? _s.default() : []) // `slot`s is always an array, empty if there is no slot
+const slot = computed(() => (_s.default ? _s.default() : [])) // `slot`s is always an array, empty if there is no slot
 
 const innerElements = {
-  allInstanciatedElements: ref<(ComponentPublicInstance | MiddleEllipsis)[]>([]), // Instanciated elements from our slot. This array is filled by Vue in the <template>.
+  allInstanciatedElements: ref<(ComponentPublicInstance | MiddleEllipsis)[]>(
+    [],
+  ), // Instanciated elements from our slot. This array is filled by Vue in the <template>.
   // The following arrays are filled by us, each time the slot is modified:
   widthDefinedChildren: [] as MiddleEllipsis[], // List of instanciated elements from our slot that are MiddleEllipsis children with a defined width.
   widthUndefinedChildren: [] as MiddleEllipsis[], // List of instanciated elements from our slot that are MiddleEllipsis children with an undefined width.
   isAnUpdateOrdered: true,
-  slotNonce: 0
+  slotNonce: 0,
 }
 const frameSpan = ref<HTMLSpanElement>(null as unknown as HTMLSpanElement)
-let frameStyle : CSSStyleDeclaration
+let frameStyle: CSSStyleDeclaration
 let frameText = props.text || '' // After mounting, this variable will always mirror the text in the frame. Before mounting, it contains the full text so that <template> can display it during isServer.
 
 let mediaqueryWidthListener: MediaQueryList
@@ -77,15 +80,17 @@ let delayedForcedUpdateIncoming = false
 
 let classPropsDuringLastUpdate = props.class || ''
 let textPropsDuringLastUpdate = props.text || ''
-let initialFlexGrowDuringLastUpdate : number | undefined
-let ellipsesPropsDuringLastUpdate : number | number[] | undefined = 1
-let textAfterLastUpdate : TextProperties = { text: '', width: 0 }
+let initialFlexGrowDuringLastUpdate: number | undefined
+let ellipsesPropsDuringLastUpdate: number | number[] | undefined = 1
+let textAfterLastUpdate: TextProperties = { text: '', width: 0 }
 let widthAvailableDuringLastUpdate = 0 // used by determineReason() to find out why an update is needed, during the update process
 let frameWidthAfterLastUpdate = 0 // used by determineReason() to find out why an update is needed, outside the update process
 let lastMeasuredFrameWidth = 0
 let currentAdditionalWidthAvailable = 0
 let currentText = ''
-const canvasContextToCalculateTextWidths = (isServer ? null : document.createElement('canvas').getContext('2d')) as CanvasRenderingContext2D
+const canvasContextToCalculateTextWidths = (
+  isServer ? null : document.createElement('canvas').getContext('2d')
+) as CanvasRenderingContext2D
 const lastTextWidthCalculation: TextProperties = { text: '', width: 0 }
 let amImounted = false
 let didTheResizingObserverFireSinceMount = false
@@ -111,12 +116,16 @@ const amIinsideAparent = computed(() => {
 
 const whatIam = computed(() => {
   if (!amIofDefinedWidth.value && !amIinsideAparent.value) {
-    warn('MiddleEllipsis cannot have an undefined width because it is outside a MiddleEllipsis container.')
+    warn(
+      'MiddleEllipsis cannot have an undefined width because it is outside a MiddleEllipsis container.',
+    )
     return WhatIcanBe.Error
   }
   if (slot.value[0]) {
     if (props.text) {
-      warn('MiddleEllipsis cannot receive any content in props `text` because it is a container.')
+      warn(
+        'MiddleEllipsis cannot receive any content in props `text` because it is a container.',
+      )
       return WhatIcanBe.Error
     }
     return WhatIcanBe.Parent // Parents in parents are considered Parents because slot.value[0] has been tested before the following:
@@ -128,7 +137,7 @@ const whatIam = computed(() => {
   return amIinsideAparent.value ? WhatIcanBe.Child : WhatIcanBe.Standalone
 })
 
-const exposedMembers : ExposedMembers = {
+const exposedMembers: ExposedMembers = {
   amIofDefinedWidth,
   whatIsMyFlexGrow,
   howMuchCanIshrinkOrGrow,
@@ -136,12 +145,14 @@ const exposedMembers : ExposedMembers = {
   updateContent,
   settleAfterUpdate,
   saveFinalState,
-  enterUpdateCycleAsAparent
+  enterUpdateCycleAsAparent,
 }
 
 defineExpose<ExposedMembers>(exposedMembers)
 
-function isObjectMiddleEllipsis (obj : MiddleEllipsis | ComponentPublicInstance) : MiddleEllipsis | undefined {
+function isObjectMiddleEllipsis(
+  obj: MiddleEllipsis | ComponentPublicInstance,
+): MiddleEllipsis | undefined {
   for (const exposedMEsymbol in exposedMembers) {
     if (!(exposedMEsymbol in obj)) {
       return undefined
@@ -150,114 +161,166 @@ function isObjectMiddleEllipsis (obj : MiddleEllipsis | ComponentPublicInstance)
   return obj as MiddleEllipsis
 }
 
-watch(slot, () => { // reacts to changes of components in our slot, and unfortunately also to changes in their props (Vue bug or feature)
-  invalidateWidthCache()
-  invalidateChildrenIdentities()
-  innerElements.slotNonce++
-}, {
-  flush: 'pre'
-})
-watch(slot, () => { // reacts to changes of components in our slot after they are mounted, and unfortunately this happens also after changes in their props
-  logStep('event', 'new slot instanciated')
-  invalidateChildrenIdentities()
-  identifyChildren()
-  nextTick(() => updateContent(0, false)) // waiting for the next tick ensures that the children are in the DOM when we start the update cycle (this slot-watcher ensured they were instantiated but not inserted in the real DOM)
-}, {
-  flush: 'post'
-})
-
-watch(() => props.class, (newClassList) => { // reacts to changes in our list of classes
-  if (newClassList === classPropsDuringLastUpdate) {
-    // our watcher lags (we already updated with the correct class list)
-    return
-  }
-  logStep('event', 'new class list received')
-  invalidateTextWidthCalculationCache() // the font might have changed
-  invalidateWidthCache()
-  if (!amIinsideAparent.value) {
-    updateContent(0, false)
-  } else {
-    logStep('signal', 'notifying my parent')
-    props.meCallbackToInformParentAboutChanges!(SignalDirection.ChildrenToParent)
-  }
-})
-
-watch(() => props.text, (newText) => { // reacts to changes of text
-  if (newText === textPropsDuringLastUpdate) {
-    // our watcher lags (we already updated with the correct text)
-    return
-  }
-  logStep('event', 'new text received')
-  if (!amIinsideAparent.value) {
-    updateContent(0, false)
-  } else {
-    logStep('signal', 'notifying my parent')
-    props.meCallbackToInformParentAboutChanges!(SignalDirection.ChildrenToParent)
-  }
-})
-
-watch(() => props.initialFlexGrow, (newIFG) => { // reacts to changes of props initialFlexGrow
-  if (newIFG === initialFlexGrowDuringLastUpdate) {
-    // our watcher lags (we already updated with the correct initial flex-grow)
-    return
-  }
-  logStep('event', 'new initial flex-grow received')
-  logStep('signal', 'notifying my parent')
-  props.meCallbackToInformParentAboutChanges!(SignalDirection.ChildrenToParent)
-})
-
-watch(() => props.ellipses, (newEllipses) => { // reacts to changes regarding the number of ellipses to use
-  if (newEllipses === ellipsesPropsDuringLastUpdate) {
-    // our watcher lags (we already updated with the correct value)
-    return
-  }
-  logStep('event', 'new (array of) number(s) regarding ellipses received')
-  if (amIofDefinedWidth.value) {
-    // the clipping adapts the text to our width, not the other way around, so our width did not change, so we can update by ourselves (if we have a parent, a notification is useless and our siblings would spend resources updating for nothing)
-    updateContent(0, false)
-  } else { // our width is not defined so we have a parent
+watch(
+  slot,
+  () => {
+    // reacts to changes of components in our slot, and unfortunately also to changes in their props (Vue bug or feature)
+    invalidateWidthCache()
+    invalidateChildrenIdentities()
+    innerElements.slotNonce++
+  },
+  {
+    flush: 'pre',
+  },
+)
+watch(
+  slot,
+  () => {
+    // reacts to changes of components in our slot after they are mounted, and unfortunately this happens also after changes in their props
+    logStep('event', 'new slot instanciated')
+    invalidateChildrenIdentities()
+    identifyChildren()
+    nextTick(() => updateContent(0, false)) // waiting for the next tick ensures that the children are in the DOM when we start the update cycle (this slot-watcher ensured they were instantiated but not inserted in the real DOM)
+  },
+  {
+    flush: 'post',
+  },
+)
+
+watch(
+  () => props.class,
+  (newClassList) => {
+    // reacts to changes in our list of classes
+    if (newClassList === classPropsDuringLastUpdate) {
+      // our watcher lags (we already updated with the correct class list)
+      return
+    }
+    logStep('event', 'new class list received')
+    invalidateTextWidthCalculationCache() // the font might have changed
+    invalidateWidthCache()
+    if (!amIinsideAparent.value) {
+      updateContent(0, false)
+    }
+    else {
+      logStep('signal', 'notifying my parent')
+      props.meCallbackToInformParentAboutChanges!(
+        SignalDirection.ChildrenToParent,
+      )
+    }
+  },
+)
+
+watch(
+  () => props.text,
+  (newText) => {
+    // reacts to changes of text
+    if (newText === textPropsDuringLastUpdate) {
+      // our watcher lags (we already updated with the correct text)
+      return
+    }
+    logStep('event', 'new text received')
+    if (!amIinsideAparent.value) {
+      updateContent(0, false)
+    }
+    else {
+      logStep('signal', 'notifying my parent')
+      props.meCallbackToInformParentAboutChanges!(
+        SignalDirection.ChildrenToParent,
+      )
+    }
+  },
+)
+
+watch(
+  () => props.initialFlexGrow,
+  (newIFG) => {
+    // reacts to changes of props initialFlexGrow
+    if (newIFG === initialFlexGrowDuringLastUpdate) {
+      // our watcher lags (we already updated with the correct initial flex-grow)
+      return
+    }
+    logStep('event', 'new initial flex-grow received')
     logStep('signal', 'notifying my parent')
-    props.meCallbackToInformParentAboutChanges!(SignalDirection.ChildrenToParent)
-  }
-})
+    props.meCallbackToInformParentAboutChanges!(
+      SignalDirection.ChildrenToParent,
+    )
+  },
+)
+
+watch(
+  () => props.ellipses,
+  (newEllipses) => {
+    // reacts to changes regarding the number of ellipses to use
+    if (newEllipses === ellipsesPropsDuringLastUpdate) {
+      // our watcher lags (we already updated with the correct value)
+      return
+    }
+    logStep('event', 'new (array of) number(s) regarding ellipses received')
+    if (amIofDefinedWidth.value) {
+      // the clipping adapts the text to our width, not the other way around, so our width did not change, so we can update by ourselves (if we have a parent, a notification is useless and our siblings would spend resources updating for nothing)
+      updateContent(0, false)
+    }
+    else {
+      // our width is not defined so we have a parent
+      logStep('signal', 'notifying my parent')
+      props.meCallbackToInformParentAboutChanges!(
+        SignalDirection.ChildrenToParent,
+      )
+    }
+  },
+)
 
-watch(() => props.widthMediaqueryThreshold, (threshold, previousThreshold) => {
-/*  This is a workaround for a bug in Chrome (at least in April 2024).
+watch(
+  () => props.widthMediaqueryThreshold,
+  (threshold, previousThreshold) => {
+    /*  This is a workaround for a bug in Chrome (at least in April 2024).
     Here is the problem:
     When the user resizes their window and a `@media` query in the CSS changes suddenly the size of a component having a relative width
     (examples: flex-grow, width in %, auto or fr in a grid-template-columns , ...) then Chrome resizes the component in two steps.
     The first resizing is approximate for some reason and triggers the resizeObserver.
     The second resizing is definitive and accurate but does not trigger the resizeObserver, so MiddleEllipsis stays with a wrong clipping.
   */
-  if (isServer || !navigator.userAgent.includes('Chrom')) {
-    return
-  }
-  if (mediaqueryWidthListener) {
-    mediaqueryWidthListener.onchange = null
-  }
-  if (amIinsideAparent.value || !threshold) {
-    return
-  }
-  mediaqueryWidthListener = window.matchMedia('(max-width: ' + threshold + 'px)')
-  mediaqueryWidthListener.onchange = catchResizingCausedByMediaquery
-  if (previousThreshold) {
-    // the new threshold might have passed through the current window width
-    catchResizingCausedByMediaquery()
-  }
-}, { immediate: true })
+    if (isServer || !navigator.userAgent.includes('Chrom')) {
+      return
+    }
+    if (mediaqueryWidthListener) {
+      mediaqueryWidthListener.onchange = null
+    }
+    if (amIinsideAparent.value || !threshold) {
+      return
+    }
+    mediaqueryWidthListener = window.matchMedia(
+      '(max-width: ' + threshold + 'px)',
+    )
+    mediaqueryWidthListener.onchange = catchResizingCausedByMediaquery
+    if (previousThreshold) {
+      // the new threshold might have passed through the current window width
+      catchResizingCausedByMediaquery()
+    }
+  },
+  { immediate: true },
+)
 
 // this function is a workaround for a bug in Chrome (see the watcher of `props.widthMediaqueryThreshold` for explanations)
-function catchResizingCausedByMediaquery () {
-  logStep('event', 'props.widthMediaqueryThreshold reached:', props.widthMediaqueryThreshold)
+function catchResizingCausedByMediaquery() {
+  logStep(
+    'event',
+    'props.widthMediaqueryThreshold reached:',
+    props.widthMediaqueryThreshold,
+  )
   if (!delayedForcedUpdateIncoming) {
     delayedForcedUpdateIncoming = true
-    setTimeout(() => { delayedForcedUpdateIncoming = false; handleResizingEvent(true) }, 50)
+    setTimeout(() => {
+      delayedForcedUpdateIncoming = false
+      handleResizingEvent(true)
+    }, 50)
   }
 }
 
 let resizingObserver: ResizeObserver
 if (!isServer) {
-  resizingObserver = new ResizeObserver(() => { // will react to changes of width
+  resizingObserver = new ResizeObserver(() => {
+    // will react to changes of width
     if (!didTheResizingObserverFireSinceMount) {
       // we do this test because the resizing observer fires when is starts to watch, although no resizing occured at that moment
       didTheResizingObserverFireSinceMount = true
@@ -269,16 +332,23 @@ if (!isServer) {
   })
 }
 
-function handleResizingEvent (force : boolean) {
+function handleResizingEvent(force: boolean) {
   invalidateWidthCache()
   if (!amIinsideAparent.value) {
     updateContent(0, force)
-  } else {
+  }
+  else {
     const reason = determineReason(false)
-    if (reason) { // if our resize observer lags (old resize-observer signal, we have been updated just now), we abort
+    if (reason) {
+      // if our resize observer lags (old resize-observer signal, we have been updated just now), we abort
       logStep('signal', 'notifying my parent for reason #', reason)
-        props.meCallbackToInformParentAboutChanges!(SignalDirection.ChildrenToParent)
-    } else { logStep('good', 'parent not called because no width difference') }
+      props.meCallbackToInformParentAboutChanges!(
+        SignalDirection.ChildrenToParent,
+      )
+    }
+    else {
+      logStep('good', 'parent not called because no width difference')
+    }
   }
 }
 
@@ -300,11 +370,21 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  logStep('attention', 'unmounting.', whatIam.value !== WhatIcanBe.Parent ? 'The algorithm iterated ' + totalIterationsWhenClipping / numberOfClippings + ' times on average.' : '')
+  logStep(
+    'attention',
+    'unmounting.',
+    whatIam.value !== WhatIcanBe.Parent
+      ? 'The algorithm iterated '
+      + totalIterationsWhenClipping / numberOfClippings
+      + ' times on average.'
+      : '',
+  )
   // Tests showed that watchers can be triggered by the unmounting cycle. We prevent useless recalculation to improve smoothness of the UI.
   amImounted = false
   resizingObserver.disconnect()
-  if (mediaqueryWidthListener) { mediaqueryWidthListener.onchange = null }
+  if (mediaqueryWidthListener) {
+    mediaqueryWidthListener.onchange = null
+  }
   delayedForcedUpdateIncoming = false
 })
 
@@ -316,7 +396,7 @@ onUnmounted(() => {
   invalidateChildrenIdentities()
 })
 
-function didMyGivenContentChange () : boolean {
+function didMyGivenContentChange(): boolean {
   if (whatIam.value === WhatIcanBe.Parent) {
     if (innerElements.slotNonce !== lastSlotNonceWhenChecked) {
       lastSlotNonceWhenChecked = innerElements.slotNonce
@@ -327,15 +407,17 @@ function didMyGivenContentChange () : boolean {
   return props.text !== textPropsDuringLastUpdate
 }
 
-function identifyChildren () : boolean {
-  if (innerElements.allInstanciatedElements.value.length !== slot.value.length) {
+function identifyChildren(): boolean {
+  if (
+    innerElements.allInstanciatedElements.value.length !== slot.value.length
+  ) {
     logStep('attention', 'could not identify children')
     // some children are not instanciated yet
     innerElements.isAnUpdateOrdered = true
     return false
   }
   if (innerElements.isAnUpdateOrdered) {
-  // the following lines refresh our information about the inner elements passed to the slot
+    // the following lines refresh our information about the inner elements passed to the slot
     innerElements.widthDefinedChildren.length = 0
     innerElements.widthUndefinedChildren.length = 0
     for (const element of innerElements.allInstanciatedElements.value) {
@@ -344,7 +426,8 @@ function identifyChildren () : boolean {
       if (meElement) {
         if (meElement.amIofDefinedWidth) {
           innerElements.widthDefinedChildren.push(meElement)
-        } else {
+        }
+        else {
           innerElements.widthUndefinedChildren.push(meElement)
         }
       }
@@ -354,25 +437,37 @@ function identifyChildren () : boolean {
   return true
 }
 
-function invalidateChildrenIdentities () {
+function invalidateChildrenIdentities() {
   innerElements.isAnUpdateOrdered = true
 }
 
-function updateContent (additionalWidthAvailable: number, force: boolean) {
+function updateContent(additionalWidthAvailable: number, force: boolean) {
   if (whatIam.value === WhatIcanBe.Error || !amImounted || !frameSpan.value) {
-    logStep('attention', 'update is impossible. amImounted and frameSpan are', amImounted, !!frameSpan.value)
+    logStep(
+      'attention',
+      'update is impossible. amImounted and frameSpan are',
+      amImounted,
+      !!frameSpan.value,
+    )
     return
   }
   if (whatIam.value === WhatIcanBe.Parent) {
     enterUpdateCycleAsAparent(SignalDirection.ParentToChildren, force)
-  } else {
+  }
+  else {
     currentAdditionalWidthAvailable = additionalWidthAvailable
     enterUpdateCycleAsTextClipper(force)
   }
 }
 
-function enterUpdateCycleAsAparent (direction: SignalDirection, force : boolean = false) {
-  if (amIinsideAparent.value && direction === SignalDirection.ChildrenToParent) {
+function enterUpdateCycleAsAparent(
+  direction: SignalDirection,
+  force: boolean = false,
+) {
+  if (
+    amIinsideAparent.value
+    && direction === SignalDirection.ChildrenToParent
+  ) {
     // we are a parent inside a parent, called by a child
     if (!amIreadyForUpdate) {
       logStep('signal', 'notifying my parent')
@@ -408,13 +503,18 @@ function enterUpdateCycleAsAparent (direction: SignalDirection, force : boolean
     for (const child of innerElements.widthDefinedChildren) {
       child.updateContent(0, force)
     }
-  } else {
+  }
+  else {
     /* The following lines handle a special case: several children have a width defined with `flex-grow`, among which at least 1 has a non-clipped text (its text is small enough to fit entirely).
     Without the following lines, after the texts are written, the flex rules would distribute the room in the span of the non-clipped text(s) to the spans of the longer text(s), after they all are written.
     That would create a gap around the clipped text(s), thus making them clipped short although there is room for more.
     The following lines detect this case and distribute the room to the children before clipping and writing, so they can clip their text longer. */
-    const canUseMoreRoom : {child: MiddleEllipsis, growth: number, flexGrow : number}[] = []
-    const hasEnoughRoom : MiddleEllipsis[] = []
+    const canUseMoreRoom: {
+      child: MiddleEllipsis
+      growth: number
+      flexGrow: number
+    }[] = []
+    const hasEnoughRoom: MiddleEllipsis[] = []
     let totalAdditionalRoom = 0
     let totalFlexGrow = 0
     // first, we separate children having enough room (no clipping) and those who could use this room left by the first group
@@ -424,13 +524,16 @@ function enterUpdateCycleAsAparent (direction: SignalDirection, force : boolean
         const flexGrow = child.whatIsMyFlexGrow()
         totalFlexGrow += flexGrow
         canUseMoreRoom.push({ child, growth, flexGrow }) // For now, field `growth` represents the maximal growth of the child (due to a max-width constraint) or possibly what would allow its text not to get clipped. We will overwrite this value when we distribute the total additional room later.
-      } else {
+      }
+      else {
         totalAdditionalRoom -= growth
         hasEnoughRoom.push(child)
       }
     }
     // thanks to this sorting, the first positions hold the children that will receive more additional room than they can accept (due to max-width constraints)
-    canUseMoreRoom.sort((a, b) => a.growth * b.flexGrow - b.growth * a.flexGrow)
+    canUseMoreRoom.sort(
+      (a, b) => a.growth * b.flexGrow - b.growth * a.flexGrow,
+    )
     /* Note to the maintainer: a bug cannot have roots here, this sorting is proven to ensure that any child receiving too much room during the distribution sequence (see next step) is served before the others at each iteration, so that its excess can be redistributed to the next ones:
        At any iteration of the distribution sequence, a child x would be distributed too much room if and only if x.maxRoom/x.roomDistributable < 1. So, given two children a and b, it is sufficient to serve a before b if a.maxRoom/a.roomDistributable < b.maxRoom/b.roomDistributable.
        At any iteration i, x.roomDistributable is totalAdditionalRoom(i) * x.flexGrow / totalFlexGrow(i). Noticing that totalAdditionalRoom and totalFlexGrow appear on both sides of the comparison, removing them would not change the order, so the comparison can be simplified into
@@ -438,7 +541,8 @@ function enterUpdateCycleAsAparent (direction: SignalDirection, force : boolean
      */
     // Now we distribute the room available. After this step, each `cumr.growth` contains the additional room given to the child (until now, it contained its max room).
     for (const cumr of canUseMoreRoom) {
-      const roomDistributable = totalAdditionalRoom * cumr.flexGrow / totalFlexGrow
+      const roomDistributable
+        = (totalAdditionalRoom * cumr.flexGrow) / totalFlexGrow
       if (roomDistributable < cumr.growth) {
         cumr.growth = roomDistributable
       }
@@ -471,13 +575,25 @@ function enterUpdateCycleAsAparent (direction: SignalDirection, force : boolean
   logStep('neutral', 'update cycle completed')
 }
 
-function enterUpdateCycleAsTextClipper (force : boolean) {
+function enterUpdateCycleAsTextClipper(force: boolean) {
   currentText = textAfterLastUpdate.text
   getReadyForUpdate()
   if (determineReason(true) || force) {
-    currentText = searchForIdealLength(props.text, getFrameWidth() + currentAdditionalWidthAvailable - ResizeObserverLagMargin)
-    logStep('completed', 'text clipped (with ' + canvasContextToCalculateTextWidths.font + '), length difference: ', String(currentText.length - textAfterLastUpdate.text.length))
-  } else {
+    currentText = searchForIdealLength(
+      props.text,
+      getFrameWidth()
+      + currentAdditionalWidthAvailable
+      - ResizeObserverLagMargin,
+    )
+    logStep(
+      'completed',
+      'text clipped (with '
+      + canvasContextToCalculateTextWidths.font
+      + '), length difference: ',
+      String(currentText.length - textAfterLastUpdate.text.length),
+    )
+  }
+  else {
     logStep('good', 'text restored, no reclipping needed')
   }
   if (!amIinsideAparent.value) {
@@ -486,7 +602,7 @@ function enterUpdateCycleAsTextClipper (force : boolean) {
   }
 }
 
-function isMyContentClipped () : boolean {
+function isMyContentClipped(): boolean {
   // TODO: add a condition checking whether none of the children is clipped. Currently not required.
   return currentText !== props.text
 }
@@ -494,7 +610,7 @@ function isMyContentClipped () : boolean {
 /**
  * @returns a reference to an object containing the text and
  */
-function calculateTextWidth (text: string | undefined): TextProperties {
+function calculateTextWidth(text: string | undefined): TextProperties {
   if (!text) {
     return { text: '', width: 0 }
   }
@@ -502,45 +618,48 @@ function calculateTextWidth (text: string | undefined): TextProperties {
     // hopefully we reach this point rarely because `getComputedStyle().something` triggers a reflow (slow)
     canvasContextToCalculateTextWidths.font = frameStyle.font
   }
-  if (text !== lastTextWidthCalculation.text) { // speed optimization (because measureText() is slow)
+  if (text !== lastTextWidthCalculation.text) {
+    // speed optimization (because measureText() is slow)
     lastTextWidthCalculation.text = text
-    lastTextWidthCalculation.width = canvasContextToCalculateTextWidths.measureText(text).width
+    lastTextWidthCalculation.width
+      = canvasContextToCalculateTextWidths.measureText(text).width
   }
   return lastTextWidthCalculation
 }
 
-function invalidateTextWidthCalculationCache () {
+function invalidateTextWidthCalculationCache() {
   lastTextWidthCalculation.text = ''
   lastTextWidthCalculation.width = 0
 }
 
-function setFrameText (text: string) {
+function setFrameText(text: string) {
   if (frameSpan.value) {
     frameText = text
     frameSpan.value.textContent = text
   }
 }
 
-function getFrameWidth (): number {
+function getFrameWidth(): number {
   if (!frameSpan.value) {
     return 0
   }
-  if (!lastMeasuredFrameWidth) { // We do not want to read `.clientWidth` if it is unnecessary because it triggers a reflow.
+  if (!lastMeasuredFrameWidth) {
+    // We do not want to read `.clientWidth` if it is unnecessary because it triggers a reflow.
     updateWidthCache(frameSpan.value.clientWidth)
   }
   return lastMeasuredFrameWidth
 }
 
-function updateWidthCache (newWidth : number) {
+function updateWidthCache(newWidth: number) {
   lastMeasuredFrameWidth = newWidth
 }
 
-function invalidateWidthCache () {
+function invalidateWidthCache() {
   lastMeasuredFrameWidth = 0
 }
 
 // Use this function as rarely as possible because it triggers a reflow when it calls removeProperty() or setProperty() or reads getComputedStyle().something or reads .clientWidth
-function setFrameWidth (mode: WidthMode, x: number = 0) {
+function setFrameWidth(mode: WidthMode, x: number = 0) {
   if (!frameSpan.value) {
     return
   }
@@ -555,54 +674,86 @@ function setFrameWidth (mode: WidthMode, x: number = 0) {
     case WidthMode.FixedFlexGrow:
       frameSpan.value.style.setProperty('flex-grow', String(x))
       break
-    case WidthMode.FixedWidth: { // not used currently but this makes the function ready for future needs / modes
+    case WidthMode.FixedWidth: {
+      // not used currently but this makes the function ready for future needs / modes
       const minWidth = parseFloat(frameStyle.minWidth)
       const maxWidth = parseFloat(frameStyle.maxWidth)
-      if (x < minWidth) { x = minWidth }
-      if (x > maxWidth) { x = maxWidth }
+      if (x < minWidth) {
+        x = minWidth
+      }
+      if (x > maxWidth) {
+        x = maxWidth
+      }
       updateWidthCache(x)
       frameSpan.value.style.setProperty('width', String(x) + 'px')
     }
   }
 }
 
-function determineReason (considerThatTheChangeAffectsMeOnly : boolean) : UpdateReason {
-  let reason : UpdateReason
+function determineReason(
+  considerThatTheChangeAffectsMeOnly: boolean,
+): UpdateReason {
+  let reason: UpdateReason
   const gaps = calculateGaps()
-  if (gaps.before === undefined || didMyGivenContentChange() || whatIam.value === WhatIcanBe.Parent || gaps.now < 0 || gaps.before < 0) {
+  if (
+    gaps.before === undefined
+    || didMyGivenContentChange()
+    || whatIam.value === WhatIcanBe.Parent
+    || gaps.now < 0
+    || gaps.before < 0
+  ) {
     reason = UpdateReason.GapChangeToBeDetermined
-  } else {
+  }
+  else {
     let changeMightNotRequireAnUpdate = gaps.now >= ResizeObserverLagMargin // the current content still fits the frame
     if (gaps.now < gaps.before) {
       reason = UpdateReason.GapChangeMinus
-    } else if (gaps.now > gaps.before) {
+    }
+    else if (gaps.now > gaps.before) {
       reason = UpdateReason.GapChangePlus
       changeMightNotRequireAnUpdate &&= !isMyContentClipped() // despite the wider gap, the content will not be clipped longer because it is already not clipped
-    } else {
+    }
+    else {
       reason = UpdateReason.None
     }
     if (considerThatTheChangeAffectsMeOnly && changeMightNotRequireAnUpdate) {
       reason = UpdateReason.None
     }
   }
-  logStep('neutral', ['my gap is fine as it is.', 'my gap changed (to be determined).', 'my gap decreased.', 'my gap increased.'][reason], 'Gaps:', gaps)
+  logStep(
+    'neutral',
+    [
+      'my gap is fine as it is.',
+      'my gap changed (to be determined).',
+      'my gap decreased.',
+      'my gap increased.',
+    ][reason],
+    'Gaps:',
+    gaps,
+  )
   return reason
 
-  function calculateGaps () : {before : number|undefined, now : number} {
+  function calculateGaps(): { before: number | undefined, now: number } {
     // TODO: If needed, calculate the actual gaps when we are a parent (frame width - sum of child widths). Currently not required.
-    let before : number | undefined
-    const frameWhidthToCompareTo = amIreadyForUpdate ? widthAvailableDuringLastUpdate : frameWidthAfterLastUpdate
-    const now = getFrameWidth() + (amIreadyForUpdate ? currentAdditionalWidthAvailable : 0) - calculateTextWidth(currentText).width
+    let before: number | undefined
+    const frameWhidthToCompareTo = amIreadyForUpdate
+      ? widthAvailableDuringLastUpdate
+      : frameWidthAfterLastUpdate
+    const now
+      = getFrameWidth()
+      + (amIreadyForUpdate ? currentAdditionalWidthAvailable : 0)
+      - calculateTextWidth(currentText).width
     if (frameWhidthToCompareTo) {
       before = frameWhidthToCompareTo - textAfterLastUpdate.width
-    } else {
+    }
+    else {
       before = undefined
     }
     return { before, now }
   }
 }
 
-function whatIsMyFlexGrow () : number {
+function whatIsMyFlexGrow(): number {
   return Number(frameStyle.flexGrow) || 0
 }
 
@@ -610,16 +761,19 @@ function whatIsMyFlexGrow () : number {
  * Assuming that the content is not clipped, this tells how much the frame could shrink or grow if it had to be as large as the content (or hit min-width or max-width).
  * @returns If `accurate` is `true`: positive means I can grow so much, negative means I can shrink so much. If `accurate` is `false`: positive means the content will be clipped, negative means the content fits entirely.
  */
-function howMuchCanIshrinkOrGrow (accurate : boolean) : number {
+function howMuchCanIshrinkOrGrow(accurate: boolean): number {
   const widthRightNow = getFrameWidth()
-  let withoutRestriction : number
+  let withoutRestriction: number
   if (whatIam.value === WhatIcanBe.Parent) {
     withoutRestriction = 0
     for (const child of innerElements.widthDefinedChildren) {
       withoutRestriction += child.howMuchCanIshrinkOrGrow(true)
     }
-  } else {
-    withoutRestriction = calculateTextWidth(props.text).width - (widthRightNow - ResizeObserverLagMargin)
+  }
+  else {
+    withoutRestriction
+      = calculateTextWidth(props.text).width
+      - (widthRightNow - ResizeObserverLagMargin)
   }
   if (!accurate) {
     return withoutRestriction
@@ -629,14 +783,19 @@ function howMuchCanIshrinkOrGrow (accurate : boolean) : number {
   }
   if (withoutRestriction >= 0) {
     const limit = parseFloat(frameStyle.maxWidth) || Number.MAX_SAFE_INTEGER
-    return (widthRightNow + withoutRestriction <= limit) ? withoutRestriction : limit - widthRightNow
-  } else {
+    return widthRightNow + withoutRestriction <= limit
+      ? withoutRestriction
+      : limit - widthRightNow
+  }
+  else {
     const limit = parseFloat(frameStyle.minWidth) || 0
-    return (widthRightNow + withoutRestriction >= limit) ? withoutRestriction : limit - widthRightNow
+    return widthRightNow + withoutRestriction >= limit
+      ? withoutRestriction
+      : limit - widthRightNow
   }
 }
 
-function getReadyForUpdate () {
+function getReadyForUpdate() {
   if (amIreadyForUpdate) {
     // we have a parent and he already called this function
     return
@@ -649,7 +808,8 @@ function getReadyForUpdate () {
   if (whatIam.value !== WhatIcanBe.Parent) {
     logStep('neutral', 'getting ready for update')
     setFrameText('') // better done after setFrameWidth() for performance reasons
-  } else {
+  }
+  else {
     identifyChildren()
     logStep('signal', 'asking children to get ready')
     for (const child of innerElements.widthDefinedChildren) {
@@ -664,12 +824,13 @@ function getReadyForUpdate () {
   invalidateWidthCache()
 }
 
-function settleAfterUpdate () {
+function settleAfterUpdate() {
   classPropsDuringLastUpdate = props.class || ''
   textPropsDuringLastUpdate = props.text || ''
   initialFlexGrowDuringLastUpdate = props.initialFlexGrow
   ellipsesPropsDuringLastUpdate = props.ellipses
-  widthAvailableDuringLastUpdate = getFrameWidth() + currentAdditionalWidthAvailable
+  widthAvailableDuringLastUpdate
+    = getFrameWidth() + currentAdditionalWidthAvailable
   if (whatIam.value !== WhatIcanBe.Parent) {
     setFrameText(currentText)
   }
@@ -681,45 +842,73 @@ function settleAfterUpdate () {
   logStep('neutral', 'settled')
 }
 
-function saveFinalState () {
+function saveFinalState() {
   invalidateWidthCache()
   frameWidthAfterLastUpdate = getFrameWidth()
   textAfterLastUpdate = { ...calculateTextWidth(currentText) }
 }
 
-function logStep (color: 'neutral'|'attention'|'event'|'signal'|'good'|'completed', msg: string, ...others: any[]) {
+function logStep(
+  color: 'neutral' | 'attention' | 'event' | 'signal' | 'good' | 'completed',
+  msg: string,
+  ...others: any[]
+) {
   if (!DEBUG) {
     return
   }
-  const parentInParent = whatIam.value === WhatIcanBe.Parent && amIinsideAparent.value
+  const parentInParent
+    = whatIam.value === WhatIcanBe.Parent && amIinsideAparent.value
   let common = ''
 
   if (whatIam.value === WhatIcanBe.Standalone) {
     common += '\u001B[90m'
   }
-  common += whatIam.value === WhatIcanBe.Child ? '    ' : (parentInParent ? '  ' : '')
+  common
+    += whatIam.value === WhatIcanBe.Child ? '    ' : parentInParent ? '  ' : ''
   common += ['Error', 'Parent', 'Child', 'Standalone'][whatIam.value]
   if (whatIam.value !== WhatIcanBe.Parent) {
     common += ' "' + (props.text as string).slice(0, 8) + '…"'
   }
-  common += (amIofDefinedWidth.value ? ' (defined' : ' (undef') + ' width cached: ' + lastMeasuredFrameWidth + ') '
+  common
+    += (amIofDefinedWidth.value ? ' (defined' : ' (undef')
+    + ' width cached: '
+    + lastMeasuredFrameWidth
+    + ') '
   switch (color) {
-    case 'attention' : msg = '\u001B[31m' + msg; break
-    case 'event' : msg = '\u001B[33m' + msg; break
-    case 'signal' : msg = '\u001B[32m' + msg; break
-    case 'good' : msg = '\u001B[34m' + msg; break
-    case 'completed' : msg = '\u001B[35m' + msg; break
-    default : msg = '\u001B[0m' + msg
+    case 'attention':
+      msg = '\u001B[31m' + msg
+      break
+    case 'event':
+      msg = '\u001B[33m' + msg
+      break
+    case 'signal':
+      msg = '\u001B[32m' + msg
+      break
+    case 'good':
+      msg = '\u001B[34m' + msg
+      break
+    case 'completed':
+      msg = '\u001B[35m' + msg
+      break
+    default:
+      msg = '\u001B[0m' + msg
   }
   const writer = console
   writer.log(common + msg, ...others)
 }
 
-function whatIsMyGivenContent () : any {
-  return whatIam.value !== WhatIcanBe.Parent ? (props.text ? 'text' : 'no text') : innerElements.allInstanciatedElements.value
+function whatIsMyGivenContent(): any {
+  return whatIam.value !== WhatIcanBe.Parent
+    ? props.text
+      ? 'text'
+      : 'no text'
+    : innerElements.allInstanciatedElements.value
 }
 
-function searchForIdealLength (originalText: string = '', targetWidth: number): string {
+function searchForIdealLength(
+  originalText: string = '',
+  targetWidth: number,
+): string {
   let current = calculateTextWidth(originalText)
   // we search for the longest clipped text which fits in the target width
   if (current.width > targetWidth) {
@@ -732,26 +921,39 @@ function searchForIdealLength (originalText: string = '', targetWidth: number):
       if (current.width > targetWidth) {
         maxLength = current.text.length
         maxWidth = current.width
-        averageCharWidthBetweenCurrentAndBound = (current.width - minWidth) / (current.text.length - minLength)
-      } else {
+        averageCharWidthBetweenCurrentAndBound
+          = (current.width - minWidth) / (current.text.length - minLength)
+      }
+      else {
         minLength = current.text.length
         minWidth = current.width
-        averageCharWidthBetweenCurrentAndBound = (maxWidth - current.width) / (maxLength - current.text.length)
+        averageCharWidthBetweenCurrentAndBound
+          = (maxWidth - current.width) / (maxLength - current.text.length)
       }
       // The following block writes in `lengthToTry` an estimation of the length that the clipped text should have to reach our target width.
       // This estimation speeds up considerably the dichotomic search by guiding it towards the optimal length. The way we use it preserves optimality.
-      let estimatedLengthExcess = (current.width - targetWidth) / averageCharWidthBetweenCurrentAndBound
-      if (estimatedLengthExcess > 0 && estimatedLengthExcess <= 0.5) { estimatedLengthExcess += 0.5 } // this avoids slight overflows, due to the `Math.round` just below
+      let estimatedLengthExcess
+        = (current.width - targetWidth) / averageCharWidthBetweenCurrentAndBound
+      if (estimatedLengthExcess > 0 && estimatedLengthExcess <= 0.5) {
+        estimatedLengthExcess += 0.5
+      } // this avoids slight overflows, due to the `Math.round` just below
       estimatedLengthExcess = Math.round(estimatedLengthExcess)
       let lengthToTry = current.text.length - estimatedLengthExcess
       // If the estimation exceeds the range of possible widths, we default to a classical dichotomic search for the current iteration:
       if (lengthToTry < minLength || lengthToTry >= maxLength) {
         // ...this is why optimality is preserved.
         lengthToTry = Math.floor((minLength + maxLength) / 2)
-      } else if (estimatedLengthExcess === 0) {
+      }
+      else if (estimatedLengthExcess === 0) {
         break
       }
-      current = calculateTextWidth(clipText(originalText, lengthToTry, numberOfEllipsesSetInProps(lengthToTry)))
+      current = calculateTextWidth(
+        clipText(
+          originalText,
+          lengthToTry,
+          numberOfEllipsesSetInProps(lengthToTry),
+        ),
+      )
       totalIterationsWhenClipping++
     }
     numberOfClippings++
@@ -759,7 +961,11 @@ function searchForIdealLength (originalText: string = '', targetWidth: number):
   return current.text
 }
 
-function clipText (originalText: string, room: number, nEllipses : number) : string {
+function clipText(
+  originalText: string,
+  room: number,
+  nEllipses: number,
+): string {
   if (room <= 0 || isNaN(room) || !originalText) {
     return ''
   }
@@ -785,13 +991,17 @@ function clipText (originalText: string, room: number, nEllipses : number) : str
   if (nEllipses === 1) {
     const midL = Math.floor(room / 2)
     const r = 1 - (room % 2)
-    return originalText.slice(0, midL) + '…' + originalText.slice(originalText.length - midL + r, originalText.length)
+    return (
+      originalText.slice(0, midL)
+      + '…'
+      + originalText.slice(originalText.length - midL + r, originalText.length)
+    )
   }
   // complicated and slower
   const nBlocks = nEllipses + 1
   // First, we extract `nBlocks` blocks from the original text. The extraction algorithm guarantees that the sum of their lengths is `room`. Their lengths vary for arithmetic reasons but are as similar as possible.
-  type Block = { start : number, visibleLength : number }
-  const blocks : Block[] = []
+  type Block = { start: number, visibleLength: number }
+  const blocks: Block[] = []
   let totalToExtract = room
   let totalToSkip = originalText.length - room
   let skipNow = 0
@@ -808,17 +1018,22 @@ function clipText (originalText: string, room: number, nEllipses : number) : str
     s--
   }
   // Now, we decide whether the first and/or last letter of each block should be replaced with an ellipsis. We try to create symmetry (to get something like AB…E…HI rather than AB…EF…I) because the two ends of a text are easier to catch and compare for a human eye (and we are "MiddleEllipsis" so the ellipses must look centered)
-  enum Side {EndOfB, BeginningBp1}
-  const sides : Side[] = [] // each element of index b indicates the side of the ellipsis between blocks b and b+1
+  enum Side {
+    EndOfB,
+    BeginningBp1,
+  }
+  const sides: Side[] = [] // each element of index b indicates the side of the ellipsis between blocks b and b+1
   const symmAxis = Math.floor(nBlocks / 2)
   // first, we decide it over the first half of blocks
   let bLeft = 0
   let bRight = nBlocks - 1
   while (bLeft < symmAxis) {
-    if (blocks[bLeft].visibleLength > blocks[bRight].visibleLength) { // we have a look at the opposite bloc, to try to create symmetry
+    if (blocks[bLeft].visibleLength > blocks[bRight].visibleLength) {
+      // we have a look at the opposite bloc, to try to create symmetry
       sides.push(Side.EndOfB)
       blocks[bLeft].visibleLength--
-    } else {
+    }
+    else {
       sides.push(Side.BeginningBp1)
       blocks[bLeft + 1].visibleLength--
     }
@@ -829,10 +1044,15 @@ function clipText (originalText: string, room: number, nEllipses : number) : str
   bRight = symmAxis + 1
   bLeft = nBlocks - 1 - bRight
   while (bRight < nBlocks) {
-    if (blocks[bRight].visibleLength > blocks[bLeft].visibleLength || blocks[bRight - 1].visibleLength <= 1) { // we have a look at the opposite bloc, trying to create symmetry with the first half while forbidding two ellipses in blocks of size 2
+    if (
+      blocks[bRight].visibleLength > blocks[bLeft].visibleLength
+      || blocks[bRight - 1].visibleLength <= 1
+    ) {
+      // we have a look at the opposite bloc, trying to create symmetry with the first half while forbidding two ellipses in blocks of size 2
       sides.push(Side.BeginningBp1)
       blocks[bRight].visibleLength--
-    } else {
+    }
+    else {
       sides.push(Side.EndOfB)
       blocks[bRight - 1].visibleLength--
     }
@@ -848,7 +1068,7 @@ function clipText (originalText: string, room: number, nEllipses : number) : str
   return result
 }
 
-function numberOfEllipsesSetInProps (textLength : number) : number {
+function numberOfEllipsesSetInProps(textLength: number): number {
   if (props.ellipses === undefined) {
     return 1
   }
@@ -865,19 +1085,28 @@ function numberOfEllipsesSetInProps (textLength : number) : number {
   return result
 }
 
-const frameClassList = computed(() => 'middle-ellipsis-root-frame ' + props.class)
+const frameClassList = computed(
+  () => 'middle-ellipsis-root-frame ' + props.class,
+)
 </script>
 
 <template>
-  <span ref="frameSpan" :class="frameClassList">
+  <span
+    ref="frameSpan"
+    :class="frameClassList"
+  >
     {{ frameText }}
     <!--
-      The text above is not reactive because its only purpose is to provide a content during isServer. During CSR, MiddleEllipsis clips and overwrites the text
-      of the frame with a direct assignment (frameSpan.value.textContent = ...), which has an immediate effect within one reflow unlike reactive properties.
-      If for some reason Vue were to rewrite the content of the frame with the variable above while the component is mounted, this would not cause any problem
+      The text above is not reactive because its only purpose is to provide a content during isServer. During CSR,
+      MiddleEllipsis clips and overwrites the text
+      of the frame with a direct assignment (frameSpan.value.textContent = ...), which has an immediate effect within
+      one reflow unlike reactive properties.
+      If for some reason Vue were to rewrite the content of the frame with the variable above while the component
+      is mounted, this would not cause any problem
       because it always mirrors what has been directly assigned to the frame.
       The following line mounts our slot if we have one.
-      To inform MiddleEllipsis components that they are children and give them the ability to send us information, we add a props. Also, we get a ref to each instantiated element.
+      To inform MiddleEllipsis components that they are children and give them the ability to send us information,
+      we add a props. Also, we get a ref to each instantiated element.
     -->
     <component
       :is="slotElem"
diff --git a/frontend/components/bc/searchbar/NetworkSelector.vue b/frontend/components/bc/searchbar/NetworkSelector.vue
index 65cf7255b..18f235496 100644
--- a/frontend/components/bc/searchbar/NetworkSelector.vue
+++ b/frontend/components/bc/searchbar/NetworkSelector.vue
@@ -1,34 +1,44 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCaretDown } from '@fortawesome/pro-solid-svg-icons'
-import type { SearchbarShape, SearchbarColors, SearchbarDropdownLayout, NetworkFilter } from '~/types/searchbar';
+import type {
+  SearchbarShape,
+  SearchbarColors,
+  SearchbarDropdownLayout,
+  NetworkFilter,
+} from '~/types/searchbar'
 import { ChainInfo, ChainIDs } from '~/types/network'
 
-const emit = defineEmits<{(e: 'change') : void}>()
+const emit = defineEmits<{ (e: 'change'): void }>()
 defineProps<{
-  barShape: SearchbarShape,
-  colorTheme: SearchbarColors,
-  dropdownLayout : SearchbarDropdownLayout
+  barShape: SearchbarShape
+  colorTheme: SearchbarColors
+  dropdownLayout: SearchbarDropdownLayout
 }>()
-const liveState = defineModel<NetworkFilter>({ required: true }) // each entry has a ChainIDs as key and the state of the option as value. The component will write directly into it, so the data of the parent is always up-to-date.
+// each entry has a ChainIDs as key and the state of the option as value.
+// The component will write directly into it, so the data of the parent is always up-to-date.
+const liveState = defineModel<NetworkFilter>({ required: true })
 
 const { t } = useTranslation()
 
-const headState = ref<{look : 'on'|'off', network : string}>({
+const headState = ref<{ look: 'on' | 'off', network: string }>({
   look: 'off',
-  network: ''
+  network: '',
 })
-const listInDropdown = ref<{
-  chainId: ChainIDs,
-  label: string,
-  selected: boolean
-}[]>([])
+const listInDropdown = ref<
+  {
+    chainId: ChainIDs
+    label: string
+    selected: boolean
+  }[]
+>([])
 const dropdownIsOpen = ref<boolean>(false)
 
 const head = ref<HTMLDivElement>()
 const dropdown = ref<HTMLDivElement>()
 
-watch(liveState, updateLocalState) // fires when the parent changes the whole object but not when he / we change a value inside
+// fires when the parent changes the whole object but not when he / we change a value inside
+watch(liveState, updateLocalState)
 
 onBeforeMount(() => {
   dropdownIsOpen.value = false
@@ -42,21 +52,27 @@ onUnmounted(() => {
   document.removeEventListener('keydown', listenToKeys)
 })
 
-function listenToClicks (event : Event) {
-  if (!dropdownIsOpen.value || !dropdown.value || !head.value || dropdown.value.contains(event.target as Node) || head.value.contains(event.target as Node)) {
+function listenToClicks(event: Event) {
+  if (
+    !dropdownIsOpen.value
+    || !dropdown.value
+    || !head.value
+    || dropdown.value.contains(event.target as Node)
+    || head.value.contains(event.target as Node)
+  ) {
     return
   }
   dropdownIsOpen.value = false
 }
 
-function listenToKeys (event : KeyboardEvent) {
+function listenToKeys(event: KeyboardEvent) {
   if (event.key === 'Escape' && dropdownIsOpen.value) {
     dropdownIsOpen.value = false
     event.stopImmediatePropagation()
   }
 }
 
-function updateLocalState () {
+function updateLocalState() {
   // first we update the head
   let howManyAreSelected = 0
   for (const nw of liveState.value) {
@@ -64,26 +80,36 @@ function updateLocalState () {
       howManyAreSelected++
     }
   }
-  const allNetworksAreSelected = (howManyAreSelected === liveState.value.size)
+  const allNetworksAreSelected = howManyAreSelected === liveState.value.size
   if (howManyAreSelected === 0 || allNetworksAreSelected) {
     headState.value.network = t('search_bar.all_networks')
-  } else {
+  }
+  else {
     headState.value.network = String(howManyAreSelected)
   }
-  headState.value.look = (howManyAreSelected === 0) ? 'off' : 'on'
+  headState.value.look = howManyAreSelected === 0 ? 'off' : 'on'
   // now we update the list used to fill the dropdown
   listInDropdown.value.length = 0
-  listInDropdown.value.push({ chainId: ChainIDs.Any, label: t('search_bar.all_networks'), selected: allNetworksAreSelected })
+  listInDropdown.value.push({
+    chainId: ChainIDs.Any,
+    label: t('search_bar.all_networks'),
+    selected: allNetworksAreSelected,
+  })
   for (const filter of liveState.value) {
-    listInDropdown.value.push({ chainId: filter[0], label: ChainInfo[filter[0]].name, selected: filter[1] })
+    listInDropdown.value.push({
+      chainId: filter[0],
+      label: ChainInfo[filter[0]].name,
+      selected: filter[1],
+    })
   }
 }
 
-function oneOptionChanged (index : number) {
+function oneOptionChanged(index: number) {
   const selected = listInDropdown.value[index].selected
   if (listInDropdown.value[index].chainId !== ChainIDs.Any) {
     liveState.value.set(listInDropdown.value[index].chainId, selected)
-  } else {
+  }
+  else {
     for (const filter of liveState.value) {
       liveState.value.set(filter[0], selected)
     }
@@ -102,25 +128,47 @@ function oneOptionChanged (index : number) {
       :dropdown-layout="dropdownLayout"
       :look="headState.look"
       :state="dropdownIsOpen"
-      @change="(open : boolean) => dropdownIsOpen = open"
+      @change="(open: boolean) => (dropdownIsOpen = open)"
     >
-      <div ref="head" class="content">
+      <div
+        ref="head"
+        class="content"
+      >
         <span class="label">
-          {{ t('search_bar.network_filter_label') + ' ' + headState.network }}
+          {{ t("search_bar.network_filter_label") + " " + headState.network }}
         </span>
-        <fontAwesomeIcon class="arrow" :icon="faCaretDown" />
+        <fontAwesomeIcon
+          class="arrow"
+          :icon="faCaretDown"
+        />
       </div>
     </BcSearchbarFilterButton>
     <div
       v-if="dropdownIsOpen"
       ref="dropdown"
       class="dropdown"
-      :class="[barShape,colorTheme]"
-      @keydown="(e) => {if (e.key === 'Escape') dropdownIsOpen = false}"
+      :class="[barShape, colorTheme]"
+      @keydown="
+        (e) => {
+          if (e.key === 'Escape') dropdownIsOpen = false;
+        }
+      "
     >
-      <div v-for="(line, i) of listInDropdown" :key="line.chainId" class="line" @click="oneOptionChanged(i)">
-        <Checkbox v-model="line.selected" :binary="true" :input-id="String(line.chainId)" />
-        <label :for="String(line.chainId)" class="label">
+      <div
+        v-for="(line, i) of listInDropdown"
+        :key="line.chainId"
+        class="line"
+        @click="oneOptionChanged(i)"
+      >
+        <Checkbox
+          v-model="line.selected"
+          :binary="true"
+          :input-id="String(line.chainId)"
+        />
+        <label
+          :for="String(line.chainId)"
+          class="label"
+        >
           {{ line.label }}
         </label>
         <IconNetwork
@@ -188,11 +236,11 @@ function oneOptionChanged (index : number) {
     }
 
     .line {
-      position:relative;
+      position: relative;
       display: flex;
       width: 100%;
       white-space: nowrap;
-      &:nth-child(n+1) {
+      &:nth-child(n + 1) {
         margin-top: var(--padding-small);
       }
 
@@ -203,7 +251,7 @@ function oneOptionChanged (index : number) {
       }
 
       .label {
-        position:relative;
+        position: relative;
         display: inline-flex;
         flex-grow: 1;
         margin-left: 5px;
diff --git a/frontend/components/bc/searchbar/SearchbarButton.vue b/frontend/components/bc/searchbar/SearchbarButton.vue
index 09db37c1f..b1a82f7c9 100644
--- a/frontend/components/bc/searchbar/SearchbarButton.vue
+++ b/frontend/components/bc/searchbar/SearchbarButton.vue
@@ -5,27 +5,34 @@ import {
   type SearchbarShape,
   type SearchbarColors,
   type SearchbarPurpose,
-  SearchbarPurposeInfo
+  SearchbarPurposeInfo,
 } from '~/types/searchbar'
 
 defineProps<{
-  barShape: SearchbarShape,
-  colorTheme: SearchbarColors,
+  barShape: SearchbarShape
+  colorTheme: SearchbarColors
   barPurpose: SearchbarPurpose
 }>()
 </script>
 
 <template>
-  <Button v-if="SearchbarPurposeInfo[barPurpose].button === 'add'" class="p-button-icon-only plus">
+  <Button
+    v-if="SearchbarPurposeInfo[barPurpose].button === 'add'"
+    class="p-button-icon-only plus"
+  >
     <FontAwesomeIcon :icon="faPlus" />
   </Button>
-  <span v-else-if="SearchbarPurposeInfo[barPurpose].button === 'search'" class="magnifier-button" :class="[barShape,colorTheme]">
+  <span
+    v-else-if="SearchbarPurposeInfo[barPurpose].button === 'search'"
+    class="magnifier-button"
+    :class="[barShape, colorTheme]"
+  >
     <FontAwesomeIcon :icon="faMagnifyingGlass" />
   </span>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
+@use "~/assets/css/main.scss";
 
 .plus {
   font-size: 18px;
diff --git a/frontend/components/bc/searchbar/SearchbarMain.vue b/frontend/components/bc/searchbar/SearchbarMain.vue
index 1aabf2be3..6fab0e2f4 100644
--- a/frontend/components/bc/searchbar/SearchbarMain.vue
+++ b/frontend/components/bc/searchbar/SearchbarMain.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/max-len -- TODO:   plz fix this -->
 <script setup lang="ts">
 /*
  * If you want to change the behavior of the component or the information it displays, it is possible that you simply need to change a few parameters
@@ -33,7 +34,7 @@ import {
   type PremiumRowCallBackFunction,
   type ExposedSearchbarMethods,
   type CategoryFilter,
-  type NetworkFilter
+  type NetworkFilter,
 } from '~/types/searchbar'
 import { ChainIDs, ChainInfo } from '~/types/network'
 import { API_PATH } from '~/types/customFetch'
@@ -47,39 +48,39 @@ const { fetch } = useCustomFetch()
 const { availableNetworks } = useNetworkStore()
 
 const props = defineProps<{
-  barShape: SearchbarShape, // shape of the bar
-  colorTheme: SearchbarColors, // colors of the bar and its dropdown
-  barPurpose: SearchbarPurpose, // what the bar will be used for
-  screenWidthCausingSuddenChange: number, // this information is needed by MiddleEllipsis
-  onlyNetworks?: ChainIDs[], // the bar will search on these networks only
-  rowLacksPremiumSubscription?: PremiumRowCallBackFunction, // the bar calls this function for each row and deactivates the row if it returns `true`
-  pickByDefault: PickingCallBackFunction, // see the declaration of the type to get an explanation
+  barShape: SearchbarShape // shape of the bar
+  colorTheme: SearchbarColors // colors of the bar and its dropdown
+  barPurpose: SearchbarPurpose // what the bar will be used for
+  screenWidthCausingSuddenChange: number // this information is needed by MiddleEllipsis
+  onlyNetworks?: ChainIDs[] // the bar will search on these networks only
+  rowLacksPremiumSubscription?: PremiumRowCallBackFunction // the bar calls this function for each row and deactivates the row if it returns `true`
+  pickByDefault: PickingCallBackFunction // see the declaration of the type to get an explanation
   keepDropdownOpen?: boolean // set to `true` if you want the drop down to stay open when the user clicks a suggestion. You can still close it by calling `<searchbar ref>.value.closeDropdown()` method.
 }>()
-const emit = defineEmits<{(e: 'go', result : ResultSuggestion) : any}>()
+const emit = defineEmits<{ (e: 'go', result: ResultSuggestion): any }>()
 
 enum States {
   NoText,
   WaitingForResults,
   ApiHasResponded,
   Error,
-  UpdateIncoming
+  UpdateIncoming,
 }
 
 interface GlobalState {
-  state: States,
+  state: States
   functionToCallAfterResultsGetOrganized: (() => void) | null
   showDropdown: boolean
 }
 
-let differentialRequests : boolean
+let differentialRequests: boolean
 let searchableTypes: ResultType[]
 let allTypesBelongToAllNetworks = false
 
 const globalState = ref<GlobalState>({
   state: States.NoText,
   functionToCallAfterResultsGetOrganized: null,
-  showDropdown: false
+  showDropdown: false,
 })
 
 const wholeComponent = ref<HTMLDivElement>()
@@ -97,7 +98,7 @@ let lastKnownText = ''
 
 const nextSearchScope = {
   networks: new Set<ChainIDs>(),
-  categories: new Set<Category>()
+  categories: new Set<Category>(),
 }
 
 const debouncer = useDebounceValue<number>(0, MinimumTimeBetweenAPIcalls)
@@ -106,28 +107,30 @@ watch(debouncer.value, callAPIthenOrganizeResultsThenCallBack)
 const results = {
   raw: {
     stringifyiedList: new Set<string>(), // List of results returned by the API, without structure nor order. The list can be built in serveral steps (for a same text input, if the user selects new filters, the list can augment).
-    scopeMatrix: {} as Record<ChainIDs, Record<Category, boolean>> // tells which network × category combinations have been explored to obtain the current list of results (as the user can select/deselect successively filters in any order, the scope is not straightforward)
+    scopeMatrix: {} as Record<ChainIDs, Record<Category, boolean>>, // tells which network × category combinations have been explored to obtain the current list of results (as the user can select/deselect successively filters in any order, the scope is not straightforward)
   },
   organized: {
     in: { networks: [] } as OrganizedResults, // filtered-in results, organized
     howManyResultsIn: 0,
     out: { networks: [] } as OrganizedResults, // filtered-out results, organized
-    howManyResultsOut: 0
-  }
+    howManyResultsOut: 0,
+  },
 }
 
-function hideResult (whichOne : ResultSuggestion) {
-  results.raw.stringifyiedList.delete((whichOne as ResultSuggestionInternal).stringifyiedRawResult)
+function hideResult(whichOne: ResultSuggestion) {
+  results.raw.stringifyiedList.delete(
+    (whichOne as ResultSuggestionInternal).stringifyiedRawResult,
+  )
   // now we update the list of result suggestions
   refreshOutputArea()
 }
 
-function closeDropdown () {
+function closeDropdown() {
   globalState.value.showDropdown = false
   textField.value?.blur()
 }
 
-function empty () {
+function empty() {
   lastKnownText = ''
   userInputNonce++
   userInputText.value = ''
@@ -136,7 +139,7 @@ function empty () {
   clearOrganizedResults()
 }
 
-function clearRawResults () {
+function clearRawResults() {
   results.raw.stringifyiedList.clear()
   for (const nw in results.raw.scopeMatrix) {
     const network = nw as unknown as ChainIDs
@@ -147,7 +150,7 @@ function clearRawResults () {
   }
 }
 
-function clearOrganizedResults () {
+function clearOrganizedResults() {
   results.organized.in = { networks: [] }
   results.organized.out = { networks: [] }
   results.organized.howManyResultsIn = 0
@@ -158,7 +161,7 @@ function clearOrganizedResults () {
  * @param state the new state that the search-bar enters
  * @returns old state, so you can read it after the call if you need
  */
-function resetGlobalState (state : States) : GlobalState {
+function resetGlobalState(state: States): GlobalState {
   const previousState = { ...globalState.value }
 
   globalState.value.functionToCallAfterResultsGetOrganized = null
@@ -167,28 +170,35 @@ function resetGlobalState (state : States) : GlobalState {
   return previousState
 }
 
-function updateGlobalState (state : States) {
+function updateGlobalState(state: States) {
   if (state === globalState.value.state && state !== States.UpdateIncoming) {
     // we make sure that Vue re-renders the drop-down although the state does not change
     globalState.value.state = States.UpdateIncoming
     nextTick(() => updateGlobalState(state))
-  } else {
+  }
+  else {
     globalState.value.state = state
   }
 }
 
-function reconfigureSearchbar () {
-  differentialRequests = SearchbarPurposeInfo[props.barPurpose].differentialRequests
+function reconfigureSearchbar() {
+  differentialRequests
+    = SearchbarPurposeInfo[props.barPurpose].differentialRequests
   closeDropdown()
   empty()
   // builds the list of all search types that the bar will consider, from the list of searchable categories (obtained through props.barPurpose)
-  searchableTypes = generateTypesFromCategories(SearchbarPurposeInfo[props.barPurpose].searchable)
+  searchableTypes = generateTypesFromCategories(
+    SearchbarPurposeInfo[props.barPurpose].searchable,
+  )
   allTypesBelongToAllNetworks = true
   for (const t of searchableTypes) {
     allTypesBelongToAllNetworks &&= TypeInfo[t].belongsToAllNetworks // this variable will be used to know whether it is useless to show the network-filter selector
   }
   // creates the entries storing the state of the network filter, and deselect all networks
-  const networks = (props.onlyNetworks !== undefined && props.onlyNetworks.length > 0) ? props.onlyNetworks : availableNetworks.value
+  const networks
+    = props.onlyNetworks !== undefined && props.onlyNetworks.length > 0
+      ? props.onlyNetworks
+      : availableNetworks.value
   userInputNetworks.value.clear()
   for (const nw of networks) {
     userInputNetworks.value.set(nw, false)
@@ -215,8 +225,12 @@ watch(availableNetworks, reconfigureSearchbar)
 let resizingObserver: ResizeObserver
 if (isClient) {
   resizingObserver = new ResizeObserver((entries) => {
-    const newLayout : SearchbarDropdownLayout = (entries[0].borderBoxSize[0].inlineSize < LayoutThreshold) ? 'narrow-dropdown' : 'large-dropdown'
-    if (newLayout !== dropdownLayout.value) { // reassigning 'narrow-dropdown' to 'narrow-dropdown' (for ex) is not guaranteed to preserve the pointer, so this trick makes sure that we do not trigger Vue watchers for nothing (draining the battery and slowing down the UI)
+    const newLayout: SearchbarDropdownLayout
+      = entries[0].borderBoxSize[0].inlineSize < LayoutThreshold
+        ? 'narrow-dropdown'
+        : 'large-dropdown'
+    if (newLayout !== dropdownLayout.value) {
+      // reassigning 'narrow-dropdown' to 'narrow-dropdown' (for ex) is not guaranteed to preserve the pointer, so this trick makes sure that we do not trigger Vue watchers for nothing (draining the battery and slowing down the UI)
       dropdownLayout.value = newLayout
     }
   })
@@ -235,22 +249,28 @@ onBeforeUnmount(() => {
 })
 
 // closes the drop-down if the user interacts with another part of the page
-function listenToClicks (event : Event) {
-  if (!globalState.value.showDropdown || !dropdown.value || !textFieldAndButton.value ||
-      dropdown.value.contains(event.target as Node) || textFieldAndButton.value.contains(event.target as Node)) {
+function listenToClicks(event: Event) {
+  if (
+    !globalState.value.showDropdown
+    || !dropdown.value
+    || !textFieldAndButton.value
+    || dropdown.value.contains(event.target as Node)
+    || textFieldAndButton.value.contains(event.target as Node)
+  ) {
     return
   }
   closeDropdown()
 }
 
-function textMightHaveChanged () {
+function textMightHaveChanged() {
   if (userInputText.value === lastKnownText) {
     return
   }
   userInputNonce++
   if (userInputText.value.length === 0) {
     empty()
-  } else {
+  }
+  else {
     resetGlobalState(States.WaitingForResults)
     clearRawResults()
     calculateNextSearchScope()
@@ -260,12 +280,12 @@ function textMightHaveChanged () {
   lastKnownText = userInputText.value
 }
 
-function handleKeyPressInTextField (key : string) {
+function handleKeyPressInTextField(key: string) {
   switch (key) {
-    case 'Enter' :
+    case 'Enter':
       userPressedSearchButtonOrEnter()
       break
-    case 'Escape' :
+    case 'Escape':
       closeDropdown()
       break
     default:
@@ -274,7 +294,7 @@ function handleKeyPressInTextField (key : string) {
   }
 }
 
-function userFiltersChanged () {
+function userFiltersChanged() {
   userInputNonce++
   // determining whether no filter is selected
   userInputNoNetworkIsSelected = true
@@ -292,51 +312,66 @@ function userFiltersChanged () {
   // determining which networks and categories need to be searched in
   calculateNextSearchScope()
   // if the scope did not widen, we simply update the list of result suggestions shown to the user
-  if ((!differentialRequests || nextSearchScope.networks.size + nextSearchScope.categories.size === 0) && globalState.value.state !== States.Error) {
+  if (
+    (!differentialRequests
+    || nextSearchScope.networks.size + nextSearchScope.categories.size === 0)
+    && globalState.value.state !== States.Error
+  ) {
     refreshOutputArea()
-  } else {
+  }
+  else {
     // the scope is larger so a new request will be sent to the API
     resetGlobalState(States.WaitingForResults)
     debouncer.bounce(userInputNonce, false, true)
   }
 }
 
-function userPressedSearchButtonOrEnter () {
+function userPressedSearchButtonOrEnter() {
   globalState.value.functionToCallAfterResultsGetOrganized = null
   switch (globalState.value.state) {
-    case States.NoText : // the user enjoys the sound of clicks
+    case States.NoText: // the user enjoys the sound of clicks
       return
-    case States.Error : // the previous API call failed and the user tries again with Enter or with the search button
+    case States.Error: // the previous API call failed and the user tries again with Enter or with the search button
       resetGlobalState(States.WaitingForResults)
       callAPIthenOrganizeResultsThenCallBack(userInputNonce) // we start a new search
       return
-    case States.WaitingForResults : // the user pressed Enter or clicked the search button, but the results are not here yet
-      globalState.value.functionToCallAfterResultsGetOrganized = userPressedSearchButtonOrEnter // we request to be called again once the communication with the API is complete
+    case States.WaitingForResults: // the user pressed Enter or clicked the search button, but the results are not here yet
+      globalState.value.functionToCallAfterResultsGetOrganized
+        = userPressedSearchButtonOrEnter // we request to be called again once the communication with the API is complete
       return // in the meantime, we do not proceed further
   }
   // from here, we know that the user pressed Enter or clicked the search button to let us select the most relevant result
 
-  if (results.organized.howManyResultsIn === 0 && !areThereResultsHiddenByUser()) {
+  if (
+    results.organized.howManyResultsIn === 0
+    && !areThereResultsHiddenByUser()
+  ) {
     // nothing matching the input has been found
     return
   }
   // the priority is given to filtered-in results
-  let toConsider : OrganizedResults
+  let toConsider: OrganizedResults
   if (results.organized.howManyResultsIn > 0) {
     toConsider = results.organized.in
-  } else {
+  }
+  else {
     // we default to the filtered-out results if there are results but the drop down does not show them
     toConsider = results.organized.out
   }
   // Builds the list of matchings that the parent component will need when picking one by default (in callback function `props.pickByDefault()`).
   // We guarantee props.pickByDefault() that the list is ordered by network and type priority (the sorting is done in `filterAndOrganizeResults()`).
-  const possibilities : Matching[] = []
+  const possibilities: Matching[] = []
   for (const network of toConsider.networks) {
     for (const type of network.types) {
       // here we assume that the results in array `type.suggestions` are sorted by `closeness` values (see the sorting done in `filterAndOrganizeResults()`)
       for (const suggestion of type.suggestions) {
         if (!suggestion.lacksPremiumSubscription) {
-          possibilities.push({ closeness: suggestion.closeness, network: network.chainId, type: type.type, s: suggestion } as Matching)
+          possibilities.push({
+            closeness: suggestion.closeness,
+            network: network.chainId,
+            type: type.type,
+            s: suggestion,
+          } as Matching)
           break // no need to continue, other results of the same type would be indistinguishable in the code of function `props.pickByDefault()` (called below) : the only difference is that their closeness values are worse
         }
       }
@@ -355,7 +390,7 @@ function userPressedSearchButtonOrEnter () {
   }
 }
 
-function userClickedSuggestion (suggestion : ResultSuggestionInternal) {
+function userClickedSuggestion(suggestion: ResultSuggestionInternal) {
   // calls back parent's function taking action with the result
   if (!props.keepDropdownOpen) {
     closeDropdown()
@@ -363,7 +398,7 @@ function userClickedSuggestion (suggestion : ResultSuggestionInternal) {
   emit('go', suggestion as ResultSuggestion)
 }
 
-function refreshOutputArea () {
+function refreshOutputArea() {
   // updates the result lists with the latest API response and user filters
   filterAndOrganizeResults()
   // refreshes the output area in the drop-down
@@ -377,22 +412,29 @@ function refreshOutputArea () {
  *  all networks currently selected are also needed and those are not necessarily all the networks in the scope due to the path followed by the user
  *  while clicking the filters).
  */
-function calculateNextSearchScope () {
+function calculateNextSearchScope() {
   nextSearchScope.networks.clear()
   nextSearchScope.categories.clear()
   if (differentialRequests) {
     for (const nw of userInputNetworks.value) {
-      if (!nw[1] && !userInputNoNetworkIsSelected) { continue }
+      if (!nw[1] && !userInputNoNetworkIsSelected) {
+        continue
+      }
       for (const cat of userInputCategories.value) {
-        if (!cat[1] && !userInputNoCategoryIsSelected) { continue }
-        if (results.raw.scopeMatrix[nw[0]][cat[0]]) { continue }
+        if (!cat[1] && !userInputNoCategoryIsSelected) {
+          continue
+        }
+        if (results.raw.scopeMatrix[nw[0]][cat[0]]) {
+          continue
+        }
         // The previous lines ensure that this network × category combination is not in the scope already.
         // The next two lines inventor the network and the category and the Set object ensures that they are inventored only once.
         nextSearchScope.networks.add(nw[0])
         nextSearchScope.categories.add(cat[0])
       }
     }
-  } else {
+  }
+  else {
     for (const nw of userInputNetworks.value) {
       nextSearchScope.networks.add(nw[0])
     }
@@ -406,7 +448,7 @@ function calculateNextSearchScope () {
  * Once new results are received and added to `results.raw.stringifyiedList`,
  * this function is called to add the newly selected filters to `results.raw.scopeMatrix`.
  */
-function saveNewSearchScope () {
+function saveNewSearchScope() {
   for (const nw of nextSearchScope.networks) {
     for (const cat of nextSearchScope.categories) {
       results.raw.scopeMatrix[nw][cat] = true
@@ -414,16 +456,16 @@ function saveNewSearchScope () {
   }
 }
 
-async function callAPIthenOrganizeResultsThenCallBack (nonceWhenCalled: number) {
-  let received : SearchAheadAPIresponse | undefined
+async function callAPIthenOrganizeResultsThenCallBack(nonceWhenCalled: number) {
+  let received: SearchAheadAPIresponse | undefined
 
   try {
     const networks = Array.from(nextSearchScope.networks)
     const types = generateTypesFromCategories(nextSearchScope.categories)
-    const body : SearchRequest = {
+    const body: SearchRequest = {
       input: userInputText.value,
       networks,
-      types
+      types,
     }
     if (areResultsCountable(types, true)) {
       body.count = true
@@ -431,15 +473,21 @@ async function callAPIthenOrganizeResultsThenCallBack (nonceWhenCalled: number)
     received = await fetch<SearchAheadAPIresponse>(API_PATH.SEARCH, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body
+      body,
     })
-  } catch (error) {
+  }
+  catch (error) {
     received = undefined
   }
-  if (userInputNonce !== nonceWhenCalled) { // Result outdated so we ignore it. If there is an error, we ignore it too because it is based on an outdated input.
+  if (userInputNonce !== nonceWhenCalled) {
+    // Result outdated so we ignore it. If there is an error, we ignore it too because it is based on an outdated input.
     return
   }
-  if (!received || received.error !== undefined || received.data === undefined) {
+  if (
+    !received
+    || received.error !== undefined
+    || received.data === undefined
+  ) {
     resetGlobalState(States.Error) // the user will see an error message
     return
   }
@@ -456,11 +504,11 @@ async function callAPIthenOrganizeResultsThenCallBack (nonceWhenCalled: number)
 }
 
 // Fills `results.organized` by categorizing, filtering and sorting the data of the API.
-function filterAndOrganizeResults () {
+function filterAndOrganizeResults() {
   clearOrganizedResults()
 
-  const resultsIn : ResultSuggestionInternal[] = []
-  const resultsOut : ResultSuggestionInternal[] = []
+  const resultsIn: ResultSuggestionInternal[] = []
+  const resultsOut: ResultSuggestionInternal[] = []
   // filling those two lists
   for (const finding of results.raw.stringifyiedList) {
     const toBeAdded = convertSingleAPIresultIntoResultSuggestion(finding)
@@ -469,15 +517,24 @@ function filterAndOrganizeResults () {
     }
     // discarding findings that our configuration (given in the props) forbids
     const category = TypeInfo[toBeAdded.type].category
-    if ((toBeAdded.chainId !== ChainIDs.Any && !userInputNetworks.value.has(toBeAdded.chainId)) || !userInputCategories.value.has(category)) {
+    if (
+      (toBeAdded.chainId !== ChainIDs.Any
+      && !userInputNetworks.value.has(toBeAdded.chainId))
+      || !userInputCategories.value.has(category)
+    ) {
       continue
     }
     // determining whether the finding is filtered in or out, sending it to the corresponding list
-    const acceptTheChainID = userInputNetworks.value.get(toBeAdded.chainId) || userInputNoNetworkIsSelected || toBeAdded.chainId === ChainIDs.Any
-    const acceptTheCategory = userInputCategories.value.get(category) || userInputNoCategoryIsSelected
+    const acceptTheChainID
+      = userInputNetworks.value.get(toBeAdded.chainId)
+      || userInputNoNetworkIsSelected
+      || toBeAdded.chainId === ChainIDs.Any
+    const acceptTheCategory
+      = userInputCategories.value.get(category) || userInputNoCategoryIsSelected
     if (acceptTheChainID && acceptTheCategory) {
       resultsIn.push(toBeAdded)
-    } else {
+    }
+    else {
       resultsOut.push(toBeAdded)
     }
   }
@@ -491,30 +548,48 @@ function filterAndOrganizeResults () {
 
   // This sorting orders the list of results in the drop down and is fundamental for userPressedSearchButtonOrEnter() as well as props.pickByDefault().
   // Do not alter this sorting without considering the needs of those functions and updating the comments guiding the developpers using the search-bar.
-  function sortResults (list : ResultSuggestionInternal[]) {
-    list.sort((a, b) => ChainInfo[a.chainId].priority - ChainInfo[b.chainId].priority || TypeInfo[a.type].priority - TypeInfo[b.type].priority || a.closeness - b.closeness)
+  function sortResults(list: ResultSuggestionInternal[]) {
+    list.sort(
+      (a, b) =>
+        ChainInfo[a.chainId].priority - ChainInfo[b.chainId].priority
+        || TypeInfo[a.type].priority - TypeInfo[b.type].priority
+        || a.closeness - b.closeness,
+    )
   }
 
-  function fillOrganizedResults (linearSource : ResultSuggestionInternal[], organizedDestination : OrganizedResults) {
+  function fillOrganizedResults(
+    linearSource: ResultSuggestionInternal[],
+    organizedDestination: OrganizedResults,
+  ) {
     for (const toBeAdded of linearSource) {
       // Picking from the organized results the network that the finding belongs to. Creates the network if needed.
-      let existingNetwork = organizedDestination.networks.findIndex(nwElem => nwElem.chainId === toBeAdded.chainId)
+      let existingNetwork = organizedDestination.networks.findIndex(
+        nwElem => nwElem.chainId === toBeAdded.chainId,
+      )
       if (existingNetwork < 0) {
-        existingNetwork = -1 + organizedDestination.networks.push({
-          chainId: toBeAdded.chainId,
-          types: []
-        })
+        existingNetwork
+          = -1
+          + organizedDestination.networks.push({
+            chainId: toBeAdded.chainId,
+            types: [],
+          })
       }
       // Picking from the network the type group that the finding belongs to. Creates the type group if needed.
-      let existingType = organizedDestination.networks[existingNetwork].types.findIndex(tyElem => tyElem.type === toBeAdded.type)
+      let existingType = organizedDestination.networks[
+        existingNetwork
+      ].types.findIndex(tyElem => tyElem.type === toBeAdded.type)
       if (existingType < 0) {
-        existingType = -1 + organizedDestination.networks[existingNetwork].types.push({
-          type: toBeAdded.type,
-          suggestions: []
-        })
+        existingType
+          = -1
+          + organizedDestination.networks[existingNetwork].types.push({
+            type: toBeAdded.type,
+            suggestions: [],
+          })
       }
       // now we can insert the finding at the right place in the organized results
-      organizedDestination.networks[existingNetwork].types[existingType].suggestions.push(toBeAdded)
+      organizedDestination.networks[existingNetwork].types[
+        existingType
+      ].suggestions.push(toBeAdded)
     }
   }
 }
@@ -524,31 +599,51 @@ function filterAndOrganizeResults () {
 // If the result JSON from the API is somehow unexpected, the function returns `undefined`.
 // The fields that the function reads in the API response as well as the place they are stored in our ResultSuggestionInternal.output
 // object are given by the filling information in TypeInfo[<result type>].howToFillresultSuggestionOutput in types/searchbar.ts
-function convertSingleAPIresultIntoResultSuggestion (stringifyiedRawResult : string) : ResultSuggestionInternal | undefined {
-  const apiResponseElement = JSON.parse(stringifyiedRawResult) as SingleAPIresult
-  if (!(getListOfResultTypes(false) as string[]).includes(apiResponseElement.type)) {
-    warn('The API returned an unexpected type of search-ahead result: ', apiResponseElement.type)
+function convertSingleAPIresultIntoResultSuggestion(
+  stringifyiedRawResult: string,
+): ResultSuggestionInternal | undefined {
+  const apiResponseElement = JSON.parse(
+    stringifyiedRawResult,
+  ) as SingleAPIresult
+  if (
+    !(getListOfResultTypes(false) as string[]).includes(apiResponseElement.type)
+  ) {
+    warn(
+      'The API returned an unexpected type of search-ahead result: ',
+      apiResponseElement.type,
+    )
     return undefined
   }
 
   const type = apiResponseElement.type as ResultType
-  let chainId : ChainIDs
+  let chainId: ChainIDs
   if (TypeInfo[type].belongsToAllNetworks) {
     chainId = ChainIDs.Any
-  } else {
+  }
+  else {
     chainId = apiResponseElement.chain_id as ChainIDs
   }
 
-  const howToFillresultSuggestionOutput = TypeInfo[type].howToFillresultSuggestionOutput
+  const howToFillresultSuggestionOutput
+    = TypeInfo[type].howToFillresultSuggestionOutput
   const output = {} as ResultSuggestionOutput
 
   for (const k in howToFillresultSuggestionOutput) {
     const key = k as keyof HowToFillresultSuggestionOutput
-    const data = realizeData(apiResponseElement, howToFillresultSuggestionOutput[key], t)
+    const data = realizeData(
+      apiResponseElement,
+      howToFillresultSuggestionOutput[key],
+      t,
+    )
     if (data === undefined) {
-      warn('The API returned a search-ahead result of type ', type, ' with a missing field.')
+      warn(
+        'The API returned a search-ahead result of type ',
+        type,
+        ' with a missing field.',
+      )
       return undefined
-    } else {
+    }
+    else {
       output[key] = String(data)
     }
   }
@@ -562,19 +657,36 @@ function convertSingleAPIresultIntoResultSuggestion (stringifyiedRawResult : str
   }
 
   // retrieving the data that identifies this very result in the back-end (will be important for the callback function `@go`)
-  const queryParam = String(realizeData(apiResponseElement, TypeInfo[type].queryParamField, t))
+  const queryParam = String(
+    realizeData(apiResponseElement, TypeInfo[type].queryParamField, t),
+  )
 
   // Getting the number of identical results found. If the API did not clarify the number results for a countable type, we give NaN.
   let count = 1
   if (areResultsCountable([type], false)) {
-    const countSource = realizeData(apiResponseElement, TypeInfo[type].countSource, t)
+    const countSource = realizeData(
+      apiResponseElement,
+      TypeInfo[type].countSource,
+      t,
+    )
     if (countSource === undefined) {
       count = NaN
-    } else {
-      count = (Array.isArray(countSource)) ? countSource.length : Number(countSource)
     }
-    if ((SearchbarPurposeInfo[props.barPurpose].askAPItoCountResults && isNaN(count)) || count <= 0) {
-      warn('The API returned a search-ahead result of type ', type, ' but the batch or count data is missing or wrong.')
+    else {
+      count = Array.isArray(countSource)
+        ? countSource.length
+        : Number(countSource)
+    }
+    if (
+      (SearchbarPurposeInfo[props.barPurpose].askAPItoCountResults
+      && isNaN(count))
+      || count <= 0
+    ) {
+      warn(
+        'The API returned a search-ahead result of type ',
+        type,
+        ' but the batch or count data is missing or wrong.',
+      )
       return undefined
     }
   }
@@ -592,14 +704,35 @@ function convertSingleAPIresultIntoResultSuggestion (stringifyiedRawResult : str
     }
   }
 
-  const result = { output, queryParam, closeness, count, chainId, type, rawResult: apiResponseElement }
-  const lacksPremiumSubscription = !!props.rowLacksPremiumSubscription && props.rowLacksPremiumSubscription(result)
-
-  return { ...result, stringifyiedRawResult, nameWasUnknown, lacksPremiumSubscription }
+  const result = {
+    output,
+    queryParam,
+    closeness,
+    count,
+    chainId,
+    type,
+    rawResult: apiResponseElement,
+  }
+  const lacksPremiumSubscription
+    = !!props.rowLacksPremiumSubscription
+    && props.rowLacksPremiumSubscription(result)
+
+  return {
+    ...result,
+    stringifyiedRawResult,
+    nameWasUnknown,
+    lacksPremiumSubscription,
+  }
 }
 
-function areResultsCountable (types: ResultType[], toTellTheAPI: boolean) : boolean {
-  if (SearchbarPurposeInfo[props.barPurpose].askAPItoCountResults || !toTellTheAPI) {
+function areResultsCountable(
+  types: ResultType[],
+  toTellTheAPI: boolean,
+): boolean {
+  if (
+    SearchbarPurposeInfo[props.barPurpose].askAPItoCountResults
+    || !toTellTheAPI
+  ) {
     for (const type of types) {
       if (TypeInfo[type].countSource) {
         return true
@@ -609,32 +742,44 @@ function areResultsCountable (types: ResultType[], toTellTheAPI: boolean) : bool
   return false
 }
 
-function generateTypesFromCategories (categories : Set<Category> | Category[]) : ResultType[] {
-  let list : ResultType[] = []
+function generateTypesFromCategories(
+  categories: Set<Category> | Category[],
+): ResultType[] {
+  let list: ResultType[] = []
 
   for (const cat of categories) {
     list = list.concat(getListOfResultTypesInCategory(cat))
   }
-  return list.filter(type => !SearchbarPurposeInfo[props.barPurpose].unsearchable.includes(type))
+  return list.filter(
+    type =>
+      !SearchbarPurposeInfo[props.barPurpose].unsearchable.includes(type),
+  )
 }
 
-function mustNetworkFilterBeShown () : boolean {
+function mustNetworkFilterBeShown(): boolean {
   return userInputNetworks.value.size >= 2 && !allTypesBelongToAllNetworks
 }
 
-function mustCategoryFiltersBeShown () : boolean {
+function mustCategoryFiltersBeShown(): boolean {
   return userInputCategories.value.size >= 2
 }
 
-const classForDropdownOpenedOrClosed = computed(() => globalState.value.showDropdown ? 'dropdown-is-opened' : 'dropdown-is-closed')
+const classForDropdownOpenedOrClosed = computed(() =>
+  globalState.value.showDropdown ? 'dropdown-is-opened' : 'dropdown-is-closed',
+)
 
-const dropdownContainsSomething = computed(() => mustNetworkFilterBeShown() || mustCategoryFiltersBeShown() || globalState.value.state !== States.NoText)
+const dropdownContainsSomething = computed(
+  () =>
+    mustNetworkFilterBeShown()
+    || mustCategoryFiltersBeShown()
+    || globalState.value.state !== States.NoText,
+)
 
-function areThereResultsHiddenByUser () : boolean {
+function areThereResultsHiddenByUser(): boolean {
   return !differentialRequests && results.organized.howManyResultsOut > 0
 }
 
-function informationIfNoResult () : string {
+function informationIfNoResult(): string {
   let info = t('search_bar.no_result_matches') + ' '
 
   if (differentialRequests) {
@@ -642,22 +787,28 @@ function informationIfNoResult () : string {
     if (!userInputNoNetworkIsSelected || !userInputNoCategoryIsSelected) {
       info += t('search_bar.or') + t('search_bar.your_filters')
     }
-  } else if (areThereResultsHiddenByUser()) {
+  }
+  else if (areThereResultsHiddenByUser()) {
     info += t('search_bar.your_filters')
-  } else {
+  }
+  else {
     info += t('search_bar.your_input')
   }
   return info
 }
 
-function informationIfHiddenResults () : string {
+function informationIfHiddenResults(): string {
   let info = String(results.organized.howManyResultsOut) + ' '
 
-  info += (results.organized.howManyResultsOut === 1 ? t('search_bar.one_result_hidden') : t('search_bar.several_results_hidden'))
+  info
+    += results.organized.howManyResultsOut === 1
+      ? t('search_bar.one_result_hidden')
+      : t('search_bar.several_results_hidden')
 
   if (results.organized.howManyResultsIn !== 0) {
     info = '+' + info + ' ' + t('search_bar.by_your_filters')
-  } else {
+  }
+  else {
     info = '(' + info + ')'
   }
 
@@ -666,14 +817,26 @@ function informationIfHiddenResults () : string {
 </script>
 
 <template>
-  <div class="anchor" :class="[barShape, classForDropdownOpenedOrClosed]">
-    <div ref="wholeComponent" class="whole-component" :class="[barShape,colorTheme,classForDropdownOpenedOrClosed]" @keydown="(e) => e.stopImmediatePropagation()">
-      <div ref="textFieldAndButton" class="text-and-button" :class="barShape">
+  <div
+    class="anchor"
+    :class="[barShape, classForDropdownOpenedOrClosed]"
+  >
+    <div
+      ref="wholeComponent"
+      class="whole-component"
+      :class="[barShape, colorTheme, classForDropdownOpenedOrClosed]"
+      @keydown="(e) => e.stopImmediatePropagation()"
+    >
+      <div
+        ref="textFieldAndButton"
+        class="text-and-button"
+        :class="barShape"
+      >
         <input
           ref="textField"
           v-model="userInputText"
           class="p-inputtext text-field"
-          :class="[barShape,colorTheme]"
+          :class="[barShape, colorTheme]"
           type="text"
           :placeholder="t(SearchbarPurposeInfo[barPurpose].placeHolder)"
           @keyup="(e) => handleKeyPressInTextField(e.key)"
@@ -681,16 +844,28 @@ function informationIfHiddenResults () : string {
         >
         <BcSearchbarButton
           class="search-button"
-          :class="[barShape,classForDropdownOpenedOrClosed]"
+          :class="[barShape, classForDropdownOpenedOrClosed]"
           :bar-shape="barShape"
           :color-theme="colorTheme"
           :bar-purpose="barPurpose"
           @click="userPressedSearchButtonOrEnter()"
         />
       </div>
-      <div v-if="globalState.showDropdown" ref="dropdown" class="dropdown" :class="barShape">
-        <div v-if="dropdownContainsSomething" class="separation" :class="[barShape,colorTheme]" />
-        <div v-if="mustNetworkFilterBeShown() || mustCategoryFiltersBeShown()" class="filter-area">
+      <div
+        v-if="globalState.showDropdown"
+        ref="dropdown"
+        class="dropdown"
+        :class="barShape"
+      >
+        <div
+          v-if="dropdownContainsSomething"
+          class="separation"
+          :class="[barShape, colorTheme]"
+        />
+        <div
+          v-if="mustNetworkFilterBeShown() || mustCategoryFiltersBeShown()"
+          class="filter-area"
+        >
           <BcSearchbarNetworkSelector
             v-if="mustNetworkFilterBeShown()"
             v-model="userInputNetworks"
@@ -710,41 +885,98 @@ function informationIfHiddenResults () : string {
             @change="userFiltersChanged"
           />
         </div>
-        <div v-if="globalState.state === States.ApiHasResponded" class="output-area" :class="[barShape,colorTheme]">
-          <div v-for="(network, k) of results.organized.in.networks" :key="network.chainId" class="network-container" :class="barShape">
-            <div v-for="(typ, j) of network.types" :key="typ.type" class="type-container" :class="barShape">
-              <div v-for="(suggestion, i) of typ.suggestions" :key="suggestion.queryParam" class="suggestionrow-container" :class="barShape">
-                <div v-if="i+j+k > 0" class="separation-between-suggestions" :class="[barShape, dropdownLayout]" />
+        <div
+          v-if="globalState.state === States.ApiHasResponded"
+          class="output-area"
+          :class="[barShape, colorTheme]"
+        >
+          <div
+            v-for="(network, k) of results.organized.in.networks"
+            :key="network.chainId"
+            class="network-container"
+            :class="barShape"
+          >
+            <div
+              v-for="(typ, j) of network.types"
+              :key="typ.type"
+              class="type-container"
+              :class="barShape"
+            >
+              <div
+                v-for="(suggestion, i) of typ.suggestions"
+                :key="suggestion.queryParam"
+                class="suggestionrow-container"
+                :class="barShape"
+              >
+                <div
+                  v-if="i + j + k > 0"
+                  class="separation-between-suggestions"
+                  :class="[barShape, dropdownLayout]"
+                />
                 <BcSearchbarSuggestionRow
                   :suggestion="suggestion"
                   :bar-shape="barShape"
                   :color-theme="colorTheme"
                   :dropdown-layout="dropdownLayout"
                   :bar-purpose="barPurpose"
-                  :screen-width-causing-sudden-change="screenWidthCausingSuddenChange"
-                  @click="(e : Event) => {e.stopPropagation(); /* stopping propagation prevents a bug when the search bar is asked to remove a result, making it smaller so the click appears to be outside */ userClickedSuggestion(suggestion)}"
+                  :screen-width-causing-sudden-change="
+                    screenWidthCausingSuddenChange
+                  "
+                  @click="
+                    (e: Event) => {
+                      e.stopPropagation();
+                      /* stopping propagation prevents a bug when the search bar is asked to remove a result,
+                      making it smaller so the click appears to be outside */
+                      userClickedSuggestion(
+                        suggestion,
+                      );
+                    }
+                  "
                 />
               </div>
             </div>
           </div>
-          <div v-if="results.organized.howManyResultsIn == 0" class="info center">
+          <div
+            v-if="results.organized.howManyResultsIn == 0"
+            class="info center"
+          >
             {{ informationIfNoResult() }}
           </div>
-          <div v-if="areThereResultsHiddenByUser()" class="info bottom">
+          <div
+            v-if="areThereResultsHiddenByUser()"
+            class="info bottom"
+          >
             {{ informationIfHiddenResults() }}
           </div>
         </div>
-        <div v-else-if="globalState.state === States.WaitingForResults || globalState.state === States.Error" class="output-area" :class="[barShape,colorTheme]">
-          <div v-if="globalState.state === States.WaitingForResults" class="info center">
-            {{ t('search_bar.searching') }}
-            <BcLoadingSpinner :loading="true" size="small" alignment="center" />
+        <div
+          v-else-if="
+            globalState.state === States.WaitingForResults
+              || globalState.state === States.Error
+          "
+          class="output-area"
+          :class="[barShape, colorTheme]"
+        >
+          <div
+            v-if="globalState.state === States.WaitingForResults"
+            class="info center"
+          >
+            {{ t("search_bar.searching") }}
+            <BcLoadingSpinner
+              :loading="true"
+              size="small"
+              alignment="center"
+            />
           </div>
-          <div v-else-if="globalState.state === States.Error" class="info center">
+          <div
+            v-else-if="globalState.state === States.Error"
+            class="info center"
+          >
             <span>
-              {{ t('search_bar.something_wrong') }}
+              {{ t("search_bar.something_wrong") }}
               <IconErrorFace :inline="true" />
             </span>
-            {{ t('search_bar.try_again') }}
+            {{ t("search_bar.try_again") }}
           </div>
         </div>
       </div>
@@ -753,7 +985,7 @@ function informationIfHiddenResults () : string {
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
+@use "~/assets/css/main.scss";
 @use "~/assets/css/fonts.scss";
 
 .anchor {
@@ -769,7 +1001,8 @@ function informationIfHiddenResults () : string {
   &.small {
     height: 28px;
     &.dropdown-is-opened {
-      @media (max-width: 510px) { // narrow window/screen
+      @media (max-width: 510px) {
+        // narrow window/screen
         position: absolute;
         left: 0px;
         right: 0px;
@@ -820,7 +1053,7 @@ function informationIfHiddenResults () : string {
     right: 0px;
 
     .text-field {
-      display:inline-block;
+      display: inline-block;
       position: relative;
       box-sizing: border-box;
       width: 100%;
diff --git a/frontend/components/bc/searchbar/SuggestionRow.vue b/frontend/components/bc/searchbar/SuggestionRow.vue
index e96cc4f1c..03c40b4ae 100644
--- a/frontend/components/bc/searchbar/SuggestionRow.vue
+++ b/frontend/components/bc/searchbar/SuggestionRow.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 /*
- * If you want to change the behavior of the component or the information it displays, it is possible that you simply need to change a few parameters
- * in searchbar.ts rather than altering the code of the component. The possibilities offered by this configuration file are explanined in readme.md
+ * If you want to change the behavior of the component or the information it displays,
+ it is possible that you simply need to change a few parameters
+ * in searchbar.ts rather than altering the code of the component.
+ The possibilities offered by this configuration file are explanined in readme.md
  */
 import { ChainIDs } from '~/types/network'
 import {
@@ -17,22 +19,24 @@ import {
   type SearchbarPurpose,
   SearchbarPurposeInfo,
   SuggestionrowCells,
-  getI18nPathOfTranslatableLitteral
+  getI18nPathOfTranslatableLitteral,
 } from '~/types/searchbar'
 
 const props = defineProps<{
-  suggestion: ResultSuggestionInternal,
-  barShape: SearchbarShape,
-  colorTheme: SearchbarColors,
-  dropdownLayout : SearchbarDropdownLayout,
-  barPurpose: SearchbarPurpose,
+  suggestion: ResultSuggestionInternal
+  barShape: SearchbarShape
+  colorTheme: SearchbarColors
+  dropdownLayout: SearchbarDropdownLayout
+  barPurpose: SearchbarPurpose
   screenWidthCausingSuddenChange: number
 }>()
 
 const { t } = useTranslation()
 
-function formatSubcategoryCell () : string {
-  const i18nPathOfSubcategoryTitle = getI18nPathOfTranslatableLitteral(SubCategoryInfo[TypeInfo[props.suggestion.type].subCategory].title)
+function formatSubcategoryCell(): string {
+  const i18nPathOfSubcategoryTitle = getI18nPathOfTranslatableLitteral(
+    SubCategoryInfo[TypeInfo[props.suggestion.type].subCategory].title,
+  )
   let label = t(i18nPathOfSubcategoryTitle, props.suggestion.count)
 
   if (props.suggestion.count >= 2) {
@@ -41,19 +45,22 @@ function formatSubcategoryCell () : string {
   return label
 }
 
-function formatIdentificationCell () : string {
-  if (wasOutputDataGivenByTheAPI(props.suggestion.type, 'name') && !props.suggestion.nameWasUnknown) {
+function formatIdentificationCell(): string {
+  if (
+    wasOutputDataGivenByTheAPI(props.suggestion.type, 'name')
+    && !props.suggestion.nameWasUnknown
+  ) {
     return props.suggestion.output.name
   }
   return props.suggestion.output.lowLevelData
 }
 
-function formatDescriptionCell () : string {
+function formatDescriptionCell(): string {
   if (wasOutputDataGivenByTheAPI(props.suggestion.type, 'description')) {
     // we tell the user what is the data that they see (ex: "Index" for a validator index)
     switch (props.suggestion.type) {
-      case ResultType.ValidatorsByIndex :
-      case ResultType.ValidatorsByPubkey :
+      case ResultType.ValidatorsByIndex:
+      case ResultType.ValidatorsByPubkey:
         return t('common.index') + ' ' + props.suggestion.output.description
       // more cases might arise in the future
     }
@@ -61,18 +68,30 @@ function formatDescriptionCell () : string {
   return props.suggestion.output.description
 }
 
-const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivated' : ''
+const deactivationClass = props.suggestion.lacksPremiumSubscription
+  ? 'deactivated'
+  : ''
 </script>
 
 <template>
   <div
-    v-if="SearchbarPurposeInfo[barPurpose].cellsInSuggestionRows === SuggestionrowCells.NameDescriptionLowlevelCategory"
+    v-if="
+      SearchbarPurposeInfo[barPurpose].cellsInSuggestionRows
+        === SuggestionrowCells.NameDescriptionLowlevelCategory
+    "
     class="rowstyle_name-description-low-level-category"
-    :class="[barShape,colorTheme,dropdownLayout,deactivationClass]"
+    :class="[barShape, colorTheme, dropdownLayout, deactivationClass]"
   >
     <!-- In this mode, all possible cells are shown (this was the very first design on Figma) -->
-    <div v-if="props.suggestion.chainId !== ChainIDs.Any" class="cell-icons" :class="[barShape,dropdownLayout,deactivationClass]">
-      <BcSearchbarTypeIcons :type="props.suggestion.type" class="type-icon not-alone" />
+    <div
+      v-if="props.suggestion.chainId !== ChainIDs.Any"
+      class="cell-icons"
+      :class="[barShape, dropdownLayout, deactivationClass]"
+    >
+      <BcSearchbarTypeIcons
+        :type="props.suggestion.type"
+        class="type-icon not-alone"
+      />
       <IconNetwork
         :chain-id="props.suggestion.chainId"
         :colored="true"
@@ -81,48 +100,88 @@ const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivat
         class="network-icon"
       />
     </div>
-    <div v-else class="cell-icons" :class="[barShape,dropdownLayout,deactivationClass]">
-      <BcSearchbarTypeIcons :type="props.suggestion.type" class="type-icon alone" />
+    <div
+      v-else
+      class="cell-icons"
+      :class="[barShape, dropdownLayout, deactivationClass]"
+    >
+      <BcSearchbarTypeIcons
+        :type="props.suggestion.type"
+        class="type-icon alone"
+      />
     </div>
     <BcSearchbarMiddleEllipsis
       class="cell_name"
-      :class="[barShape,dropdownLayout,deactivationClass]"
+      :class="[barShape, dropdownLayout, deactivationClass]"
       :text="suggestion.output.name"
       :width-mediaquery-threshold="screenWidthCausingSuddenChange"
     />
-    <BcSearchbarMiddleEllipsis class="group_blockchain-info" :class="[barShape,dropdownLayout,deactivationClass]" :width-mediaquery-threshold="screenWidthCausingSuddenChange">
+    <BcSearchbarMiddleEllipsis
+      class="group_blockchain-info"
+      :class="[barShape, dropdownLayout, deactivationClass]"
+      :width-mediaquery-threshold="screenWidthCausingSuddenChange"
+    >
       <BcSearchbarMiddleEllipsis
         v-if="suggestion.output.description !== ''"
         :text="suggestion.output.description"
         :initial-flex-grow="1"
         class="cell_bi_description"
-        :class="[barShape,colorTheme,dropdownLayout]"
+        :class="[barShape, colorTheme, dropdownLayout]"
       />
       <BcSearchbarMiddleEllipsis
         v-if="suggestion.output.lowLevelData !== ''"
         :text="suggestion.output.lowLevelData"
         class="cell_bi_low-level-data"
-        :class="[barShape, colorTheme, dropdownLayout, suggestion.output.description?'greyish':'']"
+        :class="[
+          barShape,
+          colorTheme,
+          dropdownLayout,
+          suggestion.output.description ? 'greyish' : '',
+        ]"
       />
     </BcSearchbarMiddleEllipsis>
-    <div class="premium-invitation" :class="dropdownLayout" @click="(e : Event) => e.stopPropagation()">
-      <BcPremiumGem v-if="suggestion.lacksPremiumSubscription" class="gem" />
+    <div
+      class="premium-invitation"
+      :class="dropdownLayout"
+      @click="(e: Event) => e.stopPropagation()"
+    >
+      <BcPremiumGem
+        v-if="suggestion.lacksPremiumSubscription"
+        class="gem"
+      />
     </div>
-    <div class="cell-category" :class="[barShape,dropdownLayout,deactivationClass]">
-      <span class="category-label" :class="[barShape,colorTheme,dropdownLayout]">
+    <div
+      class="cell-category"
+      :class="[barShape, dropdownLayout, deactivationClass]"
+    >
+      <span
+        class="category-label"
+        :class="[barShape, colorTheme, dropdownLayout]"
+      >
         {{ t(...CategoryInfo[TypeInfo[props.suggestion.type].category].title) }}
       </span>
     </div>
   </div>
 
   <div
-    v-else-if="SearchbarPurposeInfo[barPurpose].cellsInSuggestionRows === SuggestionrowCells.SubcategoryIdentificationDescription"
+    v-else-if="
+      SearchbarPurposeInfo[barPurpose].cellsInSuggestionRows
+        === SuggestionrowCells.SubcategoryIdentificationDescription
+    "
     class="rowstyle_subcategory-identification-description"
-    :class="[barShape,colorTheme,dropdownLayout,deactivationClass]"
+    :class="[barShape, colorTheme, dropdownLayout, deactivationClass]"
   >
-    <!-- In this mode, we show less cells and their content comes from dedicated functions instead of a pure copy of `props.suggestion.output` -->
-    <div v-if="props.suggestion.chainId !== ChainIDs.Any" class="cell-icons" :class="[barShape,deactivationClass]">
-      <BcSearchbarTypeIcons :type="props.suggestion.type" class="type-icon not-alone" />
+    <!-- In this mode, we show less cells and their content comes from dedicated functions instead of a pure copy of
+     `props.suggestion.output` -->
+    <div
+      v-if="props.suggestion.chainId !== ChainIDs.Any"
+      class="cell-icons"
+      :class="[barShape, deactivationClass]"
+    >
+      <BcSearchbarTypeIcons
+        :type="props.suggestion.type"
+        class="type-icon not-alone"
+      />
       <IconNetwork
         :chain-id="props.suggestion.chainId"
         :colored="true"
@@ -131,32 +190,55 @@ const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivat
         class="network-icon"
       />
     </div>
-    <div v-else class="cell-icons" :class="[barShape,deactivationClass]">
-      <BcSearchbarTypeIcons :type="props.suggestion.type" class="type-icon alone" />
+    <div
+      v-else
+      class="cell-icons"
+      :class="[barShape, deactivationClass]"
+    >
+      <BcSearchbarTypeIcons
+        :type="props.suggestion.type"
+        class="type-icon alone"
+      />
     </div>
-    <div class="cell-subcategory" :class="[barShape,dropdownLayout,deactivationClass]">
+    <div
+      class="cell-subcategory"
+      :class="[barShape, dropdownLayout, deactivationClass]"
+    >
       {{ formatSubcategoryCell() }}
     </div>
     <BcSearchbarMiddleEllipsis
       class="cell_bi_identification"
-      :class="[barShape,dropdownLayout,deactivationClass]"
+      :class="[barShape, dropdownLayout, deactivationClass]"
       :text="formatIdentificationCell()"
       :width-mediaquery-threshold="screenWidthCausingSuddenChange"
     />
-    <div class="premium-invitation" :class="dropdownLayout" @click="(e : Event) => e.stopPropagation()">
-      <BcPremiumGem v-if="suggestion.lacksPremiumSubscription" class="gem" />
+    <div
+      class="premium-invitation"
+      :class="dropdownLayout"
+      @click="(e: Event) => e.stopPropagation()"
+    >
+      <BcPremiumGem
+        v-if="suggestion.lacksPremiumSubscription"
+        class="gem"
+      />
     </div>
-    <div v-if="suggestion.output.description !== ''" class="cell_bi_description" :class="[barShape,colorTheme,dropdownLayout,deactivationClass]">
+    <div
+      v-if="suggestion.output.description !== ''"
+      class="cell_bi_description"
+      :class="[barShape, colorTheme, dropdownLayout, deactivationClass]"
+    >
       {{ formatDescriptionCell() }}
     </div>
   </div>
 
-  <!-- If you want to show other cells or change their format, it might be good to implement a new mode here instead of modiying the modes above.
-       To make the bar use your new mode, add its name into the `SuggestionrowCells` enum in `searchbar.ts`, and update the `SearchbarPurposeInfo` record there. -->
+  <!-- If you want to show other cells or change their format, it might be good to implement a new mode here instead of
+   modiying the modes above.
+   To make the bar use your new mode, add its name into the `SuggestionrowCells` enum in `searchbar.ts`,
+   and update the `SearchbarPurposeInfo` record there. -->
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
+@use "~/assets/css/main.scss";
 @use "~/assets/css/fonts.scss";
 
 .deactivated {
@@ -288,7 +370,7 @@ const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivat
     margin-top: auto;
     margin-bottom: auto;
     font-weight: var(--standard_text_medium_font_weight);
-    white-space: nowrap;  // makes sure that the two spans (description + lowleveldata) stay on the same line
+    white-space: nowrap; // makes sure that the two spans (description + lowleveldata) stay on the same line
     &.narrow-dropdown {
       grid-row-end: span 2;
       flex-direction: column;
diff --git a/frontend/components/bc/searchbar/TypeIcons.vue b/frontend/components/bc/searchbar/TypeIcons.vue
index 9ecd90029..99ae72406 100644
--- a/frontend/components/bc/searchbar/TypeIcons.vue
+++ b/frontend/components/bc/searchbar/TypeIcons.vue
@@ -6,19 +6,24 @@ const props = defineProps<{
 }>()
 
 const subCategory = computed(() => TypeInfo[props.type].subCategory)
-
 </script>
 
 <template>
   <IconDatatypeTokenIcon v-if="subCategory === SubCategory.Tokens" />
   <IconDatatypeNftIcon v-else-if="subCategory === SubCategory.NFTs" />
   <IconDatatypeEpochIcon v-else-if="subCategory === SubCategory.Epochs" />
-  <IconDatatypeBlockIcon v-else-if="subCategory === SubCategory.SlotsAndBlocks" />
-  <IconDatatypeTransactionIcon v-else-if="subCategory === SubCategory.Transactions" />
+  <IconDatatypeBlockIcon
+    v-else-if="subCategory === SubCategory.SlotsAndBlocks"
+  />
+  <IconDatatypeTransactionIcon
+    v-else-if="subCategory === SubCategory.Transactions"
+  />
   <IconDatatypeBatchIcon v-else-if="subCategory === SubCategory.Batches" />
   <IconDatatypeContractIcon v-else-if="subCategory === SubCategory.Contracts" />
   <IconDatatypeAccountIcon v-else-if="subCategory === SubCategory.Accounts" />
   <IconDatatypeEnsIcon v-else-if="subCategory === SubCategory.EnsOverview" />
   <IconDatatypeGraffitiIcon v-else-if="subCategory === SubCategory.Graffiti" />
-  <IconDatatypeValidatorIcon v-else-if="subCategory === SubCategory.Validators" />
+  <IconDatatypeValidatorIcon
+    v-else-if="subCategory === SubCategory.Validators"
+  />
 </template>
diff --git a/frontend/components/bc/searchbar/readme.md b/frontend/components/bc/searchbar/readme.md
index 1448cea23..5b446faad 100644
--- a/frontend/components/bc/searchbar/readme.md
+++ b/frontend/components/bc/searchbar/readme.md
@@ -7,11 +7,13 @@
 # Using the search bar in your code
 
 In your `<script setup>`, write
+
 ```TS
 const mySearchbar = ref<SearchBar>()
 ```
 
 In your template, write
+
 ```HTML
 <BcSearchbarMain
   ref="mySearchbar"
@@ -25,6 +27,7 @@ In your template, write
 ```
 
 There are more props that you can give to configure the search bar:
+
 ```TS
 :only-networks="[<list of chain IDs that the bar is authorized to search over>]" // Without this prop, the bar searches over all networks.
 :keep-dropdown-open="true" // When the user selects a result, the drop-down does not close.
@@ -36,11 +39,13 @@ The list of possible values for `:bar-shape`, `:color-theme` and `:bar-purpose`
 If the width of the search bar can change suddenly while the user is redimensionning the window (for example due to a media query in the CSS or some JS code), the width threshold (in pixels) at which you trigger the change must be passed in prop `:screen-width-causing-sudden-change`. This prevents visual bugs in the list of results (to understand why, see section "Sudden changes of width" in the documentation of _MiddleEllipsis.vue_).
 
 You can write your own function for `:pick-by-default`, or give the example function written in _searchbar.ts_ if it suits your needs:
+
 ```TS
 :pick-by-default="pickHighestPriorityAmongBestMatchings"
 ```
 
 The search-bar offers methods that you can call for further tailoring:
+
 ```TS
 mySearchbar.value!.hideResult(whichOne : ResultSuggestion) // Removes a result from the drop-down. The result is one of those that you obtained in your `@go` handler.
 mySearchbar.value!.closeDropdown() // Useful when you gave `:keep-dropdown-open="true"` in the props but you still need to close the drop-down in certain cases.
@@ -53,42 +58,49 @@ _searchbar.ts_ has been designed as a "configuration file" for the search bar. F
 not be necessary to modify the code of the search-bar (its behavior and look are hard-coded as little as possible).
 
 **If the API returns a new type of result:**
-  1. Add this type into the `ResultType` enum of _searchbar.ts_.
-  2. Tell the bar how to read/display it by adding a new entry in the `TypeInfo` record.
+
+1. Add this type into the `ResultType` enum of _searchbar.ts_.
+2. Tell the bar how to read/display it by adding a new entry in the `TypeInfo` record.
 
 **If the API gets the ability to return a new field in some or all elements of its response array:**
-  1. Write the name of the new field in `SingleAPIresult` in _searchbar.ts_.
-  2. Create a reference to it in `Indirect`.
-  3. In `TypeInfo`, tell the bar when/where this field must be read (by giving its `Indirect` reference).
-  4. Add a case for the reference in function `wasOutputDataGivenByTheAPI()`.
-  5. Add a case for the reference in function `realizeData()`.
+
+1. Write the name of the new field in `SingleAPIresult` in _searchbar.ts_.
+2. Create a reference to it in `Indirect`.
+3. In `TypeInfo`, tell the bar when/where this field must be read (by giving its `Indirect` reference).
+4. Add a case for the reference in function `wasOutputDataGivenByTheAPI()`.
+5. Add a case for the reference in function `realizeData()`.
 
 **If for some type of result you want to change the information / order of the information that the user sees in the corresponding rows of the result-suggestion list:**
-  1. Locate this result type in record `TypeInfo`.
-  2. In that entry, change / swap the references that are in field `howToFillresultSuggestionOutput`.
+
+1. Locate this result type in record `TypeInfo`.
+2. In that entry, change / swap the references that are in field `howToFillresultSuggestionOutput`.
 
 **If you want to change in depth the whole result-suggestion list (to change how every row displays the information):**
-  1. Add a display-mode in the `SuggestionrowCells` enum in _searchbar.ts_.
-  2. Update the `SearchbarPurposeInfo` record there to tell the bar which Purpose must use your new mode.
-  3. Implement this mode in a new root `<div>` at the end of the `<template>` of `SuggestionRow.vue`.
+
+1. Add a display-mode in the `SuggestionrowCells` enum in _searchbar.ts_.
+2. Update the `SearchbarPurposeInfo` record there to tell the bar which Purpose must use your new mode.
+3. Implement this mode in a new root `<div>` at the end of the `<template>` of `SuggestionRow.vue`.
 
 **You can create a new purpose if needed:**
-  1. Add a purpose name into the `SearchbarPurpose` enum of _searchbar.ts_.
-  2. Define the behavior of the bar when it has this purpose, by adding an entry in the `SearchbarPurposeInfo` record.
-  3. Now you can give this purpose to the `:bar-purpose` prop.
+
+1. Add a purpose name into the `SearchbarPurpose` enum of _searchbar.ts_.
+2. Define the behavior of the bar when it has this purpose, by adding an entry in the `SearchbarPurposeInfo` record.
+3. Now you can give this purpose to the `:bar-purpose` prop.
 
 **If you want to add or remove a filter button:**
-  - Either you simply need create or modify a purpose to see more/less filters (see above).
-  - Or:
-    1. Add/remove an entry in enum `Category`.
-    2. Add/remove the corresponding category-title and button-label in enum `CategoryInfo`.
-    3. You might need to add/remove an entry in `SubCategoryInfo`.
-    4. Update (add/remove/change) all relevant entries in record `TypeInfo` to take properly into account your new categorization of the result types.
-    5. Update the entries of `SearchbarPurposeInfo` to take into account the new/removed category.
+
+- Either you simply need create or modify a purpose to see more/less filters (see above).
+- Or:
+  1. Add/remove an entry in enum `Category`.
+  2. Add/remove the corresponding category-title and button-label in enum `CategoryInfo`.
+  3. You might need to add/remove an entry in `SubCategoryInfo`.
+  4. Update (add/remove/change) all relevant entries in record `TypeInfo` to take properly into account your new categorization of the result types.
+  5. Update the entries of `SearchbarPurposeInfo` to take into account the new/removed category.
 
 **If you want to change the order of the results in the drop-down, it is a bit less straightforward:**
-  - To change the order of the results inside each network set, modify the values of fields `priority` in the `TypeInfo` record of _searchbar.ts_.
-  - Changing the order of the networks sets is a different task. You would need to change the `priority` fields in the `ChainInfo` record of _networks.ts_.
+
+- To change the order of the results inside each network set, modify the values of fields `priority` in the `TypeInfo` record of _searchbar.ts_.
+- Changing the order of the networks sets is a different task. You would need to change the `priority` fields in the `ChainInfo` record of _networks.ts_.
 
 Note that if different types or networks have the same priority, two results of these types/networks will appear in the drop-down in the order of their `closeness` values
 (a measure of similarity to the user input).
@@ -126,10 +138,12 @@ In real applications, you might need to display on the same line several MiddleE
 which implies that the room that each component has depends on the content of the others (because the texts push or pull their containers depending on their relative lengths).
 
 In that case, the simple syntax above causes 2 problems:
+
 1. The page can become slow and freeze. The reason is that each reclipping in a component changes its width, so the width of its neighbors, thus triggering them, which initiates an infinite loop of updates.
 2. It will clip the texts wrongly. The reason is that each component does not know the final widths of its neighbors while they are clipping independently.
 
 So, in that case, you must give the components a way to deal properly with each other. You do it by gathering them in a parent MiddleEllipsis like so:
+
 ```HTML
 <MiddleEllipsis class="papa">
   <MiddleEllipsis class="child1" text="a long text" />
@@ -137,19 +151,23 @@ So, in that case, you must give the components a way to deal properly with each
   ...
 </MiddleEllipsis>
 ```
+
 Note that :
+
 - A parent MiddleEllipsis can contain anything, so using a parent does not restrict the layout of your page. See it as a `div`. It recognizes and manages its children to make sure that they clip properly, and displays components of other types as they are, unchanged.
 - Regarding the children, their display modes can mix `inline-flex` and `inline-block` (only `inline` modes make sense in our context).
 
 **Guaranteeing no gap between the clipped text and its neighbors: using the concept of _undefined width_**
 
 When you want
+
 - a MiddleEllipsis component to be as narrow as its text (no empty space), no matter how small the text is,
 - and prevent it from exceeding some limit when the text is large (the text must clip at some point),
 
 then you can display your text through a MiddleEllipsis of undefined width as follows.
 
 Take a parent of defined width. Inside, sit your MiddleEllipsis of undefined width and the other things to display on the same line. For example:
+
 ```HTML
 <MiddleEllipsis class="papa">
   blabla bla, look there is no gap:
@@ -157,27 +175,35 @@ Take a parent of defined width. Inside, sit your MiddleEllipsis of undefined wid
   immediately followed by the rest without empty space
 </MiddleEllipsis>
 ```
+
 Note
+
 - the use of prop `initial-flex-grow`, which is mandatory for children of undefined width. It tells the component how much room it can give to its text with respect to the `flex-grow` properties of its neighbors.
-_initial_ means that the value defines the room during the computation only, the real `flex-grow` of the component remains `0` so the component collapses around its content, there is no empty space between it and its neighbors.
+  _initial_ means that the value defines the room during the computation only, the real `flex-grow` of the component remains `0` so the component collapses around its content, there is no empty space between it and its neighbors.
 - You can of course put other things in the parent, for example other MiddleEllipses of defined or undefined widths.
 
 **Using more than one ellipsis to clip the text**
 
 If you want your text to get clipped with a certain number of ellipses, you can give a constant:
+
 ```HTML
 <MiddleEllipsis class="myclass" text="my long text" :ellipses="3" />
 ```
+
 MiddleEllipsis offers to adapt the number of ellipses to the length of the text. For example,
+
 ```HTML
 <MiddleEllipsis class="myclass" text="my long text" :ellipses="[8,30]" />
 ```
+
 tells the component to use one ellipsis if there is room for 8 characters or less, two ellipses between 9 and 30 characters, and three ellipses above. The array can configure as many cases as you want.
 
 In practice, you will probably want a simple configuration like so:
+
 ```HTML
 <MiddleEllipsis class="myclass" text="my long text" :ellipses="[8]" />
 ```
+
 Here, the text will be clipped with one ellipsis if there is room for less than 9 characters, otherwise two ellipses.
 
 ## Restrictions
@@ -201,7 +227,7 @@ You must inform MiddleEllipsis that its width jumps unexpectedly. Othewise, it m
 There are two ways to pass this information. Either
 
 - You give the threshold at which you perform the change to its `width-mediaquery-threshold` prop.
-For example, `:width-mediaquery-threshold="600"` makes MiddleEllipsis aware that changes in the layout of the page happen when the width of the window/screen passes through 600px.
+  For example, `:width-mediaquery-threshold="600"` makes MiddleEllipsis aware that changes in the layout of the page happen when the width of the window/screen passes through 600px.
 - Or you remove/add/swap a class in the class-list of the component at the very moment the component has its width modified. The fact that the list of classes changes makes the component reclip.
 
 Children do not need this information, only parents and stand-alone components.
diff --git a/frontend/components/bc/tab/TabHeader.vue b/frontend/components/bc/tab/TabHeader.vue
index 1ed1ded58..0df821237 100644
--- a/frontend/components/bc/tab/TabHeader.vue
+++ b/frontend/components/bc/tab/TabHeader.vue
@@ -3,18 +3,20 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 
 interface Props {
-  header?: string,
+  header?: string
   icon?: IconDefinition
 }
 
 const props = defineProps<Props>()
-
 </script>
 
 <template>
   <div class="tab-header">
     <slot name="icon">
-      <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
+      <FontAwesomeIcon
+        v-if="props.icon"
+        :icon="props.icon"
+      />
     </slot>
     <span v-if="props.header">{{ props.header }}</span>
   </div>
diff --git a/frontend/components/bc/table/AgeHeader.vue b/frontend/components/bc/table/AgeHeader.vue
index 89f3eb0f3..864f645c4 100644
--- a/frontend/components/bc/table/AgeHeader.vue
+++ b/frontend/components/bc/table/AgeHeader.vue
@@ -7,8 +7,14 @@ const toggleAgeSetting = () => {
   changeSetting(setting.value === 'absolute' ? 'relative' : 'absolute')
 }
 </script>
+
 <template>
-  <span class="age-header" @click="toggleAgeSetting">{{ $t('table.age') }}</span>
+  <span
+    class="age-header"
+    @click="toggleAgeSetting"
+  >{{
+    $t("table.age")
+  }}</span>
 </template>
 
 <style lang="scss" scoped>
diff --git a/frontend/components/bc/table/BcTable.vue b/frontend/components/bc/table/BcTable.vue
index cf4f12f28..477d6e264 100644
--- a/frontend/components/bc/table/BcTable.vue
+++ b/frontend/components/bc/table/BcTable.vue
@@ -3,13 +3,13 @@ import type { ApiPagingResponse } from '~/types/api/common'
 import type { Cursor } from '~/types/datatable'
 
 interface Props {
-  cursor?: Cursor,
-  dataKey?: string, // Unique identifier for a data row
-  pageSize?: number,
-  data?: ApiPagingResponse<any>,
-  selectedSort?: string,
-  expandable?: boolean,
-  isRowExpandable?: (item: any) => boolean,
+  cursor?: Cursor
+  dataKey?: string // Unique identifier for a data row
+  pageSize?: number
+  data?: ApiPagingResponse<any>
+  selectedSort?: string
+  expandable?: boolean
+  isRowExpandable?: (item: any) => boolean
   selectionMode?: 'multiple' | 'single'
   tableClass?: string
   addSpacer?: boolean
@@ -18,7 +18,10 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const emit = defineEmits<{(e: 'setCursor', value: Cursor): void, (e: 'setPageSize', value: number): void }>()
+const emit = defineEmits<{
+  (e: 'setCursor', value: Cursor): void
+  (e: 'setPageSize', value: number): void
+}>()
 
 const expandedRows = ref<Record<any, boolean>>({})
 
@@ -43,7 +46,8 @@ const toggleAll = (forceClose = false) => {
     if (wasExpanded || forceClose) {
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete expandedRows.value[item[props.dataKey!]]
-    } else if (!props.isRowExpandable || props.isRowExpandable(item)) {
+    }
+    else if (!props.isRowExpandable || props.isRowExpandable(item)) {
       expandedRows.value[item[props.dataKey!]] = true
     }
   })
@@ -59,7 +63,8 @@ const toggleItem = (item: any) => {
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete expandedRows.value[item[props.dataKey]]
     }
-  } else {
+  }
+  else {
     expandedRows.value[item[props.dataKey]] = true
   }
   expandedRows.value = { ...expandedRows.value }
@@ -75,14 +80,20 @@ const setPageSize = (value: number) => {
   emit('setPageSize', value)
 }
 
-watch(() => props.expandable, (expandable) => {
-  if (!expandable) {
+watch(
+  () => props.expandable,
+  (expandable) => {
+    if (!expandable) {
+      toggleAll(true)
+    }
+  },
+)
+watch(
+  () => props.data,
+  () => {
     toggleAll(true)
-  }
-})
-watch(() => props.data, () => {
-  toggleAll(true)
-})
+  },
+)
 
 const sort = computed(() => {
   if (!props.selectedSort?.includes(':')) {
@@ -91,10 +102,9 @@ const sort = computed(() => {
   const split = props.selectedSort?.split(':')
   return {
     field: split[0],
-    order: split[1] === 'asc' ? -1 : 1
+    order: split[1] === 'asc' ? -1 : 1,
   }
 })
-
 </script>
 
 <template>
@@ -109,37 +119,68 @@ const sort = computed(() => {
     :data-key="dataKey"
     :loading="loading"
   >
-    <Column v-if="selectionMode" :selection-mode="selectionMode" class="selection" />
-    <Column v-if="expandable" expander class="expander">
+    <Column
+      v-if="selectionMode"
+      :selection-mode="selectionMode"
+      class="selection"
+    />
+    <Column
+      v-if="expandable"
+      expander
+      class="expander"
+    >
       <template #header>
-        <IconChevron class="toggle" :direction="allExpanded ? 'bottom' : 'right'" @click.stop.prevent="toggleAll()" />
+        <IconChevron
+          class="toggle"
+          :direction="allExpanded ? 'bottom' : 'right'"
+          @click.stop.prevent="toggleAll()"
+        />
       </template>
 
       <template #body="slotProps">
         <IconChevron
           v-if="!isRowExpandable || isRowExpandable(slotProps.data)"
           class="toggle"
-          :direction="dataKey && expandedRows[slotProps.data[dataKey]] ? 'bottom' : 'right'"
+          :direction="
+            dataKey && expandedRows[slotProps.data[dataKey]]
+              ? 'bottom'
+              : 'right'
+          "
           @click.stop.prevent="toggleItem(slotProps.data)"
         />
       </template>
     </Column>
     <slot />
-    <Column v-if="addSpacer" field="space_filler">
+    <Column
+      v-if="addSpacer"
+      field="space_filler"
+    >
       <template #body>
-        <span /> <!--used to fill up the empty space so that the last column does not strech endlessly -->
+        <span />
+        <!-- used to fill up the empty space so that the last column does not strech endlessly -->
       </template>
     </Column>
     <template #empty>
-      <slot v-if="!loading" name="empty" />
+      <slot
+        v-if="!loading"
+        name="empty"
+      />
     </template>
 
     <template #expansion="slotProps">
-      <slot v-if="dataKey && expandedRows[slotProps.data[dataKey]]" name="expansion" v-bind="slotProps" />
+      <slot
+        v-if="dataKey && expandedRows[slotProps.data[dataKey]]"
+        name="expansion"
+        v-bind="slotProps"
+      />
     </template>
 
     <template #loading>
-      <BcLoadingSpinner class="spinner" :loading="true" alignment="center" />
+      <BcLoadingSpinner
+        class="spinner"
+        :loading="true"
+        alignment="center"
+      />
     </template>
     <template #footer>
       <BcTablePager
@@ -153,7 +194,10 @@ const sort = computed(() => {
         <template #bc-table-footer-left>
           <slot name="bc-table-footer-left" />
         </template>
-        <template v-if="$slots['bc-table-footer-right']" #bc-table-footer-right>
+        <template
+          v-if="$slots['bc-table-footer-right']"
+          #bc-table-footer-right
+        >
           <slot name="bc-table-footer-right" />
         </template>
       </BcTablePager>
@@ -175,7 +219,7 @@ const sort = computed(() => {
     height: 140px;
     background: transparent;
 
-    >td {
+    > td {
       border: none;
     }
   }
diff --git a/frontend/components/bc/table/BcTableControl.vue b/frontend/components/bc/table/BcTableControl.vue
index 73c3a6665..a00ac408e 100644
--- a/frontend/components/bc/table/BcTableControl.vue
+++ b/frontend/components/bc/table/BcTableControl.vue
@@ -2,21 +2,19 @@
 import {
   faTable,
   faHashtag,
-  faPercent
+  faPercent,
 } from '@fortawesome/pro-solid-svg-icons'
-import {
-  faChartColumn
-} from '@fortawesome/pro-regular-svg-icons'
+import { faChartColumn } from '@fortawesome/pro-regular-svg-icons'
 
 interface Props {
-  title?: string,
-  searchPlaceholder?: string,
-  disabledFilter?: boolean,
+  title?: string
+  searchPlaceholder?: string
+  disabledFilter?: boolean
   chartDisabled?: boolean
 }
 const props = defineProps<Props>()
 
-const emit = defineEmits<{(e: 'setSearch', value?: string): void }>()
+const emit = defineEmits<{ (e: 'setSearch', value?: string): void }>()
 
 const tableIsShown = ref(true)
 
@@ -31,18 +29,38 @@ const onInput = (value: string) => {
   <slot name="bc-table-header">
     <div class="bc-table-header">
       <div class="side left">
-        <BcIconToggle v-if="$slots.chart" v-model="tableIsShown" :true-icon="faTable" :false-icon="faChartColumn" :disabled="chartDisabled" />
-        <BcIconToggle v-if="useAbsoluteValues !== null && tableIsShown" v-model="useAbsoluteValues" :true-icon="faHashtag" :false-icon="faPercent" />
+        <BcIconToggle
+          v-if="$slots.chart"
+          v-model="tableIsShown"
+          :true-icon="faTable"
+          :false-icon="faChartColumn"
+          :disabled="chartDisabled"
+        />
+        <BcIconToggle
+          v-if="useAbsoluteValues !== null && tableIsShown"
+          v-model="useAbsoluteValues"
+          :true-icon="faHashtag"
+          :false-icon="faPercent"
+        />
         <slot name="header-left" />
       </div>
 
-      <slot name="header-center" :table-is-shown="tableIsShown">
-        <div v-if="props.title" class="h1">
+      <slot
+        name="header-center"
+        :table-is-shown="tableIsShown"
+      >
+        <div
+          v-if="props.title"
+          class="h1"
+        >
           {{ props.title }}
         </div>
       </slot>
       <div class="side right">
-        <slot name="header-right" :table-is-shown="tableIsShown" />
+        <slot
+          name="header-right"
+          :table-is-shown="tableIsShown"
+        />
         <BcContentFilter
           v-if="props.searchPlaceholder && tableIsShown"
           :search-placeholder="props.searchPlaceholder"
@@ -54,8 +72,14 @@ const onInput = (value: string) => {
     </div>
   </slot>
   <slot name="bc-table-sub-header" />
-  <slot v-if="tableIsShown" name="table" />
-  <slot v-else name="chart" />
+  <slot
+    v-if="tableIsShown"
+    name="table"
+  />
+  <slot
+    v-else
+    name="chart"
+  />
 </template>
 
 <style lang="scss" scoped>
@@ -71,18 +95,18 @@ const onInput = (value: string) => {
   .side {
     flex-grow: 1;
     flex-basis: 0;
-      display: flex;
-    &+h1 {
+    display: flex;
+    & + h1 {
       width: 180px;
     }
 
-    &.left{
+    &.left {
       gap: var(--padding);
     }
 
     &.right {
       justify-content: flex-end;
-      .search{
+      .search {
         z-index: 3;
       }
     }
diff --git a/frontend/components/bc/table/BcTablePopoutEdit.vue b/frontend/components/bc/table/BcTablePopoutEdit.vue
index 362d0f2ea..54d53c6f5 100644
--- a/frontend/components/bc/table/BcTablePopoutEdit.vue
+++ b/frontend/components/bc/table/BcTablePopoutEdit.vue
@@ -1,28 +1,40 @@
 <script setup lang="ts">
-import {
-  faEdit
-} from '@fortawesome/pro-solid-svg-icons'
+import { faEdit } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-const emit = defineEmits<{(e: 'onEdit'): void }>()
+const emit = defineEmits<{ (e: 'onEdit'): void }>()
 
 interface Props {
-  label?: string,
-  noIcon?: boolean,
-  truncateText?: boolean,
+  label?: string
+  noIcon?: boolean
+  truncateText?: boolean
 }
 defineProps<Props>()
 </script>
 
 <template>
-  <div class="bc-poput-edit" :class="{ 'truncate-text': truncateText }">
+  <div
+    class="bc-poput-edit"
+    :class="{ 'truncate-text': truncateText }"
+  >
     <slot name="content">
-      <BcTooltip v-if="label" :hide="!truncateText" :fit-content="true" class="content" :text="label">
+      <BcTooltip
+        v-if="label"
+        :hide="!truncateText"
+        :fit-content="true"
+        class="content"
+        :text="label"
+      >
         {{ label }}
       </BcTooltip>
     </slot>
     <div class="icon">
-      <FontAwesomeIcon v-if="!noIcon" class="link" :icon="faEdit" @click="() => emit('onEdit')" />
+      <FontAwesomeIcon
+        v-if="!noIcon"
+        class="link"
+        :icon="faEdit"
+        @click="() => emit('onEdit')"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/components/bc/table/BcTableTag.vue b/frontend/components/bc/table/BcTableTag.vue
index 35e399aeb..899c59e68 100644
--- a/frontend/components/bc/table/BcTableTag.vue
+++ b/frontend/components/bc/table/BcTableTag.vue
@@ -6,19 +6,29 @@ import type { TagColor, TagSize } from '~/types/tag'
 interface Props {
   color?: TagColor
   size?: TagSize
-  label?: string,
+  label?: string
   tooltip?: string
-  icon?: IconDefinition,
+  icon?: IconDefinition
 }
 defineProps<Props>()
-
 </script>
+
 <template>
-  <BcTooltip v-if="label || icon" class="tag" :class="[color, size]" :text="tooltip" :fit-content="true">
+  <BcTooltip
+    v-if="label || icon"
+    class="tag"
+    :class="[color, size]"
+    :text="tooltip"
+    :fit-content="true"
+  >
     {{ label }}
-    <FontAwesomeIcon v-if="icon" :icon="icon" />
+    <FontAwesomeIcon
+      v-if="icon"
+      :icon="icon"
+    />
   </BcTooltip>
 </template>
+
 <style lang="scss" scoped>
 @use "~/assets/css/utils.scss";
 @use "~/assets/css/fonts.scss";
diff --git a/frontend/components/bc/table/BcTableValidTag.vue b/frontend/components/bc/table/BcTableValidTag.vue
index ae9ea4927..11e1ddfc3 100644
--- a/frontend/components/bc/table/BcTableValidTag.vue
+++ b/frontend/components/bc/table/BcTableValidTag.vue
@@ -8,14 +8,18 @@ const props = defineProps<Props>()
 
 const { t: $t } = useTranslation()
 
-const data = computed<{color: TagColor, label: string}>(() => {
+const data = computed<{ color: TagColor, label: string }>(() => {
   return {
     color: props.valid ? 'success' : 'failed',
-    label: props.valid ? $t('common.true') : $t('common.false')
+    label: props.valid ? $t('common.true') : $t('common.false'),
   }
 })
-
 </script>
+
 <template>
-  <BcTableTag :color="data.color" :label="data.label" size="compact" />
+  <BcTableTag
+    :color="data.color"
+    :label="data.label"
+    size="compact"
+  />
 </template>
diff --git a/frontend/components/bc/table/TablePager.vue b/frontend/components/bc/table/TablePager.vue
index 25d9bacac..2366770bf 100644
--- a/frontend/components/bc/table/TablePager.vue
+++ b/frontend/components/bc/table/TablePager.vue
@@ -10,35 +10,52 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const emit = defineEmits<{(e: 'setCursor', value: Cursor): void, (e: 'setPageSize', value: number): void }>()
+const emit = defineEmits<{
+  (e: 'setCursor', value: Cursor): void
+  (e: 'setPageSize', value: number): void
+}>()
 
 const pageSizes = [5, 10, 25, 50, 100]
 
-const currentOffset = computed<number>(() => typeof props.cursor === 'number' ? props.cursor : 0)
+const currentOffset = computed<number>(() =>
+  typeof props.cursor === 'number' ? props.cursor : 0,
+)
 
 const data = computed(() => {
   if (!props.paging) {
     return {
-      mode: 'waiting'
+      mode: 'waiting',
     }
   }
   if (props.paging.total_count === undefined) {
     return {
       mode: 'cursor',
       prev_cursor: props.paging.prev_cursor,
-      next_cursor: props.paging.next_cursor
+      next_cursor: props.paging.next_cursor,
     }
   }
-  const page = props.paging.total_count > 0 ? 1 + Math.floor(currentOffset.value / props.pageSize) : 0
+  const page
+    = props.paging.total_count > 0
+      ? 1 + Math.floor(currentOffset.value / props.pageSize)
+      : 0
   const from = props.paging.total_count > 0 ? currentOffset.value + 1 : 0
-  const to = Math.min(currentOffset.value + props.pageSize, props.paging.total_count)
+  const to = Math.min(
+    currentOffset.value + props.pageSize,
+    props.paging.total_count,
+  )
   const lastPage = Math.ceil(props.paging.total_count / props.pageSize)
 
   return { mode: 'offset', page, from, to, lastPage }
 })
 
 const next = () => {
-  emit('setCursor', Math.min(currentOffset.value + props.pageSize, ((data.value.lastPage ?? 1) - 1) * props.pageSize))
+  emit(
+    'setCursor',
+    Math.min(
+      currentOffset.value + props.pageSize,
+      ((data.value.lastPage ?? 1) - 1) * props.pageSize,
+    ),
+  )
 }
 
 const prev = () => {
@@ -65,48 +82,85 @@ const setPageSize = (size: number) => {
 }
 
 // in case the totalCount decreased
-watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match) => {
-  if (data.value.lastPage !== undefined && match) {
-    last()
-  }
-})
-
+watch(
+  () => data.value.lastPage && data.value.lastPage < data.value.page,
+  (match) => {
+    if (data.value.lastPage !== undefined && match) {
+      last()
+    }
+  },
+)
 </script>
+
 <template>
   <div class="bc-pageinator">
     <div class="pager">
       <template v-if="data.mode === 'offset'">
-        <div class="item button" :disabled="!currentOffset" @click="first">
-          {{ $t('table.first') }}
+        <div
+          class="item button"
+          :disabled="!currentOffset"
+          @click="first"
+        >
+          {{ $t("table.first") }}
         </div>
-        <div class="item button" :disabled="!currentOffset" @click="prev">
-          <IconChevron class="toggle" direction="left" />
+        <div
+          class="item button"
+          :disabled="!currentOffset"
+          @click="prev"
+        >
+          <IconChevron
+            class="toggle"
+            direction="left"
+          />
         </div>
         <div class="item current-page">
-          {{ data.page }} {{ $t('table.of') }} {{ data.lastPage }}
+          {{ data.page }} {{ $t("table.of") }} {{ data.lastPage }}
         </div>
-        <div class="item button" :disabled="data.page! >= data.lastPage!" @click="next">
-          <IconChevron class="toggle" direction="right" />
+        <div
+          class="item button"
+          :disabled="data.page! >= data.lastPage!"
+          @click="next"
+        >
+          <IconChevron
+            class="toggle"
+            direction="right"
+          />
         </div>
-        <div class="item button" :disabled="data.page! >= data.lastPage!" @click="last">
-          {{ $t('table.last') }}
+        <div
+          class="item button"
+          :disabled="data.page! >= data.lastPage!"
+          @click="last"
+        >
+          {{ $t("table.last") }}
         </div>
       </template>
       <template v-else-if="data.mode === 'cursor'">
         <div
-          class="
-          item
-          button"
+          class="item button"
           :disabled="!data.prev_cursor"
           @click="first"
         >
-          {{ $t('table.first') }}
+          {{ $t("table.first") }}
         </div>
-        <div class="item button" :disabled="!data.prev_cursor" @click="emit('setCursor', data.prev_cursor)">
-          <IconChevron class="toggle" direction="left" />
+        <div
+          class="item button"
+          :disabled="!data.prev_cursor"
+          @click="emit('setCursor', data.prev_cursor)"
+        >
+          <IconChevron
+            class="toggle"
+            direction="left"
+          />
         </div>
-        <div class="item button" :disabled="!data.next_cursor" @click="emit('setCursor', data.next_cursor)">
-          <IconChevron class="toggle" direction="right" />
+        <div
+          class="item button"
+          :disabled="!data.next_cursor"
+          @click="emit('setCursor', data.next_cursor)"
+        >
+          <IconChevron
+            class="toggle"
+            direction="right"
+          />
         </div>
       </template>
       <Dropdown
@@ -118,14 +172,26 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
       />
     </div>
     <div class="very-last">
-      <div v-if="!stepperOnly" class="left-info">
+      <div
+        v-if="!stepperOnly"
+        class="left-info"
+      >
         <slot name="bc-table-footer-left">
           <span v-if="props.paging?.total_count">
-            {{ $t('table.showing', { from: data.from, to: data.to, total: props.paging?.total_count }) }}
+            {{
+              $t("table.showing", {
+                from: data.from,
+                to: data.to,
+                total: props.paging?.total_count,
+              })
+            }}
           </span>
         </slot>
       </div>
-      <div v-if="$slots['bc-table-footer-right']" class="right-info">
+      <div
+        v-if="$slots['bc-table-footer-right']"
+        class="right-info"
+      >
         <slot name="bc-table-footer-right" />
       </div>
     </div>
@@ -133,7 +199,7 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
+@use "~/assets/css/main.scss";
 
 .bc-pageinator {
   position: relative;
diff --git a/frontend/components/bc/toggle/MultiBar.vue b/frontend/components/bc/toggle/MultiBar.vue
index d2ae3722b..dd3b5f5af 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -1,9 +1,10 @@
+<!-- eslint-disable vue/max-len -- TODO:   plz fix this -->
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { type MultiBarItem } from '~/types/multiBar'
 
 interface Props {
-  readonlyMode?: boolean,
+  readonlyMode?: boolean
   buttons: MultiBarItem[]
 }
 
@@ -12,9 +13,13 @@ const props = defineProps<Props>()
 type ButtonStates = Record<string, boolean>
 
 const selection = defineModel<string[]>({ required: true })
-const buttonStates = useObjectRefBridge<string[], ButtonStates>(selection, receiveFromVModel, sendToVModel)
+const buttonStates = useObjectRefBridge<string[], ButtonStates>(
+  selection,
+  receiveFromVModel,
+  sendToVModel,
+)
 
-function receiveFromVModel (data: string[]) : ButtonStates {
+function receiveFromVModel(data: string[]): ButtonStates {
   const states = props.buttons.reduce((map, { value }) => {
     map[value] = data.includes(value)
     return map
@@ -22,7 +27,7 @@ function receiveFromVModel (data: string[]) : ButtonStates {
   return states
 }
 
-function sendToVModel (data: ButtonStates) : string[] {
+function sendToVModel(data: ButtonStates): string[] {
   const selection: string[] = []
   Object.entries(data).forEach(([key, value]) => {
     if (value) {
@@ -32,14 +37,23 @@ function sendToVModel (data: ButtonStates) : string[] {
   return selection
 }
 
-// this line is independent of the bridge above (that addresses the on/off states), this line updates the component if the list of buttons comes late
-watch(() => props.buttons, () => { buttonStates.value = receiveFromVModel(selection.value) })
+// this line is independent of the bridge above (that addresses the on/off states), this line updates the component
+// if the list of buttons comes late
+watch(
+  () => props.buttons,
+  () => {
+    buttonStates.value = receiveFromVModel(selection.value)
+  },
+)
 
-const readonlyClass = computed(() => props.readonlyMode ? 'read-only' : '')
+const readonlyClass = computed(() => (props.readonlyMode ? 'read-only' : ''))
 </script>
 
 <template>
-  <div class="bc-togglebar" :class="readonlyClass">
+  <div
+    class="bc-togglebar"
+    :class="readonlyClass"
+  >
     <BcToggleMultiBarButton
       v-for="button in props.buttons"
       :key="button.value"
@@ -52,8 +66,16 @@ const readonlyClass = computed(() => props.readonlyMode ? 'read-only' : '')
     >
       <template #icon>
         <slot :name="button.value">
-          <component :is="button.component" v-if="button.component" v-bind="button.componentProps" :class="button.componentClass" />
-          <FontAwesomeIcon v-else-if="button.icon" :icon="button.icon" />
+          <component
+            :is="button.component"
+            v-if="button.component"
+            v-bind="button.componentProps"
+            :class="button.componentClass"
+          />
+          <FontAwesomeIcon
+            v-else-if="button.icon"
+            :icon="button.icon"
+          />
         </slot>
       </template>
     </BcToggleMultiBarButton>
diff --git a/frontend/components/bc/toggle/MultiBarButton.vue b/frontend/components/bc/toggle/MultiBarButton.vue
index 68e9e68b1..398c1e0c4 100644
--- a/frontend/components/bc/toggle/MultiBarButton.vue
+++ b/frontend/components/bc/toggle/MultiBarButton.vue
@@ -4,10 +4,10 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import BcTooltip from '../BcTooltip.vue'
 
 interface Props {
-  icon?: IconDefinition,
-  falseIcon?: IconDefinition,
-  disabled?:boolean,
-  tooltip?: string,
+  icon?: IconDefinition
+  falseIcon?: IconDefinition
+  disabled?: boolean
+  tooltip?: string
   readonlyClass?: string
 }
 
@@ -21,14 +21,29 @@ const icon = computed(() => {
 </script>
 
 <template>
-  <BcTooltip :dont-open-permanently="true" :hover-delay="350">
+  <BcTooltip
+    :dont-open-permanently="true"
+    :hover-delay="350"
+  >
     <template #tooltip>
-      <div class="button-tooltip" :class="readonlyClass">
-        <div v-if="tooltip" class="individual">
+      <div
+        class="button-tooltip"
+        :class="readonlyClass"
+      >
+        <div
+          v-if="tooltip"
+          class="individual"
+        >
           {{ tooltip }}
         </div>
         <div v-if="readonlyClass !== 'read-only'">
-          {{ disabled ? $t('common.unavailable') : (selected ? $t('filter.enabled'): $t('filter.disabled')) }}
+          {{
+            disabled
+              ? $t("common.unavailable")
+              : selected
+                ? $t("filter.enabled")
+                : $t("filter.disabled")
+          }}
         </div>
       </div>
     </template>
@@ -41,8 +56,14 @@ const icon = computed(() => {
       :disabled="disabled || readonlyClass === 'read-only'"
     >
       <template #icon="slotProps">
-        <slot name="icon" v-bind="slotProps">
-          <FontAwesomeIcon v-if="icon" :icon="icon" />
+        <slot
+          name="icon"
+          v-bind="slotProps"
+        >
+          <FontAwesomeIcon
+            v-if="icon"
+            :icon="icon"
+          />
         </slot>
       </template>
     </ToggleButton>
diff --git a/frontend/components/bc/toggle/SingleBar.vue b/frontend/components/bc/toggle/SingleBar.vue
index 32a426d6d..5e0ddbf6a 100644
--- a/frontend/components/bc/toggle/SingleBar.vue
+++ b/frontend/components/bc/toggle/SingleBar.vue
@@ -1,39 +1,47 @@
 <script setup lang="ts">
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import type { Component } from 'vue'
+
 interface Props {
   layout: 'minimal' | 'gaudy'
   buttons: {
-    className?: string,
-    icon?: IconDefinition,
-    text?: string,
-    subText?: string,
-    component?: Component,
-    componentProps?: any,
-    componentClass?: string,
-    value: string,
-    tooltip?: string,
-    disabled?: boolean,
-  }[],
-  allowDeselect?: boolean // if true, clicking the selected button will deselect it causing the whole SingleBar not to have a value
+    className?: string
+    icon?: IconDefinition
+    text?: string
+    subText?: string
+    component?: Component
+    componentProps?: any
+    componentClass?: string
+    value: string
+    tooltip?: string
+    disabled?: boolean
+  }[]
+  // if true, clicking the selected button will deselect it causing the whole SingleBar not to have a value
+  allowDeselect?: boolean
 }
 const props = defineProps<Props>()
 
 const selected = defineModel<string>()
 
-const values = ref<Record<string, boolean>>(props.buttons.reduce((map, { value }) => {
-  map[value] = value === selected.value
-  return map
-}, {} as Record<string, boolean>))
+const values = ref<Record<string, boolean>>(
+  props.buttons.reduce(
+    (map, { value }) => {
+      map[value] = value === selected.value
+      return map
+    },
+    {} as Record<string, boolean>,
+  ),
+)
 
-function onButtonClicked (value: string) {
+function onButtonClicked(value: string) {
   for (const key in values.value) {
     if (key === value) {
       if (values.value[key] && !props.allowDeselect) {
         continue
       }
       values.value[key] = !values.value[key]
-    } else {
+    }
+    else {
       values.value[key] = false
     }
   }
@@ -42,7 +50,10 @@ function onButtonClicked (value: string) {
 </script>
 
 <template>
-  <div class="bc-togglebar" :class="layout">
+  <div
+    class="bc-togglebar"
+    :class="layout"
+  >
     <BcToggleSingleBarButton
       v-for="button in props.buttons"
       :key="button.value"
@@ -58,7 +69,11 @@ function onButtonClicked (value: string) {
     >
       <template #icon>
         <slot :name="button.value">
-          <component :is="button.component" v-bind="button.componentProps" :class="button.componentClass" />
+          <component
+            :is="button.component"
+            v-bind="button.componentProps"
+            :class="button.componentClass"
+          />
         </slot>
       </template>
     </BcToggleSingleBarButton>
diff --git a/frontend/components/bc/toggle/SingleBarButton.vue b/frontend/components/bc/toggle/SingleBarButton.vue
index e83892a4e..a93af379c 100644
--- a/frontend/components/bc/toggle/SingleBarButton.vue
+++ b/frontend/components/bc/toggle/SingleBarButton.vue
@@ -5,36 +5,68 @@ import BcTooltip from '../BcTooltip.vue'
 
 interface Props {
   layout: 'minimal' | 'gaudy'
-  icon?: IconDefinition,
-  text?: string,
-  subText?: string,
-  selected: boolean,
-  disabled?:boolean,
-  tooltip?: string,
+  icon?: IconDefinition
+  text?: string
+  subText?: string
+  selected: boolean
+  disabled?: boolean
+  tooltip?: string
 }
 const props = defineProps<Props>()
 
-const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
+const topBottomPadding = computed(() => (props.subText ? '8px' : '16px'))
 </script>
 
 <template>
-  <BcTooltip :dont-open-permanently="true" :hover-delay="350" :hide="!tooltip">
+  <BcTooltip
+    :dont-open-permanently="true"
+    :hover-delay="350"
+    :hide="!tooltip"
+  >
     <template #tooltip>
       <div class="button-tooltip">
-        <div v-if="tooltip" class="individual">
+        <div
+          v-if="tooltip"
+          class="individual"
+        >
           {{ tooltip }}
         </div>
-        <div>{{ disabled ? $t('common.unavailable') : (selected ? $t('common.selected') : $t('common.deselected')) }}</div>
+        <div>
+          {{
+            disabled
+              ? $t("common.unavailable")
+              : selected
+                ? $t("common.selected")
+                : $t("common.deselected")
+          }}
+        </div>
       </div>
     </template>
-    <ToggleButton class="bc-toggle" :class="layout" :disabled="disabled" :model-value="selected">
+    <ToggleButton
+      class="bc-toggle"
+      :class="layout"
+      :disabled="disabled"
+      :model-value="selected"
+    >
       <template #icon="slotProps">
-        <slot name="icon" v-bind="slotProps">
-          <FontAwesomeIcon v-if="icon" :icon="icon" />
+        <slot
+          name="icon"
+          v-bind="slotProps"
+        >
+          <FontAwesomeIcon
+            v-if="icon"
+            :icon="icon"
+          />
         </slot>
-        <div v-if="text" class="label">
+        <div
+          v-if="text"
+          class="label"
+        >
           {{ text }}
-          <div v-if="subText" class="sub">
+          <div
+            v-if="subText"
+            class="sub"
+          >
             {{ subText }}
           </div>
         </div>
@@ -44,12 +76,12 @@ const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/fonts.scss";
 
 .button-tooltip {
   width: max-content;
   text-align: left;
-  .individual{
+  .individual {
     margin-bottom: var(--padding);
   }
 }
@@ -93,7 +125,7 @@ const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
       :deep(svg) {
         max-width: 36px;
       }
-      &.p-disabled{
+      &.p-disabled {
         opacity: 0.5;
         cursor: default;
       }
diff --git a/frontend/components/block/table/BlockTableRewardItem.vue b/frontend/components/block/table/BlockTableRewardItem.vue
index 166f7cda8..976c84930 100644
--- a/frontend/components/block/table/BlockTableRewardItem.vue
+++ b/frontend/components/block/table/BlockTableRewardItem.vue
@@ -2,35 +2,54 @@
 import type { ClElValue } from '~/types/api/common'
 
 interface Props {
-  reward?: ClElValue<string>,
+  reward?: ClElValue<string>
   status?: 'success' | 'missed' | 'orphaned' | 'scheduled'
 }
 defineProps<Props>()
-
 </script>
+
 <template>
-  <BcTooltip v-if="status === 'success' && reward" class="combine-rewards">
-    <BcFormatValue :value="reward?.el" :no-tooltip="true" />
-    <BcFormatValue v-if="reward?.cl && reward.cl != '0'" :value="reward?.cl" :no-tooltip="true" />
-    <span v-else>{{ $t('dashboard.validator.blocks.cl_pending') }}</span>
+  <BcTooltip
+    v-if="status === 'success' && reward"
+    class="combine-rewards"
+  >
+    <BcFormatValue
+      :value="reward?.el"
+      :no-tooltip="true"
+    />
+    <BcFormatValue
+      v-if="reward?.cl && reward.cl != '0'"
+      :value="reward?.cl"
+      :no-tooltip="true"
+    />
+    <span v-else>{{ $t("dashboard.validator.blocks.cl_pending") }}</span>
     <template #tooltip>
       <div>
         <div class="tt-row">
-          <span>{{ $t('dashboard.validator.blocks.el_rewards') }}: </span>
-          <BcFormatValue :value="reward?.el" :no-tooltip="true" :full-value="true" />
+          <span>{{ $t("dashboard.validator.blocks.el_rewards") }}: </span>
+          <BcFormatValue
+            :value="reward?.el"
+            :no-tooltip="true"
+            :full-value="true"
+          />
         </div>
         <div class="tt-row">
-          <span>{{ $t('dashboard.validator.blocks.cl_rewards') }}: </span>
-          <BcFormatValue v-if="reward?.cl && reward.cl != '0'" :value="reward?.cl" :no-tooltip="true" :full-value="true" />
-          <span v-else>{{ $t('dashboard.validator.blocks.pending') }}</span>
+          <span>{{ $t("dashboard.validator.blocks.cl_rewards") }}: </span>
+          <BcFormatValue
+            v-if="reward?.cl && reward.cl != '0'"
+            :value="reward?.cl"
+            :no-tooltip="true"
+            :full-value="true"
+          />
+          <span v-else>{{ $t("dashboard.validator.blocks.pending") }}</span>
         </div>
       </div>
     </template>
   </BcTooltip>
   <span v-else>-</span>
 </template>
-<style lang="scss" scoped>
 
+<style lang="scss" scoped>
 .tt-row {
   display: flex;
   flex-wrap: nowrap;
@@ -42,7 +61,8 @@ defineProps<Props>()
   display: inline-flex;
   flex-direction: column;
 
-  >div:last-child, >span:last-child {
+  > div:last-child,
+  > span:last-child {
     font-size: var(--small_text_font_size);
     color: var(--text-color-discreet);
   }
diff --git a/frontend/components/block/table/BlockTableStatus.vue b/frontend/components/block/table/BlockTableStatus.vue
index 46c3736e4..c00e3c659 100644
--- a/frontend/components/block/table/BlockTableStatus.vue
+++ b/frontend/components/block/table/BlockTableStatus.vue
@@ -3,8 +3,8 @@ import { type BlockStatus } from '~/types/block'
 import type { TagSize, TagColor } from '~/types/tag'
 
 interface Props {
-  status?: BlockStatus,
-  blockSlot?: number,
+  status?: BlockStatus
+  blockSlot?: number
   mobile?: boolean
 }
 const props = defineProps<Props>()
@@ -22,10 +22,20 @@ const mapped = computed(() => {
   }
   const size: TagSize = props.mobile ? 'circle' : 'default'
   let color: TagColor
-  const status = props.status === 'scheduled' && (props.blockSlot && (props.blockSlot < currentSlot)) ? 'probably_missed' : props.status
+  const status
+    = props.status === 'scheduled'
+    && props.blockSlot
+    && props.blockSlot < currentSlot
+      ? 'probably_missed'
+      : props.status
   const tStatus = $t(`block.status.${status}`)
   const label = props.mobile ? tStatus.substring(0, 1) : tStatus
-  const tooltip = status === 'probably_missed' ? $t('block.status_might_change_on_reorg') : props.mobile ? tStatus : undefined
+  const tooltip
+    = status === 'probably_missed'
+      ? $t('block.status_might_change_on_reorg')
+      : props.mobile
+        ? tStatus
+        : undefined
   switch (status) {
     case 'probably_missed':
       color = 'partial'
@@ -49,11 +59,14 @@ const mapped = computed(() => {
     size,
     color,
     label,
-    tooltip
+    tooltip,
   }
 })
-
 </script>
+
 <template>
-  <BcTableTag v-if="mapped" v-bind="mapped" />
+  <BcTableTag
+    v-if="mapped"
+    v-bind="mapped"
+  />
 </template>
diff --git a/frontend/components/dashboard/DashboardControls.vue b/frontend/components/dashboard/DashboardControls.vue
index c8e22f863..780803322 100644
--- a/frontend/components/dashboard/DashboardControls.vue
+++ b/frontend/components/dashboard/DashboardControls.vue
@@ -6,27 +6,42 @@ import {
   faPeopleGroup,
   faShare,
   faUsers,
-  faTrash
+  faTrash,
 } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import type { DynamicDialogCloseOptions } from 'primevue/dynamicdialogoptions'
-import { BcDialogConfirm, DashboardShareModal, DashboardShareCodeModal, DashboardRenameModal, RocketpoolToggle } from '#components'
+import {
+  BcDialogConfirm,
+  DashboardShareModal,
+  DashboardShareCodeModal,
+  DashboardRenameModal,
+  RocketpoolToggle,
+} from '#components'
 import type { DashboardKey, Dashboard } from '~/types/dashboard'
 import type { MenuBarButton, MenuBarEntry } from '~/types/menuBar'
 import { API_PATH } from '~/types/customFetch'
 
 interface Props {
-  dashboardTitle?: string,
+  dashboardTitle?: string
 }
 const props = defineProps<Props>()
 
 const route = useRoute()
 const isValidatorDashboard = route.name === 'dashboard-id'
 const { isLoggedIn } = useUserStore()
-const { dashboardKey, isPublic, isPrivate, isShared, setDashboardKey, dashboardType, publicEntities } = useDashboardKey()
+const {
+  dashboardKey,
+  isPublic,
+  isPrivate,
+  isShared,
+  setDashboardKey,
+  dashboardType,
+  publicEntities,
+} = useDashboardKey()
 const { refreshOverview } = useValidatorDashboardOverviewStore()
-const { refreshDashboards, dashboards, getDashboardLabel, updateHash } = useUserDashboardStore()
+const { refreshDashboards, dashboards, getDashboardLabel, updateHash }
+  = useUserDashboardStore()
 
 const { t: $t } = useTranslation()
 const { width } = useWindowSize()
@@ -48,19 +63,21 @@ const manageButtons = computed<MenuBarEntry[] | undefined>(() => {
     dropdown: false,
     faIcon: isMobile.value ? faPeopleGroup : undefined,
     label: $t('dashboard.validator.manage_groups'),
-    command: () => { manageGroupsModalVisisble.value = true }
+    command: () => {
+      manageGroupsModalVisisble.value = true
+    },
   })
 
   if (dashboardType.value === 'validator') {
-    buttons.push(
-      {
-        dropdown: false,
-        faIcon: isMobile.value ? faDesktop : undefined,
-        highlight: !isMobile.value,
-        label: $t('dashboard.validator.manage_validators'),
-        command: () => { manageValidatorsModalVisisble.value = true }
-      }
-    )
+    buttons.push({
+      dropdown: false,
+      faIcon: isMobile.value ? faDesktop : undefined,
+      highlight: !isMobile.value,
+      label: $t('dashboard.validator.manage_validators'),
+      command: () => {
+        manageValidatorsModalVisisble.value = true
+      },
+    })
   }
 
   if (isMobile.value && buttons.length > 1) {
@@ -69,8 +86,8 @@ const manageButtons = computed<MenuBarEntry[] | undefined>(() => {
         label: $t('dashboard.header.manage'),
         dropdown: true,
         highlight: true,
-        items: buttons
-      }
+        items: buttons,
+      },
     ]
   }
 
@@ -79,14 +96,21 @@ const manageButtons = computed<MenuBarEntry[] | undefined>(() => {
 
 const shareDashboard = computed(() => {
   return dashboards.value?.validator_dashboards?.find((d) => {
-    return d.id === parseInt(dashboardKey.value) || d.public_ids?.find(p => p.public_id === dashboardKey.value)
+    return (
+      d.id === parseInt(dashboardKey.value)
+      || d.public_ids?.find(p => p.public_id === dashboardKey.value)
+    )
   })
 })
 
 const shareButtonOptions = computed(() => {
   const edit = isPrivate.value && !shareDashboard.value?.public_ids?.length
 
-  const label = isMobile.value ? '' : !edit ? $t('dashboard.shared') : $t('dashboard.share')
+  const label = isMobile.value
+    ? ''
+    : !edit
+        ? $t('dashboard.shared')
+        : $t('dashboard.share')
   const icon = !edit ? faUsers : faShare
   const disabled = isShared.value || !dashboardKey.value
   return { label, icon, edit, disabled }
@@ -96,30 +120,32 @@ const editButtons = computed<MenuBarEntry[]>(() => {
   const buttons: MenuBarButton[] = []
 
   buttons.push({
-    component: RocketpoolToggle
+    component: RocketpoolToggle,
   })
 
-  if( isPrivate.value ){
+  if (isPrivate.value) {
     buttons.push({
       faIcon: faEdit,
       label: $t('dashboard.rename_dashboard'),
-      command: editDashboard
-    })    
+      command: editDashboard,
+    })
   }
 
-  if(!shareButtonOptions.value.disabled) {
+  if (!shareButtonOptions.value.disabled) {
     buttons.push({
       faIcon: shareButtonOptions.value.icon,
-      label: shareButtonOptions.value.edit ? $t('dashboard.share_dashboard') : $t('dashboard.shared_dashboard'),
-      command: share
+      label: shareButtonOptions.value.edit
+        ? $t('dashboard.share_dashboard')
+        : $t('dashboard.shared_dashboard'),
+      command: share,
     })
   }
 
-  if(!isShared.value && dashboardKey.value) {
+  if (!isShared.value && dashboardKey.value) {
     buttons.push({
       faIcon: faTrash,
       label: $t('dashboard.delete_dashboard'),
-      command: onDelete
+      command: onDelete,
     })
   }
 
@@ -127,8 +153,8 @@ const editButtons = computed<MenuBarEntry[]>(() => {
     {
       faIcon: faGear,
       dropdown: true,
-      items: buttons
-    }
+      items: buttons,
+    },
   ]
 })
 
@@ -141,21 +167,28 @@ const shareView = () => {
         if (isShared.value && dashboardId) {
           setDashboardKey(`${dashboardId}`)
         }
-      } else if (options?.data) {
+      }
+      else if (options?.data) {
         shareEdit()
       }
-    }
+    },
   })
 }
 
 const shareEdit = () => {
-  dialog.open(DashboardShareModal, { data: { dashboard: shareDashboard.value }, onClose: (options?: DynamicDialogCloseOptions) => { options?.data && shareView() } })
+  dialog.open(DashboardShareModal, {
+    data: { dashboard: shareDashboard.value },
+    onClose: (options?: DynamicDialogCloseOptions) => {
+      options?.data && shareView()
+    },
+  })
 }
 
 const share = () => {
   if (shareButtonOptions.value.edit) {
     shareEdit()
-  } else {
+  }
+  else {
     shareView()
   }
 }
@@ -169,8 +202,13 @@ const deleteButtonOptions = computed(() => {
   const deleteDashboard = isPrivate.value
 
   // we can only forward if there is something to forward to after a potential deletion
-  const privateDashboardsCount = isLoggedIn.value ? ((dashboards.value?.validator_dashboards?.length ?? 0) + (dashboards.value?.account_dashboards?.length ?? 0)) : 0
-  const forward = deleteDashboard ? (privateDashboardsCount > 1) : (privateDashboardsCount > 0)
+  const privateDashboardsCount = isLoggedIn.value
+    ? (dashboards.value?.validator_dashboards?.length ?? 0)
+    + (dashboards.value?.account_dashboards?.length ?? 0)
+    : 0
+  const forward = deleteDashboard
+    ? privateDashboardsCount > 1
+    : privateDashboardsCount > 0
 
   return { visible, disabled, deleteDashboard, forward }
 })
@@ -178,29 +216,58 @@ const deleteButtonOptions = computed(() => {
 const onDelete = () => {
   const isDelete = deleteButtonOptions.value.deleteDashboard
   const dialogData = {
-    title: $t(isDelete ? 'dashboard.deletion.delete.title' : 'dashboard.deletion.clear.title'),
-    question: $t(isDelete ? 'dashboard.deletion.delete.text' : 'dashboard.deletion.clear.text', { dashboard: getDashboardLabel(dashboardKey.value, dashboardType.value) }),
+    title: $t(
+      isDelete
+        ? 'dashboard.deletion.delete.title'
+        : 'dashboard.deletion.clear.title',
+    ),
+    question: $t(
+      isDelete
+        ? 'dashboard.deletion.delete.text'
+        : 'dashboard.deletion.clear.text',
+      { dashboard: getDashboardLabel(dashboardKey.value, dashboardType.value) },
+    ),
     noLabel: isDelete ? $t('dashboard.deletion.delete.no_label') : undefined,
     yesLabel: isDelete ? $t('dashboard.deletion.delete.yes_label') : undefined,
-    severity: isDelete ? 'danger' : undefined
+    severity: isDelete ? 'danger' : undefined,
   }
 
   dialog.open(BcDialogConfirm, {
     data: dialogData,
-    onClose: response => response?.data && deleteAction(dashboardKey.value, deleteButtonOptions.value.deleteDashboard, deleteButtonOptions.value.forward)
+    onClose: response =>
+      response?.data
+      && deleteAction(
+        dashboardKey.value,
+        deleteButtonOptions.value.deleteDashboard,
+        deleteButtonOptions.value.forward,
+      ),
   })
 }
 
-const deleteAction = async (key: DashboardKey, deleteDashboard: boolean, forward: boolean) => {
+const deleteAction = async (
+  key: DashboardKey,
+  deleteDashboard: boolean,
+  forward: boolean,
+) => {
   if (deleteDashboard) {
     if (dashboardType.value === 'validator') {
-      await fetch(API_PATH.DASHBOARD_DELETE_VALIDATOR, { body: { key } }, { dashboardKey: key })
-    } else {
-      await fetch(API_PATH.DASHBOARD_DELETE_ACCOUNT, { body: { key } }, { dashboardKey: key })
+      await fetch(
+        API_PATH.DASHBOARD_DELETE_VALIDATOR,
+        { body: { key } },
+        { dashboardKey: key },
+      )
+    }
+    else {
+      await fetch(
+        API_PATH.DASHBOARD_DELETE_ACCOUNT,
+        { body: { key } },
+        { dashboardKey: key },
+      )
     }
 
     await refreshDashboards()
-  } else if (!isLoggedIn.value) {
+  }
+  else if (!isLoggedIn.value) {
     // simply clear the public dashboard by emptying the hash
     updateHash(dashboardType.value, '')
     setDashboardKey('')
@@ -209,8 +276,10 @@ const deleteAction = async (key: DashboardKey, deleteDashboard: boolean, forward
 
   if (forward) {
     // try to forward the user to a private dashboard
-    let preferedDashboards: Dashboard[] = dashboards.value?.validator_dashboards ?? []
-    let fallbackDashboards: Dashboard[] = dashboards.value?.account_dashboards ?? []
+    let preferedDashboards: Dashboard[]
+      = dashboards.value?.validator_dashboards ?? []
+    let fallbackDashboards: Dashboard[]
+      = dashboards.value?.account_dashboards ?? []
     let fallbackUrl = '/account-dashboard/'
     if (dashboardType.value === 'account') {
       preferedDashboards = dashboards.value?.account_dashboards ?? []
@@ -234,11 +303,19 @@ const deleteAction = async (key: DashboardKey, deleteDashboard: boolean, forward
 }
 
 const title = computed(() => {
-  return props?.dashboardTitle || getDashboardLabel(dashboardKey.value, isValidatorDashboard ? 'validator' : 'account')
+  return (
+    props?.dashboardTitle
+    || getDashboardLabel(
+      dashboardKey.value,
+      isValidatorDashboard ? 'validator' : 'account',
+    )
+  )
 })
 
 const editDashboard = () => {
-  const list = isValidatorDashboard ? dashboards.value?.validator_dashboards : dashboards.value?.account_dashboards
+  const list = isValidatorDashboard
+    ? dashboards.value?.validator_dashboards
+    : dashboards.value?.account_dashboards
   const dashboard = list?.find(d => `${d.id}` === dashboardKey.value)
   if (!dashboard) {
     return
@@ -246,21 +323,24 @@ const editDashboard = () => {
   dialog.open(DashboardRenameModal, {
     data: {
       dashboard,
-      dashboardType: dashboardType.value
+      dashboardType: dashboardType.value,
     },
     onClose: (value?: DynamicDialogCloseOptions | undefined) => {
       if (value?.data === true) {
         refreshDashboards()
         refreshOverview(dashboardKey.value)
       }
-    }
+    },
   })
 }
 </script>
 
 <template>
   <DashboardGroupManagementModal v-model="manageGroupsModalVisisble" />
-  <DashboardValidatorManagementModal v-if="dashboardType == 'validator'" v-model="manageValidatorsModalVisisble" />
+  <DashboardValidatorManagementModal
+    v-if="dashboardType == 'validator'"
+    v-model="manageValidatorsModalVisisble"
+  />
   <div class="header-row">
     <div class="h1 dashboard-title">
       {{ title }}
@@ -276,15 +356,21 @@ const editDashboard = () => {
         {{ shareButtonOptions.label }}
         <FontAwesomeIcon :icon="shareButtonOptions.icon" />
       </Button>
-      <BcMenuBar :buttons="editButtons" :align-right="isMobile" />
+      <BcMenuBar
+        :buttons="editButtons"
+        :align-right="isMobile"
+      />
     </div>
-    <BcMenuBar :buttons="manageButtons" :align-right="true" />
+    <BcMenuBar
+      :buttons="manageButtons"
+      :align-right="true"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/utils.scss';
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/utils.scss";
+@use "~/assets/css/fonts.scss";
 
 .header-row {
   height: 30px;
diff --git a/frontend/components/dashboard/DashboardHeader.vue b/frontend/components/dashboard/DashboardHeader.vue
index 377802bb1..c2d4ba477 100644
--- a/frontend/components/dashboard/DashboardHeader.vue
+++ b/frontend/components/dashboard/DashboardHeader.vue
@@ -13,13 +13,16 @@ const { isLoggedIn } = useUserStore()
 const { dashboards } = useUserDashboardStore()
 const { dashboardKey, dashboardType, setDashboardKey, isShared } = useDashboardKey()
 
-const emit = defineEmits<{(e: 'showCreation'): void }>()
+const emit = defineEmits<{ (e: 'showCreation'): void }>()
 
 const getDashboardName = (db: Dashboard): string => {
   if (isLoggedIn.value) {
     return db.name || `${$t('dashboard.title')} ${db.id}` // Just to be sure, we should not have dashboards without a name in prod
-  } else {
-    return db.id === COOKIE_DASHBOARD_ID.ACCOUNT ? $t('dashboard.account_dashboard') : $t('dashboard.validator_dashboard')
+  }
+  else {
+    return db.id === COOKIE_DASHBOARD_ID.ACCOUNT
+      ? $t('dashboard.account_dashboard')
+      : $t('dashboard.validator_dashboard')
   }
 }
 
@@ -45,13 +48,22 @@ const items = computed<MenuBarEntry[]>(() => {
         disabledTooltip: !hasMoreItems ? items[0].disabledTooltip : undefined,
         route: !hasMoreItems ? items[0].route : undefined,
         command: !hasMoreItems ? items[0].command : undefined,
-        items: hasMoreItems ? items : undefined
+        items: hasMoreItems ? items : undefined,
       })
     }
   }
-  const createMenuBarButton = (type: DashboardType, label: string, id: DashboardKey): MenuBarButton => {
+  const createMenuBarButton = (
+    type: DashboardType,
+    label: string,
+    id: DashboardKey,
+  ): MenuBarButton => {
     if (type === dashboardType.value) {
-      return { label, command: () => setDashboardKey(id), active: id === dashboardKey.value, route: `/dashboard/${id}` }
+      return {
+        label,
+        command: () => setDashboardKey(id),
+        active: id === dashboardKey.value,
+        route: `/dashboard/${id}`,
+      }
     }
 
     if (type === 'validator') {
@@ -77,14 +89,21 @@ const items = computed<MenuBarEntry[]>(() => {
 
 <template>
   <div class="header-container">
-    <BcMenuBar class="menu-bar" :buttons="items" />
+    <BcMenuBar
+      class="menu-bar"
+      :buttons="items"
+    />
     <Button
-      v-if="!isShared" 
-      data-secondary 
-      class="p-button-icon-only" 
+      v-if="!isShared"
+      data-secondary
+      class="p-button-icon-only"
       @click="emit('showCreation')"
     >
-      <IconPlus title="Add new dashboard" width="100%" height="100%" />
+      <IconPlus
+        title="Add new dashboard"
+        width="100%"
+        height="100%"
+      />
     </Button>
   </div>
 </template>
diff --git a/frontend/components/dashboard/DashboardRenameModal.vue b/frontend/components/dashboard/DashboardRenameModal.vue
index af3a3cdf7..6b8c07e86 100644
--- a/frontend/components/dashboard/DashboardRenameModal.vue
+++ b/frontend/components/dashboard/DashboardRenameModal.vue
@@ -10,10 +10,10 @@ const name = defineModel<string>('name', { default: '' })
 const isLoading = ref(false)
 
 interface Props {
-  dashboard: ValidatorDashboard,
+  dashboard: ValidatorDashboard
   dashboardType: DashboardType
 }
-const { props, setHeader, dialogRef } = useBcDialog<Props>({pt:{header:{ class: 'dashboard-rename-modal-header'}}})
+const { props, setHeader, dialogRef } = useBcDialog<Props>({ pt: { header: { class: 'dashboard-rename-modal-header' } } })
 
 watch(props, (p) => {
   let title = $t('dashboard.rename.title')
@@ -25,7 +25,11 @@ watch(props, (p) => {
 }, { immediate: true })
 
 const renameDisabled = computed(() => {
-  return !name.value?.length || isLoading.value || !REGEXP_VALID_NAME.test(name.value)
+  return (
+    !name.value?.length
+    || isLoading.value
+    || !REGEXP_VALID_NAME.test(name.value)
+  )
 })
 
 const rename = async () => {
@@ -36,22 +40,37 @@ const rename = async () => {
   }
 
   isLoading.value = true
-  const path = props.value?.dashboardType === 'validator' ? API_PATH.DASHBOARD_RENAME_VALIDATOR : API_PATH.DASHBOARD_RENAME_ACCOUNT
-  await fetch(path, { body: { name: name.value } }, { dashboardKey: `${props.value?.dashboard.id}` })
+  const path
+    = props.value?.dashboardType === 'validator'
+      ? API_PATH.DASHBOARD_RENAME_VALIDATOR
+      : API_PATH.DASHBOARD_RENAME_ACCOUNT
+  await fetch(
+    path,
+    { body: { name: name.value } },
+    { dashboardKey: `${props.value?.dashboard.id}` },
+  )
 
   isLoading.value = false
 
   dialogRef?.value.close(true)
 }
-
 </script>
 
 <template>
   <div class="dashboard_rename_modal_container">
-    <InputText v-model="name" :placeholder="$t('dashboard.creation.type.placeholder')" :maxlength="50" class="input-field" @keypress.enter="rename" />
+    <InputText
+      v-model="name"
+      :placeholder="$t('dashboard.creation.type.placeholder')"
+      :maxlength="50"
+      class="input-field"
+      @keypress.enter="rename"
+    />
     <div class="footer">
-      <Button :disabled="renameDisabled" @click="rename">
-        {{ $t('navigation.save') }}
+      <Button
+        :disabled="renameDisabled"
+        @click="rename"
+      >
+        {{ $t("navigation.save") }}
       </Button>
     </div>
   </div>
@@ -75,7 +94,7 @@ const rename = async () => {
     width: unset;
   }
 
-  .input-field{
+  .input-field {
     width: 100%;
   }
 
diff --git a/frontend/components/dashboard/DashboardShareCodeModal.vue b/frontend/components/dashboard/DashboardShareCodeModal.vue
index d60826157..466742695 100644
--- a/frontend/components/dashboard/DashboardShareCodeModal.vue
+++ b/frontend/components/dashboard/DashboardShareCodeModal.vue
@@ -5,8 +5,9 @@ import { API_PATH } from '~/types/customFetch'
 import { isSharedKey } from '~/utils/dashboard/key'
 
 interface Props {
-  dashboardKey: string;
-  dashboard?: ValidatorDashboard; // Currently only validator dashboards are supported. For public dashboards this will be undefined
+  dashboardKey: string
+  // Currently only validator dashboards are supported. For public dashboards this will be undefined
+  dashboard?: ValidatorDashboard
 }
 const { props, dialogRef } = useBcDialog<Props>()
 const { t: $t } = useTranslation()
@@ -20,12 +21,19 @@ const isUpdating = ref(false)
 
 const isReadonly = computed(() => !props.value?.dashboard)
 
-const sharedKey = computed(() => props.value?.dashboard ? props.value.dashboard.public_ids?.[0]?.public_id : props.value?.dashboardKey)
+const sharedKey = computed(() =>
+  props.value?.dashboard
+    ? props.value.dashboard.public_ids?.[0]?.public_id
+    : props.value?.dashboardKey,
+)
 
 const isShared = computed(() => isSharedKey(sharedKey.value))
 
 const path = computed(() => {
-  const newRoute = router.resolve({ name: 'dashboard-id', params: { id: sharedKey.value } })
+  const newRoute = router.resolve({
+    name: 'dashboard-id',
+    params: { id: sharedKey.value },
+  })
   return url.origin + newRoute.fullPath
 })
 
@@ -47,29 +55,63 @@ const unpublish = async () => {
   }
   isUpdating.value = true
   const publicId = `${props.value?.dashboard?.public_ids?.[0]?.public_id}`
-  await fetch(API_PATH.DASHBOARD_VALIDATOR_EDIT_PUBLIC_ID, { method: 'DELETE' }, { dashboardKey: `${props.value?.dashboard?.id}`, publicId })
+  await fetch(
+    API_PATH.DASHBOARD_VALIDATOR_EDIT_PUBLIC_ID,
+    { method: 'DELETE' },
+    { dashboardKey: `${props.value?.dashboard?.id}`, publicId },
+  )
   await refreshDashboards()
   dialogRef?.value?.close('DELETE')
   isUpdating.value = false
 }
-
 </script>
 
 <template>
   <div class="share-dashboard-code-modal-container">
     <div class="content">
-      <qrcode-vue class="qr-code" :value="path" :size="330" />
-      <label class="title">{{ $t('dashboard.share_dialog.public_dashboard_url') }}</label>
-      <BcCopyLabel :value="path" class="copy_label" />
-      <label v-if="isShared" class="disclaimer">{{ $t('dashboard.share_dialog.only_viewing_permission') }}</label>
-      <label v-else class="disclaimer">{{ $t('dashboard.share_dialog.share_public_disclaimer') }}</label>
-      <label v-if="!user?.premium_perks?.share_custom_dashboards" class="disclaimer">{{ $t('dashboard.share_dialog.upgrade') }}<BcPremiumGem class="gem" /></label>
-      <div v-if="!isReadonly" class="footer">
-        <Button :disabled="isUpdating" @click="unpublish">
-          {{ $t('navigation.unpublish') }}
+      <qrcode-vue
+        class="qr-code"
+        :value="path"
+        :size="330"
+      />
+      <label class="title">{{
+        $t("dashboard.share_dialog.public_dashboard_url")
+      }}</label>
+      <BcCopyLabel
+        :value="path"
+        class="copy_label"
+      />
+      <label
+        v-if="isShared"
+        class="disclaimer"
+      >{{
+        $t("dashboard.share_dialog.only_viewing_permission")
+      }}</label>
+      <label
+        v-else
+        class="disclaimer"
+      >{{
+        $t("dashboard.share_dialog.share_public_disclaimer")
+      }}</label>
+      <label
+        v-if="!user?.premium_perks?.share_custom_dashboards"
+        class="disclaimer"
+      >{{ $t("dashboard.share_dialog.upgrade") }}<BcPremiumGem class="gem" /></label>
+      <div
+        v-if="!isReadonly"
+        class="footer"
+      >
+        <Button
+          :disabled="isUpdating"
+          @click="unpublish"
+        >
+          {{ $t("navigation.unpublish") }}
         </Button>
-        <Button :disabled="isUpdating" @click="edit">
-          {{ $t('dashboard.share_dialog.edit') }}
+        <Button
+          :disabled="isUpdating"
+          @click="edit"
+        >
+          {{ $t("dashboard.share_dialog.edit") }}
         </Button>
       </div>
     </div>
diff --git a/frontend/components/dashboard/DashboardShareModal.vue b/frontend/components/dashboard/DashboardShareModal.vue
index 1a7438e6f..af4c395e6 100644
--- a/frontend/components/dashboard/DashboardShareModal.vue
+++ b/frontend/components/dashboard/DashboardShareModal.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import {
-  faInfoCircle
-} from '@fortawesome/pro-regular-svg-icons'
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { ValidatorDashboard } from '~/types/api/dashboard'
 import { API_PATH } from '~/types/customFetch'
 
 interface Props {
-  dashboard: ValidatorDashboard; // Currently only validator dashboards are supported
+  dashboard: ValidatorDashboard // Currently only validator dashboards are supported
 }
 const { props, dialogRef } = useBcDialog<Props>()
 const { t: $t } = useTranslation()
@@ -20,24 +18,42 @@ const isUpdating = ref(false)
 const isNew = ref(true)
 const { user } = useUserStore()
 
-const isPremiumUser = computed(() => !!user.value?.premium_perks?.share_custom_dashboards)
-
-watch(props, (p) => {
-  if (p) {
-    // We currently only want to use one public id
-    shareGroups.value = isPremiumUser.value && !!p.dashboard.public_ids?.[0]?.share_settings.share_groups
-    isNew.value = !p.dashboard.public_ids?.[0]
-    if (isNew.value) {
-      dashboardName.value = props.value?.dashboard?.name ?? ''
-    } else {
-      dashboardName.value = p.dashboard.public_ids?.[0]?.name ?? ''
+const isPremiumUser = computed(
+  () => !!user.value?.premium_perks?.share_custom_dashboards,
+)
+
+watch(
+  props,
+  (p) => {
+    if (p) {
+      // We currently only want to use one public id
+      shareGroups.value
+        = isPremiumUser.value
+        && !!p.dashboard.public_ids?.[0]?.share_settings.share_groups
+      isNew.value = !p.dashboard.public_ids?.[0]
+      if (isNew.value) {
+        dashboardName.value = props.value?.dashboard?.name ?? ''
+      }
+      else {
+        dashboardName.value = p.dashboard.public_ids?.[0]?.name ?? ''
+      }
     }
-  }
-}, { immediate: true })
+  },
+  { immediate: true },
+)
 
 const add = async () => {
   isUpdating.value = true
-  await fetch(API_PATH.DASHBOARD_VALIDATOR_CREATE_PUBLIC_ID, { body: { name: dashboardName.value, share_settings: { share_groups: shareGroups.value } } }, { dashboardKey: `${props.value?.dashboard.id}` })
+  await fetch(
+    API_PATH.DASHBOARD_VALIDATOR_CREATE_PUBLIC_ID,
+    {
+      body: {
+        name: dashboardName.value,
+        share_settings: { share_groups: shareGroups.value },
+      },
+    },
+    { dashboardKey: `${props.value?.dashboard.id}` },
+  )
   await refreshDashboards()
   dialogRef?.value?.close(true)
   isUpdating.value = false
@@ -46,7 +62,16 @@ const add = async () => {
 const edit = async () => {
   isUpdating.value = true
   const publicId = `${props.value?.dashboard.public_ids?.[0]?.public_id}`
-  await fetch(API_PATH.DASHBOARD_VALIDATOR_EDIT_PUBLIC_ID, { body: { name: dashboardName.value, share_settings: { share_groups: shareGroups.value } } }, { dashboardKey: `${props.value?.dashboard.id}`, publicId })
+  await fetch(
+    API_PATH.DASHBOARD_VALIDATOR_EDIT_PUBLIC_ID,
+    {
+      body: {
+        name: dashboardName.value,
+        share_settings: { share_groups: shareGroups.value },
+      },
+    },
+    { dashboardKey: `${props.value?.dashboard.id}`, publicId },
+  )
   await refreshDashboards()
   dialogRef?.value?.close(true)
   isUpdating.value = false
@@ -64,21 +89,30 @@ const share = () => {
 
   if (props.value?.dashboard.public_ids?.[0]?.public_id) {
     edit()
-  } else {
+  }
+  else {
     add()
   }
 }
 
 const shareGroupTooltip = computed(() => {
-  return formatMultiPartSpan($t, 'dashboard.share_dialog.setting.group.tooltip', [undefined, 'bold', undefined])
+  return formatMultiPartSpan(
+    $t,
+    'dashboard.share_dialog.setting.group.tooltip',
+    [undefined, 'bold', undefined],
+  )
 })
-
 </script>
 
 <template>
   <div class="share-dashboard-modal-container">
     <div class="content">
-      <label for="dashboardName" class="medium">{{ $t('dashboard.share_dialog.setting.name.label') }}</label>
+      <label
+        for="dashboardName"
+        class="medium"
+      >{{
+        $t("dashboard.share_dialog.setting.name.label")
+      }}</label>
       <InputText
         id="dashboardName"
         v-model="dashboardName"
@@ -87,8 +121,18 @@ const shareGroupTooltip = computed(() => {
         @keypress.enter="share"
       />
       <div class="share-setting">
-        <Checkbox id="shareGroup" v-model="shareGroups" :binary="true" :disabled="!isPremiumUser" />
-        <label for="shareGroup" :class="{'text-disabled':!isPremiumUser}">{{ $t('dashboard.share_dialog.setting.group.label') }}</label>
+        <Checkbox
+          id="shareGroup"
+          v-model="shareGroups"
+          :binary="true"
+          :disabled="!isPremiumUser"
+        />
+        <label
+          for="shareGroup"
+          :class="{ 'text-disabled': !isPremiumUser }"
+        >{{
+          $t("dashboard.share_dialog.setting.group.label")
+        }}</label>
 
         <BcTooltip
           position="top"
@@ -102,8 +146,11 @@ const shareGroupTooltip = computed(() => {
       </div>
     </div>
     <div class="footer">
-      <Button :disabled="publishDisabled" @click="share">
-        {{ isNew ? $t('navigation.publish') : $t('navigation.update') }}
+      <Button
+        :disabled="publishDisabled"
+        @click="share"
+      >
+        {{ isNew ? $t("navigation.publish") : $t("navigation.update") }}
       </Button>
     </div>
   </div>
@@ -143,7 +190,7 @@ const shareGroupTooltip = computed(() => {
   }
 }
 
-:global(.share-dialog-setting-tooltip >div) {
+:global(.share-dialog-setting-tooltip > div) {
   width: 190px;
 }
 </style>
diff --git a/frontend/components/dashboard/GroupManagementModal.vue b/frontend/components/dashboard/GroupManagementModal.vue
index afe6ddf14..04675a96b 100644
--- a/frontend/components/dashboard/GroupManagementModal.vue
+++ b/frontend/components/dashboard/GroupManagementModal.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import {
-  faAdd,
-  faTrash
-} from '@fortawesome/pro-solid-svg-icons'
+import { faAdd, faTrash } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { orderBy } from 'lodash-es'
 import type { DataTableSortEvent } from 'primevue/datatable'
@@ -41,33 +38,46 @@ const data = computed<ApiPagingResponse<VDBOverviewGroup>>(() => {
   let processedGroups = groups.value
   if (search.value?.length) {
     const s = search.value.toLowerCase()
-    processedGroups = processedGroups.filter(g => g.name.toLowerCase().includes(s) || parseInt(s) === g.id)
+    processedGroups = processedGroups.filter(
+      g => g.name.toLowerCase().includes(s) || parseInt(s) === g.id,
+    )
   }
   if (sortField.value?.length && sortOrder.value) {
     if (sortField.value === 'name') {
       // lodash needs some help when sorting strings alphabetically
-      processedGroups = orderBy(processedGroups, [g => g.name.toLowerCase()], getSortOrder(sortOrder.value))
-    } else {
-      processedGroups = orderBy(processedGroups, sortField.value, getSortOrder(sortOrder.value))
+      processedGroups = orderBy(
+        processedGroups,
+        [g => g.name.toLowerCase()],
+        getSortOrder(sortOrder.value),
+      )
+    }
+    else {
+      processedGroups = orderBy(
+        processedGroups,
+        sortField.value,
+        getSortOrder(sortOrder.value),
+      )
     }
   }
   const totalCount = processedGroups.length
   const index = cursor.value as number
   return {
     paging: {
-      total_count: totalCount
+      total_count: totalCount,
     },
-    data: processedGroups.slice(index, index + pageSize.value)
+    data: processedGroups.slice(index, index + pageSize.value),
   }
 })
 
 const size = computed(() => {
   return {
-    showSubTitle: width.value >= 760
+    showSubTitle: width.value >= 760,
   }
 })
 
-const newGroupDisabled = computed(() => !REGEXP_VALID_NAME.test(newGroupName.value))
+const newGroupDisabled = computed(
+  () => !REGEXP_VALID_NAME.test(newGroupName.value),
+)
 
 const resetData = () => {
   search.value = ''
@@ -91,18 +101,30 @@ const addGroup = async () => {
     return
   }
 
-  await fetch(API_PATH.DASHBOARD_VALIDATOR_GROUPS, { method: 'POST', body: { name: newGroupName.value } }, { dashboardKey: dashboardKey.value })
+  await fetch(
+    API_PATH.DASHBOARD_VALIDATOR_GROUPS,
+    { method: 'POST', body: { name: newGroupName.value } },
+    { dashboardKey: dashboardKey.value },
+  )
   await refreshOverview(dashboardKey.value)
   newGroupName.value = ''
 }
 
 const editGroup = async (row: VDBOverviewGroup, newName?: string) => {
-  await fetch(API_PATH.DASHBOARD_VALIDATOR_GROUP_MODIFY, { method: 'PUT', body: { name: newName } }, { dashboardKey: dashboardKey.value, groupId: row.id })
+  await fetch(
+    API_PATH.DASHBOARD_VALIDATOR_GROUP_MODIFY,
+    { method: 'PUT', body: { name: newName } },
+    { dashboardKey: dashboardKey.value, groupId: row.id },
+  )
   refreshOverview(dashboardKey.value)
 }
 
 const removeGroupConfirmed = async (row: VDBOverviewGroup) => {
-  await fetch(API_PATH.DASHBOARD_VALIDATOR_GROUP_MODIFY, { method: 'DELETE' }, { dashboardKey: dashboardKey.value, groupId: row.id })
+  await fetch(
+    API_PATH.DASHBOARD_VALIDATOR_GROUP_MODIFY,
+    { method: 'DELETE' },
+    { dashboardKey: dashboardKey.value, groupId: row.id },
+  )
   refreshOverview(dashboardKey.value)
 }
 
@@ -115,8 +137,10 @@ const removeGroup = (row: VDBOverviewGroup) => {
     },
     data: {
       title: $t('dashboard.validator.group_management.remove_title'),
-      question: $t('dashboard.validator.group_management.remove_text', { group: row.name })
-    }
+      question: $t('dashboard.validator.group_management.remove_text', {
+        group: row.name,
+      }),
+    },
   })
 }
 
@@ -138,14 +162,27 @@ const setSearch = (value?: string) => {
 }
 
 const dashboardName = computed(() => {
-  return dashboards.value?.validator_dashboards?.find(d => `${d.id}` === dashboardKey.value)?.name || dashboardKey.value
+  return (
+    dashboards.value?.validator_dashboards?.find(
+      d => `${d.id}` === dashboardKey.value,
+    )?.name || dashboardKey.value
+  )
 })
 
-const maxGroupsPerDashboard = computed(() => (isPublic.value || !user.value?.premium_perks?.validator_groups_per_dashboard) ? 1 : user.value.premium_perks.validator_groups_per_dashboard)
-const premiumLimit = computed(() => (data.value?.paging?.total_count ?? 0) >= maxGroupsPerDashboard.value)
-
-const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getSortOrder(sortOrder.value)}` : undefined)
-
+const maxGroupsPerDashboard = computed(() =>
+  isPublic.value || !user.value?.premium_perks?.validator_groups_per_dashboard
+    ? 1
+    : user.value.premium_perks.validator_groups_per_dashboard,
+)
+const premiumLimit = computed(
+  () => (data.value?.paging?.total_count ?? 0) >= maxGroupsPerDashboard.value,
+)
+
+const selectedSort = computed(() =>
+  sortOrder.value
+    ? `${sortField.value}:${getSortOrder(sortOrder.value)}`
+    : undefined,
+)
 </script>
 
 <template>
@@ -156,18 +193,32 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
     class="validator-group-managment-modal-container"
     @update:visible="(visible: boolean) => !visible && resetData()"
   >
-    <template v-if="!size.showSubTitle" #header>
+    <template
+      v-if="!size.showSubTitle"
+      #header
+    >
       <span />
     </template>
     <BcTableControl
-      :search-placeholder="$t('dashboard.validator.group_management.search_placeholder')"
+      :search-placeholder="
+        $t('dashboard.validator.group_management.search_placeholder')
+      "
       :disabled-filter="isPublic"
       @set-search="setSearch"
     >
       <template #header-left>
-        <span v-if="size.showSubTitle"> {{ $t('dashboard.validator.group_management.sub_title', { dashboardName })
+        <span v-if="size.showSubTitle">
+          {{
+            $t("dashboard.validator.group_management.sub_title", {
+              dashboardName,
+            })
+          }}</span>
+        <span
+          v-else
+          class="small-title"
+        >{{
+          $t("dashboard.validator.group_management.title")
         }}</span>
-        <span v-else class="small-title">{{ $t('dashboard.validator.group_management.title') }}</span>
       </template>
       <template #bc-table-sub-header>
         <div class="add-row">
@@ -175,10 +226,16 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
             v-model="newGroupName"
             class="search-input"
             maxlength="20"
-            :placeholder="$t('dashboard.validator.group_management.new_group_placeholder')"
+            :placeholder="
+              $t('dashboard.validator.group_management.new_group_placeholder')
+            "
             @keypress.enter="addGroup"
           />
-          <Button style="display: inline;" :disabled="newGroupDisabled" @click="addGroup">
+          <Button
+            style="display: inline"
+            :disabled="newGroupDisabled"
+            @click="addGroup"
+          >
             <FontAwesomeIcon :icon="faAdd" />
           </Button>
         </div>
@@ -205,7 +262,11 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
                 <BcInputLabel
                   class="edit-group truncate-text"
                   :value="slotProps.data.name"
-                  :default="slotProps.data.id === 0 ? $t('dashboard.group.selection.default') : ''"
+                  :default="
+                    slotProps.data.id === 0
+                      ? $t('dashboard.group.selection.default')
+                      : ''
+                  "
                   :can-be-empty="slotProps.data.id === 0"
                   :disabled="isPublic"
                   :pattern="REGEXP_VALID_NAME"
@@ -215,16 +276,27 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
                 />
               </template>
             </Column>
-            <Column field="id" :sortable="!isMobile" :header="$t('dashboard.validator.group_management.col.id')">
+            <Column
+              field="id"
+              :sortable="!isMobile"
+              :header="$t('dashboard.validator.group_management.col.id')"
+            >
               <template #body="slotProps">
                 <div class="id-cell">
                   {{ slotProps.data.id }}
                 </div>
               </template>
             </Column>
-            <Column field="count" :sortable="!isMobile" :header="$t('dashboard.validator.group_management.col.count')">
+            <Column
+              field="count"
+              :sortable="!isMobile"
+              :header="$t('dashboard.validator.group_management.col.count')"
+            >
               <template #body="slotProps">
-                <BcFormatNumber :value="slotProps.data.count" default="0" />
+                <BcFormatNumber
+                  :value="slotProps.data.count"
+                  default="0"
+                />
               </template>
             </Column>
             <Column field="action">
@@ -242,9 +314,16 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
 
             <template #bc-table-footer-left>
               <div class="left">
-                <div class="labels" :class="{ premiumLimit }">
+                <div
+                  class="labels"
+                  :class="{ premiumLimit }"
+                >
                   <span>
-                    <BcFormatNumber :value="data.paging.total_count" default="0" /> /
+                    <BcFormatNumber
+                      :value="data.paging.total_count"
+                      default="0"
+                    />
+                    /
                     <BcFormatNumber :value="maxGroupsPerDashboard" />
                   </span>
                 </div>
@@ -253,7 +332,10 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
             </template>
 
             <template #bc-table-footer-right>
-              <Button :label="$t('navigation.done')" @click="onClose" />
+              <Button
+                :label="$t('navigation.done')"
+                @click="onClose"
+              />
             </template>
           </BcTable>
         </ClientOnly>
@@ -263,14 +345,13 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
-@use '~/assets/css/utils.scss';
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/main.scss";
+@use "~/assets/css/utils.scss";
+@use "~/assets/css/fonts.scss";
 
 :global(.validator-group-managment-modal-container) {
   width: 960px;
   height: 800px;
-
 }
 
 :global(.validator-group-managment-modal-container .p-dialog-content) {
@@ -285,7 +366,11 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
   @include fonts.subtitle_text;
 }
 
-:global(.validator-group-managment-modal-container .bc-table-header .side:first-child) {
+:global(
+    .validator-group-managment-modal-container
+      .bc-table-header
+      .side:first-child
+  ) {
   display: contents;
 }
 
@@ -376,7 +461,6 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
 }
 
 @media (max-width: 560px) {
-
   .edit-group {
     max-width: 100px;
   }
diff --git a/frontend/components/dashboard/OverviewBox.vue b/frontend/components/dashboard/OverviewBox.vue
index 1666241c9..e5435cbd6 100644
--- a/frontend/components/dashboard/OverviewBox.vue
+++ b/frontend/components/dashboard/OverviewBox.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faInfoCircle
-} from '@fortawesome/pro-regular-svg-icons'
-import {
-  faArrowUpRightFromSquare
-} from '@fortawesome/pro-solid-svg-icons'
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
+import { faArrowUpRightFromSquare } from '@fortawesome/pro-solid-svg-icons'
 import { type OverviewTableData } from '~/types/dashboard/overview'
 import { DashboardValidatorSubsetModal } from '#components'
+
 interface Props {
   data: OverviewTableData
 }
@@ -23,12 +20,12 @@ const openValidatorModal = () => {
       context: 'dashboard',
       dashboardName: getDashboardLabel(dashboardKey.value, 'validator'),
       dashboardKey: dashboardKey.value,
-      timeFrame: 'last_24h'
-    }
+      timeFrame: 'last_24h',
+    },
   })
 }
-
 </script>
+
 <template>
   <div class="box">
     <div class="main">
@@ -36,7 +33,10 @@ const openValidatorModal = () => {
         {{ props.data.label }}
       </div>
       <div class="big_text">
-        <BcTooltip :text="props.data.value?.fullLabel" :fit-content="true">
+        <BcTooltip
+          :text="props.data.value?.fullLabel"
+          :fit-content="true"
+        >
           <!-- eslint-disable-next-line vue/no-v-html -->
           <span v-html="props.data.value?.label" />
         </BcTooltip>
@@ -48,20 +48,39 @@ const openValidatorModal = () => {
         />
       </div>
     </div>
-    <div v-for="(infos, index) in props.data.additonalValues" :key="index" class="additional">
-      <div v-for="(addValue, subIndex) in infos" :key="subIndex" class="small_text">
-        <BcTooltip :text="addValue.fullLabel" :fit-content="true">
+    <div
+      v-for="(infos, index) in props.data.additonalValues"
+      :key="index"
+      class="additional"
+    >
+      <div
+        v-for="(addValue, subIndex) in infos"
+        :key="subIndex"
+        class="small_text"
+      >
+        <BcTooltip
+          :text="addValue.fullLabel"
+          :fit-content="true"
+        >
           {{ addValue.label }}
         </BcTooltip>
       </div>
     </div>
-    <div v-if="props.data.infos" class="info">
+    <div
+      v-if="props.data.infos"
+      class="info"
+    >
       <BcTooltip :fit-content="true">
         <FontAwesomeIcon :icon="faInfoCircle" />
         <template #tooltip>
           <div class="info-label-list">
-            <div v-for="info in props.data.infos" :key="info.label">
-              <div><b>{{ info.label }}:</b> {{ info.value }}</div>
+            <div
+              v-for="info in props.data.infos"
+              :key="info.label"
+            >
+              <div>
+                <b>{{ info.label }}:</b> {{ info.value }}
+              </div>
             </div>
           </div>
         </template>
@@ -69,6 +88,7 @@ const openValidatorModal = () => {
     </div>
   </div>
 </template>
+
 <style lang="scss" scoped>
 .box {
   display: flex;
@@ -99,7 +119,6 @@ const openValidatorModal = () => {
       margin-left: var(--padding);
     }
   }
-
 }
 
 .info-label-list {
diff --git a/frontend/components/dashboard/SharedDashboardModal.vue b/frontend/components/dashboard/SharedDashboardModal.vue
index 80df6bcb4..f6e4286ba 100644
--- a/frontend/components/dashboard/SharedDashboardModal.vue
+++ b/frontend/components/dashboard/SharedDashboardModal.vue
@@ -1,18 +1,29 @@
 <script lang="ts" setup>
 import { COOKIE_KEY, type CookiesPreference } from '~/types/cookie'
 
-const cookiePreference = useCookie<CookiesPreference>(COOKIE_KEY.COOKIES_PREFERENCE, { default: () => undefined })
+const cookiePreference = useCookie<CookiesPreference>(
+  COOKIE_KEY.COOKIES_PREFERENCE,
+  { default: () => undefined },
+)
 const { isShared } = useDashboardKey()
 const { dashboards } = useUserDashboardStore()
 const { t: $t } = useTranslation()
 const route = useRoute()
 
 const dismissed = ref(false)
-const visible = computed(() => isShared.value && !dismissed.value && cookiePreference.value !== undefined)
+const visible = computed(
+  () =>
+    isShared.value && !dismissed.value && cookiePreference.value !== undefined,
+)
 
 const text = computed(() => {
-  const userHasOwnDashboard = ((dashboards.value?.validator_dashboards?.length || 0) + (dashboards.value?.account_dashboards?.length || 0)) > 0
-  const textRoot = userHasOwnDashboard ? 'dashboard.shared_modal_with_own' : 'dashboard.shared_modal_without_own'
+  const userHasOwnDashboard
+    = (dashboards.value?.validator_dashboards?.length || 0)
+    + (dashboards.value?.account_dashboards?.length || 0)
+    > 0
+  const textRoot = userHasOwnDashboard
+    ? 'dashboard.shared_modal_with_own'
+    : 'dashboard.shared_modal_without_own'
 
   const caption = $t(textRoot + '.text')
   const button = $t(textRoot + '.button')
@@ -32,10 +43,16 @@ const text = computed(() => {
     <div class="dialog-container">
       {{ text.caption }}
       <div class="button-row">
-        <div class="dismiss" @click="dismissed=true">
-          {{ $t('navigation.dismiss') }}
+        <div
+          class="dismiss"
+          @click="dismissed = true"
+        >
+          {{ $t("navigation.dismiss") }}
         </div>
-        <BcLink :to="`/dashboard`" :replace="route.path.startsWith('/dashboard')">
+        <BcLink
+          :to="`/dashboard`"
+          :replace="route.path.startsWith('/dashboard')"
+        >
           <Button>
             {{ text.button }}
           </Button>
diff --git a/frontend/components/dashboard/ValidatorEpochDutiesModal.vue b/frontend/components/dashboard/ValidatorEpochDutiesModal.vue
index 6af242251..fba8245c1 100644
--- a/frontend/components/dashboard/ValidatorEpochDutiesModal.vue
+++ b/frontend/components/dashboard/ValidatorEpochDutiesModal.vue
@@ -13,24 +13,35 @@ const { fetch } = useCustomFetch()
 const { width } = useWindowSize()
 const size = computed(() => {
   return {
-    expandable: width.value <= 1000
+    expandable: width.value <= 1000,
   }
 })
 
 interface Props {
-  dashboardKey: DashboardKey // we need to pass the key as prop as the dialog is not a child component and cannot access the provider
+  // we need to pass the key as prop as the dialog is not a child component and cannot access the provider
+  dashboardKey: DashboardKey
   groupId: number
   groupName?: string
   epoch: number
 }
 
-const { props, setHeader } = useBcDialog<Props>({ showHeader: size.value.expandable, contentClass: 'epoch-duties-modal' })
+const { props, setHeader } = useBcDialog<Props>({
+  showHeader: size.value.expandable,
+  contentClass: 'epoch-duties-modal',
+})
 
 const isLoading = ref(false)
 const cursor = ref<Cursor>()
 const pageSize = ref<number>(25)
 
-const { value: query, temp: tempQuery, bounce: setQuery } = useDebounceValue<PathValues | undefined>({ limit: pageSize.value, sort: 'validator:asc' }, 500)
+const {
+  value: query,
+  temp: tempQuery,
+  bounce: setQuery,
+} = useDebounceValue<PathValues | undefined>(
+  { limit: pageSize.value, sort: 'validator:asc' },
+  500,
+)
 
 const data = ref<InternalGetValidatorDashboardDutiesResponse | undefined>()
 
@@ -56,7 +67,12 @@ const loadData = async () => {
   if (props.value?.dashboardKey) {
     isLoading.value = !data.value
     const testQ = JSON.stringify(query.value)
-    const result = await fetch<InternalGetValidatorDashboardDutiesResponse>(API_PATH.DASHBOARD_VALIDATOR_EPOCH_DUTY, { query: { ...query.value, group_id: props.value.groupId } }, { dashboardKey: props.value.dashboardKey, epoch: props.value.epoch }, query.value)
+    const result = await fetch<InternalGetValidatorDashboardDutiesResponse>(
+      API_PATH.DASHBOARD_VALIDATOR_EPOCH_DUTY,
+      { query: { ...query.value, group_id: props.value.groupId } },
+      { dashboardKey: props.value.dashboardKey, epoch: props.value.epoch },
+      query.value,
+    )
 
     // Make sure that during loading the query did not change
     if (testQ === JSON.stringify(query.value)) {
@@ -66,13 +82,21 @@ const loadData = async () => {
   }
 }
 
-watch(() => [props.value, query.value], () => {
-  loadData()
-}, { immediate: true })
+watch(
+  () => [props.value, query.value],
+  () => {
+    loadData()
+  },
+  { immediate: true },
+)
 
 const mapDuties = (duties: ValidatorHistoryDuties) => {
   const list = []
-  if (duties.attestation_head || duties.attestation_source || duties.attestation_target) {
+  if (
+    duties.attestation_head
+    || duties.attestation_source
+    || duties.attestation_target
+  ) {
     list.push($t('dashboard.validator.rewards.attestation'))
   }
   if (duties.proposal) {
@@ -98,23 +122,38 @@ const title = computed(() => {
   return t
 })
 
-watch([title, size], () => {
-  setHeader(title.value, size.value.expandable)
-}, { immediate: true })
-
+watch(
+  [title, size],
+  () => {
+    setHeader(title.value, size.value.expandable)
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
-  <BcTableControl :search-placeholder="$t('dashboard.validator.duties.search_placeholder')" @set-search="setSearch">
-    <template v-if="size.expandable" #header-left>
+  <BcTableControl
+    :search-placeholder="$t('dashboard.validator.duties.search_placeholder')"
+    @set-search="setSearch"
+  >
+    <template
+      v-if="size.expandable"
+      #header-left
+    >
       <div class="small-title">
         {{ props?.groupName }}
       </div>
     </template>
-    <template v-else #header-center>
+    <template
+      v-else
+      #header-center
+    >
       <div>
         <span class="h1">{{ title }}</span>
-        <BcFormatTimePassed :value="props?.epoch" class="time-passed" />
+        <BcFormatTimePassed
+          :value="props?.epoch"
+          class="time-passed"
+        />
       </div>
     </template>
     <template #table>
@@ -132,7 +171,11 @@ watch([title, size], () => {
           @sort="onSort"
           @set-page-size="setPageSize"
         >
-          <Column field="validator" :sortable="true" :header="$t('dashboard.validator.duties.col.validator')">
+          <Column
+            field="validator"
+            :sortable="true"
+            :header="$t('dashboard.validator.duties.col.validator')"
+          >
             <template #body="slotProps">
               <BcLink
                 :to="`/validator/${slotProps.data.validator}`"
@@ -143,19 +186,30 @@ watch([title, size], () => {
               </BcLink>
             </template>
           </Column>
-          <Column field="duties" :header="$t('dashboard.validator.duties.col.duties')">
+          <Column
+            field="duties"
+            :header="$t('dashboard.validator.duties.col.duties')"
+          >
             <template #body="slotProps">
               <div class="col-duties">
                 {{ mapDuties(slotProps.data.duties) }}
               </div>
             </template>
           </Column>
-          <Column v-if="!size.expandable" field="result" :header="$t('dashboard.validator.duties.col.result')">
+          <Column
+            v-if="!size.expandable"
+            field="result"
+            :header="$t('dashboard.validator.duties.col.result')"
+          >
             <template #body="slotProps">
               <ValidatorTableDutyStatus :data="slotProps.data.duties" />
             </template>
           </Column>
-          <Column field="reward" :sortable="!size.expandable" :header="$t('dashboard.validator.duties.col.rewards')">
+          <Column
+            field="reward"
+            :sortable="!size.expandable"
+            :header="$t('dashboard.validator.duties.col.rewards')"
+          >
             <template #body="slotProps">
               <ValidatorTableDutyRewards :data="slotProps.data.duties" />
             </template>
@@ -164,7 +218,7 @@ watch([title, size], () => {
             <div class="expansion">
               <div class="info">
                 <div class="label">
-                  {{ $t('dashboard.validator.duties.col.result') }}
+                  {{ $t("dashboard.validator.duties.col.result") }}
                 </div>
                 <div>
                   <ValidatorTableDutyStatus :data="slotProps.data.duties" />
@@ -179,9 +233,9 @@ watch([title, size], () => {
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
-@use '~/assets/css/utils.scss';
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/main.scss";
+@use "~/assets/css/utils.scss";
+@use "~/assets/css/fonts.scss";
 
 :global(.epoch-duties-modal) {
   width: 960px;
@@ -195,7 +249,6 @@ watch([title, size], () => {
     width: 100%;
     min-width: 100%;
   }
-
 }
 
 :global(.epoch-duties-modal .bc-table-header) {
diff --git a/frontend/components/dashboard/ValidatorManagementModal.vue b/frontend/components/dashboard/ValidatorManagementModal.vue
index 7a685fce6..07d8dbd05 100644
--- a/frontend/components/dashboard/ValidatorManagementModal.vue
+++ b/frontend/components/dashboard/ValidatorManagementModal.vue
@@ -1,18 +1,31 @@
 <script lang="ts" setup>
-import {
-  faEdit,
-  faTrash
-} from '@fortawesome/pro-solid-svg-icons'
+import { faEdit, faTrash } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { DataTableSortEvent } from 'primevue/datatable'
 import { warn } from 'vue'
 import { uniq } from 'lodash-es'
-import { BcDialogConfirm, BcPremiumModal, DashboardGroupSelectionDialog } from '#components'
+import {
+  BcDialogConfirm,
+  BcPremiumModal,
+  DashboardGroupSelectionDialog,
+} from '#components'
 import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
-import type { InternalGetValidatorDashboardValidatorsResponse, VDBManageValidatorsTableRow, VDBPostValidatorsData } from '~/types/api/validator_dashboard'
+import type {
+  InternalGetValidatorDashboardValidatorsResponse,
+  VDBManageValidatorsTableRow,
+  VDBPostValidatorsData,
+} from '~/types/api/validator_dashboard'
 import type { Cursor } from '~/types/datatable'
 import type { NumberOrString } from '~/types/value'
-import { type SearchBar, SearchbarShape, SearchbarColors, SearchbarPurpose, type ResultSuggestion, ResultType, pickHighestPriorityAmongBestMatchings } from '~/types/searchbar'
+import {
+  type SearchBar,
+  SearchbarShape,
+  SearchbarColors,
+  SearchbarPurpose,
+  type ResultSuggestion,
+  ResultType,
+  pickHighestPriorityAmongBestMatchings,
+} from '~/types/searchbar'
 import { API_PATH, type PathValues } from '~/types/customFetch'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 
@@ -32,13 +45,19 @@ const cursor = ref<Cursor>()
 const pageSize = ref<number>(25)
 const selectedGroup = ref<number>(-1)
 const selectedValidator = ref<string>('')
-const { addEntities, removeEntities, dashboardKey, isPublic, dashboardType } = useDashboardKey()
+const { addEntities, removeEntities, dashboardKey, isPublic, dashboardType }
+  = useDashboardKey()
 const { updateHash } = useUserDashboardStore()
 const { isLoggedIn, user } = useUserStore()
 
 const initialQuery = { limit: pageSize.value, sort: 'index:asc' }
 
-const { value: query, temp: tempQuery, bounce: setQuery, instant: instantQuery } = useDebounceValue<PathValues | undefined>(initialQuery, 500)
+const {
+  value: query,
+  temp: tempQuery,
+  bounce: setQuery,
+  instant: instantQuery,
+} = useDebounceValue<PathValues | undefined>(initialQuery, 500)
 
 const data = ref<InternalGetValidatorDashboardValidatorsResponse | undefined>()
 const selected = ref<VDBManageValidatorsTableRow[]>()
@@ -46,11 +65,11 @@ const searchBar = ref<SearchBar>()
 const hasNoOpenDialogs = ref(true)
 
 type ValidatorUpdateBody = {
-  validators?: string[],
-    deposit_address?: string,
-    withdrawal_address?: string,
-    graffiti?: string,
-    group_id?: number
+  validators?: string[]
+  deposit_address?: string
+  withdrawal_address?: string
+  graffiti?: string
+  group_id?: number
 }
 
 const size = computed(() => {
@@ -59,7 +78,7 @@ const size = computed(() => {
     showBalance: width.value >= 1060,
     showGroup: width.value >= 925,
     showWithdrawalCredentials: width.value >= 750,
-    showPublicKey: width.value >= 570
+    showPublicKey: width.value >= 570,
   }
 })
 
@@ -76,18 +95,31 @@ const onClose = () => {
   visible.value = false
 }
 
-const mapIndexOrPubKey = (validators?: VDBManageValidatorsTableRow[]): string[] => {
-  return uniq(validators?.map(vali => vali.index?.toString() ?? vali.public_key) ?? [])
+const mapIndexOrPubKey = (
+  validators?: VDBManageValidatorsTableRow[],
+): string[] => {
+  return uniq(
+    validators?.map(vali => vali.index?.toString() ?? vali.public_key) ?? [],
+  )
 }
 
 const changeGroup = async (body: ValidatorUpdateBody, groupId?: number) => {
-  if (!body.validators?.length && !body.deposit_address && !body.graffiti && !body.withdrawal_address) {
+  if (
+    !body.validators?.length
+    && !body.deposit_address
+    && !body.graffiti
+    && !body.withdrawal_address
+  ) {
     warn('no validators selected to change group')
     return
   }
   body.group_id = groupId && groupId !== -1 ? groupId : 0
 
-  await fetch<VDBPostValidatorsData>(API_PATH.DASHBOARD_VALIDATOR_MANAGEMENT, { method: 'POST', body }, { dashboardKey: dashboardKey.value })
+  await fetch<VDBPostValidatorsData>(
+    API_PATH.DASHBOARD_VALIDATOR_MANAGEMENT,
+    { method: 'POST', body },
+    { dashboardKey: dashboardKey.value },
+  )
 
   loadData()
   refreshOverview(dashboardKey.value)
@@ -103,7 +135,11 @@ const removeValidators = async (validators?: NumberOrString[]) => {
     return
   }
 
-  await fetch(API_PATH.DASHBOARD_VALIDATOR_MANAGEMENT, { method: 'DELETE', query: { validators: validators.join(',') } }, { dashboardKey: dashboardKey.value })
+  await fetch(
+    API_PATH.DASHBOARD_VALIDATOR_MANAGEMENT,
+    { method: 'DELETE', query: { validators: validators.join(',') } },
+    { dashboardKey: dashboardKey.value },
+  )
 
   loadData()
   refreshOverview(dashboardKey.value)
@@ -125,16 +161,16 @@ const addValidator = (result: ResultSuggestion) => {
       selectedValidator.value = list[0]
       body.validators = list
       break
-    case ResultType.ValidatorsByDepositAddress :
-    case ResultType.ValidatorsByDepositEnsName :
+    case ResultType.ValidatorsByDepositAddress:
+    case ResultType.ValidatorsByDepositEnsName:
       body.deposit_address = result.rawResult.hash_value
       break
-    case ResultType.ValidatorsByWithdrawalCredential :
-    case ResultType.ValidatorsByWithdrawalAddress :
-    case ResultType.ValidatorsByWithdrawalEnsName :
+    case ResultType.ValidatorsByWithdrawalCredential:
+    case ResultType.ValidatorsByWithdrawalAddress:
+    case ResultType.ValidatorsByWithdrawalEnsName:
       body.withdrawal_address = result.rawResult.hash_value
       break
-    case ResultType.ValidatorsByGraffiti :
+    case ResultType.ValidatorsByGraffiti:
       body.graffiti = result.rawResult.str_value
       break
   }
@@ -144,14 +180,15 @@ const addValidator = (result: ResultSuggestion) => {
     if (!isLoggedIn.value) {
       updateHash(dashboardType.value, dashboardKey.value)
     }
-  } else {
+  }
+  else {
     changeGroup(body, selectedGroup.value)
   }
   searchBar.value!.empty()
 }
 
 // called for each row in the drop-down of the search bar and returns `true` to deactivate the row
-function isSearchResultRestricted (result: ResultSuggestion) : boolean {
+function isSearchResultRestricted(result: ResultSuggestion): boolean {
   switch (result.type) {
     case ResultType.ValidatorsByIndex:
     case ResultType.ValidatorsByPubkey:
@@ -167,14 +204,17 @@ const editSelected = () => {
     onClose: (response) => {
       hasNoOpenDialogs.value = true
       if (response?.data !== undefined) {
-        changeGroup({ validators: mapIndexOrPubKey(selected.value) }, response?.data)
+        changeGroup(
+          { validators: mapIndexOrPubKey(selected.value) },
+          response?.data,
+        )
       }
     },
     data: {
       groupId: selected.value?.[0]?.group_id ?? undefined,
       selectedValidators: selected.value?.length,
-      totalValidators: total?.value
-    }
+      totalValidators: total?.value,
+    },
   })
 }
 
@@ -203,26 +243,42 @@ watch(selectedGroup, (value) => {
 const loadData = async () => {
   if (dashboardKey.value) {
     const testQ = JSON.stringify(query.value)
-    const result = await fetch<InternalGetValidatorDashboardValidatorsResponse>(API_PATH.DASHBOARD_VALIDATOR_MANAGEMENT, undefined, { dashboardKey: dashboardKey.value }, query.value)
+    const result = await fetch<InternalGetValidatorDashboardValidatorsResponse>(
+      API_PATH.DASHBOARD_VALIDATOR_MANAGEMENT,
+      undefined,
+      { dashboardKey: dashboardKey.value },
+      query.value,
+    )
 
     // Make sure that during loading the query did not change
     if (testQ === JSON.stringify(query.value)) {
       data.value = result
       selected.value = []
     }
-  } else {
+  }
+  else {
     data.value = { paging: {}, data: [] }
   }
 }
 
-watch(() => [dashboardKey.value, visible.value, query.value], () => {
-  if (visible.value) {
-    loadData()
-  }
-}, { immediate: true })
+watch(
+  () => [dashboardKey.value, visible.value, query.value],
+  () => {
+    if (visible.value) {
+      loadData()
+    }
+  },
+  { immediate: true },
+)
 
-const switchValidatorGroup = (row: VDBManageValidatorsTableRow, group: number) => {
-  changeGroup({ validators: mapIndexOrPubKey([row].concat(selected.value ?? [])) }, group)
+const switchValidatorGroup = (
+  row: VDBManageValidatorsTableRow,
+  group: number,
+) => {
+  changeGroup(
+    { validators: mapIndexOrPubKey([row].concat(selected.value ?? [])) },
+    group,
+  )
 }
 
 const removeRow = (row: VDBManageValidatorsTableRow) => {
@@ -239,17 +295,26 @@ const removeRow = (row: VDBManageValidatorsTableRow) => {
     },
     data: {
       title: $t('dashboard.validator.management.remove_title'),
-      question: $t('dashboard.validator.management.remove_text', { validator: list[0] }, list.length)
-    }
+      question: $t(
+        'dashboard.validator.management.remove_text',
+        { validator: list[0] },
+        list.length,
+      ),
+    },
   })
 }
 
 const total = computed(() => addUpValues(overview.value?.validators))
 
-const maxValidatorsPerDashboard = computed(() => (isPublic.value || !user.value?.premium_perks?.validators_per_dashboard) ? 20 : user.value.premium_perks.validators_per_dashboard)
-
-const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.value)
+const maxValidatorsPerDashboard = computed(() =>
+  isPublic.value || !user.value?.premium_perks?.validators_per_dashboard
+    ? 20
+    : user.value.premium_perks.validators_per_dashboard,
+)
 
+const premiumLimit = computed(
+  () => total.value >= maxValidatorsPerDashboard.value,
+)
 </script>
 
 <template>
@@ -260,21 +325,41 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
     class="validator-managment-modal-container"
     @update:visible="(visible: boolean) => !visible && resetData()"
   >
-    <template v-if="!size.showWithdrawalCredentials" #header>
+    <template
+      v-if="!size.showWithdrawalCredentials"
+      #header
+    >
       <span />
     </template>
     <BcTableControl
-      :search-placeholder="$t(isPublic ? 'dashboard.validator.summary.search_placeholder_public' : 'dashboard.validator.summary.search_placeholder')"
+      :search-placeholder="
+        $t(
+          isPublic
+            ? 'dashboard.validator.summary.search_placeholder_public'
+            : 'dashboard.validator.summary.search_placeholder',
+        )
+      "
       @set-search="setSearch"
     >
       <template #header-left>
-        <span v-if="size.showWithdrawalCredentials"> {{ $t('dashboard.validator.management.sub_title') }}</span>
-        <span v-else class="small-title">{{ $t('dashboard.validator.manage_validators') }}</span>
+        <span v-if="size.showWithdrawalCredentials">
+          {{ $t("dashboard.validator.management.sub_title") }}</span>
+        <span
+          v-else
+          class="small-title"
+        >{{
+          $t("dashboard.validator.manage_validators")
+        }}</span>
       </template>
       <template #bc-table-sub-header>
         <div class="add-row">
-          <DashboardGroupSelection v-model="selectedGroup" :include-all="true" class="small group-selection" />
-          <!-- TODO: below, "[currentNetwork]" is wrong! Replace it with an array containing the chain ID that the dashboard was created for (it is not necessarily the current network). -->
+          <DashboardGroupSelection
+            v-model="selectedGroup"
+            :include-all="true"
+            class="small group-selection"
+          />
+          <!-- TODO: below, "[currentNetwork]" is wrong! Replace it with an array containing the chain ID that
+           the dashboard was created for (it is not necessarily the current network). -->
           <BcSearchbarMain
             ref="searchBar"
             :bar-shape="SearchbarShape.Small"
@@ -283,7 +368,10 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
             :only-networks="[currentNetwork]"
             :row-lacks-premium-subscription="isSearchResultRestricted"
             :pick-by-default="pickHighestPriorityAmongBestMatchings"
-            :screen-width-causing-sudden-change="0 /*if you introduce a media query (or similar) changing the width of the bar, give the threshold here to avoid visual bugs in the list of results */"
+            :screen-width-causing-sudden-change="
+              0 /*if you introduce a media query (or similar) changing the width of the bar, give the threshold here
+              to avoid visual bugs in the list of results */
+            "
             class="search-bar"
             @go="addValidator"
           />
@@ -305,7 +393,11 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
             @sort="onSort"
             @set-page-size="setPageSize"
           >
-            <Column field="index" :sortable="true" :header="$t('dashboard.validator.col.index')" />
+            <Column
+              field="index"
+              :sortable="true"
+              :header="$t('dashboard.validator.col.index')"
+            />
 
             <Column
               v-if="size.showPublicKey"
@@ -314,7 +406,11 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
               :header="$t('dashboard.validator.col.public_key')"
             >
               <template #body="slotProps">
-                <BcFormatHash :hash="slotProps.data.public_key" type="public_key" class="public-key" />
+                <BcFormatHash
+                  :hash="slotProps.data.public_key"
+                  type="public_key"
+                  class="public-key"
+                />
               </template>
             </Column>
             <Column
@@ -327,7 +423,9 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
                 <DashboardGroupSelection
                   v-model="slotProps.data.group_id"
                   class="small group-selection"
-                  @set-group="(id: number) => switchValidatorGroup(slotProps.data, id)"
+                  @set-group="
+                    (id: number) => switchValidatorGroup(slotProps.data, id)
+                  "
                 />
               </template>
             </Column>
@@ -365,20 +463,34 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
             >
               <template #body="slotProps">
                 <div class="withdrawal-col">
-                  <BcFormatHash :hash="slotProps.data.withdrawal_credential" type="withdrawal_credentials" />
+                  <BcFormatHash
+                    :hash="slotProps.data.withdrawal_credential"
+                    type="withdrawal_credentials"
+                  />
                 </div>
               </template>
             </Column>
             <Column field="action">
               <template #header>
-                <Button v-show="selected?.length" class="edit-button" @click.stop.prevent="editSelected()">
-                  <span class="edit-label">{{ $t('common.edit') }}</span>
-                  <FontAwesomeIcon class="edit-icon" :icon="faEdit" />
+                <Button
+                  v-show="selected?.length"
+                  class="edit-button"
+                  @click.stop.prevent="editSelected()"
+                >
+                  <span class="edit-label">{{ $t("common.edit") }}</span>
+                  <FontAwesomeIcon
+                    class="edit-icon"
+                    :icon="faEdit"
+                  />
                 </Button>
               </template>
               <template #body="slotProps">
                 <div class="action-col">
-                  <FontAwesomeIcon :icon="faTrash" class="link" @click="removeRow(slotProps.data)" />
+                  <FontAwesomeIcon
+                    :icon="faTrash"
+                    class="link"
+                    @click="removeRow(slotProps.data)"
+                  />
                 </div>
               </template>
             </Column>
@@ -386,41 +498,62 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
               <div class="expansion">
                 <div class="info">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.public_key') }}
+                    {{ $t("dashboard.validator.col.public_key") }}
                   </div>
-                  <BcFormatHash :hash="slotProps.data.public_key" type="public_key" class="public-key" />
+                  <BcFormatHash
+                    :hash="slotProps.data.public_key"
+                    type="public_key"
+                    class="public-key"
+                  />
                 </div>
                 <div class="info">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.balance') }}
+                    {{ $t("dashboard.validator.col.balance") }}
                   </div>
                   <BcFormatValue :value="slotProps.data.balance" />
                 </div>
                 <div class="info">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.group') }}
+                    {{ $t("dashboard.validator.col.group") }}
                   </div>
                   <DashboardGroupSelection
                     v-model="slotProps.data.group_id"
                     class="small"
-                    @set-group="(id: number) => switchValidatorGroup(slotProps.data, id)"
+                    @set-group="
+                      (id: number) => switchValidatorGroup(slotProps.data, id)
+                    "
                   />
                 </div>
                 <div class="info">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.withdrawal_credential') }}
+                    {{ $t("dashboard.validator.col.withdrawal_credential") }}
                   </div>
-                  <BcFormatHash :hash="slotProps.data.withdrawal_credential" type="withdrawal_credentials" />
+                  <BcFormatHash
+                    :hash="slotProps.data.withdrawal_credential"
+                    type="withdrawal_credentials"
+                  />
                 </div>
               </div>
             </template>
 
             <template #bc-table-footer-left>
-              <div v-if="maxValidatorsPerDashboard" class="left">
-                <div class="labels" :class="{ premiumLimit }">
+              <div
+                v-if="maxValidatorsPerDashboard"
+                class="left"
+              >
+                <div
+                  class="labels"
+                  :class="{ premiumLimit }"
+                >
                   <span>
-                    <BcFormatNumber :value="total" default="0" /> /
-                    <BcFormatNumber :value="maxValidatorsPerDashboard" default="0" />
+                    <BcFormatNumber
+                      :value="total"
+                      default="0"
+                    /> /
+                    <BcFormatNumber
+                      :value="maxValidatorsPerDashboard"
+                      default="0"
+                    />
                   </span>
                 </div>
                 <BcPremiumGem />
@@ -428,7 +561,10 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
             </template>
 
             <template #bc-table-footer-right>
-              <Button :label="$t('navigation.done')" @click="onClose" />
+              <Button
+                :label="$t('navigation.done')"
+                @click="onClose"
+              />
             </template>
           </BcTable>
         </ClientOnly>
@@ -438,14 +574,13 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
-@use '~/assets/css/utils.scss';
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/main.scss";
+@use "~/assets/css/utils.scss";
+@use "~/assets/css/fonts.scss";
 
 :global(.validator-managment-modal-container) {
   width: 1060px;
   height: 800px;
-
 }
 
 :global(.validator-managment-modal-container .p-dialog-content) {
@@ -460,7 +595,9 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
   @include fonts.subtitle_text;
 }
 
-:global(.validator-managment-modal-container .bc-table-header .side:first-child) {
+:global(
+    .validator-managment-modal-container .bc-table-header .side:first-child
+  ) {
   display: contents;
 }
 
@@ -535,7 +672,7 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
 }
 
 .withdrawal-col {
-  width: 200px
+  width: 200px;
 }
 
 .action-col {
diff --git a/frontend/components/dashboard/ValidatorOverview.vue b/frontend/components/dashboard/ValidatorOverview.vue
index bbc36cd20..c640debb2 100644
--- a/frontend/components/dashboard/ValidatorOverview.vue
+++ b/frontend/components/dashboard/ValidatorOverview.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import type { ClElValue } from '~/types/api/common'
 import { type OverviewTableData } from '~/types/dashboard/overview'
@@ -14,18 +13,23 @@ const tPath = 'dashboard.validator.overview.'
 const { overview } = useValidatorDashboardOverviewStore()
 
 const formatValueWei = (value: NumberOrString): NumberOrString => {
-  return converter.value.weiToValue(value as string, { fixedDecimalCount: 4 }).label
+  return converter.value.weiToValue(value as string, { fixedDecimalCount: 4 })
+    .label
 }
 const formatValuePercent = (value: NumberOrString): NumberOrString => {
   return formatPercent(value as number)
 }
 
-const createInfo = (key: string, value: ClElValue<number | string>, formatFunction: (value: Partial<NumberOrString>) => NumberOrString) => {
+const createInfo = (
+  key: string,
+  value: ClElValue<number | string>,
+  formatFunction: (value: Partial<NumberOrString>) => NumberOrString,
+) => {
   const clValue = formatFunction(value.cl)
   const elValue = formatFunction(value.el)
   return {
     label: $t(`statistics.${key}`),
-    value: `${clValue} (CL) ${elValue} (EL)`
+    value: `${clValue} (CL) ${elValue} (EL)`,
   }
 }
 
@@ -34,55 +38,74 @@ const dataList = computed(() => {
 
   const active: OverviewTableData = {
     label: $t(`${tPath}your_online_validators`),
-    addValidatorModal: true
+    addValidatorModal: true,
   }
   const efficiency: OverviewTableData = {
-    label: $t(`${tPath}24h_efficiency`)
+    label: $t(`${tPath}24h_efficiency`),
   }
   const rewards: OverviewTableData = {
-    label: $t(`${tPath}30d_rewards`)
+    label: $t(`${tPath}30d_rewards`),
   }
   const apr: OverviewTableData = {
-    label: $t(`${tPath}30d_apr`)
+    label: $t(`${tPath}30d_apr`),
   }
   const list: OverviewTableData[] = [active, efficiency, rewards, apr]
 
   const onlineClass = v?.validators.online ? 'positive' : ''
   const offlineClass = v?.validators.online ? 'negative' : ''
-  active.value = { label: `<span class="${onlineClass}">${v?.validators.online ?? 0}</span> / <span class="${offlineClass}">${v?.validators.offline ?? 0}</span>` }
+  active.value = {
+    // eslint-disable-next-line vue/max-len
+    label: `<span class="${onlineClass}">${v?.validators.online ?? 0}</span> / <span class="${offlineClass}">${v?.validators.offline ?? 0}</span>`,
+  }
   active.additonalValues = [
     [
       { label: v?.validators.pending ?? 0 },
       { label: v?.validators.exited ?? 0 },
-      { label: v?.validators.slashed ?? 0 }
+      { label: v?.validators.slashed ?? 0 },
     ],
     [
       { label: $t('validator_state.pending') },
       { label: $t('validator_state.exited') },
-      { label: $t('validator_state.slashed') }
-    ]
+      { label: $t('validator_state.slashed') },
+    ],
   ]
 
   efficiency.value = { label: formatPercent(v?.efficiency.last_24h ?? 0) }
-  efficiency.infos = TimeFrames.map(k => ({ label: $t(`statistics.${k}`), value: formatValuePercent(v?.efficiency[k] ?? 0) }))
+  efficiency.infos = TimeFrames.map(k => ({
+    label: $t(`statistics.${k}`),
+    value: formatValuePercent(v?.efficiency[k] ?? 0),
+  }))
 
-  rewards.value = converter.value.weiToValue(totalElCl(v?.rewards.last_30d ?? { el: '0', cl: '0' }), { addPlus: true })
-  rewards.infos = TimeFrames.map(k => createInfo(k, v?.rewards[k] ?? { el: '0', cl: '0' }, formatValueWei))
+  rewards.value = converter.value.weiToValue(
+    totalElCl(v?.rewards.last_30d ?? { el: '0', cl: '0' }),
+    { addPlus: true },
+  )
+  rewards.infos = TimeFrames.map(k =>
+    createInfo(k, v?.rewards[k] ?? { el: '0', cl: '0' }, formatValueWei),
+  )
 
-  apr.value = { label: formatPercent(totalElClNumbers(v?.apr.last_30d ?? { cl: 0, el: 0 })) }
-  apr.infos = TimeFrames.map(k => createInfo(k, v?.apr[k] ?? { cl: 0, el: 0 }, formatValuePercent))
+  apr.value = {
+    label: formatPercent(totalElClNumbers(v?.apr.last_30d ?? { cl: 0, el: 0 })),
+  }
+  apr.infos = TimeFrames.map(k =>
+    createInfo(k, v?.apr[k] ?? { cl: 0, el: 0 }, formatValuePercent),
+  )
   return list
 })
-
 </script>
+
 <template>
   <div class="container">
-    <DashboardOverviewBox v-for="data in dataList" :key="data.label" :data="data" />
+    <DashboardOverviewBox
+      v-for="data in dataList"
+      :key="data.label"
+      :data="data"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
+@use "~/assets/css/main.scss";
 .container {
   @include main.container;
   display: flex;
diff --git a/frontend/components/dashboard/ValidatorSlotViz.vue b/frontend/components/dashboard/ValidatorSlotViz.vue
index a0dd9a20a..054db067c 100644
--- a/frontend/components/dashboard/ValidatorSlotViz.vue
+++ b/frontend/components/dashboard/ValidatorSlotViz.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import { orderBy } from 'lodash-es'
 import { useValidatorSlotVizStore } from '~/stores/dashboard/useValidatorSlotVizStore'
 import { getGroupLabel } from '~/utils/dashboard/group'
@@ -14,14 +13,24 @@ const { tick, resetTick } = useInterval(12)
 
 const { slotViz, refreshSlotViz } = useValidatorSlotVizStore()
 
-await useAsyncData('validator_dashboard_slot_viz', () => refreshSlotViz(dashboardKey.value))
+await useAsyncData('validator_dashboard_slot_viz', () =>
+  refreshSlotViz(dashboardKey.value),
+)
 
-watch(() => [dashboardKey.value, selectedGroups.value, tick.value], (newValue, oldValue) => {
-  if (oldValue && (newValue[0] !== oldValue[0] || (newValue[1] as number[]).length !== (oldValue[1] as number[]).length)) {
-    resetTick()
-  }
-  refreshSlotViz(dashboardKey.value, selectedGroups.value)
-}, { immediate: true })
+watch(
+  () => [dashboardKey.value, selectedGroups.value, tick.value],
+  (newValue, oldValue) => {
+    if (
+      oldValue
+      && (newValue[0] !== oldValue[0]
+      || (newValue[1] as number[]).length !== (oldValue[1] as number[]).length)
+    ) {
+      resetTick()
+    }
+    refreshSlotViz(dashboardKey.value, selectedGroups.value)
+  },
+  { immediate: true },
+)
 
 const initiallyHideVisible = computed(() => {
   if (validatorCount.value === undefined) {
@@ -34,7 +43,11 @@ const groups = computed(() => {
   if (!overview.value?.groups) {
     return []
   }
-  return orderBy(overview.value.groups.filter(g => !!g.count), [g => g.name.toLowerCase()], 'asc')
+  return orderBy(
+    overview.value.groups.filter(g => !!g.count),
+    [g => g.name.toLowerCase()],
+    'asc',
+  )
 })
 
 const selectAll = () => {
@@ -44,27 +57,38 @@ const selectAll = () => {
 const toggleAll = () => {
   if (selectedGroups.value.length < groups.value.length) {
     selectAll()
-  } else {
+  }
+  else {
     selectedGroups.value = []
   }
 }
 
-watch(groups, (newGroups, oldGroups) => {
-  if (!newGroups || newGroups.length <= 0) {
-    selectedGroups.value = []
-  }
-  if (!oldGroups || JSON.stringify(newGroups) !== JSON.stringify(oldGroups)) {
-    selectAll()
-  }
-}, { immediate: true })
+watch(
+  groups,
+  (newGroups, oldGroups) => {
+    if (!newGroups || newGroups.length <= 0) {
+      selectedGroups.value = []
+    }
+    if (!oldGroups || JSON.stringify(newGroups) !== JSON.stringify(oldGroups)) {
+      selectAll()
+    }
+  },
+  { immediate: true },
+)
 
 const selectedLabel = computed(() => {
-  if (selectedGroups.value.length === 0 || selectedGroups.value.length === groups.value.length) {
+  if (
+    selectedGroups.value.length === 0
+    || selectedGroups.value.length === groups.value.length
+  ) {
     return $t('dashboard.group.selection.all')
   }
-  return orderBy(selectedGroups.value.map(id => getGroupLabel($t, id, groups.value)), [g => g.toLowerCase()], 'asc').join(', ')
+  return orderBy(
+    selectedGroups.value.map(id => getGroupLabel($t, id, groups.value)),
+    [g => g.toLowerCase()],
+    'asc',
+  ).join(', ')
 })
-
 </script>
 
 <template>
@@ -86,8 +110,11 @@ const selectedLabel = computed(() => {
         class="group-selection"
       >
         <template #header>
-          <span class="pointer" @click="toggleAll">
-            {{ $t('dashboard.group.selection.all') }}
+          <span
+            class="pointer"
+            @click="toggleAll"
+          >
+            {{ $t("dashboard.group.selection.all") }}
           </span>
         </template>
         <template #value>
diff --git a/frontend/components/dashboard/chart/DashboardChartSummaryChartFilter.vue b/frontend/components/dashboard/chart/DashboardChartSummaryChartFilter.vue
index f895a4911..3a9fe7da9 100644
--- a/frontend/components/dashboard/chart/DashboardChartSummaryChartFilter.vue
+++ b/frontend/components/dashboard/chart/DashboardChartSummaryChartFilter.vue
@@ -1,6 +1,14 @@
 <script lang="ts" setup>
 import { orderBy } from 'lodash-es'
-import { type AggregationTimeframe, AggregationTimeframes, type EfficiencyType, EfficiencyTypes, SUMMARY_CHART_GROUP_NETWORK_AVERAGE, SUMMARY_CHART_GROUP_TOTAL, type SummaryChartFilter } from '~/types/dashboard/summary'
+import {
+  type AggregationTimeframe,
+  AggregationTimeframes,
+  type EfficiencyType,
+  EfficiencyTypes,
+  SUMMARY_CHART_GROUP_NETWORK_AVERAGE,
+  SUMMARY_CHART_GROUP_TOTAL,
+  type SummaryChartFilter,
+} from '~/types/dashboard/summary'
 import { getGroupLabel } from '~/utils/dashboard/group'
 
 const { t: $t } = useTranslation()
@@ -16,11 +24,13 @@ const aggregationList = computed(() => {
   return AggregationTimeframes.map(a => ({
     id: a,
     label: $t(`time_frames.${a}`),
-    disabled: (overview.value?.chart_history_seconds?.[a] ?? 0) === 0
+    disabled: (overview.value?.chart_history_seconds?.[a] ?? 0) === 0,
   }))
 })
 
-watch(aggregation, (a) => { chartFilter.value.aggregation = a })
+watch(aggregation, (a) => {
+  chartFilter.value.aggregation = a
+})
 const aggregationDisabled = ({ disabled }: { disabled: boolean }) => disabled
 
 /** efficiency */
@@ -28,36 +38,56 @@ const efficiency = ref<EfficiencyType>(chartFilter.value.efficiency)
 
 const efficiencyList = EfficiencyTypes.map(e => ({
   id: e,
-  label: $t(`dashboard.validator.summary.chart.efficiency.${e}`)
+  label: $t(`dashboard.validator.summary.chart.efficiency.${e}`),
 }))
-watch(efficiency, (e) => { chartFilter.value.efficiency = e })
+watch(efficiency, (e) => {
+  chartFilter.value.efficiency = e
+})
 
 /** groups */
-const total = ref(!chartFilter.value.initialised || chartFilter.value.groupIds.includes(SUMMARY_CHART_GROUP_TOTAL))
-const average = ref(!chartFilter.value.initialised || chartFilter.value.groupIds.includes(SUMMARY_CHART_GROUP_NETWORK_AVERAGE))
+const total = ref(
+  !chartFilter.value.initialised
+  || chartFilter.value.groupIds.includes(SUMMARY_CHART_GROUP_TOTAL),
+)
+const average = ref(
+  !chartFilter.value.initialised
+  || chartFilter.value.groupIds.includes(SUMMARY_CHART_GROUP_NETWORK_AVERAGE),
+)
 const groups = computed(() => {
   if (!overview.value?.groups) {
     return []
   }
-  return orderBy(overview.value.groups.filter(g => !!g.count), [g => g.name.toLowerCase()], 'asc')
+  return orderBy(
+    overview.value.groups.filter(g => !!g.count),
+    [g => g.name.toLowerCase()],
+    'asc',
+  )
 })
 const selectedGroups = ref<number[]>([])
-watch(groups, (list) => {
-  // when groups change we reset the selected groups
-  selectedGroups.value = list.map(g => g.id)
-}, { immediate: true })
-
-watch([selectedGroups, total, average], ([list, t, a]) => {
-  const groupIds: number[] = [...list]
-  if (t) {
-    groupIds.push(SUMMARY_CHART_GROUP_TOTAL)
-  }
-  if (a) {
-    groupIds.push(SUMMARY_CHART_GROUP_NETWORK_AVERAGE)
-  }
-  chartFilter.value.groupIds = groupIds
-  chartFilter.value.initialised = true
-}, { immediate: true })
+watch(
+  groups,
+  (list) => {
+    // when groups change we reset the selected groups
+    selectedGroups.value = list.map(g => g.id)
+  },
+  { immediate: true },
+)
+
+watch(
+  [selectedGroups, total, average],
+  ([list, t, a]) => {
+    const groupIds: number[] = [...list]
+    if (t) {
+      groupIds.push(SUMMARY_CHART_GROUP_TOTAL)
+    }
+    if (a) {
+      groupIds.push(SUMMARY_CHART_GROUP_NETWORK_AVERAGE)
+    }
+    chartFilter.value.groupIds = groupIds
+    chartFilter.value.initialised = true
+  },
+  { immediate: true },
+)
 
 const selectAllGroups = () => {
   selectedGroups.value = groups.value.map(g => g.id)
@@ -66,13 +96,18 @@ const selectAllGroups = () => {
 const toggleGroups = () => {
   if (selectedGroups.value.length < groups.value.length) {
     selectAllGroups()
-  } else {
+  }
+  else {
     selectedGroups.value = []
   }
 }
 
 const selectedLabel = computed(() => {
-  const list: string[] = orderBy(selectedGroups.value.map(id => getGroupLabel($t, id, groups.value)), [g => g.toLowerCase()], 'asc')
+  const list: string[] = orderBy(
+    selectedGroups.value.map(id => getGroupLabel($t, id, groups.value)),
+    [g => g.toLowerCase()],
+    'asc',
+  )
 
   if (average.value) {
     list.splice(0, 0, $t('dashboard.validator.summary.chart.average'))
@@ -100,10 +135,19 @@ const selectedLabel = computed(() => {
     >
       <template #option="slotProps">
         <span>{{ slotProps.label }}</span>
-        <BcPremiumGem class="premium-gem" @click.stop="() => undefined" />
+        <BcPremiumGem
+          class="premium-gem"
+          @click.stop="() => undefined"
+        />
       </template>
     </BcDropdown>
-    <BcDropdown v-model="efficiency" :options="efficiencyList" option-value="id" option-label="label" class="small" />
+    <BcDropdown
+      v-model="efficiency"
+      :options="efficiencyList"
+      option-value="id"
+      option-label="label"
+      class="small"
+    />
 
     <MultiSelect
       v-model="selectedGroups"
@@ -114,15 +158,30 @@ const selectedLabel = computed(() => {
     >
       <template #header>
         <div class="special-groups">
-          <Checkbox v-model="total" input-id="total" :binary="true" />
-          <label for="total">{{ $t("dashboard.validator.summary.chart.total") }}</label>
+          <Checkbox
+            v-model="total"
+            input-id="total"
+            :binary="true"
+          />
+          <label for="total">{{
+            $t("dashboard.validator.summary.chart.total")
+          }}</label>
         </div>
         <div class="special-groups">
-          <Checkbox v-model="average" input-id="average" :binary="true" />
-          <label for="average">{{ $t("dashboard.validator.summary.chart.average") }}</label>
+          <Checkbox
+            v-model="average"
+            input-id="average"
+            :binary="true"
+          />
+          <label for="average">{{
+            $t("dashboard.validator.summary.chart.average")
+          }}</label>
         </div>
-        <span class="pointer" @click="toggleGroups">
-          {{ $t('dashboard.group.selection.all') }}
+        <span
+          class="pointer"
+          @click="toggleGroups"
+        >
+          {{ $t("dashboard.group.selection.all") }}
         </span>
       </template>
       <template #value>
@@ -131,16 +190,17 @@ const selectedLabel = computed(() => {
     </MultiSelect>
   </div>
 </template>
+
 <style lang="scss" scoped>
 .chart-filter-row {
   display: flex;
   gap: var(--padding);
-  :deep(>.p-multiselect),
-  :deep(>.p-dropdown){
+  :deep(> .p-multiselect),
+  :deep(> .p-dropdown) {
     max-width: 200px;
     @media (max-width: 1000px) {
       max-width: 76px;
-  }
+    }
   }
 }
 
@@ -157,7 +217,11 @@ const selectedLabel = computed(() => {
   align-items: center;
 }
 
-:global(.summary-chart-aggregation-panel .p-dropdown-item:not(.p-disabled) .premium-gem) {
+:global(
+    .summary-chart-aggregation-panel
+      .p-dropdown-item:not(.p-disabled)
+      .premium-gem
+  ) {
   display: none;
 }
 </style>
diff --git a/frontend/components/dashboard/chart/RewardsChart.vue b/frontend/components/dashboard/chart/RewardsChart.vue
index 035811124..b0fcf8128 100644
--- a/frontend/components/dashboard/chart/RewardsChart.vue
+++ b/frontend/components/dashboard/chart/RewardsChart.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 import { h, render } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -10,15 +9,23 @@ import {
   GridComponent,
   DataZoomComponent,
   DatasetComponent,
-  TransformComponent
+  TransformComponent,
 } from 'echarts/components'
 import VChart from 'vue-echarts'
 import type { ECBasicOption } from 'echarts/types/dist/shared'
 import { BigNumber } from '@ethersproject/bignumber'
-import { getChartTextColor, getChartTooltipBackgroundColor, getRewardChartColors, getRewardsChartLineColor } from '~/utils/colors'
+import {
+  getChartTextColor,
+  getChartTooltipBackgroundColor,
+  getRewardChartColors,
+  getRewardsChartLineColor,
+} from '~/utils/colors'
 import { type InternalGetValidatorDashboardRewardsChartResponse } from '~/types/api/validator_dashboard'
 import { type ChartData } from '~/types/api/common'
-import { type RewardChartSeries, type RewardChartGroupData } from '~/types/dashboard/rewards'
+import {
+  type RewardChartSeries,
+  type RewardChartGroupData,
+} from '~/types/dashboard/rewards'
 import { getGroupLabel } from '~/utils/dashboard/group'
 import { DashboardChartRewardsChartTooltip } from '#components'
 import { API_PATH } from '~/types/customFetch'
@@ -29,7 +36,11 @@ const { formatEpochToDate } = useFormat()
 const { networkInfo } = useNetworkStore()
 const networkNativeELcurrency = computed(() => networkInfo.value.elCurrency)
 const { currency } = useCurrency()
-const currencyLabel = computed(() => !currency.value || currency.value === 'NAT' ? networkNativeELcurrency.value : currency.value)
+const currencyLabel = computed(() =>
+  !currency.value || currency.value === 'NAT'
+    ? networkNativeELcurrency.value
+    : currency.value,
+)
 
 use([
   GridComponent,
@@ -39,7 +50,7 @@ use([
   DataZoomComponent,
   TransformComponent,
   BarChart,
-  CanvasRenderer
+  CanvasRenderer,
 ])
 
 const { fetch } = useCustomFetch()
@@ -49,17 +60,25 @@ const { dashboardKey, isPrivate: groupsEnabled } = useDashboardKey()
 const data = ref<ChartData<number, string> | undefined>()
 const isLoading = ref(false)
 
-await useAsyncData('validator_dashboard_rewards_chart', async () => {
-  if (dashboardKey.value === undefined) {
-    data.value = undefined
-    return
-  }
-  isLoading.value = true
-  const res = await fetch<InternalGetValidatorDashboardRewardsChartResponse>(API_PATH.DASHBOARD_VALIDATOR_REWARDS_CHART, undefined, { dashboardKey: dashboardKey.value })
+await useAsyncData(
+  'validator_dashboard_rewards_chart',
+  async () => {
+    if (dashboardKey.value === undefined) {
+      data.value = undefined
+      return
+    }
+    isLoading.value = true
+    const res = await fetch<InternalGetValidatorDashboardRewardsChartResponse>(
+      API_PATH.DASHBOARD_VALIDATOR_REWARDS_CHART,
+      undefined,
+      { dashboardKey: dashboardKey.value },
+    )
 
-  isLoading.value = false
-  data.value = res.data
-}, { watch: [dashboardKey], server: false, immediate: true })
+    isLoading.value = false
+    data.value = res.data
+  },
+  { watch: [dashboardKey], server: false, immediate: true },
+)
 
 const { groups } = useValidatorDashboardGroups()
 
@@ -73,7 +92,7 @@ const colors = computed(() => {
     data: getRewardChartColors(),
     label: getChartTextColor(colorMode.value),
     line: getRewardsChartLineColor(colorMode.value),
-    background: getChartTooltipBackgroundColor(colorMode.value)
+    background: getChartTooltipBackgroundColor(colorMode.value),
   }
 })
 
@@ -85,13 +104,17 @@ const fontWeightMedium = parseInt(styles.getPropertyValue('--roboto-medium'))
 
 const valueFormatter = computed(() => {
   const decimals = isFiat(currency.value) ? 2 : 5
-  return (value: number) => `${trim(value, decimals, decimals)} ${currencyLabel.value}`
+  return (value: number) =>
+    `${trim(value, decimals, decimals)} ${currencyLabel.value}`
 })
 
 const mapSeriesData = (data: RewardChartSeries) => {
   data.bigData.forEach((bigValue, index) => {
     if (!bigValue.isZero()) {
-      const formatted = converter.value.weiToValue(bigValue, { fixedDecimalCount: 5, minUnit: 'MAIN' })
+      const formatted = converter.value.weiToValue(bigValue, {
+        fixedDecimalCount: 5,
+        minUnit: 'MAIN',
+      })
       data.formatedData[index] = formatted
       const parsedValue = parseFloat(`${formatted.label}`.split(' ')[0])
       if (!isNaN(parsedValue)) {
@@ -118,8 +141,10 @@ const series = computed<RewardChartSeries[]>(() => {
     barMaxWidth: 33,
     groups: [],
     bigData: Array.from(Array(categoryCount)).map(() => BigNumber.from('0')),
-    formatedData: Array.from(Array(categoryCount)).map(() => ({ label: `0 ${currencyLabel.value}` })),
-    data: Array.from(Array(categoryCount)).map(() => 0)
+    formatedData: Array.from(Array(categoryCount)).map(() => ({
+      label: `0 ${currencyLabel.value}`,
+    })),
+    data: Array.from(Array(categoryCount)).map(() => 0),
   }
   const elSeries: RewardChartSeries = {
     id: 2,
@@ -131,8 +156,10 @@ const series = computed<RewardChartSeries[]>(() => {
     barMaxWidth: 33,
     groups: [],
     bigData: Array.from(Array(categoryCount)).map(() => BigNumber.from('0')),
-    formatedData: Array.from(Array(categoryCount)).map(() => ({ label: `0 ${currencyLabel.value}` })),
-    data: Array.from(Array(categoryCount)).map(() => 0)
+    formatedData: Array.from(Array(categoryCount)).map(() => ({
+      label: `0 ${currencyLabel.value}`,
+    })),
+    data: Array.from(Array(categoryCount)).map(() => 0),
   }
   list.push(elSeries)
   list.push(clSeries)
@@ -140,21 +167,25 @@ const series = computed<RewardChartSeries[]>(() => {
     let name
     if (!groupsEnabled) {
       name = $t('dashboard.validator.rewards.chart.rewards')
-    } else {
+    }
+    else {
       name = getGroupLabel($t, group.id, groups.value)
     }
     const newData: RewardChartGroupData = {
       id: group.id,
       bigData: [],
-      name
+      name,
     }
     for (let i = 0; i < categoryCount; i++) {
-      const bigValue = group.data[i] ? BigNumber.from(group.data[i]) : BigNumber.from('0')
+      const bigValue = group.data[i]
+        ? BigNumber.from(group.data[i])
+        : BigNumber.from('0')
 
       if (!bigValue.isZero()) {
         if (group.property === 'el') {
           elSeries.bigData[i] = elSeries.bigData[i].add(bigValue)
-        } else {
+        }
+        else {
           clSeries.bigData[i] = clSeries.bigData[i].add(bigValue)
         }
       }
@@ -163,7 +194,8 @@ const series = computed<RewardChartSeries[]>(() => {
 
     if (group.property === 'el') {
       elSeries.groups.push(newData)
-    } else {
+    }
+    else {
       clSeries.groups.push(newData)
     }
   })
@@ -183,7 +215,7 @@ const option = computed<ECBasicOption | undefined>(() => {
       top: 20,
       bottom: 80,
       left: '5%',
-      right: '5%'
+      right: '5%',
     },
     xAxis: {
       type: 'category',
@@ -199,8 +231,8 @@ const option = computed<ECBasicOption | undefined>(() => {
           }
 
           return `${date}\n${$t('common.epoch')} ${value}`
-        }
-      }
+        },
+      },
     },
     yAxis: {
       type: 'value',
@@ -209,20 +241,20 @@ const option = computed<ECBasicOption | undefined>(() => {
         formatter: valueFormatter.value,
         fontWeight: fontWeightMedium,
         fontSize: textSize,
-        padding: [0, 10, 0, 0]
+        padding: [0, 10, 0, 0],
       },
       splitLine: {
         lineStyle: {
-          color: colors.value.line
-        }
-      }
+          color: colors.value.line,
+        },
+      },
     },
     series: series.value,
     textStyle: {
       fontFamily,
       fontSize: textSize,
       fontWeight: fontWeightLight,
-      color: colors.value.label
+      color: colors.value.label,
     },
     legend: {
       type: 'scroll',
@@ -231,8 +263,8 @@ const option = computed<ECBasicOption | undefined>(() => {
       textStyle: {
         color: colors.value.label,
         fontSize: textSize,
-        fontWeight: fontWeightMedium
-      }
+        fontWeight: fontWeightMedium,
+      },
     },
     tooltip: {
       order: 'seriesAsc',
@@ -240,14 +272,23 @@ const option = computed<ECBasicOption | undefined>(() => {
       triggerOn: 'click',
       padding: 0,
       borderColor: colors.value.background,
-      formatter (params: any): HTMLElement {
+      formatter(params: any): HTMLElement {
         const startEpoch = parseInt(params[0].axisValue)
         const dataIndex = params[0].dataIndex
 
         const d = document.createElement('div')
-        render(h(DashboardChartRewardsChartTooltip, { t: $t, startEpoch, dataIndex, series: series.value, weiToValue: converter.value.weiToValue }), d)
+        render(
+          h(DashboardChartRewardsChartTooltip, {
+            t: $t,
+            startEpoch,
+            dataIndex,
+            series: series.value,
+            weiToValue: converter.value.weiToValue,
+          }),
+          d,
+        )
         return d
-      }
+      },
     },
     dataZoom: {
       type: 'slider',
@@ -255,21 +296,30 @@ const option = computed<ECBasicOption | undefined>(() => {
       end: 100,
       dataBackground: {
         lineStyle: {
-          color: colors.value.label
+          color: colors.value.label,
         },
         areaStyle: {
-          color: colors.value.label
-        }
+          color: colors.value.label,
+        },
       },
-      borderColor: colors.value.label
-    }
+      borderColor: colors.value.label,
+    },
   }
 })
 </script>
 
 <template>
   <ClientOnly>
-    <BcLoadingSpinner v-if="isLoading" :loading="true" alignment="center" />
-    <VChart v-else class="chart" :option="option" autoresize />
+    <BcLoadingSpinner
+      v-if="isLoading"
+      :loading="true"
+      alignment="center"
+    />
+    <VChart
+      v-else
+      class="chart"
+      :option="option"
+      autoresize
+    />
   </ClientOnly>
 </template>
diff --git a/frontend/components/dashboard/chart/RewardsChartTooltip.vue b/frontend/components/dashboard/chart/RewardsChartTooltip.vue
index 1b400d391..181d16c3f 100644
--- a/frontend/components/dashboard/chart/RewardsChartTooltip.vue
+++ b/frontend/components/dashboard/chart/RewardsChartTooltip.vue
@@ -1,29 +1,32 @@
 <script lang="ts" setup>
 import { type ComposerTranslation } from 'vue-i18n'
 import { BigNumber } from '@ethersproject/bignumber'
-import type { RewardChartGroupData, RewardChartSeries } from '~/types/dashboard/rewards'
+import type {
+  RewardChartGroupData,
+  RewardChartSeries,
+} from '~/types/dashboard/rewards'
 import type { WeiToValue } from '~/types/value'
 
 interface Props {
-  t: ComposerTranslation, // required as dynamically created components via render do not have the proper app context,
-  weiToValue: WeiToValue,
-  startEpoch: number,
-  dataIndex: number,
+  t: ComposerTranslation // required as dynamically created components via render do not have the proper app context,
+  weiToValue: WeiToValue
+  startEpoch: number
+  dataIndex: number
   series: RewardChartSeries[]
 }
 
 const props = defineProps<Props>()
 
 interface GroupValue {
-  id: number,
-  name: string,
+  id: number
+  name: string
   value: string
 }
 
 interface Series {
-  name: string,
-  value: string,
-  className?: string,
+  name: string
+  value: string
+  className?: string
   groups: GroupValue[]
 }
 
@@ -36,7 +39,7 @@ const mapData = (groups: RewardChartGroupData[]): GroupValue[] => {
   return sort.map(g => ({
     name: g.name,
     id: g.id,
-    value: `${props.weiToValue(g.bigData[props.dataIndex]).label}`
+    value: `${props.weiToValue(g.bigData[props.dataIndex]).label}`,
   }))
 }
 
@@ -45,22 +48,25 @@ const data = computed<Series[]>(() => {
     name: props.series[1].name,
     className: 'cl',
     value: props.series[1].formatedData[props.dataIndex].label as string,
-    groups: mapData(props.series[1].groups)
+    groups: mapData(props.series[1].groups),
   }
   const cl: Series = {
     name: props.series[0].name,
     className: 'el',
     value: props.series[0].formatedData[props.dataIndex].label as string,
-    groups: mapData(props.series[0].groups)
+    groups: mapData(props.series[0].groups),
   }
 
   const totalGroups = props.series[0].groups.map((g) => {
-    const elValue = props.series[1].groups.find(elG => elG.id === g.id)?.bigData?.[props.dataIndex] ?? BigNumber.from(0)
+    const elValue
+      = props.series[1].groups.find(elG => elG.id === g.id)?.bigData?.[
+        props.dataIndex
+      ] ?? BigNumber.from(0)
     const bigData = [...g.bigData]
     bigData[props.dataIndex] = bigData[props.dataIndex].add(elValue)
     return {
       ...g,
-      bigData
+      bigData,
     }
   })
   props.series[1].groups.forEach((g) => {
@@ -71,23 +77,38 @@ const data = computed<Series[]>(() => {
 
   const total: Series = {
     name: props.t('dashboard.validator.rewards.chart.total'),
-    value: `${props.weiToValue(props.series[1].bigData[props.dataIndex].add(props.series[0].bigData[props.dataIndex])).label}`,
-    groups: mapData(totalGroups)
+    value: `${
+      props
+        .weiToValue(props.series[1].bigData[props.dataIndex]
+        .add(props.series[0].bigData[props.dataIndex])).label
+    }`,
+    groups: mapData(totalGroups),
   }
   return [el, cl, total]
 })
-
 </script>
 
 <template>
   <div class="tooltip-container">
-    <DashboardChartTooltipHeader :t="t" :start-epoch="startEpoch" />
-    <div v-for="(entry, index) in data" :key="index">
+    <DashboardChartTooltipHeader
+      :t="t"
+      :start-epoch="startEpoch"
+    />
+    <div
+      v-for="(entry, index) in data"
+      :key="index"
+    >
       <div class="header">
-        <span class="circle" :class="entry.className" /><b>{{ entry.name }}: {{ entry.value }}</b>
+        <span
+          class="circle"
+          :class="entry.className"
+        /><b>{{ entry.name }}: {{ entry.value }}</b>
       </div>
       <ol>
-        <li v-for="group in entry.groups" :key="group.id">
+        <li
+          v-for="group in entry.groups"
+          :key="group.id"
+        >
           {{ group.name }}: {{ group.value }}
         </li>
       </ol>
@@ -96,7 +117,7 @@ const data = computed<Series[]>(() => {
 </template>
 
 <style lang="scss">
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/fonts.scss";
 
 .tooltip-container {
   @include fonts.tooltip_text_bold;
diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue
index 7dd9a519f..4b7e17143 100644
--- a/frontend/components/dashboard/chart/SummaryChart.vue
+++ b/frontend/components/dashboard/chart/SummaryChart.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 import { h, render } from 'vue'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -10,16 +9,25 @@ import {
   TooltipComponent,
   LegendComponent,
   GridComponent,
-  DataZoomComponent
+  DataZoomComponent,
 } from 'echarts/components'
 import VChart from 'vue-echarts'
 import SummaryChartTooltip from './SummaryChartTooltip.vue'
-import { getSummaryChartGroupColors, getChartTextColor, getChartTooltipBackgroundColor } from '~/utils/colors'
+import {
+  getSummaryChartGroupColors,
+  getChartTextColor,
+  getChartTooltipBackgroundColor,
+} from '~/utils/colors'
 import { type InternalGetValidatorDashboardSummaryChartResponse } from '~/types/api/validator_dashboard'
 import { getGroupLabel } from '~/utils/dashboard/group'
 import { formatTsToTime } from '~/utils/format'
 import { API_PATH } from '~/types/customFetch'
-import { SUMMARY_CHART_GROUP_NETWORK_AVERAGE, SUMMARY_CHART_GROUP_TOTAL, type AggregationTimeframe, type SummaryChartFilter } from '~/types/dashboard/summary'
+import {
+  SUMMARY_CHART_GROUP_NETWORK_AVERAGE,
+  SUMMARY_CHART_GROUP_TOTAL,
+  type AggregationTimeframe,
+  type SummaryChartFilter,
+} from '~/types/dashboard/summary'
 
 use([
   CanvasRenderer,
@@ -27,7 +35,7 @@ use([
   TooltipComponent,
   LegendComponent,
   DataZoomComponent,
-  GridComponent
+  GridComponent,
 ])
 
 interface Props {
@@ -46,22 +54,30 @@ const { overview } = useValidatorDashboardOverviewStore()
 const { groups } = useValidatorDashboardGroups()
 const { latestState } = useLatestStateStore()
 const latestSlot = ref(latestState.value?.current_slot || 0)
-const { value: timeFrames, temp: tempTimeFrames, bounce: bounceTimeFrames, instant: instantTimeFrames } = useDebounceValue<{from?:number, to:number}>({ from: undefined, to: 0 }, 1000)
+const {
+  value: timeFrames,
+  temp: tempTimeFrames,
+  bounce: bounceTimeFrames,
+  instant: instantTimeFrames,
+} = useDebounceValue<{ from?: number, to: number }>({ from: undefined, to: 0 }, 1000)
 const currentZoom = { start: 80, end: 100 }
 const MAX_DATA_POINTS = 200
 
-const { value: filter, bounce: bounceFilter } = useDebounceValue(props.filter, 1000)
+const { value: filter, bounce: bounceFilter } = useDebounceValue(
+  props.filter,
+  1000,
+)
 const aggregation = ref<AggregationTimeframe>('hourly')
 const isLoading = ref(false)
 let reloadCounter = 0
 
 interface SeriesObject {
-    data: number[];
-    type: string;
-    smooth: boolean;
-    symbol: string,
-    name: string;
-  }
+  data: number[]
+  type: string
+  smooth: boolean
+  symbol: string
+  name: string
+}
 // we don't want the series to be responsive to not trigger an auto update of the option computed
 const series = ref<SeriesObject[]>([])
 const chartCategories = ref<number[]>([])
@@ -71,7 +87,8 @@ const categories = computed<number[]>(() => {
   if (latestSlot.value <= 5 || !aggregation.value) {
     return []
   }
-  const maxSeconds = overview.value?.chart_history_seconds?.[aggregation.value] ?? 0
+  const maxSeconds
+    = overview.value?.chart_history_seconds?.[aggregation.value] ?? 0
   if (!maxSeconds) {
     return []
   }
@@ -104,7 +121,7 @@ const categories = computed<number[]>(() => {
   return list
 })
 
-const updateTimestamp = ()=>{
+const updateTimestamp = () => {
   latestSlot.value = latestState.value?.current_slot || 0
 }
 
@@ -134,7 +151,19 @@ const loadData = async () => {
   isLoading.value = true
   const newSeries: SeriesObject[] = []
   try {
-    const res = await fetch<InternalGetValidatorDashboardSummaryChartResponse>(API_PATH.DASHBOARD_SUMMARY_CHART, { query: { after_ts: timeFrames.value.from, before_ts: timeFrames.value.to, group_ids: props.filter?.groupIds.join(','), efficiency_type: props.filter?.efficiency, aggregation: aggregation.value } }, { dashboardKey: dashboardKey.value })
+    const res = await fetch<InternalGetValidatorDashboardSummaryChartResponse>(
+      API_PATH.DASHBOARD_SUMMARY_CHART,
+      {
+        query: {
+          after_ts: timeFrames.value.from,
+          before_ts: timeFrames.value.to,
+          group_ids: props.filter?.groupIds.join(','),
+          efficiency_type: props.filter?.efficiency,
+          aggregation: aggregation.value,
+        },
+      },
+      { dashboardKey: dashboardKey.value },
+    )
     if (currentCounter !== reloadCounter) {
       return // make sure we only use the data from the latest call
     }
@@ -146,9 +175,11 @@ const loadData = async () => {
         let name: string
         if (element.id === SUMMARY_CHART_GROUP_TOTAL) {
           name = $t('dashboard.validator.summary.chart.total')
-        } else if (element.id === SUMMARY_CHART_GROUP_NETWORK_AVERAGE) {
+        }
+        else if (element.id === SUMMARY_CHART_GROUP_NETWORK_AVERAGE) {
           name = $t('dashboard.validator.summary.chart.average')
-        } else {
+        }
+        else {
           name = getGroupLabel($t, element.id, groups.value, allGroups)
         }
         const newObj: SeriesObject = {
@@ -156,12 +187,13 @@ const loadData = async () => {
           type: 'line',
           smooth: false,
           symbol: 'none',
-          name
+          name,
         }
         newSeries.push(newObj)
       })
     }
-  } catch (e) {
+  }
+  catch (e) {
     // TODO: Maybe we want to show an error here (either a toast or inline centred in the chart space)
   }
   isLoading.value = false
@@ -169,15 +201,19 @@ const loadData = async () => {
   series.value = newSeries
 }
 
-watch([dashboardKey, filter, aggregation, timeFrames], () => {
-  loadData()
-}, { immediate: true })
+watch(
+  [dashboardKey, filter, aggregation, timeFrames],
+  () => {
+    loadData()
+  },
+  { immediate: true },
+)
 
 const colors = computed(() => {
   return {
     groups: getSummaryChartGroupColors(colorMode.value),
     label: getChartTextColor(colorMode.value),
-    background: getChartTooltipBackgroundColor(colorMode.value)
+    background: getChartTooltipBackgroundColor(colorMode.value),
   }
 })
 
@@ -189,7 +225,14 @@ const fontWeightMedium = parseInt(styles.getPropertyValue('--roboto-medium'))
 let lastMouseYPos = 0
 
 const formatTSToDate = (value: string) => {
-  return formatGoTimestamp(Number(value), undefined, 'absolute', 'narrow', $t('locales.date'), false)
+  return formatGoTimestamp(
+    Number(value),
+    undefined,
+    'absolute',
+    'narrow',
+    $t('locales.date'),
+    false,
+  )
 }
 const formatTSToEpoch = (value: string) => {
   return `${$t('common.epoch')} ${tsToEpoch(Number(value))}`
@@ -220,53 +263,60 @@ const option = computed(() => {
       containLabel: true,
       top: 10,
       left: '5%',
-      right: '5%'
+      right: '5%',
     },
     xAxis: [
-      { // xAxis of the chart
+      {
+        // xAxis of the chart
         type: 'category',
         data: chartCategories.value,
         boundaryGap: false,
         axisLabel: {
           fontSize: textSize,
           lineHeight: 20,
-          formatter: formatTimestamp
-        }
+          formatter: formatTimestamp,
+        },
       },
-      { // xAxis of the time frame selection
+      {
+        // xAxis of the time frame selection
         type: 'category',
         data: categories.value,
         show: false,
-        boundaryGap: false
-      }
+        boundaryGap: false,
+      },
     ],
     series: series.value,
     yAxis: {
-      name: $t(`dashboard.validator.summary.chart.efficiency.${props.filter?.efficiency}`),
+      name: $t(
+        `dashboard.validator.summary.chart.efficiency.${props.filter?.efficiency}`,
+      ),
       nameLocation: 'center',
       nameTextStyle: {
-        padding: [0, 0, 30, 0]
+        padding: [0, 0, 30, 0],
       },
       type: 'value',
       minInterval: 10,
       maxInterval: 20,
-      min: (range: any) => range.min >= 0 ? Math.max(0, 10 * Math.ceil(range.min / 10 - 1)) : 10 * Math.ceil(range.min / 10 - 1),
+      min: (range: any) =>
+        range.min >= 0
+          ? Math.max(0, 10 * Math.ceil(range.min / 10 - 1))
+          : 10 * Math.ceil(range.min / 10 - 1),
       silent: true,
       axisLabel: {
         formatter: '{value} %',
-        fontSize: textSize
+        fontSize: textSize,
       },
       splitLine: {
         lineStyle: {
-          color: colors.value.label
-        }
-      }
+          color: colors.value.label,
+        },
+      },
     },
     textStyle: {
       fontFamily,
       fontSize: textSize,
       fontWeight: fontWeightLight,
-      color: colors.value.label
+      color: colors.value.label,
     },
     color: colors.value.groups,
     legend: {
@@ -276,21 +326,24 @@ const option = computed(() => {
       textStyle: {
         color: colors.value.label,
         fontSize: textSize,
-        fontWeight: fontWeightMedium
-      }
+        fontWeight: fontWeightMedium,
+      },
     },
     tooltip: {
       order: 'seriesAsc',
       trigger: 'axis',
       padding: 0,
       borderColor: colors.value.background,
-      formatter (params: any): HTMLElement {
+      formatter(params: any): HTMLElement {
         const ts = parseInt(params[0].axisValue)
         let lastDif = 0
         let highlightGroup = ''
         const groupInfos = params.map((param: any) => {
           if (chart.value) {
-            const distance = Math.abs(lastMouseYPos - chart.value.convertToPixel({ yAxisIndex: 0 }, param.value))
+            const distance = Math.abs(
+              lastMouseYPos
+              - chart.value.convertToPixel({ yAxisIndex: 0 }, param.value),
+            )
             if (distance < lastDif || !highlightGroup) {
               lastDif = distance
               highlightGroup = param.seriesName
@@ -299,13 +352,23 @@ const option = computed(() => {
           return {
             name: param.seriesName,
             efficiency: param.value,
-            color: param.color
+            color: param.color,
           }
         })
         const d = document.createElement('div')
-        render(h(SummaryChartTooltip, { t: $t, ts, efficiencyType: props.filter?.efficiency || 'all', aggregation: aggregation.value, groupInfos, highlightGroup }), d)
+        render(
+          h(SummaryChartTooltip, {
+            t: $t,
+            ts,
+            efficiencyType: props.filter?.efficiency || 'all',
+            aggregation: aggregation.value,
+            groupInfos,
+            highlightGroup,
+          }),
+          d,
+        )
         return d
-      }
+      },
     },
     dataZoom: {
       type: 'slider',
@@ -316,14 +379,14 @@ const option = computed(() => {
       xAxisIndex: [1],
       dataBackground: {
         lineStyle: {
-          color: colors.value.label
+          color: colors.value.label,
         },
         areaStyle: {
-          color: colors.value.label
-        }
+          color: colors.value.label,
+        },
       },
-      borderColor: colors.value.label
-    }
+      borderColor: colors.value.label,
+    },
   }
 })
 
@@ -334,7 +397,7 @@ const getDataZoomValues = () => {
   const end: number = get(chartOptions, 'dataZoom[0].end', 100) as number
   return {
     start,
-    end
+    end,
   }
 }
 
@@ -345,14 +408,14 @@ const getZoomTimestamps = () => {
     return
   }
   const zoomValues = getDataZoomValues()
-  const toIndex = Math.ceil(max / 100 * zoomValues.end)
-  const fromIndex = Math.floor(max / 100 * zoomValues.start)
+  const toIndex = Math.ceil((max / 100) * zoomValues.end)
+  const fromIndex = Math.floor((max / 100) * zoomValues.start)
   return {
     ...zoomValues,
     toIndex,
     toTs: categories.value[toIndex],
     fromIndex,
-    fromTs: categories.value[fromIndex]
+    fromTs: categories.value[fromIndex],
   }
 }
 
@@ -370,24 +433,33 @@ const validateDataZoom = (instant?: boolean) => {
   // check for max data points
   if (timestamps.toIndex - timestamps.fromIndex > MAX_DATA_POINTS) {
     if (timestamps.start !== currentZoom.start) {
-      timestamps.toIndex = Math.min(timestamps.fromIndex + MAX_DATA_POINTS, max)
-      timestamps.end = timestamps.toIndex * 100 / max
+      timestamps.toIndex = Math.min(
+        timestamps.fromIndex + MAX_DATA_POINTS,
+        max,
+      )
+      timestamps.end = (timestamps.toIndex * 100) / max
       timestamps.toTs = categories.value[timestamps.toIndex]
-    } else {
+    }
+    else {
       timestamps.fromIndex = Math.max(0, timestamps.toIndex - MAX_DATA_POINTS)
-      timestamps.start = timestamps.fromIndex * 100 / max
+      timestamps.start = (timestamps.fromIndex * 100) / max
       timestamps.fromTs = categories.value[timestamps.fromIndex]
     }
   }
   // to index must be greater then from index
   if (timestamps.toIndex <= timestamps.fromIndex) {
-    if ((timestamps.start !== currentZoom.start && timestamps.fromIndex !== max) || timestamps.toIndex === 0) {
+    if (
+      (timestamps.start !== currentZoom.start
+      && timestamps.fromIndex !== max)
+      || timestamps.toIndex === 0
+    ) {
       timestamps.toIndex = timestamps.fromIndex + 1
-      timestamps.end = timestamps.toIndex * 100 / max
+      timestamps.end = (timestamps.toIndex * 100) / max
       timestamps.toTs = categories.value[timestamps.toIndex]
-    } else {
+    }
+    else {
       timestamps.fromIndex = timestamps.toIndex - 1
-      timestamps.start = timestamps.fromIndex * 100 / max
+      timestamps.start = (timestamps.fromIndex * 100) / max
       timestamps.fromTs = categories.value[timestamps.fromIndex]
     }
   }
@@ -396,23 +468,30 @@ const validateDataZoom = (instant?: boolean) => {
   const bufferSteps = aggregation.value === 'epoch' ? 0 : 5
   // if we are on the far left of the time frame we omit the fromTs to avoid going to far and cause a webservice error
   // in that case the backend will go back depending on the max secons of the dashboard settings
-  if(timestamps.fromIndex <= bufferSteps){
+  if (timestamps.fromIndex <= bufferSteps) {
     fromTs = undefined
   }
   const newTimeFrames = {
     from: fromTs,
-    to: timestamps.toTs
+    to: timestamps.toTs,
   }
   // when the timeframes of the slider change we bounce the new timeframe for the chart
-  if (tempTimeFrames.value.to !== newTimeFrames.to || tempTimeFrames.value.from !== newTimeFrames.from) {
+  if (
+    tempTimeFrames.value.to !== newTimeFrames.to
+    || tempTimeFrames.value.from !== newTimeFrames.from
+  ) {
     if (instant) {
       instantTimeFrames(newTimeFrames)
-    } else {
+    }
+    else {
       bounceTimeFrames(newTimeFrames, false, true)
     }
   }
   // if we had to fix the slider ranges we need to update the zoom settings
-  if (timestamps.start !== currentZoom.start || timestamps.end !== currentZoom.end) {
+  if (
+    timestamps.start !== currentZoom.start
+    || timestamps.end !== currentZoom.end
+  ) {
     currentZoom.end = timestamps.end
     currentZoom.start = timestamps.start
 
@@ -421,14 +500,15 @@ const validateDataZoom = (instant?: boolean) => {
       if (get(chart.value?.getOption(), 'dataZoom[0]')) {
         chart.value?.dispatchAction({
           type: 'dataZoom',
-          ...currentZoom
+          ...currentZoom,
         })
-      } else {
+      }
+      else {
         chart.value?.setOption({
           dataZoom: {
             ...(get(chart.value, 'xAxis[1]') || {}),
-            ...currentZoom
-          }
+            ...currentZoom,
+          },
         })
       }
     })
@@ -453,16 +533,33 @@ const onDatazoom = () => {
 const onMouseMove = (e: MouseEvent) => {
   lastMouseYPos = e.offsetY
 }
-
 </script>
 
 <template>
-  <div class="summary-chart-container" @mousemove="onMouseMove">
+  <div
+    class="summary-chart-container"
+    @mousemove="onMouseMove"
+  >
     <ClientOnly>
-      <VChart ref="chart" class="chart" :option="option" autoresize @datazoom="onDatazoom" />
-      <BcLoadingSpinner v-if="isLoading" class="loading-spinner" :loading="true" alignment="center" />
-      <div v-if="!isLoading && !series?.length" class="no-data" alignment="center">
-        {{ $t('dashboard.validator.summary.chart.no_data') }}
+      <VChart
+        ref="chart"
+        class="chart"
+        :option="option"
+        autoresize
+        @datazoom="onDatazoom"
+      />
+      <BcLoadingSpinner
+        v-if="isLoading"
+        class="loading-spinner"
+        :loading="true"
+        alignment="center"
+      />
+      <div
+        v-if="!isLoading && !series?.length"
+        class="no-data"
+        alignment="center"
+      >
+        {{ $t("dashboard.validator.summary.chart.no_data") }}
       </div>
     </ClientOnly>
   </div>
diff --git a/frontend/components/dashboard/chart/SummaryChartTooltip.vue b/frontend/components/dashboard/chart/SummaryChartTooltip.vue
index cc1e06f21..5eab596f7 100644
--- a/frontend/components/dashboard/chart/SummaryChartTooltip.vue
+++ b/frontend/components/dashboard/chart/SummaryChartTooltip.vue
@@ -1,44 +1,57 @@
 <script lang="ts" setup>
 import { type ComposerTranslation } from 'vue-i18n'
-import { type AggregationTimeframe, type EfficiencyType } from '~/types/dashboard/summary'
+import {
+  type AggregationTimeframe,
+  type EfficiencyType,
+} from '~/types/dashboard/summary'
 
 interface Props {
-  t: ComposerTranslation, // required as dynamically created components via render do not have the proper app context
-  ts: number,
-  aggregation: AggregationTimeframe,
-  efficiencyType: EfficiencyType,
+  t: ComposerTranslation // required as dynamically created components via render do not have the proper app context
+  ts: number
+  aggregation: AggregationTimeframe
+  efficiencyType: EfficiencyType
   groupInfos: {
-    name: string,
-    efficiency: number,
+    name: string
+    efficiency: number
     color: string
-  }[],
+  }[]
   highlightGroup?: string
 }
 
 defineProps<Props>()
-
 </script>
 
 <template>
   <div class="tooltip-container">
-    <DashboardChartTooltipHeader :t="t" :ts="ts" :aggregation="aggregation" :efficiency-type="efficiencyType" />
+    <DashboardChartTooltipHeader
+      :t="t"
+      :ts="ts"
+      :aggregation="aggregation"
+      :efficiency-type="efficiencyType"
+    />
     <div
       v-for="(entry, index) in groupInfos"
       :key="index"
       class="line-container"
       :class="{ highlight: entry.name === highlightGroup }"
     >
-      <div class="circle" :style="{ 'background-color': entry.color }" />
+      <div
+        class="circle"
+        :style="{ 'background-color': entry.color }"
+      />
       <div class="name">
         {{ entry.name }}:
       </div>
-      <BcFormatPercent class="efficiency" :percent="entry.efficiency" />
+      <BcFormatPercent
+        class="efficiency"
+        :percent="entry.efficiency"
+      />
     </div>
   </div>
 </template>
 
 <style lang="scss">
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/fonts.scss";
 
 .tooltip-container {
   background-color: var(--tooltip-background);
@@ -64,7 +77,6 @@ defineProps<Props>()
     }
 
     &:not(.highlight) {
-
       .efficiency,
       .name {
         opacity: 0.5;
@@ -72,7 +84,6 @@ defineProps<Props>()
     }
 
     &.highlight {
-
       .efficiency,
       .name {
         font-weight: var(--tooltip_text_bold_font_weight);
diff --git a/frontend/components/dashboard/chart/TooltipHeader.vue b/frontend/components/dashboard/chart/TooltipHeader.vue
index cab0c75fc..3a4fd4ee1 100644
--- a/frontend/components/dashboard/chart/TooltipHeader.vue
+++ b/frontend/components/dashboard/chart/TooltipHeader.vue
@@ -1,15 +1,18 @@
 <script lang="ts" setup>
 import { type ComposerTranslation } from 'vue-i18n'
 import { useNetworkStore } from '~/stores/useNetworkStore'
-import { type AggregationTimeframe, type EfficiencyType } from '~/types/dashboard/summary'
+import {
+  type AggregationTimeframe,
+  type EfficiencyType,
+} from '~/types/dashboard/summary'
 import { ONE_HOUR, ONE_DAY, ONE_WEEK } from '~/utils/format'
 
 interface Props {
-  t: ComposerTranslation, // required as dynamically created components via render do not have the proper app context,
-  ts?: number,
-  startEpoch?: number,
-  aggregation?: AggregationTimeframe,
-  efficiencyType?: EfficiencyType,
+  t: ComposerTranslation // required as dynamically created components via render do not have the proper app context,
+  ts?: number
+  startEpoch?: number
+  aggregation?: AggregationTimeframe
+  efficiencyType?: EfficiencyType
 }
 
 const props = defineProps<Props>()
@@ -47,11 +50,25 @@ const dateText = computed(() => {
   if (!startTs.value) {
     return
   }
-  const date = formatGoTimestamp(startTs.value, undefined, 'absolute', 'narrow', props.t('locales.date'), true)
+  const date = formatGoTimestamp(
+    startTs.value,
+    undefined,
+    'absolute',
+    'narrow',
+    props.t('locales.date'),
+    true,
+  )
   if (!endTs.value) {
     return date
   }
-  const endDate = formatGoTimestamp(endTs.value, undefined, 'absolute', 'narrow', props.t('locales.date'), true)
+  const endDate = formatGoTimestamp(
+    endTs.value,
+    undefined,
+    'absolute',
+    'narrow',
+    props.t('locales.date'),
+    true,
+  )
 
   return `${date} - ${endDate}`
 })
@@ -70,7 +87,9 @@ const epochText = computed(() => {
 
 const title = computed(() => {
   if (props.efficiencyType) {
-    return props.t(`dashboard.validator.summary.chart.efficiency.${props.efficiencyType}`)
+    return props.t(
+      `dashboard.validator.summary.chart.efficiency.${props.efficiencyType}`,
+    )
   }
   return undefined
 })
@@ -78,11 +97,7 @@ const title = computed(() => {
 
 <template>
   <b>
-    <div>
-      {{ title }} {{ dateText }}
-    </div>
-    <div>
-      {{ t('common.epoch') }} {{ epochText }}
-    </div>
+    <div>{{ title }} {{ dateText }}</div>
+    <div>{{ t("common.epoch") }} {{ epochText }}</div>
   </b>
 </template>
diff --git a/frontend/components/dashboard/creation/DashboardCreationController.vue b/frontend/components/dashboard/creation/DashboardCreationController.vue
index cd0201a7a..e1425bd49 100644
--- a/frontend/components/dashboard/creation/DashboardCreationController.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationController.vue
@@ -1,16 +1,20 @@
 <script lang="ts" setup>
 import { type DashboardType } from '~/types/dashboard'
-import { type DashboardCreationDisplayMode, type DashboardCreationState } from '~/types/dashboard/creation'
+import {
+  type DashboardCreationDisplayMode,
+  type DashboardCreationState,
+} from '~/types/dashboard/creation'
 import { type ChainIDs } from '~/types/network'
 import { API_PATH } from '~/types/customFetch'
 
-const { createValidatorDashboard, createAccountDashboard } = useUserDashboardStore()
+const { createValidatorDashboard, createAccountDashboard }
+  = useUserDashboardStore()
 const { dashboards } = useUserDashboardStore()
 const { user, isLoggedIn } = useUserStore()
 const { currentNetwork } = useNetworkStore()
 
 interface Props {
-  displayMode: DashboardCreationDisplayMode,
+  displayMode: DashboardCreationDisplayMode
   initiallyVisible?: boolean
 }
 const props = defineProps<Props>()
@@ -29,27 +33,40 @@ const { fetch } = useCustomFetch()
 const route = useRoute()
 
 const maxDashboards = computed(() => {
-  // TODO: currently there is no value for "amount of account dashboards", using "amount of validator dashboards" instead for now
+  // TODO: currently there is no value for "amount of account dashboards", using
+  //  "amount of validator dashboards" instead for now
   return user.value?.premium_perks.validator_dashboards ?? 1
 })
 const accountsDisabled = computed(() => {
   // TODO: Once account dashboards are being tackled, use something like
-  // return !showInDevelopment || (dashboards.value?.account_dashboards?.length ?? 0) >= maxDashboards.value  || (!!forcedDashboardType.value && forcedDashboardType.value !== 'account')
+  // return !showInDevelopment || (dashboards.value?.account_dashboards?.length ?? 0) >= maxDashboards.value
+  // || (!!forcedDashboardType.value && forcedDashboardType.value !== 'account')
 
-  return !showInDevelopment || (!!forcedDashboardType.value && forcedDashboardType.value !== 'account')
+  return (
+    !showInDevelopment
+    || (!!forcedDashboardType.value && forcedDashboardType.value !== 'account')
+  )
 })
 const validatorsDisabled = computed(() => {
-  return (dashboards.value?.validator_dashboards?.length ?? 0) >= maxDashboards.value || (!!forcedDashboardType.value && forcedDashboardType.value !== 'validator')
+  return (
+    (dashboards.value?.validator_dashboards?.length ?? 0)
+    >= maxDashboards.value
+    || (!!forcedDashboardType.value && forcedDashboardType.value !== 'validator')
+  )
 })
 
-function show (forcedType : DashboardType|'' = '', forcedNetwork: ChainIDs = 0) {
+function show(
+  forcedType: DashboardType | '' = '',
+  forcedNetwork: ChainIDs = 0,
+) {
   visible.value = true
   forcedNetworkIfValidatorDashboard = forcedNetwork
   type.value = forcedDashboardType.value = forcedType
   if (!type.value) {
     if (!validatorsDisabled.value) {
       type.value = 'validator'
-    } else if (!accountsDisabled.value) {
+    }
+    else if (!accountsDisabled.value) {
       type.value = 'account'
     }
   }
@@ -59,53 +76,76 @@ function show (forcedType : DashboardType|'' = '', forcedNetwork: ChainIDs = 0)
 }
 
 defineExpose({
-  show
+  show,
 })
 if (props.initiallyVisible) {
   show()
 }
 
-function onNext () {
+function onNext() {
   if (state.value === 'type') {
     if (type.value === 'account') {
       createDashboard()
-    } else
-      if (forcedNetworkIfValidatorDashboard) {
-        createDashboard()
-      } else {
-        state.value = 'network'
-      }
-  } else if (state.value === 'network') {
+    }
+    else if (forcedNetworkIfValidatorDashboard) {
+      createDashboard()
+    }
+    else {
+      state.value = 'network'
+    }
+  }
+  else if (state.value === 'network') {
     createDashboard()
   }
 }
 
-function onBack () {
+function onBack() {
   if (state.value === 'network') {
     state.value = 'type'
   }
 }
 
-async function createDashboard () {
+async function createDashboard() {
   visible.value = false
-  const matchingType = route.name === 'dashboard-id' && type.value === 'validator'
+  const matchingType
+    = route.name === 'dashboard-id' && type.value === 'validator'
 
-  const publicKey = matchingType && !isLoggedIn.value ? dashboardKey.value : undefined
+  const publicKey
+    = matchingType && !isLoggedIn.value ? dashboardKey.value : undefined
   if (type.value === 'account') {
     if (!name.value) {
       return
     }
     const response = await createAccountDashboard(name.value, publicKey)
 
-    await navigateTo(`/account-dashboard/${response?.hash ?? response?.id ?? 1}`)
-  } else if (type.value === 'validator') {
+    await navigateTo(
+      `/account-dashboard/${response?.hash ?? response?.id ?? 1}`,
+    )
+  }
+  else if (type.value === 'validator') {
     if (!name.value || !network.value) {
       return
     }
 
-    const response = await createValidatorDashboard(name.value, network.value, publicKey)
-    if (matchingType && publicEntities.value?.length && response?.id && response.id > 0) {
-      await fetch(API_PATH.DASHBOARD_VALIDATOR_MANAGEMENT, { method: 'POST', body: { validators: publicEntities.value, group_id: '0' } }, { dashboardKey: response.id })
+    const response = await createValidatorDashboard(
+      name.value,
+      network.value,
+      publicKey,
+    )
+    if (
+      matchingType
+      && publicEntities.value?.length
+      && response?.id
+      && response.id > 0
+    ) {
+      await fetch(
+        API_PATH.DASHBOARD_VALIDATOR_MANAGEMENT,
+        {
+          method: 'POST',
+          body: { validators: publicEntities.value, group_id: '0' },
+        },
+        { dashboardKey: response.id },
+      )
     }
     await navigateTo(`/dashboard/${response?.hash ?? response?.id ?? 1}`)
   }
@@ -113,7 +153,10 @@ async function createDashboard () {
 </script>
 
 <template>
-  <BcDialog v-if="visible && props.displayMode === 'modal'" v-model="visible">
+  <BcDialog
+    v-if="visible && props.displayMode === 'modal'"
+    v-model="visible"
+  >
     <DashboardCreationTypeMask
       v-if="state === 'type'"
       v-model:state="state"
diff --git a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
index 3667fa904..caf4c9232 100644
--- a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
@@ -3,33 +3,50 @@ import { IconNetwork } from '#components'
 import { ChainInfo, type ChainIDs, isL1 } from '~/types/network'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 
-const { currentNetwork, availableNetworks, isNetworkDisabled } = useNetworkStore()
+const { currentNetwork, availableNetworks, isNetworkDisabled }
+  = useNetworkStore()
 const { t: $t } = useTranslation()
 
-const emit = defineEmits<{(e: 'next' | 'back'): void }>()
+const emit = defineEmits<{ (e: 'next' | 'back'): void }>()
 const network = defineModel<ChainIDs>('network', { required: true })
-const selection = usePrimitiveRefBridge<ChainIDs, `${ChainIDs}`|''>(network, net => `${net || ''}`, sel => Number(sel || 0))
+const selection = usePrimitiveRefBridge<ChainIDs, `${ChainIDs}` | ''>(
+  network,
+  net => `${net || ''}`,
+  sel => Number(sel || 0),
+)
 
 const buttonList = shallowRef<any[]>([])
 
-watch(currentNetwork, (id) => { network.value = id })
+watch(currentNetwork, (id) => {
+  network.value = id
+})
 
-watch(availableNetworks, () => {
-  buttonList.value = [] as any[]
-  availableNetworks.value.forEach((chainId) => {
-    if (isL1(chainId)) {
-      buttonList.value.push({
-        value: String(chainId),
-        text: ChainInfo[chainId].nameParts[0],
-        subText: isNetworkDisabled(chainId) ? $t('common.coming_soon') : ChainInfo[chainId].nameParts[1],
-        disabled: isNetworkDisabled(chainId),
-        component: IconNetwork,
-        componentProps: { chainId, colored: false, harmonizePerceivedSize: true },
-        componentClass: 'dashboard-creation-button-network-icon'
-      })
-    }
-  })
-}, { immediate: true })
+watch(
+  availableNetworks,
+  () => {
+    buttonList.value = [] as any[]
+    availableNetworks.value.forEach((chainId) => {
+      if (isL1(chainId)) {
+        buttonList.value.push({
+          value: String(chainId),
+          text: ChainInfo[chainId].nameParts[0],
+          subText: isNetworkDisabled(chainId)
+            ? $t('common.coming_soon')
+            : ChainInfo[chainId].nameParts[1],
+          disabled: isNetworkDisabled(chainId),
+          component: IconNetwork,
+          componentProps: {
+            chainId,
+            colored: false,
+            harmonizePerceivedSize: true,
+          },
+          componentClass: 'dashboard-creation-button-network-icon',
+        })
+      }
+    })
+  },
+  { immediate: true },
+)
 
 const continueDisabled = computed(() => {
   return !selection.value
@@ -40,10 +57,10 @@ const continueDisabled = computed(() => {
   <div class="mask-container">
     <div class="element-container">
       <div class="big_text">
-        {{ $t('dashboard.creation.title') }}
+        {{ $t("dashboard.creation.title") }}
       </div>
       <div class="subtitle_text">
-        {{ $t('dashboard.creation.network.subtitle') }}
+        {{ $t("dashboard.creation.network.subtitle") }}
       </div>
       <BcToggleSingleBar
         v-model="selection"
@@ -54,10 +71,13 @@ const continueDisabled = computed(() => {
       />
       <div class="row-container">
         <Button @click="emit('back')">
-          {{ $t('navigation.back') }}
+          {{ $t("navigation.back") }}
         </Button>
-        <Button :disabled="continueDisabled" @click="emit('next')">
-          {{ $t('navigation.continue') }}
+        <Button
+          :disabled="continueDisabled"
+          @click="emit('next')"
+        >
+          {{ $t("navigation.continue") }}
         </Button>
       </div>
     </div>
@@ -65,33 +85,33 @@ const continueDisabled = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-  .mask-container{
-    width: 100%;
-    .element-container{
-      display: flex;
-      flex-direction: column;
-      gap: var(--padding);
+.mask-container {
+  width: 100%;
+  .element-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding);
 
-      .single-bar{
-        height: 100px;
-      }
+    .single-bar {
+      height: 100px;
+    }
 
-      .row-container{
-        display: flex;
-        justify-content: flex-end;
-        gap: var(--padding);
-      }
+    .row-container {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--padding);
+    }
 
-      button {
-        width: 90px;
-      }
+    button {
+      width: 90px;
     }
   }
+}
 </style>
 
 <style lang="scss">
-  .dashboard-creation-button-network-icon {
-    width: 100%;
-    height: 100%;
-  }
+.dashboard-creation-button-network-icon {
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue b/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
index dc57e8359..bc94293bd 100644
--- a/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
@@ -6,7 +6,7 @@ const { t: $t } = useTranslation()
 const { isLoggedIn } = useUserStore()
 
 interface Props {
-  accountsDisabled: boolean,
+  accountsDisabled: boolean
   validatorsDisabled: boolean
 }
 const props = defineProps<Props>()
@@ -18,23 +18,28 @@ const typeButtons = [
     text: $t('dashboard.creation.type.validators'),
     value: 'validator',
     component: IconValidator,
-    disabled: props.validatorsDisabled
+    disabled: props.validatorsDisabled,
   },
   {
     text: $t('dashboard.creation.type.accounts'),
     subText: $t('common.coming_soon'),
     value: 'account',
     component: IconAccount,
-    disabled: props.accountsDisabled
-  }
+    disabled: props.accountsDisabled,
+  },
 ]
 
 const name = defineModel<string>('name', { required: true })
 
-const emit = defineEmits<{(e: 'next'): void }>()
+const emit = defineEmits<{ (e: 'next'): void }>()
 
 const continueDisabled = computed(() => {
-  return type.value === '' || name.value === '' || name.value.length > 32 || !REGEXP_VALID_NAME.test(name.value)
+  return (
+    type.value === ''
+    || name.value === ''
+    || name.value.length > 32
+    || !REGEXP_VALID_NAME.test(name.value)
+  )
 })
 
 const next = () => {
@@ -51,16 +56,31 @@ const next = () => {
   <div class="mask-container">
     <div class="element-container">
       <div class="big_text">
-        {{ $t('dashboard.creation.title') }}
+        {{ $t("dashboard.creation.title") }}
       </div>
       <div class="subtitle_text">
-        {{ $t('dashboard.creation.type.subtitle') }}
+        {{ $t("dashboard.creation.type.subtitle") }}
       </div>
-      <BcToggleSingleBar v-model="type" class="single-bar" :buttons="typeButtons" layout="gaudy" />
+      <BcToggleSingleBar
+        v-model="type"
+        class="single-bar"
+        :buttons="typeButtons"
+        layout="gaudy"
+      />
       <div class="row-container">
-        <InputText v-if="isLoggedIn" v-model="name" :placeholder="$t('dashboard.creation.type.placeholder')" class="input-field" @keypress.enter="next" />
-        <Button class="button" :disabled="continueDisabled" @click="next">
-          {{ $t('navigation.continue') }}
+        <InputText
+          v-if="isLoggedIn"
+          v-model="name"
+          :placeholder="$t('dashboard.creation.type.placeholder')"
+          class="input-field"
+          @keypress.enter="next"
+        />
+        <Button
+          class="button"
+          :disabled="continueDisabled"
+          @click="next"
+        >
+          {{ $t("navigation.continue") }}
         </Button>
       </div>
     </div>
@@ -68,32 +88,32 @@ const next = () => {
 </template>
 
 <style lang="scss" scoped>
-  .mask-container{
-    width: 100%;
-    .element-container{
+.mask-container {
+  width: 100%;
+  .element-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding);
+
+    .single-bar {
+      height: 100px;
+    }
+
+    .row-container {
       display: flex;
-      flex-direction: column;
+      justify-content: flex-end;
       gap: var(--padding);
 
-      .single-bar{
-        height: 100px;
+      input {
+        min-width: 250px;
+        max-width: 320px;
+        width: 100%;
       }
 
-      .row-container{
-        display: flex;
-        justify-content: flex-end;
-        gap: var(--padding);
-
-        input {
-            min-width: 250px;
-            max-width: 320px;
-            width: 100%;
-        }
-
-        button {
-            width: 90px;
-        }
+      button {
+        width: 90px;
       }
     }
   }
+}
 </style>
diff --git a/frontend/components/dashboard/group/GroupLabel.vue b/frontend/components/dashboard/group/GroupLabel.vue
index 98720c812..5286c9b37 100644
--- a/frontend/components/dashboard/group/GroupLabel.vue
+++ b/frontend/components/dashboard/group/GroupLabel.vue
@@ -3,7 +3,7 @@ import type { VDBOverviewGroup } from '~/types/api/validator_dashboard'
 import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
 
 interface Props {
-  group: VDBOverviewGroup,
+  group: VDBOverviewGroup
 }
 
 const props = defineProps<Props>()
@@ -13,8 +13,11 @@ const { t: $t } = useTranslation()
 const name = computed(() => {
   if (props.group.id === DAHSHBOARDS_ALL_GROUPS_ID) {
     return $t('dashboard.group.selection.all')
-  } else if (props.group.id === 0) {
-    return props.group.name && props.group.name !== 'default' ? props.group.name : $t('dashboard.group.selection.default')
+  }
+  else if (props.group.id === 0) {
+    return props.group.name && props.group.name !== 'default'
+      ? props.group.name
+      : $t('dashboard.group.selection.default')
   }
 
   return props.group.name
diff --git a/frontend/components/dashboard/group/GroupSelection.vue b/frontend/components/dashboard/group/GroupSelection.vue
index 525b4d9fd..40536e302 100644
--- a/frontend/components/dashboard/group/GroupSelection.vue
+++ b/frontend/components/dashboard/group/GroupSelection.vue
@@ -3,17 +3,19 @@ import type { VDBOverviewGroup } from '~/types/api/validator_dashboard'
 import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
 
 interface Props {
-  includeAll?: boolean,
+  includeAll?: boolean
 }
 const props = defineProps<Props>()
 
-const emit = defineEmits<{(e: 'setGroup', value: number): void}>()
+const emit = defineEmits<{ (e: 'setGroup', value: number): void }>()
 
 const { groups } = useValidatorDashboardGroups()
 
 const list = computed<VDBOverviewGroup[]>(() => {
   if (props.includeAll) {
-    return [{ id: DAHSHBOARDS_ALL_GROUPS_ID, name: '', count: 0 }].concat(groups.value)
+    return [{ id: DAHSHBOARDS_ALL_GROUPS_ID, name: '', count: 0 }].concat(
+      groups.value,
+    )
   }
   return groups.value
 })
@@ -23,7 +25,6 @@ const selected = defineModel<number | undefined>({ required: true })
 const selectedGroup = computed(() => {
   return list.value.find(item => item.id === selected.value)
 })
-
 </script>
 
 <template>
@@ -33,9 +34,12 @@ const selectedGroup = computed(() => {
     option-value="id"
     option-label="name"
     :placeholder="$t('dashboard.group.selection.placeholder')"
-    @update:model-value="(value: number)=>emit('setGroup', value)"
+    @update:model-value="(value: number) => emit('setGroup', value)"
   >
-    <template v-if="selectedGroup" #value>
+    <template
+      v-if="selectedGroup"
+      #value
+    >
       <DashboardGroupLabel :group="selectedGroup" />
     </template>
 
diff --git a/frontend/components/dashboard/group/GroupSelectionDialog.vue b/frontend/components/dashboard/group/GroupSelectionDialog.vue
index 34b86f897..4d0cd173e 100644
--- a/frontend/components/dashboard/group/GroupSelectionDialog.vue
+++ b/frontend/components/dashboard/group/GroupSelectionDialog.vue
@@ -19,24 +19,36 @@ const closeDialog = (groupId?: number) => {
   dialogRef?.value.close(groupId)
 }
 
-watch(() => props.value?.groupId, (groupId) => {
-  if (groupId !== undefined) {
-    selectedGroupId.value = groupId
-  }
-})
-
+watch(
+  () => props.value?.groupId,
+  (groupId) => {
+    if (groupId !== undefined) {
+      selectedGroupId.value = groupId
+    }
+  },
+)
 </script>
 
 <template>
   <div class="content">
     <div class="form">
-      {{ $t('dashboard.group.selection.dialog.assign_group') }}
-      <DashboardGroupSelection v-model="selectedGroupId" class="group-selection" />
+      {{ $t("dashboard.group.selection.dialog.assign_group") }}
+      <DashboardGroupSelection
+        v-model="selectedGroupId"
+        class="group-selection"
+      />
     </div>
     <div class="footer">
-      <b v-if="props?.totalValidators"> {{ $t('dashboard.group.selection.dialog.validators_selected', {
-        total: props.totalValidators
-      }, props.selectedValidators ?? 0 ) }}</b>
+      <b v-if="props?.totalValidators">
+        {{
+          $t(
+            "dashboard.group.selection.dialog.validators_selected",
+            {
+              total: props.totalValidators,
+            },
+            props.selectedValidators ?? 0,
+          )
+        }}</b>
       <Button
         :disabled="selectedGroupId === undefined"
         type="button"
diff --git a/frontend/components/dashboard/table/DashboardTableAddValidator.vue b/frontend/components/dashboard/table/DashboardTableAddValidator.vue
index c0a4f302a..ffa629f51 100644
--- a/frontend/components/dashboard/table/DashboardTableAddValidator.vue
+++ b/frontend/components/dashboard/table/DashboardTableAddValidator.vue
@@ -1,17 +1,26 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCirclePlus } from '@fortawesome/pro-regular-svg-icons'
+
 const manageValidatorsModalVisisble = ref(false)
 
 const addValidator = () => {
   manageValidatorsModalVisisble.value = true
 }
 </script>
+
 <template>
-  <div class="empty delayed-fadein-animation" @click="addValidator">
-    <span class="big_text">{{ $t('dashboard.validator.summary.add_validator') }}</span>
+  <div
+    class="empty delayed-fadein-animation"
+    @click="addValidator"
+  >
+    <span class="big_text">{{
+      $t("dashboard.validator.summary.add_validator")
+    }}</span>
     <FontAwesomeIcon :icon="faCirclePlus" />
-    <DashboardValidatorManagementModal v-model="manageValidatorsModalVisisble" />
+    <DashboardValidatorManagementModal
+      v-model="manageValidatorsModalVisisble"
+    />
   </div>
 </template>
 
diff --git a/frontend/components/dashboard/table/DashboardTableBlocks.vue b/frontend/components/dashboard/table/DashboardTableBlocks.vue
index 1189033a8..788eab14e 100644
--- a/frontend/components/dashboard/table/DashboardTableBlocks.vue
+++ b/frontend/components/dashboard/table/DashboardTableBlocks.vue
@@ -12,8 +12,17 @@ const cursor = ref<Cursor>()
 const pageSize = ref<number>(10)
 const { t: $t } = useTranslation()
 
-const { blocks, query: lastQuery, isLoading, getBlocks } = useValidatorDashboardBlocksStore()
-const { value: query, temp: tempQuery, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
+const {
+  blocks,
+  query: lastQuery,
+  isLoading,
+  getBlocks,
+} = useValidatorDashboardBlocksStore()
+const {
+  value: query,
+  temp: tempQuery,
+  bounce: setQuery,
+} = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 
 const { groups } = useValidatorDashboardGroups()
 const { hasValidators, overview } = useValidatorDashboardOverviewStore()
@@ -29,7 +38,7 @@ const colsVisible = computed(() => {
     status: width.value > 750,
     mobileStatus: width.value < 1060,
     rewards: width.value > 650,
-    groupSort: width.value > 450
+    groupSort: width.value > 450,
   }
 })
 
@@ -40,15 +49,23 @@ const loadData = (query?: TableQueryParams) => {
   setQuery(query, true, true)
 }
 
-watch([dashboardKey, overview], () => {
-  loadData()
-}, { immediate: true })
-
-watch(query, (q) => {
-  if (q) {
-    getBlocks(dashboardKey.value, q)
-  }
-}, { immediate: true })
+watch(
+  [dashboardKey, overview],
+  () => {
+    loadData()
+  },
+  { immediate: true },
+)
+
+watch(
+  query,
+  (q) => {
+    if (q) {
+      getBlocks(dashboardKey.value, q)
+    }
+  },
+  { immediate: true },
+)
 
 const groupNameLabel = (groupId?: number) => {
   return getGroupLabel($t, groupId, groups.value, 'Σ')
@@ -81,13 +98,19 @@ const getRowClass = (row: VDBBlocksTableRow) => {
 const isRowExpandable = (row: VDBBlocksTableRow) => {
   return row.status !== 'scheduled'
 }
-
 </script>
+
 <template>
   <div>
     <BcTableControl
       :title="$t('dashboard.validator.blocks.title')"
-      :search-placeholder="$t(isPublic ? 'dashboard.validator.blocks.search_placeholder_public' : 'dashboard.validator.blocks.search_placeholder')"
+      :search-placeholder="
+        $t(
+          isPublic
+            ? 'dashboard.validator.blocks.search_placeholder_public'
+            : 'dashboard.validator.blocks.search_placeholder',
+        )
+      "
       @set-search="setSearch"
     >
       <template #table>
@@ -121,7 +144,7 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
                   target="_blank"
                   class="link"
                 >
-                  {{ slotProps.data.proposer || '-' }}
+                  {{ slotProps.data.proposer || "-" }}
                 </BcLink>
               </template>
             </Column>
@@ -137,29 +160,68 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
                 </span>
               </template>
             </Column>
-            <Column v-if="colsVisible.epoch" field="epoch" :header="$t('common.epoch')">
+            <Column
+              v-if="colsVisible.epoch"
+              field="epoch"
+              :header="$t('common.epoch')"
+            >
               <template #body="slotProps">
-                <BcLink :to="`/epoch/${slotProps.data.epoch}`" target="_blank" class="link">
-                  <BcFormatNumber :value="slotProps.data.epoch" default="-" />
+                <BcLink
+                  :to="`/epoch/${slotProps.data.epoch}`"
+                  target="_blank"
+                  class="link"
+                >
+                  <BcFormatNumber
+                    :value="slotProps.data.epoch"
+                    default="-"
+                  />
                 </BcLink>
               </template>
             </Column>
-            <Column v-if="colsVisible.slot" field="slot" :sortable="true" :header="$t('common.slot')">
+            <Column
+              v-if="colsVisible.slot"
+              field="slot"
+              :sortable="true"
+              :header="$t('common.slot')"
+            >
               <template #body="slotProps">
-                <BcLink :to="`/slot/${slotProps.data.slot}`" target="_blank" class="link">
-                  <BcFormatNumber :value="slotProps.data.slot" default="-" />
+                <BcLink
+                  :to="`/slot/${slotProps.data.slot}`"
+                  target="_blank"
+                  class="link"
+                >
+                  <BcFormatNumber
+                    :value="slotProps.data.slot"
+                    default="-"
+                  />
                 </BcLink>
               </template>
             </Column>
-            <Column field="block" :sortable="true" :header="$t('common.block')">
+            <Column
+              field="block"
+              :sortable="true"
+              :header="$t('common.block')"
+            >
               <template #body="slotProps">
-                <BcLink v-if="slotProps.data.block || slotProps.data.slot === 0" :to="`/block/${slotProps.data.block}`" target="_blank" class="link">
-                  <BcFormatNumber :value="slotProps.data.block" default="0" />
+                <BcLink
+                  v-if="slotProps.data.block || slotProps.data.slot === 0"
+                  :to="`/block/${slotProps.data.block}`"
+                  target="_blank"
+                  class="link"
+                >
+                  <BcFormatNumber
+                    :value="slotProps.data.block"
+                    default="0"
+                  />
                 </BcLink>
                 <span v-else>-</span>
               </template>
             </Column>
-            <Column v-if="colsVisible.age" field="age" body-class="age-field">
+            <Column
+              v-if="colsVisible.age"
+              field="age"
+              body-class="age-field"
+            >
               <template #header>
                 <BcTableAgeHeader />
               </template>
@@ -172,10 +234,17 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
               field="status"
               :sortable="!colsVisible.mobileStatus"
               :header="$t('dashboard.validator.col.status')"
-              :body-class="colsVisible.mobileStatus ? 'status-mobile status' : 'status'"
+              :body-class="
+                colsVisible.mobileStatus ? 'status-mobile status' : 'status'
+              "
             >
               <template #body="slotProps">
-                <BlockTableStatus class="block-status" :block-slot="slotProps.data.slot" :status="slotProps.data.status" :mobile="colsVisible.mobileStatus" />
+                <BlockTableStatus
+                  class="block-status"
+                  :block-slot="slotProps.data.slot"
+                  :status="slotProps.data.status"
+                  :mobile="colsVisible.mobileStatus"
+                />
               </template>
             </Column>
             <Column
@@ -205,7 +274,10 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
               :header="$t('dashboard.validator.col.proposer_rewards')"
             >
               <template #body="slotProps">
-                <BlockTableRewardItem :reward="slotProps.data.reward" :status="slotProps.data.status" />
+                <BlockTableRewardItem
+                  :reward="slotProps.data.reward"
+                  :status="slotProps.data.status"
+                />
               </template>
             </Column>
             <Column
@@ -223,37 +295,58 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
               <div class="expansion">
                 <div class="row">
                   <div class="label">
-                    {{ $t('common.epoch') }}:
+                    {{ $t("common.epoch") }}:
                   </div>
-                  <BcLink :to="`/epoch/${slotProps.data.epoch}`" target="_blank" class="link">
-                    <BcFormatNumber :value="slotProps.data.epoch" default="-" />
+                  <BcLink
+                    :to="`/epoch/${slotProps.data.epoch}`"
+                    target="_blank"
+                    class="link"
+                  >
+                    <BcFormatNumber
+                      :value="slotProps.data.epoch"
+                      default="-"
+                    />
                   </BcLink>
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('common.slot') }}:
+                    {{ $t("common.slot") }}:
                   </div>
-                  <BcLink :to="`/slot/${slotProps.data.slot}`" target="_blank" class="link">
-                    <BcFormatNumber :value="slotProps.data.slot" default="-" />
+                  <BcLink
+                    :to="`/slot/${slotProps.data.slot}`"
+                    target="_blank"
+                    class="link"
+                  >
+                    <BcFormatNumber
+                      :value="slotProps.data.slot"
+                      default="-"
+                    />
                   </BcLink>
                 </div>
                 <div class="row">
                   <div class="label">
                     <BcTableAgeHeader />
                   </div>
-                  <BcFormatTimePassed class="age-field" :value="slotProps.data.epoch" />
+                  <BcFormatTimePassed
+                    class="age-field"
+                    :value="slotProps.data.epoch"
+                  />
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.status') }}:
+                    {{ $t("dashboard.validator.col.status") }}:
                   </div>
                   <div class="value">
-                    <BlockTableStatus :block-slot="slotProps.data.slot" :status="slotProps.data.status" :mobile="false" />
+                    <BlockTableStatus
+                      :block-slot="slotProps.data.slot"
+                      :status="slotProps.data.status"
+                      :mobile="false"
+                    />
                   </div>
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.reward_recipient') }}:
+                    {{ $t("dashboard.validator.col.reward_recipient") }}:
                   </div>
                   <BcFormatHash
                     v-if="slotProps.data.reward_recipient?.hash"
@@ -267,13 +360,16 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.proposer_rewards') }}:
+                    {{ $t("dashboard.validator.col.proposer_rewards") }}:
                   </div>
-                  <BlockTableRewardItem :reward="slotProps.data.reward" :status="slotProps.data.status" />
+                  <BlockTableRewardItem
+                    :reward="slotProps.data.reward"
+                    :status="slotProps.data.status"
+                  />
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('block.col.graffiti') }}:
+                    {{ $t("block.col.graffiti") }}:
                   </div>
                   <BcFormatGraffiti :graffiti="slotProps.data.graffiti" />
                 </div>
@@ -293,7 +389,7 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
 @use "~/assets/css/utils.scss";
 
 :deep(.block-table) {
-  >.p-datatable-wrapper {
+  > .p-datatable-wrapper {
     min-height: 529px;
   }
 
@@ -321,7 +417,7 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
   .age-field {
     white-space: nowrap;
   }
-  tr>td.age-field {
+  tr > td.age-field {
     padding: 0 7px;
     @include utils.set-all-width(142px);
   }
@@ -346,9 +442,8 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
 
   .future-row {
     td {
-
-      >div:not(.block-status),
-      >span {
+      > div:not(.block-status),
+      > span {
         opacity: 0.5;
       }
     }
diff --git a/frontend/components/dashboard/table/DashboardTableClDeposits.vue b/frontend/components/dashboard/table/DashboardTableClDeposits.vue
index 0bf1f4b68..424e47300 100644
--- a/frontend/components/dashboard/table/DashboardTableClDeposits.vue
+++ b/frontend/components/dashboard/table/DashboardTableClDeposits.vue
@@ -15,8 +15,18 @@ const { t: $t } = useTranslation()
 
 const { slotToEpoch } = useNetworkStore()
 
-const { deposits, query: lastQuery, getDeposits, getTotalAmount, totalAmount, isLoadingDeposits, isLoadingTotal } = useValidatorDashboardClDepositsStore()
-const { value: query, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
+const {
+  deposits,
+  query: lastQuery,
+  getDeposits,
+  getTotalAmount,
+  totalAmount,
+  isLoadingDeposits,
+  isLoadingTotal,
+} = useValidatorDashboardClDepositsStore()
+const { value: query, bounce: setQuery } = useDebounceValue<
+  TableQueryParams | undefined
+>(undefined, 500)
 
 const { overview, hasValidators } = useValidatorDashboardOverviewStore()
 const { groups } = useValidatorDashboardGroups()
@@ -29,7 +39,7 @@ const colsVisible = computed(() => {
     epoch: width.value >= 1000,
     slot: width.value >= 900,
     withdrawalCredentials: width.value >= 800,
-    publicKey: width.value >= 700
+    publicKey: width.value >= 700,
   }
 })
 
@@ -40,16 +50,24 @@ const loadData = (query?: TableQueryParams) => {
   setQuery(query, true, true)
 }
 
-watch([dashboardKey, overview], () => {
-  loadData()
-  getTotalAmount(dashboardKey.value)
-}, { immediate: true })
+watch(
+  [dashboardKey, overview],
+  () => {
+    loadData()
+    getTotalAmount(dashboardKey.value)
+  },
+  { immediate: true },
+)
 
-watch(query, async (q) => {
-  if (q) {
-    await getDeposits(dashboardKey.value, q)
-  }
-}, { immediate: true })
+watch(
+  query,
+  async (q) => {
+    if (q) {
+      await getDeposits(dashboardKey.value, q)
+    }
+  },
+  { immediate: true },
+)
 
 const tableData = computed(() => {
   if (!deposits.value?.data?.length) {
@@ -59,10 +77,10 @@ const tableData = computed(() => {
     paging: deposits.value.paging,
     data: [
       {
-        amount: totalAmount.value
+        amount: totalAmount.value,
       },
-      ...deposits.value.data
-    ]
+      ...deposits.value.data,
+    ],
   }
 })
 
@@ -93,8 +111,8 @@ const getRowClass = (row: VDBConsensusDepositsTableRow) => {
 const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
   return row.index !== undefined
 }
-
 </script>
+
 <template>
   <div>
     <BcTableControl :title="$t('dashboard.validator.cl_deposits.title')">
@@ -128,7 +146,10 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
                 <span v-else>Σ</span>
               </template>
             </Column>
-            <Column field="index" :header="$t('common.index')">
+            <Column
+              field="index"
+              :header="$t('common.index')"
+            >
               <template #body="slotProps">
                 <BcLink
                   v-if="slotProps.data.index !== undefined"
@@ -186,7 +207,10 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
                 </BcLink>
               </template>
             </Column>
-            <Column field="age" body-class="age-field">
+            <Column
+              field="age"
+              body-class="age-field"
+            >
               <template #header>
                 <BcTableAgeHeader />
               </template>
@@ -213,12 +237,24 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
                 />
               </template>
             </Column>
-            <Column field="amount" :header="$t('table.amount')">
+            <Column
+              field="amount"
+              :header="$t('table.amount')"
+            >
               <template #body="slotProps">
-                <div v-if="slotProps.data.index === undefined && isLoadingTotal">
-                  <BcLoadingSpinner :loading="true" size="small" />
+                <div
+                  v-if="slotProps.data.index === undefined && isLoadingTotal"
+                >
+                  <BcLoadingSpinner
+                    :loading="true"
+                    size="small"
+                  />
                 </div>
-                <BcFormatValue v-else :value="slotProps.data.amount" :options="{ fixedDecimalCount: 0 }" />
+                <BcFormatValue
+                  v-else
+                  :value="slotProps.data.amount"
+                  :options="{ fixedDecimalCount: 0 }"
+                />
               </template>
             </Column>
             <Column
@@ -238,7 +274,7 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
               <div class="expansion">
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.public_key') }}
+                    {{ $t("dashboard.validator.col.public_key") }}
                   </div>
                   <BcFormatHash
                     :hash="slotProps.data.public_key"
@@ -248,7 +284,7 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.group') }}
+                    {{ $t("dashboard.validator.col.group") }}
                   </div>
                   <div class="value">
                     {{ groupNameLabel(slotProps.data.group_id) }}
@@ -256,7 +292,7 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('common.epoch') }}
+                    {{ $t("common.epoch") }}
                   </div>
                   <BcLink
                     v-if="slotProps.data.index !== undefined"
@@ -269,7 +305,7 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('common.slot') }}
+                    {{ $t("common.slot") }}
                   </div>
                   <BcLink
                     v-if="slotProps.data.index !== undefined"
@@ -282,7 +318,7 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.withdrawal_credential') }}
+                    {{ $t("dashboard.validator.col.withdrawal_credential") }}
                   </div>
                   <BcFormatHash
                     :hash="slotProps.data.withdrawal_credential"
@@ -292,7 +328,7 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.signature') }}
+                    {{ $t("dashboard.validator.col.signature") }}
                   </div>
                   <BcFormatHash
                     v-if="slotProps.data.index !== undefined"
@@ -316,7 +352,7 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
 @use "~/assets/css/utils.scss";
 
 :deep(.cl_deposits_table) {
-  >.p-datatable-wrapper {
+  > .p-datatable-wrapper {
     min-height: 335px;
   }
 
@@ -339,7 +375,7 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
   .age-field {
     white-space: nowrap;
   }
-  tr>td.age-field {
+  tr > td.age-field {
     padding: 0 7px;
     @include utils.set-all-width(151px);
   }
diff --git a/frontend/components/dashboard/table/DashboardTableEfficiency.vue b/frontend/components/dashboard/table/DashboardTableEfficiency.vue
index cad2d9493..653b5f8c8 100644
--- a/frontend/components/dashboard/table/DashboardTableEfficiency.vue
+++ b/frontend/components/dashboard/table/DashboardTableEfficiency.vue
@@ -2,9 +2,9 @@
 import BcTooltip from '~/components/bc/BcTooltip.vue'
 
 interface Props {
-  success: number,
-  failed: number,
-  absolute?: boolean,
+  success: number
+  failed: number
+  absolute?: boolean
   isTooltip?: boolean
 }
 const props = defineProps<Props>()
@@ -15,19 +15,35 @@ const data = computed(() => {
 
   return { failedClass, sum }
 })
-
 </script>
+
 <template>
-  <BcTooltip class="efficiency" :fit-content="true">
-    <template v-if="!isTooltip" #tooltip>
+  <BcTooltip
+    class="efficiency"
+    :fit-content="true"
+  >
+    <template
+      v-if="!isTooltip"
+      #tooltip
+    >
       <slot name="tooltip">
-        <DashboardTableEfficiency v-bind="props" :absolute="!absolute" :is-tooltip="true" />
+        <DashboardTableEfficiency
+          v-bind="props"
+          :absolute="!absolute"
+          :is-tooltip="true"
+        />
       </slot>
     </template>
     <span v-if="absolute">
-      <BcFormatNumber class="positive" :value="props.success" />
+      <BcFormatNumber
+        class="positive"
+        :value="props.success"
+      />
       <span class="slash"> / </span>
-      <BcFormatNumber :class="data.failedClass" :value="props.failed" />
+      <BcFormatNumber
+        :class="data.failedClass"
+        :value="props.failed"
+      />
     </span>
     <BcFormatPercent
       v-else
diff --git a/frontend/components/dashboard/table/DashboardTableElDeposits.vue b/frontend/components/dashboard/table/DashboardTableElDeposits.vue
index 4e93bfe99..c25db7bab 100644
--- a/frontend/components/dashboard/table/DashboardTableElDeposits.vue
+++ b/frontend/components/dashboard/table/DashboardTableElDeposits.vue
@@ -12,8 +12,18 @@ const cursor = ref<Cursor>()
 const pageSize = ref<number>(5)
 const { t: $t } = useTranslation()
 
-const { deposits, query: lastQuery, getDeposits, getTotalAmount, totalAmount, isLoadingDeposits, isLoadingTotal } = useValidatorDashboardElDepositsStore()
-const { value: query, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
+const {
+  deposits,
+  query: lastQuery,
+  getDeposits,
+  getTotalAmount,
+  totalAmount,
+  isLoadingDeposits,
+  isLoadingTotal,
+} = useValidatorDashboardElDepositsStore()
+const { value: query, bounce: setQuery } = useDebounceValue<
+  TableQueryParams | undefined
+>(undefined, 500)
 
 const { overview, hasValidators } = useValidatorDashboardOverviewStore()
 const { groups } = useValidatorDashboardGroups()
@@ -28,7 +38,7 @@ const colsVisible = computed(() => {
     depositer: width.value >= 860,
     txHash: width.value >= 760,
     valid: width.value >= 660,
-    publicKey: width.value >= 560
+    publicKey: width.value >= 560,
   }
 })
 
@@ -39,16 +49,24 @@ const loadData = (query?: TableQueryParams) => {
   setQuery(query, true, true)
 }
 
-watch([dashboardKey, overview], () => {
-  loadData()
-  getTotalAmount(dashboardKey.value)
-}, { immediate: true })
+watch(
+  [dashboardKey, overview],
+  () => {
+    loadData()
+    getTotalAmount(dashboardKey.value)
+  },
+  { immediate: true },
+)
 
-watch(query, async (q) => {
-  if (q) {
-    await getDeposits(dashboardKey.value, q)
-  }
-}, { immediate: true })
+watch(
+  query,
+  async (q) => {
+    if (q) {
+      await getDeposits(dashboardKey.value, q)
+    }
+  },
+  { immediate: true },
+)
 
 const tableData = computed(() => {
   if (!deposits.value?.data?.length) {
@@ -58,10 +76,10 @@ const tableData = computed(() => {
     paging: deposits.value.paging,
     data: [
       {
-        amount: totalAmount.value
+        amount: totalAmount.value,
       },
-      ...deposits.value.data
-    ]
+      ...deposits.value.data,
+    ],
   }
 })
 
@@ -92,8 +110,8 @@ const getRowClass = (row: VDBExecutionDepositsTableRow) => {
 const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
   return row.index !== undefined
 }
-
 </script>
+
 <template>
   <div>
     <BcTableControl :title="$t('dashboard.validator.el_deposits.title')">
@@ -128,7 +146,10 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 <span v-else>Σ</span>
               </template>
             </Column>
-            <Column field="index" :header="$t('common.index')">
+            <Column
+              field="index"
+              :header="$t('common.index')"
+            >
               <template #body="slotProps">
                 <BcLink
                   v-if="slotProps.data.index !== undefined"
@@ -170,7 +191,10 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 </BcLink>
               </template>
             </Column>
-            <Column field="age" body-class="age-field">
+            <Column
+              field="age"
+              body-class="age-field"
+            >
               <template #header>
                 <BcTableAgeHeader />
               </template>
@@ -182,7 +206,10 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 />
               </template>
             </Column>
-            <Column v-if="colsVisible.from" :header="$t('table.from')">
+            <Column
+              v-if="colsVisible.from"
+              :header="$t('table.from')"
+            >
               <template #body="slotProps">
                 <BcFormatHash
                   v-if="slotProps.data.index !== undefined"
@@ -208,9 +235,17 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 />
               </template>
             </Column>
-            <Column v-if="colsVisible.txHash" :header="$t('block.col.tx_hash')">
+            <Column
+              v-if="colsVisible.txHash"
+              :header="$t('block.col.tx_hash')"
+            >
               <template #body="slotProps">
-                <BcFormatHash v-if="slotProps.data.index !== undefined" :hash="slotProps.data.tx_hash" :no-wrap="true" type="tx" />
+                <BcFormatHash
+                  v-if="slotProps.data.index !== undefined"
+                  :hash="slotProps.data.tx_hash"
+                  :no-wrap="true"
+                  type="tx"
+                />
               </template>
             </Column>
             <Column
@@ -227,12 +262,24 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 />
               </template>
             </Column>
-            <Column field="amount" :header="$t('table.amount')">
+            <Column
+              field="amount"
+              :header="$t('table.amount')"
+            >
               <template #body="slotProps">
-                <div v-if="slotProps.data.index === undefined && isLoadingTotal">
-                  <BcLoadingSpinner :loading="true" size="small" />
+                <div
+                  v-if="slotProps.data.index === undefined && isLoadingTotal"
+                >
+                  <BcLoadingSpinner
+                    :loading="true"
+                    size="small"
+                  />
                 </div>
-                <BcFormatValue v-else :value="slotProps.data.amount" :options="{ fixedDecimalCount: 0 }" />
+                <BcFormatValue
+                  v-else
+                  :value="slotProps.data.amount"
+                  :options="{ fixedDecimalCount: 0 }"
+                />
               </template>
             </Column>
             <Column
@@ -241,20 +288,27 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
               :header="$t('table.valid')"
             >
               <template #body="slotProps">
-                <BcTableValidTag v-if="slotProps.data.index !== undefined" :valid="slotProps.data.valid" />
+                <BcTableValidTag
+                  v-if="slotProps.data.index !== undefined"
+                  :valid="slotProps.data.valid"
+                />
               </template>
             </Column>
             <template #expansion="slotProps">
               <div class="expansion">
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.public_key') }}
+                    {{ $t("dashboard.validator.col.public_key") }}
                   </div>
-                  <BcFormatHash :hash="slotProps.data.public_key" type="public_key" :no-wrap="true" />
+                  <BcFormatHash
+                    :hash="slotProps.data.public_key"
+                    type="public_key"
+                    :no-wrap="true"
+                  />
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.group') }}
+                    {{ $t("dashboard.validator.col.group") }}
                   </div>
                   <div class="value">
                     {{ groupNameLabel(slotProps.data.group_id) }}
@@ -262,15 +316,19 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('common.block') }}
+                    {{ $t("common.block") }}
                   </div>
-                  <BcLink :to="`/block/${slotProps.data.block}`" target="_blank" class="link">
+                  <BcLink
+                    :to="`/block/${slotProps.data.block}`"
+                    target="_blank"
+                    class="link"
+                  >
                     <BcFormatNumber :value="slotProps.data.block" />
                   </BcLink>
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('table.from') }}
+                    {{ $t("table.from") }}
                   </div>
                   <BcFormatHash
                     v-if="slotProps.data.index !== undefined"
@@ -282,7 +340,7 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.depositor') }}
+                    {{ $t("dashboard.validator.col.depositor") }}
                   </div>
                   <BcFormatHash
                     v-if="slotProps.data.index !== undefined"
@@ -294,19 +352,28 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('block.col.tx_hash') }}
+                    {{ $t("block.col.tx_hash") }}
                   </div>
-                  <BcFormatHash v-if="slotProps.data.index !== undefined" :hash="slotProps.data.tx_hash" :no-wrap="true" type="tx" />
+                  <BcFormatHash
+                    v-if="slotProps.data.index !== undefined"
+                    :hash="slotProps.data.tx_hash"
+                    :no-wrap="true"
+                    type="tx"
+                  />
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.withdrawal_credential') }}
+                    {{ $t("dashboard.validator.col.withdrawal_credential") }}
                   </div>
-                  <BcFormatHash :hash="slotProps.data.withdrawal_credential" type="withdrawal_credentials" :no-wrap="true" />
+                  <BcFormatHash
+                    :hash="slotProps.data.withdrawal_credential"
+                    type="withdrawal_credentials"
+                    :no-wrap="true"
+                  />
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('table.valid') }}
+                    {{ $t("table.valid") }}
                   </div>
                   <div>
                     <BcTableValidTag :valid="slotProps.data.valid" />
@@ -328,7 +395,7 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
 @use "~/assets/css/utils.scss";
 
 :deep(.el_deposits_table) {
-  >.p-datatable-wrapper {
+  > .p-datatable-wrapper {
     min-height: 335px;
   }
 
@@ -353,7 +420,7 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
   .age-field {
     white-space: nowrap;
   }
-  tr>td.age-field {
+  tr > td.age-field {
     padding: 0 7px;
     @include utils.set-all-width(110px);
   }
diff --git a/frontend/components/dashboard/table/DashboardTableRewards.vue b/frontend/components/dashboard/table/DashboardTableRewards.vue
index ca1fb3eb7..c0cf721da 100644
--- a/frontend/components/dashboard/table/DashboardTableRewards.vue
+++ b/frontend/components/dashboard/table/DashboardTableRewards.vue
@@ -2,7 +2,10 @@
 import type { DataTableSortEvent } from 'primevue/datatable'
 import type { VDBRewardsTableRow } from '~/types/api/validator_dashboard'
 import type { Cursor, TableQueryParams } from '~/types/datatable'
-import { DAHSHBOARDS_ALL_GROUPS_ID, DAHSHBOARDS_NEXT_EPOCH_ID } from '~/types/dashboard'
+import {
+  DAHSHBOARDS_ALL_GROUPS_ID,
+  DAHSHBOARDS_NEXT_EPOCH_ID,
+} from '~/types/dashboard'
 import { totalElCl } from '~/utils/bigMath'
 import { useValidatorDashboardRewardsStore } from '~/stores/dashboard/useValidatorDashboardRewardsStore'
 import { getGroupLabel } from '~/utils/dashboard/group'
@@ -16,8 +19,17 @@ const pageSize = ref<number>(10)
 const { t: $t } = useTranslation()
 const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
 
-const { rewards, query: lastQuery, isLoading, getRewards } = useValidatorDashboardRewardsStore()
-const { value: query, temp: tempQuery, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
+const {
+  rewards,
+  query: lastQuery,
+  isLoading,
+  getRewards,
+} = useValidatorDashboardRewardsStore()
+const {
+  value: query,
+  temp: tempQuery,
+  bounce: setQuery,
+} = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 const { slotViz } = useValidatorSlotVizStore()
 
 const { groups } = useValidatorDashboardGroups()
@@ -29,7 +41,7 @@ const colsVisible = computed(() => {
     duty: width.value > 1180,
     clRewards: width.value >= 900,
     elRewards: width.value >= 780,
-    age: width.value >= 660
+    age: width.value >= 660,
   }
 })
 
@@ -40,15 +52,23 @@ const loadData = (query?: TableQueryParams) => {
   setQuery(query, true, true)
 }
 
-watch([dashboardKey, overview], () => {
-  loadData()
-}, { immediate: true })
+watch(
+  [dashboardKey, overview],
+  () => {
+    loadData()
+  },
+  { immediate: true },
+)
 
-watch(query, (q) => {
-  if (q) {
-    getRewards(dashboardKey.value, q)
-  }
-}, { immediate: true })
+watch(
+  query,
+  (q) => {
+    if (q) {
+      getRewards(dashboardKey.value, q)
+    }
+  },
+  { immediate: true },
+)
 
 const groupNameLabel = (groupId?: number) => {
   return getGroupLabel($t, groupId, groups.value, 'Σ')
@@ -75,7 +95,8 @@ const setSearch = (value?: string) => {
 const getRowClass = (row: VDBRewardsTableRow) => {
   if (row.group_id === DAHSHBOARDS_ALL_GROUPS_ID) {
     return 'total-row'
-  } else if (row.group_id === DAHSHBOARDS_NEXT_EPOCH_ID) {
+  }
+  else if (row.group_id === DAHSHBOARDS_NEXT_EPOCH_ID) {
     return 'future-row'
   }
 }
@@ -112,16 +133,25 @@ const wrappedRewards = computed(() => {
   }
   return {
     paging: rewards.value.paging,
-    data: rewards.value.data.map(d => ({ ...d, identifier: `${d.epoch}-${d.group_id}` }))
+    data: rewards.value.data.map(d => ({
+      ...d,
+      identifier: `${d.epoch}-${d.group_id}`,
+    })),
   }
 })
-
 </script>
+
 <template>
   <div>
     <BcTableControl
       :title="$t('dashboard.validator.rewards.title')"
-      :search-placeholder="$t(isPublic ? 'dashboard.validator.rewards.search_placeholder_public' : 'dashboard.validator.rewards.search_placeholder')"
+      :search-placeholder="
+        $t(
+          isPublic
+            ? 'dashboard.validator.rewards.search_placeholder_public'
+            : 'dashboard.validator.rewards.search_placeholder',
+        )
+      "
       :chart-disabled="!showInDevelopment"
       @set-search="setSearch"
     >
@@ -143,14 +173,28 @@ const wrappedRewards = computed(() => {
             @sort="onSort"
             @set-page-size="setPageSize"
           >
-            <Column field="epoch" :sortable="true" body-class="epoch" header-class="epoch" :header="$t('common.epoch')">
+            <Column
+              field="epoch"
+              :sortable="true"
+              body-class="epoch"
+              header-class="epoch"
+              :header="$t('common.epoch')"
+            >
               <template #body="slotProps">
-                <BcLink :to="`/epoch/${slotProps.data.epoch}`" class="link" target="_blank">
+                <BcLink
+                  :to="`/epoch/${slotProps.data.epoch}`"
+                  class="link"
+                  target="_blank"
+                >
                   <BcFormatNumber :value="slotProps.data.epoch" />
                 </BcLink>
               </template>
             </Column>
-            <Column v-if="colsVisible.age" field="age" body-class="age-field">
+            <Column
+              v-if="colsVisible.age"
+              field="age"
+              body-class="age-field"
+            >
               <template #header>
                 <BcTableAgeHeader />
               </template>
@@ -166,10 +210,15 @@ const wrappedRewards = computed(() => {
               :header="$t('dashboard.validator.col.duty')"
             >
               <template #body="slotProps">
-                <span v-if="slotProps.data.group_id === DAHSHBOARDS_NEXT_EPOCH_ID">
+                <span
+                  v-if="slotProps.data.group_id === DAHSHBOARDS_NEXT_EPOCH_ID"
+                >
                   {{ findNextEpochDuties(slotProps.data.epoch) }}
                 </span>
-                <DashboardTableValueDuty v-else :duty="slotProps.data.duty" />
+                <DashboardTableValueDuty
+                  v-else
+                  :duty="slotProps.data.duty"
+                />
               </template>
             </Column>
             <Column
@@ -191,7 +240,9 @@ const wrappedRewards = computed(() => {
               :header="$t('dashboard.validator.summary.row.reward')"
             >
               <template #body="slotProps">
-                <div v-if="slotProps.data.group_id === DAHSHBOARDS_NEXT_EPOCH_ID">
+                <div
+                  v-if="slotProps.data.group_id === DAHSHBOARDS_NEXT_EPOCH_ID"
+                >
                   -
                 </div>
                 <BcFormatValue
@@ -210,7 +261,9 @@ const wrappedRewards = computed(() => {
               :header="$t('dashboard.validator.col.el_rewards')"
             >
               <template #body="slotProps">
-                <div v-if="slotProps.data.group_id === DAHSHBOARDS_NEXT_EPOCH_ID">
+                <div
+                  v-if="slotProps.data.group_id === DAHSHBOARDS_NEXT_EPOCH_ID"
+                >
                   -
                 </div>
                 <BcFormatValue
@@ -229,7 +282,9 @@ const wrappedRewards = computed(() => {
               :header="$t('dashboard.validator.col.cl_rewards')"
             >
               <template #body="slotProps">
-                <div v-if="slotProps.data.group_id === DAHSHBOARDS_NEXT_EPOCH_ID">
+                <div
+                  v-if="slotProps.data.group_id === DAHSHBOARDS_NEXT_EPOCH_ID"
+                >
                   -
                 </div>
                 <BcFormatValue
@@ -265,7 +320,7 @@ const wrappedRewards = computed(() => {
 @use "~/assets/css/utils.scss";
 
 :deep(.rewards-table) {
-  >.p-datatable-wrapper {
+  > .p-datatable-wrapper {
     min-height: 577px;
   }
 
@@ -289,7 +344,7 @@ const wrappedRewards = computed(() => {
   .age-field {
     white-space: nowrap;
   }
-  tr>td.age-field {
+  tr > td.age-field {
     padding: 0 7px;
     @include utils.set-all-width(205px);
   }
@@ -302,7 +357,7 @@ const wrappedRewards = computed(() => {
     }
   }
 
-  tr:has(+.total-row) {
+  tr:has(+ .total-row) {
     td {
       border-bottom-color: var(--primary-color);
     }
@@ -310,9 +365,8 @@ const wrappedRewards = computed(() => {
 
   .future-row {
     td {
-
-      >div,
-      >span {
+      > div,
+      > span {
         opacity: 0.5;
       }
     }
diff --git a/frontend/components/dashboard/table/DashboardTableRewardsDetails.vue b/frontend/components/dashboard/table/DashboardTableRewardsDetails.vue
index 90917460e..d07c4c7c6 100644
--- a/frontend/components/dashboard/table/DashboardTableRewardsDetails.vue
+++ b/frontend/components/dashboard/table/DashboardTableRewardsDetails.vue
@@ -1,8 +1,23 @@
 <script setup lang="ts">
-import { faArrowUpRightFromSquare, faSigma, faSnooze } from '@fortawesome/pro-solid-svg-icons'
+import {
+  faArrowUpRightFromSquare,
+  faSigma,
+  faSnooze,
+} from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { DashboardValidatorEpochDutiesModal, IconSlotBlockProposal, IconSlotHeadAttestation, IconSlotSlashing, IconSlotSourceAttestation, IconSlotSync, IconSlotTargetAttestation } from '#components'
-import type { VDBGroupRewardsDetails, VDBRewardsTableRow } from '~/types/api/validator_dashboard'
+import {
+  DashboardValidatorEpochDutiesModal,
+  IconSlotBlockProposal,
+  IconSlotHeadAttestation,
+  IconSlotSlashing,
+  IconSlotSourceAttestation,
+  IconSlotSync,
+  IconSlotTargetAttestation,
+} from '#components'
+import type {
+  VDBGroupRewardsDetails,
+  VDBRewardsTableRow,
+} from '~/types/api/validator_dashboard'
 import type BcTooltip from '~/components/bc/BcTooltip.vue'
 import { formatRewardValueOption } from '~/utils/dashboard/table'
 
@@ -15,7 +30,11 @@ const props = defineProps<Props>()
 const { dashboardKey } = useDashboardKey()
 
 const { t: $t } = useTranslation()
-const { details } = useValidatorDashboardRewardsDetailsStore(dashboardKey.value, props.row.group_id, props.row.epoch)
+const { details } = useValidatorDashboardRewardsDetailsStore(
+  dashboardKey.value,
+  props.row.group_id,
+  props.row.epoch,
+)
 
 const dialog = useDialog()
 
@@ -27,84 +46,95 @@ const data = computed(() => {
   const proposer = [
     {
       label: $t('dashboard.validator.rewards.proposer_rewards_cl_att'),
-      value: details.value.proposal_cl_att_inc_reward
+      value: details.value.proposal_cl_att_inc_reward,
     },
     {
       label: $t('dashboard.validator.rewards.proposer_rewards_cl_sync'),
-      value: details.value.proposal_cl_sync_inc_reward
+      value: details.value.proposal_cl_sync_inc_reward,
     },
     {
       label: $t('dashboard.validator.rewards.proposer_rewards_cl_slash'),
-      value: details.value.proposal_cl_slashing_inc_reward
+      value: details.value.proposal_cl_slashing_inc_reward,
     },
     {
       label: $t('dashboard.validator.rewards.proposer_rewards_el'),
-      value: details.value.proposal_el_reward
+      value: details.value.proposal_el_reward,
     },
     {
       label: $t('dashboard.validator.rewards.proposer_rewards_total'),
-      value: details.value.proposal.income
-    }
+      value: details.value.proposal.income,
+    },
   ]
 
   const rewards = [
     {
       svg: IconSlotSourceAttestation,
       label: $t('dashboard.validator.rewards.attestation_source'),
-      value: details.value.attestations_source
+      value: details.value.attestations_source,
     },
     {
       svg: IconSlotTargetAttestation,
       label: $t('dashboard.validator.rewards.attestation_target'),
-      value: details.value.attestations_target
+      value: details.value.attestations_target,
     },
     {
       svg: IconSlotHeadAttestation,
       label: $t('dashboard.validator.rewards.attestation_head'),
-      value: details.value.attestations_head
+      value: details.value.attestations_head,
     },
     {
       svg: IconSlotBlockProposal,
       label: $t('dashboard.validator.rewards.block'),
-      value: details.value.proposal
+      value: details.value.proposal,
     },
     {
       svg: IconSlotSync,
       label: $t('dashboard.validator.rewards.sync'),
       value: details.value.sync,
-      tooltip: formatMultiPartSpan($t, 'dashboard.validator.rewards.tooltip.sync', ['no-wrap'])
+      tooltip: formatMultiPartSpan(
+        $t,
+        'dashboard.validator.rewards.tooltip.sync',
+        ['no-wrap'],
+      ),
     },
     {
       svg: IconSlotSlashing,
       label: $t('dashboard.validator.rewards.slashing'),
       value: details.value.slashing,
-      tooltip: formatMultiPartSpan($t, 'dashboard.validator.rewards.tooltip.slashing', ['slash-after no-wrap', ' no-wrap'])
+      tooltip: formatMultiPartSpan(
+        $t,
+        'dashboard.validator.rewards.tooltip.slashing',
+        ['slash-after no-wrap', ' no-wrap'],
+      ),
     },
     {
       icon: faSnooze,
       label: $t('dashboard.validator.rewards.inactivity'),
-      value: details.value.inactivity
+      value: details.value.inactivity,
     },
     {
       icon: faSigma,
       label: $t('dashboard.validator.rewards.total'),
       value: {
-        income: totalElCl(props.row.reward)?.toString() || '0'
+        income: totalElCl(props.row.reward)?.toString() || '0',
       } as Partial<VDBGroupRewardsDetails>,
-      isTotal: true
-    }
+      isTotal: true,
+    },
   ].map((reward) => {
-    const hasNoReward = reward.isTotal ? reward.value.income === '0' : (!reward?.value?.status_count?.failed && !reward?.value?.status_count?.success)
+    const hasNoReward = reward.isTotal
+      ? reward.value.income === '0'
+      : !reward?.value?.status_count?.failed
+      && !reward?.value?.status_count?.success
     const className = hasNoReward ? 'text-disabled' : ''
     return {
       ...reward,
       hasNoReward,
-      className
+      className,
     }
   })
   return {
     proposer,
-    rewards
+    rewards,
   }
 })
 
@@ -114,15 +144,18 @@ const openDuties = () => {
       dashboardKey: dashboardKey.value,
       groupId: props.row.group_id,
       groupName: props.groupName,
-      epoch: props.row.epoch
-    }
+      epoch: props.row.epoch,
+    },
   })
 }
-
 </script>
+
 <template>
   <div class="background">
-    <div v-if="details" class="details-container">
+    <div
+      v-if="details"
+      class="details-container"
+    >
       <div>
         <div class="small-screen-value">
           <b><BcTableAgeHeader class="label" /></b>
@@ -132,23 +165,42 @@ const openDuties = () => {
         </div>
         <div class="small-screen-value">
           <div class="label">
-            <b>{{ $t('dashboard.validator.col.duty') }}</b>
+            <b>{{ $t("dashboard.validator.col.duty") }}</b>
           </div>
           <div class="value">
-            <DashboardTableValueDuty :duty="row.duty" class="detail-duty" />
+            <DashboardTableValueDuty
+              :duty="row.duty"
+              class="detail-duty"
+            />
           </div>
         </div>
       </div>
       <div class="rewards-container">
         <div class="rewards-group">
           <div class="col icon">
-            <div v-for="item in data?.rewards" :key="item.label" class="row" :class="item.className">
-              <component :is="item.svg" v-if="item.svg" />
-              <FontAwesomeIcon v-if="item.icon" :icon="item.icon" />
+            <div
+              v-for="item in data?.rewards"
+              :key="item.label"
+              class="row"
+              :class="item.className"
+            >
+              <component
+                :is="item.svg"
+                v-if="item.svg"
+              />
+              <FontAwesomeIcon
+                v-if="item.icon"
+                :icon="item.icon"
+              />
             </div>
           </div>
           <div class="col label">
-            <div v-for="item in data?.rewards" :key="item.label" class="label" :class="item.className">
+            <div
+              v-for="item in data?.rewards"
+              :key="item.label"
+              class="label"
+              :class="item.className"
+            >
               {{ item.label }}
             </div>
           </div>
@@ -161,8 +213,15 @@ const openDuties = () => {
               :render-text-as-html="true"
               tooltip-class="text-align-left"
             >
-              <div v-if="item.isTotal" :class="item.className">
-                <FontAwesomeIcon class="link popout" :icon="faArrowUpRightFromSquare" @click="openDuties" />
+              <div
+                v-if="item.isTotal"
+                :class="item.className"
+              >
+                <FontAwesomeIcon
+                  class="link popout"
+                  :icon="faArrowUpRightFromSquare"
+                  @click="openDuties"
+                />
               </div>
               <DashboardTableEfficiency
                 v-else-if="!item.hasNoReward"
@@ -170,7 +229,10 @@ const openDuties = () => {
                 :failed="item.value?.status_count?.failed!"
                 :absolute="true"
               />
-              <div v-else class="text-disabled">
+              <div
+                v-else
+                class="text-disabled"
+              >
                 0 / 0
               </div>
             </BcTooltip>
@@ -187,17 +249,30 @@ const openDuties = () => {
           </div>
         </div>
         <div class="proposer-group">
-          <div v-for="item in data?.proposer" :key="item.label" class="row" :class="{'text-disabled': item.value === '0'}">
+          <div
+            v-for="item in data?.proposer"
+            :key="item.label"
+            class="row"
+            :class="{ 'text-disabled': item.value === '0' }"
+          >
             <div class="label">
               {{ item.label }}
             </div>
-            <BcFormatValue :value="item.value" :use-colors="item.value !== '0'" :options="formatRewardValueOption" />
+            <BcFormatValue
+              :value="item.value"
+              :use-colors="item.value !== '0'"
+              :options="formatRewardValueOption"
+            />
           </div>
         </div>
       </div>
     </div>
     <div v-else>
-      <BcLoadingSpinner class="spinner" :loading="true" alignment="center" />
+      <BcLoadingSpinner
+        class="spinner"
+        :loading="true"
+        alignment="center"
+      />
     </div>
   </div>
 </template>
@@ -208,7 +283,7 @@ const openDuties = () => {
   background-color: var(--container-background);
 }
 
-.spinner{
+.spinner {
   padding: var(--padding-large);
 }
 
@@ -255,8 +330,8 @@ const openDuties = () => {
       width: 360px;
 
       .col {
-        >div,
-        >span {
+        > div,
+        > span {
           height: 32px;
           padding: var(--padding-small);
           text-wrap: nowrap;
@@ -267,8 +342,8 @@ const openDuties = () => {
           }
         }
 
-        &.icon{
-          svg{
+        &.icon {
+          svg {
             height: 14px;
             width: 18px;
           }
@@ -285,7 +360,7 @@ const openDuties = () => {
           flex-grow: 1;
           align-items: flex-end;
 
-          >div {
+          > div {
             width: 100%;
             text-align: end;
           }
diff --git a/frontend/components/dashboard/table/DashboardTableSummary.vue b/frontend/components/dashboard/table/DashboardTableSummary.vue
index 721750075..94d03d9a2 100644
--- a/frontend/components/dashboard/table/DashboardTableSummary.vue
+++ b/frontend/components/dashboard/table/DashboardTableSummary.vue
@@ -1,32 +1,51 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faInfoCircle
-} from '@fortawesome/pro-regular-svg-icons'
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import type { DataTableSortEvent } from 'primevue/datatable'
 import type { VDBSummaryTableRow } from '~/types/api/validator_dashboard'
 import type { Cursor, TableQueryParams } from '~/types/datatable'
 import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
 import { getGroupLabel } from '~/utils/dashboard/group'
-import { SummaryTimeFrames, type SummaryChartFilter, type SummaryTableVisibility, type SummaryTimeFrame } from '~/types/dashboard/summary'
+import {
+  SummaryTimeFrames,
+  type SummaryChartFilter,
+  type SummaryTableVisibility,
+  type SummaryTimeFrame,
+} from '~/types/dashboard/summary'
 
 const { dashboardKey, isPublic } = useDashboardKey()
 
 const cursor = ref<Cursor>()
 const pageSize = ref<number>(10)
 const { t: $t } = useTranslation()
-const chartFilter = ref<SummaryChartFilter>({ aggregation: 'hourly', efficiency: 'all', groupIds: [] })
+const chartFilter = ref<SummaryChartFilter>({
+  aggregation: 'hourly',
+  efficiency: 'all',
+  groupIds: [],
+})
 
-const { summary, query: lastQuery, isLoading, getSummary } = useValidatorDashboardSummaryStore()
-const { value: query, temp: tempQuery, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
+const {
+  summary,
+  query: lastQuery,
+  isLoading,
+  getSummary,
+} = useValidatorDashboardSummaryStore()
+const {
+  value: query,
+  temp: tempQuery,
+  bounce: setQuery,
+} = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 
 const showAbsoluteValues = ref<boolean | null>(null)
 
-const { overview, hasValidators, validatorCount } = useValidatorDashboardOverviewStore()
+const { overview, hasValidators, validatorCount }
+  = useValidatorDashboardOverviewStore()
 const { groups } = useValidatorDashboardGroups()
 
-const timeFrames = computed(() => SummaryTimeFrames.map(t => ({ name: $t(`time_frames.${t}`), id: t })))
+const timeFrames = computed(() =>
+  SummaryTimeFrames.map(t => ({ name: $t(`time_frames.${t}`), id: t })),
+)
 const selectedTimeFrame = ref<SummaryTimeFrame>('last_24h')
 
 const { width } = useWindowSize()
@@ -36,31 +55,45 @@ const colsVisible = computed<SummaryTableVisibility>(() => {
     attestations: width.value >= 1015,
     reward: width.value >= 933,
     efficiency: width.value >= 730,
-    validatorsSortable: width.value >= 571
+    validatorsSortable: width.value >= 571,
   }
 })
 const loadData = (q?: TableQueryParams) => {
   if (!q) {
-    q = query.value ? { ...query.value } : { limit: pageSize.value, sort: 'efficiency:desc' }
+    q = query.value
+      ? { ...query.value }
+      : { limit: pageSize.value, sort: 'efficiency:desc' }
   }
   setQuery(q, true, true)
 }
 
-watch(validatorCount, (count) => {
-  if (count !== undefined && showAbsoluteValues.value === null) {
-    showAbsoluteValues.value = count < 100_000
-  }
-}, { immediate: true })
-
-watch([dashboardKey, overview], () => {
-  loadData()
-}, { immediate: true })
-
-watch([query, selectedTimeFrame], ([q, timeFrame]) => {
-  if (q) {
-    getSummary(dashboardKey.value, timeFrame, q)
-  }
-}, { immediate: true })
+watch(
+  validatorCount,
+  (count) => {
+    if (count !== undefined && showAbsoluteValues.value === null) {
+      showAbsoluteValues.value = count < 100_000
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  [dashboardKey, overview],
+  () => {
+    loadData()
+  },
+  { immediate: true },
+)
+
+watch(
+  [query, selectedTimeFrame],
+  ([q, timeFrame]) => {
+    if (q) {
+      getSummary(dashboardKey.value, timeFrame, q)
+    }
+  },
+  { immediate: true },
+)
 
 const groupNameLabel = (groupId?: number) => {
   return getGroupLabel($t, groupId, groups.value, 'Σ')
@@ -90,9 +123,15 @@ const getRowClass = (row: VDBSummaryTableRow) => {
   }
 }
 
-const searchPlaceholder = computed(() => $t(isPublic.value && (groups.value?.length ?? 0) <= 1 ? 'dashboard.validator.summary.search_placeholder_public' : 'dashboard.validator.summary.search_placeholder'))
-
+const searchPlaceholder = computed(() =>
+  $t(
+    isPublic.value && (groups.value?.length ?? 0) <= 1
+      ? 'dashboard.validator.summary.search_placeholder_public'
+      : 'dashboard.validator.summary.search_placeholder',
+  ),
+)
 </script>
+
 <template>
   <div>
     <BcTableControl
@@ -100,9 +139,9 @@ const searchPlaceholder = computed(() => $t(isPublic.value && (groups.value?.len
       :search-placeholder="searchPlaceholder"
       @set-search="setSearch"
     >
-      <template #header-center="{tableIsShown}">
+      <template #header-center="{ tableIsShown }">
         <h1 class="summary_title">
-          {{ $t('dashboard.validator.summary.title') }}
+          {{ $t("dashboard.validator.summary.title") }}
         </h1>
         <BcDropdown
           v-if="tableIsShown"
@@ -113,7 +152,10 @@ const searchPlaceholder = computed(() => $t(isPublic.value && (groups.value?.len
           class="small"
           :placeholder="$t('dashboard.group.selection.placeholder')"
         />
-        <DashboardChartSummaryChartFilter v-else v-model="chartFilter" />
+        <DashboardChartSummaryChartFilter
+          v-else
+          v-model="chartFilter"
+        />
       </template>
       <template #table>
         <ClientOnly fallback-tag="span">
@@ -150,7 +192,10 @@ const searchPlaceholder = computed(() => $t(isPublic.value && (groups.value?.len
               :header="$t('dashboard.validator.col.status')"
             >
               <template #body="slotProps">
-                <DashboardTableSummaryStatus :class="slotProps.data.className" :status="slotProps.data.status" />
+                <DashboardTableSummaryStatus
+                  :class="slotProps.data.className"
+                  :status="slotProps.data.status"
+                />
               </template>
             </Column>
             <Column
@@ -161,15 +206,15 @@ const searchPlaceholder = computed(() => $t(isPublic.value && (groups.value?.len
             >
               <template #header>
                 <div class="validators-header">
-                  <div>{{ $t('dashboard.validator.col.validators') }}</div>
+                  <div>{{ $t("dashboard.validator.col.validators") }}</div>
                   <div class="sub-header">
-                    {{ $t('common.live') }}
+                    {{ $t("common.live") }}
                   </div>
                   <BcTooltip
                     class="info"
                     tooltip-class="summary-info-tooltip"
                     :text="$t('dashboard.validator.summary.tooltip.live')"
-                    @click.stop.prevent="() => { }"
+                    @click.stop.prevent="() => {}"
                   >
                     <FontAwesomeIcon :icon="faInfoCircle" />
                   </BcTooltip>
@@ -321,8 +366,7 @@ const searchPlaceholder = computed(() => $t(isPublic.value && (groups.value?.len
 }
 
 :deep(.summary_table) {
-
-  >.p-datatable-wrapper {
+  > .p-datatable-wrapper {
     min-height: 529px;
   }
 
@@ -361,7 +405,7 @@ const searchPlaceholder = computed(() => $t(isPublic.value && (groups.value?.len
     }
   }
 
-  .total-row+.p-datatable-row-expansion {
+  .total-row + .p-datatable-row-expansion {
     td {
       border-bottom-color: var(--primary-color);
     }
diff --git a/frontend/components/dashboard/table/DashboardTableValidators.vue b/frontend/components/dashboard/table/DashboardTableValidators.vue
index 0680eba43..c90ce7a34 100644
--- a/frontend/components/dashboard/table/DashboardTableValidators.vue
+++ b/frontend/components/dashboard/table/DashboardTableValidators.vue
@@ -1,23 +1,27 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faArrowUpRightFromSquare
-} from '@fortawesome/pro-solid-svg-icons'
-import type { DashboardValidatorContext, SummaryTimeFrame } from '~/types/dashboard/summary'
+import { faArrowUpRightFromSquare } from '@fortawesome/pro-solid-svg-icons'
+import type {
+  DashboardValidatorContext,
+  SummaryTimeFrame,
+} from '~/types/dashboard/summary'
 import { DashboardValidatorSubsetModal } from '#components'
 import { getGroupLabel } from '~/utils/dashboard/group'
 import { sortValidatorIds } from '~/utils/dashboard/validator'
 import type { DashboardKey } from '~/types/dashboard'
-import type { VDBGroupSummaryData, VDBSummaryTableRow } from '~/types/api/validator_dashboard'
+import type {
+  VDBGroupSummaryData,
+  VDBSummaryTableRow,
+} from '~/types/api/validator_dashboard'
 
 interface Props {
-  validators: number[],
-  groupId?: number,
+  validators: number[]
+  groupId?: number
   timeFrame?: SummaryTimeFrame
-  context: DashboardValidatorContext,
-  dashboardKey?: DashboardKey,
-  data?: VDBGroupSummaryData,
-  row: VDBSummaryTableRow,
+  context: DashboardValidatorContext
+  dashboardKey?: DashboardKey
+  data?: VDBGroupSummaryData
+  row: VDBSummaryTableRow
 }
 const props = defineProps<Props>()
 
@@ -37,9 +41,9 @@ const openValidatorModal = () => {
       dashboardKey: props.dashboardKey,
       summary: {
         row: props.row,
-        data: props.data
-      }
-    }
+        data: props.data,
+      },
+    },
   })
 }
 
@@ -47,14 +51,23 @@ const groupName = computed(() => {
   return getGroupLabel($t, props.groupId, groups.value, $t('common.total'))
 })
 
-const cappedValidators = computed(() => sortValidatorIds(props.validators).slice(0, 10))
-
+const cappedValidators = computed(() =>
+  sortValidatorIds(props.validators).slice(0, 10),
+)
 </script>
+
 <template>
   <div class="validator_column">
     <div class="validators">
-      <template v-for="v in cappedValidators" :key="v">
-        <BcLink :to="`/validator/${v}`" target="_blank" class="link validator_link">
+      <template
+        v-for="v in cappedValidators"
+        :key="v"
+      >
+        <BcLink
+          :to="`/validator/${v}`"
+          target="_blank"
+          class="link validator_link"
+        >
           {{ v }}
         </BcLink>
         <span>, </span>
@@ -70,7 +83,7 @@ const cappedValidators = computed(() => sortValidatorIds(props.validators).slice
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/utils.scss';
+@use "~/assets/css/utils.scss";
 
 .validator_column {
   display: flex;
diff --git a/frontend/components/dashboard/table/DashboardTableValueDuty.vue b/frontend/components/dashboard/table/DashboardTableValueDuty.vue
index 9ae8e686b..0c2c871a0 100644
--- a/frontend/components/dashboard/table/DashboardTableValueDuty.vue
+++ b/frontend/components/dashboard/table/DashboardTableValueDuty.vue
@@ -2,34 +2,67 @@
 import type { VDBRewardsTableDuty } from '~/types/api/validator_dashboard'
 
 interface Props {
-  duty: VDBRewardsTableDuty;
+  duty: VDBRewardsTableDuty
 }
 defineProps<Props>()
-
 </script>
+
 <template>
-  <div v-if="duty" class="duty">
-    <div v-if="duty.attestation !== undefined" class="group">
-      {{ $t('dashboard.validator.rewards.attestation') }}
-      <BcFormatPercent class="round-brackets" :percent="duty.attestation" :fixed="0" :precision="0" />
+  <div
+    v-if="duty"
+    class="duty"
+  >
+    <div
+      v-if="duty.attestation !== undefined"
+      class="group"
+    >
+      {{ $t("dashboard.validator.rewards.attestation") }}
+      <BcFormatPercent
+        class="round-brackets"
+        :percent="duty.attestation"
+        :fixed="0"
+        :precision="0"
+      />
     </div>
-    <div v-if="duty.proposal !== undefined" class="group">
-      {{ $t('dashboard.validator.rewards.proposal') }}
-      <BcFormatPercent class="round-brackets" :percent="duty.proposal" :fixed="0" :precision="0" />
+    <div
+      v-if="duty.proposal !== undefined"
+      class="group"
+    >
+      {{ $t("dashboard.validator.rewards.proposal") }}
+      <BcFormatPercent
+        class="round-brackets"
+        :percent="duty.proposal"
+        :fixed="0"
+        :precision="0"
+      />
     </div>
-    <div v-if="duty.sync !== undefined" class="group">
-      {{ $t('dashboard.validator.rewards.sync_committee') }}
-      <BcFormatPercent class="round-brackets" :percent="duty.sync" :fixed="0" :precision="0" />
+    <div
+      v-if="duty.sync !== undefined"
+      class="group"
+    >
+      {{ $t("dashboard.validator.rewards.sync_committee") }}
+      <BcFormatPercent
+        class="round-brackets"
+        :percent="duty.sync"
+        :fixed="0"
+        :precision="0"
+      />
     </div>
-    <div v-if="duty.slashing !== undefined" class="group">
-      {{ $t('dashboard.validator.rewards.slashing') }}
-      <BcFormatNumber class="round-brackets" :value="duty.slashing" />
+    <div
+      v-if="duty.slashing !== undefined"
+      class="group"
+    >
+      {{ $t("dashboard.validator.rewards.slashing") }}
+      <BcFormatNumber
+        class="round-brackets"
+        :value="duty.slashing"
+      />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/utils.scss';
+@use "~/assets/css/utils.scss";
 
 .duty {
   display: inline-flex;
diff --git a/frontend/components/dashboard/table/DashboardTableWithdrawals.vue b/frontend/components/dashboard/table/DashboardTableWithdrawals.vue
index 6ae50d763..d3e79366f 100644
--- a/frontend/components/dashboard/table/DashboardTableWithdrawals.vue
+++ b/frontend/components/dashboard/table/DashboardTableWithdrawals.vue
@@ -9,7 +9,9 @@ import { BcFormatHash } from '#components'
 import { getGroupLabel } from '~/utils/dashboard/group'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 
-type ExtendedVDBWithdrawalsTableRow = VDBWithdrawalsTableRow & {identifier: string}
+type ExtendedVDBWithdrawalsTableRow = VDBWithdrawalsTableRow & {
+  identifier: string
+}
 
 const { dashboardKey } = useDashboardKey()
 
@@ -19,8 +21,20 @@ const { t: $t } = useTranslation()
 
 const { latestState } = useLatestStateStore()
 const { slotToEpoch } = useNetworkStore()
-const { withdrawals, query: lastQuery, getWithdrawals, totalAmount, getTotalAmount, isLoadingWithdrawals, isLoadingTotal } = useValidatorDashboardWithdrawalsStore()
-const { value: query, temp: tempQuery, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
+const {
+  withdrawals,
+  query: lastQuery,
+  getWithdrawals,
+  totalAmount,
+  getTotalAmount,
+  isLoadingWithdrawals,
+  isLoadingTotal,
+} = useValidatorDashboardWithdrawalsStore()
+const {
+  value: query,
+  temp: tempQuery,
+  bounce: setQuery,
+} = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 const totalIdentifier = 'total'
 
 const { hasValidators, overview } = useValidatorDashboardOverviewStore()
@@ -33,7 +47,7 @@ const colsVisible = computed(() => {
     slot: width.value > 875,
     epoch: width.value > 805,
     recipient: width.value > 695,
-    age: width.value > 500
+    age: width.value > 500,
   }
 })
 
@@ -44,16 +58,24 @@ const loadData = (query?: TableQueryParams) => {
   setQuery(query, true, true)
 }
 
-watch([dashboardKey, overview], () => {
-  loadData()
-  getTotalAmount(dashboardKey.value)
-}, { immediate: true })
-
-watch(query, (q) => {
-  if (q) {
-    getWithdrawals(dashboardKey.value, q)
-  }
-}, { immediate: true })
+watch(
+  [dashboardKey, overview],
+  () => {
+    loadData()
+    getTotalAmount(dashboardKey.value)
+  },
+  { immediate: true },
+)
+
+watch(
+  query,
+  (q) => {
+    if (q) {
+      getWithdrawals(dashboardKey.value, q)
+    }
+  },
+  { immediate: true },
+)
 
 const tableData = computed(() => {
   if (!withdrawals.value?.data?.length) {
@@ -65,13 +87,13 @@ const tableData = computed(() => {
     data: [
       {
         amount: totalAmount.value,
-        identifier: totalIdentifier
+        identifier: totalIdentifier,
       },
       ...withdrawals.value.data.map(w => ({
         ...w,
-        identifier: `${w.slot}-${w.index}`
-      }))
-    ]
+        identifier: `${w.slot}-${w.index}`,
+      })),
+    ],
   }
 })
 
@@ -124,13 +146,15 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
 
   return false
 }
-
 </script>
+
 <template>
   <div>
     <BcTableControl
       :title="$t('dashboard.validator.withdrawals.title')"
-      :search-placeholder="$t('dashboard.validator.withdrawals.search_placeholder')"
+      :search-placeholder="
+        $t('dashboard.validator.withdrawals.search_placeholder')
+      "
       @set-search="setSearch"
     >
       <template #table>
@@ -159,12 +183,17 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
               header-class="index"
             >
               <template #body="slotProps">
-                <div v-if="slotProps.data.is_missing_estimate" class="value-with-tooltip-container">
-                  {{ $t('dashboard.validator.withdrawals.pending') }}
+                <div
+                  v-if="slotProps.data.is_missing_estimate"
+                  class="value-with-tooltip-container"
+                >
+                  {{ $t("dashboard.validator.withdrawals.pending") }}
                   <BcTooltip>
                     <FontAwesomeIcon :icon="faInfoCircle" />
                     <template #tooltip>
-                      {{ $t('dashboard.validator.withdrawals.pending_tooltip') }}
+                      {{
+                        $t("dashboard.validator.withdrawals.pending_tooltip")
+                      }}
                     </template>
                   </BcTooltip>
                 </div>
@@ -176,7 +205,10 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
                 >
                   {{ slotProps.data.index || "-" }}
                 </BcLink>
-                <div v-else class="all-time-total">
+                <div
+                  v-else
+                  class="all-time-total"
+                >
                   Σ
                 </div>
               </template>
@@ -189,7 +221,12 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
               :header="$t('dashboard.validator.col.group')"
             >
               <template #body="slotProps">
-                <span v-if="slotProps.data.identifier !== totalIdentifier && !slotProps.data.is_missing_estimate">
+                <span
+                  v-if="
+                    slotProps.data.identifier !== totalIdentifier
+                      && !slotProps.data.is_missing_estimate
+                  "
+                >
                   {{ groupNameLabel(slotProps.data.group_id) }}
                 </span>
               </template>
@@ -202,12 +239,18 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
             >
               <template #body="slotProps">
                 <BcLink
-                  v-if="slotProps.data.identifier !== totalIdentifier && !slotProps.data.is_missing_estimate"
+                  v-if="
+                    slotProps.data.identifier !== totalIdentifier
+                      && !slotProps.data.is_missing_estimate
+                  "
                   :to="`/epoch/${slotProps.data.epoch}`"
                   target="_blank"
                   class="link"
                 >
-                  <BcFormatNumber :value="slotProps.data.epoch" default="-" />
+                  <BcFormatNumber
+                    :value="slotProps.data.epoch"
+                    default="-"
+                  />
                 </BcLink>
               </template>
             </Column>
@@ -219,12 +262,18 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
             >
               <template #body="slotProps">
                 <BcLink
-                  v-if="slotProps.data.identifier !== totalIdentifier && !slotProps.data.is_missing_estimate"
+                  v-if="
+                    slotProps.data.identifier !== totalIdentifier
+                      && !slotProps.data.is_missing_estimate
+                  "
                   :to="`/slot/${slotProps.data.slot}`"
                   target="_blank"
                   class="link"
                 >
-                  <BcFormatNumber :value="slotProps.data.slot" default="-" />
+                  <BcFormatNumber
+                    :value="slotProps.data.slot"
+                    default="-"
+                  />
                 </BcLink>
               </template>
             </Column>
@@ -238,7 +287,10 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
               </template>
               <template #body="slotProps">
                 <BcFormatTimePassed
-                  v-if="slotProps.data.identifier !== totalIdentifier && !slotProps.data.is_missing_estimate"
+                  v-if="
+                    slotProps.data.identifier !== totalIdentifier
+                      && !slotProps.data.is_missing_estimate
+                  "
                   type="slot"
                   :value="slotProps.data.slot"
                 />
@@ -251,7 +303,12 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
               :header="$t('dashboard.validator.col.recipient')"
             >
               <template #body="slotProps">
-                <div v-if="slotProps.data.identifier !== totalIdentifier && !slotProps.data.is_missing_estimate">
+                <div
+                  v-if="
+                    slotProps.data.identifier !== totalIdentifier
+                      && !slotProps.data.is_missing_estimate
+                  "
+                >
                   <BcFormatHash
                     v-if="slotProps.data.recipient?.hash"
                     type="address"
@@ -271,18 +328,32 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
               :header="$t('dashboard.validator.col.amount')"
             >
               <template #body="slotProps">
-                <div v-if="slotProps.data.identifier === totalIdentifier && isLoadingTotal">
-                  <BcLoadingSpinner :loading="true" size="small" />
+                <div
+                  v-if="
+                    slotProps.data.identifier === totalIdentifier
+                      && isLoadingTotal
+                  "
+                >
+                  <BcLoadingSpinner
+                    :loading="true"
+                    size="small"
+                  />
                 </div>
-                <div v-else-if="!slotProps.data.is_missing_estimate" class="value-with-tooltip-container">
+                <div
+                  v-else-if="!slotProps.data.is_missing_estimate"
+                  class="value-with-tooltip-container"
+                >
                   <BcFormatValue
                     :value="slotProps.data.amount"
-                    :class="{'all-time-total':slotProps.data.identifier === totalIdentifier}"
+                    :class="{
+                      'all-time-total':
+                        slotProps.data.identifier === totalIdentifier,
+                    }"
                   />
                   <BcTooltip v-if="isRowInFuture(slotProps.data)">
                     <FontAwesomeIcon :icon="faInfoCircle" />
                     <template #tooltip>
-                      {{ $t('dashboard.validator.withdrawals.future_tooltip') }}
+                      {{ $t("dashboard.validator.withdrawals.future_tooltip") }}
                     </template>
                   </BcTooltip>
                 </div>
@@ -292,7 +363,7 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
               <div class="expansion">
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.group') }}:
+                    {{ $t("dashboard.validator.col.group") }}:
                   </div>
                   <div :class="getExpansionValueClass(slotProps.data)">
                     {{ groupNameLabel(slotProps.data.group_id) }}
@@ -300,27 +371,46 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('common.epoch') }}:
+                    {{ $t("common.epoch") }}:
                   </div>
-                  <BcLink :to="`/epoch/${slotProps.data.epoch}`" target="_blank" class="link" :class="getExpansionValueClass(slotProps.data)">
-                    <BcFormatNumber :value="slotProps.data.epoch" default="-" />
+                  <BcLink
+                    :to="`/epoch/${slotProps.data.epoch}`"
+                    target="_blank"
+                    class="link"
+                    :class="getExpansionValueClass(slotProps.data)"
+                  >
+                    <BcFormatNumber
+                      :value="slotProps.data.epoch"
+                      default="-"
+                    />
                   </BcLink>
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('common.slot') }}:
+                    {{ $t("common.slot") }}:
                   </div>
-                  <BcLink :to="`/slot/${slotProps.data.slot}`" target="_blank" class="link" :class="getExpansionValueClass(slotProps.data)">
-                    <BcFormatNumber :value="slotProps.data.slot" default="-" />
+                  <BcLink
+                    :to="`/slot/${slotProps.data.slot}`"
+                    target="_blank"
+                    class="link"
+                    :class="getExpansionValueClass(slotProps.data)"
+                  >
+                    <BcFormatNumber
+                      :value="slotProps.data.slot"
+                      default="-"
+                    />
                   </BcLink>
                 </div>
                 <div class="row">
                   <BcTableAgeHeader class="label" />
-                  <BcFormatTimePassed type="slot" :value="slotProps.data.slot" />
+                  <BcFormatTimePassed
+                    type="slot"
+                    :value="slotProps.data.slot"
+                  />
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.recipient') }}:
+                    {{ $t("dashboard.validator.col.recipient") }}:
                   </div>
                   <BcFormatHash
                     v-if="slotProps.data.recipient?.hash"
@@ -349,7 +439,7 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
 @use "~/assets/css/utils.scss";
 
 :deep(.withdrawal-table) {
-  >.p-datatable-wrapper {
+  > .p-datatable-wrapper {
     min-height: 577px;
   }
   .index .all-time-total {
@@ -364,7 +454,7 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
   age-field {
     white-space: nowrap;
   }
-  tr>td.age-field {
+  tr > td.age-field {
     padding: 0 7px;
     @include utils.set-all-width(156px);
   }
@@ -384,9 +474,9 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
   }
 
   .gray-out > td {
-    >a,
-    >div,
-    >span {
+    > a,
+    > div,
+    > span {
       opacity: 0.5;
     }
   }
diff --git a/frontend/components/dashboard/table/SummaryDetails.vue b/frontend/components/dashboard/table/SummaryDetails.vue
index e66320034..d7f8d4b2f 100644
--- a/frontend/components/dashboard/table/SummaryDetails.vue
+++ b/frontend/components/dashboard/table/SummaryDetails.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import type { VDBSummaryTableRow } from '~/types/api/validator_dashboard'
-import { type SummaryDetailsEfficiencyCombinedProp, type SummaryRow, type SummaryTableVisibility, type SummaryTimeFrame } from '~/types/dashboard/summary'
+import {
+  type SummaryDetailsEfficiencyCombinedProp,
+  type SummaryRow,
+  type SummaryTableVisibility,
+  type SummaryTimeFrame,
+} from '~/types/dashboard/summary'
 
 interface Props {
   row: VDBSummaryTableRow
   timeFrame: SummaryTimeFrame
-  absolute: boolean,
+  absolute: boolean
   tableVisibility: SummaryTableVisibility
 }
 const props = defineProps<Props>()
@@ -13,30 +18,67 @@ const props = defineProps<Props>()
 const { dashboardKey } = useDashboardKey()
 
 const { t: $t } = useTranslation()
-const { details: summary, getDetails } = useValidatorDashboardSummaryDetailsStore(dashboardKey.value, props.row.group_id)
-
-watch(() => props.timeFrame, () => {
-  getDetails(props.timeFrame)
-}, { deep: true, immediate: true })
+const { details: summary, getDetails }
+  = useValidatorDashboardSummaryDetailsStore(
+    dashboardKey.value,
+    props.row.group_id,
+  )
+
+watch(
+  () => props.timeFrame,
+  () => {
+    getDetails(props.timeFrame)
+  },
+  { deep: true, immediate: true },
+)
 
 const data = computed<SummaryRow[][]>(() => {
   const list: SummaryRow[][] = [[], [], []]
 
-  const addToList = (index: number, prop?: SummaryDetailsEfficiencyCombinedProp, titleKey?: string) => {
+  const addToList = (
+    index: number,
+    prop?: SummaryDetailsEfficiencyCombinedProp,
+    titleKey?: string,
+  ) => {
     const title = $t(`dashboard.validator.summary.row.${prop || titleKey}`)
     const row = { title, prop }
     list[index].push(row)
   }
 
-  const addPropsTolist = (index: number, props: SummaryDetailsEfficiencyCombinedProp[]) => {
+  const addPropsTolist = (
+    index: number,
+    props: SummaryDetailsEfficiencyCombinedProp[],
+  ) => {
     props.forEach(p => addToList(index, p))
   }
 
-  const rewardCols: SummaryDetailsEfficiencyCombinedProp[] = ['reward', 'missed_rewards']
-  let addCols: SummaryDetailsEfficiencyCombinedProp[] = props.tableVisibility.attestations ? [] : rewardCols
-  addPropsTolist(0, ['efficiency', ...addCols, 'attestations', 'attestations_source', 'attestations_target', 'attestations_head', 'attestation_efficiency', 'attestation_avg_incl_dist'])
-
-  addPropsTolist(1, ['sync', 'validators_sync', 'proposals', 'validators_proposal', 'slashings', 'validators_slashings'])
+  const rewardCols: SummaryDetailsEfficiencyCombinedProp[] = [
+    'reward',
+    'missed_rewards',
+  ]
+  let addCols: SummaryDetailsEfficiencyCombinedProp[] = props.tableVisibility
+    .attestations
+    ? []
+    : rewardCols
+  addPropsTolist(0, [
+    'efficiency',
+    ...addCols,
+    'attestations',
+    'attestations_source',
+    'attestations_target',
+    'attestations_head',
+    'attestation_efficiency',
+    'attestation_avg_incl_dist',
+  ])
+
+  addPropsTolist(1, [
+    'sync',
+    'validators_sync',
+    'proposals',
+    'validators_proposal',
+    'slashings',
+    'validators_slashings',
+  ])
 
   addCols = !props.tableVisibility.attestations ? [] : rewardCols
   addPropsTolist(2, ['apr', 'luck', ...addCols])
@@ -48,7 +90,9 @@ const rowClass = (data: SummaryRow) => {
   if (!data.prop) {
     return 'bold' // headline without prop
   }
-  const classNames: Partial<Record<SummaryDetailsEfficiencyCombinedProp, string>> = {
+  const classNames: Partial<
+    Record<SummaryDetailsEfficiencyCombinedProp, string>
+  > = {
     efficiency: 'bold',
     attestations: 'bold',
     sync: props.tableVisibility.efficiency ? 'bold' : 'bold spacing-top',
@@ -56,16 +100,28 @@ const rowClass = (data: SummaryRow) => {
     slashings: 'bold spacing-top',
     apr: props.tableVisibility.attestations ? '' : 'spacing-top',
     luck: 'spacing-top',
-    attestations_head: 'spacing-top'
+    attestations_head: 'spacing-top',
   }
   return classNames[data.prop]
 }
-
 </script>
+
 <template>
-  <div v-if="summary" class="details-container">
-    <div v-for="(list, index) in data" :key="index" class="group">
-      <div v-for="(prop, pIndex) in list" :key="pIndex" :class="rowClass(prop)" class="row">
+  <div
+    v-if="summary"
+    class="details-container"
+  >
+    <div
+      v-for="(list, index) in data"
+      :key="index"
+      class="group"
+    >
+      <div
+        v-for="(prop, pIndex) in list"
+        :key="pIndex"
+        :class="rowClass(prop)"
+        class="row"
+      >
         <div class="label">
           {{ prop.title }}
         </div>
@@ -83,12 +139,16 @@ const rowClass = (data: SummaryRow) => {
     </div>
   </div>
   <div v-else>
-    <BcLoadingSpinner class="spinner" :loading="true" alignment="center" />
+    <BcLoadingSpinner
+      class="spinner"
+      :loading="true"
+      alignment="center"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/utils.scss';
+@use "~/assets/css/utils.scss";
 
 .details-container {
   display: flex;
@@ -115,7 +175,7 @@ const rowClass = (data: SummaryRow) => {
       border-left: var(--container-border);
     }
 
-    .spacing-top{
+    .spacing-top {
       margin-top: var(--padding-small);
     }
 
@@ -154,7 +214,6 @@ const rowClass = (data: SummaryRow) => {
         @media (max-width: 729px) {
           width: 151px;
         }
-
       }
 
       .value {
diff --git a/frontend/components/dashboard/table/SummaryMissedRewards.vue b/frontend/components/dashboard/table/SummaryMissedRewards.vue
index 4fe27b578..256aa0e47 100644
--- a/frontend/components/dashboard/table/SummaryMissedRewards.vue
+++ b/frontend/components/dashboard/table/SummaryMissedRewards.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faInfoCircle
-} from '@fortawesome/pro-regular-svg-icons'
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import type { VDBGroupSummaryMissedRewards } from '~/types/api/validator_dashboard'
 
 interface Props {
@@ -10,35 +8,70 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const total = computed(() => props.missedRewards ? convertSum(props.missedRewards.proposer_rewards.cl, props.missedRewards.proposer_rewards.el, props.missedRewards.attestations, props.missedRewards.sync) : undefined)
-
+const total = computed(() =>
+  props.missedRewards
+    ? convertSum(
+      props.missedRewards.proposer_rewards.cl,
+      props.missedRewards.proposer_rewards.el,
+      props.missedRewards.attestations,
+      props.missedRewards.sync,
+    )
+    : undefined,
+)
 </script>
+
 <template>
-  <div v-if="total && !total.isZero()" class="summary-reward">
-    <BcFormatValue :value="total" :no-tooltip="true" />
+  <div
+    v-if="total && !total.isZero()"
+    class="summary-reward"
+  >
+    <BcFormatValue
+      :value="total"
+      :no-tooltip="true"
+    />
     <BcTooltip :fit-content="true">
       <FontAwesomeIcon :icon="faInfoCircle" />
       <template #tooltip>
         <div>
           <div class="tt-row">
-            <span class="bold top">{{ $t('dashboard.validator.summary.tooltip.estimated_loss') }}
+            <span class="bold top">{{ $t("dashboard.validator.summary.tooltip.estimated_loss") }}
             </span>
           </div>
           <div class="tt-row">
-            <span class="bold">{{ $t('dashboard.validator.blocks.el_rewards') }}: </span>
-            <BcFormatValue :value="missedRewards?.proposer_rewards.el" :no-tooltip="true" :full-value="true" />
+            <span class="bold">{{ $t("dashboard.validator.blocks.el_rewards") }}:
+            </span>
+            <BcFormatValue
+              :value="missedRewards?.proposer_rewards.el"
+              :no-tooltip="true"
+              :full-value="true"
+            />
           </div>
           <div class="tt-row">
-            <span class="bold">{{ $t('dashboard.validator.blocks.cl_rewards') }}: </span>
-            <BcFormatValue :value="missedRewards?.proposer_rewards.cl" :no-tooltip="true" :full-value="true" />
+            <span class="bold">{{ $t("dashboard.validator.blocks.cl_rewards") }}:
+            </span>
+            <BcFormatValue
+              :value="missedRewards?.proposer_rewards.cl"
+              :no-tooltip="true"
+              :full-value="true"
+            />
           </div>
           <div class="tt-row">
-            <span class="bold">{{ $t('dashboard.validator.summary.row.attestations') }}: </span>
-            <BcFormatValue :value="missedRewards?.attestations" :no-tooltip="true" :full-value="true" />
+            <span class="bold">{{ $t("dashboard.validator.summary.row.attestations") }}:
+            </span>
+            <BcFormatValue
+              :value="missedRewards?.attestations"
+              :no-tooltip="true"
+              :full-value="true"
+            />
           </div>
           <div class="tt-row">
-            <span class="bold">{{ $t('dashboard.validator.summary.row.sync_committee') }}: </span>
-            <BcFormatValue :value="missedRewards?.sync" :no-tooltip="true" :full-value="true" />
+            <span class="bold">{{ $t("dashboard.validator.summary.row.sync_committee") }}:
+            </span>
+            <BcFormatValue
+              :value="missedRewards?.sync"
+              :no-tooltip="true"
+              :full-value="true"
+            />
           </div>
         </div>
       </template>
@@ -48,14 +81,14 @@ const total = computed(() => props.missedRewards ? convertSum(props.missedReward
     -
   </div>
 </template>
-<style lang="scss" scoped>
 
+<style lang="scss" scoped>
 .tt-row {
   display: flex;
   flex-wrap: nowrap;
   white-space: nowrap;
   gap: 3px;
-  .top{
+  .top {
     padding-bottom: var(--padding);
   }
 }
diff --git a/frontend/components/dashboard/table/SummaryReward.vue b/frontend/components/dashboard/table/SummaryReward.vue
index ed653acec..e81515f54 100644
--- a/frontend/components/dashboard/table/SummaryReward.vue
+++ b/frontend/components/dashboard/table/SummaryReward.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faInfoCircle
-} from '@fortawesome/pro-regular-svg-icons'
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import type { ClElValue } from '~/types/api/common'
 
 interface Props {
@@ -10,23 +8,42 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const total = computed(() => props.reward ? totalElCl(props.reward) : undefined)
-
+const total = computed(() =>
+  props.reward ? totalElCl(props.reward) : undefined,
+)
 </script>
+
 <template>
-  <div v-if="total && !total.isZero()" class="summary-reward">
-    <BcFormatValue :value="total" :no-tooltip="true" :use-colors="true" />
+  <div
+    v-if="total && !total.isZero()"
+    class="summary-reward"
+  >
+    <BcFormatValue
+      :value="total"
+      :no-tooltip="true"
+      :use-colors="true"
+    />
     <BcTooltip :fit-content="true">
       <FontAwesomeIcon :icon="faInfoCircle" />
       <template #tooltip>
         <div>
           <div class="tt-row">
-            <span class="bold">{{ $t('dashboard.validator.blocks.el_rewards') }}: </span>
-            <BcFormatValue :value="reward?.el" :no-tooltip="true" :full-value="true" />
+            <span class="bold">{{ $t("dashboard.validator.blocks.el_rewards") }}:
+            </span>
+            <BcFormatValue
+              :value="reward?.el"
+              :no-tooltip="true"
+              :full-value="true"
+            />
           </div>
           <div class="tt-row">
-            <span class="bold">{{ $t('dashboard.validator.blocks.cl_rewards') }}: </span>
-            <BcFormatValue :value="reward?.cl" :no-tooltip="true" :full-value="true" />
+            <span class="bold">{{ $t("dashboard.validator.blocks.cl_rewards") }}:
+            </span>
+            <BcFormatValue
+              :value="reward?.cl"
+              :no-tooltip="true"
+              :full-value="true"
+            />
           </div>
         </div>
       </template>
@@ -36,8 +53,8 @@ const total = computed(() => props.reward ? totalElCl(props.reward) : undefined)
     -
   </div>
 </template>
-<style lang="scss" scoped>
 
+<style lang="scss" scoped>
 .tt-row {
   display: flex;
   flex-wrap: nowrap;
diff --git a/frontend/components/dashboard/table/SummaryStatus.vue b/frontend/components/dashboard/table/SummaryStatus.vue
index 7cd11b3e5..4f900e8a8 100644
--- a/frontend/components/dashboard/table/SummaryStatus.vue
+++ b/frontend/components/dashboard/table/SummaryStatus.vue
@@ -15,7 +15,7 @@ const mapped = computed(() => {
       icon,
       key,
       className: count > 0 ? `${key.replace('_', '-')} active` : '',
-      tooltip: $t(`dashboard.validator.summary.status.${key}`, {}, count)
+      tooltip: $t(`dashboard.validator.summary.status.${key}`, {}, count),
     }
   }
 
@@ -26,18 +26,28 @@ const mapped = computed(() => {
   return [
     mapCount(currentSyncCount, 'current_sync', 'sync'),
     mapCount(scheduledSyncCount, 'scheduled_sync', 'sync'),
-    mapCount(slashedCount, 'slashing', 'slashing')
+    mapCount(slashedCount, 'slashing', 'slashing'),
   ]
 })
-
 </script>
+
 <template>
   <div class="summary-status-container">
-    <BcTooltip v-for="item in mapped" :key="item.key" :text="item.tooltip" :fit-content="true" class="tooltip">
-      <SlotVizIcon :class="item.className" :icon="item.icon" />
+    <BcTooltip
+      v-for="item in mapped"
+      :key="item.key"
+      :text="item.tooltip"
+      :fit-content="true"
+      class="tooltip"
+    >
+      <SlotVizIcon
+        :class="item.className"
+        :icon="item.icon"
+      />
     </BcTooltip>
   </div>
 </template>
+
 <style lang="scss" scoped>
 @use "sass:color";
 @keyframes status-rotation {
@@ -48,22 +58,22 @@ const mapped = computed(() => {
 
 @mixin set-pulse-anmiation($color) {
   @keyframes pulse-animation {
-  0% {
-    color: color.adjust($color, $alpha: 0);
-    transform: scale(0.9)
-  }
+    0% {
+      color: color.adjust($color, $alpha: 0);
+      transform: scale(0.9);
+    }
 
-  50% {
-    color: color.adjust($color, $alpha: -0.4);
-    transform: scale(1.1)
-  }
+    50% {
+      color: color.adjust($color, $alpha: -0.4);
+      transform: scale(1.1);
+    }
 
-  100% {
-    color: color.adjust($color, $alpha: 0);
-    transform: scale(0.9)
+    100% {
+      color: color.adjust($color, $alpha: 0);
+      transform: scale(0.9);
+    }
   }
 }
-}
 
 /* unfortunatly we can't use our css variables here as the rgba conversion is done during build process and there is no css native possibility */
 @include set-pulse-anmiation(#4e7451);
diff --git a/frontend/components/dashboard/table/SummaryValidators.vue b/frontend/components/dashboard/table/SummaryValidators.vue
index 06f80bb5f..251ed8a27 100644
--- a/frontend/components/dashboard/table/SummaryValidators.vue
+++ b/frontend/components/dashboard/table/SummaryValidators.vue
@@ -1,22 +1,26 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faArrowUpRightFromSquare
-} from '@fortawesome/pro-solid-svg-icons'
-import type { DashboardValidatorContext, SummaryTimeFrame } from '~/types/dashboard/summary'
+import { faArrowUpRightFromSquare } from '@fortawesome/pro-solid-svg-icons'
+import type {
+  DashboardValidatorContext,
+  SummaryTimeFrame,
+} from '~/types/dashboard/summary'
 import { DashboardValidatorSubsetModal } from '#components'
 import { getGroupLabel } from '~/utils/dashboard/group'
 import type { DashboardKey } from '~/types/dashboard'
 import type { VDBSummaryTableRow } from '~/types/api/validator_dashboard'
-import type { SummaryValidatorsIconRowInfo, ValidatorSummaryIconRowKey } from '~/types/validator'
+import type {
+  SummaryValidatorsIconRowInfo,
+  ValidatorSummaryIconRowKey,
+} from '~/types/validator'
 
 interface Props {
-  row: VDBSummaryTableRow,
-  absolute: boolean,
-  groupId?: number,
+  row: VDBSummaryTableRow
+  absolute: boolean
+  groupId?: number
   timeFrame?: SummaryTimeFrame
-  context: DashboardValidatorContext,
-  dashboardKey?: DashboardKey,
+  context: DashboardValidatorContext
+  dashboardKey?: DashboardKey
   isTooltip?: boolean
 }
 const props = defineProps<Props>()
@@ -35,9 +39,9 @@ const openValidatorModal = () => {
       groupId: props.groupId,
       dashboardKey: props.dashboardKey,
       summary: {
-        row: props.row
-      }
-    }
+        row: props.row,
+      },
+    },
   })
 }
 
@@ -65,16 +69,26 @@ const mapped = computed(() => {
   return {
     list,
     total,
-    validatorIcons
+    validatorIcons,
   }
 })
-
 </script>
+
 <template>
-  <div v-if="mapped.list.length" class="validator-status-column">
+  <div
+    v-if="mapped.list.length"
+    class="validator-status-column"
+  >
     <BcTooltip class="status-list">
-      <template v-if="!isTooltip" #tooltip>
-        <DashboardTableSummaryValidators v-bind="props" :absolute="!props.absolute" :is-tooltip="true" />
+      <template
+        v-if="!isTooltip"
+        #tooltip
+      >
+        <DashboardTableSummaryValidators
+          v-bind="props"
+          :absolute="!props.absolute"
+          :is-tooltip="true"
+        />
       </template>
       <DashboardTableSummaryValidatorsIconRow
         :icons="mapped.list"
@@ -95,7 +109,7 @@ const mapped = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/utils.scss';
+@use "~/assets/css/utils.scss";
 
 .validator-status-column {
   display: flex;
diff --git a/frontend/components/dashboard/table/SummaryValidatorsIconRow.vue b/frontend/components/dashboard/table/SummaryValidatorsIconRow.vue
index 8e216da8f..325f2eabb 100644
--- a/frontend/components/dashboard/table/SummaryValidatorsIconRow.vue
+++ b/frontend/components/dashboard/table/SummaryValidatorsIconRow.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faPowerOff
-} from '@fortawesome/pro-solid-svg-icons'
+import { faPowerOff } from '@fortawesome/pro-solid-svg-icons'
 import type { SummaryValidatorsIconRowInfo } from '~/types/validator'
 
 interface Props {
@@ -12,21 +10,36 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const combinedTotal = computed<number>(() => props.total ?? props.icons?.reduce((sum, icon) => sum + icon.count, 0) ?? 0)
-
+const combinedTotal = computed<number>(
+  () =>
+    props.total ?? props.icons?.reduce((sum, icon) => sum + icon.count, 0) ?? 0,
+)
 </script>
+
 <template>
-  <div v-for="status in icons" :key="status.key" class="status" :class="status.key">
+  <div
+    v-for="status in icons"
+    :key="status.key"
+    class="status"
+    :class="status.key"
+  >
     <div class="icon">
       <FontAwesomeIcon :icon="faPowerOff" />
     </div>
-    <BcFormatNumber v-if="absolute" :value="status.count" />
-    <BcFormatPercent v-else :value="status.count" :base="combinedTotal" />
+    <BcFormatNumber
+      v-if="absolute"
+      :value="status.count"
+    />
+    <BcFormatPercent
+      v-else
+      :value="status.count"
+      :base="combinedTotal"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/utils.scss';
+@use "~/assets/css/utils.scss";
 
 .status {
   display: flex;
@@ -66,7 +79,6 @@ const combinedTotal = computed<number>(() => props.total ?? props.icons?.reduce(
     }
 
     span {
-
       color: var(--negative-color);
     }
   }
diff --git a/frontend/components/dashboard/table/SummaryValue.vue b/frontend/components/dashboard/table/SummaryValue.vue
index 55d767470..ec81480a0 100644
--- a/frontend/components/dashboard/table/SummaryValue.vue
+++ b/frontend/components/dashboard/table/SummaryValue.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faInfoCircle
-} from '@fortawesome/pro-regular-svg-icons'
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import {
   faCube,
   faSync,
-  faArrowUpRightFromSquare
+  faArrowUpRightFromSquare,
 } from '@fortawesome/pro-solid-svg-icons'
 import {
   SummaryDetailsEfficiencyProps,
@@ -15,20 +13,24 @@ import {
   type SummaryDetailsEfficiencyProp,
   type SummaryDetailsEfficiencyCombinedProp,
   type DashboardValidatorContext,
-  type SummaryTimeFrame
+  type SummaryTimeFrame,
 } from '~/types/dashboard/summary'
 import { getGroupLabel } from '~/utils/dashboard/group'
-import type { VDBGroupSummaryColumnItem, VDBGroupSummaryData, VDBSummaryTableRow } from '~/types/api/validator_dashboard'
+import type {
+  VDBGroupSummaryColumnItem,
+  VDBGroupSummaryData,
+  VDBSummaryTableRow,
+} from '~/types/api/validator_dashboard'
 import type { StatusCount } from '~/types/api/common'
 import { DashboardValidatorSubsetModal } from '#components'
 
 interface Props {
-  property: SummaryDetailsEfficiencyCombinedProp,
-  timeFrame: SummaryTimeFrame,
-  data?: VDBGroupSummaryData,
-  row: VDBSummaryTableRow,
-  absolute?: boolean,
-  inDetailView?: boolean,
+  property: SummaryDetailsEfficiencyCombinedProp
+  timeFrame: SummaryTimeFrame
+  data?: VDBGroupSummaryData
+  row: VDBSummaryTableRow
+  absolute?: boolean
+  inDetailView?: boolean
 }
 const props = defineProps<Props>()
 
@@ -43,89 +45,122 @@ const data = computed(() => {
   if (row && props.property === 'attestations') {
     return {
       efficiency: {
-        status_count: row.attestations
-      }
+        status_count: row.attestations,
+      },
     }
-  } else if (row && props.property === 'proposals') {
+  }
+  else if (row && props.property === 'proposals') {
     return {
       efficiency: {
-        status_count: row.proposals
+        status_count: row.proposals,
       },
-      context: !props.inDetailView ? 'proposal' : undefined
+      context: !props.inDetailView ? 'proposal' : undefined,
     }
-  } else if (col && SummaryDetailsEfficiencyProps.includes(props.property as SummaryDetailsEfficiencyProp)) {
-    const tooltip: { title: string, text: string } | undefined = $tm(`dashboard.validator.tooltip.${props.property}`)
+  }
+  else if (
+    col
+    && SummaryDetailsEfficiencyProps.includes(
+      props.property as SummaryDetailsEfficiencyProp,
+    )
+  ) {
+    const tooltip: { title: string, text: string } | undefined = $tm(
+      `dashboard.validator.tooltip.${props.property}`,
+    )
     const prop = col[props.property as SummaryDetailsEfficiencyProp]
 
     return {
       efficiency: {
-        status_count: (prop as VDBGroupSummaryColumnItem).status_count || prop as StatusCount,
-        sync_count: props.property === 'sync' ? col.sync_count : undefined
+        status_count:
+          (prop as VDBGroupSummaryColumnItem).status_count
+          || (prop as StatusCount),
+        sync_count: props.property === 'sync' ? col.sync_count : undefined,
       },
-      tooltip
+      tooltip,
     }
-  } else if (col && SummaryDetailsEfficiencyValidatorProps.includes(props.property as SummaryDetailsEfficiencyValidatorProp)) {
+  }
+  else if (
+    col
+    && SummaryDetailsEfficiencyValidatorProps.includes(
+      props.property as SummaryDetailsEfficiencyValidatorProp,
+    )
+  ) {
     let validators: number[] = []
     let context: DashboardValidatorContext = 'attestation'
     if (props.property === 'validators_proposal') {
       validators = col.proposal_validators
       context = 'proposal'
-    } else if (props.property === 'validators_sync') {
+    }
+    else if (props.property === 'validators_sync') {
       validators = col.sync.validators ?? []
       context = 'sync'
-    } else if (props.property === 'validators_slashings') {
+    }
+    else if (props.property === 'validators_slashings') {
       validators = col.slashings?.validators ?? []
       context = 'slashings'
     }
     return {
       validators,
-      context
+      context,
     }
-  } else if (col && props.property === 'attestation_efficiency') {
-    const tooltip: { title: string, text: string } | undefined = $tm('dashboard.validator.tooltip.attestation_efficiency')
+  }
+  else if (col && props.property === 'attestation_efficiency') {
+    const tooltip: { title: string, text: string } | undefined = $tm(
+      'dashboard.validator.tooltip.attestation_efficiency',
+    )
     return {
       attestationEfficiency: col.attestation_efficiency,
-      tooltip
+      tooltip,
     }
-  } else if (row && col && props.property === 'apr') {
+  }
+  else if (row && col && props.property === 'apr') {
     return {
       apr: {
         apr: col.apr,
         total: col.apr.cl + col.apr.el,
-        income: row.reward
-      }
+        income: row.reward,
+      },
     }
-  } else if (col && props.property === 'luck') {
+  }
+  else if (col && props.property === 'luck') {
     return {
-      luck: col.luck
+      luck: col.luck,
     }
-  } else if (row && props.property === 'efficiency') {
+  }
+  else if (row && props.property === 'efficiency') {
     return {
       efficiencyTotal: {
         value: row.efficiency,
-        compare: row.average_network_efficiency
-      }
+        compare: row.average_network_efficiency,
+      },
     }
-  } else if (col && props.property === 'attestation_avg_incl_dist') {
+  }
+  else if (col && props.property === 'attestation_avg_incl_dist') {
     return {
       simple: {
-        value: trim(col.attestation_avg_incl_dist, 2, 2)
-      }
+        value: trim(col.attestation_avg_incl_dist, 2, 2),
+      },
     }
-  } else if (row && props.property === 'reward') {
+  }
+  else if (row && props.property === 'reward') {
     return {
-      reward: row.reward
+      reward: row.reward,
     }
-  } else if (col && props.property === 'missed_rewards') {
+  }
+  else if (col && props.property === 'missed_rewards') {
     return {
-      missedRewards: col.missed_rewards
+      missedRewards: col.missed_rewards,
     }
   }
   return undefined
 })
 
 const groupName = computed(() => {
-  return getGroupLabel($t, props.row.group_id, groups.value, $t('common.total'))
+  return getGroupLabel(
+    $t,
+    props.row.group_id,
+    groups.value,
+    $t('common.total'),
+  )
 })
 
 const openValidatorModal = () => {
@@ -138,27 +173,38 @@ const openValidatorModal = () => {
       dashboardKey: dashboardKey.value,
       summary: {
         row: props.row,
-        data: props.data
-      }
-    }
+        data: props.data,
+      },
+    },
   })
 }
-
 </script>
 
 <template>
-  <DashboardTableSummaryMissedRewards v-if="data?.missedRewards" :missed-rewards="data.missedRewards" />
-  <DashboardTableSummaryReward v-else-if="data?.reward" :reward="data.reward" />
-  <div v-else-if="data?.efficiency" class="info_row">
+  <DashboardTableSummaryMissedRewards
+    v-if="data?.missedRewards"
+    :missed-rewards="data.missedRewards"
+  />
+  <DashboardTableSummaryReward
+    v-else-if="data?.reward"
+    :reward="data.reward"
+  />
+  <div
+    v-else-if="data?.efficiency"
+    class="info_row"
+  >
     <DashboardTableEfficiency
       :absolute="absolute"
       :success="data.efficiency.status_count.success"
       :failed="data.efficiency.status_count.failed"
     >
-      <template v-if="data.efficiency.sync_count" #tooltip>
+      <template
+        v-if="data.efficiency.sync_count"
+        #tooltip
+      >
         <div>
           <div class="row">
-            <b>{{ $t('dashboard.validator.summary.row.sync_committee') }}: </b>
+            <b>{{ $t("dashboard.validator.summary.row.sync_committee") }}: </b>
             <DashboardTableEfficiency
               :absolute="true"
               :is-tooltip="true"
@@ -175,22 +221,38 @@ const openValidatorModal = () => {
             )
           </div>
           <div class="row next_chapter">
-            <b>{{ $t('common.current') }}: </b>
-            <span>{{ data.efficiency.sync_count.current_validators }} {{ $t('dashboard.validator.summary.tooltip.amount_of_validators') }}</span>
+            <b>{{ $t("common.current") }}: </b>
+            <span>{{ data.efficiency.sync_count.current_validators }}
+              {{
+                $t("dashboard.validator.summary.tooltip.amount_of_validators")
+              }}</span>
           </div>
           <div class="row">
-            <b>{{ $t('common.upcoming') }}: </b>
-            <span>{{ data.efficiency.sync_count.upcoming_validators }} {{ $t('dashboard.validator.summary.tooltip.amount_of_validators') }}</span>
+            <b>{{ $t("common.upcoming") }}: </b>
+            <span>{{ data.efficiency.sync_count.upcoming_validators }}
+              {{
+                $t("dashboard.validator.summary.tooltip.amount_of_validators")
+              }}</span>
           </div>
           <div class="row">
-            <b>{{ $t('common.past') }}: </b>
-            <span>{{ data.efficiency.sync_count.past_periods }} {{ $t('dashboard.validator.summary.tooltip.amount_of_rounds') }}</span>
+            <b>{{ $t("common.past") }}: </b>
+            <span>{{ data.efficiency.sync_count.past_periods }}
+              {{
+                $t("dashboard.validator.summary.tooltip.amount_of_rounds")
+              }}</span>
           </div>
         </div>
       </template>
     </DashboardTableEfficiency>
-    <BcTooltip position="top" :text="data.tooltip?.text" :title="data.tooltip?.title">
-      <FontAwesomeIcon v-if="data.tooltip?.title" :icon="faInfoCircle" />
+    <BcTooltip
+      position="top"
+      :text="data.tooltip?.text"
+      :title="data.tooltip?.title"
+    >
+      <FontAwesomeIcon
+        v-if="data.tooltip?.title"
+        :icon="faInfoCircle"
+      />
     </BcTooltip>
     <FontAwesomeIcon
       v-if="data?.context"
@@ -209,40 +271,70 @@ const openValidatorModal = () => {
     :data="props.data"
     :row="props.row"
   />
-  <div v-else-if="data?.attestationEfficiency !== undefined" class="info_row">
-    <BcFormatPercent :percent="data?.attestationEfficiency" :color-break-point="80" />
-    <BcTooltip position="top" :text="data.tooltip?.text" :title="data.tooltip?.title">
+  <div
+    v-else-if="data?.attestationEfficiency !== undefined"
+    class="info_row"
+  >
+    <BcFormatPercent
+      :percent="data?.attestationEfficiency"
+      :color-break-point="80"
+    />
+    <BcTooltip
+      position="top"
+      :text="data.tooltip?.text"
+      :title="data.tooltip?.title"
+    >
       <FontAwesomeIcon :icon="faInfoCircle" />
     </BcTooltip>
   </div>
-  <div v-else-if="data?.apr" class="info_row">
+  <div
+    v-else-if="data?.apr"
+    class="info_row"
+  >
     <BcFormatPercent :percent="data.apr.total" />
     <BcTooltip position="top">
       <FontAwesomeIcon :icon="faInfoCircle" />
       <template #tooltip>
         <div class="row">
-          <b>{{ $t('common.execution_layer') }}:</b>
-          <BcFormatValue class="space_before" :value="data.apr.income.el" /> (
+          <b>{{ $t("common.execution_layer") }}:</b>
+          <BcFormatValue
+            class="space_before"
+            :value="data.apr.income.el"
+          /> (
           <BcFormatPercent :percent="data.apr.apr.el" />)
         </div>
         <div class="row">
-          <b>{{ $t('common.consensus_layer') }}:</b>
-          <BcFormatValue class="space_before" :value="data.apr.income.cl" /> (
+          <b>{{ $t("common.consensus_layer") }}:</b>
+          <BcFormatValue
+            class="space_before"
+            :value="data.apr.income.cl"
+          /> (
           <BcFormatPercent :percent="data.apr.apr.cl" />)
         </div>
       </template>
     </BcTooltip>
   </div>
-  <div v-else-if="data?.luck" class="info_row">
+  <div
+    v-else-if="data?.luck"
+    class="info_row"
+  >
     <span>
       <span class="no-wrap">
         <FontAwesomeIcon :icon="faCube" />
-        <BcFormatPercent class="space_before" :percent="data.luck.proposal.percent" :precision="0" />
+        <BcFormatPercent
+          class="space_before"
+          :percent="data.luck.proposal.percent"
+          :precision="0"
+        />
       </span>
       <span> | </span>
       <span class="no-wrap">
         <FontAwesomeIcon :icon="faSync" />
-        <BcFormatPercent class="space_before" :percent="data.luck.sync.percent" :precision="0" />
+        <BcFormatPercent
+          class="space_before"
+          :percent="data.luck.sync.percent"
+          :precision="0"
+        />
       </span>
     </span>
     <BcTooltip position="top">
@@ -250,38 +342,41 @@ const openValidatorModal = () => {
       <template #tooltip>
         <div class="row">
           <b>
-            {{ $t('dashboard.validator.tooltip.block_proposal') }}
+            {{ $t("dashboard.validator.tooltip.block_proposal") }}
           </b>
         </div>
         <div class="row">
-          <b>
-            {{ $t('common.luck') }}:
-          </b>
+          <b> {{ $t("common.luck") }}: </b>
           <BcFormatPercent :percent="data.luck.proposal.percent" />
         </div>
         <div class="row">
-          <b>
-            {{ $t('common.average') }}:
-          </b>
-          {{ $t('common.every_x', { duration: formatNanoSecondDuration(data.luck.proposal.average, $t) }) }}
+          <b> {{ $t("common.average") }}: </b>
+          {{
+            $t("common.every_x", {
+              duration: formatNanoSecondDuration(
+                data.luck.proposal.average,
+                $t,
+              ),
+            })
+          }}
         </div>
         <br>
         <div class="row next_chapter">
           <b class="part">
-            {{ $t('dashboard.validator.tooltip.sync_committee') }}
+            {{ $t("dashboard.validator.tooltip.sync_committee") }}
           </b>
         </div>
         <div class="row">
-          <b>
-            {{ $t('common.luck') }}:
-          </b>
+          <b> {{ $t("common.luck") }}: </b>
           <BcFormatPercent :percent="data.luck.sync.percent" />
         </div>
         <div class="row">
-          <b>
-            {{ $t('common.average') }}:
-          </b>
-          {{ $t('common.every_x', { duration: formatNanoSecondDuration(data.luck.sync.average, $t) }) }}
+          <b> {{ $t("common.average") }}: </b>
+          {{
+            $t("common.every_x", {
+              duration: formatNanoSecondDuration(data.luck.sync.average, $t),
+            })
+          }}
         </div>
       </template>
     </BcTooltip>
@@ -293,9 +388,14 @@ const openValidatorModal = () => {
     :compare-percent="data.efficiencyTotal.compare"
     :color-break-point="80"
   >
-    <template #leading-tooltip="{compare}">
+    <template #leading-tooltip="{ compare }">
       <span class="efficiency-total-tooltip">
-        {{ $t(`dashboard.validator.summary.tooltip.${compare}`, {name: groupName, average: formatPercent(row.average_network_efficiency)}) }}
+        {{
+          $t(`dashboard.validator.summary.tooltip.${compare}`, {
+            name: groupName,
+            average: formatPercent(row.average_network_efficiency),
+          })
+        }}
       </span>
     </template>
   </BcFormatPercent>
@@ -327,7 +427,7 @@ const openValidatorModal = () => {
   align-items: center;
 }
 
-.efficiency-total-tooltip{
+.efficiency-total-tooltip {
   width: 155px;
 }
 </style>
diff --git a/frontend/components/dashboard/validator/subset/ValidatorSubsetList.vue b/frontend/components/dashboard/validator/subset/ValidatorSubsetList.vue
index 16eed3c73..623df9763 100644
--- a/frontend/components/dashboard/validator/subset/ValidatorSubsetList.vue
+++ b/frontend/components/dashboard/validator/subset/ValidatorSubsetList.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { warn } from 'vue'
-import {
-  faCopy
-} from '@fortawesome/pro-solid-svg-icons'
+import { faCopy } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { Paging } from '~/types/api/common'
 import { type Cursor } from '~/types/datatable'
@@ -10,8 +8,8 @@ import type { ValidatorSubsetCategory } from '~/types/validator'
 import type { VDBSummaryValidator } from '~/types/api/validator_dashboard'
 
 interface Props {
-  category: ValidatorSubsetCategory,
-  validators: VDBSummaryValidator[],
+  category: ValidatorSubsetCategory
+  validators: VDBSummaryValidator[]
 }
 const props = defineProps<Props>()
 
@@ -21,20 +19,26 @@ const paging = ref<Paging | null>(null)
 const cursor = ref<Cursor>(undefined)
 const VALIDATORS_PER_PAGE = 100
 
-watch(props, (p) => {
-  cursor.value = undefined
-  if (p?.validators?.length) {
-    if (p.validators.length > VALIDATORS_PER_PAGE) {
-      paging.value = {
-        total_count: p.validators.length
+watch(
+  props,
+  (p) => {
+    cursor.value = undefined
+    if (p?.validators?.length) {
+      if (p.validators.length > VALIDATORS_PER_PAGE) {
+        paging.value = {
+          total_count: p.validators.length,
+        }
       }
-    } else {
+      else {
+        paging.value = null
+      }
+    }
+    else {
       paging.value = null
     }
-  } else {
-    paging.value = null
-  }
-}, { immediate: true })
+  },
+  { immediate: true },
+)
 
 const currentPage = computed<VDBSummaryValidator[]>(() => {
   if (!props.validators?.length) {
@@ -44,17 +48,18 @@ const currentPage = computed<VDBSummaryValidator[]>(() => {
   return props.validators.slice(start, start + VALIDATORS_PER_PAGE)
 })
 
-function copyValidatorsToClipboard (): void {
+function copyValidatorsToClipboard(): void {
   if (!props.validators?.length) {
     return
   }
-  navigator.clipboard.writeText(props.validators.map(v => v.index).join(','))
+  navigator.clipboard
+    .writeText(props.validators.map(v => v.index).join(','))
     .catch((error) => {
       warn('Error copying text to clipboard:', error)
     })
 }
 
-function mapDutyLabel (dutyObjects?: number[]) {
+function mapDutyLabel(dutyObjects?: number[]) {
   if (!dutyObjects) {
     return
   }
@@ -64,14 +69,23 @@ function mapDutyLabel (dutyObjects?: number[]) {
     case 'proposal_missed':
       return $t('common.slot', dutyObjects.length) + ':'
     case 'pending':
-      return formatGoTimestamp(dutyObjects[0], undefined, 'relative', 'short', $t('locales.date'), true)
+      return formatGoTimestamp(
+        dutyObjects[0],
+        undefined,
+        'relative',
+        'short',
+        $t('locales.date'),
+        true,
+      )
     case 'has_slashed':
       return $t('dashboard.validator.subset_dialog.slashed') + ':'
     case 'got_slashed':
       return $t('dashboard.validator.subset_dialog.got_slashed') + ':'
   }
 }
-function mapDutyLinks (dutyObjects?: number[]): { to?: string, label: string }[] {
+function mapDutyLinks(
+  dutyObjects?: number[],
+): { to?: string, label: string }[] {
   if (!dutyObjects) {
     return []
   }
@@ -93,58 +107,78 @@ function mapDutyLinks (dutyObjects?: number[]): { to?: string, label: string }[]
   if (path) {
     return dutyObjects.map(o => ({
       to: `${path}${o}`,
-      label: `${formatValue ? formatNumber(o) : o}`
+      label: `${formatValue ? formatNumber(o) : o}`,
     }))
-  } else {
+  }
+  else {
     return dutyObjects.map(o => ({
-      label: `${formatValue ? formatNumber(o) : o}`
+      label: `${formatValue ? formatNumber(o) : o}`,
     }))
   }
 }
-
 </script>
 
 <template>
   <div class="validator-list">
     <div class="list">
-      <div class="copy_button" @click="copyValidatorsToClipboard">
+      <div
+        class="copy_button"
+        @click="copyValidatorsToClipboard"
+      >
         <FontAwesomeIcon :icon="faCopy" />
       </div>
-      <template v-for="v in currentPage" :key="v.index">
-        <BcLink :to="`/validator/${v.index}`" target="_blank" class="link">
+      <template
+        v-for="v in currentPage"
+        :key="v.index"
+      >
+        <BcLink
+          :to="`/validator/${v.index}`"
+          target="_blank"
+          class="link"
+        >
           {{ v.index }}
         </BcLink>
         <template v-if="v.duty_objects?.length">
           <span class="round-brackets">
             <span class="label">{{ mapDutyLabel(v.duty_objects) }}</span>
-            <template v-for="link in mapDutyLinks(v.duty_objects)" :key="link.label">
-              <BcLink v-if="link.to" :to="link.to" target="_blank" class="link">
+            <template
+              v-for="link in mapDutyLinks(v.duty_objects)"
+              :key="link.label"
+            >
+              <BcLink
+                v-if="link.to"
+                :to="link.to"
+                target="_blank"
+                class="link"
+              >
                 {{ link.label }}
               </BcLink>
               <span v-else>{{ link.label }}</span>
               <span>, </span>
-
             </template>
           </span>
         </template>
         <span>, </span>
       </template>
     </div>
-    <div v-if="paging" class="page-row">
+    <div
+      v-if="paging"
+      class="page-row"
+    >
       <BcTablePager
         class="pager"
         :cursor="cursor"
         :page-size="VALIDATORS_PER_PAGE"
         :paging="paging"
         :stepper-only="true"
-        @set-cursor="(c: Cursor) => cursor = c"
+        @set-cursor="(c: Cursor) => (cursor = c)"
       />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
+@use "~/assets/css/main.scss";
 
 .validator-list {
   flex-grow: 1;
@@ -163,8 +197,8 @@ function mapDutyLinks (dutyObjects?: number[]): { to?: string, label: string }[]
     margin: 0;
   }
 
-  .round-brackets>span:last-child:not(.label),
-  .list>span:last-child {
+  .round-brackets > span:last-child:not(.label),
+  .list > span:last-child {
     display: none;
   }
 
diff --git a/frontend/components/dashboard/validator/subset/ValidatorSubsetListHeader.vue b/frontend/components/dashboard/validator/subset/ValidatorSubsetListHeader.vue
index f551926ac..0232a6bf6 100644
--- a/frontend/components/dashboard/validator/subset/ValidatorSubsetListHeader.vue
+++ b/frontend/components/dashboard/validator/subset/ValidatorSubsetListHeader.vue
@@ -2,11 +2,11 @@
 import {
   faDesktop,
   faPowerOff,
-  faMoneyBill
+  faMoneyBill,
 } from '@fortawesome/pro-solid-svg-icons'
 import {
   faClock,
-  type IconDefinition
+  type IconDefinition,
 } from '@fortawesome/pro-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { ValidatorSubsetCategory } from '~/types/validator'
@@ -15,8 +15,8 @@ import type { SlotVizCategories } from '~/types/dashboard/slotViz'
 import { countSummaryValidatorDuties } from '~/utils/dashboard/validator'
 
 interface Props {
-  category: ValidatorSubsetCategory,
-  validators: VDBSummaryValidator[],
+  category: ValidatorSubsetCategory
+  validators: VDBSummaryValidator[]
 }
 const props = defineProps<Props>()
 
@@ -77,15 +77,26 @@ const icon = computed(() => {
   return { icon, className, slotVizCategory }
 })
 
-const count = computed(() => countSummaryValidatorDuties(props.validators, props.category))
-
+const count = computed(() =>
+  countSummaryValidatorDuties(props.validators, props.category),
+)
 </script>
 
 <template>
   <div class="subset--list-header">
-    <FontAwesomeIcon v-if="icon.icon" :icon="icon.icon" :class="icon.className" />
-    <SlotVizIcon v-else-if="icon.slotVizCategory" :icon="icon.slotVizCategory" :class="icon.className" />
-    <span>{{ $t(`dashboard.validator.subset_dialog.category.${category}`) }}</span>
+    <FontAwesomeIcon
+      v-if="icon.icon"
+      :icon="icon.icon"
+      :class="icon.className"
+    />
+    <SlotVizIcon
+      v-else-if="icon.slotVizCategory"
+      :icon="icon.slotVizCategory"
+      :class="icon.className"
+    />
+    <span>{{
+      $t(`dashboard.validator.subset_dialog.category.${category}`)
+    }}</span>
     <span> (<BcFormatNumber :value="count" />)</span>
   </div>
 </template>
diff --git a/frontend/components/dashboard/validator/subset/ValidatorSubsetModal.vue b/frontend/components/dashboard/validator/subset/ValidatorSubsetModal.vue
index 2777c1b7d..0fbbe2344 100644
--- a/frontend/components/dashboard/validator/subset/ValidatorSubsetModal.vue
+++ b/frontend/components/dashboard/validator/subset/ValidatorSubsetModal.vue
@@ -1,28 +1,38 @@
 <script lang="ts" setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faCaretRight
-} from '@fortawesome/pro-solid-svg-icons'
+import { faCaretRight } from '@fortawesome/pro-solid-svg-icons'
 import { uniqBy } from 'lodash-es'
-import type { DashboardValidatorContext, SummaryTimeFrame } from '~/types/dashboard/summary'
+import type {
+  DashboardValidatorContext,
+  SummaryTimeFrame,
+} from '~/types/dashboard/summary'
 import type { DashboardKey } from '~/types/dashboard'
-import type { ValidatorSubset, ValidatorSubsetCategory } from '~/types/validator'
+import type {
+  ValidatorSubset,
+  ValidatorSubsetCategory,
+} from '~/types/validator'
 import { sortSummaryValidators } from '~/utils/dashboard/validator'
 import { API_PATH } from '~/types/customFetch'
-import { type InternalGetValidatorDashboardSummaryValidatorsResponse, type VDBGroupSummaryData, type VDBSummaryTableRow, type VDBSummaryValidator, type VDBSummaryValidatorsData } from '~/types/api/validator_dashboard'
+import {
+  type InternalGetValidatorDashboardSummaryValidatorsResponse,
+  type VDBGroupSummaryData,
+  type VDBSummaryTableRow,
+  type VDBSummaryValidator,
+  type VDBSummaryValidatorsData,
+} from '~/types/api/validator_dashboard'
 
 const { t: $t } = useTranslation()
 const { fetch } = useCustomFetch()
 
 interface Props {
-  context: DashboardValidatorContext,
-  timeFrame?: SummaryTimeFrame,
-  dashboardKey?: DashboardKey,
-  dashboardName?: string,
-  groupName?: string,
-  groupId?: number,
+  context: DashboardValidatorContext
+  timeFrame?: SummaryTimeFrame
+  dashboardKey?: DashboardKey
+  dashboardName?: string
+  groupName?: string
+  groupId?: number
   summary?: {
-    data?: VDBGroupSummaryData,
+    data?: VDBGroupSummaryData
     row: VDBSummaryTableRow
   }
 }
@@ -32,56 +42,66 @@ const isLoading = ref(false)
 const filter = ref('')
 const data = ref<VDBSummaryValidatorsData[]>([])
 
-watch(props, async (p) => {
-  if (p) {
-    let text = 'Validators'
-    switch (p.context) {
-      case 'attestation':
-        text = $t('dashboard.validator.summary.row.attestations')
-        break
-      case 'sync':
-        text = $t('dashboard.validator.summary.row.sync_committee')
-        break
-      case 'slashings':
-        text = $t('dashboard.validator.summary.row.slashings')
-        break
-      case 'proposal':
-        text = $t('dashboard.validator.summary.row.proposals')
-        break
-      case 'group':
-        text = $t('dashboard.validator.col.validators')
-        break
-    }
+watch(
+  props,
+  async (p) => {
+    if (p) {
+      let text = 'Validators'
+      switch (p.context) {
+        case 'attestation':
+          text = $t('dashboard.validator.summary.row.attestations')
+          break
+        case 'sync':
+          text = $t('dashboard.validator.summary.row.sync_committee')
+          break
+        case 'slashings':
+          text = $t('dashboard.validator.summary.row.slashings')
+          break
+        case 'proposal':
+          text = $t('dashboard.validator.summary.row.proposals')
+          break
+        case 'group':
+          text = $t('dashboard.validator.col.validators')
+          break
+      }
 
-    setHeader(
-      text
-    )
+      setHeader(text)
 
-    isLoading.value = true
-    let duty = ''
-    switch (p.context) {
-      case 'sync':
-        duty = 'sync'
-        break
-      case 'proposal':
-        duty = 'proposal'
-        break
-      case 'slashings':
-        duty = 'slashed'
-        break
-    }
+      isLoading.value = true
+      let duty = ''
+      switch (p.context) {
+        case 'sync':
+          duty = 'sync'
+          break
+        case 'proposal':
+          duty = 'proposal'
+          break
+        case 'slashings':
+          duty = 'slashed'
+          break
+      }
 
-    const res = await fetch<InternalGetValidatorDashboardSummaryValidatorsResponse>(API_PATH.DASHBOARD_VALIDATOR_INDICES, { query: { period: p?.timeFrame, duty, group_id: p?.groupId } }, { dashboardKey: `${p?.dashboardKey}` })
-    data.value = res.data
-    isLoading.value = false
-  }
-}, { immediate: true })
+      const res
+        = await fetch<InternalGetValidatorDashboardSummaryValidatorsResponse>(
+          API_PATH.DASHBOARD_VALIDATOR_INDICES,
+          { query: { period: p?.timeFrame, duty, group_id: p?.groupId } },
+          { dashboardKey: `${p?.dashboardKey}` },
+        )
+      data.value = res.data
+      isLoading.value = false
+    }
+  },
+  { immediate: true },
+)
 
 const subsets = computed<ValidatorSubset[]>(() => {
-  const sortAndFilter = (validators:VDBSummaryValidator[]):VDBSummaryValidator[] => {
+  const sortAndFilter = (
+    validators: VDBSummaryValidator[],
+  ): VDBSummaryValidator[] => {
     if (!filter.value) {
       return sortSummaryValidators(validators)
-    } else {
+    }
+    else {
       const index = parseInt(filter.value)
       if (isNaN(index)) {
         return []
@@ -94,27 +114,55 @@ const subsets = computed<ValidatorSubset[]>(() => {
     return []
   }
 
-  const filtered:ValidatorSubset[] = data.value.map(sub => ({
-    category: sub.category,
-    validators: sortAndFilter(sub.validators)
-  })).filter(s => !!s.validators.length)
+  const filtered: ValidatorSubset[] = data.value
+    .map(sub => ({
+      category: sub.category,
+      validators: sortAndFilter(sub.validators),
+    }))
+    .filter(s => !!s.validators.length)
 
   // Let's combine what needs to be combined
   if (filtered.length > 1) {
-    if (props.value?.context === 'group' || props.value?.context === 'dashboard') {
-      const all:ValidatorSubset = {
+    if (
+      props.value?.context === 'group'
+      || props.value?.context === 'dashboard'
+    ) {
+      const all: ValidatorSubset = {
         category: 'all',
-        validators: []
+        validators: [],
       }
-      all.validators = sortSummaryValidators(uniqBy(filtered.reduce((list, sub) => list.concat(sub.validators.map(v => ({ index: v.index, duty_objects: [] }))), all.validators), 'index'))
+      all.validators = sortSummaryValidators(
+        uniqBy(
+          filtered.reduce(
+            (list, sub) =>
+              list.concat(
+                sub.validators.map(v => ({
+                  index: v.index,
+                  duty_objects: [],
+                })),
+              ),
+            all.validators,
+          ),
+          'index',
+        ),
+      )
       filtered.splice(0, 0, all)
     }
 
-    // we need to split up the withdrawn and withrawing categories into exited and slashed and not show them individually
-    const withdrawnIndex = filtered.findIndex(s => s.category === 'withdrawn')
-    const withdrawn = withdrawnIndex >= 0 ? filtered.splice(withdrawnIndex, 1)[0] : undefined
-    const withdrawingIndex = filtered.findIndex(s => s.category === 'withdrawing')
-    const withdrawing = withdrawingIndex >= 0 ? filtered.splice(withdrawingIndex, 1)[0] : undefined
+    // we need to split up the withdrawn and withrawing categories into exited
+    // and slashed and not show them individually
+    const withdrawnIndex = filtered.findIndex(
+      s => s.category === 'withdrawn',
+    )
+    const withdrawn
+      = withdrawnIndex >= 0 ? filtered.splice(withdrawnIndex, 1)[0] : undefined
+    const withdrawingIndex = filtered.findIndex(
+      s => s.category === 'withdrawing',
+    )
+    const withdrawing
+      = withdrawingIndex >= 0
+        ? filtered.splice(withdrawingIndex, 1)[0]
+        : undefined
     if (withdrawn?.validators.length || withdrawing?.validators.length) {
       // a withrawn/withrawing validator can either be in the exited or slashed group
       const categories: ValidatorSubsetCategory[] = ['exited', 'slashed']
@@ -125,14 +173,17 @@ const subsets = computed<ValidatorSubset[]>(() => {
 
           const xWithdrawn: ValidatorSubset = {
             category: `${category}_withdrawn` as ValidatorSubsetCategory,
-            validators: []
+            validators: [],
           }
           const xWithdrawing: ValidatorSubset = {
-            category: `${category}_withdrawing`as ValidatorSubsetCategory,
-            validators: []
+            category: `${category}_withdrawing` as ValidatorSubsetCategory,
+            validators: [],
           }
 
-          const subsets = [[withdrawn, xWithdrawn], [withdrawing, xWithdrawing]]
+          const subsets = [
+            [withdrawn, xWithdrawn],
+            [withdrawing, xWithdrawing],
+          ]
           baseSubset.validators.forEach((v) => {
             subsets.forEach(([origin, merged]) => {
               if (origin?.validators.find(sV => v.index === sV.index)) {
@@ -152,7 +203,6 @@ const subsets = computed<ValidatorSubset[]>(() => {
   }
   return filtered
 })
-
 </script>
 
 <template>
@@ -165,21 +215,41 @@ const subsets = computed<ValidatorSubset[]>(() => {
         :summary="props.summary"
         :subsets="subsets"
       />
-      <BcContentFilter v-model="filter" :search-placeholder="$t('common.index')" @filter-changed="(f:string)=>filter=f" />
+      <BcContentFilter
+        v-model="filter"
+        :search-placeholder="$t('common.index')"
+        @filter-changed="(f: string) => (filter = f)"
+      />
     </div>
 
-    <Accordion :active-index="-1" class="accordion basic">
-      <AccordionTab v-for="subset in subsets" :key="subset.category">
+    <Accordion
+      :active-index="-1"
+      class="accordion basic"
+    >
+      <AccordionTab
+        v-for="subset in subsets"
+        :key="subset.category"
+      >
         <template #headericon>
           <FontAwesomeIcon :icon="faCaretRight" />
         </template>
         <template #header>
-          <DashboardValidatorSubsetListHeader :category="subset.category" :validators="subset.validators" />
+          <DashboardValidatorSubsetListHeader
+            :category="subset.category"
+            :validators="subset.validators"
+          />
         </template>
-        <DashboardValidatorSubsetList :category="subset.category" :validators="subset.validators" />
+        <DashboardValidatorSubsetList
+          :category="subset.category"
+          :validators="subset.validators"
+        />
       </AccordionTab>
     </Accordion>
-    <BcLoadingSpinner :loading="isLoading" alignment="center" class="spinner" />
+    <BcLoadingSpinner
+      :loading="isLoading"
+      alignment="center"
+      class="spinner"
+    />
   </div>
 </template>
 
diff --git a/frontend/components/dashboard/validator/subset/ValidatorSubsetSubHeader.vue b/frontend/components/dashboard/validator/subset/ValidatorSubsetSubHeader.vue
index 4ed4db452..c2be1775a 100644
--- a/frontend/components/dashboard/validator/subset/ValidatorSubsetSubHeader.vue
+++ b/frontend/components/dashboard/validator/subset/ValidatorSubsetSubHeader.vue
@@ -1,29 +1,46 @@
 <script lang="ts" setup>
-import type { VDBGroupSummaryData, VDBSummaryTableRow } from '~/types/api/validator_dashboard'
+import type {
+  VDBGroupSummaryData,
+  VDBSummaryTableRow,
+} from '~/types/api/validator_dashboard'
 import type { SlotVizCategories } from '~/types/dashboard/slotViz'
 import type { DashboardValidatorContext } from '~/types/dashboard/summary'
-import type { SummaryValidatorsIconRowInfo, ValidatorSubset, ValidatorSubsetCategory } from '~/types/validator'
+import type {
+  SummaryValidatorsIconRowInfo,
+  ValidatorSubset,
+  ValidatorSubsetCategory,
+} from '~/types/validator'
 import { countSubsetDuties } from '~/utils/dashboard/validator'
 
 interface Props {
-  context: DashboardValidatorContext,
-  subTitle?: string,
+  context: DashboardValidatorContext
+  subTitle?: string
   summary?: {
-    data?: VDBGroupSummaryData,
+    data?: VDBGroupSummaryData
     row: VDBSummaryTableRow
-  },
+  }
   subsets?: ValidatorSubset[]
 }
 const props = defineProps<Props>()
 
 const infos = computed(() => {
   const validatorIcons: SummaryValidatorsIconRowInfo[] = []
-  const list: { value: number | string, slotVizCategory?: SlotVizCategories, className?: string }[] = []
+  const list: {
+    value: number | string
+    slotVizCategory?: SlotVizCategories
+    className?: string
+  }[] = []
   const percent = {
     total: 0,
-    value: 0
+    value: 0,
   }
-  const addSuccessFailed = (category: SlotVizCategories, success?: number, failed?: number, successCategories?: ValidatorSubsetCategory[], failedCategories?: ValidatorSubsetCategory[]) => {
+  const addSuccessFailed = (
+    category: SlotVizCategories,
+    success?: number,
+    failed?: number,
+    successCategories?: ValidatorSubsetCategory[],
+    failedCategories?: ValidatorSubsetCategory[],
+  ) => {
     if (props.subsets?.length && successCategories) {
       success = countSubsetDuties(props.subsets, successCategories)
     }
@@ -34,25 +51,53 @@ const infos = computed(() => {
     if (percent.total > 0) {
       if (success !== undefined) {
         percent.value = success
-        list.push({ slotVizCategory: category, value: success, className: 'text-positive' })
+        list.push({
+          slotVizCategory: category,
+          value: success,
+          className: 'text-positive',
+        })
       }
       if (failed) {
-        list.push({ slotVizCategory: category, value: failed, className: 'text-negative' })
+        list.push({
+          slotVizCategory: category,
+          value: failed,
+          className: 'text-negative',
+        })
       }
     }
   }
   switch (props.context) {
     case 'attestation':
-      addSuccessFailed('attestation', props.summary?.row.attestations?.success, props.summary?.row.attestations?.failed)
+      addSuccessFailed(
+        'attestation',
+        props.summary?.row.attestations?.success,
+        props.summary?.row.attestations?.failed,
+      )
       break
     case 'sync':
-      addSuccessFailed('sync', props.summary?.data?.sync.status_count.success, props.summary?.data?.sync.status_count.failed)
+      addSuccessFailed(
+        'sync',
+        props.summary?.data?.sync.status_count.success,
+        props.summary?.data?.sync.status_count.failed,
+      )
       break
     case 'slashings':
-      addSuccessFailed('slashing', props.summary?.data?.slashings.status_count.success, props.summary?.data?.slashings.status_count.failed, ['has_slashed'], ['got_slashed'])
+      addSuccessFailed(
+        'slashing',
+        props.summary?.data?.slashings.status_count.success,
+        props.summary?.data?.slashings.status_count.failed,
+        ['has_slashed'],
+        ['got_slashed'],
+      )
       break
     case 'proposal':
-      addSuccessFailed('proposal', props.summary?.row.proposals.success, props.summary?.row.proposals.failed, ['proposal_proposed'], ['proposal_missed'])
+      addSuccessFailed(
+        'proposal',
+        props.summary?.row.proposals.success,
+        props.summary?.row.proposals.failed,
+        ['proposal_proposed'],
+        ['proposal_missed'],
+      )
       break
     case 'dashboard':
     case 'group': {
@@ -63,7 +108,8 @@ const infos = computed(() => {
         online = countSubsetDuties(props.subsets, ['online'])
         offline = countSubsetDuties(props.subsets, ['offline'])
         exited = countSubsetDuties(props.subsets, ['exited', 'slashed'])
-      } else if (props.summary?.row.validators) {
+      }
+      else if (props.summary?.row.validators) {
         online = props.summary.row.validators.online
         offline = props.summary.row.validators.offline
         exited = props.summary.row.validators.exited
@@ -85,7 +131,6 @@ const infos = computed(() => {
 
   return { list, percent, validatorIcons }
 })
-
 </script>
 
 <template>
@@ -95,8 +140,16 @@ const infos = computed(() => {
       :icons="infos.validatorIcons"
       :absolute="true"
     />
-    <div v-for="(info, index) in infos.list" :key="index" :class="info.className" class="info">
-      <SlotVizIcon v-if="info.slotVizCategory" :icon="info.slotVizCategory" />
+    <div
+      v-for="(info, index) in infos.list"
+      :key="index"
+      :class="info.className"
+      class="info"
+    >
+      <SlotVizIcon
+        v-if="info.slotVizCategory"
+        :icon="info.slotVizCategory"
+      />
       <BcFormatNumber :value="info.value" />
     </div>
     <BcFormatPercent
@@ -120,7 +173,7 @@ const infos = computed(() => {
 
   .sub-title {
     @include fonts.subtitle_text;
-    @include utils.truncate-text
+    @include utils.truncate-text;
   }
 
   .info {
diff --git a/frontend/components/icon/BeaconchainLogo.vue b/frontend/components/icon/BeaconchainLogo.vue
index a668358c7..5f7d0dd9a 100644
--- a/frontend/components/icon/BeaconchainLogo.vue
+++ b/frontend/components/icon/BeaconchainLogo.vue
@@ -1,5 +1,14 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="27" viewBox="0 0 22 27" fill="none">
-    <path d="M0 27C0 27 3.61753 20.3037 3.79603 20.1372C4.16492 19.7684 9.49602 22.4922 9.82921 22.8252C9.90061 22.8966 11.3048 27 11.3048 27H0ZM16.8977 18.5909C12.3639 22.0759 5.0931 20.4107 2.93924 14.4637C2.32046 12.751 2.21336 11.0145 2.60605 9.25415C2.84405 8.19558 3.21294 8.05285 4.10542 8.63566C6.02129 9.86074 7.90145 11.062 9.94821 12.3704C10.1505 12.0255 10.4123 11.6805 10.5908 11.2999C10.6741 11.1215 10.7098 10.8955 10.6741 10.6933C10.5432 9.87264 10.9597 9.159 11.7213 8.96869C12.4829 8.79028 13.2444 9.25415 13.4348 10.0273C13.6133 10.7766 13.1493 11.4664 12.3639 11.7162C12.1854 11.7757 12.0664 11.8233 12.0188 11.8827C11.9712 11.9541 11.1739 13.1792 11.1739 13.1792C11.1739 13.1792 13.3039 14.5946 13.9822 15.0346C14.9342 15.665 15.8743 16.2835 16.8263 16.902C17.7545 17.4967 17.7545 17.9011 16.8739 18.579L16.8977 18.5909ZM11.9355 5.7811C13.8275 5.61458 15.7077 6.70883 16.386 8.38589C16.3979 8.42157 16.4217 8.46915 16.4336 8.50483C16.6121 8.90922 16.5526 9.02816 16.1004 9.1471L15.9338 9.18279C15.6363 9.25415 15.5887 9.00438 15.3626 8.50483C14.8033 7.27975 13.5181 6.56611 12.114 6.70883C11.6618 6.75641 11.3524 6.82777 11.2929 6.60179C11.1144 5.88815 11.1382 5.84057 11.9236 5.76921L11.9355 5.7811ZM18.2662 8.59998L18.0163 8.65945C17.5522 8.77839 17.4808 8.3621 17.1238 7.5771C16.2432 5.61458 14.2202 4.44897 12.0545 4.66306C11.3524 4.73443 10.8764 4.85337 10.7812 4.48465C10.4956 3.34283 10.5432 3.27147 11.7451 3.16442C14.6843 2.91465 17.6236 4.69875 18.6945 7.3749C18.7183 7.43437 18.7421 7.50573 18.7778 7.5652C19.0634 8.20748 18.9682 8.40968 18.2662 8.58809V8.59998ZM21.491 7.79119C21.3601 7.82687 21.2411 7.85066 21.1102 7.88634C21.0388 7.89823 20.9674 7.92202 20.896 7.93391C20.301 8.08854 20.1582 7.98149 19.9083 7.43437C19.587 6.73262 19.3014 5.99519 18.8373 5.40049C16.8382 2.77192 14.1726 1.63009 10.8288 2.14154C10.4242 2.20101 10.1862 2.08207 10.0791 1.68956C10.0196 1.43979 9.94821 1.19002 9.88871 0.940242C9.78161 0.48827 9.93631 0.262284 10.4004 0.179026C13.3039 -0.344311 15.9338 0.286072 18.29 1.98691C20.063 3.24768 21.2173 4.94852 21.9313 6.9705C22.0979 7.43437 21.967 7.67225 21.4791 7.80308L21.491 7.79119Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="22"
+    height="27"
+    viewBox="0 0 22 27"
+    fill="none"
+  >
+    <path
+      d="M0 27C0 27 3.61753 20.3037 3.79603 20.1372C4.16492 19.7684 9.49602 22.4922 9.82921 22.8252C9.90061 22.8966 11.3048 27 11.3048 27H0ZM16.8977 18.5909C12.3639 22.0759 5.0931 20.4107 2.93924 14.4637C2.32046 12.751 2.21336 11.0145 2.60605 9.25415C2.84405 8.19558 3.21294 8.05285 4.10542 8.63566C6.02129 9.86074 7.90145 11.062 9.94821 12.3704C10.1505 12.0255 10.4123 11.6805 10.5908 11.2999C10.6741 11.1215 10.7098 10.8955 10.6741 10.6933C10.5432 9.87264 10.9597 9.159 11.7213 8.96869C12.4829 8.79028 13.2444 9.25415 13.4348 10.0273C13.6133 10.7766 13.1493 11.4664 12.3639 11.7162C12.1854 11.7757 12.0664 11.8233 12.0188 11.8827C11.9712 11.9541 11.1739 13.1792 11.1739 13.1792C11.1739 13.1792 13.3039 14.5946 13.9822 15.0346C14.9342 15.665 15.8743 16.2835 16.8263 16.902C17.7545 17.4967 17.7545 17.9011 16.8739 18.579L16.8977 18.5909ZM11.9355 5.7811C13.8275 5.61458 15.7077 6.70883 16.386 8.38589C16.3979 8.42157 16.4217 8.46915 16.4336 8.50483C16.6121 8.90922 16.5526 9.02816 16.1004 9.1471L15.9338 9.18279C15.6363 9.25415 15.5887 9.00438 15.3626 8.50483C14.8033 7.27975 13.5181 6.56611 12.114 6.70883C11.6618 6.75641 11.3524 6.82777 11.2929 6.60179C11.1144 5.88815 11.1382 5.84057 11.9236 5.76921L11.9355 5.7811ZM18.2662 8.59998L18.0163 8.65945C17.5522 8.77839 17.4808 8.3621 17.1238 7.5771C16.2432 5.61458 14.2202 4.44897 12.0545 4.66306C11.3524 4.73443 10.8764 4.85337 10.7812 4.48465C10.4956 3.34283 10.5432 3.27147 11.7451 3.16442C14.6843 2.91465 17.6236 4.69875 18.6945 7.3749C18.7183 7.43437 18.7421 7.50573 18.7778 7.5652C19.0634 8.20748 18.9682 8.40968 18.2662 8.58809V8.59998ZM21.491 7.79119C21.3601 7.82687 21.2411 7.85066 21.1102 7.88634C21.0388 7.89823 20.9674 7.92202 20.896 7.93391C20.301 8.08854 20.1582 7.98149 19.9083 7.43437C19.587 6.73262 19.3014 5.99519 18.8373 5.40049C16.8382 2.77192 14.1726 1.63009 10.8288 2.14154C10.4242 2.20101 10.1862 2.08207 10.0791 1.68956C10.0196 1.43979 9.94821 1.19002 9.88871 0.940242C9.78161 0.48827 9.93631 0.262284 10.4004 0.179026C13.3039 -0.344311 15.9338 0.286072 18.29 1.98691C20.063 3.24768 21.2173 4.94852 21.9313 6.9705C22.0979 7.43437 21.967 7.67225 21.4791 7.80308L21.491 7.79119Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/ColorToggleMoon.vue b/frontend/components/icon/ColorToggleMoon.vue
index 6dc94e006..318476281 100644
--- a/frontend/components/icon/ColorToggleMoon.vue
+++ b/frontend/components/icon/ColorToggleMoon.vue
@@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="9" height="10">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="9"
+    height="10"
+  >
     <path
       d="M0.700086 4.85191C0.699809 4.24522 0.819028 3.64443 1.05094 3.08382C1.28285 2.52321 1.62291 2.01377 2.05171 1.58459C2.4805 1.1554 2.98963 0.814873 3.55002 0.58245C4.11042 0.350026 4.71111 0.230258 5.31779 0.22998C5.60083 0.234312 5.88313 0.260189 6.16223 0.307388C6.206 0.315176 6.24631 0.336233 6.27771 0.367704C6.30911 0.399176 6.33007 0.43954 6.33775 0.483325C6.34543 0.52711 6.33946 0.572198 6.32065 0.612478C6.30185 0.652757 6.27111 0.686279 6.2326 0.708499C5.48791 1.13239 4.91769 1.80666 4.62336 2.61141C4.32903 3.41616 4.32967 4.29922 4.62516 5.10355C4.92065 5.90787 5.49184 6.58132 6.23715 7.00414C6.98246 7.42695 7.85357 7.57171 8.69557 7.41269C8.7398 7.40316 8.7859 7.40772 8.82742 7.42572C8.86893 7.44372 8.90377 7.47426 8.92705 7.51306C8.95033 7.55185 8.96088 7.59697 8.95722 7.64207C8.95357 7.68716 8.9359 7.72999 8.90668 7.76454C8.30605 8.5077 7.4896 9.04617 6.56997 9.30566C5.65034 9.56514 4.67285 9.53286 3.77235 9.21326C2.87184 8.89366 2.09271 8.30249 1.54242 7.52131C0.992137 6.74013 0.697824 5.80744 0.700086 4.85191Z"
       fill="currentColor"
diff --git a/frontend/components/icon/ColorToggleSun.vue b/frontend/components/icon/ColorToggleSun.vue
index d983acf12..0b1f66c8d 100644
--- a/frontend/components/icon/ColorToggleSun.vue
+++ b/frontend/components/icon/ColorToggleSun.vue
@@ -1,5 +1,9 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+  >
     <path
       d="M5.60275 3.63367C5.18521 3.63367 4.77705 3.75749 4.42988 3.98946C4.08271 4.22143 3.81212 4.55114 3.65233 4.9369C3.49255 5.32265 3.45074 5.74713 3.5322 6.15664C3.61366 6.56616 3.81472 6.94232 4.10997 7.23757C4.40521 7.53281 4.78137 7.73387 5.19089 7.81533C5.6004 7.89679 6.02488 7.85498 6.41063 7.6952C6.79639 7.53541 7.1261 7.26483 7.35807 6.91766C7.59004 6.57049 7.71386 6.16232 7.71386 5.74479C7.71386 5.18488 7.49144 4.64792 7.09553 4.25201C6.69962 3.85609 6.16265 3.63367 5.60275 3.63367ZM1.38475 6.16208H2.22919C2.34117 6.16208 2.44857 6.1176 2.52775 6.03842C2.60693 5.95923 2.65141 5.85184 2.65141 5.73986C2.65141 5.62788 2.60693 5.52049 2.52775 5.4413C2.44857 5.36212 2.34117 5.31764 2.22919 5.31764H1.38475C1.27277 5.31764 1.16537 5.36212 1.08619 5.4413C1.00701 5.52049 0.962524 5.62788 0.962524 5.73986C0.962524 5.85184 1.00701 5.95923 1.08619 6.03842C1.16537 6.1176 1.27277 6.16208 1.38475 6.16208ZM8.97771 6.16208H9.82215C9.93413 6.16208 10.0415 6.1176 10.1207 6.03842C10.1999 5.95923 10.2444 5.85184 10.2444 5.73986C10.2444 5.62788 10.1999 5.52049 10.1207 5.4413C10.0415 5.36212 9.93413 5.31764 9.82215 5.31764H8.97771C8.86573 5.31764 8.75834 5.36212 8.67915 5.4413C8.59997 5.52049 8.55549 5.62788 8.55549 5.73986C8.55549 5.85184 8.59997 5.95923 8.67915 6.03842C8.75834 6.1176 8.86573 6.16208 8.97771 6.16208ZM5.18052 1.52256V2.36701C5.18052 2.47899 5.22501 2.58638 5.30419 2.66556C5.38337 2.74475 5.49077 2.78923 5.60275 2.78923C5.71473 2.78923 5.82212 2.74475 5.9013 2.66556C5.98048 2.58638 6.02497 2.47899 6.02497 2.36701V1.52256C6.02497 1.41058 5.98048 1.30319 5.9013 1.22401C5.82212 1.14483 5.71473 1.10034 5.60275 1.10034C5.49077 1.10034 5.38337 1.14483 5.30419 1.22401C5.22501 1.30319 5.18052 1.41058 5.18052 1.52256ZM5.18052 9.11553V9.95997C5.18052 10.072 5.22501 10.1793 5.30419 10.2585C5.38337 10.3377 5.49077 10.3822 5.60275 10.3822C5.71473 10.3822 5.82212 10.3377 5.9013 10.2585C5.98048 10.1793 6.02497 10.072 6.02497 9.95997V9.11553C6.02497 9.00355 5.98048 8.89615 5.9013 8.81697C5.82212 8.73779 5.71473 8.6933 5.60275 8.6933C5.49077 8.6933 5.38337 8.73779 5.30419 8.81697C5.22501 8.89615 5.18052 9.00355 5.18052 9.11553ZM3.06941 2.61119C3.03187 2.56609 2.98533 2.5293 2.93277 2.50319C2.88021 2.47707 2.82278 2.4622 2.76415 2.45953C2.70552 2.45685 2.64698 2.46643 2.59226 2.48765C2.53754 2.50886 2.48784 2.54125 2.44634 2.58275C2.40484 2.62425 2.37245 2.67395 2.35124 2.72867C2.33002 2.78339 2.32044 2.84193 2.32312 2.90056C2.32579 2.95919 2.34066 3.01662 2.36678 3.06918C2.39289 3.12174 2.42968 3.16828 2.47478 3.20582L2.92164 3.65267C3.00258 3.72005 3.10579 3.75475 3.211 3.74995C3.31622 3.74514 3.41584 3.70119 3.49031 3.62672C3.56478 3.55225 3.60873 3.45263 3.61354 3.34741C3.61834 3.2422 3.58364 3.13899 3.51627 3.05805L3.06941 2.61119ZM8.28738 7.82916C8.20643 7.76178 8.10322 7.72708 7.99801 7.73188C7.89279 7.73669 7.79318 7.78064 7.7187 7.85511C7.64423 7.92959 7.60028 8.0292 7.59548 8.13442C7.59067 8.23963 7.62537 8.34284 7.69275 8.42379L8.1396 8.87064C8.22055 8.93802 8.32375 8.97271 8.42897 8.96791C8.53418 8.96311 8.6338 8.91915 8.70827 8.84468C8.78275 8.77021 8.8267 8.67059 8.8315 8.56538C8.8363 8.46016 8.80161 8.35696 8.73423 8.27601L8.28738 7.82916ZM8.73423 3.20582C8.77934 3.16828 8.81612 3.12174 8.84223 3.06918C8.86835 3.01662 8.88322 2.95919 8.88589 2.90056C8.88857 2.84193 8.87899 2.78339 8.85778 2.72867C8.83656 2.67395 8.80417 2.62425 8.76267 2.58275C8.72117 2.54125 8.67147 2.50886 8.61675 2.48765C8.56203 2.46643 8.50349 2.45685 8.44486 2.45953C8.38623 2.4622 8.3288 2.47707 8.27624 2.50319C8.22368 2.5293 8.17715 2.56609 8.1396 2.61119L7.69275 3.05805C7.62537 3.13899 7.59067 3.2422 7.59548 3.34741C7.60028 3.45263 7.64423 3.55225 7.7187 3.62672C7.79318 3.70119 7.89279 3.74514 7.99801 3.74995C8.10322 3.75475 8.20643 3.72005 8.28738 3.65267L8.73423 3.20582ZM3.51415 8.42308C3.55926 8.38554 3.59605 8.339 3.62216 8.28644C3.64827 8.23388 3.66314 8.17645 3.66582 8.11782C3.6685 8.05919 3.65892 8.00065 3.6377 7.94593C3.61648 7.89121 3.58409 7.84151 3.54259 7.80001C3.50109 7.75851 3.4514 7.72612 3.39668 7.7049C3.34196 7.68369 3.28341 7.67411 3.22479 7.67679C3.16616 7.67946 3.10873 7.69433 3.05617 7.72045C3.00361 7.74656 2.95707 7.78334 2.91952 7.82845L2.47267 8.2753C2.40529 8.35625 2.3706 8.45946 2.3754 8.56467C2.3802 8.66989 2.42415 8.7695 2.49863 8.84398C2.5731 8.91845 2.67272 8.9624 2.77793 8.9672C2.88315 8.97201 2.98635 8.93731 3.0673 8.86993L3.51415 8.42308Z"
       fill="currentColor"
diff --git a/frontend/components/icon/ErrorFace.vue b/frontend/components/icon/ErrorFace.vue
index 26aae4e47..2c6fed295 100644
--- a/frontend/components/icon/ErrorFace.vue
+++ b/frontend/components/icon/ErrorFace.vue
@@ -1,21 +1,29 @@
 <script setup lang="ts">
 const props = defineProps({
-  inline: { type: Boolean, default: false }
+  inline: { type: Boolean, default: false },
 })
 
 const look = props.inline ? 'inline' : ''
 </script>
 
 <template>
-  <svg :class="look" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="currentColor">
-    <path d="M0 7C0 3.13359 3.13359 0 7 0C10.8664 0 14 3.13359 14 7C14 10.8664 10.8664 14 7 14C3.13359 14 0 10.8664 0 7ZM4.67852 10.8172C5.99648 9.76172 7.63711 9.1875 9.32422 9.1875H9.625C9.86563 9.1875 10.0625 8.99063 10.0625 8.75C10.0625 8.50937 9.86563 8.3125 9.625 8.3125H9.32422C7.41289 8.3125 5.60547 8.95508 4.13164 10.1336L4.10156 10.1582C3.91289 10.3086 3.8582 10.5848 4.0332 10.7488C4.18359 10.9621 4.45977 10.9922 4.62383 10.8418L4.67852 10.8172ZM4.82344 4.8125C4.33945 4.8125 3.94844 5.20352 3.94844 5.6875C3.94844 6.17148 4.33945 6.5625 4.82344 6.5625C5.30469 6.5625 5.69844 6.17148 5.69844 5.6875C5.69844 5.20352 5.30469 4.8125 4.82344 4.8125ZM9.19844 6.5625C9.67969 6.5625 10.0734 6.17148 10.0734 5.6875C10.0734 5.20352 9.67969 4.8125 9.19844 4.8125C8.71445 4.8125 8.32344 5.20352 8.32344 5.6875C8.32344 6.17148 8.71445 6.5625 9.19844 6.5625Z" fill="currentColor" />
+  <svg
+    :class="look"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 14 14"
+    fill="currentColor"
+  >
+    <path
+      d="M0 7C0 3.13359 3.13359 0 7 0C10.8664 0 14 3.13359 14 7C14 10.8664 10.8664 14 7 14C3.13359 14 0 10.8664 0 7ZM4.67852 10.8172C5.99648 9.76172 7.63711 9.1875 9.32422 9.1875H9.625C9.86563 9.1875 10.0625 8.99063 10.0625 8.75C10.0625 8.50937 9.86563 8.3125 9.625 8.3125H9.32422C7.41289 8.3125 5.60547 8.95508 4.13164 10.1336L4.10156 10.1582C3.91289 10.3086 3.8582 10.5848 4.0332 10.7488C4.18359 10.9621 4.45977 10.9922 4.62383 10.8418L4.67852 10.8172ZM4.82344 4.8125C4.33945 4.8125 3.94844 5.20352 3.94844 5.6875C3.94844 6.17148 4.33945 6.5625 4.82344 6.5625C5.30469 6.5625 5.69844 6.17148 5.69844 5.6875C5.69844 5.20352 5.30469 4.8125 4.82344 4.8125ZM9.19844 6.5625C9.67969 6.5625 10.0734 6.17148 10.0734 5.6875C10.0734 5.20352 9.67969 4.8125 9.19844 4.8125C8.71445 4.8125 8.32344 5.20352 8.32344 5.6875C8.32344 6.17148 8.71445 6.5625 9.19844 6.5625Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
 
 <style lang="scss" scoped>
 .inline {
-  position:relative;
-  top:2px;
-  height:14px;
+  position: relative;
+  top: 2px;
+  height: 14px;
 }
 </style>
diff --git a/frontend/components/icon/IconAccount.vue b/frontend/components/icon/IconAccount.vue
index cd5bf74f8..d68f68ea0 100644
--- a/frontend/components/icon/IconAccount.vue
+++ b/frontend/components/icon/IconAccount.vue
@@ -1,5 +1,14 @@
 <template>
-  <svg width="32" height="36" viewBox="0 0 32 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M16 18C21.05 18 25.1429 13.9711 25.1429 9C25.1429 4.02891 21.05 0 16 0C10.95 0 6.85714 4.02891 6.85714 9C6.85714 13.9711 10.95 18 16 18ZM12.7357 21.375C5.7 21.375 0 26.9859 0 33.9117C0 35.0648 0.95 36 2.12143 36H29.8786C31.05 36 32 35.0648 32 33.9117C32 26.9859 26.3 21.375 19.2643 21.375H12.7357Z" fill="currentColor" />
+  <svg
+    width="32"
+    height="36"
+    viewBox="0 0 32 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16 18C21.05 18 25.1429 13.9711 25.1429 9C25.1429 4.02891 21.05 0 16 0C10.95 0 6.85714 4.02891 6.85714 9C6.85714 13.9711 10.95 18 16 18ZM12.7357 21.375C5.7 21.375 0 26.9859 0 33.9117C0 35.0648 0.95 36 2.12143 36H29.8786C31.05 36 32 35.0648 32 33.9117C32 26.9859 26.3 21.375 19.2643 21.375H12.7357Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/IconChevron.vue b/frontend/components/icon/IconChevron.vue
index 72c5ab79d..5dfd73e1f 100644
--- a/frontend/components/icon/IconChevron.vue
+++ b/frontend/components/icon/IconChevron.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 interface Props {
-  direction?: 'left'| 'right'| 'top' | 'bottom'
+  direction?: 'left' | 'right' | 'top' | 'bottom'
 }
 const props = defineProps<Props>()
 </script>
+
 <template>
   <svg
     class="chevron"
@@ -20,6 +21,7 @@ const props = defineProps<Props>()
     />
   </svg>
 </template>
+
 <style lang="scss" scoped>
 .chevron {
   transform: rotate(-90deg);
diff --git a/frontend/components/icon/IconCrypto.vue b/frontend/components/icon/IconCrypto.vue
index ab485ffde..49b1992eb 100644
--- a/frontend/components/icon/IconCrypto.vue
+++ b/frontend/components/icon/IconCrypto.vue
@@ -6,8 +6,18 @@ interface Props {
 }
 defineProps<Props>()
 </script>
+
 <template>
-  <IconNetworkEthereum v-if="currency==='ETH'" class="monochromatic" />
-  <IconNetworkGnosis v-else-if="currency==='GNO'" class="monochromatic" />
-  <IconCryptoDai v-else-if="currency==='DAI' || currency==='xDAI'" class="monochromatic" />
+  <IconNetworkEthereum
+    v-if="currency === 'ETH'"
+    class="monochromatic"
+  />
+  <IconNetworkGnosis
+    v-else-if="currency === 'GNO'"
+    class="monochromatic"
+  />
+  <IconCryptoDai
+    v-else-if="currency === 'DAI' || currency === 'xDAI'"
+    class="monochromatic"
+  />
 </template>
diff --git a/frontend/components/icon/IconCurrency.vue b/frontend/components/icon/IconCurrency.vue
index 7244560fc..463383f9a 100644
--- a/frontend/components/icon/IconCurrency.vue
+++ b/frontend/components/icon/IconCurrency.vue
@@ -1,16 +1,28 @@
 <script setup lang="ts">
-import type { CryptoCurrency, Currency, FiatCurrency } from '~/types/currencies'
+import type {
+  CryptoCurrency,
+  Currency,
+  FiatCurrency,
+} from '~/types/currencies'
 
 interface Props {
   currency?: Currency
 }
 
 defineProps<Props>()
-
-
 </script>
+
 <template>
-  <IconFiat v-if="isFiat(currency)" :currency="currency as FiatCurrency" />
-  <IconCrypto v-else-if="isCrypto(currency)" :currency="currency as CryptoCurrency" />
-  <IconNetworkEthereum v-else class="monochromatic" />
+  <IconFiat
+    v-if="isFiat(currency)"
+    :currency="currency as FiatCurrency"
+  />
+  <IconCrypto
+    v-else-if="isCrypto(currency)"
+    :currency="currency as CryptoCurrency"
+  />
+  <IconNetworkEthereum
+    v-else
+    class="monochromatic"
+  />
 </template>
diff --git a/frontend/components/icon/IconFiat.vue b/frontend/components/icon/IconFiat.vue
index 78eec530d..bd6aed225 100644
--- a/frontend/components/icon/IconFiat.vue
+++ b/frontend/components/icon/IconFiat.vue
@@ -6,6 +6,7 @@ interface Props {
 }
 defineProps<Props>()
 </script>
+
 <template>
   <img :src="`../img/flags/${currency}.svg`">
 </template>
diff --git a/frontend/components/icon/IconNetwork.vue b/frontend/components/icon/IconNetwork.vue
index efd2dd9fd..f93ec5675 100644
--- a/frontend/components/icon/IconNetwork.vue
+++ b/frontend/components/icon/IconNetwork.vue
@@ -1,29 +1,68 @@
 <script setup lang="ts">
 import { ChainFamily, type ChainIDs, ChainInfo } from '~/types/network'
+
 const colorMode = useColorMode()
 
 // Usage :
-// Both properties width and height must be set by the parent component. The icon will fill this frame as much as possible without deformation.
+// Both properties width and height must be set by the parent component.
+// The icon will fill this frame as much as possible without deformation.
 // Additional properties are the following:
 const props = defineProps({
   chainId: { type: Number, required: true }, // network whose icon must be displayed (L2s and tesnets can be given)
-  colored: { type: Boolean, default: false }, // tells whether the icon must be in its official color or in the color of the font
-  doNotAdaptToColorTheme: { type: Boolean, default: false }, // some icons in their original colors are hard to see on a dark background, so they are adapted automatically, but you can deactivate this behavior if your background is always light
-  harmonizePerceivedSize: { type: Boolean, default: false } // makes some icons slightly smaller/bigger, to appear with a size "similar" to the others
+  // tells whether the icon must be in its official color or in the color of the font
+  colored: { type: Boolean, default: false },
+  // some icons in their original colors are hard to see on a dark background,
+  //  so they are adapted automatically, but you can deactivate this behavior
+  // if your background is always light
+  doNotAdaptToColorTheme: { type: Boolean, default: false },
+  // makes some icons slightly smaller/bigger, to appear with a size "similar" to the others
+  harmonizePerceivedSize: { type: Boolean, default: false },
 })
 
-const family = computed(() => (props.chainId in ChainInfo) ? ChainInfo[props.chainId as ChainIDs].family : ChainFamily.Ethereum)
-const coloring = computed(() => !props.colored ? 'monochromatic' : (colorMode.value !== 'dark' || props.doNotAdaptToColorTheme ? '' : 'pastel'))
-const sizing = computed(() => props.harmonizePerceivedSize ? family.value : '')
+const family = computed(() =>
+  props.chainId in ChainInfo
+    ? ChainInfo[props.chainId as ChainIDs].family
+    : ChainFamily.Ethereum,
+)
+const coloring = computed(() =>
+  !props.colored
+    ? 'monochromatic'
+    : colorMode.value !== 'dark' || props.doNotAdaptToColorTheme
+      ? ''
+      : 'pastel',
+)
+const sizing = computed(() =>
+  props.harmonizePerceivedSize ? family.value : '',
+)
 </script>
 
 <template>
   <div class="frame">
-    <IconNetworkEthereum v-if="family === ChainFamily.Ethereum" class="icon" :class="[sizing,coloring]" />
-    <IconNetworkArbitrum v-else-if="family === ChainFamily.Arbitrum" class="icon" :class="[sizing,coloring]" />
-    <IconNetworkOptimism v-else-if="family === ChainFamily.Optimism" class="icon" :class="[sizing,coloring]" />
-    <IconNetworkBase v-else-if="family === ChainFamily.Base" class="icon" :class="[sizing,coloring]" />
-    <IconNetworkGnosis v-else-if="family === ChainFamily.Gnosis" class="icon" :class="[sizing,coloring]" />
+    <IconNetworkEthereum
+      v-if="family === ChainFamily.Ethereum"
+      class="icon"
+      :class="[sizing, coloring]"
+    />
+    <IconNetworkArbitrum
+      v-else-if="family === ChainFamily.Arbitrum"
+      class="icon"
+      :class="[sizing, coloring]"
+    />
+    <IconNetworkOptimism
+      v-else-if="family === ChainFamily.Optimism"
+      class="icon"
+      :class="[sizing, coloring]"
+    />
+    <IconNetworkBase
+      v-else-if="family === ChainFamily.Base"
+      class="icon"
+      :class="[sizing, coloring]"
+    />
+    <IconNetworkGnosis
+      v-else-if="family === ChainFamily.Gnosis"
+      class="icon"
+      :class="[sizing, coloring]"
+    />
   </div>
 </template>
 
@@ -37,7 +76,7 @@ const sizing = computed(() => props.harmonizePerceivedSize ? family.value : '')
     width: 100%;
     top: 50%;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
   }
 
   // The following classes are used only if props `harmonize-perceived-size` has been set to true.
diff --git a/frontend/components/icon/IconPlus.vue b/frontend/components/icon/IconPlus.vue
index 736b138d3..304a3c9b8 100644
--- a/frontend/components/icon/IconPlus.vue
+++ b/frontend/components/icon/IconPlus.vue
@@ -1,11 +1,25 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="36" height="37" viewBox="0 0 36 37" fill="none">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="36"
+    height="37"
+    viewBox="0 0 36 37"
+    fill="none"
+  >
     <g clip-path="url(#clip0_2851_35360)">
-      <path d="M20.7692 3.0539C20.7692 1.52217 19.5317 0.284668 18 0.284668C16.4683 0.284668 15.2308 1.52217 15.2308 3.0539V15.5154H2.76923C1.2375 15.5154 0 16.7529 0 18.2847C0 19.8164 1.2375 21.0539 2.76923 21.0539H15.2308V33.5154C15.2308 35.0472 16.4683 36.2847 18 36.2847C19.5317 36.2847 20.7692 35.0472 20.7692 33.5154V21.0539H33.2308C34.7625 21.0539 36 19.8164 36 18.2847C36 16.7529 34.7625 15.5154 33.2308 15.5154H20.7692V3.0539Z" fill="currentColor" />
+      <path
+        d="M20.7692 3.0539C20.7692 1.52217 19.5317 0.284668 18 0.284668C16.4683 0.284668 15.2308 1.52217 15.2308 3.0539V15.5154H2.76923C1.2375 15.5154 0 16.7529 0 18.2847C0 19.8164 1.2375 21.0539 2.76923 21.0539H15.2308V33.5154C15.2308 35.0472 16.4683 36.2847 18 36.2847C19.5317 36.2847 20.7692 35.0472 20.7692 33.5154V21.0539H33.2308C34.7625 21.0539 36 19.8164 36 18.2847C36 16.7529 34.7625 15.5154 33.2308 15.5154H20.7692V3.0539Z"
+        fill="currentColor"
+      />
     </g>
     <defs>
       <clipPath id="clip0_2851_35360">
-        <rect width="36" height="36" fill="white" transform="translate(0 0.284668)" />
+        <rect
+          width="36"
+          height="36"
+          fill="white"
+          transform="translate(0 0.284668)"
+        />
       </clipPath>
     </defs>
   </svg>
diff --git a/frontend/components/icon/IconRocketpool.vue b/frontend/components/icon/IconRocketpool.vue
index 760652409..e10fcdb53 100644
--- a/frontend/components/icon/IconRocketpool.vue
+++ b/frontend/components/icon/IconRocketpool.vue
@@ -1,6 +1,18 @@
 <template>
-  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19.9997 40C17.301 40 14.6822 39.4718 12.2158 38.4266C9.83299 37.4189 7.69717 35.9775 5.85964 34.1397C4.02212 32.3056 2.58088 30.166 1.57329 27.7859C0.531631 25.3199 0 22.7009 0 20.0015C0 17.3026 0.52818 14.6835 1.57329 12.2169C2.58088 9.83388 4.02212 7.69786 5.85964 5.86017C7.69717 4.02248 9.83314 2.58111 12.216 1.57343C14.6789 0.528227 17.2977 0 19.9999 0C22.699 0 25.3178 0.528227 27.7837 1.57343C30.1669 2.58111 32.3028 4.02248 34.1404 5.86017C35.9779 7.69786 37.4191 9.83388 38.4261 12.2169C39.4684 14.6835 40 17.3026 40 20.0015C40 22.7009 39.4718 25.3199 38.4261 27.7861C37.4193 30.1694 35.9779 32.3056 34.1404 34.1433C32.3028 35.981 30.167 37.4223 27.7837 38.4294C25.3178 39.4718 22.699 39.9998 19.9999 39.9998L19.9997 40ZM19.9997 4.16849C17.8603 4.16849 15.79 4.58522 13.8382 5.41238C11.952 6.21072 10.2603 7.35031 8.80499 8.80579C7.34965 10.2613 6.20731 11.9531 5.41189 13.8394C4.58481 15.7878 4.16797 17.8619 4.16797 20.0015C4.16797 22.1416 4.58481 24.212 5.41189 26.1641C6.21016 28.0504 7.34965 29.7422 8.80499 31.1977C10.2603 32.6531 11.952 33.7956 13.8382 34.5911C15.7864 35.4148 17.8603 35.8351 19.9997 35.8351C22.1396 35.8351 24.2098 35.4182 26.1617 34.5911C28.0478 33.7921 29.7395 32.6531 31.1949 31.1977C32.6502 29.7422 33.7925 28.0504 34.588 26.1641C35.4116 24.2156 35.8319 22.1416 35.8319 20.0015C35.8319 17.8619 35.415 15.7914 34.588 13.8394C33.7891 11.9531 32.6502 10.2613 31.1949 8.80579C29.7395 7.35031 28.0478 6.20787 26.1617 5.41238C24.2098 4.58522 22.1361 4.16849 19.9997 4.16849Z" fill="currentColor" />
-    <path d="M12.3752 28.1832C12.3467 28.1683 12.3203 28.1502 12.2965 28.1294C12.1707 28.0065 12.0414 27.8867 11.9157 27.7606C11.9019 27.7452 11.8916 27.726 11.8811 27.7069L12.2626 27.3726L12.6371 27.0481L13.2024 26.5558C13.2397 26.5276 13.2804 26.4994 13.3178 26.468C13.6183 26.2092 13.9179 25.9495 14.2167 25.6889L16.9837 23.2953C17.5013 22.8478 18.0188 22.3965 18.5392 21.949C18.6483 21.8543 18.7774 21.8574 18.8833 21.958C18.9343 22.0054 18.982 22.0592 19.0333 22.1097C19.1383 22.2167 19.1383 22.3242 19.0262 22.4247C18.9234 22.5167 18.819 22.6071 18.7132 22.6961C18.2163 23.1251 17.719 23.5539 17.2255 23.9829C16.504 24.6071 15.782 25.2345 15.0571 25.8592C14.6659 26.1998 14.2742 26.5372 13.883 26.8778C13.825 26.9282 13.7738 26.9847 13.7228 27.0386L13.0725 27.5839L12.7187 27.8899L12.3752 28.1832ZM13.335 29L12.814 28.5551L13.1304 28.2714L13.4745 27.975L14.0738 27.4577C14.0938 27.4423 14.1179 27.4295 14.1346 27.4136C14.4414 27.1492 14.7475 26.8842 15.0537 26.616L17.3444 24.6295C17.638 24.3735 17.9331 24.1192 18.2297 23.8663C18.3386 23.7716 18.4679 23.778 18.5738 23.8817C18.611 23.9196 18.6448 23.9547 18.6787 23.9924C18.839 24.1468 18.839 24.2351 18.6724 24.3804C17.9911 24.97 17.314 25.5629 16.6333 26.1524C16.3983 26.354 16.1633 26.5532 15.9319 26.7581C15.6996 26.961 15.4681 27.1648 15.2375 27.3695L14.6183 27.9027L14.1926 28.2746L13.9576 28.4795L13.8216 28.5902L13.5631 28.8105L13.335 29ZM11 26.7421L11.2212 26.5244L11.32 26.4521L11.5923 26.2093L11.8714 25.9661C11.9052 25.9476 11.9357 25.9253 11.9633 25.9035C12.089 25.7895 12.2148 25.673 12.3373 25.5596L12.5009 25.4111C12.5418 25.3893 12.579 25.367 12.613 25.3388C12.8037 25.1749 12.9909 25.011 13.1816 24.847C13.4878 24.5789 13.7945 24.3107 14.1007 24.0424C14.2333 23.9324 14.3661 23.8222 14.4954 23.7083C14.9549 23.3113 15.4144 22.9074 15.8773 22.5098C16.0342 22.3747 16.2008 22.2454 16.3611 22.1129C16.4701 22.0969 16.5552 22.1347 16.6264 22.2075C16.6602 22.2454 16.6981 22.28 16.7321 22.3178C16.8717 22.4662 16.8681 22.5514 16.7114 22.6865C16.5517 22.8255 16.3879 22.9644 16.2283 23.1033C15.4524 23.775 14.6773 24.4476 13.903 25.1211C13.6682 25.3227 13.4338 25.5219 13.2024 25.7235C13.0696 25.84 12.9433 25.9597 12.8106 26.0769C12.7491 26.1242 12.6883 26.1684 12.6302 26.2184C12.5045 26.3291 12.3787 26.4424 12.2523 26.5558L11.868 26.8841L11.4423 27.2433C11.3435 27.1396 11.2413 27.0353 11.1459 26.9283C11.0919 26.8745 11.0476 26.8053 11 26.7421ZM19.3634 21.1162C19.2681 20.9805 19.2646 20.9772 19.3869 20.8452C19.5978 20.6149 19.816 20.3908 20.0303 20.1641C20.0641 20.1259 20.0917 20.0945 20.0573 20.0439C19.85 19.7415 19.7787 19.4037 19.7787 19.0477C19.7787 19.0413 19.7787 19.0349 19.7753 19.0286C19.7919 18.8902 19.7919 18.8902 19.6591 18.8488C19.2066 18.7104 18.754 18.5714 18.3014 18.4325C18.0397 18.3545 17.7776 18.2779 17.515 18.2026C17.3857 18.1111 17.3824 18.0765 17.4874 17.9659C18.0153 17.414 18.5426 16.8621 19.0774 16.3103C19.1286 16.2566 19.21 16.222 19.2813 16.1969C19.3938 16.1592 19.5093 16.1368 19.6254 16.1086C19.6391 16.1054 19.6524 16.1054 19.6662 16.1022C20.2583 15.9697 20.8505 15.8404 21.4393 15.7079C21.4655 15.7017 21.4893 15.6885 21.5077 15.6701C21.6577 15.5126 21.8069 15.3519 21.9569 15.1906C22.3279 14.7969 22.7127 14.4122 23.1448 14.0716C23.4274 13.8475 23.71 13.6234 23.9926 13.4027C24.1729 13.2797 24.3464 13.1568 24.5267 13.0339C25.293 12.5167 26.096 12.0659 26.9641 11.7125C27.257 11.5927 27.5596 11.4918 27.8596 11.3783C27.8796 11.3752 27.8968 11.3719 27.9169 11.3655C28.5187 11.1799 29.141 11.0573 29.7723 11C29.793 11 29.8131 11.0031 29.8337 11.0031C30.1434 11.0095 30.4529 11.0095 30.7626 11.0218C30.9435 11.0313 30.9435 11.0441 30.9911 11.2272C31.0147 11.6209 30.9911 12.0185 30.9229 12.4064C30.7217 13.491 30.2691 14.4876 29.6598 15.4242C28.6798 16.9345 27.427 18.2277 25.9772 19.3569C25.9198 19.3982 25.881 19.4577 25.8681 19.5239C25.7181 20.1796 25.5687 20.839 25.412 21.4945C25.3981 21.5515 25.3678 21.6021 25.3234 21.643C24.7138 22.1518 24.1011 22.6573 23.4853 23.1597C23.4481 23.1883 23.3867 23.1883 23.332 23.2038C23.2981 23.1474 23.2574 23.0969 23.2367 23.0399C23.1315 22.7563 23.0327 22.4721 22.9305 22.1852C22.8179 21.8574 22.7026 21.5264 22.5899 21.1981C22.5864 21.1858 22.5698 21.1763 22.5595 21.1667C22.5492 20.9996 22.5457 20.9996 22.3757 21.0155C21.9397 21.0598 21.5077 21.0469 21.0855 20.9113C21.0206 20.8895 20.9833 20.9049 20.9355 20.949C20.6977 21.1796 20.4524 21.4062 20.2106 21.6366C20.0953 21.7468 20.0607 21.7435 19.9419 21.6366C19.7472 21.4649 19.5543 21.2915 19.3634 21.1162ZM24.2719 16.8621L24.2919 16.8877C24.3022 16.9095 24.3194 16.9286 24.336 16.9473C24.7244 17.2974 25.1874 17.4173 25.7181 17.3161C25.9191 17.2783 26.1063 17.2027 26.2626 17.0734C26.5929 16.8372 26.77 16.5217 26.8044 16.14C26.8279 15.875 26.7872 15.6164 26.6303 15.3834C26.6239 15.3673 26.617 15.3552 26.6101 15.3423C26.0587 14.4845 24.687 14.4909 24.1488 15.3577C23.9209 15.7239 23.8869 16.1118 24.0506 16.512C24.1253 16.6292 24.1966 16.7457 24.2719 16.8621Z" fill="currentColor" />
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.9997 40C17.301 40 14.6822 39.4718 12.2158 38.4266C9.83299 37.4189 7.69717 35.9775 5.85964 34.1397C4.02212 32.3056 2.58088 30.166 1.57329 27.7859C0.531631 25.3199 0 22.7009 0 20.0015C0 17.3026 0.52818 14.6835 1.57329 12.2169C2.58088 9.83388 4.02212 7.69786 5.85964 5.86017C7.69717 4.02248 9.83314 2.58111 12.216 1.57343C14.6789 0.528227 17.2977 0 19.9999 0C22.699 0 25.3178 0.528227 27.7837 1.57343C30.1669 2.58111 32.3028 4.02248 34.1404 5.86017C35.9779 7.69786 37.4191 9.83388 38.4261 12.2169C39.4684 14.6835 40 17.3026 40 20.0015C40 22.7009 39.4718 25.3199 38.4261 27.7861C37.4193 30.1694 35.9779 32.3056 34.1404 34.1433C32.3028 35.981 30.167 37.4223 27.7837 38.4294C25.3178 39.4718 22.699 39.9998 19.9999 39.9998L19.9997 40ZM19.9997 4.16849C17.8603 4.16849 15.79 4.58522 13.8382 5.41238C11.952 6.21072 10.2603 7.35031 8.80499 8.80579C7.34965 10.2613 6.20731 11.9531 5.41189 13.8394C4.58481 15.7878 4.16797 17.8619 4.16797 20.0015C4.16797 22.1416 4.58481 24.212 5.41189 26.1641C6.21016 28.0504 7.34965 29.7422 8.80499 31.1977C10.2603 32.6531 11.952 33.7956 13.8382 34.5911C15.7864 35.4148 17.8603 35.8351 19.9997 35.8351C22.1396 35.8351 24.2098 35.4182 26.1617 34.5911C28.0478 33.7921 29.7395 32.6531 31.1949 31.1977C32.6502 29.7422 33.7925 28.0504 34.588 26.1641C35.4116 24.2156 35.8319 22.1416 35.8319 20.0015C35.8319 17.8619 35.415 15.7914 34.588 13.8394C33.7891 11.9531 32.6502 10.2613 31.1949 8.80579C29.7395 7.35031 28.0478 6.20787 26.1617 5.41238C24.2098 4.58522 22.1361 4.16849 19.9997 4.16849Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12.3752 28.1832C12.3467 28.1683 12.3203 28.1502 12.2965 28.1294C12.1707 28.0065 12.0414 27.8867 11.9157 27.7606C11.9019 27.7452 11.8916 27.726 11.8811 27.7069L12.2626 27.3726L12.6371 27.0481L13.2024 26.5558C13.2397 26.5276 13.2804 26.4994 13.3178 26.468C13.6183 26.2092 13.9179 25.9495 14.2167 25.6889L16.9837 23.2953C17.5013 22.8478 18.0188 22.3965 18.5392 21.949C18.6483 21.8543 18.7774 21.8574 18.8833 21.958C18.9343 22.0054 18.982 22.0592 19.0333 22.1097C19.1383 22.2167 19.1383 22.3242 19.0262 22.4247C18.9234 22.5167 18.819 22.6071 18.7132 22.6961C18.2163 23.1251 17.719 23.5539 17.2255 23.9829C16.504 24.6071 15.782 25.2345 15.0571 25.8592C14.6659 26.1998 14.2742 26.5372 13.883 26.8778C13.825 26.9282 13.7738 26.9847 13.7228 27.0386L13.0725 27.5839L12.7187 27.8899L12.3752 28.1832ZM13.335 29L12.814 28.5551L13.1304 28.2714L13.4745 27.975L14.0738 27.4577C14.0938 27.4423 14.1179 27.4295 14.1346 27.4136C14.4414 27.1492 14.7475 26.8842 15.0537 26.616L17.3444 24.6295C17.638 24.3735 17.9331 24.1192 18.2297 23.8663C18.3386 23.7716 18.4679 23.778 18.5738 23.8817C18.611 23.9196 18.6448 23.9547 18.6787 23.9924C18.839 24.1468 18.839 24.2351 18.6724 24.3804C17.9911 24.97 17.314 25.5629 16.6333 26.1524C16.3983 26.354 16.1633 26.5532 15.9319 26.7581C15.6996 26.961 15.4681 27.1648 15.2375 27.3695L14.6183 27.9027L14.1926 28.2746L13.9576 28.4795L13.8216 28.5902L13.5631 28.8105L13.335 29ZM11 26.7421L11.2212 26.5244L11.32 26.4521L11.5923 26.2093L11.8714 25.9661C11.9052 25.9476 11.9357 25.9253 11.9633 25.9035C12.089 25.7895 12.2148 25.673 12.3373 25.5596L12.5009 25.4111C12.5418 25.3893 12.579 25.367 12.613 25.3388C12.8037 25.1749 12.9909 25.011 13.1816 24.847C13.4878 24.5789 13.7945 24.3107 14.1007 24.0424C14.2333 23.9324 14.3661 23.8222 14.4954 23.7083C14.9549 23.3113 15.4144 22.9074 15.8773 22.5098C16.0342 22.3747 16.2008 22.2454 16.3611 22.1129C16.4701 22.0969 16.5552 22.1347 16.6264 22.2075C16.6602 22.2454 16.6981 22.28 16.7321 22.3178C16.8717 22.4662 16.8681 22.5514 16.7114 22.6865C16.5517 22.8255 16.3879 22.9644 16.2283 23.1033C15.4524 23.775 14.6773 24.4476 13.903 25.1211C13.6682 25.3227 13.4338 25.5219 13.2024 25.7235C13.0696 25.84 12.9433 25.9597 12.8106 26.0769C12.7491 26.1242 12.6883 26.1684 12.6302 26.2184C12.5045 26.3291 12.3787 26.4424 12.2523 26.5558L11.868 26.8841L11.4423 27.2433C11.3435 27.1396 11.2413 27.0353 11.1459 26.9283C11.0919 26.8745 11.0476 26.8053 11 26.7421ZM19.3634 21.1162C19.2681 20.9805 19.2646 20.9772 19.3869 20.8452C19.5978 20.6149 19.816 20.3908 20.0303 20.1641C20.0641 20.1259 20.0917 20.0945 20.0573 20.0439C19.85 19.7415 19.7787 19.4037 19.7787 19.0477C19.7787 19.0413 19.7787 19.0349 19.7753 19.0286C19.7919 18.8902 19.7919 18.8902 19.6591 18.8488C19.2066 18.7104 18.754 18.5714 18.3014 18.4325C18.0397 18.3545 17.7776 18.2779 17.515 18.2026C17.3857 18.1111 17.3824 18.0765 17.4874 17.9659C18.0153 17.414 18.5426 16.8621 19.0774 16.3103C19.1286 16.2566 19.21 16.222 19.2813 16.1969C19.3938 16.1592 19.5093 16.1368 19.6254 16.1086C19.6391 16.1054 19.6524 16.1054 19.6662 16.1022C20.2583 15.9697 20.8505 15.8404 21.4393 15.7079C21.4655 15.7017 21.4893 15.6885 21.5077 15.6701C21.6577 15.5126 21.8069 15.3519 21.9569 15.1906C22.3279 14.7969 22.7127 14.4122 23.1448 14.0716C23.4274 13.8475 23.71 13.6234 23.9926 13.4027C24.1729 13.2797 24.3464 13.1568 24.5267 13.0339C25.293 12.5167 26.096 12.0659 26.9641 11.7125C27.257 11.5927 27.5596 11.4918 27.8596 11.3783C27.8796 11.3752 27.8968 11.3719 27.9169 11.3655C28.5187 11.1799 29.141 11.0573 29.7723 11C29.793 11 29.8131 11.0031 29.8337 11.0031C30.1434 11.0095 30.4529 11.0095 30.7626 11.0218C30.9435 11.0313 30.9435 11.0441 30.9911 11.2272C31.0147 11.6209 30.9911 12.0185 30.9229 12.4064C30.7217 13.491 30.2691 14.4876 29.6598 15.4242C28.6798 16.9345 27.427 18.2277 25.9772 19.3569C25.9198 19.3982 25.881 19.4577 25.8681 19.5239C25.7181 20.1796 25.5687 20.839 25.412 21.4945C25.3981 21.5515 25.3678 21.6021 25.3234 21.643C24.7138 22.1518 24.1011 22.6573 23.4853 23.1597C23.4481 23.1883 23.3867 23.1883 23.332 23.2038C23.2981 23.1474 23.2574 23.0969 23.2367 23.0399C23.1315 22.7563 23.0327 22.4721 22.9305 22.1852C22.8179 21.8574 22.7026 21.5264 22.5899 21.1981C22.5864 21.1858 22.5698 21.1763 22.5595 21.1667C22.5492 20.9996 22.5457 20.9996 22.3757 21.0155C21.9397 21.0598 21.5077 21.0469 21.0855 20.9113C21.0206 20.8895 20.9833 20.9049 20.9355 20.949C20.6977 21.1796 20.4524 21.4062 20.2106 21.6366C20.0953 21.7468 20.0607 21.7435 19.9419 21.6366C19.7472 21.4649 19.5543 21.2915 19.3634 21.1162ZM24.2719 16.8621L24.2919 16.8877C24.3022 16.9095 24.3194 16.9286 24.336 16.9473C24.7244 17.2974 25.1874 17.4173 25.7181 17.3161C25.9191 17.2783 26.1063 17.2027 26.2626 17.0734C26.5929 16.8372 26.77 16.5217 26.8044 16.14C26.8279 15.875 26.7872 15.6164 26.6303 15.3834C26.6239 15.3673 26.617 15.3552 26.6101 15.3423C26.0587 14.4845 24.687 14.4909 24.1488 15.3577C23.9209 15.7239 23.8869 16.1118 24.0506 16.512C24.1253 16.6292 24.1966 16.7457 24.2719 16.8621Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/IconValidator.vue b/frontend/components/icon/IconValidator.vue
index 04c4e3a62..9ba522d54 100644
--- a/frontend/components/icon/IconValidator.vue
+++ b/frontend/components/icon/IconValidator.vue
@@ -1,5 +1,14 @@
 <template>
-  <svg width="36" height="32" viewBox="0 0 36 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4 0C1.79375 0 0 1.79375 0 4V22C0 24.2062 1.79375 26 4 26H15L14.3313 28H10C8.89375 28 8 28.8937 8 30C8 31.1063 8.89375 32 10 32H26C27.1063 32 28 31.1063 28 30C28 28.8937 27.1063 28 26 28H21.6688L21 26H32C34.2062 26 36 24.2062 36 22V4C36 1.79375 34.2062 0 32 0H4ZM32 4V18H4V4H32Z" fill="currentColor" />
+  <svg
+    width="36"
+    height="32"
+    viewBox="0 0 36 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4 0C1.79375 0 0 1.79375 0 4V22C0 24.2062 1.79375 26 4 26H15L14.3313 28H10C8.89375 28 8 28.8937 8 30C8 31.1063 8.89375 32 10 32H26C27.1063 32 28 31.1063 28 30C28 28.8937 27.1063 28 26 28H21.6688L21 26H32C34.2062 26 36 24.2062 36 22V4C36 1.79375 34.2062 0 32 0H4ZM32 4V18H4V4H32Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/RocketPool.vue b/frontend/components/icon/RocketPool.vue
index cd9514759..1c1ff9b58 100644
--- a/frontend/components/icon/RocketPool.vue
+++ b/frontend/components/icon/RocketPool.vue
@@ -1,6 +1,18 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
-    <path d="M8.49987 17C7.35294 17 6.23993 16.7755 5.19172 16.3313C4.17902 15.903 3.2713 15.2904 2.49035 14.5094C1.7094 13.7299 1.09687 12.8205 0.668646 11.809C0.225943 10.761 0 9.64787 0 8.50064C0 7.3536 0.224476 6.24049 0.668646 5.19218C1.09687 4.1794 1.7094 3.27159 2.49035 2.49057C3.2713 1.70955 4.17909 1.09697 5.19178 0.668706C6.23853 0.224497 7.35154 0 8.49994 0C9.64706 0 10.7601 0.224497 11.8081 0.668706C12.8209 1.09697 13.7287 1.70955 14.5097 2.49057C15.2906 3.27159 15.9031 4.1794 16.3311 5.19218C16.7741 6.24049 17 7.3536 17 8.50064C17 9.64787 16.7755 10.761 16.3311 11.8091C15.9032 12.822 15.2906 13.7299 14.5097 14.5109C13.7287 15.2919 12.821 15.9045 11.8081 16.3325C10.7601 16.7755 9.64706 16.9999 8.49994 16.9999L8.49987 17ZM8.49987 1.77161C7.59062 1.77161 6.71076 1.94872 5.88122 2.30026C5.07961 2.63956 4.36064 3.12388 3.74212 3.74246C3.1236 4.36104 2.63811 5.08006 2.30005 5.88175C1.94854 6.70983 1.77139 7.5913 1.77139 8.50064C1.77139 9.41017 1.94854 10.2901 2.30005 11.1197C2.63932 11.9214 3.1236 12.6404 3.74212 13.259C4.36064 13.8776 5.07961 14.3631 5.88122 14.7012C6.70923 15.0513 7.59062 15.2299 8.49987 15.2299C9.40932 15.2299 10.2892 15.0527 11.1187 14.7012C11.9203 14.3617 12.6393 13.8776 13.2578 13.259C13.8763 12.6404 14.3618 11.9214 14.6999 11.1197C15.0499 10.2916 15.2286 9.41017 15.2286 8.50064C15.2286 7.5913 15.0514 6.71136 14.6999 5.88175C14.3604 5.08006 13.8763 4.36104 13.2578 3.74246C12.6393 3.12388 11.9203 2.63834 11.1187 2.30026C10.2892 1.94872 9.40785 1.77161 8.49987 1.77161Z" fill="currentColor" />
-    <path d="M5.26024 11.9778C5.24812 11.9715 5.23689 11.9638 5.22681 11.955C5.17331 11.9027 5.11838 11.8518 5.06494 11.7982C5.05907 11.7917 5.05469 11.7835 5.05026 11.7754L5.21237 11.6333L5.37155 11.4954L5.61178 11.2862C5.62765 11.2742 5.64497 11.2622 5.66084 11.2489C5.78855 11.1389 5.9159 11.0285 6.04288 10.9178L7.21886 9.90051C7.43884 9.71032 7.65877 9.5185 7.87994 9.32831C7.92631 9.28807 7.98118 9.2894 8.02618 9.33213C8.04786 9.35227 8.06811 9.37514 8.08992 9.39663C8.13455 9.44208 8.13455 9.48776 8.08692 9.53049C8.04323 9.56957 7.99887 9.60802 7.95387 9.64582C7.7427 9.82814 7.53134 10.0104 7.3216 10.1927C7.015 10.458 6.70814 10.7246 6.40004 10.9902C6.2338 11.1349 6.06731 11.2783 5.90107 11.4231C5.87639 11.4445 5.85464 11.4685 5.83295 11.4914L5.5566 11.7231L5.40623 11.8532L5.26024 11.9778ZM5.66815 12.325L5.44673 12.1359L5.58122 12.0153L5.72746 11.8894L5.98213 11.6695C5.99063 11.663 6.00088 11.6575 6.008 11.6508C6.13837 11.5384 6.26849 11.4258 6.3986 11.3118L7.37216 10.4675C7.49692 10.3587 7.62233 10.2506 7.74838 10.1432C7.79469 10.1029 7.84963 10.1056 7.89462 10.1497C7.91044 10.1658 7.92481 10.1807 7.93925 10.1968C8.00737 10.2624 8.00737 10.2999 7.93656 10.3617C7.64702 10.6123 7.35922 10.8642 7.06993 11.1147C6.97006 11.2004 6.87019 11.2851 6.77183 11.3722C6.67309 11.4584 6.57472 11.545 6.47672 11.632L6.21355 11.8586L6.03263 12.0167L5.93276 12.1038L5.87495 12.1508L5.76508 12.2445L5.66815 12.325ZM4.67578 11.3654L4.76977 11.2729L4.81177 11.2421L4.92751 11.1389L5.04613 11.0356C5.06051 11.0277 5.07344 11.0182 5.08519 11.009C5.13862 10.9605 5.19206 10.911 5.24412 10.8628L5.31368 10.7997C5.33105 10.7905 5.34686 10.781 5.3613 10.769C5.44235 10.6993 5.52191 10.6297 5.60297 10.56C5.73308 10.446 5.86345 10.332 5.99357 10.218C6.04994 10.1712 6.10637 10.1244 6.16131 10.076C6.3566 9.90728 6.5519 9.73562 6.74864 9.56667C6.81532 9.50924 6.88613 9.45429 6.95425 9.39796C7.00056 9.39118 7.03675 9.40722 7.06699 9.4382C7.08137 9.45429 7.09749 9.469 7.11193 9.48503C7.17124 9.54814 7.16974 9.58433 7.10312 9.64176C7.03525 9.70082 6.96563 9.75988 6.89782 9.81887C6.56804 10.1044 6.23862 10.3902 5.90957 10.6765C5.80977 10.7621 5.71015 10.8468 5.61178 10.9325C5.55535 10.982 5.50166 11.0329 5.44529 11.0827C5.41917 11.1028 5.39329 11.1216 5.36861 11.1428C5.31518 11.1898 5.26174 11.238 5.20799 11.2862L5.04469 11.4257L4.86377 11.5784C4.82177 11.5343 4.77834 11.49 4.73778 11.4445C4.71484 11.4217 4.69603 11.3923 4.67578 11.3654ZM8.23023 8.97437C8.18973 8.91671 8.18823 8.91532 8.24023 8.85922C8.32985 8.76131 8.42259 8.66607 8.51365 8.56973C8.52802 8.55351 8.53977 8.54014 8.52514 8.51866C8.43703 8.39013 8.40672 8.24654 8.40672 8.09525C8.40672 8.09253 8.40671 8.08981 8.40528 8.08715C8.41234 8.02832 8.41234 8.02832 8.35591 8.01072C8.16361 7.9519 7.97124 7.89284 7.77888 7.83378C7.66767 7.80064 7.55626 7.76808 7.44466 7.73611C7.38972 7.6972 7.38828 7.6825 7.43291 7.63548C7.65727 7.40094 7.88138 7.1664 8.10867 6.93185C8.13042 6.90904 8.16504 6.89433 8.19535 6.88368C8.24316 6.86764 8.29222 6.85815 8.34159 6.84616C8.34741 6.84477 8.35303 6.84477 8.35891 6.84344C8.61058 6.78711 8.86225 6.73216 9.11248 6.67583C9.12363 6.67319 9.13373 6.66762 9.14154 6.65979C9.20529 6.59286 9.26872 6.52454 9.33246 6.45599C9.49014 6.28866 9.65369 6.12516 9.83731 5.98041C9.95742 5.88517 10.0775 5.78993 10.1977 5.69613C10.2743 5.64385 10.348 5.59163 10.4246 5.5394C10.7503 5.31957 11.0916 5.12798 11.4605 4.97779C11.585 4.9269 11.7136 4.884 11.8411 4.83577C11.8496 4.83444 11.8569 4.83305 11.8655 4.83033C12.1212 4.75145 12.3857 4.69934 12.654 4.67499C12.6628 4.67499 12.6714 4.67632 12.6801 4.67632C12.8117 4.67904 12.9433 4.67904 13.0749 4.68425C13.1518 4.6883 13.1518 4.69375 13.172 4.77156C13.182 4.93889 13.172 5.10783 13.143 5.27273C13.0575 5.73365 12.8652 6.15723 12.6062 6.55528C12.1897 7.19714 11.6572 7.74676 11.0411 8.22668C11.0167 8.24422 11.0002 8.26951 10.9947 8.29766C10.931 8.57633 10.8675 8.85655 10.8009 9.13516C10.795 9.15936 10.7821 9.1809 10.7632 9.19827C10.5042 9.4145 10.2438 9.62936 9.98205 9.84284C9.96623 9.855 9.94011 9.855 9.91686 9.8616C9.90249 9.83763 9.88518 9.81615 9.87636 9.79195C9.83168 9.67141 9.78968 9.55063 9.74625 9.4287C9.69838 9.2894 9.64938 9.14871 9.60151 9.00917C9.60001 9.00396 9.59295 8.99991 9.58857 8.99585C9.5842 8.92481 9.5827 8.92481 9.51045 8.93159C9.32515 8.9504 9.14154 8.9449 8.96211 8.8873C8.93455 8.87803 8.91868 8.88458 8.89837 8.90333C8.79731 9.0013 8.69307 9.09764 8.59026 9.19555C8.54127 9.24238 8.52658 9.24099 8.47609 9.19555C8.39333 9.12259 8.31138 9.04886 8.23023 8.97437ZM10.3163 7.1664L10.3248 7.17728C10.3292 7.18654 10.3365 7.19465 10.3436 7.20258C10.5086 7.35138 10.7054 7.40233 10.931 7.35931C11.0164 7.34327 11.096 7.31114 11.1624 7.25619C11.3028 7.1558 11.378 7.02171 11.3926 6.85948C11.4026 6.74687 11.3853 6.63698 11.3186 6.53791C11.316 6.53108 11.313 6.52593 11.3101 6.52049C11.0757 6.1559 10.4928 6.15862 10.264 6.52703C10.1672 6.68266 10.1527 6.84749 10.2223 7.0176C10.254 7.06739 10.2843 7.11689 10.3163 7.1664Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="17"
+    height="17"
+    viewBox="0 0 17 17"
+    fill="none"
+  >
+    <path
+      d="M8.49987 17C7.35294 17 6.23993 16.7755 5.19172 16.3313C4.17902 15.903 3.2713 15.2904 2.49035 14.5094C1.7094 13.7299 1.09687 12.8205 0.668646 11.809C0.225943 10.761 0 9.64787 0 8.50064C0 7.3536 0.224476 6.24049 0.668646 5.19218C1.09687 4.1794 1.7094 3.27159 2.49035 2.49057C3.2713 1.70955 4.17909 1.09697 5.19178 0.668706C6.23853 0.224497 7.35154 0 8.49994 0C9.64706 0 10.7601 0.224497 11.8081 0.668706C12.8209 1.09697 13.7287 1.70955 14.5097 2.49057C15.2906 3.27159 15.9031 4.1794 16.3311 5.19218C16.7741 6.24049 17 7.3536 17 8.50064C17 9.64787 16.7755 10.761 16.3311 11.8091C15.9032 12.822 15.2906 13.7299 14.5097 14.5109C13.7287 15.2919 12.821 15.9045 11.8081 16.3325C10.7601 16.7755 9.64706 16.9999 8.49994 16.9999L8.49987 17ZM8.49987 1.77161C7.59062 1.77161 6.71076 1.94872 5.88122 2.30026C5.07961 2.63956 4.36064 3.12388 3.74212 3.74246C3.1236 4.36104 2.63811 5.08006 2.30005 5.88175C1.94854 6.70983 1.77139 7.5913 1.77139 8.50064C1.77139 9.41017 1.94854 10.2901 2.30005 11.1197C2.63932 11.9214 3.1236 12.6404 3.74212 13.259C4.36064 13.8776 5.07961 14.3631 5.88122 14.7012C6.70923 15.0513 7.59062 15.2299 8.49987 15.2299C9.40932 15.2299 10.2892 15.0527 11.1187 14.7012C11.9203 14.3617 12.6393 13.8776 13.2578 13.259C13.8763 12.6404 14.3618 11.9214 14.6999 11.1197C15.0499 10.2916 15.2286 9.41017 15.2286 8.50064C15.2286 7.5913 15.0514 6.71136 14.6999 5.88175C14.3604 5.08006 13.8763 4.36104 13.2578 3.74246C12.6393 3.12388 11.9203 2.63834 11.1187 2.30026C10.2892 1.94872 9.40785 1.77161 8.49987 1.77161Z"
+      fill="currentColor"
+    />
+    <path
+      d="M5.26024 11.9778C5.24812 11.9715 5.23689 11.9638 5.22681 11.955C5.17331 11.9027 5.11838 11.8518 5.06494 11.7982C5.05907 11.7917 5.05469 11.7835 5.05026 11.7754L5.21237 11.6333L5.37155 11.4954L5.61178 11.2862C5.62765 11.2742 5.64497 11.2622 5.66084 11.2489C5.78855 11.1389 5.9159 11.0285 6.04288 10.9178L7.21886 9.90051C7.43884 9.71032 7.65877 9.5185 7.87994 9.32831C7.92631 9.28807 7.98118 9.2894 8.02618 9.33213C8.04786 9.35227 8.06811 9.37514 8.08992 9.39663C8.13455 9.44208 8.13455 9.48776 8.08692 9.53049C8.04323 9.56957 7.99887 9.60802 7.95387 9.64582C7.7427 9.82814 7.53134 10.0104 7.3216 10.1927C7.015 10.458 6.70814 10.7246 6.40004 10.9902C6.2338 11.1349 6.06731 11.2783 5.90107 11.4231C5.87639 11.4445 5.85464 11.4685 5.83295 11.4914L5.5566 11.7231L5.40623 11.8532L5.26024 11.9778ZM5.66815 12.325L5.44673 12.1359L5.58122 12.0153L5.72746 11.8894L5.98213 11.6695C5.99063 11.663 6.00088 11.6575 6.008 11.6508C6.13837 11.5384 6.26849 11.4258 6.3986 11.3118L7.37216 10.4675C7.49692 10.3587 7.62233 10.2506 7.74838 10.1432C7.79469 10.1029 7.84963 10.1056 7.89462 10.1497C7.91044 10.1658 7.92481 10.1807 7.93925 10.1968C8.00737 10.2624 8.00737 10.2999 7.93656 10.3617C7.64702 10.6123 7.35922 10.8642 7.06993 11.1147C6.97006 11.2004 6.87019 11.2851 6.77183 11.3722C6.67309 11.4584 6.57472 11.545 6.47672 11.632L6.21355 11.8586L6.03263 12.0167L5.93276 12.1038L5.87495 12.1508L5.76508 12.2445L5.66815 12.325ZM4.67578 11.3654L4.76977 11.2729L4.81177 11.2421L4.92751 11.1389L5.04613 11.0356C5.06051 11.0277 5.07344 11.0182 5.08519 11.009C5.13862 10.9605 5.19206 10.911 5.24412 10.8628L5.31368 10.7997C5.33105 10.7905 5.34686 10.781 5.3613 10.769C5.44235 10.6993 5.52191 10.6297 5.60297 10.56C5.73308 10.446 5.86345 10.332 5.99357 10.218C6.04994 10.1712 6.10637 10.1244 6.16131 10.076C6.3566 9.90728 6.5519 9.73562 6.74864 9.56667C6.81532 9.50924 6.88613 9.45429 6.95425 9.39796C7.00056 9.39118 7.03675 9.40722 7.06699 9.4382C7.08137 9.45429 7.09749 9.469 7.11193 9.48503C7.17124 9.54814 7.16974 9.58433 7.10312 9.64176C7.03525 9.70082 6.96563 9.75988 6.89782 9.81887C6.56804 10.1044 6.23862 10.3902 5.90957 10.6765C5.80977 10.7621 5.71015 10.8468 5.61178 10.9325C5.55535 10.982 5.50166 11.0329 5.44529 11.0827C5.41917 11.1028 5.39329 11.1216 5.36861 11.1428C5.31518 11.1898 5.26174 11.238 5.20799 11.2862L5.04469 11.4257L4.86377 11.5784C4.82177 11.5343 4.77834 11.49 4.73778 11.4445C4.71484 11.4217 4.69603 11.3923 4.67578 11.3654ZM8.23023 8.97437C8.18973 8.91671 8.18823 8.91532 8.24023 8.85922C8.32985 8.76131 8.42259 8.66607 8.51365 8.56973C8.52802 8.55351 8.53977 8.54014 8.52514 8.51866C8.43703 8.39013 8.40672 8.24654 8.40672 8.09525C8.40672 8.09253 8.40671 8.08981 8.40528 8.08715C8.41234 8.02832 8.41234 8.02832 8.35591 8.01072C8.16361 7.9519 7.97124 7.89284 7.77888 7.83378C7.66767 7.80064 7.55626 7.76808 7.44466 7.73611C7.38972 7.6972 7.38828 7.6825 7.43291 7.63548C7.65727 7.40094 7.88138 7.1664 8.10867 6.93185C8.13042 6.90904 8.16504 6.89433 8.19535 6.88368C8.24316 6.86764 8.29222 6.85815 8.34159 6.84616C8.34741 6.84477 8.35303 6.84477 8.35891 6.84344C8.61058 6.78711 8.86225 6.73216 9.11248 6.67583C9.12363 6.67319 9.13373 6.66762 9.14154 6.65979C9.20529 6.59286 9.26872 6.52454 9.33246 6.45599C9.49014 6.28866 9.65369 6.12516 9.83731 5.98041C9.95742 5.88517 10.0775 5.78993 10.1977 5.69613C10.2743 5.64385 10.348 5.59163 10.4246 5.5394C10.7503 5.31957 11.0916 5.12798 11.4605 4.97779C11.585 4.9269 11.7136 4.884 11.8411 4.83577C11.8496 4.83444 11.8569 4.83305 11.8655 4.83033C12.1212 4.75145 12.3857 4.69934 12.654 4.67499C12.6628 4.67499 12.6714 4.67632 12.6801 4.67632C12.8117 4.67904 12.9433 4.67904 13.0749 4.68425C13.1518 4.6883 13.1518 4.69375 13.172 4.77156C13.182 4.93889 13.172 5.10783 13.143 5.27273C13.0575 5.73365 12.8652 6.15723 12.6062 6.55528C12.1897 7.19714 11.6572 7.74676 11.0411 8.22668C11.0167 8.24422 11.0002 8.26951 10.9947 8.29766C10.931 8.57633 10.8675 8.85655 10.8009 9.13516C10.795 9.15936 10.7821 9.1809 10.7632 9.19827C10.5042 9.4145 10.2438 9.62936 9.98205 9.84284C9.96623 9.855 9.94011 9.855 9.91686 9.8616C9.90249 9.83763 9.88518 9.81615 9.87636 9.79195C9.83168 9.67141 9.78968 9.55063 9.74625 9.4287C9.69838 9.2894 9.64938 9.14871 9.60151 9.00917C9.60001 9.00396 9.59295 8.99991 9.58857 8.99585C9.5842 8.92481 9.5827 8.92481 9.51045 8.93159C9.32515 8.9504 9.14154 8.9449 8.96211 8.8873C8.93455 8.87803 8.91868 8.88458 8.89837 8.90333C8.79731 9.0013 8.69307 9.09764 8.59026 9.19555C8.54127 9.24238 8.52658 9.24099 8.47609 9.19555C8.39333 9.12259 8.31138 9.04886 8.23023 8.97437ZM10.3163 7.1664L10.3248 7.17728C10.3292 7.18654 10.3365 7.19465 10.3436 7.20258C10.5086 7.35138 10.7054 7.40233 10.931 7.35931C11.0164 7.34327 11.096 7.31114 11.1624 7.25619C11.3028 7.1558 11.378 7.02171 11.3926 6.85948C11.4026 6.74687 11.3853 6.63698 11.3186 6.53791C11.316 6.53108 11.313 6.52593 11.3101 6.52049C11.0757 6.1559 10.4928 6.15862 10.264 6.52703C10.1672 6.68266 10.1527 6.84749 10.2223 7.0176C10.254 7.06739 10.2843 7.11689 10.3163 7.1664Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/datatype/AccountIcon.vue b/frontend/components/icon/datatype/AccountIcon.vue
index 961ee2572..388051172 100644
--- a/frontend/components/icon/datatype/AccountIcon.vue
+++ b/frontend/components/icon/datatype/AccountIcon.vue
@@ -1,5 +1,12 @@
 <template>
-  <svg viewBox="0 0 13 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6.5 7.5C8.55156 7.5 10.2143 5.82129 10.2143 3.75C10.2143 1.67871 8.55156 0 6.5 0C4.44844 0 2.78571 1.67871 2.78571 3.75C2.78571 5.82129 4.44844 7.5 6.5 7.5ZM5.17388 8.90625C2.31562 8.90625 0 11.2441 0 14.1299C0 14.6104 0.385938 15 0.86183 15H12.1382C12.6141 15 13 14.6104 13 14.1299C13 11.2441 10.6844 8.90625 7.82612 8.90625H5.17388Z" fill="currentColor" />
+  <svg
+    viewBox="0 0 13 15"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.5 7.5C8.55156 7.5 10.2143 5.82129 10.2143 3.75C10.2143 1.67871 8.55156 0 6.5 0C4.44844 0 2.78571 1.67871 2.78571 3.75C2.78571 5.82129 4.44844 7.5 6.5 7.5ZM5.17388 8.90625C2.31562 8.90625 0 11.2441 0 14.1299C0 14.6104 0.385938 15 0.86183 15H12.1382C12.6141 15 13 14.6104 13 14.1299C13 11.2441 10.6844 8.90625 7.82612 8.90625H5.17388Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/datatype/BatchIcon.vue b/frontend/components/icon/datatype/BatchIcon.vue
index 5e574ae08..9ac2256c5 100644
--- a/frontend/components/icon/datatype/BatchIcon.vue
+++ b/frontend/components/icon/datatype/BatchIcon.vue
@@ -1,5 +1,12 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" fill="currentColor">
-    <path d="M7.71973 0.171843C8.21445 -0.057281 8.78555 -0.057281 9.28027 0.171843L16.5385 3.52569C16.8207 3.65519 17 3.93745 17 4.24959C17 4.56173 16.8207 4.84398 16.5385 4.97348L9.28027 8.32733C8.78555 8.55645 8.21445 8.55645 7.71973 8.32733L0.461523 4.97348C0.179297 4.84066 0 4.5584 0 4.24959C0 3.94077 0.179297 3.65519 0.461523 3.52569L7.71973 0.171843ZM14.7721 6.95923L16.5385 7.7761C16.8207 7.90561 17 8.18786 17 8.5C17 8.81214 16.8207 9.09439 16.5385 9.2239L9.28027 12.5777C8.78555 12.8069 8.21445 12.8069 7.71973 12.5777L0.461523 9.2239C0.179297 9.09107 0 8.80882 0 8.5C0 8.19118 0.179297 7.90561 0.461523 7.7761L2.22793 6.95923L7.27481 9.29031C8.05176 9.64894 8.94824 9.64894 9.72519 9.29031L14.7721 6.95923ZM9.72519 13.5407L14.7721 11.2096L16.5385 12.0265C16.8207 12.156 17 12.4383 17 12.7504C17 13.0626 16.8207 13.3448 16.5385 13.4743L9.28027 16.8282C8.78555 17.0573 8.21445 17.0573 7.71973 16.8282L0.461523 13.4743C0.179297 13.3415 0 13.0592 0 12.7504C0 12.4416 0.179297 12.156 0.461523 12.0265L2.22793 11.2096L7.27481 13.5407C8.05176 13.8994 8.94824 13.8994 9.72519 13.5407Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 17 17"
+    fill="currentColor"
+  >
+    <path
+      d="M7.71973 0.171843C8.21445 -0.057281 8.78555 -0.057281 9.28027 0.171843L16.5385 3.52569C16.8207 3.65519 17 3.93745 17 4.24959C17 4.56173 16.8207 4.84398 16.5385 4.97348L9.28027 8.32733C8.78555 8.55645 8.21445 8.55645 7.71973 8.32733L0.461523 4.97348C0.179297 4.84066 0 4.5584 0 4.24959C0 3.94077 0.179297 3.65519 0.461523 3.52569L7.71973 0.171843ZM14.7721 6.95923L16.5385 7.7761C16.8207 7.90561 17 8.18786 17 8.5C17 8.81214 16.8207 9.09439 16.5385 9.2239L9.28027 12.5777C8.78555 12.8069 8.21445 12.8069 7.71973 12.5777L0.461523 9.2239C0.179297 9.09107 0 8.80882 0 8.5C0 8.19118 0.179297 7.90561 0.461523 7.7761L2.22793 6.95923L7.27481 9.29031C8.05176 9.64894 8.94824 9.64894 9.72519 9.29031L14.7721 6.95923ZM9.72519 13.5407L14.7721 11.2096L16.5385 12.0265C16.8207 12.156 17 12.4383 17 12.7504C17 13.0626 16.8207 13.3448 16.5385 13.4743L9.28027 16.8282C8.78555 17.0573 8.21445 17.0573 7.71973 16.8282L0.461523 13.4743C0.179297 13.3415 0 13.0592 0 12.7504C0 12.4416 0.179297 12.156 0.461523 12.0265L2.22793 11.2096L7.27481 13.5407C8.05176 13.8994 8.94824 13.8994 9.72519 13.5407Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/datatype/BlockIcon.vue b/frontend/components/icon/datatype/BlockIcon.vue
index 9beac900b..0a3000637 100644
--- a/frontend/components/icon/datatype/BlockIcon.vue
+++ b/frontend/components/icon/datatype/BlockIcon.vue
@@ -1,5 +1,12 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20" fill="currentColor">
-    <path d="M6.57342 1.56407L10.2401 0.14201C10.7298 -0.0473368 11.2702 -0.0473368 11.7599 0.14201L15.4266 1.56407C15.8313 1.72257 16.1795 2.00298 16.425 2.36821C16.6705 2.73345 16.8018 3.1663 16.8016 3.60951V7.991C16.8484 8.01158 16.9001 8.01714 16.9501 8.00694L20.6167 9.46368C21.0233 9.62048 21.3734 9.90023 21.6205 10.2657C21.8676 10.6311 22 11.0648 22 11.5091V16.1653C22 16.5902 21.8785 17.0059 21.6505 17.3611C21.4225 17.7164 21.0979 17.9957 20.7167 18.1648L17.05 19.8128C16.7796 19.9362 16.4868 20 16.1906 20C15.8945 20 15.6017 19.9362 15.3313 19.8128L11 17.8657L6.66508 19.8109C6.39466 19.9343 6.10185 19.9981 5.80571 19.9981C5.50957 19.9981 5.21675 19.9343 4.94633 19.8109L1.27967 18.1629C0.899261 17.9928 0.575605 17.713 0.348322 17.3577C0.121039 17.0024 -8.52015e-06 16.587 4.49798e-10 16.1625L4.49798e-10 11.5091C0.000208949 11.0656 0.132388 10.6327 0.378973 10.2678C0.625558 9.90295 0.974873 9.62347 1.3805 9.46649L5.04717 8.00975C5.0971 8.01995 5.14889 8.0144 5.19567 7.99381V3.60951C5.19541 3.1663 5.32672 2.73345 5.57224 2.36821C5.81776 2.00298 6.16592 1.72257 6.57067 1.56407H6.57342ZM11.1073 1.89498C11.0386 1.86771 10.9624 1.86771 10.8937 1.89498L7.89892 3.05644L10.9661 4.27508L14.102 3.05644L11.1073 1.89498ZM14.9728 8.22067V4.72223L11.825 5.95587V9.44025L14.9728 8.22067ZM5.9125 9.79553C5.84387 9.76789 5.76755 9.76789 5.69892 9.79553L2.70417 10.956L5.80525 12.1747L8.90633 10.956L5.9125 9.79553ZM6.63025 17.7795L9.77717 16.3659V12.6162L6.63025 13.8527V17.7795ZM13.0928 10.956L16.1938 12.1747L19.2949 10.956L16.3002 9.79553C16.2315 9.76789 16.1552 9.76789 16.0866 9.79553L13.0928 10.956ZM20.1667 16.1625V12.62L17.0198 13.8527V17.7776L19.9833 16.4474C20.0371 16.4235 20.0829 16.3843 20.1154 16.3344C20.1479 16.2845 20.1657 16.2261 20.1667 16.1662V16.1625Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 22 20"
+    fill="currentColor"
+  >
+    <path
+      d="M6.57342 1.56407L10.2401 0.14201C10.7298 -0.0473368 11.2702 -0.0473368 11.7599 0.14201L15.4266 1.56407C15.8313 1.72257 16.1795 2.00298 16.425 2.36821C16.6705 2.73345 16.8018 3.1663 16.8016 3.60951V7.991C16.8484 8.01158 16.9001 8.01714 16.9501 8.00694L20.6167 9.46368C21.0233 9.62048 21.3734 9.90023 21.6205 10.2657C21.8676 10.6311 22 11.0648 22 11.5091V16.1653C22 16.5902 21.8785 17.0059 21.6505 17.3611C21.4225 17.7164 21.0979 17.9957 20.7167 18.1648L17.05 19.8128C16.7796 19.9362 16.4868 20 16.1906 20C15.8945 20 15.6017 19.9362 15.3313 19.8128L11 17.8657L6.66508 19.8109C6.39466 19.9343 6.10185 19.9981 5.80571 19.9981C5.50957 19.9981 5.21675 19.9343 4.94633 19.8109L1.27967 18.1629C0.899261 17.9928 0.575605 17.713 0.348322 17.3577C0.121039 17.0024 -8.52015e-06 16.587 4.49798e-10 16.1625L4.49798e-10 11.5091C0.000208949 11.0656 0.132388 10.6327 0.378973 10.2678C0.625558 9.90295 0.974873 9.62347 1.3805 9.46649L5.04717 8.00975C5.0971 8.01995 5.14889 8.0144 5.19567 7.99381V3.60951C5.19541 3.1663 5.32672 2.73345 5.57224 2.36821C5.81776 2.00298 6.16592 1.72257 6.57067 1.56407H6.57342ZM11.1073 1.89498C11.0386 1.86771 10.9624 1.86771 10.8937 1.89498L7.89892 3.05644L10.9661 4.27508L14.102 3.05644L11.1073 1.89498ZM14.9728 8.22067V4.72223L11.825 5.95587V9.44025L14.9728 8.22067ZM5.9125 9.79553C5.84387 9.76789 5.76755 9.76789 5.69892 9.79553L2.70417 10.956L5.80525 12.1747L8.90633 10.956L5.9125 9.79553ZM6.63025 17.7795L9.77717 16.3659V12.6162L6.63025 13.8527V17.7795ZM13.0928 10.956L16.1938 12.1747L19.2949 10.956L16.3002 9.79553C16.2315 9.76789 16.1552 9.76789 16.0866 9.79553L13.0928 10.956ZM20.1667 16.1625V12.62L17.0198 13.8527V17.7776L19.9833 16.4474C20.0371 16.4235 20.0829 16.3843 20.1154 16.3344C20.1479 16.2845 20.1657 16.2261 20.1667 16.1662V16.1625Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/datatype/ContractIcon.vue b/frontend/components/icon/datatype/ContractIcon.vue
index 39b1ab992..c9cc1edbe 100644
--- a/frontend/components/icon/datatype/ContractIcon.vue
+++ b/frontend/components/icon/datatype/ContractIcon.vue
@@ -1,11 +1,22 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 20" fill="none">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 17 20"
+    fill="none"
+  >
     <g clip-path="url(#clip0_15441_5863)">
-      <path d="M2.83333 0C1.27057 0 0 1.12109 0 2.5V17.5C0 18.8789 1.27057 20 2.83333 20H14.1667C15.7294 20 17 18.8789 17 17.5V6.25H11.3333C10.5497 6.25 9.91667 5.69141 9.91667 5V0H2.83333ZM11.3333 0V5H17L11.3333 0ZM3.54167 2.5H6.375C6.76458 2.5 7.08333 2.78125 7.08333 3.125C7.08333 3.46875 6.76458 3.75 6.375 3.75H3.54167C3.15208 3.75 2.83333 3.46875 2.83333 3.125C2.83333 2.78125 3.15208 2.5 3.54167 2.5ZM3.54167 5H6.375C6.76458 5 7.08333 5.28125 7.08333 5.625C7.08333 5.96875 6.76458 6.25 6.375 6.25H3.54167C3.15208 6.25 2.83333 5.96875 2.83333 5.625C2.83333 5.28125 3.15208 5 3.54167 5ZM5.94115 14.9141C5.67109 15.707 4.84323 16.25 3.90469 16.25H3.54167C3.15208 16.25 2.83333 15.9688 2.83333 15.625C2.83333 15.2812 3.15208 15 3.54167 15H3.90469C4.21901 15 4.49349 14.8203 4.58203 14.5547L5.24167 12.6211C5.39219 12.1797 5.8526 11.875 6.375 11.875C6.8974 11.875 7.35781 12.1758 7.50833 12.6211L8.02187 14.1289C8.34948 13.8867 8.76562 13.75 9.20833 13.75C9.91224 13.75 10.5542 14.1016 10.8685 14.6562L11.0633 15H13.4583C13.8479 15 14.1667 15.2812 14.1667 15.625C14.1667 15.9688 13.8479 16.25 13.4583 16.25H10.625C10.3549 16.25 10.1115 16.1172 9.99193 15.9062L9.60234 15.2148C9.52708 15.082 9.37656 15 9.21276 15C9.04896 15 8.89401 15.082 8.82318 15.2148L8.43359 15.9062C8.30521 16.1367 8.0263 16.2734 7.73854 16.25C7.45078 16.2266 7.20286 16.0508 7.12318 15.8086L6.375 13.6328L5.94115 14.9141Z" fill="currentColor" />
+      <path
+        d="M2.83333 0C1.27057 0 0 1.12109 0 2.5V17.5C0 18.8789 1.27057 20 2.83333 20H14.1667C15.7294 20 17 18.8789 17 17.5V6.25H11.3333C10.5497 6.25 9.91667 5.69141 9.91667 5V0H2.83333ZM11.3333 0V5H17L11.3333 0ZM3.54167 2.5H6.375C6.76458 2.5 7.08333 2.78125 7.08333 3.125C7.08333 3.46875 6.76458 3.75 6.375 3.75H3.54167C3.15208 3.75 2.83333 3.46875 2.83333 3.125C2.83333 2.78125 3.15208 2.5 3.54167 2.5ZM3.54167 5H6.375C6.76458 5 7.08333 5.28125 7.08333 5.625C7.08333 5.96875 6.76458 6.25 6.375 6.25H3.54167C3.15208 6.25 2.83333 5.96875 2.83333 5.625C2.83333 5.28125 3.15208 5 3.54167 5ZM5.94115 14.9141C5.67109 15.707 4.84323 16.25 3.90469 16.25H3.54167C3.15208 16.25 2.83333 15.9688 2.83333 15.625C2.83333 15.2812 3.15208 15 3.54167 15H3.90469C4.21901 15 4.49349 14.8203 4.58203 14.5547L5.24167 12.6211C5.39219 12.1797 5.8526 11.875 6.375 11.875C6.8974 11.875 7.35781 12.1758 7.50833 12.6211L8.02187 14.1289C8.34948 13.8867 8.76562 13.75 9.20833 13.75C9.91224 13.75 10.5542 14.1016 10.8685 14.6562L11.0633 15H13.4583C13.8479 15 14.1667 15.2812 14.1667 15.625C14.1667 15.9688 13.8479 16.25 13.4583 16.25H10.625C10.3549 16.25 10.1115 16.1172 9.99193 15.9062L9.60234 15.2148C9.52708 15.082 9.37656 15 9.21276 15C9.04896 15 8.89401 15.082 8.82318 15.2148L8.43359 15.9062C8.30521 16.1367 8.0263 16.2734 7.73854 16.25C7.45078 16.2266 7.20286 16.0508 7.12318 15.8086L6.375 13.6328L5.94115 14.9141Z"
+        fill="currentColor"
+      />
     </g>
     <defs>
       <clipPath id="clip0_15441_5863">
-        <rect width="17" height="20" fill="white" />
+        <rect
+          width="17"
+          height="20"
+          fill="white"
+        />
       </clipPath>
     </defs>
   </svg>
diff --git a/frontend/components/icon/datatype/EnsIcon.vue b/frontend/components/icon/datatype/EnsIcon.vue
index c772f7fab..75d8b93a2 100644
--- a/frontend/components/icon/datatype/EnsIcon.vue
+++ b/frontend/components/icon/datatype/EnsIcon.vue
@@ -10,7 +10,9 @@
     fill="currentColor"
   >
     <g>
-      <path d="M9.3,32.8c0.8,1.7,2.8,5.1,2.8,5.1L35,0L12.7,15.6c-1.3,0.9-2.4,2.1-3.2,3.5C7.4,23.4,7.4,28.4,9.3,32.8z" />
+      <path
+        d="M9.3,32.8c0.8,1.7,2.8,5.1,2.8,5.1L35,0L12.7,15.6c-1.3,0.9-2.4,2.1-3.2,3.5C7.4,23.4,7.4,28.4,9.3,32.8z"
+      />
       <path
         d="M0.3,45.2c0.5,7.3,4.2,14.1,10,18.5L35,80.9c0,0-15.5-22.3-28.5-44.5c-1.3-2.3-2.2-4.9-2.6-7.6 c-0.2-1.2-0.2-2.4,0-3.6c-0.3,0.6-1,1.9-1,1.9c-1.3,2.7-2.2,5.6-2.7,8.6C-0.1,38.9-0.1,42.1,0.3,45.2z"
       />
diff --git a/frontend/components/icon/datatype/EpochIcon.vue b/frontend/components/icon/datatype/EpochIcon.vue
index 7435537ed..b46e64ccb 100644
--- a/frontend/components/icon/datatype/EpochIcon.vue
+++ b/frontend/components/icon/datatype/EpochIcon.vue
@@ -1,5 +1,12 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
-    <path d="M2.92969 2.92969L1.60156 1.60156C1.01172 1.01172 0 1.42969 0 2.26172V6.5625C0 7.08203 0.417969 7.5 0.9375 7.5H5.23828C6.07422 7.5 6.49219 6.48828 5.90234 5.89844L4.69922 4.69531C6.05469 3.33984 7.92969 2.5 10 2.5C14.1406 2.5 17.5 5.85938 17.5 10C17.5 14.1406 14.1406 17.5 10 17.5C8.40625 17.5 6.92969 17.0039 5.71484 16.1562C5.14844 15.7617 4.37109 15.8984 3.97266 16.4648C3.57422 17.0312 3.71484 17.8086 4.28125 18.207C5.90625 19.3359 7.87891 20 10 20C15.5234 20 20 15.5234 20 10C20 4.47656 15.5234 0 10 0C7.23828 0 4.73828 1.12109 2.92969 2.92969ZM10 5C9.48047 5 9.0625 5.41797 9.0625 5.9375V10C9.0625 10.25 9.16016 10.4883 9.33594 10.6641L12.1484 13.4766C12.5156 13.8438 13.1094 13.8438 13.4727 13.4766C13.8359 13.1094 13.8398 12.5156 13.4727 12.1523L10.9336 9.61328V5.9375C10.9336 5.41797 10.5156 5 9.99609 5H10Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      d="M2.92969 2.92969L1.60156 1.60156C1.01172 1.01172 0 1.42969 0 2.26172V6.5625C0 7.08203 0.417969 7.5 0.9375 7.5H5.23828C6.07422 7.5 6.49219 6.48828 5.90234 5.89844L4.69922 4.69531C6.05469 3.33984 7.92969 2.5 10 2.5C14.1406 2.5 17.5 5.85938 17.5 10C17.5 14.1406 14.1406 17.5 10 17.5C8.40625 17.5 6.92969 17.0039 5.71484 16.1562C5.14844 15.7617 4.37109 15.8984 3.97266 16.4648C3.57422 17.0312 3.71484 17.8086 4.28125 18.207C5.90625 19.3359 7.87891 20 10 20C15.5234 20 20 15.5234 20 10C20 4.47656 15.5234 0 10 0C7.23828 0 4.73828 1.12109 2.92969 2.92969ZM10 5C9.48047 5 9.0625 5.41797 9.0625 5.9375V10C9.0625 10.25 9.16016 10.4883 9.33594 10.6641L12.1484 13.4766C12.5156 13.8438 13.1094 13.8438 13.4727 13.4766C13.8359 13.1094 13.8398 12.5156 13.4727 12.1523L10.9336 9.61328V5.9375C10.9336 5.41797 10.5156 5 9.99609 5H10Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/datatype/GraffitiIcon.vue b/frontend/components/icon/datatype/GraffitiIcon.vue
index e2d57cf3c..811ed8f4b 100644
--- a/frontend/components/icon/datatype/GraffitiIcon.vue
+++ b/frontend/components/icon/datatype/GraffitiIcon.vue
@@ -1,5 +1,12 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
-    <path d="M15.152 0.845857C14.0213 -0.281952 12.1882 -0.281952 11.0575 0.845857L10.585 1.3184L10.1724 0.908863C9.2874 0.0236272 7.85118 0.0236272 6.96615 0.908863L4.25434 3.61813C3.95827 3.91426 3.95827 4.3931 4.25434 4.68608C4.5504 4.97906 5.02914 4.98221 5.32205 4.68608L8.03386 1.97682C8.32992 1.68069 8.80866 1.68069 9.10158 1.97682L9.51732 2.38951L5.87008 6.03441L9.96457 10.1298L15.152 4.94126C16.2827 3.8103 16.2827 1.97682 15.152 0.849008V0.845857ZM9.25276 10.8418L5.15827 6.74638L3.13623 8.76888C1.62442 10.281 0.591345 12.209 0.172447 14.3071L0.014967 15.0947C-0.0354267 15.3436 0.0433135 15.5987 0.222841 15.7783C0.402368 15.9579 0.657486 16.0335 0.906305 15.9862L1.69371 15.8287C3.79134 15.4097 5.7189 14.3764 7.23071 12.8643L9.25276 10.8418Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <path
+      d="M15.152 0.845857C14.0213 -0.281952 12.1882 -0.281952 11.0575 0.845857L10.585 1.3184L10.1724 0.908863C9.2874 0.0236272 7.85118 0.0236272 6.96615 0.908863L4.25434 3.61813C3.95827 3.91426 3.95827 4.3931 4.25434 4.68608C4.5504 4.97906 5.02914 4.98221 5.32205 4.68608L8.03386 1.97682C8.32992 1.68069 8.80866 1.68069 9.10158 1.97682L9.51732 2.38951L5.87008 6.03441L9.96457 10.1298L15.152 4.94126C16.2827 3.8103 16.2827 1.97682 15.152 0.849008V0.845857ZM9.25276 10.8418L5.15827 6.74638L3.13623 8.76888C1.62442 10.281 0.591345 12.209 0.172447 14.3071L0.014967 15.0947C-0.0354267 15.3436 0.0433135 15.5987 0.222841 15.7783C0.402368 15.9579 0.657486 16.0335 0.906305 15.9862L1.69371 15.8287C3.79134 15.4097 5.7189 14.3764 7.23071 12.8643L9.25276 10.8418Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/datatype/NftIcon.vue b/frontend/components/icon/datatype/NftIcon.vue
index c39c9b48c..879e25254 100644
--- a/frontend/components/icon/datatype/NftIcon.vue
+++ b/frontend/components/icon/datatype/NftIcon.vue
@@ -6,13 +6,116 @@
     viewBox="0 0 256 256"
     xml:space="preserve"
   >
-    <g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
-      <path d="M 45 90 c -1.206 0 -2.412 -0.311 -3.488 -0.931 L 8.58 70.054 c -2.152 -1.241 -3.488 -3.556 -3.488 -6.04 V 25.987 c 0 -2.485 1.337 -4.8 3.489 -6.041 L 41.512 0.932 c 2.152 -1.242 4.824 -1.243 6.977 0 L 81.42 19.945 c 2.151 1.241 3.488 3.556 3.488 6.041 v 38.027 c 0 2.485 -1.337 4.8 -3.489 6.041 L 48.488 89.068 C 47.412 89.689 46.206 90 45 90 z M 45 5.998 c -0.168 0 -0.336 0.043 -0.487 0.13 L 11.58 25.142 c -0.301 0.174 -0.488 0.498 -0.488 0.845 v 38.027 c 0 0.347 0.187 0.671 0.487 0.844 l 32.933 19.015 c 0.3 0.172 0.674 0.174 0.975 0 L 78.42 64.859 c 0.301 -0.174 0.487 -0.497 0.487 -0.845 V 25.987 c 0 -0.348 -0.187 -0.671 -0.486 -0.844 L 45.487 6.128 C 45.337 6.041 45.168 5.998 45 5.998 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentColor; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
-      <path d="M 32.122 58.462 c -1.019 0 -1.992 -0.521 -2.549 -1.418 l -7.438 -11.983 v 10.401 c 0 1.657 -1.343 3 -3 3 c -1.657 0 -3 -1.343 -3 -3 V 34.538 c 0 -1.34 0.889 -2.518 2.177 -2.885 c 1.292 -0.365 2.666 0.165 3.372 1.303 l 7.438 11.983 V 34.538 c 0 -1.657 1.343 -3 3 -3 c 1.657 0 3 1.343 3 3 v 20.924 c 0 1.34 -0.889 2.518 -2.177 2.885 C 32.672 58.425 32.395 58.462 32.122 58.462 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentColor; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
-      <path d="M 42.236 58.462 c -1.657 0 -3 -1.343 -3 -3 V 34.538 c 0 -1.657 1.343 -3 3 -3 h 8.321 c 1.657 0 3 1.343 3 3 s -1.343 3 -3 3 h -5.321 v 17.924 C 45.236 57.119 43.893 58.462 42.236 58.462 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentColor; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
-      <path d="M 50.557 48 h -8.321 c -1.657 0 -3 -1.343 -3 -3 c 0 -1.657 1.343 -3 3 -3 h 8.321 c 1.657 0 3 1.343 3 3 C 53.557 46.657 52.214 48 50.557 48 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentColor; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
-      <path d="M 70.865 37.538 H 58.974 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 11.891 c 1.657 0 3 1.343 3 3 S 72.522 37.538 70.865 37.538 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentColor; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
-      <path d="M 64.919 58.462 c -1.657 0 -3 -1.343 -3 -3 V 34.538 c 0 -1.657 1.343 -3 3 -3 c 1.657 0 3 1.343 3 3 v 20.924 C 67.919 57.119 66.577 58.462 64.919 58.462 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentColor; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+    <g
+      style="
+        stroke: none;
+        stroke-width: 0;
+        stroke-dasharray: none;
+        stroke-linecap: butt;
+        stroke-linejoin: miter;
+        stroke-miterlimit: 10;
+        fill: none;
+        fill-rule: nonzero;
+        opacity: 1;
+      "
+      transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
+    >
+      <path
+        d="M 45 90 c -1.206 0 -2.412 -0.311 -3.488 -0.931 L 8.58 70.054 c -2.152 -1.241 -3.488 -3.556 -3.488 -6.04 V 25.987 c 0 -2.485 1.337 -4.8 3.489 -6.041 L 41.512 0.932 c 2.152 -1.242 4.824 -1.243 6.977 0 L 81.42 19.945 c 2.151 1.241 3.488 3.556 3.488 6.041 v 38.027 c 0 2.485 -1.337 4.8 -3.489 6.041 L 48.488 89.068 C 47.412 89.689 46.206 90 45 90 z M 45 5.998 c -0.168 0 -0.336 0.043 -0.487 0.13 L 11.58 25.142 c -0.301 0.174 -0.488 0.498 -0.488 0.845 v 38.027 c 0 0.347 0.187 0.671 0.487 0.844 l 32.933 19.015 c 0.3 0.172 0.674 0.174 0.975 0 L 78.42 64.859 c 0.301 -0.174 0.487 -0.497 0.487 -0.845 V 25.987 c 0 -0.348 -0.187 -0.671 -0.486 -0.844 L 45.487 6.128 C 45.337 6.041 45.168 5.998 45 5.998 z"
+        style="
+          stroke: none;
+          stroke-width: 1;
+          stroke-dasharray: none;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          fill: currentColor;
+          fill-rule: nonzero;
+          opacity: 1;
+        "
+        transform=" matrix(1 0 0 1 0 0) "
+        stroke-linecap="round"
+      />
+      <path
+        d="M 32.122 58.462 c -1.019 0 -1.992 -0.521 -2.549 -1.418 l -7.438 -11.983 v 10.401 c 0 1.657 -1.343 3 -3 3 c -1.657 0 -3 -1.343 -3 -3 V 34.538 c 0 -1.34 0.889 -2.518 2.177 -2.885 c 1.292 -0.365 2.666 0.165 3.372 1.303 l 7.438 11.983 V 34.538 c 0 -1.657 1.343 -3 3 -3 c 1.657 0 3 1.343 3 3 v 20.924 c 0 1.34 -0.889 2.518 -2.177 2.885 C 32.672 58.425 32.395 58.462 32.122 58.462 z"
+        style="
+          stroke: none;
+          stroke-width: 1;
+          stroke-dasharray: none;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          fill: currentColor;
+          fill-rule: nonzero;
+          opacity: 1;
+        "
+        transform=" matrix(1 0 0 1 0 0) "
+        stroke-linecap="round"
+      />
+      <path
+        d="M 42.236 58.462 c -1.657 0 -3 -1.343 -3 -3 V 34.538 c 0 -1.657 1.343 -3 3 -3 h 8.321 c 1.657 0 3 1.343 3 3 s -1.343 3 -3 3 h -5.321 v 17.924 C 45.236 57.119 43.893 58.462 42.236 58.462 z"
+        style="
+          stroke: none;
+          stroke-width: 1;
+          stroke-dasharray: none;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          fill: currentColor;
+          fill-rule: nonzero;
+          opacity: 1;
+        "
+        transform=" matrix(1 0 0 1 0 0) "
+        stroke-linecap="round"
+      />
+      <path
+        d="M 50.557 48 h -8.321 c -1.657 0 -3 -1.343 -3 -3 c 0 -1.657 1.343 -3 3 -3 h 8.321 c 1.657 0 3 1.343 3 3 C 53.557 46.657 52.214 48 50.557 48 z"
+        style="
+          stroke: none;
+          stroke-width: 1;
+          stroke-dasharray: none;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          fill: currentColor;
+          fill-rule: nonzero;
+          opacity: 1;
+        "
+        transform=" matrix(1 0 0 1 0 0) "
+        stroke-linecap="round"
+      />
+      <path
+        d="M 70.865 37.538 H 58.974 c -1.657 0 -3 -1.343 -3 -3 s 1.343 -3 3 -3 h 11.891 c 1.657 0 3 1.343 3 3 S 72.522 37.538 70.865 37.538 z"
+        style="
+          stroke: none;
+          stroke-width: 1;
+          stroke-dasharray: none;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          fill: currentColor;
+          fill-rule: nonzero;
+          opacity: 1;
+        "
+        transform=" matrix(1 0 0 1 0 0) "
+        stroke-linecap="round"
+      />
+      <path
+        d="M 64.919 58.462 c -1.657 0 -3 -1.343 -3 -3 V 34.538 c 0 -1.657 1.343 -3 3 -3 c 1.657 0 3 1.343 3 3 v 20.924 C 67.919 57.119 66.577 58.462 64.919 58.462 z"
+        style="
+          stroke: none;
+          stroke-width: 1;
+          stroke-dasharray: none;
+          stroke-linecap: butt;
+          stroke-linejoin: miter;
+          stroke-miterlimit: 10;
+          fill: currentColor;
+          fill-rule: nonzero;
+          opacity: 1;
+        "
+        transform=" matrix(1 0 0 1 0 0) "
+        stroke-linecap="round"
+      />
     </g>
   </svg>
 </template>
diff --git a/frontend/components/icon/datatype/TokenIcon.vue b/frontend/components/icon/datatype/TokenIcon.vue
index d6640657a..0540ff718 100644
--- a/frontend/components/icon/datatype/TokenIcon.vue
+++ b/frontend/components/icon/datatype/TokenIcon.vue
@@ -1,5 +1,12 @@
 <template>
-  <svg viewBox="0 0 36 36" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1.20176 15.4686C0.294727 17.0365 0.294727 18.9631 1.20176 20.5311L7.41035 31.2818C8.31738 32.8498 9.98379 33.8131 11.7979 33.8131H24.215C26.0221 33.8131 27.6955 32.8498 28.6025 31.2818L34.7971 20.5311C35.7041 18.9631 35.7041 17.0365 34.7971 15.4686L28.5885 4.71777C27.6814 3.1498 26.015 2.18652 24.201 2.18652H11.7838C9.97676 2.18652 8.30332 3.1498 7.39629 4.71777L1.20176 15.4686Z" fill="currentColor" />
+  <svg
+    viewBox="0 0 36 36"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.20176 15.4686C0.294727 17.0365 0.294727 18.9631 1.20176 20.5311L7.41035 31.2818C8.31738 32.8498 9.98379 33.8131 11.7979 33.8131H24.215C26.0221 33.8131 27.6955 32.8498 28.6025 31.2818L34.7971 20.5311C35.7041 18.9631 35.7041 17.0365 34.7971 15.4686L28.5885 4.71777C27.6814 3.1498 26.015 2.18652 24.201 2.18652H11.7838C9.97676 2.18652 8.30332 3.1498 7.39629 4.71777L1.20176 15.4686Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/datatype/TransactionIcon.vue b/frontend/components/icon/datatype/TransactionIcon.vue
index aac99fd46..4a14ad359 100644
--- a/frontend/components/icon/datatype/TransactionIcon.vue
+++ b/frontend/components/icon/datatype/TransactionIcon.vue
@@ -1,5 +1,12 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 13" fill="none">
-    <path d="M1.77778 0C0.797222 0 0 0.797222 0 1.77778V2.66667H16V1.77778C16 0.797222 15.2028 0 14.2222 0H1.77778ZM16 5.33333H0V10.6667C0 11.6472 0.797222 12.4444 1.77778 12.4444H14.2222C15.2028 12.4444 16 11.6472 16 10.6667V5.33333ZM3.11111 8.88889H4.88889C5.13333 8.88889 5.33333 9.08889 5.33333 9.33333C5.33333 9.57778 5.13333 9.77778 4.88889 9.77778H3.11111C2.86667 9.77778 2.66667 9.57778 2.66667 9.33333C2.66667 9.08889 2.86667 8.88889 3.11111 8.88889ZM6.22222 9.33333C6.22222 9.08889 6.42222 8.88889 6.66667 8.88889H10.2222C10.4667 8.88889 10.6667 9.08889 10.6667 9.33333C10.6667 9.57778 10.4667 9.77778 10.2222 9.77778H6.66667C6.42222 9.77778 6.22222 9.57778 6.22222 9.33333Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 13"
+    fill="none"
+  >
+    <path
+      d="M1.77778 0C0.797222 0 0 0.797222 0 1.77778V2.66667H16V1.77778C16 0.797222 15.2028 0 14.2222 0H1.77778ZM16 5.33333H0V10.6667C0 11.6472 0.797222 12.4444 1.77778 12.4444H14.2222C15.2028 12.4444 16 11.6472 16 10.6667V5.33333ZM3.11111 8.88889H4.88889C5.13333 8.88889 5.33333 9.08889 5.33333 9.33333C5.33333 9.57778 5.13333 9.77778 4.88889 9.77778H3.11111C2.86667 9.77778 2.66667 9.57778 2.66667 9.33333C2.66667 9.08889 2.86667 8.88889 3.11111 8.88889ZM6.22222 9.33333C6.22222 9.08889 6.42222 8.88889 6.66667 8.88889H10.2222C10.4667 8.88889 10.6667 9.08889 10.6667 9.33333C10.6667 9.57778 10.4667 9.77778 10.2222 9.77778H6.66667C6.42222 9.77778 6.22222 9.57778 6.22222 9.33333Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/datatype/ValidatorIcon.vue b/frontend/components/icon/datatype/ValidatorIcon.vue
index 21e3dcadc..5b4ee7a88 100644
--- a/frontend/components/icon/datatype/ValidatorIcon.vue
+++ b/frontend/components/icon/datatype/ValidatorIcon.vue
@@ -1,5 +1,12 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 18" fill="none">
-    <path d="M2.22222 0C0.996528 0 0 1.00898 0 2.25V12.375C0 13.616 0.996528 14.625 2.22222 14.625H8.33333L7.96181 15.75H5.55556C4.94097 15.75 4.44444 16.2527 4.44444 16.875C4.44444 17.4973 4.94097 18 5.55556 18H14.4444C15.059 18 15.5556 17.4973 15.5556 16.875C15.5556 16.2527 15.059 15.75 14.4444 15.75H12.0382L11.6667 14.625H17.7778C19.0035 14.625 20 13.616 20 12.375V2.25C20 1.00898 19.0035 0 17.7778 0H2.22222ZM17.7778 2.25V10.125H2.22222V2.25H17.7778Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 18"
+    fill="none"
+  >
+    <path
+      d="M2.22222 0C0.996528 0 0 1.00898 0 2.25V12.375C0 13.616 0.996528 14.625 2.22222 14.625H8.33333L7.96181 15.75H5.55556C4.94097 15.75 4.44444 16.2527 4.44444 16.875C4.44444 17.4973 4.94097 18 5.55556 18H14.4444C15.059 18 15.5556 17.4973 15.5556 16.875C15.5556 16.2527 15.059 15.75 14.4444 15.75H12.0382L11.6667 14.625H17.7778C19.0035 14.625 20 13.616 20 12.375V2.25C20 1.00898 19.0035 0 17.7778 0H2.22222ZM17.7778 2.25V10.125H2.22222V2.25H17.7778Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/megaMenu/EthStore.vue b/frontend/components/icon/megaMenu/EthStore.vue
index fabdb9aed..36e9d95ee 100644
--- a/frontend/components/icon/megaMenu/EthStore.vue
+++ b/frontend/components/icon/megaMenu/EthStore.vue
@@ -1,11 +1,38 @@
 <template>
-  <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5.00069 5.19673V0L2.63867 3.88L5.00069 5.19673Z" fill="currentColor" />
-    <path d="M7.33263 3.83107L5 0V5.19673L7.33263 3.83107Z" fill="currentColor" />
-    <path d="M5.00072 15.9998L5 11.9531L10.0007 9.04102L5.00072 15.9998Z" fill="currentColor" />
-    <path d="M5.00003 15.9998L4.99932 11.9531L0 9.04102" fill="currentColor" />
-    <path d="M0.00976562 8.19775L5.00048 11.1007V5.92662L2.33308 4.38086L0.00976562 8.19775Z" fill="currentColor" />
-    <path d="M7.65952 4.36816L5 5.92669V11.1007L9.99071 8.19782L7.65952 4.36816Z" fill="currentColor" />
-    <path d="M0 8.19789L4.99071 5.92676L4.99932 7.03573L4.99071 11.1008L0 8.19789Z" fill="currentColor" />
+  <svg
+    width="10"
+    height="16"
+    viewBox="0 0 10 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.00069 5.19673V0L2.63867 3.88L5.00069 5.19673Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7.33263 3.83107L5 0V5.19673L7.33263 3.83107Z"
+      fill="currentColor"
+    />
+    <path
+      d="M5.00072 15.9998L5 11.9531L10.0007 9.04102L5.00072 15.9998Z"
+      fill="currentColor"
+    />
+    <path
+      d="M5.00003 15.9998L4.99932 11.9531L0 9.04102"
+      fill="currentColor"
+    />
+    <path
+      d="M0.00976562 8.19775L5.00048 11.1007V5.92662L2.33308 4.38086L0.00976562 8.19775Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7.65952 4.36816L5 5.92669V11.1007L9.99071 8.19782L7.65952 4.36816Z"
+      fill="currentColor"
+    />
+    <path
+      d="M0 8.19789L4.99071 5.92676L4.99932 7.03573L4.99071 11.1008L0 8.19789Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/megaMenu/EthermineStaking.vue b/frontend/components/icon/megaMenu/EthermineStaking.vue
index 86b9e88e4..be3d77d81 100644
--- a/frontend/components/icon/megaMenu/EthermineStaking.vue
+++ b/frontend/components/icon/megaMenu/EthermineStaking.vue
@@ -1,9 +1,27 @@
 <template>
-  <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4.99874 5.19673V0L2.63672 3.88L4.99874 5.19673Z" fill="var(--primary-contrast-color)" />
-    <path d="M7.33263 3.83107L5 0V5.19673L7.33263 3.83107Z" fill="var(--primary-contrast-color)" />
-    <path d="M5.00072 15.9998L5 11.9531L10.0007 9.04102L5.00072 15.9998Z" fill="var(--primary-contrast-color)" />
-    <path d="M5.00003 15.9998L4.99932 11.9531L0 9.04102" fill="var(--primary-contrast-color)" />
+  <svg
+    width="10"
+    height="16"
+    viewBox="0 0 10 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.99874 5.19673V0L2.63672 3.88L4.99874 5.19673Z"
+      fill="var(--primary-contrast-color)"
+    />
+    <path
+      d="M7.33263 3.83107L5 0V5.19673L7.33263 3.83107Z"
+      fill="var(--primary-contrast-color)"
+    />
+    <path
+      d="M5.00072 15.9998L5 11.9531L10.0007 9.04102L5.00072 15.9998Z"
+      fill="var(--primary-contrast-color)"
+    />
+    <path
+      d="M5.00003 15.9998L4.99932 11.9531L0 9.04102"
+      fill="var(--primary-contrast-color)"
+    />
     <path
       d="M0.00976562 8.19873L5.00048 11.1016V5.92759L2.33308 4.38184L0.00976562 8.19873Z"
       fill="var(--primary-contrast-color)"
diff --git a/frontend/components/icon/megaMenu/EverSteel.vue b/frontend/components/icon/megaMenu/EverSteel.vue
index 8847b0457..ab5746365 100644
--- a/frontend/components/icon/megaMenu/EverSteel.vue
+++ b/frontend/components/icon/megaMenu/EverSteel.vue
@@ -1,5 +1,11 @@
 <template>
-  <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="16"
+    height="14"
+    viewBox="0 0 16 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M8.26678 6.56194C8.64013 7.17175 8.9988 7.7585 9.39441 8.40581C11.0498 5.76094 12.6674 3.17664 14.3081 0.555664H1.15166C0.776971 1.15642 0.408956 1.74645 0 2.40242H10.8665C9.97914 3.8223 9.12875 5.18285 8.26678 6.56194ZM9.38507 9.49235C8.49729 8.05228 7.65446 6.68596 6.80762 5.31223H4.53634C6.15525 7.94185 7.75503 10.5402 9.38685 13.1908C11.6167 9.63739 13.8061 6.14866 16 2.65211C15.6226 2.04065 15.2577 1.44979 14.8639 0.811952C13.027 3.72259 11.2243 6.57842 9.38507 9.49194V9.49235ZM0.030705 2.93601C2.24592 6.47294 4.43087 9.96166 6.60203 13.4294H8.89067C7.08085 10.5216 5.29373 7.65054 3.47679 4.73208H8.67217C9.04642 4.14039 9.41355 3.56024 9.80826 2.93601H0.030705Z"
       fill="var(--primary-contrast-color)"
diff --git a/frontend/components/icon/megaMenu/WebHook.vue b/frontend/components/icon/megaMenu/WebHook.vue
index 169b39184..b6f6b6968 100644
--- a/frontend/components/icon/megaMenu/WebHook.vue
+++ b/frontend/components/icon/megaMenu/WebHook.vue
@@ -1,5 +1,11 @@
 <template>
-  <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="14"
+    height="13"
+    viewBox="0 0 14 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M7.16279 0C5.36828 0 3.90698 1.43625 3.90698 3.2C3.90698 4.2525 4.43859 5.17625 5.23983 5.76L3.63227 8.37C3.61955 8.36625 3.60556 8.36375 3.59157 8.36C3.25581 8.27125 2.90607 8.32 2.60465 8.49C1.98274 8.84375 1.76781 9.62875 2.12645 10.24C2.36682 10.65 2.8056 10.88 3.25581 10.88C3.47711 10.88 3.70222 10.8263 3.90698 10.71C4.20839 10.5387 4.42714 10.26 4.51744 9.93C4.60774 9.6 4.55941 9.25625 4.38517 8.96C4.33049 8.8675 4.25545 8.785 4.18169 8.71L5.95203 5.85L6.125 5.57L5.84012 5.41C5.07322 4.965 4.55814 4.14125 4.55814 3.2C4.55814 1.7825 5.72057 0.64 7.16279 0.64C8.60501 0.64 9.76744 1.7825 9.76744 3.2C9.76744 3.46375 9.73056 3.71125 9.65552 3.95L10.2762 4.14C10.3703 3.84125 10.4186 3.5275 10.4186 3.2C10.4186 1.43625 8.9573 0 7.16279 0ZM7.16279 1.92C6.44422 1.92 5.86047 2.49375 5.86047 3.2C5.86047 3.90625 6.44422 4.48 7.16279 4.48C7.27089 4.48 7.37773 4.465 7.4782 4.44L9.04506 7.23L9.19767 7.51L9.49273 7.36C9.86537 7.1575 10.2876 7.04 10.7442 7.04C12.1864 7.04 13.3488 8.1825 13.3488 9.6C13.3488 11.0175 12.1864 12.16 10.7442 12.16C10.0409 12.16 9.40243 11.8837 8.93314 11.44L8.48547 11.9C9.07049 12.4537 9.86919 12.8 10.7442 12.8C12.5387 12.8 14 11.3637 14 9.6C14 7.83625 12.5387 6.4 10.7442 6.4C10.2927 6.4 9.87427 6.51625 9.48256 6.68L8.04797 4.13C8.30233 3.89625 8.46512 3.56875 8.46512 3.2C8.46512 2.49375 7.88136 1.92 7.16279 1.92ZM2.46221 6.49C1.04415 6.8375 0 8.10375 0 9.6C0 11.3637 1.4613 12.8 3.25581 12.8C4.93459 12.8 6.27889 11.5262 6.45058 9.92H9.49273C9.63772 10.4712 10.1388 10.88 10.7442 10.88C11.4628 10.88 12.0465 10.3062 12.0465 9.6C12.0465 8.89375 11.4628 8.32 10.7442 8.32C10.1388 8.32 9.63772 8.72875 9.49273 9.28H5.86047V9.6C5.86047 11.0175 4.69804 12.16 3.25581 12.16C1.81359 12.16 0.651163 11.0175 0.651163 9.6C0.651163 8.3975 1.4931 7.3975 2.625 7.12L2.46221 6.49Z"
       fill="currentColor"
diff --git a/frontend/components/icon/network/NetworkArbitrum.vue b/frontend/components/icon/network/NetworkArbitrum.vue
index 91275edca..ca8c45384 100644
--- a/frontend/components/icon/network/NetworkArbitrum.vue
+++ b/frontend/components/icon/network/NetworkArbitrum.vue
@@ -1,31 +1,55 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74 74" fill="none">
-    <path d="M67.3744 36.0983C67.3744 53.3683 53.8408 67.3684 37.1461 67.3684C29.2722 67.3684 21.5751 64.3679 14.1929 60.1529C11.1447 58.1288 14.1929 60.1529 11.1447 58.1288C7.42898 52.9339 6.91785 43.0568 6.91785 36.0983C6.91785 30.9608 7.40315 26.2085 9.52543 21.9322C9.71402 21.5522 10.3226 20.2551 10.5256 19.8843C15.7174 10.4017 25.8592 4.82819 37.1461 4.82819C53.8408 4.82819 67.3744 18.8283 67.3744 36.0983Z" class="color1 background" />
-    <path d="M63.7328 46.0777L49.8702 23.8909L44.7872 32.5727L58.1878 55.2418L64.1949 52.3479L63.7328 46.0777Z" class="color2 shape" />
-    <path d="M58.2209 58.3239L42.5975 35.8274L35.8274 45.6085L48.3261 64.1925L56.1378 61.2582L58.2209 58.3239Z" class="color2 shape" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.2749 20.6419L36.3389 5.19066L62.8856 20.6419V51.5445L36.3389 66.9957L16.7178 55.8756L14.2053 60.2056L35.8563 72.79C36.3389 73.2728 36.8216 73.2728 37.3043 72.79L67.7123 55.4073C68.1949 54.9244 68.6776 54.4416 68.6776 53.9587V19.1934C68.6776 18.7105 68.1949 18.2277 67.7123 17.7448L37.3043 0.362139C36.8216 -0.120713 36.3389 -0.120713 35.8563 0.362139L5.44824 17.262C4.96558 17.7448 4.48291 18.2277 4.48291 18.7105V53.4759C4.48291 53.9587 4.96558 54.4416 5.44824 54.9244L11.1583 58.0406L13.8579 53.4759L10.2749 51.5445V20.6419Z" class="color3 shape" />
-    <path d="M47.7728 20.9023H37.4718L14.1511 60.1796L21.5816 64.5363L47.7728 20.9023Z" class="color4 shape" />
-    <path d="M22.3014 24.4942C24.7093 20.6393 31.4514 20.6393 34.3409 21.1212L11.201 58.2248C10.2378 57.7429 8.33556 56.7792 6.89081 55.8155C4.96449 54.8518 4.48291 54.8518 4.48291 53.4062V51.4787C9.7803 43.7688 19.8935 28.3491 22.3014 24.4942Z" class="color4 shape" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 74 74"
+    fill="none"
+  >
+    <path
+      d="M67.3744 36.0983C67.3744 53.3683 53.8408 67.3684 37.1461 67.3684C29.2722 67.3684 21.5751 64.3679 14.1929 60.1529C11.1447 58.1288 14.1929 60.1529 11.1447 58.1288C7.42898 52.9339 6.91785 43.0568 6.91785 36.0983C6.91785 30.9608 7.40315 26.2085 9.52543 21.9322C9.71402 21.5522 10.3226 20.2551 10.5256 19.8843C15.7174 10.4017 25.8592 4.82819 37.1461 4.82819C53.8408 4.82819 67.3744 18.8283 67.3744 36.0983Z"
+      class="color1 background"
+    />
+    <path
+      d="M63.7328 46.0777L49.8702 23.8909L44.7872 32.5727L58.1878 55.2418L64.1949 52.3479L63.7328 46.0777Z"
+      class="color2 shape"
+    />
+    <path
+      d="M58.2209 58.3239L42.5975 35.8274L35.8274 45.6085L48.3261 64.1925L56.1378 61.2582L58.2209 58.3239Z"
+      class="color2 shape"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.2749 20.6419L36.3389 5.19066L62.8856 20.6419V51.5445L36.3389 66.9957L16.7178 55.8756L14.2053 60.2056L35.8563 72.79C36.3389 73.2728 36.8216 73.2728 37.3043 72.79L67.7123 55.4073C68.1949 54.9244 68.6776 54.4416 68.6776 53.9587V19.1934C68.6776 18.7105 68.1949 18.2277 67.7123 17.7448L37.3043 0.362139C36.8216 -0.120713 36.3389 -0.120713 35.8563 0.362139L5.44824 17.262C4.96558 17.7448 4.48291 18.2277 4.48291 18.7105V53.4759C4.48291 53.9587 4.96558 54.4416 5.44824 54.9244L11.1583 58.0406L13.8579 53.4759L10.2749 51.5445V20.6419Z"
+      class="color3 shape"
+    />
+    <path
+      d="M47.7728 20.9023H37.4718L14.1511 60.1796L21.5816 64.5363L47.7728 20.9023Z"
+      class="color4 shape"
+    />
+    <path
+      d="M22.3014 24.4942C24.7093 20.6393 31.4514 20.6393 34.3409 21.1212L11.201 58.2248C10.2378 57.7429 8.33556 56.7792 6.89081 55.8155C4.96449 54.8518 4.48291 54.8518 4.48291 53.4062V51.4787C9.7803 43.7688 19.8935 28.3491 22.3014 24.4942Z"
+      class="color4 shape"
+    />
   </svg>
 </template>
 
 <style lang="scss" scoped>
 .color1 {
-  fill: #2C374B;
+  fill: #2c374b;
 }
 .color2 {
-  fill: #24A2EE;
+  fill: #24a2ee;
 }
 .color3 {
-  fill: #98BCDC;
+  fill: #98bcdc;
 }
 .color4 {
-  fill: #F0F0F0;
+  fill: #f0f0f0;
 }
 
 .pastel {
   .color1 {
-    fill: #2A262C;
+    fill: #2a262c;
   }
 }
 </style>
diff --git a/frontend/components/icon/network/NetworkBase.vue b/frontend/components/icon/network/NetworkBase.vue
index a1c43296d..0086252f9 100644
--- a/frontend/components/icon/network/NetworkBase.vue
+++ b/frontend/components/icon/network/NetworkBase.vue
@@ -1,17 +1,24 @@
 <template>
-  <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M55.3556 34C52.6089 46.5807 41.4044 56 28 56C12.5361 56 0 43.4639 0 28C0 12.5361 12.5361 0 28 0C41.0468 0 52.0095 8.92347 55.1179 21H41.7912C39.4974 15.1193 34.186 11 28 11C19.7158 11 13 18.3877 13 27.5C13 36.6123 19.7158 44 28 44C34.186 44 39.4974 39.8807 41.7912 34H55.3556Z" class="color1 shape" />
+  <svg
+    viewBox="0 0 56 56"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M55.3556 34C52.6089 46.5807 41.4044 56 28 56C12.5361 56 0 43.4639 0 28C0 12.5361 12.5361 0 28 0C41.0468 0 52.0095 8.92347 55.1179 21H41.7912C39.4974 15.1193 34.186 11 28 11C19.7158 11 13 18.3877 13 27.5C13 36.6123 19.7158 44 28 44C34.186 44 39.4974 39.8807 41.7912 34H55.3556Z"
+      class="color1 shape"
+    />
   </svg>
 </template>
 
 <style lang="scss" scoped>
 .color1 {
-  fill: #0052FF;
+  fill: #0052ff;
 }
 
 .pastel {
   .color1 {
-    fill: #6697FF;
+    fill: #6697ff;
   }
 }
 </style>
diff --git a/frontend/components/icon/network/NetworkEthereum.vue b/frontend/components/icon/network/NetworkEthereum.vue
index 365412611..788b16093 100644
--- a/frontend/components/icon/network/NetworkEthereum.vue
+++ b/frontend/components/icon/network/NetworkEthereum.vue
@@ -1,11 +1,33 @@
 <template>
-  <svg viewBox="0 0 33 55" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M16.0356 0L15.6849 1.2533V37.6203L16.0356 37.9885L32.0713 28.01L16.0356 0Z" class="color1 shape" />
-    <path d="M16.0366 0L0 28.01L16.0366 37.9885V20.3369V0Z" class="color2 shape" />
-    <path d="M16.038 41.1835L15.8401 41.4371V54.3917L16.038 54.9988L32.0833 31.2105L16.038 41.1835Z" class="color3 shape" />
-    <path d="M16.0366 54.9988V41.1835L0 31.2105L16.0366 54.9988Z" class="color2 shape" />
-    <path d="M16.0373 37.9901L32.073 28.0116L16.0373 20.3385V37.9901Z" class="color4 shape" />
-    <path d="M0 28.0116L16.0366 37.9901V20.3385L0 28.0116Z" class="color5 shape" />
+  <svg
+    viewBox="0 0 33 55"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.0356 0L15.6849 1.2533V37.6203L16.0356 37.9885L32.0713 28.01L16.0356 0Z"
+      class="color1 shape"
+    />
+    <path
+      d="M16.0366 0L0 28.01L16.0366 37.9885V20.3369V0Z"
+      class="color2 shape"
+    />
+    <path
+      d="M16.038 41.1835L15.8401 41.4371V54.3917L16.038 54.9988L32.0833 31.2105L16.038 41.1835Z"
+      class="color3 shape"
+    />
+    <path
+      d="M16.0366 54.9988V41.1835L0 31.2105L16.0366 54.9988Z"
+      class="color2 shape"
+    />
+    <path
+      d="M16.0373 37.9901L32.073 28.0116L16.0373 20.3385V37.9901Z"
+      class="color4 shape"
+    />
+    <path
+      d="M0 28.0116L16.0366 37.9901V20.3385L0 28.0116Z"
+      class="color5 shape"
+    />
   </svg>
 </template>
 
@@ -14,13 +36,13 @@
   fill: #343434;
 }
 .color2 {
-  fill: #8C8C8C;
+  fill: #8c8c8c;
 }
 .color3 {
-  fill: #3C3C3B;
+  fill: #3c3c3b;
 }
 .color4 {
-  fill: #2A262C;
+  fill: #2a262c;
 }
 .color5 {
   fill: #393939;
@@ -28,19 +50,19 @@
 
 .pastel {
   .color1 {
-  fill: #9A9A9A;
+    fill: #9a9a9a;
   }
   .color2 {
-    fill: #C6C6C6;
+    fill: #c6c6c6;
   }
   .color3 {
-    fill: #9E9E9D;
+    fill: #9e9e9d;
   }
   .color4 {
-    fill: #8A8A8A;
+    fill: #8a8a8a;
   }
   .color5 {
-    fill: #9C9C9C;
+    fill: #9c9c9c;
   }
 }
 </style>
diff --git a/frontend/components/icon/network/NetworkGnosis.vue b/frontend/components/icon/network/NetworkGnosis.vue
index eb2795246..84c71b9fb 100644
--- a/frontend/components/icon/network/NetworkGnosis.vue
+++ b/frontend/components/icon/network/NetworkGnosis.vue
@@ -1,14 +1,34 @@
 <template>
-  <svg viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    viewBox="0 0 55 55"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g clip-path="url(#clip0_15611_285529)">
-      <path d="M15.8267 32C17.3365 32 18.8094 31.4967 20 30.5759L10.426 21C8.11843 23.9833 8.67077 28.2801 11.6534 30.5882C12.8563 31.4967 14.317 32 15.8267 32Z" class="color1 shape" />
-      <path d="M46 25.1733C46 23.6635 45.4967 22.1906 44.5759 21L35 30.574C37.9833 32.8816 42.2679 32.3292 44.5759 29.3466C45.4967 28.1559 46 26.683 46 25.1733Z" class="color1 shape" />
-      <path d="M51.0291 14L46.5957 18.3536C50.1681 22.5559 49.6027 28.815 45.3235 32.3232C41.5712 35.4023 36.1226 35.4023 32.3703 32.3232L27.5 37.1059L22.6425 32.3358C18.3633 35.844 11.9895 35.2887 8.41704 31.0865C5.28153 27.4017 5.28153 22.0511 8.41704 18.3663L6.14251 16.1327L3.98364 14C1.375 18.2148 0 23.0606 0 27.9948C0 42.9107 12.3107 55 27.5 55C42.6892 55 54.9999 42.9107 54.9999 27.9948C55.0128 23.0606 53.6249 18.2148 51.0291 14Z" class="color1 shape" />
-      <path d="M47.1007 8.3613C36.7812 -2.4237 19.6369 -2.82735 8.81095 7.45309C8.49441 7.75583 8.19052 8.05857 7.89929 8.3613C7.22821 9.06769 6.59511 9.7993 6 10.5688L27.5 32L49 10.5688C48.4175 9.7993 47.7718 9.06769 47.1007 8.3613ZM27.5 3.53013C33.831 3.53013 39.7314 5.96464 44.1631 10.4048L27.5 27.0048L10.8369 10.4048C15.2686 5.96464 21.169 3.53013 27.5 3.53013Z" class="color1 shape" />
+      <path
+        d="M15.8267 32C17.3365 32 18.8094 31.4967 20 30.5759L10.426 21C8.11843 23.9833 8.67077 28.2801 11.6534 30.5882C12.8563 31.4967 14.317 32 15.8267 32Z"
+        class="color1 shape"
+      />
+      <path
+        d="M46 25.1733C46 23.6635 45.4967 22.1906 44.5759 21L35 30.574C37.9833 32.8816 42.2679 32.3292 44.5759 29.3466C45.4967 28.1559 46 26.683 46 25.1733Z"
+        class="color1 shape"
+      />
+      <path
+        d="M51.0291 14L46.5957 18.3536C50.1681 22.5559 49.6027 28.815 45.3235 32.3232C41.5712 35.4023 36.1226 35.4023 32.3703 32.3232L27.5 37.1059L22.6425 32.3358C18.3633 35.844 11.9895 35.2887 8.41704 31.0865C5.28153 27.4017 5.28153 22.0511 8.41704 18.3663L6.14251 16.1327L3.98364 14C1.375 18.2148 0 23.0606 0 27.9948C0 42.9107 12.3107 55 27.5 55C42.6892 55 54.9999 42.9107 54.9999 27.9948C55.0128 23.0606 53.6249 18.2148 51.0291 14Z"
+        class="color1 shape"
+      />
+      <path
+        d="M47.1007 8.3613C36.7812 -2.4237 19.6369 -2.82735 8.81095 7.45309C8.49441 7.75583 8.19052 8.05857 7.89929 8.3613C7.22821 9.06769 6.59511 9.7993 6 10.5688L27.5 32L49 10.5688C48.4175 9.7993 47.7718 9.06769 47.1007 8.3613ZM27.5 3.53013C33.831 3.53013 39.7314 5.96464 44.1631 10.4048L27.5 27.0048L10.8369 10.4048C15.2686 5.96464 21.169 3.53013 27.5 3.53013Z"
+        class="color1 shape"
+      />
     </g>
     <defs>
       <clipPath id="clip0_15611_285529">
-        <rect width="55" height="55" fill="white" />
+        <rect
+          width="55"
+          height="55"
+          fill="white"
+        />
       </clipPath>
     </defs>
   </svg>
@@ -16,12 +36,12 @@
 
 <style lang="scss" scoped>
 .color1 {
-  fill: #187D61;
+  fill: #187d61;
 }
 
 .pastel {
   .color1 {
-    fill: #6EAB9A;
+    fill: #6eab9a;
   }
 }
 </style>
diff --git a/frontend/components/icon/network/NetworkOptimism.vue b/frontend/components/icon/network/NetworkOptimism.vue
index adf811023..6dc39adfd 100644
--- a/frontend/components/icon/network/NetworkOptimism.vue
+++ b/frontend/components/icon/network/NetworkOptimism.vue
@@ -1,13 +1,28 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
-    <path d="M17.249 27.772C17.8726 27.7892 18.481 27.5779 18.9597 27.1779C19.4887 26.6981 19.8486 26.0602 19.9858 25.3594C20.262 24.2315 20.4718 23.2472 20.6153 22.4066C20.6636 22.1513 20.6877 21.8921 20.6873 21.6323C20.6873 20.5398 20.1172 19.9937 18.977 19.994C18.3484 19.9789 17.7351 20.1897 17.2486 20.5881C16.7294 21.0729 16.3765 21.7093 16.2402 22.4066C16.0241 23.2108 15.8081 24.195 15.5922 25.3594C15.5434 25.6084 15.5193 25.8617 15.5202 26.1156C15.5202 27.2198 16.0965 27.772 17.249 27.772Z" class="color1 shape" />
-    <path d="M32.5721 22.8928C32.1914 23.1716 31.7294 23.3171 31.2576 23.3067H29.1873L29.8715 20.084H32.0319C32.4036 20.0475 32.7757 20.1501 33.0761 20.372C33.1821 20.4735 33.2645 20.5971 33.3174 20.7341C33.3703 20.871 33.3924 21.0179 33.3822 21.1644C33.3798 21.3456 33.3618 21.5264 33.3283 21.7046C33.2336 22.1812 32.9638 22.6051 32.5721 22.8928Z" class="color1 shape" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48ZM16.9968 30.3647C15.7481 30.418 14.5159 30.0641 13.4857 29.3563C13.0407 29.0164 12.6852 28.5732 12.4499 28.065C12.2146 27.5569 12.1067 26.999 12.1354 26.4398C12.1409 26.1139 12.171 25.7889 12.2255 25.4676C12.3816 24.602 12.6036 23.5637 12.8916 22.3527C13.7079 19.0517 15.8144 17.4012 19.2111 17.4012C20.0625 17.3873 20.9078 17.5465 21.6957 17.8694C22.3951 18.1435 22.9969 18.6199 23.4241 19.2378C23.8549 19.8744 24.0751 20.6302 24.0536 21.3986C24.0474 21.7184 24.0173 22.0373 23.9635 22.3527C23.7833 23.421 23.5673 24.4593 23.3155 25.4676C22.8958 27.1119 22.1697 28.3422 21.137 29.1584C20.1054 29.9626 18.7253 30.3647 16.9968 30.3647ZM24.7164 30.1568C24.7694 30.1786 24.8267 30.1882 24.8839 30.1848L27.3334 30.1852C27.4584 30.1832 27.5789 30.1388 27.6753 30.0593C27.7797 29.9801 27.85 29.8642 27.8721 29.7351L28.7002 25.792H31.1305C32.703 25.792 33.9393 25.4619 34.8395 24.8017C35.81 24.0472 36.4595 22.9539 36.658 21.7408C36.7282 21.4335 36.7645 21.1195 36.7662 20.8044C36.7878 20.3332 36.6862 19.8646 36.4715 19.4446C36.2568 19.0247 35.9364 18.6679 35.5418 18.4095C34.5822 17.8148 33.4644 17.5259 32.3368 17.5813H27.5475C27.4224 17.5832 27.3017 17.6276 27.2052 17.7072C27.1008 17.7863 27.0304 17.9022 27.0084 18.0314L24.5239 29.7347C24.4985 29.8457 24.5179 29.9621 24.5778 30.0589C24.6161 30.1015 24.6635 30.135 24.7164 30.1568Z" class="color1 shape" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 48 48"
+    fill="none"
+  >
+    <path
+      d="M17.249 27.772C17.8726 27.7892 18.481 27.5779 18.9597 27.1779C19.4887 26.6981 19.8486 26.0602 19.9858 25.3594C20.262 24.2315 20.4718 23.2472 20.6153 22.4066C20.6636 22.1513 20.6877 21.8921 20.6873 21.6323C20.6873 20.5398 20.1172 19.9937 18.977 19.994C18.3484 19.9789 17.7351 20.1897 17.2486 20.5881C16.7294 21.0729 16.3765 21.7093 16.2402 22.4066C16.0241 23.2108 15.8081 24.195 15.5922 25.3594C15.5434 25.6084 15.5193 25.8617 15.5202 26.1156C15.5202 27.2198 16.0965 27.772 17.249 27.772Z"
+      class="color1 shape"
+    />
+    <path
+      d="M32.5721 22.8928C32.1914 23.1716 31.7294 23.3171 31.2576 23.3067H29.1873L29.8715 20.084H32.0319C32.4036 20.0475 32.7757 20.1501 33.0761 20.372C33.1821 20.4735 33.2645 20.5971 33.3174 20.7341C33.3703 20.871 33.3924 21.0179 33.3822 21.1644C33.3798 21.3456 33.3618 21.5264 33.3283 21.7046C33.2336 22.1812 32.9638 22.6051 32.5721 22.8928Z"
+      class="color1 shape"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48ZM16.9968 30.3647C15.7481 30.418 14.5159 30.0641 13.4857 29.3563C13.0407 29.0164 12.6852 28.5732 12.4499 28.065C12.2146 27.5569 12.1067 26.999 12.1354 26.4398C12.1409 26.1139 12.171 25.7889 12.2255 25.4676C12.3816 24.602 12.6036 23.5637 12.8916 22.3527C13.7079 19.0517 15.8144 17.4012 19.2111 17.4012C20.0625 17.3873 20.9078 17.5465 21.6957 17.8694C22.3951 18.1435 22.9969 18.6199 23.4241 19.2378C23.8549 19.8744 24.0751 20.6302 24.0536 21.3986C24.0474 21.7184 24.0173 22.0373 23.9635 22.3527C23.7833 23.421 23.5673 24.4593 23.3155 25.4676C22.8958 27.1119 22.1697 28.3422 21.137 29.1584C20.1054 29.9626 18.7253 30.3647 16.9968 30.3647ZM24.7164 30.1568C24.7694 30.1786 24.8267 30.1882 24.8839 30.1848L27.3334 30.1852C27.4584 30.1832 27.5789 30.1388 27.6753 30.0593C27.7797 29.9801 27.85 29.8642 27.8721 29.7351L28.7002 25.792H31.1305C32.703 25.792 33.9393 25.4619 34.8395 24.8017C35.81 24.0472 36.4595 22.9539 36.658 21.7408C36.7282 21.4335 36.7645 21.1195 36.7662 20.8044C36.7878 20.3332 36.6862 19.8646 36.4715 19.4446C36.2568 19.0247 35.9364 18.6679 35.5418 18.4095C34.5822 17.8148 33.4644 17.5259 32.3368 17.5813H27.5475C27.4224 17.5832 27.3017 17.6276 27.2052 17.7072C27.1008 17.7863 27.0304 17.9022 27.0084 18.0314L24.5239 29.7347C24.4985 29.8457 24.5179 29.9621 24.5778 30.0589C24.6161 30.1015 24.6635 30.135 24.7164 30.1568Z"
+      class="color1 shape"
+    />
   </svg>
 </template>
 
 <style lang="scss" scoped>
 .color1 {
-  fill: #F3454A;
+  fill: #f3454a;
 }
 </style>
diff --git a/frontend/components/icon/slot/SlotAttestation.vue b/frontend/components/icon/slot/SlotAttestation.vue
index 0f13323ab..fc325a655 100644
--- a/frontend/components/icon/slot/SlotAttestation.vue
+++ b/frontend/components/icon/slot/SlotAttestation.vue
@@ -1,5 +1,14 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="19" height="17" viewBox="0 0 19 17" fill="none">
-    <path d="M9.65508 11.3654C9.55612 11.465 9.50004 11.6012 9.50004 11.7439V13.8125H11.5564C11.6971 13.8125 11.8318 13.756 11.9308 13.6555L17.1063 8.40946L14.8672 6.15563L9.65508 11.3654ZM18.7527 5.5582L17.7004 4.49902C17.3747 4.16699 16.8428 4.16699 16.5129 4.49902L15.614 5.40381L17.8531 7.65764L18.752 6.75285C19.0825 6.42148 19.0825 5.88691 18.7527 5.5582ZM8.44448 0V4.25H12.6667L8.44448 0ZM8.44448 14.875C7.91439 14.8655 7.43444 14.5643 7.19496 14.0821C7.10013 13.887 6.93107 13.8663 6.86114 13.8663C6.79121 13.8663 6.62199 13.887 6.53128 14.0697L6.27567 14.5803C6.18822 14.7621 5.97381 14.875 5.80558 14.875H5.7693C5.55488 14.8584 5.37346 14.7173 5.30749 14.5098L4.75002 12.8363L4.40037 13.8955C4.20575 14.4799 3.66147 14.875 3.04958 14.875H2.6389C2.34631 14.875 2.11112 14.6393 2.11112 14.3438C2.11112 14.0482 2.34631 13.8125 2.6389 13.8125H3.04793C3.20874 13.8125 3.34817 13.7087 3.39758 13.5593L3.99958 11.7454C4.10679 11.4186 4.40696 11.1994 4.75002 11.1994C5.09308 11.1994 5.39325 11.4194 5.50046 11.7473L5.95831 13.1295C6.60979 12.59 7.74385 12.8058 8.1354 13.5983C8.19708 13.7195 8.31913 13.7992 8.44448 13.8092V11.5215C8.44448 11.2385 8.5567 10.967 8.75623 10.7674L12.6667 6.85645V5.3125H8.44448C7.86161 5.3125 7.38892 4.8367 7.38892 4.25V0H1.58334C0.708875 0 0 0.713535 0 1.59375V15.4062C0 16.2861 0.708875 17 1.58334 17H11.0834C11.9578 17 12.6667 16.2865 12.6667 15.4062V14.875H8.44448Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="19"
+    height="17"
+    viewBox="0 0 19 17"
+    fill="none"
+  >
+    <path
+      d="M9.65508 11.3654C9.55612 11.465 9.50004 11.6012 9.50004 11.7439V13.8125H11.5564C11.6971 13.8125 11.8318 13.756 11.9308 13.6555L17.1063 8.40946L14.8672 6.15563L9.65508 11.3654ZM18.7527 5.5582L17.7004 4.49902C17.3747 4.16699 16.8428 4.16699 16.5129 4.49902L15.614 5.40381L17.8531 7.65764L18.752 6.75285C19.0825 6.42148 19.0825 5.88691 18.7527 5.5582ZM8.44448 0V4.25H12.6667L8.44448 0ZM8.44448 14.875C7.91439 14.8655 7.43444 14.5643 7.19496 14.0821C7.10013 13.887 6.93107 13.8663 6.86114 13.8663C6.79121 13.8663 6.62199 13.887 6.53128 14.0697L6.27567 14.5803C6.18822 14.7621 5.97381 14.875 5.80558 14.875H5.7693C5.55488 14.8584 5.37346 14.7173 5.30749 14.5098L4.75002 12.8363L4.40037 13.8955C4.20575 14.4799 3.66147 14.875 3.04958 14.875H2.6389C2.34631 14.875 2.11112 14.6393 2.11112 14.3438C2.11112 14.0482 2.34631 13.8125 2.6389 13.8125H3.04793C3.20874 13.8125 3.34817 13.7087 3.39758 13.5593L3.99958 11.7454C4.10679 11.4186 4.40696 11.1994 4.75002 11.1994C5.09308 11.1994 5.39325 11.4194 5.50046 11.7473L5.95831 13.1295C6.60979 12.59 7.74385 12.8058 8.1354 13.5983C8.19708 13.7195 8.31913 13.7992 8.44448 13.8092V11.5215C8.44448 11.2385 8.5567 10.967 8.75623 10.7674L12.6667 6.85645V5.3125H8.44448C7.86161 5.3125 7.38892 4.8367 7.38892 4.25V0H1.58334C0.708875 0 0 0.713535 0 1.59375V15.4062C0 16.2861 0.708875 17 1.58334 17H11.0834C11.9578 17 12.6667 16.2865 12.6667 15.4062V14.875H8.44448Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/slot/SlotBlockProposal.vue b/frontend/components/icon/slot/SlotBlockProposal.vue
index 267f8f099..a2e85681a 100644
--- a/frontend/components/icon/slot/SlotBlockProposal.vue
+++ b/frontend/components/icon/slot/SlotBlockProposal.vue
@@ -1,5 +1,14 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
-    <path d="M9.23047 0.241359C9.7776 0.0445471 10.3759 0.0445471 10.927 0.241359L18.4846 2.94162C19.4844 3.29981 20.1535 4.24844 20.1535 5.31516V14.8723C20.1535 15.9351 19.4844 16.8877 18.4806 17.2459L10.923 19.9461C10.3759 20.143 9.7776 20.143 9.22653 19.9461L1.66896 17.2459C0.66916 16.8877 0 15.9391 0 14.8723V5.31516C0 4.25238 0.66916 3.29981 1.6729 2.94162L9.23047 0.241359ZM10.0768 2.61491L3.23952 5.05537L10.0768 7.49584L16.914 5.05537L10.0768 2.61491ZM11.3364 17.1239L17.6343 14.8763V7.47616L11.3364 9.72375V17.1239Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="21"
+    viewBox="0 0 21 21"
+    fill="none"
+  >
+    <path
+      d="M9.23047 0.241359C9.7776 0.0445471 10.3759 0.0445471 10.927 0.241359L18.4846 2.94162C19.4844 3.29981 20.1535 4.24844 20.1535 5.31516V14.8723C20.1535 15.9351 19.4844 16.8877 18.4806 17.2459L10.923 19.9461C10.3759 20.143 9.7776 20.143 9.22653 19.9461L1.66896 17.2459C0.66916 16.8877 0 15.9391 0 14.8723V5.31516C0 4.25238 0.66916 3.29981 1.6729 2.94162L9.23047 0.241359ZM10.0768 2.61491L3.23952 5.05537L10.0768 7.49584L16.914 5.05537L10.0768 2.61491ZM11.3364 17.1239L17.6343 14.8763V7.47616L11.3364 9.72375V17.1239Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/slot/SlotHeadAttestation.vue b/frontend/components/icon/slot/SlotHeadAttestation.vue
index 7ed5e6066..a70cf7be0 100644
--- a/frontend/components/icon/slot/SlotHeadAttestation.vue
+++ b/frontend/components/icon/slot/SlotHeadAttestation.vue
@@ -1,8 +1,26 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20" fill="none">
-    <path d="M10.668 0V5H16.0022L10.668 0Z" fill="currentColor" />
-    <path d="M13.1565 17.4375C13.0314 17.4648 12.9064 17.4844 12.7814 17.4922C12.7439 17.4961 12.7064 17.5 12.6689 17.5H10.0017C9.74753 17.5 9.51832 17.3672 9.4058 17.1562L9.03907 16.4648C8.96822 16.332 8.82653 16.25 8.67234 16.25C8.51815 16.25 8.37229 16.332 8.30561 16.4648L7.93888 17.1562C7.81802 17.3867 7.55548 17.5234 7.2846 17.5C7.01372 17.4766 6.78034 17.3008 6.70533 17.0586L6.00104 14.8828L5.59264 16.1641C5.33843 16.957 4.55912 17.5 3.67564 17.5H3.33391C2.96718 17.5 2.66713 17.2188 2.66713 16.875C2.66713 16.5312 2.96718 16.25 3.33391 16.25H3.67564C3.97152 16.25 4.2299 16.0703 4.31325 15.8047L4.93419 13.8711C5.07588 13.4297 5.50929 13.125 6.00104 13.125C6.49279 13.125 6.9262 13.4297 7.06789 13.8711L7.55131 15.3789C7.8597 15.1367 8.25143 15 8.66817 15C9.33079 15 9.93506 15.3516 10.2309 15.9062L10.4143 16.25H10.7852C10.656 15.9062 10.631 15.5312 10.7269 15.1641L11.352 12.8164C11.4687 12.375 11.7104 11.9766 12.0521 11.6562L16.0028 7.95312V6.25H10.6685C9.93089 6.25 9.33495 5.69141 9.33495 5V0H2.66713C1.19604 0 0 1.12109 0 2.5V17.5C0 18.8789 1.19604 20 2.66713 20H13.3356C14.8067 20 16.0028 18.8789 16.0028 17.5V16.7461C15.8903 16.7891 15.7777 16.8242 15.6611 16.8516L13.1565 17.4375ZM1.84865 10.3574C1.80781 10.3574 1.77322 10.3441 1.74489 10.3176C1.71613 10.291 1.70238 10.2586 1.70238 10.2203V2.48789C1.70238 2.45 1.71655 2.41758 1.74489 2.39062C1.77322 2.36406 1.80781 2.35078 1.84865 2.35078H2.97135C3.01177 2.35078 3.04636 2.36406 3.07512 2.39062C3.10346 2.41758 3.11762 2.44961 3.11762 2.48789V5.69062C3.11762 5.72891 3.13763 5.74766 3.17847 5.74766H6.29026C6.33068 5.74766 6.3511 5.72891 6.3511 5.69062V2.48789C6.3511 2.45 6.36527 2.41758 6.39361 2.39062C6.42195 2.36367 6.45654 2.35078 6.49738 2.35078H7.62007C7.6605 2.35078 7.69509 2.36406 7.72384 2.39062C7.75218 2.41758 7.76635 2.44961 7.76635 2.48789V10.2199C7.76635 10.2582 7.75218 10.2906 7.72384 10.3172C7.69509 10.3441 7.66091 10.357 7.62007 10.357H6.49738C6.45654 10.357 6.42195 10.3438 6.39361 10.3172C6.36485 10.2906 6.3511 10.2582 6.3511 10.2199V6.94844C6.3511 6.91055 6.33068 6.89141 6.29026 6.89141H3.17889C3.13804 6.89141 3.11804 6.91055 3.11804 6.94844V10.2199C3.11804 10.2582 3.10387 10.2906 3.07553 10.3172C3.04678 10.3441 3.01261 10.357 2.97177 10.357H1.84907L1.84865 10.3574Z" fill="currentColor" />
-    <path d="M12.9986 12.5391C12.8277 12.6992 12.7069 12.8984 12.6485 13.1211L12.0234 15.4688C11.9651 15.6836 12.0318 15.9063 12.1985 16.0625C12.3652 16.2188 12.6027 16.2812 12.8319 16.2266L15.3365 15.6406C15.5699 15.5859 15.7866 15.4727 15.9575 15.3125L21.3417 10.2617L18.3829 7.48828L12.9986 12.5391Z" fill="currentColor" />
-    <path d="M23.5122 6.01953L22.9121 5.45703C22.262 4.84766 21.2076 4.84766 20.5533 5.45703L19.3281 6.60547L22.287 9.37891L23.5122 8.23047C24.1623 7.62109 24.1623 6.63281 23.5122 6.01953Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="20"
+    viewBox="0 0 24 20"
+    fill="none"
+  >
+    <path
+      d="M10.668 0V5H16.0022L10.668 0Z"
+      fill="currentColor"
+    />
+    <path
+      d="M13.1565 17.4375C13.0314 17.4648 12.9064 17.4844 12.7814 17.4922C12.7439 17.4961 12.7064 17.5 12.6689 17.5H10.0017C9.74753 17.5 9.51832 17.3672 9.4058 17.1562L9.03907 16.4648C8.96822 16.332 8.82653 16.25 8.67234 16.25C8.51815 16.25 8.37229 16.332 8.30561 16.4648L7.93888 17.1562C7.81802 17.3867 7.55548 17.5234 7.2846 17.5C7.01372 17.4766 6.78034 17.3008 6.70533 17.0586L6.00104 14.8828L5.59264 16.1641C5.33843 16.957 4.55912 17.5 3.67564 17.5H3.33391C2.96718 17.5 2.66713 17.2188 2.66713 16.875C2.66713 16.5312 2.96718 16.25 3.33391 16.25H3.67564C3.97152 16.25 4.2299 16.0703 4.31325 15.8047L4.93419 13.8711C5.07588 13.4297 5.50929 13.125 6.00104 13.125C6.49279 13.125 6.9262 13.4297 7.06789 13.8711L7.55131 15.3789C7.8597 15.1367 8.25143 15 8.66817 15C9.33079 15 9.93506 15.3516 10.2309 15.9062L10.4143 16.25H10.7852C10.656 15.9062 10.631 15.5312 10.7269 15.1641L11.352 12.8164C11.4687 12.375 11.7104 11.9766 12.0521 11.6562L16.0028 7.95312V6.25H10.6685C9.93089 6.25 9.33495 5.69141 9.33495 5V0H2.66713C1.19604 0 0 1.12109 0 2.5V17.5C0 18.8789 1.19604 20 2.66713 20H13.3356C14.8067 20 16.0028 18.8789 16.0028 17.5V16.7461C15.8903 16.7891 15.7777 16.8242 15.6611 16.8516L13.1565 17.4375ZM1.84865 10.3574C1.80781 10.3574 1.77322 10.3441 1.74489 10.3176C1.71613 10.291 1.70238 10.2586 1.70238 10.2203V2.48789C1.70238 2.45 1.71655 2.41758 1.74489 2.39062C1.77322 2.36406 1.80781 2.35078 1.84865 2.35078H2.97135C3.01177 2.35078 3.04636 2.36406 3.07512 2.39062C3.10346 2.41758 3.11762 2.44961 3.11762 2.48789V5.69062C3.11762 5.72891 3.13763 5.74766 3.17847 5.74766H6.29026C6.33068 5.74766 6.3511 5.72891 6.3511 5.69062V2.48789C6.3511 2.45 6.36527 2.41758 6.39361 2.39062C6.42195 2.36367 6.45654 2.35078 6.49738 2.35078H7.62007C7.6605 2.35078 7.69509 2.36406 7.72384 2.39062C7.75218 2.41758 7.76635 2.44961 7.76635 2.48789V10.2199C7.76635 10.2582 7.75218 10.2906 7.72384 10.3172C7.69509 10.3441 7.66091 10.357 7.62007 10.357H6.49738C6.45654 10.357 6.42195 10.3438 6.39361 10.3172C6.36485 10.2906 6.3511 10.2582 6.3511 10.2199V6.94844C6.3511 6.91055 6.33068 6.89141 6.29026 6.89141H3.17889C3.13804 6.89141 3.11804 6.91055 3.11804 6.94844V10.2199C3.11804 10.2582 3.10387 10.2906 3.07553 10.3172C3.04678 10.3441 3.01261 10.357 2.97177 10.357H1.84907L1.84865 10.3574Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12.9986 12.5391C12.8277 12.6992 12.7069 12.8984 12.6485 13.1211L12.0234 15.4688C11.9651 15.6836 12.0318 15.9063 12.1985 16.0625C12.3652 16.2188 12.6027 16.2812 12.8319 16.2266L15.3365 15.6406C15.5699 15.5859 15.7866 15.4727 15.9575 15.3125L21.3417 10.2617L18.3829 7.48828L12.9986 12.5391Z"
+      fill="currentColor"
+    />
+    <path
+      d="M23.5122 6.01953L22.9121 5.45703C22.262 4.84766 21.2076 4.84766 20.5533 5.45703L19.3281 6.60547L22.287 9.37891L23.5122 8.23047C24.1623 7.62109 24.1623 6.63281 23.5122 6.01953Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/slot/SlotSlashing.vue b/frontend/components/icon/slot/SlotSlashing.vue
index 53f1594ef..005596058 100644
--- a/frontend/components/icon/slot/SlotSlashing.vue
+++ b/frontend/components/icon/slot/SlotSlashing.vue
@@ -1,5 +1,14 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="21" height="18" viewBox="0 0 21 18" fill="none">
-    <path d="M3.12042 16.7795C3.12042 17.4524 3.62967 17.9983 4.2577 17.9983H16.6837C16.8683 17.9983 17.0358 17.9403 17.1897 17.8567L8.69196 10.6977C5.62073 10.7821 3.12042 13.4679 3.12042 16.7795ZM20.698 16.4912L11.6057 8.83096C13.4002 8.3191 14.7288 6.58279 14.7288 4.49985C14.6704 2.01474 12.8198 0 10.4704 0C8.20962 0 6.35572 1.96622 6.30978 4.40845L1.27637 0.179291C1.12904 0.0587793 0.957761 0 0.788449 0C0.554825 0 0.323005 0.110949 0.168197 0.32297C-0.100438 0.689989 -0.040982 1.22048 0.301481 1.5077L19.7268 17.8201C20.0713 18.1085 20.5654 18.0426 20.8322 17.6767C21.1016 17.3104 21.0393 16.7795 20.698 16.4912Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="18"
+    viewBox="0 0 21 18"
+    fill="none"
+  >
+    <path
+      d="M3.12042 16.7795C3.12042 17.4524 3.62967 17.9983 4.2577 17.9983H16.6837C16.8683 17.9983 17.0358 17.9403 17.1897 17.8567L8.69196 10.6977C5.62073 10.7821 3.12042 13.4679 3.12042 16.7795ZM20.698 16.4912L11.6057 8.83096C13.4002 8.3191 14.7288 6.58279 14.7288 4.49985C14.6704 2.01474 12.8198 0 10.4704 0C8.20962 0 6.35572 1.96622 6.30978 4.40845L1.27637 0.179291C1.12904 0.0587793 0.957761 0 0.788449 0C0.554825 0 0.323005 0.110949 0.168197 0.32297C-0.100438 0.689989 -0.040982 1.22048 0.301481 1.5077L19.7268 17.8201C20.0713 18.1085 20.5654 18.0426 20.8322 17.6767C21.1016 17.3104 21.0393 16.7795 20.698 16.4912Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/slot/SlotSourceAttestation.vue b/frontend/components/icon/slot/SlotSourceAttestation.vue
index 5f41e314e..557858303 100644
--- a/frontend/components/icon/slot/SlotSourceAttestation.vue
+++ b/frontend/components/icon/slot/SlotSourceAttestation.vue
@@ -1,8 +1,26 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20" fill="none">
-    <path d="M10.668 0V5H16.0022L10.668 0Z" fill="currentColor" />
-    <path d="M13.1565 17.4375C13.0314 17.4648 12.9064 17.4844 12.7814 17.4922C12.7439 17.4961 12.7064 17.5 12.6689 17.5H10.0017C9.74753 17.5 9.51832 17.3672 9.4058 17.1562L9.03907 16.4648C8.96822 16.332 8.82653 16.25 8.67234 16.25C8.51815 16.25 8.37229 16.332 8.30561 16.4648L7.93888 17.1562C7.81802 17.3867 7.55548 17.5234 7.2846 17.5C7.01372 17.4766 6.78034 17.3008 6.70533 17.0586L6.00104 14.8828L5.59264 16.1641C5.33843 16.957 4.55912 17.5 3.67564 17.5H3.33391C2.96718 17.5 2.66713 17.2188 2.66713 16.875C2.66713 16.5312 2.96718 16.25 3.33391 16.25H3.67564C3.97152 16.25 4.2299 16.0703 4.31325 15.8047L4.93419 13.8711C5.07588 13.4297 5.50929 13.125 6.00104 13.125C6.49279 13.125 6.9262 13.4297 7.06789 13.8711L7.55131 15.3789C7.8597 15.1367 8.25143 15 8.66817 15C9.33079 15 9.93506 15.3516 10.2309 15.9062L10.4143 16.25H10.7852C10.656 15.9062 10.631 15.5312 10.7269 15.1641L11.352 12.8164C11.4687 12.375 11.7104 11.9766 12.0521 11.6563L16.0028 7.95312V6.25H10.6685C9.93089 6.25 9.33495 5.69141 9.33495 5V0H2.66713C1.19604 0 0 1.12109 0 2.5V17.5C0 18.8789 1.19604 20 2.66713 20H13.3356C14.8067 20 16.0028 18.8789 16.0028 17.5V16.7461C15.8903 16.7891 15.7777 16.8242 15.6611 16.8516L13.1565 17.4375ZM1.71071 9.46562C1.45442 9.12265 1.32648 8.71836 1.32648 8.25313V7.96719C1.32648 7.9293 1.34065 7.89687 1.36899 7.86992C1.39733 7.84297 1.43192 7.83008 1.47276 7.83008H2.55878C2.5992 7.83008 2.63379 7.84336 2.66255 7.86992C2.69088 7.89687 2.70505 7.9289 2.70505 7.96719V8.18438C2.70505 8.53516 2.87175 8.82695 3.20556 9.05937C3.53895 9.29218 3.99444 9.4082 4.57246 9.4082C5.06838 9.4082 5.44303 9.30937 5.69516 9.11094C5.94728 8.91289 6.07355 8.65742 6.07355 8.34453C6.07355 8.13125 6.00438 7.95 5.86602 7.80117C5.72766 7.65234 5.53054 7.51719 5.27425 7.39492C5.01795 7.27304 4.63372 7.12031 4.12113 6.9375C3.54353 6.73945 3.07553 6.55273 2.71797 6.37695C2.35999 6.20156 2.06077 5.96328 1.82115 5.66211C1.58111 5.36094 1.46109 4.98555 1.46109 4.53555C1.46109 3.86445 1.72155 3.33437 2.24206 2.9457C2.76256 2.55664 3.4581 2.3625 4.32867 2.3625C4.93877 2.3625 5.47762 2.46172 5.94562 2.65976C6.4132 2.8582 6.77743 3.13437 7.03789 3.48906C7.29835 3.84375 7.42837 4.25351 7.42837 4.71875V4.91328C7.42837 4.95156 7.4142 4.98398 7.38587 5.01055C7.35711 5.0375 7.32294 5.05039 7.2821 5.05039H6.18399C6.14315 5.05039 6.10856 5.03711 6.08022 5.01055C6.05147 4.98398 6.03771 4.95156 6.03771 4.91328V4.7875C6.03771 4.42929 5.88102 4.12617 5.56805 3.87813C5.25466 3.63047 4.82167 3.50625 4.26824 3.50625C3.82066 3.50625 3.4731 3.59414 3.22473 3.76914C2.97635 3.94453 2.85258 4.19219 2.85258 4.5125C2.85258 4.74141 2.91759 4.92812 3.04803 5.07305C3.17805 5.21797 3.3735 5.34961 3.63396 5.46758C3.89443 5.58594 4.297 5.73632 4.84209 5.91953C5.41969 6.12539 5.88144 6.3125 6.22691 6.48008C6.57239 6.64805 6.86953 6.88242 7.1179 7.18359C7.36586 7.48477 7.49005 7.86055 7.49005 8.31016C7.49005 8.99648 7.21959 9.5418 6.67866 9.9457C6.13773 10.35 5.39927 10.552 4.46369 10.552C3.829 10.552 3.27599 10.4566 2.80424 10.266C2.33249 10.0754 1.96826 9.80859 1.71196 9.46523L1.71071 9.46562Z" fill="currentColor" />
-    <path d="M23.5122 6.01953L22.9121 5.45703C22.262 4.84766 21.2076 4.84766 20.5533 5.45703L19.3281 6.60547L22.287 9.37891L23.5122 8.23047C24.1623 7.62109 24.1623 6.63281 23.5122 6.01953Z" fill="currentColor" />
-    <path d="M12.9986 12.5391C12.8277 12.6992 12.7069 12.8984 12.6485 13.1211L12.0234 15.4688C11.9651 15.6836 12.0318 15.9062 12.1985 16.0625C12.3652 16.2187 12.6027 16.2813 12.8319 16.2266L15.3365 15.6406C15.5699 15.5859 15.7866 15.4727 15.9575 15.3125L21.3417 10.2617L18.3829 7.48828L12.9986 12.5391Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="20"
+    viewBox="0 0 24 20"
+    fill="none"
+  >
+    <path
+      d="M10.668 0V5H16.0022L10.668 0Z"
+      fill="currentColor"
+    />
+    <path
+      d="M13.1565 17.4375C13.0314 17.4648 12.9064 17.4844 12.7814 17.4922C12.7439 17.4961 12.7064 17.5 12.6689 17.5H10.0017C9.74753 17.5 9.51832 17.3672 9.4058 17.1562L9.03907 16.4648C8.96822 16.332 8.82653 16.25 8.67234 16.25C8.51815 16.25 8.37229 16.332 8.30561 16.4648L7.93888 17.1562C7.81802 17.3867 7.55548 17.5234 7.2846 17.5C7.01372 17.4766 6.78034 17.3008 6.70533 17.0586L6.00104 14.8828L5.59264 16.1641C5.33843 16.957 4.55912 17.5 3.67564 17.5H3.33391C2.96718 17.5 2.66713 17.2188 2.66713 16.875C2.66713 16.5312 2.96718 16.25 3.33391 16.25H3.67564C3.97152 16.25 4.2299 16.0703 4.31325 15.8047L4.93419 13.8711C5.07588 13.4297 5.50929 13.125 6.00104 13.125C6.49279 13.125 6.9262 13.4297 7.06789 13.8711L7.55131 15.3789C7.8597 15.1367 8.25143 15 8.66817 15C9.33079 15 9.93506 15.3516 10.2309 15.9062L10.4143 16.25H10.7852C10.656 15.9062 10.631 15.5312 10.7269 15.1641L11.352 12.8164C11.4687 12.375 11.7104 11.9766 12.0521 11.6563L16.0028 7.95312V6.25H10.6685C9.93089 6.25 9.33495 5.69141 9.33495 5V0H2.66713C1.19604 0 0 1.12109 0 2.5V17.5C0 18.8789 1.19604 20 2.66713 20H13.3356C14.8067 20 16.0028 18.8789 16.0028 17.5V16.7461C15.8903 16.7891 15.7777 16.8242 15.6611 16.8516L13.1565 17.4375ZM1.71071 9.46562C1.45442 9.12265 1.32648 8.71836 1.32648 8.25313V7.96719C1.32648 7.9293 1.34065 7.89687 1.36899 7.86992C1.39733 7.84297 1.43192 7.83008 1.47276 7.83008H2.55878C2.5992 7.83008 2.63379 7.84336 2.66255 7.86992C2.69088 7.89687 2.70505 7.9289 2.70505 7.96719V8.18438C2.70505 8.53516 2.87175 8.82695 3.20556 9.05937C3.53895 9.29218 3.99444 9.4082 4.57246 9.4082C5.06838 9.4082 5.44303 9.30937 5.69516 9.11094C5.94728 8.91289 6.07355 8.65742 6.07355 8.34453C6.07355 8.13125 6.00438 7.95 5.86602 7.80117C5.72766 7.65234 5.53054 7.51719 5.27425 7.39492C5.01795 7.27304 4.63372 7.12031 4.12113 6.9375C3.54353 6.73945 3.07553 6.55273 2.71797 6.37695C2.35999 6.20156 2.06077 5.96328 1.82115 5.66211C1.58111 5.36094 1.46109 4.98555 1.46109 4.53555C1.46109 3.86445 1.72155 3.33437 2.24206 2.9457C2.76256 2.55664 3.4581 2.3625 4.32867 2.3625C4.93877 2.3625 5.47762 2.46172 5.94562 2.65976C6.4132 2.8582 6.77743 3.13437 7.03789 3.48906C7.29835 3.84375 7.42837 4.25351 7.42837 4.71875V4.91328C7.42837 4.95156 7.4142 4.98398 7.38587 5.01055C7.35711 5.0375 7.32294 5.05039 7.2821 5.05039H6.18399C6.14315 5.05039 6.10856 5.03711 6.08022 5.01055C6.05147 4.98398 6.03771 4.95156 6.03771 4.91328V4.7875C6.03771 4.42929 5.88102 4.12617 5.56805 3.87813C5.25466 3.63047 4.82167 3.50625 4.26824 3.50625C3.82066 3.50625 3.4731 3.59414 3.22473 3.76914C2.97635 3.94453 2.85258 4.19219 2.85258 4.5125C2.85258 4.74141 2.91759 4.92812 3.04803 5.07305C3.17805 5.21797 3.3735 5.34961 3.63396 5.46758C3.89443 5.58594 4.297 5.73632 4.84209 5.91953C5.41969 6.12539 5.88144 6.3125 6.22691 6.48008C6.57239 6.64805 6.86953 6.88242 7.1179 7.18359C7.36586 7.48477 7.49005 7.86055 7.49005 8.31016C7.49005 8.99648 7.21959 9.5418 6.67866 9.9457C6.13773 10.35 5.39927 10.552 4.46369 10.552C3.829 10.552 3.27599 10.4566 2.80424 10.266C2.33249 10.0754 1.96826 9.80859 1.71196 9.46523L1.71071 9.46562Z"
+      fill="currentColor"
+    />
+    <path
+      d="M23.5122 6.01953L22.9121 5.45703C22.262 4.84766 21.2076 4.84766 20.5533 5.45703L19.3281 6.60547L22.287 9.37891L23.5122 8.23047C24.1623 7.62109 24.1623 6.63281 23.5122 6.01953Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12.9986 12.5391C12.8277 12.6992 12.7069 12.8984 12.6485 13.1211L12.0234 15.4688C11.9651 15.6836 12.0318 15.9062 12.1985 16.0625C12.3652 16.2187 12.6027 16.2813 12.8319 16.2266L15.3365 15.6406C15.5699 15.5859 15.7866 15.4727 15.9575 15.3125L21.3417 10.2617L18.3829 7.48828L12.9986 12.5391Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/slot/SlotSync.vue b/frontend/components/icon/slot/SlotSync.vue
index 934e6df89..b0a081571 100644
--- a/frontend/components/icon/slot/SlotSync.vue
+++ b/frontend/components/icon/slot/SlotSync.vue
@@ -1,5 +1,14 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path d="M18.6667 0C17.9304 0 17.3333 0.59625 17.3333 1.33333V4.42042C15.6708 2.105 12.975 0.666667 10 0.666667C6.0625 0.666667 2.60792 3.18083 1.39917 6.925C1.17258 7.62542 1.55738 8.37833 2.25792 8.60333C2.96167 8.8325 3.71125 8.4445 3.93708 7.74542C4.7875 5.10417 7.225 3.33333 10 3.33333C12.1042 3.33333 14.0108 4.35625 15.1833 6H13.3333C12.5971 6 12 6.59625 12 7.33333C12 8.07042 12.5971 8.66667 13.3333 8.66667H18.6667C19.4029 8.66667 20 8.07042 20 7.33333V1.33333C20 0.59625 19.4042 0 18.6667 0ZM17.7417 11.4C17.0367 11.1734 16.2883 11.5588 16.0625 12.2579C15.2125 14.8958 12.775 16.6667 10 16.6667C7.89583 16.6667 5.98958 15.6438 4.81667 14H6.66667C7.40292 14 8 13.4038 8 12.6667C8 11.9296 7.40292 11.3333 6.66667 11.3333H1.33333C0.597083 11.3333 0 11.9296 0 12.6667V18.6667C0 19.4038 0.597083 20 1.33333 20C2.06958 20 2.66667 19.4038 2.66667 18.6667V15.5796C4.32917 17.8958 7.025 19.3333 9.9625 19.3333C13.8979 19.3333 17.3542 16.8192 18.5625 13.075C18.8292 12.375 18.4417 11.5875 17.7417 11.4Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      d="M18.6667 0C17.9304 0 17.3333 0.59625 17.3333 1.33333V4.42042C15.6708 2.105 12.975 0.666667 10 0.666667C6.0625 0.666667 2.60792 3.18083 1.39917 6.925C1.17258 7.62542 1.55738 8.37833 2.25792 8.60333C2.96167 8.8325 3.71125 8.4445 3.93708 7.74542C4.7875 5.10417 7.225 3.33333 10 3.33333C12.1042 3.33333 14.0108 4.35625 15.1833 6H13.3333C12.5971 6 12 6.59625 12 7.33333C12 8.07042 12.5971 8.66667 13.3333 8.66667H18.6667C19.4029 8.66667 20 8.07042 20 7.33333V1.33333C20 0.59625 19.4042 0 18.6667 0ZM17.7417 11.4C17.0367 11.1734 16.2883 11.5588 16.0625 12.2579C15.2125 14.8958 12.775 16.6667 10 16.6667C7.89583 16.6667 5.98958 15.6438 4.81667 14H6.66667C7.40292 14 8 13.4038 8 12.6667C8 11.9296 7.40292 11.3333 6.66667 11.3333H1.33333C0.597083 11.3333 0 11.9296 0 12.6667V18.6667C0 19.4038 0.597083 20 1.33333 20C2.06958 20 2.66667 19.4038 2.66667 18.6667V15.5796C4.32917 17.8958 7.025 19.3333 9.9625 19.3333C13.8979 19.3333 17.3542 16.8192 18.5625 13.075C18.8292 12.375 18.4417 11.5875 17.7417 11.4Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/icon/slot/SlotTargetAttestation.vue b/frontend/components/icon/slot/SlotTargetAttestation.vue
index 08a60ae7a..ceda1e651 100644
--- a/frontend/components/icon/slot/SlotTargetAttestation.vue
+++ b/frontend/components/icon/slot/SlotTargetAttestation.vue
@@ -1,8 +1,26 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20" fill="none">
-    <path d="M13.1565 17.4375C13.0314 17.4648 12.9064 17.4844 12.7814 17.4922C12.7439 17.4961 12.7064 17.5 12.6689 17.5H10.0017C9.74753 17.5 9.51832 17.3672 9.4058 17.1562L9.03907 16.4648C8.96822 16.332 8.82653 16.25 8.67234 16.25C8.51815 16.25 8.37229 16.332 8.30561 16.4648L7.93888 17.1562C7.81802 17.3867 7.55548 17.5234 7.2846 17.5C7.01372 17.4766 6.78034 17.3008 6.70533 17.0586L6.00104 14.8828L5.59264 16.1641C5.33843 16.957 4.55912 17.5 3.67564 17.5H3.33391C2.96718 17.5 2.66713 17.2188 2.66713 16.875C2.66713 16.5312 2.96718 16.25 3.33391 16.25H3.67564C3.97152 16.25 4.2299 16.0703 4.31325 15.8047L4.93419 13.8711C5.07588 13.4297 5.50929 13.125 6.00104 13.125C6.49279 13.125 6.9262 13.4297 7.06789 13.8711L7.55131 15.3789C7.8597 15.1367 8.25143 15 8.66817 15C9.33079 15 9.93506 15.3516 10.2309 15.9062L10.4143 16.25H10.7852C10.656 15.9062 10.631 15.5312 10.7269 15.1641L11.352 12.8164C11.4687 12.375 11.7104 11.9766 12.0521 11.6562L16.0028 7.95312V6.25H10.6685C9.93089 6.25 9.33495 5.69141 9.33495 5V0H2.66713C1.19604 0 0 1.12109 0 2.5V17.5C0 18.8789 1.19604 20 2.66713 20H13.3356C14.8067 20 16.0028 18.8789 16.0028 17.5V16.7461C15.8903 16.7891 15.7777 16.8242 15.6611 16.8516L13.1565 17.4375ZM1.37482 3.60937C1.33398 3.60937 1.29939 3.59609 1.27105 3.56953C1.2423 3.54297 1.22855 3.51055 1.22855 3.47227V2.5914C1.22855 2.55351 1.24272 2.52109 1.27105 2.49414C1.29939 2.46719 1.33398 2.4543 1.37482 2.4543H7.31794C7.35836 2.4543 7.39295 2.46758 7.42171 2.49414C7.45004 2.52109 7.46421 2.55312 7.46421 2.5914V3.47227C7.46421 3.51055 7.45004 3.54297 7.42171 3.56953C7.39295 3.59648 7.35878 3.60937 7.31794 3.60937H5.07255C5.03171 3.60937 5.0117 3.62852 5.0117 3.66641V10.3234C5.0117 10.3617 4.99753 10.3941 4.9692 10.4207C4.94044 10.4477 4.90627 10.4605 4.86543 10.4605H3.74273C3.70189 10.4605 3.6673 10.4473 3.63897 10.4207C3.61021 10.3941 3.59646 10.3617 3.59646 10.3234V3.66641C3.59646 3.62852 3.57604 3.60937 3.53561 3.60937H1.37482Z" fill="currentColor" />
-    <path d="M10.668 0V5H16.0022L10.668 0Z" fill="currentColor" />
-    <path d="M23.5122 6.01953L22.9121 5.45703C22.262 4.84766 21.2076 4.84766 20.5533 5.45703L19.3281 6.60547L22.287 9.3789L23.5122 8.23047C24.1623 7.62109 24.1623 6.63281 23.5122 6.01953Z" fill="currentColor" />
-    <path d="M12.9986 12.5391C12.8277 12.6992 12.7069 12.8984 12.6485 13.1211L12.0234 15.4687C11.9651 15.6836 12.0318 15.9062 12.1985 16.0625C12.3652 16.2188 12.6027 16.2812 12.8319 16.2266L15.3365 15.6406C15.5699 15.5859 15.7866 15.4727 15.9575 15.3125L21.3417 10.2617L18.3829 7.48828L12.9986 12.5391Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="20"
+    viewBox="0 0 24 20"
+    fill="none"
+  >
+    <path
+      d="M13.1565 17.4375C13.0314 17.4648 12.9064 17.4844 12.7814 17.4922C12.7439 17.4961 12.7064 17.5 12.6689 17.5H10.0017C9.74753 17.5 9.51832 17.3672 9.4058 17.1562L9.03907 16.4648C8.96822 16.332 8.82653 16.25 8.67234 16.25C8.51815 16.25 8.37229 16.332 8.30561 16.4648L7.93888 17.1562C7.81802 17.3867 7.55548 17.5234 7.2846 17.5C7.01372 17.4766 6.78034 17.3008 6.70533 17.0586L6.00104 14.8828L5.59264 16.1641C5.33843 16.957 4.55912 17.5 3.67564 17.5H3.33391C2.96718 17.5 2.66713 17.2188 2.66713 16.875C2.66713 16.5312 2.96718 16.25 3.33391 16.25H3.67564C3.97152 16.25 4.2299 16.0703 4.31325 15.8047L4.93419 13.8711C5.07588 13.4297 5.50929 13.125 6.00104 13.125C6.49279 13.125 6.9262 13.4297 7.06789 13.8711L7.55131 15.3789C7.8597 15.1367 8.25143 15 8.66817 15C9.33079 15 9.93506 15.3516 10.2309 15.9062L10.4143 16.25H10.7852C10.656 15.9062 10.631 15.5312 10.7269 15.1641L11.352 12.8164C11.4687 12.375 11.7104 11.9766 12.0521 11.6562L16.0028 7.95312V6.25H10.6685C9.93089 6.25 9.33495 5.69141 9.33495 5V0H2.66713C1.19604 0 0 1.12109 0 2.5V17.5C0 18.8789 1.19604 20 2.66713 20H13.3356C14.8067 20 16.0028 18.8789 16.0028 17.5V16.7461C15.8903 16.7891 15.7777 16.8242 15.6611 16.8516L13.1565 17.4375ZM1.37482 3.60937C1.33398 3.60937 1.29939 3.59609 1.27105 3.56953C1.2423 3.54297 1.22855 3.51055 1.22855 3.47227V2.5914C1.22855 2.55351 1.24272 2.52109 1.27105 2.49414C1.29939 2.46719 1.33398 2.4543 1.37482 2.4543H7.31794C7.35836 2.4543 7.39295 2.46758 7.42171 2.49414C7.45004 2.52109 7.46421 2.55312 7.46421 2.5914V3.47227C7.46421 3.51055 7.45004 3.54297 7.42171 3.56953C7.39295 3.59648 7.35878 3.60937 7.31794 3.60937H5.07255C5.03171 3.60937 5.0117 3.62852 5.0117 3.66641V10.3234C5.0117 10.3617 4.99753 10.3941 4.9692 10.4207C4.94044 10.4477 4.90627 10.4605 4.86543 10.4605H3.74273C3.70189 10.4605 3.6673 10.4473 3.63897 10.4207C3.61021 10.3941 3.59646 10.3617 3.59646 10.3234V3.66641C3.59646 3.62852 3.57604 3.60937 3.53561 3.60937H1.37482Z"
+      fill="currentColor"
+    />
+    <path
+      d="M10.668 0V5H16.0022L10.668 0Z"
+      fill="currentColor"
+    />
+    <path
+      d="M23.5122 6.01953L22.9121 5.45703C22.262 4.84766 21.2076 4.84766 20.5533 5.45703L19.3281 6.60547L22.287 9.3789L23.5122 8.23047C24.1623 7.62109 24.1623 6.63281 23.5122 6.01953Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12.9986 12.5391C12.8277 12.6992 12.7069 12.8984 12.6485 13.1211L12.0234 15.4687C11.9651 15.6836 12.0318 15.9062 12.1985 16.0625C12.3652 16.2188 12.6027 16.2812 12.8319 16.2266L15.3365 15.6406C15.5699 15.5859 15.7866 15.4727 15.9575 15.3125L21.3417 10.2617L18.3829 7.48828L12.9986 12.5391Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/components/notifications/DashboardsTable.vue b/frontend/components/notifications/DashboardsTable.vue
index eaa5af29c..83ce84d50 100644
--- a/frontend/components/notifications/DashboardsTable.vue
+++ b/frontend/components/notifications/DashboardsTable.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faArrowUpRightFromSquare
-} from '@fortawesome/pro-solid-svg-icons'
+import { faArrowUpRightFromSquare } from '@fortawesome/pro-solid-svg-icons'
 import IconValidator from '../icon/IconValidator.vue'
 import IconAccount from '../icon/IconAccount.vue'
 import type { Cursor } from '~/types/datatable'
 import type { DashboardType } from '~/types/dashboard'
 import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
 
-defineEmits<{(e: 'openDialog'): void }>()
+defineEmits<{ (e: 'openDialog'): void }>()
 
 const cursor = ref<Cursor>()
 const pageSize = ref<number>(10)
@@ -19,7 +17,15 @@ const { t: $t } = useTranslation()
 const { currentNetwork } = useNetworkStore()
 const networkId = ref<number>(currentNetwork.value ?? 1)
 
-const { onSort, setCursor, setPageSize, setSearch, notificationsDashboards, query, isLoading } = useNotificationsDashboardStore(networkId)
+const {
+  onSort,
+  setCursor,
+  setPageSize,
+  setSearch,
+  notificationsDashboards,
+  query,
+  isLoading,
+} = useNotificationsDashboardStore(networkId)
 
 const { getDashboardLabel } = useUserDashboardStore()
 
@@ -28,7 +34,7 @@ const colsVisible = computed(() => {
   return {
     notifications: width.value > 1024,
     dashboard: width.value >= 640,
-    groups: width.value >= 640
+    groups: width.value >= 640,
   }
 })
 
@@ -37,8 +43,7 @@ const openDialog = () => {
   alert('not implemented yet 😪')
 }
 
-const getDashboardType = (isAccount: boolean):DashboardType => isAccount ? 'account' : 'validator'
-
+const getDashboardType = (isAccount: boolean): DashboardType => isAccount ? 'account' : 'validator'
 </script>
 
 <template>
@@ -73,7 +78,11 @@ const getDashboardType = (isAccount: boolean):DashboardType => isAccount ? 'acco
             >
               <template #body="slotProps">
                 <div class="icon-wrapper">
-                  <IconNetwork colored :chain-id="slotProps.data.chain_id" class="icon-network" />
+                  <IconNetwork
+                    colored
+                    :chain-id="slotProps.data.chain_id"
+                    class="icon-network"
+                  />
                 </div>
               </template>
             </Column>
@@ -87,7 +96,10 @@ const getDashboardType = (isAccount: boolean):DashboardType => isAccount ? 'acco
                 <BcTableAgeHeader />
               </template>
               <template #body="slotProps">
-                <BcFormatTimePassed :value="slotProps.data.timestamp" type="go-timestamp" />
+                <BcFormatTimePassed
+                  :value="slotProps.data.timestamp"
+                  type="go-timestamp"
+                />
               </template>
             </Column>
             <Column
@@ -102,7 +114,10 @@ const getDashboardType = (isAccount: boolean):DashboardType => isAccount ? 'acco
                 <NotificationsDashboardsTableItemDashboard
                   :type="getDashboardType(slotProps.data.is_account_dashboard)"
                   :dashboard-id="slotProps.data.dashboard_id"
-                  :dashboard-name="getDashboardLabel(`${slotProps.data.dashboard_id}`, getDashboardType(slotProps.data.is_account_dashboard))"
+                  :dashboard-name="getDashboardLabel(
+                    `${slotProps.data.dashboard_id}`,
+                    getDashboardType(slotProps.data.is_account_dashboard),
+                  )"
                 />
               </template>
             </Column>
@@ -131,14 +146,24 @@ const getDashboardType = (isAccount: boolean):DashboardType => isAccount ? 'acco
                     <IconValidator class="icon-dashboard-type" />
                     {{ slotProps.data.entity_count }}
                     <span>
-                      {{ $t('notifications.dashboards.entity.validators', slotProps.data.entity_count) }}
+                      {{
+                        $t(
+                          "notifications.dashboards.entity.validators",
+                          slotProps.data.entity_count,
+                        )
+                      }}
                     </span>
                   </template>
                   <template v-else>
                     <IconAccount class="icon-dashboard-type" />
                     {{ slotProps.data.entity_count }}
                     <span>
-                      {{ $t('notifications.dashboards.entity.accounts', slotProps.data.entity_count) }}
+                      {{
+                        $t(
+                          "notifications.dashboards.entity.accounts",
+                          slotProps.data.entity_count,
+                        )
+                      }}
                     </span>
                   </template>
                   <FontAwesomeIcon
@@ -158,30 +183,35 @@ const getDashboardType = (isAccount: boolean):DashboardType => isAccount ? 'acco
               :header="$t('notifications.dashboards.col.notification')"
             >
               <template #body="slotProps">
-                {{ slotProps.data.event_types.join(', ') }}
+                {{ slotProps.data.event_types.join(", ") }}
               </template>
             </Column>
             <template #expansion="slotProps">
               <div class="expansion">
                 <div class="label-dashboard">
-                  {{ $t('notifications.dashboards.expansion.label-dashboard') }}
+                  {{ $t("notifications.dashboards.expansion.label-dashboard") }}
                 </div>
                 <NotificationsDashboardsTableItemDashboard
                   :type="getDashboardType(slotProps.data.is_account_dashboard)"
                   :dashboard-id="slotProps.data.dashboard_id"
-                  :dashboard-name="getDashboardLabel(`${slotProps.data.dashboard_id}`, getDashboardType(slotProps.data.is_account_dashboard))"
+                  :dashboard-name="getDashboardLabel(
+                    `${slotProps.data.dashboard_id}`,
+                    getDashboardType(slotProps.data.is_account_dashboard),
+                  )"
                 />
                 <div class="label-group">
-                  {{ $t('notifications.dashboards.expansion.label-group') }}
+                  {{ $t("notifications.dashboards.expansion.label-group") }}
                 </div>
                 <div class="group">
                   {{ slotProps.data.group_name }}
                 </div>
                 <div class="label-notification">
-                  {{ $t('notifications.dashboards.expansion.label-notification') }}
+                  {{
+                    $t("notifications.dashboards.expansion.label-notification")
+                  }}
                 </div>
                 <div class="notification">
-                  {{ slotProps.data.event_types.join(', ') }}
+                  {{ slotProps.data.event_types.join(", ") }}
                 </div>
               </div>
             </template>
@@ -194,11 +224,37 @@ const getDashboardType = (isAccount: boolean):DashboardType => isAccount ? 'acco
             <!-- TODO: implement number of subscriptions -->
             <template #bc-table-footer-right>
               <template v-if="width < 1024">
-                {{ $t('notifications.dashboards.footer.subscriptions.validators_shortened', { count: 1}) }} | {{ $t('notifications.dashboards.footer.subscriptions.accounts_shortened', { count: 1}) }}
+                {{
+                  $t(
+                    "notifications.dashboards.footer.subscriptions.validators_shortened",
+                    { count: 1 },
+                  )
+                }}
+                |
+                {{
+                  $t(
+                    "notifications.dashboards.footer.subscriptions.accounts_shortened",
+                    { count: 1 },
+                  )
+                }}
               </template>
               <template v-else>
-                <div>{{ $t('notifications.dashboards.footer.subscriptions.validators', { count: 1}) }}</div>
-                <div>{{ $t('notifications.dashboards.footer.subscriptions.accounts', { count: 1}) }}</div>
+                <div>
+                  {{
+                    $t(
+                      "notifications.dashboards.footer.subscriptions.validators",
+                      { count: 1 },
+                    )
+                  }}
+                </div>
+                <div>
+                  {{
+                    $t(
+                      "notifications.dashboards.footer.subscriptions.accounts",
+                      { count: 1 },
+                    )
+                  }}
+                </div>
               </template>
             </template>
           </BcTable>
@@ -214,7 +270,7 @@ const getDashboardType = (isAccount: boolean):DashboardType => isAccount ? 'acco
 $breakpoint-sm: 640px;
 $breakpoint-lg: 1024px;
 
-:deep(.col-header-network .p-column-header-content){
+:deep(.col-header-network .p-column-header-content) {
   justify-content: center;
 }
 
@@ -280,7 +336,7 @@ $breakpoint-lg: 1024px;
     }
   }
 }
-:deep(.right-info){
+:deep(.right-info) {
   flex-direction: column;
   justify-content: center;
 }
@@ -315,7 +371,8 @@ svg {
     padding-left: 14px !important;
   }
 }
-.label-group, .label-notification {
+.label-group,
+.label-notification {
   font-weight: var(--standard_text_medium_font_weight);
 }
 </style>
diff --git a/frontend/components/notifications/DashboardsTableEmpty.vue b/frontend/components/notifications/DashboardsTableEmpty.vue
index 9dbdb2cf0..87f8b4a91 100644
--- a/frontend/components/notifications/DashboardsTableEmpty.vue
+++ b/frontend/components/notifications/DashboardsTableEmpty.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faCirclePlus, faRightFromBracket } from '@fortawesome/pro-regular-svg-icons'
+import {
+  faCirclePlus,
+  faRightFromBracket,
+} from '@fortawesome/pro-regular-svg-icons'
 
 const { t: $t } = useTranslation()
 
-const emit = defineEmits<{(e: 'openDialog'): void }>()
+const emit = defineEmits<{ (e: 'openDialog'): void }>()
 
 const handleClick = () => {
   if (!isLoggedIn.value) {
@@ -18,7 +21,10 @@ const handleClick = () => {
 const { isLoggedIn } = useUserStore()
 const { dashboards } = useUserDashboardStore()
 const hasDashboards = computed(() => {
-  return dashboards.value?.account_dashboards?.length || dashboards.value?.validator_dashboards?.length
+  return (
+    dashboards.value?.account_dashboards?.length
+    || dashboards.value?.validator_dashboards?.length
+  )
 })
 
 const text = computed(() => {
@@ -30,13 +36,22 @@ const text = computed(() => {
   }
   return $t('notifications.dashboards.empty.with_dashboards')
 })
-
 </script>
+
 <template>
-  <div class="empty delayed-fadein-animation" @click="handleClick">
+  <div
+    class="empty delayed-fadein-animation"
+    @click="handleClick"
+  >
     <span class="big_text">{{ text }}</span>
-    <FontAwesomeIcon v-if="isLoggedIn" :icon="faCirclePlus" />
-    <FontAwesomeIcon v-else :icon="faRightFromBracket" />
+    <FontAwesomeIcon
+      v-if="isLoggedIn"
+      :icon="faCirclePlus"
+    />
+    <FontAwesomeIcon
+      v-else
+      :icon="faRightFromBracket"
+    />
   </div>
 </template>
 
diff --git a/frontend/components/notifications/DashboardsTableItemDashboard.vue b/frontend/components/notifications/DashboardsTableItemDashboard.vue
index 779f85216..7f71f8efe 100644
--- a/frontend/components/notifications/DashboardsTableItemDashboard.vue
+++ b/frontend/components/notifications/DashboardsTableItemDashboard.vue
@@ -2,9 +2,9 @@
 import type { DashboardType } from '~/types/dashboard'
 
 interface Props {
-  type: DashboardType,
-  dashboardId: number,
-  dashboardName: string,
+  type: DashboardType
+  dashboardId: number
+  dashboardName: string
 }
 const props = defineProps<Props>()
 
diff --git a/frontend/components/notifications/NotificationsNetworkTable.vue b/frontend/components/notifications/NotificationsNetworkTable.vue
index 7ada51b6b..96fc30133 100644
--- a/frontend/components/notifications/NotificationsNetworkTable.vue
+++ b/frontend/components/notifications/NotificationsNetworkTable.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
 import type { Cursor } from '~/types/datatable'
 
-defineEmits<{(e: 'openDialog'): void }>()
+defineEmits<{ (e: 'openDialog'): void }>()
 
 const { width } = useWindowSize()
 const cursor = ref<Cursor>()
 const pageSize = ref<number>(10)
 const { t: $t } = useTranslation()
 
-const { onSort, setCursor, setPageSize, setSearch, networkNotifications, query, isLoading } = useNotificationsNetworkStore()
-
+const {
+  onSort,
+  setCursor,
+  setPageSize,
+  setSearch,
+  networkNotifications,
+  query,
+  isLoading,
+} = useNotificationsNetworkStore()
 </script>
 
 <template>
@@ -40,7 +47,11 @@ const { onSort, setCursor, setPageSize, setSearch, networkNotifications, query,
             >
               <template #body="slotProps">
                 <div class="icon-wrapper">
-                  <IconNetwork colored :chain-id="slotProps.data.chain_id" class="icon-network" />
+                  <IconNetwork
+                    colored
+                    :chain-id="slotProps.data.chain_id"
+                    class="icon-network"
+                  />
                 </div>
               </template>
             </Column>
@@ -54,7 +65,10 @@ const { onSort, setCursor, setPageSize, setSearch, networkNotifications, query,
                 <BcTableAgeHeader />
               </template>
               <template #body="slotProps">
-                <BcFormatTimePassed :value="slotProps.data.timestamp" type="go-timestamp" />
+                <BcFormatTimePassed
+                  :value="slotProps.data.timestamp"
+                  type="go-timestamp"
+                />
               </template>
             </Column>
             <Column
@@ -65,14 +79,20 @@ const { onSort, setCursor, setPageSize, setSearch, networkNotifications, query,
               :header="$t('notifications.col.notification')"
             >
               <template #body="slotProps">
-                <I18nT 
+                <I18nT
                   :keypath="`notifications.network.event_type.${slotProps.data.event_type}`"
                   scope="global"
                   tag="span"
                 >
                   <template #_link>
-                    <BcFormatValue v-if="slotProps.data.event_type.includes('gas')" :value="slotProps.data.alert_value" />
-                    <BcFormatPercent v-else :percent="Number(slotProps.data.alert_value) * 100" />
+                    <BcFormatValue
+                      v-if="slotProps.data.event_type.includes('gas')"
+                      :value="slotProps.data.alert_value"
+                    />
+                    <BcFormatPercent
+                      v-else
+                      :percent="Number(slotProps.data.alert_value) * 100"
+                    />
                   </template>
                 </I18nT>
               </template>
@@ -86,7 +106,7 @@ const { onSort, setCursor, setPageSize, setSearch, networkNotifications, query,
             <!-- TODO: implement number of subscriptions -->
             <template #bc-table-footer-right>
               <template v-if="width > 1024">
-                {{ $t('notifications.network.footer.subscriptions', { count: 1}) }}
+                {{ $t('notifications.network.footer.subscriptions', { count: 1 }) }}
               </template>
             </template>
           </BcTable>
@@ -130,7 +150,7 @@ $breakpoint-lg: 1024px;
     @include utils.set-all-width(400px);
   }
   @media (max-width: $breakpoint-sm) {
-    @include utils.set-all-width(200px); 
+    @include utils.set-all-width(200px);
   }
 }
 
diff --git a/frontend/components/notifications/management/NotificationsManagementDashboards.vue b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
index 427c31667..3ddc9a93f 100644
--- a/frontend/components/notifications/management/NotificationsManagementDashboards.vue
+++ b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
@@ -1,44 +1,64 @@
-<script lang="ts" setup>import {
-  faTrash,
-  faDesktop,
-  faUser
-} from '@fortawesome/pro-solid-svg-icons'
+<script lang="ts" setup>
+import { faTrash, faDesktop, faUser } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import { getGroupLabel } from '~/utils/dashboard/group'
 import { API_PATH } from '~/types/customFetch'
 import type { ApiPagingResponse, ApiErrorResponse } from '~/types/api/common'
-import type { NotificationSettingsDashboardsTableRow, NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard } from '~/types/api/notifications'
+import type {
+  NotificationSettingsDashboardsTableRow,
+  NotificationSettingsValidatorDashboard,
+  NotificationSettingsAccountDashboard,
+} from '~/types/api/notifications'
 import type { DashboardType } from '~/types/dashboard'
 import { useNotificationsManagementDashboards } from '~/composables/notifications/useNotificationsManagementDashboards'
 import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
-import { NotificationsManagementSubscriptionDialog, NotificationsManagementModalWebhook } from '#components'
+import {
+  NotificationsManagementSubscriptionDialog,
+  NotificationsManagementModalWebhook,
+} from '#components'
 import type { WebhookForm } from '~/components/notifications/management/modal/NotificationsManagementModalWebhook.vue'
 
-type AllOptions = NotificationSettingsValidatorDashboard & NotificationSettingsAccountDashboard
+type AllOptions = NotificationSettingsValidatorDashboard &
+  NotificationSettingsAccountDashboard
 
 interface WrappedRow extends NotificationSettingsDashboardsTableRow {
-  dashboard_type: DashboardType,
-  dashboard_name: string,
-  subscriptions: string[],
+  dashboard_type: DashboardType
+  dashboard_name: string
+  subscriptions: string[]
   identifier: string
 }
 
 interface SettingsWithContext {
-  row: WrappedRow,
+  row: WrappedRow
   settings: Partial<AllOptions>
 }
 
 // #### CONFIGURATION RELATED TO THE SUBSCRIPTION DIALOGS ####
 
-const KeysIndicatingASubscription : Array<keyof AllOptions> = [
-  'is_validator_offline_subscribed', 'group_offline_threshold', 'is_attestations_missed_subscribed', 'is_block_proposal_subscribed',
-  'is_upcoming_block_proposal_subscribed', 'is_sync_subscribed', 'is_withdrawal_processed_subscribed', 'is_slashed_subscribed', 'is_real_time_mode_enabled',
-  'is_incoming_transactions_subscribed', 'is_outgoing_transactions_subscribed', 'is_erc20_token_transfers_subscribed', 'is_erc721_token_transfers_subscribed',
-  'is_erc1155_token_transfers_subscribed', 'is_ignore_spam_transactions_enabled'
+const KeysIndicatingASubscription: Array<keyof AllOptions> = [
+  'is_validator_offline_subscribed',
+  'group_offline_threshold',
+  'is_attestations_missed_subscribed',
+  'is_block_proposal_subscribed',
+  'is_upcoming_block_proposal_subscribed',
+  'is_sync_subscribed',
+  'is_withdrawal_processed_subscribed',
+  'is_slashed_subscribed',
+  'is_real_time_mode_enabled',
+  'is_incoming_transactions_subscribed',
+  'is_outgoing_transactions_subscribed',
+  'is_erc20_token_transfers_subscribed',
+  'is_erc721_token_transfers_subscribed',
+  'is_erc1155_token_transfers_subscribed',
+  'is_ignore_spam_transactions_enabled',
 ]
-const TimeoutForSavingFailures = 2300 // ms. We cannot let the user close the dialog and later interrupt his/her new activities with "we lost your preferences half a minute ago, we hope you remember them and do not mind going back to that dialog"
-const MinimumTimeBetweenAPIcalls = 700 // ms. Any change ends-up saved anyway, so we can prevent useless requests with a delay larger than usual.
+// ms. We cannot let the user close the dialog and later interrupt his/her
+// new activities with "we lost your preferences half a minute ago,
+// we hope you remember them and do not mind going back to that dialog"
+const TimeoutForSavingFailures = 2300
+// ms. Any change ends-up saved anyway, so we can prevent useless requests with a delay larger than usual.
+const MinimumTimeBetweenAPIcalls = 700
 
 // #### END OF CONFIGURATION RELATED TO THE SUBSCRIPTION DIALOGS ####
 
@@ -46,17 +66,35 @@ const { fetch } = useCustomFetch()
 const toast = useBcToast()
 const { t: $t } = useTranslation()
 const dialog = useDialog()
-const { dashboardGroups, query, cursor, pageSize, isLoading, onSort, setCursor, setPageSize, setSearch } = useNotificationsManagementDashboards()
+const {
+  dashboardGroups,
+  query,
+  cursor,
+  pageSize,
+  isLoading,
+  onSort,
+  setCursor,
+  setPageSize,
+  setSearch,
+} = useNotificationsManagementDashboards()
 const { getDashboardLabel } = useUserDashboardStore()
 const { groups } = useValidatorDashboardGroups()
 const { width } = useWindowSize()
 
-const debouncer = useDebounceValue<SettingsWithContext>({} as SettingsWithContext, MinimumTimeBetweenAPIcalls)
-watch(debouncer.value as Ref<SettingsWithContext>, async(value) => {
+const debouncer = useDebounceValue<SettingsWithContext>(
+  {} as SettingsWithContext,
+  MinimumTimeBetweenAPIcalls,
+)
+watch(debouncer.value as Ref<SettingsWithContext>, async (value) => {
   try {
     await saveUserSettings(value)
-  } catch (error) {
-    toast.showError({ summary: $t('notifications.subscriptions.error_title'), group: $t('notifications.subscriptions.error_group'), detail: $t('notifications.subscriptions.error_message') })
+  }
+  catch (error) {
+    toast.showError({
+      summary: $t('notifications.subscriptions.error_title'),
+      group: $t('notifications.subscriptions.error_group'),
+      detail: $t('notifications.subscriptions.error_message'),
+    })
   }
 })
 
@@ -64,7 +102,7 @@ const colsVisible = computed(() => {
   return {
     networks: width.value > 1101,
     webhook: width.value >= 945,
-    subscriptions: width.value >= 725
+    subscriptions: width.value >= 725,
   }
 })
 
@@ -72,7 +110,9 @@ const groupNameLabel = (groupId?: number) => {
   return getGroupLabel($t, groupId, groups.value, 'Σ')
 }
 
-const wrappedDashboardGroups: ComputedRef<ApiPagingResponse<WrappedRow>|undefined> = computed(() => {
+const wrappedDashboardGroups: ComputedRef<
+  ApiPagingResponse<WrappedRow> | undefined
+> = computed(() => {
   if (!dashboardGroups.value) {
     return
   }
@@ -81,21 +121,36 @@ const wrappedDashboardGroups: ComputedRef<ApiPagingResponse<WrappedRow>|undefine
     data: dashboardGroups.value.data.map(d => ({
       ...d,
       dashboard_type: dashboardType(d),
-      dashboard_name: getDashboardLabel(String(d.dashboard_id), dashboardType(d)),
+      dashboard_name: getDashboardLabel(
+        String(d.dashboard_id),
+        dashboardType(d),
+      ),
       subscriptions: subscriptionList(d),
-      identifier: `${dashboardType(d)}-${d.dashboard_id}-${d.group_id}`
-    }))
+      identifier: `${dashboardType(d)}-${d.dashboard_id}-${d.group_id}`,
+    })),
   }
 
-  function dashboardType (row: NotificationSettingsDashboardsTableRow) : DashboardType {
+  function dashboardType(
+    row: NotificationSettingsDashboardsTableRow,
+  ): DashboardType {
     return row.is_account_dashboard ? 'account' : 'validator'
   }
 
-  function subscriptionList (row: NotificationSettingsDashboardsTableRow) : string[] {
+  function subscriptionList(
+    row: NotificationSettingsDashboardsTableRow,
+  ): string[] {
     const result: string[] = []
     for (const key of KeysIndicatingASubscription) {
       if ((row.settings as AllOptions)[key]) {
-        result.push($t('notifications.subscriptions.' + dashboardType(row) + 's.' + key + '.option'))
+        result.push(
+          $t(
+            'notifications.subscriptions.'
+            + dashboardType(row)
+            + 's.'
+            + key
+            + '.option',
+          ),
+        )
       }
     }
     return result
@@ -107,11 +162,14 @@ const onEdit = (col: Dialog, row: WrappedRow) => {
   const dialogProps = {
     dashboardType: row.dashboard_type,
     initialSettings: row.settings,
-    saveUserSettings: (settings: AllOptions) => debouncer.bounce({ row, settings }, true, true)
+    saveUserSettings: (settings: AllOptions) =>
+      debouncer.bounce({ row, settings }, true, true),
   }
   switch (col) {
     case 'subscriptions':
-      dialog.open(NotificationsManagementSubscriptionDialog, { data: dialogProps })
+      dialog.open(NotificationsManagementSubscriptionDialog, {
+        data: dialogProps,
+      })
       break
     case 'webhook':
       dialog.open(NotificationsManagementModalWebhook, {
@@ -120,18 +178,26 @@ const onEdit = (col: Dialog, row: WrappedRow) => {
           is_discord_webhook_enabled: row.settings.is_webhook_discord_enabled,
         },
         emits: {
-          onSave: async (webhookData: WebhookForm, closeCallback: () => void) => {
+          onSave: async (
+            webhookData: WebhookForm,
+            closeCallback: () => void,
+          ) => {
             try {
               await saveUserSettings({
                 row,
-                settings: webhookData
+                settings: webhookData,
               })
               closeCallback()
-            } catch (error) {
-              toast.showError({ summary: $t('notifications.subscriptions.error_title'), group: $t('notifications.subscriptions.error_group'), detail: $t('notifications.subscriptions.error_message') })
             }
-          }
-        }
+            catch (error) {
+              toast.showError({
+                summary: $t('notifications.subscriptions.error_title'),
+                group: $t('notifications.subscriptions.error_group'),
+                detail: $t('notifications.subscriptions.error_message'),
+              })
+            }
+          },
+        },
       })
       break
     case 'networks':
@@ -143,31 +209,41 @@ const onEdit = (col: Dialog, row: WrappedRow) => {
   }
 }
 
-async function saveUserSettings (settingsAndContext: SettingsWithContext) {
-  await fetch<ApiErrorResponse>(API_PATH.SAVE_DASHBOARDS_SETTINGS, {
+async function saveUserSettings(settingsAndContext: SettingsWithContext) {
+  await fetch<ApiErrorResponse>(
+    API_PATH.SAVE_DASHBOARDS_SETTINGS,
+    {
       method: 'PUT',
       signal: AbortSignal.timeout(TimeoutForSavingFailures),
-      body: { ...settingsAndContext.row.settings, ...settingsAndContext.settings }
-    }, {
+      body: {
+        ...settingsAndContext.row.settings,
+        ...settingsAndContext.settings,
+      },
+    },
+    {
       for: settingsAndContext.row.dashboard_type,
       dashboardKey: String(settingsAndContext.row.dashboard_id),
-      groupId: String(settingsAndContext.row.group_id)
-    })
+      groupId: String(settingsAndContext.row.group_id),
+    },
+  )
 }
 
-function getTypeIcon (type: DashboardType) {
+function getTypeIcon(type: DashboardType) {
   if (type === 'validator') {
     return faDesktop
   }
   return faUser
 }
-
 </script>
 
 <template>
   <div>
     <Teleport to="#notifications-management-search-placholder">
-      <BcContentFilter :search-placeholder="$t('notifications.dashboards.search_placeholder')" class="search" @filter-changed="setSearch" />
+      <BcContentFilter
+        :search-placeholder="$t('notifications.dashboards.search_placeholder')"
+        class="search"
+        @filter-changed="setSearch"
+      />
     </Teleport>
 
     <ClientOnly fallback-tag="span">
@@ -193,7 +269,10 @@ function getTypeIcon (type: DashboardType) {
         >
           <template #body="slotProps">
             <span>
-              <FontAwesomeIcon :icon="getTypeIcon(slotProps.data.dashboard_type)" class="type-icon" />
+              <FontAwesomeIcon
+                :icon="getTypeIcon(slotProps.data.dashboard_type)"
+                class="type-icon"
+              />
               {{ slotProps.data.dashboard_name }}
             </span>
           </template>
@@ -255,15 +334,21 @@ function getTypeIcon (type: DashboardType) {
               @on-edit="onEdit('networks', slotProps.data)"
             >
               <template #content>
-                <BcNetworkSelector :readonly-networks="slotProps.data.chain_ids" />
+                <BcNetworkSelector
+                  :readonly-networks="slotProps.data.chain_ids"
+                />
                 &nbsp;
               </template>
             </BcTablePopoutEdit>
           </template>
         </Column>
-        <Column field="action" body-class="action-col" header-class="action-col">
+        <Column
+          field="action"
+          body-class="action-col"
+          header-class="action-col"
+        >
           <template #body="slotProps">
-            <!--TODO: once we have our api check how to identify 'deleted' rows-->
+            <!-- TODO: once we have our api check how to identify 'deleted' rows -->
             <div class="action-row">
               <FontAwesomeIcon
                 :disabled="!slotProps.data.subscriptions?.length ? true : null"
@@ -278,7 +363,7 @@ function getTypeIcon (type: DashboardType) {
           <div class="expansion">
             <div class="info">
               <div class="label">
-                {{ $t('notifications.col.subscriptions') }}
+                {{ $t("notifications.col.subscriptions") }}
               </div>
 
               <BcTablePopoutEdit
@@ -289,7 +374,7 @@ function getTypeIcon (type: DashboardType) {
             </div>
             <div class="info">
               <div class="label">
-                {{ $t('notifications.col.webhook') }}
+                {{ $t("notifications.col.webhook") }}
               </div>
 
               <BcTablePopoutEdit
@@ -300,7 +385,7 @@ function getTypeIcon (type: DashboardType) {
             </div>
             <div class="info">
               <div class="label">
-                {{ $t('notifications.col.networks') }}
+                {{ $t("notifications.col.networks") }}
               </div>
 
               <BcTablePopoutEdit
@@ -310,7 +395,9 @@ function getTypeIcon (type: DashboardType) {
               >
                 <template #content>
                   <div class="newtork-row">
-                    <BcNetworkSelector :readonly-networks="slotProps.data.chain_ids" />
+                    <BcNetworkSelector
+                      :readonly-networks="slotProps.data.chain_ids"
+                    />
                     &nbsp;
                   </div>
                 </template>
@@ -365,7 +452,6 @@ function getTypeIcon (type: DashboardType) {
 }
 
 :deep(.notifications-management-dashboard-table) {
-
   .dashboard-col,
   .group-col {
     @include utils.truncate-text;
diff --git a/frontend/components/notifications/management/NotificationsManagementGeneralTab.vue b/frontend/components/notifications/management/NotificationsManagementGeneralTab.vue
index 01102be7e..35f05358b 100644
--- a/frontend/components/notifications/management/NotificationsManagementGeneralTab.vue
+++ b/frontend/components/notifications/management/NotificationsManagementGeneralTab.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-
 import {
   faArrowUpRightFromSquare,
-  faPaperPlane
+  faPaperPlane,
 } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { API_PATH } from '~/types/customFetch'
@@ -13,20 +12,41 @@ const { t: $t } = useTranslation()
 const { fetch } = useCustomFetch()
 const toast = useBcToast()
 
-const { generalSettings, updateGeneralSettings, pairedDevices } = useNotificationsManagementSettings()
+const { generalSettings, updateGeneralSettings, pairedDevices }
+  = useNotificationsManagementSettings()
 
 const isVisible = ref(false)
 const isEmailToggleOn = ref(false)
 const isPushToggleOn = ref(false)
-const { value: areTestButtonsDisabled, bounce: bounceTestButton, instant: setTestButton } = useDebounceValue<boolean>(false, 5000)
+const {
+  value: areTestButtonsDisabled,
+  bounce: bounceTestButton,
+  instant: setTestButton,
+} = useDebounceValue<boolean>(false, 5000)
 
 const timestampMute = ref<number | undefined>()
 const muteDropdownList = [
-  { value: 1 * 60 * 60, label: $t('notifications.general.mute.hours', { count: 1 }) },
-  { value: 2 * 60 * 60, label: $t('notifications.general.mute.hours', { count: 2 }) },
-  { value: 4 * 60 * 60, label: $t('notifications.general.mute.hours', { count: 4 }) },
-  { value: 8 * 60 * 60, label: $t('notifications.general.mute.hours', { count: 8 }) },
-  { value: Number.MAX_SAFE_INTEGER, label: $t('notifications.general.mute.until_i_turn_on') }]
+  {
+    value: 1 * 60 * 60,
+    label: $t('notifications.general.mute.hours', { count: 1 }),
+  },
+  {
+    value: 2 * 60 * 60,
+    label: $t('notifications.general.mute.hours', { count: 2 }),
+  },
+  {
+    value: 4 * 60 * 60,
+    label: $t('notifications.general.mute.hours', { count: 4 }),
+  },
+  {
+    value: 8 * 60 * 60,
+    label: $t('notifications.general.mute.hours', { count: 8 }),
+  },
+  {
+    value: Number.MAX_SAFE_INTEGER,
+    label: $t('notifications.general.mute.until_i_turn_on'),
+  },
+]
 
 const unmuteNotifications = () => {
   timestampMute.value = 0
@@ -37,20 +57,24 @@ const muteNotifications = (value: number) => {
     timestampMute.value = Number.MAX_SAFE_INTEGER
     return
   }
-  timestampMute.value = (Date.now() / 1000) + value
+  timestampMute.value = Date.now() / 1000 + value
 }
 
 const sendTestNotification = async (type: 'email' | 'push') => {
   setTestButton(true)
   try {
-    await fetch(type === 'email' ? API_PATH.NOTIFICATIONS_TEST_EMAIL : API_PATH.NOTIFICATIONS_TEST_PUSH)
-  } catch (error) {
-    toast.showError(
-      {
-        summary: $t('notifications.general.test_notification_error.toast_title'),
-        group: $t('notifications.general.test_notification_error.toast_group'),
-        detail: $t('notifications.general.test_notification_error.toast_message')
-      })
+    await fetch(
+      type === 'email'
+        ? API_PATH.NOTIFICATIONS_TEST_EMAIL
+        : API_PATH.NOTIFICATIONS_TEST_PUSH,
+    )
+  }
+  catch (error) {
+    toast.showError({
+      summary: $t('notifications.general.test_notification_error.toast_title'),
+      group: $t('notifications.general.test_notification_error.toast_group'),
+      detail: $t('notifications.general.test_notification_error.toast_message'),
+    })
   }
   bounceTestButton(false)
 }
@@ -60,7 +84,10 @@ const pairedDevicesCount = computed(() => pairedDevices.value?.length || 0)
 const buttonStates = computed(() => {
   return {
     isEmailDisabled: areTestButtonsDisabled.value || !isEmailToggleOn.value,
-    isPushDisabled: areTestButtonsDisabled.value || !isPushToggleOn.value || pairedDevicesCount.value === 0
+    isPushDisabled:
+      areTestButtonsDisabled.value
+      || !isPushToggleOn.value
+      || pairedDevicesCount.value === 0,
   }
 })
 
@@ -68,34 +95,54 @@ const openPairdeDevicesModal = () => {
   isVisible.value = true
 }
 
-watch(generalSettings, (newGeneralSettings) => {
-  if (newGeneralSettings) {
-    isEmailToggleOn.value = newGeneralSettings.is_email_notifications_enabled
-    isPushToggleOn.value = newGeneralSettings.is_push_notifications_enabled
-    timestampMute.value = newGeneralSettings.do_not_disturb_timestamp > (Date.now() / 1000) ? newGeneralSettings.do_not_disturb_timestamp : undefined
-  }
-}, { immediate: true })
+watch(
+  generalSettings,
+  (newGeneralSettings) => {
+    if (newGeneralSettings) {
+      isEmailToggleOn.value = newGeneralSettings.is_email_notifications_enabled
+      isPushToggleOn.value = newGeneralSettings.is_push_notifications_enabled
+      timestampMute.value
+        = newGeneralSettings.do_not_disturb_timestamp > Date.now() / 1000
+          ? newGeneralSettings.do_not_disturb_timestamp
+          : undefined
+    }
+  },
+  { immediate: true },
+)
 
-watch([isEmailToggleOn, isPushToggleOn, timestampMute], ([enableEmail, enablePush, muteTs]) => {
-  if (!generalSettings.value) {
-    return
-  }
-  if (generalSettings.value?.is_email_notifications_enabled !== enableEmail || generalSettings.value?.is_push_notifications_enabled !== enablePush || generalSettings.value?.do_not_disturb_timestamp !== muteTs) {
-    updateGeneralSettings({ ...generalSettings.value, is_email_notifications_enabled: enableEmail, is_push_notifications_enabled: enablePush, do_not_disturb_timestamp: muteTs! })
-  }
-})
+watch(
+  [isEmailToggleOn, isPushToggleOn, timestampMute],
+  ([enableEmail, enablePush, muteTs]) => {
+    if (!generalSettings.value) {
+      return
+    }
+    if (
+      generalSettings.value?.is_email_notifications_enabled !== enableEmail
+      || generalSettings.value?.is_push_notifications_enabled !== enablePush
+      || generalSettings.value?.do_not_disturb_timestamp !== muteTs
+    ) {
+      updateGeneralSettings({
+        ...generalSettings.value,
+        is_email_notifications_enabled: enableEmail,
+        is_push_notifications_enabled: enablePush,
+        do_not_disturb_timestamp: muteTs!,
+      })
+    }
+  },
+)
 
 const textMutedUntil = computed(() => {
   if (timestampMute.value) {
     if (timestampMute.value === Number.MAX_SAFE_INTEGER) {
       return $t('notifications.general.mute.until_turned_on')
     }
-    return $t('notifications.general.mute.until', { date: formatTsToAbsolute(timestampMute.value, $t('locales.date'), true) })
+    return $t('notifications.general.mute.until', {
+      date: formatTsToAbsolute(timestampMute.value, $t('locales.date'), true),
+    })
   }
 
   return undefined
 })
-
 </script>
 
 <template>
@@ -103,11 +150,19 @@ const textMutedUntil = computed(() => {
   <div class="container">
     <div class="row divider do-not-disturb">
       <div>
-        <span>{{ $t('notifications.general.do_not_disturb') }}</span>
-        <span class="explanation">{{ $t('notifications.general.mute.all') }}</span>
+        <span>{{ $t("notifications.general.do_not_disturb") }}</span>
+        <span class="explanation">{{
+          $t("notifications.general.mute.all")
+        }}</span>
       </div>
-      <div v-if="generalSettings?.do_not_disturb_timestamp" class="unmute-container">
-        <Button :label="$t('notifications.general.mute.unmute')" @click="unmuteNotifications" />
+      <div
+        v-if="generalSettings?.do_not_disturb_timestamp"
+        class="unmute-container"
+      >
+        <Button
+          :label="$t('notifications.general.mute.unmute')"
+          @click="unmuteNotifications"
+        />
         <div class="muted-until">
           {{ textMutedUntil }}
         </div>
@@ -121,7 +176,7 @@ const textMutedUntil = computed(() => {
         @update:model-value="muteNotifications"
       >
         <template #value>
-          {{ $t('notifications.general.mute.select_duration') }}
+          {{ $t("notifications.general.mute.select_duration") }}
         </template>
         <template #option="slotProps">
           {{ slotProps.label }}
@@ -130,13 +185,13 @@ const textMutedUntil = computed(() => {
     </div>
     <div class="row">
       <div>
-        {{ $t('notifications.general.email_notifications') }}
+        {{ $t("notifications.general.email_notifications") }}
       </div>
       <BcToggle v-model="isEmailToggleOn" />
     </div>
     <div class="row divider">
       <div>
-        {{ $t('notifications.general.push_notifications') }}
+        {{ $t("notifications.general.push_notifications") }}
         <span v-if="pairedDevicesCount > 0">
           ({{ pairedDevicesCount }})
           <FontAwesomeIcon
@@ -146,30 +201,45 @@ const textMutedUntil = computed(() => {
           />
         </span>
       </div>
-      <BcToggle v-if="pairedDevicesCount > 0" v-model="isPushToggleOn" />
+      <BcToggle
+        v-if="pairedDevicesCount > 0"
+        v-model="isPushToggleOn"
+      />
       <div v-else>
-        {{ tOf($t, 'notifications.general.download_app', 0) }}
-        <BcLink to="/mobile" :target="Target.External" class="link">
-          {{ tOf($t, 'notifications.general.download_app', 1) }}
+        {{ tOf($t, "notifications.general.download_app", 0) }}
+        <BcLink
+          to="/mobile"
+          :target="Target.External"
+          class="link"
+        >
+          {{ tOf($t, "notifications.general.download_app", 1) }}
         </BcLink>
-        {{ tOf($t, 'notifications.general.download_app', 2) }}
+        {{ tOf($t, "notifications.general.download_app", 2) }}
       </div>
     </div>
     <div class="row">
       <div>
-        {{ $t('notifications.general.send_test_email') }}
+        {{ $t("notifications.general.send_test_email") }}
       </div>
-      <Button class="button-send" :disabled="buttonStates.isEmailDisabled" @click="sendTestNotification('email')">
-        {{ $t('common.send') }}
+      <Button
+        class="button-send"
+        :disabled="buttonStates.isEmailDisabled"
+        @click="sendTestNotification('email')"
+      >
+        {{ $t("common.send") }}
         <FontAwesomeIcon :icon="faPaperPlane" />
       </Button>
     </div>
     <div class="row">
       <div>
-        {{ $t('notifications.general.send_test_push') }}
+        {{ $t("notifications.general.send_test_push") }}
       </div>
-      <Button class="button-send" :disabled="buttonStates.isPushDisabled" @click="sendTestNotification('push')">
-        {{ $t('common.send') }}
+      <Button
+        class="button-send"
+        :disabled="buttonStates.isPushDisabled"
+        @click="sendTestNotification('push')"
+      >
+        {{ $t("common.send") }}
         <FontAwesomeIcon :icon="faPaperPlane" />
       </Button>
     </div>
diff --git a/frontend/components/notifications/management/NotificationsManagementModal.vue b/frontend/components/notifications/management/NotificationsManagementModal.vue
index 1bb04147f..10af96be5 100644
--- a/frontend/components/notifications/management/NotificationsManagementModal.vue
+++ b/frontend/components/notifications/management/NotificationsManagementModal.vue
@@ -4,7 +4,7 @@ import {
   faGaugeSimpleMax,
   faMonitorWaveform,
   faBolt,
-  faNetworkWired
+  faNetworkWired,
 } from '@fortawesome/pro-solid-svg-icons'
 import { useUseNotificationsManagementSettingsProvider } from '~/composables/notifications/useNotificationsManagementSettingsProvider'
 
@@ -14,9 +14,9 @@ const visible = defineModel<boolean>()
 
 const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
 
-const { refreshSettings, isLoading } = useUseNotificationsManagementSettingsProvider()
+const { refreshSettings, isLoading }
+  = useUseNotificationsManagementSettingsProvider()
 refreshSettings()
-
 </script>
 
 <template>
@@ -26,35 +26,65 @@ refreshSettings()
     class="notifications-management-modal-container"
   >
     <div id="notifications-management-search-placholder" />
-    <TabView lazy class="notifications-management-tab-view">
+    <TabView
+      lazy
+      class="notifications-management-tab-view"
+    >
       <TabPanel>
         <template #header>
-          <BcTabHeader :header="$t('notifications.tabs.general')" :icon="faCog" />
+          <BcTabHeader
+            :header="$t('notifications.tabs.general')"
+            :icon="faCog"
+          />
         </template>
 
-        <BcLoadingSpinner v-if="isLoading" class="spinner" :loading="isLoading" alignment="center" />
+        <BcLoadingSpinner
+          v-if="isLoading"
+          class="spinner"
+          :loading="isLoading"
+          alignment="center"
+        />
         <NotificationsManagementGeneralTab v-else />
       </TabPanel>
       <TabPanel :disabled="!showInDevelopment">
         <template #header>
-          <BcTabHeader :header="$t('notifications.tabs.dashboards')" :icon="faGaugeSimpleMax" />
+          <BcTabHeader
+            :header="$t('notifications.tabs.dashboards')"
+            :icon="faGaugeSimpleMax"
+          />
         </template>
         <NotificationsManagementDashboards />
       </TabPanel>
       <TabPanel :disabled="!showInDevelopment">
         <template #header>
-          <BcTabHeader :header="$t('notifications.tabs.machines')" :icon="faMonitorWaveform" />
+          <BcTabHeader
+            :header="$t('notifications.tabs.machines')"
+            :icon="faMonitorWaveform"
+          />
         </template>
-        <BcLoadingSpinner v-if="isLoading" class="spinner" :loading="isLoading" alignment="center" />
+        <BcLoadingSpinner
+          v-if="isLoading"
+          class="spinner"
+          :loading="isLoading"
+          alignment="center"
+        />
         <div v-else>
           Machines coming soon!
         </div>
       </TabPanel>
       <TabPanel :disabled="!showInDevelopment">
         <template #header>
-          <BcTabHeader :header="$t('notifications.tabs.clients')" :icon="faBolt" />
+          <BcTabHeader
+            :header="$t('notifications.tabs.clients')"
+            :icon="faBolt"
+          />
         </template>
-        <BcLoadingSpinner v-if="isLoading" class="spinner" :loading="isLoading" alignment="center" />
+        <BcLoadingSpinner
+          v-if="isLoading"
+          class="spinner"
+          :loading="isLoading"
+          alignment="center"
+        />
         <div v-else>
           Clients coming soon!
         </div>
@@ -67,22 +97,39 @@ refreshSettings()
             </template>
           </BcTabHeader>
         </template>
-        <BcLoadingSpinner v-if="isLoading" class="spinner" :loading="isLoading" alignment="center" />
+        <BcLoadingSpinner
+          v-if="isLoading"
+          class="spinner"
+          :loading="isLoading"
+          alignment="center"
+        />
         <div v-else>
           Rocket Pool coming soon!
         </div>
       </TabPanel>
       <TabPanel :disabled="!showInDevelopment">
         <template #header>
-          <BcTabHeader :header="$t('notifications.tabs.network')" :icon="faNetworkWired" />
+          <BcTabHeader
+            :header="$t('notifications.tabs.network')"
+            :icon="faNetworkWired"
+          />
         </template>
-        <BcLoadingSpinner v-if="isLoading" class="spinner" :loading="isLoading" alignment="center" />
+        <BcLoadingSpinner
+          v-if="isLoading"
+          class="spinner"
+          :loading="isLoading"
+          alignment="center"
+        />
         <div v-else>
           Network coming soon!
         </div>
       </TabPanel>
     </TabView>
-    <Button class="done-button" :label="$t('navigation.done')" @click="visible = false" />
+    <Button
+      class="done-button"
+      :label="$t('navigation.done')"
+      @click="visible = false"
+    />
   </BcDialog>
 </template>
 
@@ -108,7 +155,7 @@ refreshSettings()
   margin-right: 40px;
 }
 
-:global(.notifications-management-tab-view >.p-tabview-panels) {
+:global(.notifications-management-tab-view > .p-tabview-panels) {
   min-height: 652px;
 }
 
diff --git a/frontend/components/notifications/management/NotificationsManagementPairedDeviceModalContent.vue b/frontend/components/notifications/management/NotificationsManagementPairedDeviceModalContent.vue
index bfb887764..8fda90cbf 100644
--- a/frontend/components/notifications/management/NotificationsManagementPairedDeviceModalContent.vue
+++ b/frontend/components/notifications/management/NotificationsManagementPairedDeviceModalContent.vue
@@ -12,35 +12,45 @@ const props = defineProps<Props>()
 
 const notificationsToggle = ref(false)
 const accountAccessToggle = ref(false)
-
 </script>
 
 <template>
   <div class="row-container">
-    <div class="device-row ">
+    <div class="device-row">
       <div class="device">
-        {{ $t('notifications.general.paired_devices.device') }}: {{ props.device.name || $t('notifications.general.paired_devices.unknown') }}
+        {{ $t("notifications.general.paired_devices.device") }}:
+        {{
+          props.device.name
+            || $t("notifications.general.paired_devices.unknown")
+        }}
       </div>
-      <Button data-secondary class="p-button-icon-only">
+      <Button
+        data-secondary
+        class="p-button-icon-only"
+      >
         <FontAwesomeIcon :icon="faTrash" />
       </Button>
     </div>
     <div class="toggle-row">
       <BcToggle v-model="notificationsToggle" />
-      {{ $t('notifications.general.paired_devices.mobile_notifications') }}
+      {{ $t("notifications.general.paired_devices.mobile_notifications") }}
     </div>
     <div class="toggle-row">
       <BcToggle v-model="accountAccessToggle" />
-      {{ $t('notifications.general.paired_devices.grant_account_access') }}
+      {{ $t("notifications.general.paired_devices.grant_account_access") }}
     </div>
     <div class="paired-row">
-      {{ $t('notifications.general.paired_devices.paired_date', {date: formatGoTimestamp(device.paired_timestamp)}) }}
+      {{
+        $t("notifications.general.paired_devices.paired_date", {
+          date: formatGoTimestamp(device.paired_timestamp),
+        })
+      }}
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/fonts.scss";
 
 .row-container {
   display: flex;
diff --git a/frontend/components/notifications/management/NotificationsManagementPairedDevicesModal.vue b/frontend/components/notifications/management/NotificationsManagementPairedDevicesModal.vue
index 7c5df284d..2b8e2b0d5 100644
--- a/frontend/components/notifications/management/NotificationsManagementPairedDevicesModal.vue
+++ b/frontend/components/notifications/management/NotificationsManagementPairedDevicesModal.vue
@@ -5,7 +5,6 @@ const { t: $t } = useTranslation()
 
 const visible = defineModel<boolean>()
 const { pairedDevices } = useNotificationsManagementSettings()
-
 </script>
 
 <template>
@@ -14,13 +13,20 @@ const { pairedDevices } = useNotificationsManagementSettings()
     class="paired-devices-modal-container"
   >
     <div class="container">
-      <h1>{{ $t('notifications.general.paired_devices.title') }}</h1>
+      <h1>{{ $t("notifications.general.paired_devices.title") }}</h1>
       <div class="paired-devices">
-        <NotificationsManagementPairedDeviceModalContent v-for="device in pairedDevices" :key="device.id" :device="device" />
+        <NotificationsManagementPairedDeviceModalContent
+          v-for="device in pairedDevices"
+          :key="device.id"
+          :device="device"
+        />
       </div>
     </div>
     <div class="button-row">
-      <Button :label="$t('navigation.done')" @click="visible = false" />
+      <Button
+        :label="$t('navigation.done')"
+        @click="visible = false"
+      />
     </div>
   </BcDialog>
 </template>
@@ -42,7 +48,7 @@ const { pairedDevices } = useNotificationsManagementSettings()
     flex-direction: column;
     gap: var(--padding-large);
 
-    >:not(:last-child) {
+    > :not(:last-child) {
       padding-bottom: var(--padding-large);
       border-bottom: 1px solid var(--container-border-color);
     }
diff --git a/frontend/components/notifications/management/SubscriptionDialog.vue b/frontend/components/notifications/management/SubscriptionDialog.vue
index c0200916e..162b8fc05 100644
--- a/frontend/components/notifications/management/SubscriptionDialog.vue
+++ b/frontend/components/notifications/management/SubscriptionDialog.vue
@@ -1,17 +1,26 @@
 <script setup lang="ts">
 import { warn } from 'vue'
-import type { InternalEntry, APIentry } from '~/types/notifications/subscriptionModal'
-import type { NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard } from '~/types/api/notifications'
+import type {
+  InternalEntry,
+  APIentry,
+} from '~/types/notifications/subscriptionModal'
+import type {
+  NotificationSettingsValidatorDashboard,
+  NotificationSettingsAccountDashboard,
+} from '~/types/api/notifications'
 import { ChainFamily } from '~/types/network'
 import type { DashboardType } from '~/types/dashboard'
 
-type AllOptions = NotificationSettingsValidatorDashboard & NotificationSettingsAccountDashboard
-type DefinedAPIentry = Exclude<APIentry, null|undefined>
+type AllOptions = NotificationSettingsValidatorDashboard &
+  NotificationSettingsAccountDashboard
+type DefinedAPIentry = Exclude<APIentry, null | undefined>
 
 interface Props {
-  dashboardType: DashboardType,
-  initialSettings: AllOptions,
-  saveUserSettings: (settings: Record<keyof AllOptions, DefinedAPIentry>) => void
+  dashboardType: DashboardType
+  initialSettings: AllOptions
+  saveUserSettings: (
+    settings: Record<keyof AllOptions, DefinedAPIentry>,
+  ) => void
 }
 
 // #### CONFIGURATION OF THE DIALOGS ####
@@ -19,26 +28,58 @@ interface Props {
 const DefaultValues = new Map<keyof AllOptions, InternalEntry>([
   ['group_offline_threshold', { type: 'percent', check: false, num: 10 }],
   ['is_real_time_mode_enabled', { type: 'binary', check: false }],
-  ['erc20_token_transfers_value_threshold', { type: 'amount', check: false, num: NaN }], // NaN will leave the input field empty (the user sees the placeholder)
-  ['subscribed_chain_ids', { type: 'networks', networks: [] }]
+  [
+    'erc20_token_transfers_value_threshold',
+    { type: 'amount', check: false, num: NaN },
+  ], // NaN will leave the input field empty (the user sees the placeholder)
+  ['subscribed_chain_ids', { type: 'networks', networks: [] }],
 ])
-const orderOfTheRowsInValidatorModal: Array<keyof NotificationSettingsValidatorDashboard | 'ALL'> = [
-  'is_validator_offline_subscribed', 'group_offline_threshold', 'is_attestations_missed_subscribed', 'is_block_proposal_subscribed', 'is_upcoming_block_proposal_subscribed',
-  'is_sync_subscribed', 'is_withdrawal_processed_subscribed', 'is_slashed_subscribed', 'is_real_time_mode_enabled', 'ALL'
+const orderOfTheRowsInValidatorModal: Array<
+  keyof NotificationSettingsValidatorDashboard | 'ALL'
+> = [
+  'is_validator_offline_subscribed',
+  'group_offline_threshold',
+  'is_attestations_missed_subscribed',
+  'is_block_proposal_subscribed',
+  'is_upcoming_block_proposal_subscribed',
+  'is_sync_subscribed',
+  'is_withdrawal_processed_subscribed',
+  'is_slashed_subscribed',
+  'is_real_time_mode_enabled',
+  'ALL',
 ]
-const orderOfTheRowsInAccountModal: Array<keyof NotificationSettingsAccountDashboard | 'ALL'> = [
-  'is_incoming_transactions_subscribed', 'is_outgoing_transactions_subscribed', 'erc20_token_transfers_value_threshold', 'is_erc721_token_transfers_subscribed',
-  'is_erc1155_token_transfers_subscribed', 'ALL', 'subscribed_chain_ids', 'is_ignore_spam_transactions_enabled'
+const orderOfTheRowsInAccountModal: Array<
+  keyof NotificationSettingsAccountDashboard | 'ALL'
+> = [
+  'is_incoming_transactions_subscribed',
+  'is_outgoing_transactions_subscribed',
+  'erc20_token_transfers_value_threshold',
+  'is_erc721_token_transfers_subscribed',
+  'is_erc1155_token_transfers_subscribed',
+  'ALL',
+  'subscribed_chain_ids',
+  'is_ignore_spam_transactions_enabled',
 ]
-const RowsWhoseCheckBoxIsInASeparateField = new Map<keyof AllOptions, keyof AllOptions>([
-  ['erc20_token_transfers_value_threshold', 'is_erc20_token_transfers_subscribed']
+const RowsWhoseCheckBoxIsInASeparateField = new Map<
+  keyof AllOptions,
+  keyof AllOptions
+>([
+  [
+    'erc20_token_transfers_value_threshold',
+    'is_erc20_token_transfers_subscribed',
+  ],
 ])
-const OptionsOutsideTheScopeOfCheckboxall: Array<keyof(AllOptions)> =
-  ['subscribed_chain_ids', 'is_ignore_spam_transactions_enabled'] // options that are not in the group of the all-checkbox
-const OptionsNeedingPremium: Array<keyof AllOptions> =
-  ['group_offline_threshold', 'is_real_time_mode_enabled']
-const RowsThatExpectAPercentage: Array<keyof AllOptions> =
-  ['group_offline_threshold']
+const OptionsOutsideTheScopeOfCheckboxall: Array<keyof AllOptions> = [
+  'subscribed_chain_ids',
+  'is_ignore_spam_transactions_enabled',
+] // options that are not in the group of the all-checkbox
+const OptionsNeedingPremium: Array<keyof AllOptions> = [
+  'group_offline_threshold',
+  'is_real_time_mode_enabled',
+]
+const RowsThatExpectAPercentage: Array<keyof AllOptions> = [
+  'group_offline_threshold',
+]
 
 // #### END OF CONFIGURATION OF THE DIALOGS ####
 
@@ -50,131 +91,172 @@ const { networkInfo } = useNetworkStore()
 const { user } = useUserStore()
 
 const tPath = ref('')
-let orderOfTheRows: typeof orderOfTheRowsInValidatorModal | typeof orderOfTheRowsInAccountModal = []
+let orderOfTheRows:
+  | typeof orderOfTheRowsInValidatorModal
+  | typeof orderOfTheRowsInAccountModal = []
 let originalSettings: AllOptions
 const modifiableOptions = ref({} as ModifiableOptions)
 const checkboxAll = ref<InternalEntry>({ type: 'binary', check: false })
 
-let dataNonce = 0 // used by the watcher of `modifiableOptions` to know when it is unnecessary to send changes to the API (it doesn't send if the nonce is 0)
+// used by the watcher of `modifiableOptions` to know when it is unnecessary
+// to send changes to the API (it doesn't send if the nonce is 0)
+let dataNonce = 0
 
-const getOptionType = (key: keyof AllOptions) => Array.isArray(originalSettings[key]) ? 'networks' : (typeof originalSettings[key] === 'boolean' ? 'binary' : (RowsThatExpectAPercentage.includes(key) ? 'percent' : 'amount'))
+const getOptionType = (key: keyof AllOptions) =>
+  Array.isArray(originalSettings[key])
+    ? 'networks'
+    : typeof originalSettings[key] === 'boolean'
+      ? 'binary'
+      : RowsThatExpectAPercentage.includes(key)
+        ? 'percent'
+        : 'amount'
 const isOptionValueKnownInDB = (key: keyof AllOptions) =>
-  originalSettings[key] !== undefined && originalSettings[key] !== null &&
-  (typeof originalSettings[key] !== 'number' || originalSettings[key] as number > 0 || isOptionActivatedInDB(key)) &&
-  (!Array.isArray(originalSettings[key]) || !!(originalSettings[key] as Array<any>).length)
-const isOptionActivatedInDB = (key: keyof AllOptions) => RowsWhoseCheckBoxIsInASeparateField.has(key) ? !!originalSettings[RowsWhoseCheckBoxIsInASeparateField.get(key)!] : !!originalSettings[key]
-const isOptionAvailable = (key: keyof AllOptions) => user.value?.premium_perks.ad_free || !OptionsNeedingPremium.includes(key)
+  originalSettings[key] !== undefined
+  && originalSettings[key] !== null
+  && (typeof originalSettings[key] !== 'number'
+  || (originalSettings[key] as number) > 0
+  || isOptionActivatedInDB(key))
+  && (!Array.isArray(originalSettings[key])
+  || !!(originalSettings[key] as Array<any>).length)
+const isOptionActivatedInDB = (key: keyof AllOptions) =>
+  RowsWhoseCheckBoxIsInASeparateField.has(key)
+    ? !!originalSettings[RowsWhoseCheckBoxIsInASeparateField.get(key)!]
+    : !!originalSettings[key]
+const isOptionAvailable = (key: keyof AllOptions) =>
+  user.value?.premium_perks.ad_free || !OptionsNeedingPremium.includes(key)
 
-watch(props, (props) => {
-  if (!props || !props.initialSettings) {
-    return
-  }
-  originalSettings = toRaw(props.initialSettings)
-  switch (props.dashboardType) {
-    case 'validator' :
-      tPath.value = 'notifications.subscriptions.validators.'
-      orderOfTheRows = orderOfTheRowsInValidatorModal
-      break
-    case 'account' :
-      tPath.value = 'notifications.subscriptions.accounts.'
-      orderOfTheRows = orderOfTheRowsInAccountModal
-      break
-    default :
+watch(
+  props,
+  (props) => {
+    if (!props || !props.initialSettings) {
       return
-  }
-  modifiableOptions.value = {} as ModifiableOptions
-  dataNonce = 0
-  for (const key of orderOfTheRows) {
-    if (key === 'ALL') { continue }
-    modifiableOptions.value[key] = convertAPIentryToInternalEntry(key)
-  }
-}, { immediate: true })
+    }
+    originalSettings = toRaw(props.initialSettings)
+    switch (props.dashboardType) {
+      case 'validator':
+        tPath.value = 'notifications.subscriptions.validators.'
+        orderOfTheRows = orderOfTheRowsInValidatorModal
+        break
+      case 'account':
+        tPath.value = 'notifications.subscriptions.accounts.'
+        orderOfTheRows = orderOfTheRowsInAccountModal
+        break
+      default:
+        return
+    }
+    modifiableOptions.value = {} as ModifiableOptions
+    dataNonce = 0
+    for (const key of orderOfTheRows) {
+      if (key === 'ALL') continue
+      modifiableOptions.value[key] = convertAPIentryToInternalEntry(key)
+    }
+  },
+  { immediate: true },
+)
 
-function checkboxAllHasBeenClicked (checked: boolean) : void {
+function checkboxAllHasBeenClicked(checked: boolean): void {
   for (const k of Object.keys(modifiableOptions.value)) {
     const key = k as keyof ModifiableOptions
-    if (isOptionAvailable(key) && !OptionsOutsideTheScopeOfCheckboxall.includes(key)) {
+    if (
+      isOptionAvailable(key)
+      && !OptionsOutsideTheScopeOfCheckboxall.includes(key)
+    ) {
       modifiableOptions.value[key].check = checked
     }
   }
 }
 
-watch(modifiableOptions, (options) => {
-  checkboxAll.value.check = true
-  for (const k in options) {
-    const key = k as keyof ModifiableOptions
-    if (isOptionAvailable(key) && !OptionsOutsideTheScopeOfCheckboxall.includes(key)) {
-      checkboxAll.value.check &&= options[key].check
+watch(
+  modifiableOptions,
+  (options) => {
+    checkboxAll.value.check = true
+    for (const k in options) {
+      const key = k as keyof ModifiableOptions
+      if (
+        isOptionAvailable(key)
+        && !OptionsOutsideTheScopeOfCheckboxall.includes(key)
+      ) {
+        checkboxAll.value.check &&= options[key].check
+      }
     }
-  }
-  if (dataNonce > 0) {
-    sendUserPreferencesToAPI()
-  }
-  dataNonce++
-}, { immediate: true, deep: true })
+    if (dataNonce > 0) {
+      sendUserPreferencesToAPI()
+    }
+    dataNonce++
+  },
+  { immediate: true, deep: true },
+)
 
 /** reads data that our parent received from the API and converts it to our internal format */
-function convertAPIentryToInternalEntry (apiKey: keyof AllOptions) : InternalEntry {
+function convertAPIentryToInternalEntry(
+  apiKey: keyof AllOptions,
+): InternalEntry {
   const srcValue = originalSettings[apiKey]
   const type = getOptionType(apiKey)
   if (!isOptionValueKnownInDB(apiKey)) {
     if (DefaultValues.has(apiKey)) {
       return { ...DefaultValues.get(apiKey)! }
-    } else {
-      warn('A value for entry `' + apiKey + '` is not in the the database and the front-end does not have a default value for it.')
+    }
+    else {
+      warn(
+        'A value for entry `'
+        + apiKey
+        + '` is not in the the database and the front-end does not have a default value for it.',
+      )
       return {} as InternalEntry
     }
   }
   switch (type) {
-    case 'networks' :
+    case 'networks':
       return {
         type,
-        networks: [...srcValue as number[]]
+        networks: [...(srcValue as number[])],
       }
-    case 'binary' :
+    case 'binary':
       return {
         type,
-        check: srcValue as boolean
+        check: srcValue as boolean,
       }
-    case 'percent' :
+    case 'percent':
       return {
         type,
         check: isOptionActivatedInDB(apiKey),
-        num: srcValue as number * 100
+        num: (srcValue as number) * 100,
       }
-    case 'amount' :
+    case 'amount':
       return {
         type,
         check: isOptionActivatedInDB(apiKey),
-        num: srcValue as number
+        num: srcValue as number,
       }
   }
 }
 
 /** converts our internal data to the format understood by the API and sends it */
-function sendUserPreferencesToAPI () {
+function sendUserPreferencesToAPI() {
   // conversion
   const output = {} as Record<keyof AllOptions, DefinedAPIentry>
   for (const k in modifiableOptions.value) {
     const key = k as keyof ModifiableOptions
     const value = toRaw(modifiableOptions.value[key])
     switch (value.type) {
-      case 'binary' :
+      case 'binary':
         output[key] = value.check!
         break
-      case 'percent' :
-      case 'amount' : {
-        const num = (value.type === 'percent') ? value.num! / 100 : value.num!
+      case 'percent':
+      case 'amount': {
+        const num = value.type === 'percent' ? value.num! / 100 : value.num!
         const activate = !isNaN(num) && value.check!
         if (RowsWhoseCheckBoxIsInASeparateField.has(key)) {
           output[key] = !isNaN(num) ? num : 0
           output[RowsWhoseCheckBoxIsInASeparateField.get(key)!] = activate
-        } else {
+        }
+        else {
           output[key] = activate ? num : 0
         }
         break
       }
-      case 'networks' :
+      case 'networks':
         output[key] = value.networks!
         break
     }
@@ -183,36 +265,59 @@ function sendUserPreferencesToAPI () {
   props.value?.saveUserSettings(output)
 }
 
-function closeDialog () : void {
+function closeDialog(): void {
   dialogRef?.value.close()
 }
-
 </script>
 
 <template>
-  <div v-if="props && tPath" class="content">
+  <div
+    v-if="props && tPath"
+    class="content"
+  >
     <div class="title">
-      {{ t('notifications.subscriptions.dialog_title') }}
+      {{ t("notifications.subscriptions.dialog_title") }}
     </div>
 
-    <div v-if="t(tPath+'explanation')" class="explanation">
-      {{ t(tPath+'explanation', (networkInfo.family === ChainFamily.Gnosis) ? 5 : 20) }}
+    <div
+      v-if="t(tPath + 'explanation')"
+      class="explanation"
+    >
+      {{
+        t(
+          tPath + "explanation",
+          networkInfo.family === ChainFamily.Gnosis ? 5 : 20,
+        )
+      }}
     </div>
 
-    <div v-for="row of orderOfTheRows" :key="row" class="row-container">
+    <div
+      v-for="row of orderOfTheRows"
+      :key="row"
+      class="row-container"
+    >
       <NotificationsManagementSubscriptionRow
         v-if="row != 'ALL'"
         v-model="modifiableOptions[row]"
-        :t-path="tPath+row"
+        :t-path="tPath + row"
         :lacks-premium-subscription="!isOptionAvailable(row)"
-        :value-in-text="(row == 'is_attestations_missed_subscribed') ? Math.round(networkInfo.secondsPerSlot*networkInfo.slotsPerEpoch/6)/10 : undefined"
+        :value-in-text="
+          row == 'is_attestations_missed_subscribed'
+            ? Math.round(
+              (networkInfo.secondsPerSlot * networkInfo.slotsPerEpoch) / 6,
+            ) / 10
+            : undefined
+        "
         class="row"
       />
-      <div v-if="row == 'ALL'" class="separation" />
+      <div
+        v-if="row == 'ALL'"
+        class="separation"
+      />
       <NotificationsManagementSubscriptionRow
         v-if="row == 'ALL'"
         v-model="checkboxAll"
-        :t-path="tPath+'all'"
+        :t-path="tPath + 'all'"
         :lacks-premium-subscription="false"
         class="row"
         @checkbox-click="checkboxAllHasBeenClicked"
@@ -220,13 +325,17 @@ function closeDialog () : void {
     </div>
 
     <div class="footer">
-      <Button type="button" :label="t('notifications.subscriptions.button')" @click="closeDialog" />
+      <Button
+        type="button"
+        :label="t('notifications.subscriptions.button')"
+        @click="closeDialog"
+      />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/fonts.scss";
 
 .content {
   display: flex;
@@ -241,7 +350,7 @@ function closeDialog () : void {
   .explanation {
     margin-bottom: var(--padding);
     @include fonts.small_text;
-    color: var(--text-color-discreet)
+    color: var(--text-color-discreet);
   }
 
   .row-container {
diff --git a/frontend/components/notifications/management/SubscriptionRow.vue b/frontend/components/notifications/management/SubscriptionRow.vue
index 4e6ece54f..7aaeff725 100644
--- a/frontend/components/notifications/management/SubscriptionRow.vue
+++ b/frontend/components/notifications/management/SubscriptionRow.vue
@@ -4,12 +4,14 @@ import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import type { InternalEntry } from '~/types/notifications/subscriptionModal'
 
 const props = defineProps<{
-  tPath: string,
+  tPath: string
   lacksPremiumSubscription: boolean
   valueInText?: number
 }>()
 
-const emitEvent = defineEmits<{(e: 'checkboxClick', checked: boolean) : void}>()
+const emitEvent = defineEmits<{
+  (e: 'checkboxClick', checked: boolean): void
+}>()
 
 const { t } = useTranslation()
 
@@ -19,18 +21,26 @@ const tooltipLines = computed(() => {
   let options
   if (props.valueInText !== undefined) {
     options = { plural: props.valueInText }
-  } else
-    if (Array.isArray(parentVmodel.value)) {
-      options = { plural: parentVmodel.value.length, list: parentVmodel.value.join(', ') }
-    } else {
-      let plural: number
-      if (parentVmodel.value.type === 'amount' || parentVmodel.value.type === 'percent') {
-        plural = isNaN(parentVmodel.value.num!) ? 0 : parentVmodel.value.num!
-      } else {
-        plural = parentVmodel.value ? 2 : 1
-      }
-      options = { plural }
+  }
+  else if (Array.isArray(parentVmodel.value)) {
+    options = {
+      plural: parentVmodel.value.length,
+      list: parentVmodel.value.join(', '),
+    }
+  }
+  else {
+    let plural: number
+    if (
+      parentVmodel.value.type === 'amount'
+      || parentVmodel.value.type === 'percent'
+    ) {
+      plural = isNaN(parentVmodel.value.num!) ? 0 : parentVmodel.value.num!
+    }
+    else {
+      plural = parentVmodel.value ? 2 : 1
     }
+    options = { plural }
+  }
   return tAll(t, props.tPath + '.hint', options)
 })
 
@@ -39,13 +49,25 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
 
 <template>
   <div class="option-row">
-    <span class="caption" :class="deactivationClass">
-      {{ t(tPath+'.option') }}
+    <span
+      class="caption"
+      :class="deactivationClass"
+    >
+      {{ t(tPath + ".option") }}
     </span>
-    <BcTooltip v-if="tooltipLines[0]" :fit-content="true">
-      <FontAwesomeIcon :icon="faInfoCircle" class="info" />
+    <BcTooltip
+      v-if="tooltipLines[0]"
+      :fit-content="true"
+    >
+      <FontAwesomeIcon
+        :icon="faInfoCircle"
+        class="info"
+      />
       <template #tooltip>
-        <div v-if="tPath.includes('is_validator_offline_subscribed')" class="tt-content">
+        <div
+          v-if="tPath.includes('is_validator_offline_subscribed')"
+          class="tt-content"
+        >
           {{ tooltipLines[0] }}
           <ul>
             <li>{{ tooltipLines[1] }}</li>
@@ -53,7 +75,10 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
             <li>{{ tooltipLines[3] }}</li>
           </ul>
         </div>
-        <div v-else-if="tPath.includes('group_offline_threshold')" class="tt-content">
+        <div
+          v-else-if="tPath.includes('group_offline_threshold')"
+          class="tt-content"
+        >
           {{ tooltipLines[0] }}
           <ul>
             <li>{{ tooltipLines[1] }}</li>
@@ -63,32 +88,50 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
           </ul>
           <b>{{ tooltipLines[5] }}</b> {{ tooltipLines[6] }}
         </div>
-        <div v-else-if="tPath.includes('is_ignore_spam_transactions_enabled')" class="tt-content">
+        <div
+          v-else-if="tPath.includes('is_ignore_spam_transactions_enabled')"
+          class="tt-content"
+        >
           {{ tooltipLines[0] }}
           <b>{{ tooltipLines[1] }}</b>
           {{ tooltipLines[2] }}
           <b>{{ tooltipLines[3] }}</b>{{ tooltipLines[4] }}
         </div>
-        <div v-else class="tt-content">
+        <div
+          v-else
+          class="tt-content"
+        >
           {{ tooltipLines[0] }}
         </div>
       </template>
     </BcTooltip>
-    <BcPremiumGem v-if="lacksPremiumSubscription" class="gem" />
-    <div v-if="parentVmodel.type != 'networks'" class="right">
-      <div v-if="parentVmodel.type == 'amount' || parentVmodel.type == 'percent'" class="input">
+    <BcPremiumGem
+      v-if="lacksPremiumSubscription"
+      class="gem"
+    />
+    <div
+      v-if="parentVmodel.type != 'networks'"
+      class="right"
+    >
+      <div
+        v-if="parentVmodel.type == 'amount' || parentVmodel.type == 'percent'"
+        class="input"
+      >
         <BcInputNumber
           v-if="parentVmodel.num !== undefined"
           v-model="parentVmodel.num"
-          :min="(parentVmodel.type === 'amount') ? 0 : 1"
-          :max="(parentVmodel.type === 'amount') ? 2**32 : 100"
-          :max-fraction-digits="(parentVmodel.type === 'amount') ? 2 : 1"
+          :min="parentVmodel.type === 'amount' ? 0 : 1"
+          :max="parentVmodel.type === 'amount' ? 2 ** 32 : 100"
+          :max-fraction-digits="parentVmodel.type === 'amount' ? 2 : 1"
           :placeholder="t(tPath + '.placeholder')"
-          :class="[deactivationClass,parentVmodel.type]"
+          :class="[deactivationClass, parentVmodel.type]"
         />
         &nbsp;
       </div>
-      <span v-if="parentVmodel.type == 'percent'" :class="deactivationClass">%</span>
+      <span
+        v-if="parentVmodel.type == 'percent'"
+        :class="deactivationClass"
+      >%</span>
       <Checkbox
         v-if="parentVmodel.check !== undefined"
         v-model="parentVmodel.check"
@@ -98,8 +141,15 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
         @click="emitEvent('checkboxClick', !parentVmodel.check)"
       />
     </div>
-    <div v-else class="right">
-      <BcNetworkSelector v-if="parentVmodel.networks !== undefined" v-model="parentVmodel.networks" :class="deactivationClass" />
+    <div
+      v-else
+      class="right"
+    >
+      <BcNetworkSelector
+        v-if="parentVmodel.networks !== undefined"
+        v-model="parentVmodel.networks"
+        :class="deactivationClass"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue b/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue
index 56b04d072..6e92de4e3 100644
--- a/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue
+++ b/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue
@@ -1,40 +1,41 @@
 <script lang="ts" setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faPaperPlane
-} from '@fortawesome/pro-solid-svg-icons'
-import { useForm } from 'vee-validate';
-import { API_PATH } from '~/types/customFetch';
+import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons'
+import { useForm } from 'vee-validate'
 import { warn } from 'vue'
+import { API_PATH } from '~/types/customFetch'
 
 export type WebhookForm = {
-  webhook_url: string,
-  is_discord_webhook_enabled: boolean,
+  webhook_url: string
+  is_discord_webhook_enabled: boolean
 }
 const { props, close } = useBcDialog<WebhookForm>()
 
 const { t: $t } = useTranslation()
 
 const validationSchema = createSchemaObject({
-    webhook_url: validation.url($t('validation.url.invalid')),
-    is_discord_webhook_enabled: validation.boolean(),
+  webhook_url: validation.url($t('validation.url.invalid')),
+  is_discord_webhook_enabled: validation.boolean(),
 })
 
-const { defineField, errors, handleSubmit, setFieldError, meta, values} = useForm({
-  validationSchema,
-  initialValues: {
-    webhook_url: props.value?.webhook_url || '',
-    is_discord_webhook_enabled: props.value?.is_discord_webhook_enabled || false,
-  }
-})
+const { defineField, errors, handleSubmit, setFieldError, meta, values }
+  = useForm({
+    validationSchema,
+    initialValues: {
+      webhook_url: props.value?.webhook_url || '',
+      is_discord_webhook_enabled:
+        props.value?.is_discord_webhook_enabled || false,
+    },
+  })
 
 const [webhook_url, webhook_url_attrs] = defineField('webhook_url', {
   validateOnModelUpdate: false,
 })
 
-const [is_discord_webhook_enabled, is_discord_webhook_enabled_attrs] = defineField('is_discord_webhook_enabled', {
-  validateOnModelUpdate: false,
-})
+const [is_discord_webhook_enabled, is_discord_webhook_enabled_attrs]
+  = defineField('is_discord_webhook_enabled', {
+    validateOnModelUpdate: false,
+  })
 
 const isFormDirty = computed(() => meta.value.dirty)
 const isFormValid = computed(() => meta.value.valid)
@@ -42,53 +43,59 @@ const isFormValid = computed(() => meta.value.valid)
 const toast = useBcToast()
 const { fetch } = useCustomFetch()
 const handleTestNotification = async () => {
-  // 1. could not be implemented as a custom validation rule, 
+  // 1. could not be implemented as a custom validation rule,
   // as they are always triggerd onMounted (at cast time)
-  if(!webhook_url.value && is_discord_webhook_enabled.value) { // 1. 
+  if (!webhook_url.value && is_discord_webhook_enabled.value) {
+    // 1.
     setFieldError('webhook_url', $t('validation.webhook.discord_empty'))
     return
   }
-  if(!webhook_url.value && !is_discord_webhook_enabled.value) { // 1.
+  if (!webhook_url.value && !is_discord_webhook_enabled.value) {
+    // 1.
     setFieldError('webhook_url', $t('validation.webhook.empty'))
     return
   }
-  if(!isFormValid.value) {
+  if (!isFormValid.value) {
     return
   }
   try {
-    if(is_discord_webhook_enabled.value) {
+    if (is_discord_webhook_enabled.value) {
       await fetch(API_PATH.NOTIFICATIONS_TEST_WEBHOOK, {
         method: 'POST',
         body: {
           webhook_url: webhook_url.value,
           is_discord_webhook_enabled: is_discord_webhook_enabled.value,
-        }
+        },
+      })
+      toast.showSuccess({
+        summary: $t('notifications.dashboards.toast.success.test_discord'),
       })
-      toast.showSuccess({summary:$t('notifications.dashboards.toast.success.test_discord')})
       return
     }
     await fetch(API_PATH.NOTIFICATIONS_TEST_WEBHOOK, {
       method: 'POST',
       body: {
         webhook_url: webhook_url.value,
-      }
+      },
     })
-    toast.showSuccess({summary:$t('notifications.dashboards.toast.success.test_webhook_url')})
-  } catch (error) {
-    const summary = is_discord_webhook_enabled.value ? 
-      $t('notifications.dashboards.toast.error.discord') :
-      $t('notifications.dashboards.toast.error.webhook_url')
-    toast.showError({summary})
-
+    toast.showSuccess({
+      summary: $t('notifications.dashboards.toast.success.test_webhook_url'),
+    })
+  }
+  catch (error) {
+    const summary = is_discord_webhook_enabled.value
+      ? $t('notifications.dashboards.toast.error.discord')
+      : $t('notifications.dashboards.toast.error.webhook_url')
+    toast.showError({ summary })
   }
   warn('Test notification sent', values)
 }
 const emit = defineEmits<{
-  (e: 'save', values: WebhookForm, closeCallback: () => void):void
+  (e: 'save', values: WebhookForm, closeCallback: () => void): void
 }>()
 
-const onSubmit = handleSubmit(values => {
-  if(!isFormDirty.value) {
+const onSubmit = handleSubmit((values) => {
+  if (!isFormDirty.value) {
     close()
     return
   }
@@ -96,66 +103,68 @@ const onSubmit = handleSubmit(values => {
 })
 
 const id = useId()
-
-
 </script>
+
 <template>
-    <h2 :id class="notifications-management-dialog-webhook__header">
-      {{ $t('notifications.dashboards.dialog.heading_webhook') }}
-    </h2>
-    <BcForm 
-      v-focustrap
-      novalidate
-      class="notifications-management-dialog-webhook__form"
-      :aria-describedby="id"
-      @keydown.esc.stop.prevent="close"
-      @submit.prevent="onSubmit"
-    >
-      <BcFormRow>
-        <BcInputText 
-          v-model="webhook_url"
-          v-bind="webhook_url_attrs"
-          :label="$t('notifications.dashboards.dialog.label_webhook_url')"
-          :placeholder="$t('notifications.dashboards.dialog.placeholder_webhook')"
-          input-width="200px"
-          :error="errors.webhook_url"
-          type="url"
-          should-autoselect
-        />
-      </BcFormRow>
-      <BcFormRow>
-        <BcInputCheckbox
-          v-model="is_discord_webhook_enabled"
-          v-bind="is_discord_webhook_enabled_attrs"
-          :label="$t('notifications.dashboards.dialog.label_send_via_discord')"
-          :error="errors.is_discord_webhook_enabled"
-        >
-          <template #tooltip>
-            <BcTranslation
-              keypath="notifications.dashboards.dialog.info_send_via_discord.template"
-              linkpath="notifications.dashboards.dialog.info_send_via_discord._link"
-              to="https://discord.com/developers/docs/resources/webhook"
-            />
-          </template>
-        </BcInputCheckbox>
-      </BcFormRow>
-      <div class="notifications-management-dialog-webhook-footer">
-        <BcButton
-          font-awesome-icon="faPaperPlane"
-          variant="secondary"
-          :is-aria-disabled="!isFormValid || !webhook_url"
-          @click="handleTestNotification()"
-        >
-        {{ $t('notifications.dashboards.dialog.button_webhook_test') }}
+  <h2
+    :id
+    class="notifications-management-dialog-webhook__header"
+  >
+    {{ $t("notifications.dashboards.dialog.heading_webhook") }}
+  </h2>
+  <BcForm
+    v-focustrap
+    novalidate
+    class="notifications-management-dialog-webhook__form"
+    :aria-describedby="id"
+    @keydown.esc.stop.prevent="close"
+    @submit.prevent="onSubmit"
+  >
+    <BcFormRow>
+      <BcInputText
+        v-model="webhook_url"
+        v-bind="webhook_url_attrs"
+        :label="$t('notifications.dashboards.dialog.label_webhook_url')"
+        :placeholder="$t('notifications.dashboards.dialog.placeholder_webhook')"
+        input-width="200px"
+        :error="errors.webhook_url"
+        type="url"
+        should-autoselect
+      />
+    </BcFormRow>
+    <BcFormRow>
+      <BcInputCheckbox
+        v-model="is_discord_webhook_enabled"
+        v-bind="is_discord_webhook_enabled_attrs"
+        :label="$t('notifications.dashboards.dialog.label_send_via_discord')"
+        :error="errors.is_discord_webhook_enabled"
+      >
+        <template #tooltip>
+          <BcTranslation
+            keypath="notifications.dashboards.dialog.info_send_via_discord.template"
+            linkpath="notifications.dashboards.dialog.info_send_via_discord._link"
+            to="https://discord.com/developers/docs/resources/webhook"
+          />
+        </template>
+      </BcInputCheckbox>
+    </BcFormRow>
+    <div class="notifications-management-dialog-webhook-footer">
+      <BcButton
+        font-awesome-icon="faPaperPlane"
+        variant="secondary"
+        :is-aria-disabled="!isFormValid || !webhook_url"
+        @click="handleTestNotification()"
+      >
+        {{ $t("notifications.dashboards.dialog.button_webhook_test") }}
         <template #icon>
-          <FontAwesomeIcon :icon="faPaperPlane" />      
+          <FontAwesomeIcon :icon="faPaperPlane" />
         </template>
       </BcButton>
       <BcButton
-        class="notifications-management-dialog-webhook__primary-button" 
+        class="notifications-management-dialog-webhook__primary-button"
         @click="onSubmit"
       >
-        {{ isFormDirty ? $t('navigation.save') : $t('navigation.done') }}
+        {{ isFormDirty ? $t("navigation.save") : $t("navigation.done") }}
       </BcButton>
     </div>
   </BcForm>
@@ -183,4 +192,3 @@ const id = useId()
   min-width: 90px;
 }
 </style>
-
diff --git a/frontend/components/playground/DashboardValidatorManageValidators.vue b/frontend/components/playground/DashboardValidatorManageValidators.vue
index 1df64affa..9fbe655bd 100644
--- a/frontend/components/playground/DashboardValidatorManageValidators.vue
+++ b/frontend/components/playground/DashboardValidatorManageValidators.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { DashboardGroupSelectionDialog, DashboardValidatorEpochDutiesModal } from '#components'
+import {
+  DashboardGroupSelectionDialog,
+  DashboardValidatorEpochDutiesModal,
+} from '#components'
 import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
 
 const { groups } = useValidatorDashboardGroups()
@@ -8,11 +11,10 @@ const selectedGroupId = ref<number>(DAHSHBOARDS_ALL_GROUPS_ID)
 
 const dialog = useDialog()
 
-function onClose (groupId: boolean) {
+function onClose(groupId: boolean) {
   setTimeout(() => {
     alert('new group: ' + groupId)
-  }, 100
-  )
+  }, 100)
 }
 
 const openGroupSelection = (withPreselection: boolean) => {
@@ -21,8 +23,8 @@ const openGroupSelection = (withPreselection: boolean) => {
     data: {
       groupId: withPreselection ? groups.value?.[0]?.id : undefined,
       selectedValidators: withPreselection ? 1 : 10,
-      totalValidators: 123
-    }
+      totalValidators: 123,
+    },
   })
 }
 
@@ -32,20 +34,32 @@ const openEpochDuties = () => {
       dashboardKey: 5003,
       groupId: 4,
       groupName: 'My test group',
-      epoch: 1370
-    }
+      epoch: 1370,
+    },
   })
 }
-
 </script>
+
 <template>
-  <Button label="Open Epoch Duties" @click="openEpochDuties" />
+  <Button
+    label="Open Epoch Duties"
+    @click="openEpochDuties"
+  />
   <div class="icon-holder">
     <div class="premium-row">
-      Come on, you cheap friend, buy that premium<BcPremiumGem style="margin-left: 10px;" />
+      Come on, you cheap friend, buy that premium<BcPremiumGem
+        style="margin-left: 10px"
+      />
     </div>
-    <DashboardGroupSelection v-model="selectedGroupId" class="group-selection" />
-    <DashboardGroupSelection v-model="selectedGroupId" class="group-selection" :include-all="true" />
+    <DashboardGroupSelection
+      v-model="selectedGroupId"
+      class="group-selection"
+    />
+    <DashboardGroupSelection
+      v-model="selectedGroupId"
+      class="group-selection"
+      :include-all="true"
+    />
   </div>
   <div class="status-holder">
     <div class="status">
@@ -58,7 +72,10 @@ const openEpochDuties = () => {
       <ValidatorTableStatus status="deposited" />
     </div>
     <div class="status">
-      <ValidatorTableStatus status="pending" :position="12345" />
+      <ValidatorTableStatus
+        status="pending"
+        :position="12345"
+      />
     </div>
     <div class="status">
       <ValidatorTableStatus status="slashing_offline" />
@@ -80,17 +97,25 @@ const openEpochDuties = () => {
     </div>
   </div>
   <div class="icon_holder">
-    <Button class="group_selection" label="Open Group Selection preselected" @click="openGroupSelection(true)" />
-    <Button class="group_selection" label="Open Group Selection" @click="openGroupSelection(false)" />
+    <Button
+      class="group_selection"
+      label="Open Group Selection preselected"
+      @click="openGroupSelection(true)"
+    />
+    <Button
+      class="group_selection"
+      label="Open Group Selection"
+      @click="openGroupSelection(false)"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.premium-row{
+.premium-row {
   display: inline-flex;
   gap: 10px;
 }
-.group-selection{
+.group-selection {
   width: 200px;
 }
 .icon-holder {
@@ -100,11 +125,11 @@ const openEpochDuties = () => {
   gap: var(--padding);
 }
 
-.status-holder{
+.status-holder {
   display: flex;
   flex-wrap: wrap;
   padding: 10px;
-  .status{
+  .status {
     width: 140px;
     padding: 5px;
     border: 1px solid black;
diff --git a/frontend/components/playground/MiddleEllipsisTests.vue b/frontend/components/playground/MiddleEllipsisTests.vue
index 64814d206..c564b2806 100644
--- a/frontend/components/playground/MiddleEllipsisTests.vue
+++ b/frontend/components/playground/MiddleEllipsisTests.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 let randomInt = 9129
-const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+const characters
+  = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
 const randomTexts = ref<string[]>([])
 
 // custom rnd because we need to start with the same seed during SSR and at the first client rendering
-function rand (max: number) : number {
-  randomInt = (214013 * randomInt + 2531011) & 0xFFFFFFFF
-  const normalized = ((randomInt >> 16) & 0xFFFF) / 65535
+function rand(max: number): number {
+  randomInt = (214013 * randomInt + 2531011) & 0xffffffff
+  const normalized = ((randomInt >> 16) & 0xffff) / 65535
   return Math.round(normalized * max)
 }
 
-function getRandomText () : string {
+function getRandomText(): string {
   let result = ''
   for (let l = 20 + rand(100); l > 0; l--) {
     result += characters[rand(characters.length - 1)]
@@ -18,7 +19,7 @@ function getRandomText () : string {
   return result
 }
 
-function reGenerateTextList () {
+function reGenerateTextList() {
   randomTexts.value.length = 0
   for (let i = 0; i < 100; i++) {
     randomTexts.value.push(getRandomText())
@@ -38,81 +39,180 @@ const showAllCSSclipped = ref<boolean>(false)
   </Button>
   <p>
     For this test:<br>
-    * Blue means that the width is not defined (the component finds a width by using its content and its initial-flex-grow props).
-    Other colors mean that the width is defined with flex-grow or width %<br>
-    * A red frame highlights a MiddleEllipsis controlling several MiddleEllipses (this is needed to make sure they don't disturb each other,
-    and allows for children of <i>undefined width</i>).
+    * Blue means that the width is not defined (the component finds a width by
+    using its content and its initial-flex-grow props). Other colors mean that
+    the width is defined with flex-grow or width %<br>
+    * A red frame highlights a MiddleEllipsis controlling several MiddleEllipses
+    (this is needed to make sure they don't disturb each other, and allows for
+    children of <i>undefined width</i>).
   </p>
-  <div style="position: relative;">
+  <div style="position: relative">
     <p><b>With 1 ellipsis:</b></p>
-    <BcSearchbarMiddleEllipsis class="frame medium standalone" :text="randomTexts[0]" />
+    <BcSearchbarMiddleEllipsis
+      class="frame medium standalone"
+      :text="randomTexts[0]"
+    />
     <BcSearchbarMiddleEllipsis class="frame big nocolor parent">
-      <BcSearchbarMiddleEllipsis class="flexible loose" :text="randomTexts[1]" :initial-flex-grow="1" />
-      <BcSearchbarMiddleEllipsis class="flexible medium" :text="randomTexts[2]" />
+      <BcSearchbarMiddleEllipsis
+        class="flexible loose"
+        :text="randomTexts[1]"
+        :initial-flex-grow="1"
+      />
+      <BcSearchbarMiddleEllipsis
+        class="flexible medium"
+        :text="randomTexts[2]"
+      />
       <span>Hello I am not a MiddleEllipsis*</span>
-      <BcSearchbarMiddleEllipsis class="flexible big" :text="randomTexts[3]" />
-      <BcSearchbarMiddleEllipsis class="flexible loose" :text="randomTexts[4]" :initial-flex-grow="1" />
+      <BcSearchbarMiddleEllipsis
+        class="flexible big"
+        :text="randomTexts[3]"
+      />
+      <BcSearchbarMiddleEllipsis
+        class="flexible loose"
+        :text="randomTexts[4]"
+        :initial-flex-grow="1"
+      />
     </BcSearchbarMiddleEllipsis>
-    <p>* you can put anything in a parent MiddleEllipsis, he will control its children and leave the rest as it is.</p>
+    <p>
+      * you can put anything in a parent MiddleEllipsis, he will control its
+      children and leave the rest as it is.
+    </p>
   </div>
 
-  <div style="position: relative;">
+  <div style="position: relative">
     <p><b>With 2 ellipses:</b></p>
     <p>
-      Sometimes, you will notice that there is 1 ellipsis only. This is not a bug, it is because 2 ellipses would not make sense:
+      Sometimes, you will notice that there is 1 ellipsis only. This is not a
+      bug, it is because 2 ellipses would not make sense:
       <br>
-      * If the text looks long when it happens: there is room for n characters and the text length is n+1, so there is only 1 character to skip, not 2.
-      Adding an ellipsis would hide a character that is not clipped, this would be a loss of information.
+      * If the text looks long when it happens: there is room for n characters
+      and the text length is n+1, so there is only 1 character to skip, not 2.
+      Adding an ellipsis would hide a character that is not clipped, this would
+      be a loss of information.
       <br>
-      * If the text looks short when it happens: with 2 ellipses, there would be 1 visible character ony, for example "…C…" or "A……" which is a loss of information without any advantage, therefore "A…D" is shown.
+      * If the text looks short when it happens: with 2 ellipses, there would be
+      1 visible character ony, for example "…C…" or "A……" which is a loss of
+      information without any advantage, therefore "A…D" is shown.
     </p>
-    <BcSearchbarMiddleEllipsis class="frame medium standalone" :text="randomTexts[0]" :ellipses="2" />
+    <BcSearchbarMiddleEllipsis
+      class="frame medium standalone"
+      :text="randomTexts[0]"
+      :ellipses="2"
+    />
     <BcSearchbarMiddleEllipsis class="frame big nocolor parent">
-      <BcSearchbarMiddleEllipsis class="flexible loose" :text="randomTexts[1]" :ellipses="2" :initial-flex-grow="1" />
-      <BcSearchbarMiddleEllipsis class="flexible medium" :text="randomTexts[2]" :ellipses="2" />
-      <BcSearchbarMiddleEllipsis class="flexible big" :text="randomTexts[3]" :ellipses="2" />
-      <BcSearchbarMiddleEllipsis class="flexible loose" :text="randomTexts[4]" :ellipses="2" :initial-flex-grow="1" />
+      <BcSearchbarMiddleEllipsis
+        class="flexible loose"
+        :text="randomTexts[1]"
+        :ellipses="2"
+        :initial-flex-grow="1"
+      />
+      <BcSearchbarMiddleEllipsis
+        class="flexible medium"
+        :text="randomTexts[2]"
+        :ellipses="2"
+      />
+      <BcSearchbarMiddleEllipsis
+        class="flexible big"
+        :text="randomTexts[3]"
+        :ellipses="2"
+      />
+      <BcSearchbarMiddleEllipsis
+        class="flexible loose"
+        :text="randomTexts[4]"
+        :ellipses="2"
+        :initial-flex-grow="1"
+      />
     </BcSearchbarMiddleEllipsis>
   </div>
 
-  <div style="position: relative;">
-    <p><b>With an adaptive number of ellipses (configurable in the props):</b></p>
+  <div style="position: relative">
+    <p>
+      <b>With an adaptive number of ellipses (configurable in the props):</b>
+    </p>
     <p>
-      <i>Play with the width of your window to see the number of ellipses change.</i><br><br>
+      <i>Play with the width of your window to see the number of ellipses
+        change.</i><br><br>
       Configuration for this test:<br>
       * 1 ellipsis if there is room for up to 16 characters,<br>
       * up to 2 ellipses if there is room for up to 32 characters,<br>
       * up to 3 ellipses if there is room for up to 64 characters,<br>
       * up to 4 ellipses if there is room for more than 64 characters.<br>
     </p>
-    <BcSearchbarMiddleEllipsis class="frame medium standalone" :text="randomTexts[0]" :ellipses="[16,32,64]" />
+    <BcSearchbarMiddleEllipsis
+      class="frame medium standalone"
+      :text="randomTexts[0]"
+      :ellipses="[16, 32, 64]"
+    />
     <BcSearchbarMiddleEllipsis class="frame big nocolor parent">
-      <BcSearchbarMiddleEllipsis class="flexible loose" :text="randomTexts[2]" :ellipses="[16,32,64]" :initial-flex-grow="1" />
-      <BcSearchbarMiddleEllipsis class="flexible medium" :text="randomTexts[1]" :ellipses="[16,32,64]" />
-      <BcSearchbarMiddleEllipsis class="flexible big" :text="randomTexts[5]" :ellipses="[16,32,64]" />
-      <BcSearchbarMiddleEllipsis class="flexible loose" :text="randomTexts[4]" :ellipses="[16,32,64]" :initial-flex-grow="1" />
+      <BcSearchbarMiddleEllipsis
+        class="flexible loose"
+        :text="randomTexts[2]"
+        :ellipses="[16, 32, 64]"
+        :initial-flex-grow="1"
+      />
+      <BcSearchbarMiddleEllipsis
+        class="flexible medium"
+        :text="randomTexts[1]"
+        :ellipses="[16, 32, 64]"
+      />
+      <BcSearchbarMiddleEllipsis
+        class="flexible big"
+        :text="randomTexts[5]"
+        :ellipses="[16, 32, 64]"
+      />
+      <BcSearchbarMiddleEllipsis
+        class="flexible loose"
+        :text="randomTexts[4]"
+        :ellipses="[16, 32, 64]"
+        :initial-flex-grow="1"
+      />
     </BcSearchbarMiddleEllipsis>
   </div>
 
-  <div style="position: relative;">
+  <div style="position: relative">
     <p><b>Redistribution of unused room</b></p>
-    <p>Here we have 4 children with different flex-grow values. It can happen that some of them do not need to clip (their text is displayable entirely), which means that they have spare room. Observe that instead of leaving them with unused space, the parent distributes their spare room to children needing clipping, so those can diplay more:</p>
+    <p>
+      Here we have 4 children with different flex-grow values. It can happen
+      that some of them do not need to clip (their text is displayable
+      entirely), which means that they have spare room. Observe that instead of
+      leaving them with unused space, the parent distributes their spare room to
+      children needing clipping, so those can diplay more:
+    </p>
     (enlarge your window or change the texts to see it)
     <br>
     <BcSearchbarMiddleEllipsis class="frame all nocolor parent">
-      <BcSearchbarMiddleEllipsis class="flexible medium" :text="randomTexts[0]" />
-      <BcSearchbarMiddleEllipsis class="flexible big" :text="randomTexts[5]" />
-      <BcSearchbarMiddleEllipsis class="flexible medium" :text="randomTexts[1]" />
-      <BcSearchbarMiddleEllipsis class="flexible big" :text="randomTexts[3]" />
+      <BcSearchbarMiddleEllipsis
+        class="flexible medium"
+        :text="randomTexts[0]"
+      />
+      <BcSearchbarMiddleEllipsis
+        class="flexible big"
+        :text="randomTexts[5]"
+      />
+      <BcSearchbarMiddleEllipsis
+        class="flexible medium"
+        :text="randomTexts[1]"
+      />
+      <BcSearchbarMiddleEllipsis
+        class="flexible big"
+        :text="randomTexts[3]"
+      />
     </BcSearchbarMiddleEllipsis>
   </div>
 
-  <div style="position: relative;">
+  <div style="position: relative">
     <p>
-      <b>{{ randomTexts.length }} MiddleEllipses to see the lower smoothness of the UI when you resize your window:<br>
-        (for performance, make sure to deactivate the debug mode in the source of the component!)<br>
+      <b>{{ randomTexts.length }} MiddleEllipses to see the lower smoothness of
+        the UI when you resize your window:<br>
+        (for performance, make sure to deactivate the debug mode in the source
+        of the component!)<br>
         <br>
-        <Button @click="showAllCSSclipped=false; showAllME=!showAllME">
+        <Button
+          @click="
+            showAllCSSclipped = false;
+            showAllME = !showAllME;
+          "
+        >
           show/hide
         </Button>
       </b>
@@ -127,11 +227,17 @@ const showAllCSSclipped = ref<boolean>(false)
     </div>
   </div>
 
-  <div style="position: relative;">
+  <div style="position: relative">
     <p>
-      Compare the smoothness with {{ randomTexts.length }} spans clipped natively by CSS:
+      Compare the smoothness with {{ randomTexts.length }} spans clipped
+      natively by CSS:
       <br>
-      <Button @click="showAllME=false; showAllCSSclipped=!showAllCSSclipped">
+      <Button
+        @click="
+          showAllME = false;
+          showAllCSSclipped = !showAllCSSclipped;
+        "
+      >
         show/hide
       </Button>
     </p>
@@ -147,7 +253,8 @@ const showAllCSSclipped = ref<boolean>(false)
   </div>
 
   <p>
-    -> With a modern computer, 100 Middle Ellipses seem to be an upper limit to keep a satisfying smoothness (and 50 are super smooth, unnoticeable).
+    -> With a modern computer, 100 Middle Ellipses seem to be an upper limit to
+    keep a satisfying smoothness (and 50 are super smooth, unnoticeable).
   </p>
 </template>
 
diff --git a/frontend/components/playground/PlaygroundAccordeon.vue b/frontend/components/playground/PlaygroundAccordeon.vue
index bcea736a2..616986945 100644
--- a/frontend/components/playground/PlaygroundAccordeon.vue
+++ b/frontend/components/playground/PlaygroundAccordeon.vue
@@ -1,6 +1,4 @@
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="content">
diff --git a/frontend/components/playground/PlaygroundAds.vue b/frontend/components/playground/PlaygroundAds.vue
index 9b7329328..de2378f2e 100644
--- a/frontend/components/playground/PlaygroundAds.vue
+++ b/frontend/components/playground/PlaygroundAds.vue
@@ -2,31 +2,46 @@
   <BcAdControl />
   <div class="ad_test_container">
     No blue box should be left here
-    <div id="replace_me" class="ad_test">
+    <div
+      id="replace_me"
+      class="ad_test"
+    >
       Ok come on and replace me
     </div>
   </div>
   <div class="ad_test_container">
     Ad should be within the box
-    <div id="inside_me" class="ad_test">
+    <div
+      id="inside_me"
+      class="ad_test"
+    >
       Should be iniside
     </div>
   </div>
   <div class="ad_test_container">
     Ad should be after this text, but before the box
-    <div id="before_me" class="ad_test">
+    <div
+      id="before_me"
+      class="ad_test"
+    >
       Should come before me
     </div>
   </div>
   <div class="ad_test_container">
-    <div id="after_me" class="ad_test">
+    <div
+      id="after_me"
+      class="ad_test"
+    >
       Should come after me
     </div>
     Ad should be before this text, but after the box
   </div>
   <div class="ad_test_container">
     Ad should be after this text, but before the box
-    <div id="around_me" class="ad_test">
+    <div
+      id="around_me"
+      class="ad_test"
+    >
       Should come around me
     </div>
     Ad should be before this text, but after the box
@@ -34,13 +49,13 @@
 </template>
 
 <style lang="scss">
-.ad_test_container{
+.ad_test_container {
   color: red;
   border: 1px solid red;
   background-color: aqua;
   padding: 10px;
 }
-.ad_test{
+.ad_test {
   color: pink;
   border: 1px solid pink;
   background-color: darkblue;
diff --git a/frontend/components/playground/PlaygroundComposable.vue b/frontend/components/playground/PlaygroundComposable.vue
index 58ec3a10c..508ca6b0c 100644
--- a/frontend/components/playground/PlaygroundComposable.vue
+++ b/frontend/components/playground/PlaygroundComposable.vue
@@ -1,8 +1,16 @@
 <script setup lang="ts">
-
-const { value: isTrue, temp: isTrueTemp, bounce: bounceTrue, instant: instantTrue } = useDebounceValue<boolean>(false, 2000)
-const { value: num, temp: numTemp, bounce: bounceNum, instant: instantNum } = useDebounceValue<number>(1, 2000)
-
+const {
+  value: isTrue,
+  temp: isTrueTemp,
+  bounce: bounceTrue,
+  instant: instantTrue,
+} = useDebounceValue<boolean>(false, 2000)
+const {
+  value: num,
+  temp: numTemp,
+  bounce: bounceNum,
+  instant: instantNum,
+} = useDebounceValue<number>(1, 2000)
 </script>
 
 <template>
@@ -28,19 +36,19 @@ const { value: num, temp: numTemp, bounce: bounceNum, instant: instantNum } = us
       </div>
       <div class="element_container">
         Num: {{ num }} Temp: {{ numTemp }}
-        <Button @click="bounceNum(numTemp+1)">
+        <Button @click="bounceNum(numTemp + 1)">
           Add
         </Button>
-        <Button @click="bounceNum(numTemp+1, false, true)">
+        <Button @click="bounceNum(numTemp + 1, false, true)">
           Add endles
         </Button>
-        <Button @click="bounceNum(numTemp+1, true)">
+        <Button @click="bounceNum(numTemp + 1, true)">
           Add if no timer
         </Button>
-        <Button @click="bounceNum(numTemp+1, true, true)">
+        <Button @click="bounceNum(numTemp + 1, true, true)">
           Add if no timer endles
         </Button>
-        <Button @click="instantNum(numTemp+1)">
+        <Button @click="instantNum(numTemp + 1)">
           Instant Toggle
         </Button>
       </div>
diff --git a/frontend/components/playground/PlaygroundConversion.vue b/frontend/components/playground/PlaygroundConversion.vue
index 11eccde50..a86184145 100644
--- a/frontend/components/playground/PlaygroundConversion.vue
+++ b/frontend/components/playground/PlaygroundConversion.vue
@@ -14,13 +14,18 @@ const onCurrencyChange = (event: Event) => {
   }
 }
 
-const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
-
+const currentEpoch = computed(
+  () => (latestState.value?.current_slot || 0) * 32,
+)
 </script>
+
 <template>
   <div>
     Conversions
-    <select :value="currency" @change="onCurrencyChange($event)">
+    <select
+      :value="currency"
+      @change="onCurrencyChange($event)"
+    >
       <option value="NAT">
         Native
       </option>
@@ -34,87 +39,155 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
         Gnosis
       </option>
     </select>
-    <div>
-      1Eth exact :<BcFormatValue value="1000000000000000000" />
-    </div>
+    <div>1Eth exact :<BcFormatValue value="1000000000000000000" /></div>
     <div>
       1Eth+ (custom tooltip):<BcFormatValue value="1000000010000000000">
-        <template #tooltip="{data:{label, tooltip}}">
+        <template #tooltip="{ data: { label, tooltip } }">
           Dynamic tooltip: {{ label }} -> {{ tooltip }}
         </template>
       </BcFormatValue>
     </div>
+    <div>less than 1Eth+ :<BcFormatValue value="0000000010002000001" /></div>
+    <div>less than Wei+ :<BcFormatValue value="0000000000000001000" /></div>
     <div>
-      less than 1Eth+ :<BcFormatValue value="0000000010002000001" />
+      less than 1Eth in ETH :<BcFormatValue
+        value="0000000010002000001"
+        :options="{ minUnit: 'MAIN' }"
+      />
     </div>
     <div>
-      less than Wei+ :<BcFormatValue value="0000000000000001000" />
-    </div>
-    <div>
-      less than 1Eth in ETH :<BcFormatValue value="0000000010002000001" :options="{minUnit:'MAIN'}" />
-    </div>
-    <div>
-      less than 1Wei in ETH, min 0 decimals, max: 6:<BcFormatValue value="0000000000000000001" :options="{minUnit:'MAIN', addPlus: true, maxDecimalCount: 6, minDecimalCount: 0}" />
+      less than 1Wei in ETH, min 0 decimals, max: 6:<BcFormatValue
+        value="0000000000000000001"
+        :options="{
+          minUnit: 'MAIN',
+          addPlus: true,
+          maxDecimalCount: 6,
+          minDecimalCount: 0,
+        }"
+      />
     </div>
 
     <div>
-      1 GNO :<BcFormatValue value="1000000000000000000" :options="{sourceCurrency: 'GNO'}" />
+      1 GNO :<BcFormatValue
+        value="1000000000000000000"
+        :options="{ sourceCurrency: 'GNO' }"
+      />
     </div>
 
     <div>
-      1 ETH to GNO :<BcFormatValue value="1000000000000000000" :options="{targetCurrency: 'GNO'}" />
+      1 ETH to GNO :<BcFormatValue
+        value="1000000000000000000"
+        :options="{ targetCurrency: 'GNO' }"
+      />
     </div>
     <div>
-      1 GNO to GNO :<BcFormatValue value="1000000000000000000" :options="{sourceCurrency: 'GNO', targetCurrency: 'GNO'}" />
+      1 GNO to GNO :<BcFormatValue
+        value="1000000000000000000"
+        :options="{ sourceCurrency: 'GNO', targetCurrency: 'GNO' }"
+      />
     </div>
     <div>
-      1 GNO to EUR :<BcFormatValue value="1000000000000000000" :options="{sourceCurrency: 'GNO', targetCurrency: 'EUR'}" />
+      1 GNO to EUR :<BcFormatValue
+        value="1000000000000000000"
+        :options="{ sourceCurrency: 'GNO', targetCurrency: 'EUR' }"
+      />
     </div>
     <div>
-      1Eth exact, fixed 0 decimals :<BcFormatValue value="1000000000000000000" :options="{fixedDecimalCount: 0}" />
+      1Eth exact, fixed 0 decimals :<BcFormatValue
+        value="1000000000000000000"
+        :options="{ fixedDecimalCount: 0 }"
+      />
     </div>
     <div>
-      1Eth+ fixed 2 decimals:<BcFormatValue value="1001000000000000000" :options="{fixedDecimalCount: 2}" />
+      1Eth+ fixed 2 decimals:<BcFormatValue
+        value="1001000000000000000"
+        :options="{ fixedDecimalCount: 2 }"
+      />
     </div>
 
     <div>
-      1Eth+ with Plus Sign:<BcFormatValue value="1001000000000000000" :options="{addPlus: true}" />
+      1Eth+ with Plus Sign:<BcFormatValue
+        value="1001000000000000000"
+        :options="{ addPlus: true }"
+      />
     </div>
 
     <div>
-      -value:<BcFormatValue value="-10010000000000" :options="{addPlus: true}" />
+      -value:<BcFormatValue
+        value="-10010000000000"
+        :options="{ addPlus: true }"
+      />
     </div>
 
     <div>
-      Positive with color:<BcFormatValue value="1001000000000000000" :options="{addPlus: true}" :use-colors="true" />
+      Positive with color:<BcFormatValue
+        value="1001000000000000000"
+        :options="{ addPlus: true }"
+        :use-colors="true"
+      />
     </div>
 
     <div>
-      Negative with color:<BcFormatValue value="-10010000000000" :options="{addPlus: true}" :use-colors="true" />
+      Negative with color:<BcFormatValue
+        value="-10010000000000"
+        :options="{ addPlus: true }"
+        :use-colors="true"
+      />
     </div>
     <div>
-      Negative with custom color:<BcFormatValue value="-10010000000000" :options="{addPlus: true}" :use-colors="true" negative-class="bad-color" />
+      Negative with custom color:<BcFormatValue
+        value="-10010000000000"
+        :options="{ addPlus: true }"
+        :use-colors="true"
+        negative-class="bad-color"
+      />
     </div>
     <div>
-      Input in  gwei [1001000]: <BcFormatValue value="1001000" :options="{sourceUnit:'GWEI'}" />
+      Input in gwei [1001000]:
+      <BcFormatValue
+        value="1001000"
+        :options="{ sourceUnit: 'GWEI' }"
+      />
     </div>
     <div>
-      Input in eth [2]: <BcFormatValue value="2" :options="{sourceUnit:'MAIN'}" />
+      Input in eth [2]:
+      <BcFormatValue
+        value="2"
+        :options="{ sourceUnit: 'MAIN' }"
+      />
     </div>
     <div>
-      Input in eth [2] fixed out in GWEI: <BcFormatValue value="2" :options="{sourceUnit:'MAIN', fixedUnit:'GWEI'}" />
+      Input in eth [2] fixed out in GWEI:
+      <BcFormatValue
+        value="2"
+        :options="{ sourceUnit: 'MAIN', fixedUnit: 'GWEI' }"
+      />
     </div>
     <div>
-      Input in eth [2] fixed out in WEI: <BcFormatValue value="2" :options="{sourceUnit:'MAIN', fixedUnit:'WEI'}" />
+      Input in eth [2] fixed out in WEI:
+      <BcFormatValue
+        value="2"
+        :options="{ sourceUnit: 'MAIN', fixedUnit: 'WEI' }"
+      />
     </div>
   </div>
-  <b>
-    Format numbers
-  </b>
+  <b> Format numbers </b>
   <div>100000, no settings: <BcFormatNumber :value="100000" /></div>
   <div>100000.1234, no settings: <BcFormatNumber :value="100000.1234" /></div>
-  <div>100000, min 2 decimals: <BcFormatNumber :value="100000" :min-decimals="2" /></div>
-  <div>100000.1234, min/max 3: <BcFormatNumber :value="100000.1234" :min-decimals="3" :max-decimals="3" /></div>
+  <div>
+    100000, min 2 decimals: <BcFormatNumber
+      :value="100000"
+      :min-decimals="2"
+    />
+  </div>
+  <div>
+    100000.1234, min/max 3:
+    <BcFormatNumber
+      :value="100000.1234"
+      :min-decimals="3"
+      :max-decimals="3"
+    />
+  </div>
   <div>0, no settings: <BcFormatNumber :value="0" /></div>
   <div>0.00001, no settings: <BcFormatNumber :value="0.00001" /></div>
   <div>0.01, no settings: <BcFormatNumber :value="0.01" /></div>
@@ -122,17 +195,23 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
   <div>no value, default '-': <BcFormatNumber default="-" /></div>
   <div>-100000, no settings: <BcFormatNumber :value="-100000" /></div>
 
-  <b>
-    Format percent
-  </b>
+  <b> Format percent </b>
 
   <div>
     1234567.89123, color, +:
-    <BcFormatPercent :percent="1234567.89123" :color-break-point="80" :add-positive-sign="true" />
+    <BcFormatPercent
+      :percent="1234567.89123"
+      :color-break-point="80"
+      :add-positive-sign="true"
+    />
   </div>
   <div>
     -1234567.89123, color, +:
-    <BcFormatPercent :percent="-1234567.89123" :color-break-point="80" :add-positive-sign="true" />
+    <BcFormatPercent
+      :percent="-1234567.89123"
+      :color-break-point="80"
+      :add-positive-sign="true"
+    />
   </div>
 
   <div>
@@ -141,19 +220,26 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
   </div>
   <div>
     percent equal
-    <BcFormatPercent :percent="85.123" :compare-percent="85.43" />
+    <BcFormatPercent
+      :percent="85.123"
+      :compare-percent="85.43"
+    />
   </div>
   <div>
     percent lower
-    <BcFormatPercent :percent="85.123" :compare-percent="85.7" />
+    <BcFormatPercent
+      :percent="85.123"
+      :compare-percent="85.7"
+    />
   </div>
   <div>
     percent lower
-    <BcFormatPercent :percent="85.123" :compare-percent="84.50" />
+    <BcFormatPercent
+      :percent="85.123"
+      :compare-percent="84.5"
+    />
   </div>
-  <b>
-    Format Epochs time {{ setting }} <BcTableAgeHeader />
-  </b>
+  <b> Format Epochs time {{ setting }} <BcTableAgeHeader /> </b>
   <div>
     Epoch 1 ->
     <BcFormatTimePassed :value="1" />
@@ -169,11 +255,17 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
   </div>
   <div>
     latest Epoch absolute ->
-    <BcFormatTimePassed :value="currentEpoch" format="absolute" />
+    <BcFormatTimePassed
+      :value="currentEpoch"
+      format="absolute"
+    />
   </div>
   <div>
     latest Epoch relative ->
-    <BcFormatTimePassed :value="currentEpoch" format="relative" />
+    <BcFormatTimePassed
+      :value="currentEpoch"
+      format="relative"
+    />
   </div>
   <div>
     latest Epoch - 1 ->
@@ -189,7 +281,10 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
   </div>
   <div>
     next Epoch no tick ->
-    <BcFormatTimePassed :value="currentEpoch + 1" :no-update="true" />
+    <BcFormatTimePassed
+      :value="currentEpoch + 1"
+      :no-update="true"
+    />
   </div>
   <div>
     the Epoch after ->
@@ -197,17 +292,22 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
   </div>
   <div>
     latest Epoch long format->
-    <BcFormatTimePassed :value="currentEpoch" unit-length="long" />
+    <BcFormatTimePassed
+      :value="currentEpoch"
+      unit-length="long"
+    />
   </div>
   <div>
     latest Epoch short format->
-    <BcFormatTimePassed :value="currentEpoch" unit-length="short" />
+    <BcFormatTimePassed
+      :value="currentEpoch"
+      unit-length="short"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
-
-:deep(.bad-color){
-  color: pink
+:deep(.bad-color) {
+  color: pink;
 }
 </style>
diff --git a/frontend/components/playground/PlaygroundDialog.vue b/frontend/components/playground/PlaygroundDialog.vue
index 47c8b6ce1..1ea2d287d 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
-import { BcDialogConfirm, NotificationsManagementSubscriptionDialog, DashboardCreationController } from '#components'
-import type { NotificationSettingsValidatorDashboard, NotificationSettingsAccountDashboard } from '~/types/api/notifications'
+import {
+  BcDialogConfirm,
+  NotificationsManagementSubscriptionDialog,
+  DashboardCreationController,
+} from '#components'
+import type {
+  NotificationSettingsValidatorDashboard,
+  NotificationSettingsAccountDashboard,
+} from '~/types/api/notifications'
 
 const dialog = useDialog()
 const { currentNetwork } = useNetworkStore()
 
-function onClose (answer: boolean) {
+function onClose(answer: boolean) {
   setTimeout(() => {
     alert('response: ' + answer)
-  }, 100
-  )
+  }, 100)
 }
 
 const openQuestion = (yesLabel?: string, noLabel?: string) => {
@@ -18,9 +24,9 @@ const openQuestion = (yesLabel?: string, noLabel?: string) => {
       title: 'My super question',
       question: 'Are you ready to rumble, or do you have second thoughts?',
       yesLabel,
-      noLabel
+      noLabel,
     },
-    onClose: response => onClose(response?.data)
+    onClose: response => onClose(response?.data),
   })
 }
 
@@ -35,7 +41,7 @@ const validatorSub: NotificationSettingsValidatorDashboard = {
   is_sync_subscribed: true,
   is_withdrawal_processed_subscribed: true,
   is_slashed_subscribed: false,
-  is_real_time_mode_enabled: false
+  is_real_time_mode_enabled: false,
 }
 
 const accountSub: NotificationSettingsAccountDashboard = {
@@ -48,17 +54,18 @@ const accountSub: NotificationSettingsAccountDashboard = {
   is_erc721_token_transfers_subscribed: true,
   is_erc1155_token_transfers_subscribed: false,
   subscribed_chain_ids: [17000],
-  is_ignore_spam_transactions_enabled: true
+  is_ignore_spam_transactions_enabled: true,
 }
 
-function openSubscriptions (props: any) {
+function openSubscriptions(props: any) {
   dialog.open(NotificationsManagementSubscriptionDialog, {
     data: props,
-    onClose: response => onClose(response?.data)
+    onClose: response => onClose(response?.data),
   })
 }
 
-const dashboardCreationControllerModal = ref<typeof DashboardCreationController>()
+const dashboardCreationControllerModal
+  = ref<typeof DashboardCreationController>()
 </script>
 
 <template>
@@ -66,17 +73,39 @@ const dashboardCreationControllerModal = ref<typeof DashboardCreationController>
     <Button @click="dashboardCreationControllerModal?.show()">
       Create dashboard with free will!
     </Button>
-    <Button @click="dashboardCreationControllerModal?.show('validator', currentNetwork)">
+    <Button
+      @click="
+        dashboardCreationControllerModal?.show('validator', currentNetwork)
+      "
+    >
       Create validator dashboard with currentNetwork.value forced
     </Button>
     <Button @click="dashboardCreationControllerModal?.show('account')">
       Create account dashboard with account mode forced
     </Button>
-    Note: to test the saving of the options to the API, open the dialogs from the notification dashboard.<br>The communication with the API is implemented there.
-    <Button @click="openSubscriptions({ dashboardType: 'validator', initialSettings: validatorSub, saveUserSettings: () => {} })">
+    Note: to test the saving of the options to the API, open the dialogs from
+    the notification dashboard.<br>The communication with the API is
+    implemented there.
+    <Button
+      @click="
+        openSubscriptions({
+          dashboardType: 'validator',
+          initialSettings: validatorSub,
+          saveUserSettings: () => {},
+        })
+      "
+    >
       Subscribe to notifications for your validators
     </Button>
-    <Button @click="openSubscriptions({ dashboardType: 'account', initialSettings: accountSub, saveUserSettings: () => {} })">
+    <Button
+      @click="
+        openSubscriptions({
+          dashboardType: 'account',
+          initialSettings: accountSub,
+          saveUserSettings: () => {},
+        })
+      "
+    >
       Subscribe to notifications for your accounts
     </Button>
     <br>
@@ -99,7 +128,7 @@ const dashboardCreationControllerModal = ref<typeof DashboardCreationController>
 </template>
 
 <style lang="scss" scoped>
-.container{
+.container {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
diff --git a/frontend/components/playground/PlaygroundDutyStatus.vue b/frontend/components/playground/PlaygroundDutyStatus.vue
index 941f4c0e2..561aab1ff 100644
--- a/frontend/components/playground/PlaygroundDutyStatus.vue
+++ b/frontend/components/playground/PlaygroundDutyStatus.vue
@@ -14,8 +14,8 @@ const data: ValidatorHistoryDuties[] = [
       cl_sync_inclusion_income: '123450000',
       cl_slashing_inclusion_income: '123450000',
       el_income: '123450000',
-      status: 'success'
-    }
+      status: 'success',
+    },
   },
   {
     attestation_head: { income: '-123450000', status: 'failed' },
@@ -29,8 +29,8 @@ const data: ValidatorHistoryDuties[] = [
       cl_sync_inclusion_income: '123450000',
       cl_slashing_inclusion_income: '123450000',
       el_income: '123450000',
-      status: 'success'
-    }
+      status: 'success',
+    },
   },
   {
     attestation_head: { income: '123450000', status: 'success' },
@@ -44,8 +44,8 @@ const data: ValidatorHistoryDuties[] = [
       cl_sync_inclusion_income: '-133450000',
       cl_slashing_inclusion_income: '-133450000',
       el_income: '-133450000',
-      status: 'failed'
-    }
+      status: 'failed',
+    },
   },
   {
     attestation_head: { income: '123450000', status: 'success' },
@@ -59,8 +59,8 @@ const data: ValidatorHistoryDuties[] = [
       cl_sync_inclusion_income: '123450000',
       cl_slashing_inclusion_income: '123450000',
       el_income: '123450000',
-      status: 'success'
-    }
+      status: 'success',
+    },
   },
   {
     attestation_head: { income: '-123450000', status: 'failed' },
@@ -74,8 +74,8 @@ const data: ValidatorHistoryDuties[] = [
       cl_sync_inclusion_income: '-123450000',
       cl_slashing_inclusion_income: '-123450000',
       el_income: '-123450000',
-      status: 'failed'
-    }
+      status: 'failed',
+    },
   },
   {
     proposal: {
@@ -83,31 +83,52 @@ const data: ValidatorHistoryDuties[] = [
       cl_sync_inclusion_income: '0',
       cl_slashing_inclusion_income: '0',
       el_income: '0',
-      status: 'failed'
-    }
+      status: 'failed',
+    },
   },
-  {}
+  {},
 ]
-
 </script>
 
 <template>
   <div class="container">
     <div class="item">
-      <DashboardTableSummaryReward :reward="{el:'213129312312', cl:'18293791237'}" />
+      <DashboardTableSummaryReward
+        :reward="{ el: '213129312312', cl: '18293791237' }"
+      />
     </div>
     <div class="item">
-      <DashboardTableSummaryStatus :status="{next_sync_count: 123,current_sync_count:0, slashed_count: 1}" />
+      <DashboardTableSummaryStatus
+        :status="{
+          next_sync_count: 123,
+          current_sync_count: 0,
+          slashed_count: 1,
+        }"
+      />
     </div>
     <div class="item">
-      <DashboardTableSummaryStatus :status="{next_sync_count: 0,current_sync_count:8, slashed_count: 0}" />
+      <DashboardTableSummaryStatus
+        :status="{
+          next_sync_count: 0,
+          current_sync_count: 8,
+          slashed_count: 0,
+        }"
+      />
     </div>
-    <div v-for="(duty, index) in data" :key="index" class="item">
-      <ValidatorTableDutyStatus :data="duty" :compact="index === 1" />
+    <div
+      v-for="(duty, index) in data"
+      :key="index"
+      class="item"
+    >
+      <ValidatorTableDutyStatus
+        :data="duty"
+        :compact="index === 1"
+      />
       <ValidatorTableDutyRewards :data="duty" />
     </div>
   </div>
 </template>
+
 <style lang="scss" scoped>
 .container {
   display: flex;
@@ -121,7 +142,6 @@ const data: ValidatorHistoryDuties[] = [
     margin: 10px;
     border: solid 1px beige;
     width: fit-content;
-    ;
   }
 }
 </style>
diff --git a/frontend/components/playground/PlaygroundEncryption.vue b/frontend/components/playground/PlaygroundEncryption.vue
index 894d36a72..5978ad797 100644
--- a/frontend/components/playground/PlaygroundEncryption.vue
+++ b/frontend/components/playground/PlaygroundEncryption.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 const input = ref('12,32,123,1,35,4')
 const encrypted = computed(() => toBase64Url(input.value))
 const decrypted = computed(() => fromBase64Url(encrypted.value))
@@ -7,33 +6,20 @@ const decrypted = computed(() => fromBase64Url(encrypted.value))
 const input2 = ref('MTIsMzIsMTIzLDEsMzUsNA')
 const decrypted2 = computed(() => fromBase64Url(input2.value))
 const encrypted2 = computed(() => toBase64Url(decrypted2.value))
-
 </script>
 
 <template>
   <div class="container">
     <h>Encoding</h>
-    <div>
-      Input <InputText v-model="input" />
-    </div>
-    <div>
-      Base64Url encoded: {{ encrypted }}
-    </div>
-    <div>
-      Base64Url decoded: {{ decrypted }}
-    </div>
+    <div>Input <InputText v-model="input" /></div>
+    <div>Base64Url encoded: {{ encrypted }}</div>
+    <div>Base64Url decoded: {{ decrypted }}</div>
   </div>
   <div class="container">
     <h>Reverse Encoding</h>
-    <div>
-      Base64Url Input <InputText v-model="input2" />
-    </div>
-    <div>
-      Decrypted: {{ decrypted2 }}
-    </div>
-    <div>
-      Base64Url decoded: {{ encrypted2 }}
-    </div>
+    <div>Base64Url Input <InputText v-model="input2" /></div>
+    <div>Decrypted: {{ decrypted2 }}</div>
+    <div>Base64Url decoded: {{ encrypted2 }}</div>
   </div>
 </template>
 
diff --git a/frontend/components/playground/PlaygroundHashes.vue b/frontend/components/playground/PlaygroundHashes.vue
index 6b2e43f4d..e9f117e02 100644
--- a/frontend/components/playground/PlaygroundHashes.vue
+++ b/frontend/components/playground/PlaygroundHashes.vue
@@ -5,87 +5,146 @@ const data = {
     {
       type: 'address',
       hash: '0xE276Bc378A527A8792B353cdCA5b5E53263DfB9e',
-      ens: 'keinMini.ens'
+      ens: 'keinMini.ens',
     },
     {
       type: 'address',
       hash: '0xE276Bc378A527A8792B353cdCA5b5E53263DfB9e',
-      ens: 'thisIsAVerryLongEnsNameSoItShoulBeTruncatedthisIsAVerryLongEnsNameSoItShoulBeTruncated.ens'
+      ens: 'thisIsAVerryLongEnsNameSoItShoulBeTruncatedthisIsAVerryLongEnsNameSoItShoulBeTruncated.ens',
     },
     {
       type: 'address',
-      hash: '0xE276Bc378A527A8792B353cdCA5b5E53263DfB9e'
+      hash: '0xE276Bc378A527A8792B353cdCA5b5E53263DfB9e',
     },
     {
       type: 'withdrawal_credentials',
-      hash: '0x010000000000000000000000e276bc378a527a8792b353cdca5b5e53263dfb9e'
+      hash: '0x010000000000000000000000e276bc378a527a8792b353cdca5b5e53263dfb9e',
     },
     {
       type: 'withdrawal_credentials',
-      hash: '0x0094ddaa84a9dce074b5abaa0e939402029a4d3f5f9eea57986583630353ea49'
+      hash: '0x0094ddaa84a9dce074b5abaa0e939402029a4d3f5f9eea57986583630353ea49',
     },
     {
       type: 'public_key',
-      hash: '0x9340bfc34ffab8c28b1870a4125c559978ac2b278f76f462b5c859a00c3ba3426b176dc2c689096ad575b4cd4dbb76ae'
+      hash: '0x9340bfc34ffab8c28b1870a4125c559978ac2b278f76f462b5c859a00c3ba3426b176dc2c689096ad575b4cd4dbb76ae',
     },
     {
       type: 'block_hash',
-      hash: '0xbc4275221772ede9869d9cf17bf4b5de5a8fe73aa63657abfa9c8b62f3ef39af'
+      hash: '0xbc4275221772ede9869d9cf17bf4b5de5a8fe73aa63657abfa9c8b62f3ef39af',
     },
     {
       type: 'root',
-      hash: '0x4d9e52c17e163fe6e542dcf3ebdcc53b74f5a191c017bc153a9857aaa66683ee'
+      hash: '0x4d9e52c17e163fe6e542dcf3ebdcc53b74f5a191c017bc153a9857aaa66683ee',
     },
     {
-      hash: '0x910fc508a2d992748628d9fa800a4055828fa3bb200069dc00f0f29eb1d607e20dd645c4339f48a5dd468fb51f15c9d20c5a161b1219fa9ed2d48aa8140eca56ceafd691df2d1037411ff2fb8b9912ca215ebff15d41a40eebb496b76fe403f4'
-    }
-  ]
+      hash: '0x910fc508a2d992748628d9fa800a4055828fa3bb200069dc00f0f29eb1d607e20dd645c4339f48a5dd468fb51f15c9d20c5a161b1219fa9ed2d48aa8140eca56ceafd691df2d1037411ff2fb8b9912ca215ebff15d41a40eebb496b76fe403f4',
+    },
+  ],
 }
-
 </script>
 
 <template>
-  <BcTable class="hash-table" :data="data" :page-size="50">
-    <Column field="type" header="Type" />
-    <Column field="hash" header="Hash">
+  <BcTable
+    class="hash-table"
+    :data="data"
+    :page-size="50"
+  >
+    <Column
+      field="type"
+      header="Type"
+    />
+    <Column
+      field="hash"
+      header="Hash"
+    >
       <template #body="{ data: { hash } }">
         <div class="hash">
           {{ hash }}
         </div>
       </template>
     </Column>
-    <Column field="short" header="Short">
+    <Column
+      field="short"
+      header="Short"
+    >
       <template #body="{ data: { hash, ens, type } }">
-        <BcFormatHash :hash="hash" :type="type" :ens="ens" />
+        <BcFormatHash
+          :hash="hash"
+          :type="type"
+          :ens="ens"
+        />
       </template>
     </Column>
-    <Column field="full" header="Full">
+    <Column
+      field="full"
+      header="Full"
+    >
       <template #body="{ data: { hash, ens, type } }">
-        <BcFormatHash :hash="hash" :type="type" :ens="ens" :full="true" />
+        <BcFormatHash
+          :hash="hash"
+          :type="type"
+          :ens="ens"
+          :full="true"
+        />
       </template>
     </Column>
-    <Column field="short_no_link" header="Short no link">
+    <Column
+      field="short_no_link"
+      header="Short no link"
+    >
       <template #body="{ data: { hash, ens, type } }">
-        <BcFormatHash :hash="hash" :type="type" :ens="ens" :no-link="true" />
+        <BcFormatHash
+          :hash="hash"
+          :type="type"
+          :ens="ens"
+          :no-link="true"
+        />
       </template>
     </Column>
-    <Column field="full_no_link" header="Full no link">
+    <Column
+      field="full_no_link"
+      header="Full no link"
+    >
       <template #body="{ data: { hash, ens, type } }">
-        <BcFormatHash :hash="hash" :type="type" :ens="ens" :full="true" :no-link="true" />
+        <BcFormatHash
+          :hash="hash"
+          :type="type"
+          :ens="ens"
+          :full="true"
+          :no-link="true"
+        />
       </template>
     </Column>
-    <Column field="short_no_copy" header="Short no copy">
+    <Column
+      field="short_no_copy"
+      header="Short no copy"
+    >
       <template #body="{ data: { hash, ens, type } }">
-        <BcFormatHash :hash="hash" :type="type" :ens="ens" :no-copy="true" />
+        <BcFormatHash
+          :hash="hash"
+          :type="type"
+          :ens="ens"
+          :no-copy="true"
+        />
       </template>
     </Column>
-    <Column field="full_no_copy" header="Full no copy">
+    <Column
+      field="full_no_copy"
+      header="Full no copy"
+    >
       <template #body="{ data: { hash, ens, type } }">
-        <BcFormatHash :hash="hash" :type="type" :ens="ens" :full="true" :no-copy="true" />
+        <BcFormatHash
+          :hash="hash"
+          :type="type"
+          :ens="ens"
+          :full="true"
+          :no-copy="true"
+        />
       </template>
     </Column>
   </BcTable>
 </template>
+
 <style lang="scss" scoped>
 .hash {
   word-wrap: break-word;
diff --git a/frontend/components/playground/PlaygroundIcons.vue b/frontend/components/playground/PlaygroundIcons.vue
index 3d582ed24..b2acc6cc5 100644
--- a/frontend/components/playground/PlaygroundIcons.vue
+++ b/frontend/components/playground/PlaygroundIcons.vue
@@ -3,47 +3,84 @@ import { getAllExistingChainIDs, type ChainIDs } from '~/types/network'
 </script>
 
 <template>
-  <div id="iconHolder" class="icon_holder">
+  <div
+    id="iconHolder"
+    class="icon_holder"
+  >
     <div>
-      <BcTooltip position="left" text="left tt" scroll-container="#iconHolder">
+      <BcTooltip
+        position="left"
+        text="left tt"
+        scroll-container="#iconHolder"
+      >
         <IconSlotAttestation /> Attestation
       </BcTooltip>
     </div>
     <div>
-      <BcTooltip position="right" text="right tt" scroll-container="#iconHolder">
+      <BcTooltip
+        position="right"
+        text="right tt"
+        scroll-container="#iconHolder"
+      >
         <IconSlotHeadAttestation /> Head Attestation
       </BcTooltip>
     </div>
     <div>
-      <BcTooltip position="top" text="top tt" scroll-container="#iconHolder">
+      <BcTooltip
+        position="top"
+        text="top tt"
+        scroll-container="#iconHolder"
+      >
         <IconSlotSourceAttestation /> Source Attestation
       </BcTooltip>
     </div>
     <div>
-      <BcTooltip position="bottom" text="bottom tt" scroll-container="#iconHolder">
+      <BcTooltip
+        position="bottom"
+        text="bottom tt"
+        scroll-container="#iconHolder"
+      >
         <IconSlotTargetAttestation /> Target Attestation
       </BcTooltip>
     </div>
     <div>
-      <BcTooltip position="top" text="top over icon" :fit-content="true" scroll-container="#iconHolder">
+      <BcTooltip
+        position="top"
+        text="top over icon"
+        :fit-content="true"
+        scroll-container="#iconHolder"
+      >
         <IconSlotBlockProposal />
       </BcTooltip>
       Block Proposal
     </div>
     <div>
-      <BcTooltip position="bottom" text="bottom over icon" :fit-content="true" scroll-container="#iconHolder">
+      <BcTooltip
+        position="bottom"
+        text="bottom over icon"
+        :fit-content="true"
+        scroll-container="#iconHolder"
+      >
         <IconSlotSlashing />
       </BcTooltip>
       Slashing
     </div>
     <div>
-      <BcTooltip position="left" text="left over icon" scroll-container="#iconHolder">
+      <BcTooltip
+        position="left"
+        text="left over icon"
+        scroll-container="#iconHolder"
+      >
         <IconSlotSync />
       </BcTooltip>
       Slot Sync
     </div>
     <div>
-      <BcTooltip position="right" text="right over icon" scroll-container="#iconHolder">
+      <BcTooltip
+        position="right"
+        text="right over icon"
+        scroll-container="#iconHolder"
+      >
         <IconSlotSync />
       </BcTooltip>
       Slot Sync
@@ -70,7 +107,10 @@ import { getAllExistingChainIDs, type ChainIDs } from '~/types/network'
       :harmonize-perceived-size="false"
       class="icon-size"
     />
-    <div>Harmonized sizes (for example Ethereum looks less skinny compared to the others):</div>
+    <div>
+      Harmonized sizes (for example Ethereum looks less skinny compared to the
+      others):
+    </div>
     <IconNetwork
       v-for="id of getAllExistingChainIDs(false)"
       :key="id"
@@ -82,7 +122,8 @@ import { getAllExistingChainIDs, type ChainIDs } from '~/types/network'
   </div>
   <div>
     <h2>Loading issues:</h2>
-    Example when props `inline` is true: "Something went wrong <IconErrorFace :inline="true" /> Please try again later."
+    Example when props `inline` is true: "Something went wrong
+    <IconErrorFace :inline="true" /> Please try again later."
     <br>
     Example for a 404 page (not inline):
     <div class="container">
@@ -102,8 +143,14 @@ import { getAllExistingChainIDs, type ChainIDs } from '~/types/network'
     <IconDatatypeBatchIcon class="icon-size" />
     <IconDatatypeContractIcon class="icon-size" />
     <IconDatatypeAccountIcon class="icon-size" />
-    <IconDatatypeEnsIcon class="icon-size" style="color:red" />
-    <IconDatatypeEnsIcon class="icon-size" style="color:blue" />
+    <IconDatatypeEnsIcon
+      class="icon-size"
+      style="color: red"
+    />
+    <IconDatatypeEnsIcon
+      class="icon-size"
+      style="color: blue"
+    />
     <IconDatatypeGraffitiIcon class="icon-size" />
     <IconDatatypeValidatorIcon class="icon-size" />
   </div>
diff --git a/frontend/components/playground/PlaygroundInput.vue b/frontend/components/playground/PlaygroundInput.vue
index 36c4d73ca..40e6321cf 100644
--- a/frontend/components/playground/PlaygroundInput.vue
+++ b/frontend/components/playground/PlaygroundInput.vue
@@ -1,24 +1,36 @@
 <script setup lang="ts">
-
 const input1 = ref('My name')
 const input2 = ref('Not empty')
 const input3 = ref('')
-
 </script>
 
 <template>
   <div class="container">
     <div>
-      <BcInputLabel :value="input1" @set-value="(v: string) => input1 = v" />
+      <BcInputLabel
+        :value="input1"
+        @set-value="(v: string) => (input1 = v)"
+      />
     </div>
     <div>
-      <BcInputLabel :value="input2" @set-value="(v: string) => input2 = v" />
+      <BcInputLabel
+        :value="input2"
+        @set-value="(v: string) => (input2 = v)"
+      />
     </div>
     <div>
-      <BcInputLabel :value="input3" :label="input3 || 'Default'" :can-be-empty="true" @set-value="(v: string) => input3 = v" />
+      <BcInputLabel
+        :value="input3"
+        :label="input3 || 'Default'"
+        :can-be-empty="true"
+        @set-value="(v: string) => (input3 = v)"
+      />
     </div>
     <div>
-      <BcInputLabel :value="input1" :disabled="true" />
+      <BcInputLabel
+        :value="input1"
+        :disabled="true"
+      />
     </div>
   </div>
 </template>
@@ -34,7 +46,7 @@ const input3 = ref('')
   color: var(--container-color);
   border: solid 1px var(--container-border-color);
 
-  >div {
+  > div {
     width: 200px;
     border: solid 1px var(--container-border-color);
     padding: var(--padding-small);
diff --git a/frontend/components/playground/PlaygroundStyling.vue b/frontend/components/playground/PlaygroundStyling.vue
index a6a9cdd03..efd6edf03 100644
--- a/frontend/components/playground/PlaygroundStyling.vue
+++ b/frontend/components/playground/PlaygroundStyling.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import {
-  faTable
-} from '@fortawesome/pro-solid-svg-icons'
-import {
-  faChartColumn
-} from '@fortawesome/pro-regular-svg-icons'
+import { faTable } from '@fortawesome/pro-solid-svg-icons'
+import { faChartColumn } from '@fortawesome/pro-regular-svg-icons'
 import { IconAccount, IconValidator, IconSlotBlockProposal } from '#components'
 
 const emptyModalVisibility = ref(false)
@@ -21,36 +17,62 @@ const toggleLoading = () => {
 
 const selected = ref(true)
 
-const completeList = [{ value: 'attestation' }, { value: 'proposal', component: IconSlotBlockProposal }, { value: 'sync' }, { value: 'chart', icon: faChartColumn }]
+const completeList = [
+  { value: 'attestation' },
+  { value: 'proposal', component: IconSlotBlockProposal },
+  { value: 'sync' },
+  { value: 'chart', icon: faChartColumn },
+]
 const selectedList = ref<string[]>(['attestation', 'proposal'])
 
 const selectedType = ref<string>('Validators')
-const allTypes = [{ text: 'Accounts', value: 'Accounts', component: IconAccount }, { text: 'Validators', value: 'Validators', component: IconValidator }]
+const allTypes = [
+  { text: 'Accounts', value: 'Accounts', component: IconAccount },
+  { text: 'Validators', value: 'Validators', component: IconValidator },
+]
 
 const dropodownSelection = ref<string | undefined>()
-const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No' }, { value: 'maybe', label: 'Maybe we need a bigger label' }]
-
+const dropdownList = [
+  { value: 'yes', label: 'Yes' },
+  { value: 'no', label: 'No' },
+  { value: 'maybe', label: 'Maybe we need a bigger label' },
+]
 </script>
 
 <template>
   <BcDialog v-model="emptyModalVisibility">
     <div class="element_container">
-      <Button label="Close" @click="emptyModalVisibility = false" />
+      <Button
+        label="Close"
+        @click="emptyModalVisibility = false"
+      />
     </div>
   </BcDialog>
-  <BcDialog v-model="headerPropModalVisibility" header="Text via Header Prop">
+  <BcDialog
+    v-model="headerPropModalVisibility"
+    header="Text via Header Prop"
+  >
     <div class="element_container">
-      <Button label="Close" @click="headerPropModalVisibility = false" />
+      <Button
+        label="Close"
+        @click="headerPropModalVisibility = false"
+      />
     </div>
   </BcDialog>
-  <BcDialog v-model="slotModalVisibility" header="HeaderProp - Ignored as header slot wins">
+  <BcDialog
+    v-model="slotModalVisibility"
+    header="HeaderProp - Ignored as header slot wins"
+  >
     <template #header>
       Utilizing the header slot for custom content
     </template>
     <div>
       Utilizing the default slot for custom content
       <br>
-      <Button label="Close" @click="slotModalVisibility = false" />
+      <Button
+        label="Close"
+        @click="slotModalVisibility = false"
+      />
     </div>
 
     <template #footer>
@@ -61,12 +83,19 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
   <TabView lazy>
     <TabPanel header="Buttons">
       <div class="element_container">
-        <Button>
-          Text Button
-        </Button>
-        <Button label="Empty Modal" @click="emptyModalVisibility = true" />
-        <Button label="Header Prop Modal" @click="headerPropModalVisibility = true" />
-        <Button label="Slots Modal" @click="slotModalVisibility = true" />
+        <Button> Text Button </Button>
+        <Button
+          label="Empty Modal"
+          @click="emptyModalVisibility = true"
+        />
+        <Button
+          label="Header Prop Modal"
+          @click="headerPropModalVisibility = true"
+        />
+        <Button
+          label="Slots Modal"
+          @click="slotModalVisibility = true"
+        />
         <Button>
           <BcLink to="/dashboard">
             Dashboard Link
@@ -76,7 +105,11 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
           Disabled
         </Button>
         <Button class="p-button-icon-only">
-          <IconPlus alt="Plus icon" width="100%" height="100%" />
+          <IconPlus
+            alt="Plus icon"
+            width="100%"
+            height="100%"
+          />
         </Button>
       </div>
     </TabPanel>
@@ -91,13 +124,20 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
     <TabPanel header="Input">
       <div class="element_container">
         <InputText placeholder="Input" />
-        <InputText placeholder="Disabled Input" disabled />
+        <InputText
+          placeholder="Disabled Input"
+          disabled
+        />
       </div>
     </TabPanel>
     <TabPanel header="Checkbox">
       <div class="element_container">
-        default checkbox: <Checkbox v-model="selected" :binary="true" />
-        disabled: <Checkbox disabled />
+        default checkbox:
+        <Checkbox
+          v-model="selected"
+          :binary="true"
+        /> disabled:
+        <Checkbox disabled />
       </div>
     </TabPanel>
     <TabPanel header="Toggle">
@@ -105,7 +145,11 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
       <div class="element_container">
         <div>
           isTable: {{ isTable }}
-          <BcIconToggle v-model="isTable" :true-icon="faTable" :false-icon="faChartColumn" />
+          <BcIconToggle
+            v-model="isTable"
+            :true-icon="faTable"
+            :false-icon="faChartColumn"
+          />
         </div>
 
         <div>
@@ -123,10 +167,17 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
 
         <div>
           Selected: {{ selected }}
-          <BcToggleMultiBarButton v-model="selected" :icon="faTable" />
+          <BcToggleMultiBarButton
+            v-model="selected"
+            :icon="faTable"
+          />
         </div>
         <div>
-          <BcToggleMultiBar v-model="selectedList" :buttons="completeList" style="margin-right: 10px;">
+          <BcToggleMultiBar
+            v-model="selectedList"
+            :buttons="completeList"
+            style="margin-right: 10px"
+          >
             <template #attestation>
               <IconSlotAttestation />
             </template>
@@ -135,17 +186,26 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
               <IconSlotSync />
             </template>
           </BcToggleMultiBar>
-          Selected: {{ selectedList.join(', ') }}
+          Selected: {{ selectedList.join(", ") }}
         </div>
       </div>
       <h1>Single Toggle</h1>
       <div class="element_container">
         selectedType: {{ selectedType }}
-        <BcToggleSingleBar v-model="selectedType" :buttons="allTypes" class="single_bar_container" layout="gaudy" :allow-deselect="true" />
+        <BcToggleSingleBar
+          v-model="selectedType"
+          :buttons="allTypes"
+          class="single_bar_container"
+          layout="gaudy"
+          :allow-deselect="true"
+        />
       </div>
     </TabPanel>
     <TabPanel header="Dropdown">
-      <div class="element_container" style="background-color: darkred; padding: 5px;">
+      <div
+        class="element_container"
+        style="background-color: darkred; padding: 5px"
+      >
         <BcDropdown
           v-model="dropodownSelection"
           :options="dropdownList"
@@ -153,7 +213,7 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
           option-label="label"
           placeholder="for rock wtf this is a long placeholder"
           panel-style="max-width: 100px"
-          style="max-width: 100px;"
+          style="max-width: 100px"
         />
         <BcDropdown
           v-model="dropodownSelection"
@@ -162,7 +222,7 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
           option-label="label"
           variant="table"
           placeholder="and roll"
-          style="width: 200px;"
+          style="width: 200px"
         />
         Selected: {{ dropodownSelection }}
       </div>
@@ -173,17 +233,33 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
       </Button>
       <div class="element_container">
         <BcLoadingSpinner :loading="loading" />
-        <BcLoadingSpinner :loading="loading" size="small" style="color: lightblue;" />
-        <BcLoadingSpinner :loading="loading" size="large" />
+        <BcLoadingSpinner
+          :loading="loading"
+          size="small"
+          style="color: lightblue"
+        />
+        <BcLoadingSpinner
+          :loading="loading"
+          size="large"
+        />
         <div class="box">
-          <BcLoadingSpinner :loading="loading" alignment="center" />
+          <BcLoadingSpinner
+            :loading="loading"
+            alignment="center"
+          />
         </div>
         <div class="box">
-          <BcLoadingSpinner :loading="loading" size="full" />
+          <BcLoadingSpinner
+            :loading="loading"
+            size="full"
+          />
         </div>
       </div>
     </TabPanel>
-    <TabPanel :disabled="true" header="Disabled Tab" />
+    <TabPanel
+      :disabled="true"
+      header="Disabled Tab"
+    />
   </TabView>
 </template>
 
@@ -201,11 +277,11 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
   background-color: antiquewhite;
 }
 
-.scroll-box{
+.scroll-box {
   width: 100px;
   height: 100px;
   overflow: auto;
-  div{
+  div {
     background-color: grey;
     width: 200px;
     height: 200px;
@@ -213,6 +289,6 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
 }
 
 .single_bar_container {
-  width: 600px
+  width: 600px;
 }
 </style>
diff --git a/frontend/components/playground/PlaygroundSubsetList.vue b/frontend/components/playground/PlaygroundSubsetList.vue
index 5866b4ee6..528af49bb 100644
--- a/frontend/components/playground/PlaygroundSubsetList.vue
+++ b/frontend/components/playground/PlaygroundSubsetList.vue
@@ -6,36 +6,60 @@ const count = ref(99)
 const date = new Date()
 date.setHours(date.getHours() + 5)
 
-const list = computed(() => Array.from(Array(count.value)).map((_, index) => ({ index: index + 1, duty_objects: [Math.floor(date.getTime() / 1000), 230, 123] })))
-const categories: ValidatorSubsetCategory[] = ['all', 'online', 'offline', 'pending', 'deposited', 'sync_current', 'sync_upcoming', 'sync_past', 'has_slashed', 'got_slashed', 'proposal_proposed', 'proposal_missed']
-
+const list = computed(() =>
+  Array.from(Array(count.value)).map((_, index) => ({
+    index: index + 1,
+    duty_objects: [Math.floor(date.getTime() / 1000), 230, 123],
+  })),
+)
+const categories: ValidatorSubsetCategory[] = [
+  'all',
+  'online',
+  'offline',
+  'pending',
+  'deposited',
+  'sync_current',
+  'sync_upcoming',
+  'sync_past',
+  'has_slashed',
+  'got_slashed',
+  'proposal_proposed',
+  'proposal_missed',
+]
 </script>
 
 <template>
   <div>
     <div class="buttons">
-      <Button @click="count=0">
+      <Button @click="count = 0">
         0
       </Button>
-      <Button @click="count=1">
+      <Button @click="count = 1">
         1
       </Button>
-      <Button @click="count=99">
+      <Button @click="count = 99">
         99
       </Button>
-      <Button @click="count=100000">
+      <Button @click="count = 100000">
         100000
       </Button>
     </div>
 
-    <template v-for="category in categories" :key="category">
+    <template
+      v-for="category in categories"
+      :key="category"
+    >
       <h3>{{ category }}</h3>
-      <DashboardValidatorSubsetList :category="category" :validators="list" />
+      <DashboardValidatorSubsetList
+        :category="category"
+        :validators="list"
+      />
     </template>
   </div>
 </template>
+
 <style lang="scss" scoped>
-.buttons{
+.buttons {
   display: flex;
   gap: 10px;
   padding: 10px;
diff --git a/frontend/components/playground/PlaygroundTable.vue b/frontend/components/playground/PlaygroundTable.vue
index 8f2be3545..8d63c3f76 100644
--- a/frontend/components/playground/PlaygroundTable.vue
+++ b/frontend/components/playground/PlaygroundTable.vue
@@ -3,42 +3,45 @@ import { warn } from 'vue'
 
 const data = {
   paging: {
-    total_count: 4
+    total_count: 4,
   },
   data: [
     {
       id: 1,
       name: 'item 1',
       value1: 'value 1 1',
-      value2: 'value 2 1'
+      value2: 'value 2 1',
     },
     {
       id: 2,
       name: 'item 2',
       value1: 'value 1 2',
-      value2: 'value 2 2'
+      value2: 'value 2 2',
     },
     {
       id: 3,
       name: 'item 3',
       value1: 'value 1 3',
-      value2: 'value 2 3'
+      value2: 'value 2 3',
     },
     {
       id: 4,
       name: 'item 4',
       value1: 'value 1 4',
-      value2: 'value 2 4'
-    }
-  ]
+      value2: 'value 2 4',
+    },
+  ],
 }
 
 const selected = ref()
 
-watch(selected, () => {
-  warn('selected', selected)
-}, { deep: true })
-
+watch(
+  selected,
+  () => {
+    warn('selected', selected)
+  },
+  { deep: true },
+)
 </script>
 
 <template>
@@ -52,10 +55,22 @@ watch(selected, () => {
       :page-size="10"
       :expandable="true"
     >
-      <Column field="id" header="Id" />
-      <Column field="name" header="Name" />
-      <Column field="value1" haeader="Value 1" />
-      <Column field="value2" header="Value 2" />
+      <Column
+        field="id"
+        header="Id"
+      />
+      <Column
+        field="name"
+        header="Name"
+      />
+      <Column
+        field="value1"
+        haeader="Value 1"
+      />
+      <Column
+        field="value2"
+        header="Value 2"
+      />
     </BcTable>
 
     Selected: {{ selected }}
diff --git a/frontend/components/playground/PlaygroundTags.vue b/frontend/components/playground/PlaygroundTags.vue
index f30a62bbc..73e129b10 100644
--- a/frontend/components/playground/PlaygroundTags.vue
+++ b/frontend/components/playground/PlaygroundTags.vue
@@ -1,47 +1,96 @@
 <script setup lang="ts">
-import {
-  faAnchor,
-  faTrophy
-} from '@fortawesome/pro-solid-svg-icons'
+import { faAnchor, faTrophy } from '@fortawesome/pro-solid-svg-icons'
 import type { BlockStatus } from '~/types/block'
 import { TagColors } from '~/types/tag'
-const blockStati: BlockStatus[] = ['missed', 'orphaned', 'scheduled', 'success']
 
+const blockStati: BlockStatus[] = [
+  'missed',
+  'orphaned',
+  'scheduled',
+  'success',
+]
 </script>
 
 <template>
   <h1>Block table status tags</h1>
   <div class="container">
-    <div v-for="status in blockStati" :key="status" class="item">
+    <div
+      v-for="status in blockStati"
+      :key="status"
+      class="item"
+    >
       <BlockTableStatus :status="status" />
-      <BlockTableStatus :status="status" :mobile="true" />
+      <BlockTableStatus
+        :status="status"
+        :mobile="true"
+      />
     </div>
   </div>
   <h1>Generic tags</h1>
   <div class="container">
-    <div v-for="color in TagColors" :key="color" class="item">
-      <BcTableTag :color="color" :label="color" />
-      <BcTableTag :color="color" :label="color" :icon="faAnchor" />
-      <BcTableTag :color="color" :label="color" size="compact" />
-      <BcTableTag :color="color" :label="color" size="compact" />
-      <BcTableTag :color="color" :label="color" :icon="faAnchor" size="compact" />
-      <BcTableTag :color="color" :label="color.substring(0,2)" size="circle" :tooltip="color" />
-      <BcTableTag :color="color" :icon="faAnchor" size="circle" :tooltip="color" />
+    <div
+      v-for="color in TagColors"
+      :key="color"
+      class="item"
+    >
+      <BcTableTag
+        :color="color"
+        :label="color"
+      />
+      <BcTableTag
+        :color="color"
+        :label="color"
+        :icon="faAnchor"
+      />
+      <BcTableTag
+        :color="color"
+        :label="color"
+        size="compact"
+      />
+      <BcTableTag
+        :color="color"
+        :label="color"
+        size="compact"
+      />
+      <BcTableTag
+        :color="color"
+        :label="color"
+        :icon="faAnchor"
+        size="compact"
+      />
+      <BcTableTag
+        :color="color"
+        :label="color.substring(0, 2)"
+        size="circle"
+        :tooltip="color"
+      />
+      <BcTableTag
+        :color="color"
+        :icon="faAnchor"
+        size="circle"
+        :tooltip="color"
+      />
     </div>
   </div>
   <h1>Custom colors</h1>
   <div class="container">
     <div class="item">
-      <BcTableTag label="this is gold" :icon="faTrophy" :style="{'background-color': 'gold', 'color': 'silver'}" tooltip="we can also set custom colors on our tags!" />
+      <BcTableTag
+        label="this is gold"
+        :icon="faTrophy"
+        :style="{ 'background-color': 'gold', 'color': 'silver' }"
+        tooltip="we can also set custom colors on our tags!"
+      />
     </div>
   </div>
 </template>
+
 <style lang="scss" scoped>
-.container{
+.container {
   display: flex;
   flex-wrap: wrap;
 
-  .item{
+  .item {
     flex-grow: 0;
     margin: 10px;
     display: flex;
diff --git a/frontend/components/playground/PlaygroundToasts.vue b/frontend/components/playground/PlaygroundToasts.vue
index 582701ff0..e4889aeaf 100644
--- a/frontend/components/playground/PlaygroundToasts.vue
+++ b/frontend/components/playground/PlaygroundToasts.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 const toast = useBcToast()
 
-const openToast = (severity: 'info' | 'success' | 'error', summary: string, detail: string, group?: string) => {
+const openToast = (
+  severity: 'info' | 'success' | 'error',
+  summary: string,
+  detail: string,
+  group?: string,
+) => {
   switch (severity) {
     case 'info':
       toast.showInfo({ summary, detail, group })
@@ -18,23 +23,57 @@ const openToast = (severity: 'info' | 'success' | 'error', summary: string, deta
 
 <template>
   <div class="container">
-    <Button @click="openToast('success', 'Create Group', 'You succcessfully created group Haudrauf')">
+    <Button
+      @click="
+        openToast(
+          'success',
+          'Create Group',
+          'You succcessfully created group Haudrauf',
+        )
+      "
+    >
       trigger success
     </Button>
-    <Button @click="openToast('info', 'You are happy', 'And dont let anyone else tell you differently!')">
+    <Button
+      @click="
+        openToast(
+          'info',
+          'You are happy',
+          'And dont let anyone else tell you differently!',
+        )
+      "
+    >
       trigger info
     </Button>
-    <Button @click="openToast('error', 'Webservice Error', 'This is not the page you are looking for!', '404')">
+    <Button
+      @click="
+        openToast(
+          'error',
+          'Webservice Error',
+          'This is not the page you are looking for!',
+          '404',
+        )
+      "
+    >
       trigger error code 401
     </Button>
-    <Button @click="openToast('error', 'Webservice Error', 'GET: https://thisismydomain.com/api/data', '501')">
+    <Button
+      @click="
+        openToast(
+          'error',
+          'Webservice Error',
+          'GET: https://thisismydomain.com/api/data',
+          '501',
+        )
+      "
+    >
       trigger error code 501
     </Button>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.container{
+.container {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
diff --git a/frontend/components/pricing/HeaderLine.vue b/frontend/components/pricing/HeaderLine.vue
index f2c9cca37..c5a48d6cb 100644
--- a/frontend/components/pricing/HeaderLine.vue
+++ b/frontend/components/pricing/HeaderLine.vue
@@ -1,15 +1,13 @@
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <div class="header-line-container">
     <div class="header-line">
       <div class="title">
-        {{ $t('pricing.premium') }}
+        {{ $t("pricing.premium") }}
       </div>
       <div class="subtitle">
-        {{ $t('pricing.subtitle') }}
+        {{ $t("pricing.subtitle") }}
       </div>
     </div>
   </div>
@@ -46,7 +44,7 @@
 }
 
 @media (max-width: 1360px) {
-  .header-line-container{
+  .header-line-container {
     padding-left: 5px;
     margin-bottom: 30px;
 
diff --git a/frontend/components/pricing/PeriodToggle.vue b/frontend/components/pricing/PeriodToggle.vue
index c6373149a..681a66a49 100644
--- a/frontend/components/pricing/PeriodToggle.vue
+++ b/frontend/components/pricing/PeriodToggle.vue
@@ -6,7 +6,9 @@ const isYearly = defineModel<boolean>({ required: true })
 const savingPercentage = computed(() => {
   let highestSaving = 0
   products.value?.premium_products.forEach((product) => {
-    const savingPercentage = (1 - (product.price_per_year_eur / (product.price_per_month_eur * 12))) * 100
+    const savingPercentage
+      = (1 - product.price_per_year_eur / (product.price_per_month_eur * 12))
+      * 100
     if (savingPercentage > highestSaving) {
       highestSaving = savingPercentage
     }
@@ -24,8 +26,11 @@ const savingPercentage = computed(() => {
       :true-option="$t('pricing.yearly')"
       :false-option="$t('pricing.monthly')"
     />
-    <div v-if="savingPercentage > 0" class="save-up-text">
-      {{ $t('pricing.save_up_to', {percentage: savingPercentage}) }}
+    <div
+      v-if="savingPercentage > 0"
+      class="save-up-text"
+    >
+      {{ $t("pricing.save_up_to", { percentage: savingPercentage }) }}
     </div>
   </div>
 </template>
@@ -37,7 +42,7 @@ const savingPercentage = computed(() => {
   gap: var(--padding);
   margin-bottom: 55px;
 
-  .toggle{
+  .toggle {
     font-size: 18px;
     font-weight: var(--montserrat-light);
     margin-bottom: 0;
diff --git a/frontend/components/pricing/PremiumAddonBox.vue b/frontend/components/pricing/PremiumAddonBox.vue
index c4e854311..ece28fde4 100644
--- a/frontend/components/pricing/PremiumAddonBox.vue
+++ b/frontend/components/pricing/PremiumAddonBox.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faInfoCircle, faMinus, faPlus } from '@fortawesome/pro-regular-svg-icons'
-import { type ExtraDashboardValidatorsPremiumAddon, ProductCategoryPremiumAddon } from '~/types/api/user'
+import {
+  faInfoCircle,
+  faMinus,
+  faPlus,
+} from '@fortawesome/pro-regular-svg-icons'
+import {
+  type ExtraDashboardValidatorsPremiumAddon,
+  ProductCategoryPremiumAddon,
+} from '~/types/api/user'
 import { formatPremiumProductPrice } from '~/utils/format'
 import { Target } from '~/types/links'
 
@@ -11,8 +17,8 @@ const { user, isLoggedIn } = useUserStore()
 const { stripeCustomerPortal, stripePurchase, isStripeDisabled } = useStripe()
 
 interface Props {
-  addon: ExtraDashboardValidatorsPremiumAddon,
-  isYearly: boolean,
+  addon: ExtraDashboardValidatorsPremiumAddon
+  isYearly: boolean
   maximumValidatorLimit?: number
 }
 const props = defineProps<Props>()
@@ -20,39 +26,70 @@ const props = defineProps<Props>()
 const quantityForPurchase = ref(1)
 
 const prices = computed(() => {
-  const mainPrice = props.isYearly ? props.addon.price_per_year_eur / 12 : props.addon.price_per_month_eur
+  const mainPrice = props.isYearly
+    ? props.addon.price_per_year_eur / 12
+    : props.addon.price_per_month_eur
   const quantity = quantityForPurchase.value || 1
-  const savingAmount = (props.addon.price_per_month_eur * 12 - props.addon.price_per_year_eur) * quantity
+  const savingAmount
+    = (props.addon.price_per_month_eur * 12 - props.addon.price_per_year_eur)
+    * quantity
   const savingDigits = savingAmount % 100 === 0 ? 0 : 2
 
   return {
     main: formatPremiumProductPrice($t, mainPrice * quantity),
-    monthly: formatPremiumProductPrice($t, props.addon.price_per_month_eur * quantity),
-    monthly_based_on_yearly: formatPremiumProductPrice($t, props.addon.price_per_year_eur / 12 * quantity),
-    yearly: formatPremiumProductPrice($t, props.addon.price_per_year_eur * quantity),
+    monthly: formatPremiumProductPrice(
+      $t,
+      props.addon.price_per_month_eur * quantity,
+    ),
+    monthly_based_on_yearly: formatPremiumProductPrice(
+      $t,
+      (props.addon.price_per_year_eur / 12) * quantity,
+    ),
+    yearly: formatPremiumProductPrice(
+      $t,
+      props.addon.price_per_year_eur * quantity,
+    ),
     saving: formatPremiumProductPrice($t, savingAmount, savingDigits),
-    perValidator: formatPremiumProductPrice($t, mainPrice / props.addon.extra_dashboard_validators, 5)
+    perValidator: formatPremiumProductPrice(
+      $t,
+      mainPrice / props.addon.extra_dashboard_validators,
+      5,
+    ),
   }
 })
 
 const boxText = computed(() => {
   return {
-    validatorCount: $t('pricing.addons.validator_amount', { amount: formatNumber(props.addon.extra_dashboard_validators) }),
-    perValidator: $t('pricing.per_validator', { amount: prices.value.perValidator })
+    validatorCount: $t('pricing.addons.validator_amount', {
+      amount: formatNumber(props.addon.extra_dashboard_validators),
+    }),
+    perValidator: $t('pricing.per_validator', {
+      amount: prices.value.perValidator,
+    }),
   }
 })
 
 const addonSubscriptionCount = computed(() => {
-  return user.value?.subscriptions?.filter(sub => sub.product_category === ProductCategoryPremiumAddon && (sub.product_id === props.addon.product_id_monthly || sub.product_id === props.addon.product_id_yearly)).length || 0
+  return (
+    user.value?.subscriptions?.filter(
+      sub =>
+        sub.product_category === ProductCategoryPremiumAddon
+        && (sub.product_id === props.addon.product_id_monthly
+        || sub.product_id === props.addon.product_id_yearly),
+    ).length || 0
+  )
 })
 
 const addonButton = computed(() => {
   let text = $t('pricing.get_started')
   if (isLoggedIn.value) {
-    text = addonSubscriptionCount.value > 0 ? $t('pricing.addons.button.manage_addon') : $t('pricing.addons.button.select_addon')
+    text
+      = addonSubscriptionCount.value > 0
+        ? $t('pricing.addons.button.manage_addon')
+        : $t('pricing.addons.button.select_addon')
   }
 
-  async function callback () {
+  async function callback() {
     if (isStripeDisabled.value) {
       return
     }
@@ -60,10 +97,17 @@ const addonButton = computed(() => {
     if (isLoggedIn.value) {
       if (addonSubscriptionCount.value > 0) {
         await stripeCustomerPortal()
-      } else {
-        await stripePurchase(props.isYearly ? props.addon.stripe_price_id_yearly : props.addon.stripe_price_id_monthly, quantityForPurchase.value)
       }
-    } else {
+      else {
+        await stripePurchase(
+          props.isYearly
+            ? props.addon.stripe_price_id_yearly
+            : props.addon.stripe_price_id_monthly,
+          quantityForPurchase.value,
+        )
+      }
+    }
+    else {
       await navigateTo('/login')
     }
   }
@@ -71,12 +115,16 @@ const addonButton = computed(() => {
   return {
     text,
     disabled: isStripeDisabled.value,
-    callback
+    callback,
   }
 })
 
 const maximumQuantity = computed(() => {
-  return Math.floor(((props.maximumValidatorLimit || 10000) - (user.value?.premium_perks.validators_per_dashboard || 0)) / props.addon.extra_dashboard_validators)
+  return Math.floor(
+    ((props.maximumValidatorLimit || 10000)
+    - (user.value?.premium_perks.validators_per_dashboard || 0))
+    / props.addon.extra_dashboard_validators,
+  )
 })
 
 const limitReached = computed(() => {
@@ -91,7 +139,7 @@ const purchaseQuantityButtons = computed(() => {
         if (quantityForPurchase.value > 1) {
           quantityForPurchase.value--
         }
-      }
+      },
     },
     plus: {
       disabled: limitReached.value,
@@ -99,11 +147,10 @@ const purchaseQuantityButtons = computed(() => {
         if (quantityForPurchase.value < maximumQuantity.value) {
           quantityForPurchase.value++
         }
-      }
-    }
+      },
+    },
   }
 })
-
 </script>
 
 <template>
@@ -112,12 +159,24 @@ const purchaseQuantityButtons = computed(() => {
       <div class="validator-count">
         {{ boxText.validatorCount }}
         <div class="subtext">
-          {{ $t('pricing.addons.per_dashboard') }}
-          <BcTooltip position="top" :fit-content="true">
-            <FontAwesomeIcon :icon="faInfoCircle" class="tooltip-icon" />
+          {{ $t("pricing.addons.per_dashboard") }}
+          <BcTooltip
+            position="top"
+            :fit-content="true"
+          >
+            <FontAwesomeIcon
+              :icon="faInfoCircle"
+              class="tooltip-icon"
+            />
             <template #tooltip>
               <div class="saving-tooltip-container">
-                {{ $t('pricing.pectra_tooltip', { effectiveBalance: formatNumber(props.addon?.extra_dashboard_validators * 32) }) }}
+                {{
+                  $t("pricing.pectra_tooltip", {
+                    effectiveBalance: formatNumber(
+                      props.addon?.extra_dashboard_validators * 32,
+                    ),
+                  })
+                }}
               </div>
             </template>
           </BcTooltip>
@@ -133,11 +192,14 @@ const purchaseQuantityButtons = computed(() => {
           <div>
             {{ prices.monthly_based_on_yearly }}
           </div>
-          <div class="month" yearly>
-            {{ $t('pricing.per_month') }}
+          <div
+            class="month"
+            yearly
+          >
+            {{ $t("pricing.per_month") }}
           </div>
           <div class="year">
-            {{ $t('pricing.amount_per_year', {amount: prices.yearly}) }}*
+            {{ $t("pricing.amount_per_year", { amount: prices.yearly }) }}*
           </div>
         </template>
         <template v-else>
@@ -145,28 +207,49 @@ const purchaseQuantityButtons = computed(() => {
             {{ prices.monthly }}
           </div>
           <div class="month">
-            {{ $t('pricing.per_month') }}*
+            {{ $t("pricing.per_month") }}*
           </div>
         </template>
       </div>
-      <div v-if="isYearly" class="saving-info">
+      <div
+        v-if="isYearly"
+        class="saving-info"
+      >
         <div>
-          {{ $t('pricing.savings', {amount: prices.saving}) }}
+          {{ $t("pricing.savings", { amount: prices.saving }) }}
         </div>
-        <BcTooltip position="top" :fit-content="true">
+        <BcTooltip
+          position="top"
+          :fit-content="true"
+        >
           <FontAwesomeIcon :icon="faInfoCircle" />
           <template #tooltip>
             <div class="saving-tooltip-container">
-              {{ $t('pricing.savings_tooltip', {monthly: prices.monthly, monthly_yearly: prices.monthly_based_on_yearly}) }}
+              {{
+                $t("pricing.savings_tooltip", {
+                  monthly: prices.monthly,
+                  monthly_yearly: prices.monthly_based_on_yearly,
+                })
+              }}
             </div>
           </template>
         </BcTooltip>
       </div>
       <div class="quantity-row">
-        <div v-if="addonSubscriptionCount" class="quantity-label">
-          {{ $t('pricing.addons.currently_active', { amount: addonSubscriptionCount }) }}
+        <div
+          v-if="addonSubscriptionCount"
+          class="quantity-label"
+        >
+          {{
+            $t("pricing.addons.currently_active", {
+              amount: addonSubscriptionCount,
+            })
+          }}
         </div>
-        <div v-else class="quantity-setter">
+        <div
+          v-else
+          class="quantity-setter"
+        >
           <Button
             class="p-button-icon-only"
             :disabled="purchaseQuantityButtons.minus.disabled"
@@ -192,20 +275,29 @@ const purchaseQuantityButtons = computed(() => {
       </div>
       <div class="limit-reached-row">
         <div v-if="limitReached">
-          {{ tOf($t, 'pricing.addons.contact_support', 0) }}
-          <BcLink to="https://dsc.gg/beaconchain  " :target="Target.External" class="link">
-            {{ tOf($t, 'pricing.addons.contact_support', 1) }}
+          {{ tOf($t, "pricing.addons.contact_support", 0) }}
+          <BcLink
+            to="https://dsc.gg/beaconchain  "
+            :target="Target.External"
+            class="link"
+          >
+            {{ tOf($t, "pricing.addons.contact_support", 1) }}
           </BcLink>
-          {{ tOf($t, 'pricing.addons.contact_support', 2) }}
+          {{ tOf($t, "pricing.addons.contact_support", 2) }}
         </div>
       </div>
-      <Button :label="addonButton.text" :disabled="addonButton.disabled" class="select-button" @click="addonButton.callback" />
+      <Button
+        :label="addonButton.text"
+        :disabled="addonButton.disabled"
+        class="select-button"
+        @click="addonButton.callback"
+      />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/pricing.scss';
+@use "~/assets/css/pricing.scss";
 
 .box-container {
   width: 290px;
@@ -405,7 +497,6 @@ const purchaseQuantityButtons = computed(() => {
             width: 20px;
           }
         }
-
       }
 
       .limit-reached-row {
diff --git a/frontend/components/pricing/PremiumAddons.vue b/frontend/components/pricing/PremiumAddons.vue
index b9617c674..f11b14b60 100644
--- a/frontend/components/pricing/PremiumAddons.vue
+++ b/frontend/components/pricing/PremiumAddons.vue
@@ -12,10 +12,10 @@ defineProps<Props>()
   <div class="addons-container">
     <div class="text-container">
       <div class="title">
-        {{ $t('pricing.addons.title') }}
+        {{ $t("pricing.addons.title") }}
       </div>
       <div class="subtitle">
-        {{ $t('pricing.addons.subtitle') }}
+        {{ $t("pricing.addons.subtitle") }}
       </div>
     </div>
     <div class="addons-row">
@@ -69,11 +69,11 @@ defineProps<Props>()
     .text-container {
       gap: 8px;
 
-      .title{
+      .title {
         font-size: 16px;
       }
 
-      .subtitle{
+      .subtitle {
         font-size: 18px;
       }
     }
diff --git a/frontend/components/pricing/PremiumCompare.vue b/frontend/components/pricing/PremiumCompare.vue
index e848db8f7..43e2d8110 100644
--- a/frontend/components/pricing/PremiumCompare.vue
+++ b/frontend/components/pricing/PremiumCompare.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { get } from 'lodash-es'
-import {
-  faInfoCircle
-} from '@fortawesome/pro-regular-svg-icons'
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { PremiumPerks } from '~/types/api/user'
 
@@ -11,27 +9,30 @@ const { products } = useProductsStore()
 const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
 
 type CompareValue = {
-  value?: string | boolean,
-  tooltip?: string,
+  value?: string | boolean
+  tooltip?: string
   class?: string
 }
 
 type RowType = 'header' | 'group' | 'perc' | 'label'
 
 type CompareRow = {
-  type: RowType,
-  label?: string,
-  subText?: string,
-  values?: CompareValue[],
+  type: RowType
+  label?: string
+  subText?: string
+  values?: CompareValue[]
   className?: string
 }
 
 const showContent = ref(false)
 
 const rows = computed(() => {
-  const sorted = products.value?.premium_products?.toSorted((a, b) => a.price_per_month_eur - b.price_per_month_eur) ?? []
+  const sorted
+    = products.value?.premium_products?.toSorted(
+      (a, b) => a.price_per_month_eur - b.price_per_month_eur,
+    ) ?? []
   const rows: CompareRow[] = []
-  const mapValue = (property: string, perks: PremiumPerks):CompareValue => {
+  const mapValue = (property: string, perks: PremiumPerks): CompareValue => {
     if (['support_us', 'bulk_adding'].includes(property)) {
       return { value: perks.ad_free }
     }
@@ -39,25 +40,38 @@ const rows = computed(() => {
 
     if (!value) {
       value = false
-    } else if (property.includes('_seconds')) {
+    }
+    else if (property.includes('_seconds')) {
       if (value === Number.MAX_SAFE_INTEGER) {
         value = $t('pricing.full_history')
-      } else {
-        value = $t('common.last_x', { duration: formatTimeDuration(value as number, $t) })
+      }
+      else {
+        value = $t('common.last_x', {
+          duration: formatTimeDuration(value as number, $t),
+        })
       }
     }
 
     let tooltip: string | undefined
     if (property === 'validators_per_dashboard') {
-      tooltip = $t('pricing.pectra_tooltip', { effectiveBalance: formatNumber(perks.validators_per_dashboard * 32) })
+      tooltip = $t('pricing.pectra_tooltip', {
+        effectiveBalance: formatNumber(perks.validators_per_dashboard * 32),
+      })
     }
 
     return {
       value,
-      tooltip
+      tooltip,
     }
   }
-  const addRow = (type: RowType, property?: string, className?: string, subText?: string, hidePositiveValues = false, translationKey?: string) => {
+  const addRow = (
+    type: RowType,
+    property?: string,
+    className?: string,
+    subText?: string,
+    hidePositiveValues = false,
+    translationKey?: string,
+  ) => {
     const row: CompareRow = { type, subText, className }
     switch (type) {
       case 'header':
@@ -103,59 +117,127 @@ const rows = computed(() => {
   addRow('perc', 'validator_groups_per_dashboard')
   addRow('perc', 'share_custom_dashboards')
   addRow('perc', 'manage_dashboard_via_api', undefined, comingSoon)
-  addRow('perc', 'bulk_adding', 'last-in-group', $t('pricing.percs.bulk_adding_subtext'))
+  addRow(
+    'perc',
+    'bulk_adding',
+    'last-in-group',
+    $t('pricing.percs.bulk_adding_subtext'),
+  )
   addRow('group', 'dashboard_charts')
   addRow('label', 'summary_chart_history', 'first-in-group')
   const chartProps = ['epoch', 'hourly', 'daily', 'weekly']
-  chartProps.forEach(p => addRow('perc', `chart_history_seconds.${p}`, undefined, undefined, undefined, `time_frames.${p}`))
+  chartProps.forEach(p =>
+    addRow(
+      'perc',
+      `chart_history_seconds.${p}`,
+      undefined,
+      undefined,
+      undefined,
+      `time_frames.${p}`,
+    ),
+  )
 
   addRow('label', 'heatmap_history', 'last-in-group', comingSoon)
 
-  addRow('group', 'notification', undefined, showInDevelopment ? undefined : comingSoon)
-  addRow('perc', 'email_notifications_per_day', 'first-in-group', undefined, !showInDevelopment)
+  addRow(
+    'group',
+    'notification',
+    undefined,
+    showInDevelopment ? undefined : comingSoon,
+  )
+  addRow(
+    'perc',
+    'email_notifications_per_day',
+    'first-in-group',
+    undefined,
+    !showInDevelopment,
+  )
   addRow('perc', 'configure_notifications_via_api')
 
-  addRow('perc', 'validator_group_notifications', undefined, undefined, !showInDevelopment)
-  addRow('perc', 'webhook_endpoints', 'last-in-group', undefined, !showInDevelopment)
+  addRow(
+    'perc',
+    'validator_group_notifications',
+    undefined,
+    undefined,
+    !showInDevelopment,
+  )
+  addRow(
+    'perc',
+    'webhook_endpoints',
+    'last-in-group',
+    undefined,
+    !showInDevelopment,
+  )
 
   addRow('group', 'mobille_app')
   addRow('perc', 'mobile_app_custom_themes', 'first-in-group')
   addRow('perc', 'mobile_app_widget')
   addRow('perc', 'monitor_machines')
   addRow('perc', 'machine_monitoring_history_seconds')
-  addRow('perc', 'custom_machine_alerts', 'last last-in-group', $t('pricing.percs.custom_machine_alerts_subtext'))
+  addRow(
+    'perc',
+    'custom_machine_alerts',
+    'last last-in-group',
+    $t('pricing.percs.custom_machine_alerts_subtext'),
+  )
 
   return rows
 })
-
 </script>
 
 <template>
   <div class="compare-plans-container">
-    <h1>{{ $t('pricing.compare') }}</h1>
-    <div class="content" :class="{ 'show-content': showContent }">
-      <div v-for="(row, index) in rows" :key="index" :class="[row.type, row.className]" class="row">
+    <h1>{{ $t("pricing.compare") }}</h1>
+    <div
+      class="content"
+      :class="{ 'show-content': showContent }"
+    >
+      <div
+        v-for="(row, index) in rows"
+        :key="index"
+        :class="[row.type, row.className]"
+        class="row"
+      >
         <div class="label">
           <span>{{ row.label }}</span>
-          <span v-if="row.subText" class="sub-text"> {{ row.subText }}</span>
+          <span
+            v-if="row.subText"
+            class="sub-text"
+          > {{ row.subText }}</span>
         </div>
-        <div v-for="(value, vIndex) in row.values" :key="vIndex" class="value" :class="value.class">
+        <div
+          v-for="(value, vIndex) in row.values"
+          :key="vIndex"
+          class="value"
+          :class="value.class"
+        >
           <span v-if="typeof value.value === 'boolean'">
             <BcFeatureCheck :available="value.value" />
           </span>
           <span v-else>
             {{ value.value }}
           </span>
-          <BcTooltip v-if="value.tooltip" :fit-content="true" :text="value.tooltip" class="info-icon">
+          <BcTooltip
+            v-if="value.tooltip"
+            :fit-content="true"
+            :text="value.tooltip"
+            class="info-icon"
+          >
             <FontAwesomeIcon :icon="faInfoCircle" />
           </BcTooltip>
         </div>
       </div>
       <BcBlurOverlay class="blur" />
     </div>
-    <div class="button-row" :class="{ 'show-content': showContent }">
-      <Button class="pricing_button" @click="() => showContent = !showContent">
-        {{ $t(showContent ? 'pricing.hide_feature' : 'pricing.show_feature') }}
+    <div
+      class="button-row"
+      :class="{ 'show-content': showContent }"
+    >
+      <Button
+        class="pricing_button"
+        @click="() => (showContent = !showContent)"
+      >
+        {{ $t(showContent ? "pricing.hide_feature" : "pricing.show_feature") }}
       </Button>
     </div>
   </div>
@@ -362,7 +444,6 @@ const rows = computed(() => {
         }
       }
     }
-
   }
 
   .button-row {
diff --git a/frontend/components/pricing/PremiumFeature.vue b/frontend/components/pricing/PremiumFeature.vue
index 7e4ec3e7e..3c54e614f 100644
--- a/frontend/components/pricing/PremiumFeature.vue
+++ b/frontend/components/pricing/PremiumFeature.vue
@@ -9,34 +9,54 @@ interface Props {
   feature: Feature
 }
 defineProps<Props>()
-
 </script>
 
 <template>
   <div class="feature-container">
     <div class="main-row">
       <BcFeatureCheck :available="feature.available" />
-      <div class="description" :class="{ 'unavailable': !feature.available }">
+      <div
+        class="description"
+        :class="{ unavailable: !feature.available }"
+      >
         <div class="name">
           {{ feature.name }}
         </div>
-        <div v-if="feature.subtext || feature.tooltip" class="additional-info-row">
+        <div
+          v-if="feature.subtext || feature.tooltip"
+          class="additional-info-row"
+        >
           <div v-if="feature.subtext">
             {{ feature.subtext }}
           </div>
-          <BcTooltip v-if="feature.tooltip" position="top" :fit-content="true" :text="feature.tooltip" class="tooltip-icon">
+          <BcTooltip
+            v-if="feature.tooltip"
+            position="top"
+            :fit-content="true"
+            :text="feature.tooltip"
+            class="tooltip-icon"
+          >
             <FontAwesomeIcon :icon="faInfoCircle" />
           </BcTooltip>
         </div>
       </div>
-      <BcLink v-if="feature.link" class="link" :to="feature.link" target="_blank">
+      <BcLink
+        v-if="feature.link"
+        class="link"
+        :to="feature.link"
+        target="_blank"
+      >
         <FontAwesomeIcon
           class="popout"
           :icon="faArrowUpRightFromSquare"
         />
       </BcLink>
     </div>
-    <BcFractionBar v-if="feature.percentage" :fill-percentage="feature.percentage" class="fraction-bar-container" />
+    <BcFractionBar
+      v-if="feature.percentage"
+      :fill-percentage="feature.percentage"
+      class="fraction-bar-container"
+    />
   </div>
 </template>
 
diff --git a/frontend/components/pricing/PremiumProductBox.vue b/frontend/components/pricing/PremiumProductBox.vue
index 0c0f35d1c..e6e123bc7 100644
--- a/frontend/components/pricing/PremiumProductBox.vue
+++ b/frontend/components/pricing/PremiumProductBox.vue
@@ -8,30 +8,47 @@ import type { Feature } from '~/types/pricing'
 /// ///////////////
 // import { formatTimeDuration } from '~/utils/format' TODO: See commented code below
 
-const { products, bestPremiumProduct, currentPremiumSubscription, isPremiumSubscribedViaApp } = useProductsStore()
+const {
+  products,
+  bestPremiumProduct,
+  currentPremiumSubscription,
+  isPremiumSubscribedViaApp,
+} = useProductsStore()
 const { isLoggedIn } = useUserStore()
 const { t: $t } = useTranslation()
 const { stripeCustomerPortal, stripePurchase, isStripeDisabled } = useStripe()
 
 interface Props {
-  product: PremiumProduct,
+  product: PremiumProduct
   isYearly: boolean
 }
 const props = defineProps<Props>()
 
 const prices = computed(() => {
-  const mainPrice = props.isYearly ? props.product.price_per_year_eur / 12 : props.product.price_per_month_eur
+  const mainPrice = props.isYearly
+    ? props.product.price_per_year_eur / 12
+    : props.product.price_per_month_eur
 
-  const savingAmount = props.product.price_per_month_eur * 12 - props.product.price_per_year_eur
+  const savingAmount
+    = props.product.price_per_month_eur * 12 - props.product.price_per_year_eur
   const savingDigits = savingAmount % 100 === 0 ? 0 : 2
 
   return {
     main: formatPremiumProductPrice($t, mainPrice),
     monthly: formatPremiumProductPrice($t, props.product.price_per_month_eur),
-    monthly_based_on_yearly: formatPremiumProductPrice($t, props.product.price_per_year_eur / 12),
+    monthly_based_on_yearly: formatPremiumProductPrice(
+      $t,
+      props.product.price_per_year_eur / 12,
+    ),
     yearly: formatPremiumProductPrice($t, props.product.price_per_year_eur),
     saving: formatPremiumProductPrice($t, savingAmount, savingDigits),
-    perValidator: formatPremiumProductPrice($t, mainPrice / props.product.premium_perks.validators_per_dashboard / props.product.premium_perks.validator_dashboards, 6)
+    perValidator: formatPremiumProductPrice(
+      $t,
+      mainPrice
+      / props.product.premium_perks.validators_per_dashboard
+      / props.product.premium_perks.validator_dashboards,
+      6,
+    ),
   }
 })
 
@@ -41,7 +58,7 @@ const percentages = computed(() => {
       validatorDashboards: 100,
       validatorsPerDashboard: 100,
       summaryChart: 100,
-      heatmapChart: 100
+      heatmapChart: 100,
     }
   }
 
@@ -49,17 +66,26 @@ const percentages = computed(() => {
   let chartPercent = 1
   // TODO: remove check for chart_history_seconds once the API is live
   if (props.product.premium_perks.chart_history_seconds) {
-    chartPercent = props.product.premium_perks.chart_history_seconds.hourly / (bestProduct.premium_perks.chart_history_seconds.hourly) * 100
+    chartPercent
+      = (props.product.premium_perks.chart_history_seconds.hourly
+      / bestProduct.premium_perks.chart_history_seconds.hourly)
+      * 100
   }
   return {
-    validatorDashboards: props.product.premium_perks.validator_dashboards / (bestProduct.premium_perks.validator_dashboards) * 100,
-    validatorsPerDashboard: props.product.premium_perks.validators_per_dashboard / (bestProduct.premium_perks.validators_per_dashboard) * 100,
+    validatorDashboards:
+      (props.product.premium_perks.validator_dashboards
+      / bestProduct.premium_perks.validator_dashboards)
+      * 100,
+    validatorsPerDashboard:
+      (props.product.premium_perks.validators_per_dashboard
+      / bestProduct.premium_perks.validators_per_dashboard)
+      * 100,
     summaryChart: chartPercent,
-    heatmapChart: chartPercent
+    heatmapChart: chartPercent,
   }
 })
 
-async function buttonCallback () {
+async function buttonCallback() {
   if (planButton.value.disabled) {
     return
   }
@@ -67,10 +93,17 @@ async function buttonCallback () {
   if (isLoggedIn.value) {
     if (currentPremiumSubscription.value) {
       await stripeCustomerPortal()
-    } else {
-      await stripePurchase(props.isYearly ? props.product.stripe_price_id_yearly : props.product.stripe_price_id_monthly, 1)
     }
-  } else {
+    else {
+      await stripePurchase(
+        props.isYearly
+          ? props.product.stripe_price_id_yearly
+          : props.product.stripe_price_id_monthly,
+        1,
+      )
+    }
+  }
+  else {
     await navigateTo('/login')
   }
 }
@@ -81,55 +114,98 @@ const planButton = computed(() => {
 
   if (isLoggedIn.value) {
     if (currentPremiumSubscription.value) {
-      const subscribedProduct = products.value?.premium_products.find(product => product.product_id_monthly === currentPremiumSubscription.value!.product_id || product.product_id_yearly === currentPremiumSubscription.value!.product_id)
-      if ((currentPremiumSubscription.value.product_id === props.product.product_id_monthly || currentPremiumSubscription.value.product_id === props.product.product_id_yearly) || subscribedProduct === undefined) {
-        // (this box is either for the subscribed product) || (the user has an unknown product, possible from V1 or maybe a custom plan)
+      const subscribedProduct = products.value?.premium_products.find(
+        product =>
+          product.product_id_monthly
+          === currentPremiumSubscription.value!.product_id
+          || product.product_id_yearly
+          === currentPremiumSubscription.value!.product_id,
+      )
+      if (
+        currentPremiumSubscription.value.product_id
+        === props.product.product_id_monthly
+        || currentPremiumSubscription.value.product_id
+        === props.product.product_id_yearly
+        || subscribedProduct === undefined
+      ) {
+        // (this box is either for the subscribed product)
+        // || (the user has an unknown product, possible from V1 or maybe a custom plan)
         text = $t('pricing.premium_product.button.manage_plan')
-      } else if (subscribedProduct.price_per_month_eur < props.product.price_per_month_eur) {
+      }
+      else if (
+        subscribedProduct.price_per_month_eur
+        < props.product.price_per_month_eur
+      ) {
         text = $t('pricing.premium_product.button.upgrade')
-      } else {
+      }
+      else {
         isDowngrade = true
         text = $t('pricing.premium_product.button.downgrade')
       }
     }
-  } else {
+  }
+  else {
     text = $t('pricing.get_started')
   }
 
-  const disabled = isStripeDisabled.value || isPremiumSubscribedViaApp.value || undefined
+  const disabled
+    = isStripeDisabled.value || isPremiumSubscribedViaApp.value || undefined
 
   return { text, isDowngrade, disabled }
 })
 
 const mainFeatures = computed<Feature[]>(() => {
-  const validatorPerDashboardAmount = formatNumber(props.product?.premium_perks.validators_per_dashboard)
+  const validatorPerDashboardAmount = formatNumber(
+    props.product?.premium_perks.validators_per_dashboard,
+  )
   return [
     {
-      name: $t('pricing.premium_product.validator_dashboards', { amount: formatNumber(props.product?.premium_perks.validator_dashboards) }, (props.product?.premium_perks.validator_dashboards || 0) <= 1 ? 1 : 2),
+      name: $t(
+        'pricing.premium_product.validator_dashboards',
+        {
+          amount: formatNumber(
+            props.product?.premium_perks.validator_dashboards,
+          ),
+        },
+        (props.product?.premium_perks.validator_dashboards || 0) <= 1 ? 1 : 2,
+      ),
       available: true,
-      percentage: percentages.value.validatorDashboards
+      percentage: percentages.value.validatorDashboards,
     },
     {
-      name: props.product.premium_perks.validator_dashboards === 1
-        ? $t('pricing.premium_product.validators', { amount: validatorPerDashboardAmount })
-        : $t('pricing.premium_product.validators_per_dashboard', { amount: validatorPerDashboardAmount }),
-      subtext: $t('pricing.per_validator', { amount: prices.value.perValidator }),
+      name:
+        props.product.premium_perks.validator_dashboards === 1
+          ? $t('pricing.premium_product.validators', {
+            amount: validatorPerDashboardAmount,
+          })
+          : $t('pricing.premium_product.validators_per_dashboard', {
+            amount: validatorPerDashboardAmount,
+          }),
+      subtext: $t('pricing.per_validator', {
+        amount: prices.value.perValidator,
+      }),
       available: true,
-      tooltip: $t('pricing.pectra_tooltip', { effectiveBalance: formatNumber(props.product?.premium_perks.validators_per_dashboard * 32) }),
-      percentage: percentages.value.validatorsPerDashboard
+      tooltip: $t('pricing.pectra_tooltip', {
+        effectiveBalance: formatNumber(
+          props.product?.premium_perks.validators_per_dashboard * 32,
+        ),
+      }),
+      percentage: percentages.value.validatorsPerDashboard,
     },
     {
-      name: $t('pricing.premium_product.timeframe_dashboard_chart_no_timeframe'),
+      name: $t(
+        'pricing.premium_product.timeframe_dashboard_chart_no_timeframe',
+      ),
       subtext: $t('pricing.premium_product.coming_soon'),
       available: true,
-      percentage: percentages.value.summaryChart
+      percentage: percentages.value.summaryChart,
     },
     {
       name: $t('pricing.premium_product.timeframe_heatmap_chart_no_timeframe'),
       subtext: $t('pricing.premium_product.coming_soon'),
       available: true,
-      percentage: percentages.value.heatmapChart
-    }
+      percentage: percentages.value.heatmapChart,
+    },
   ]
 })
 
@@ -137,35 +213,40 @@ const minorFeatures = computed<Feature[]>(() => {
   return [
     {
       name: $t('pricing.premium_product.no_ads'),
-      available: props.product?.premium_perks.ad_free
+      available: props.product?.premium_perks.ad_free,
     },
     {
       name: $t('pricing.premium_product.share_dashboard'),
-      available: props.product?.premium_perks.share_custom_dashboards
+      available: props.product?.premium_perks.share_custom_dashboards,
     },
     {
       name: $t('pricing.premium_product.mobile_app_widget'),
       link: '/mobile',
-      available: props.product?.premium_perks.mobile_app_widget
+      available: props.product?.premium_perks.mobile_app_widget,
     },
     {
       name: $t('pricing.premium_product.manage_dashboard_via_api'),
       subtext: $t('pricing.premium_product.coming_soon'),
-      available: props.product?.premium_perks.manage_dashboard_via_api
-    }
+      available: props.product?.premium_perks.manage_dashboard_via_api,
+    },
   ]
 })
-
 </script>
 
 <template>
-  <div class="box-container" :popular="product.is_popular || null">
+  <div
+    class="box-container"
+    :popular="product.is_popular || null"
+  >
     <div class="name-container">
       <div class="name">
         {{ props.product?.product_name }}
       </div>
-      <div v-if="product.is_popular" class="popular">
-        {{ $t('pricing.premium_product.popular') }}
+      <div
+        v-if="product.is_popular"
+        class="popular"
+      >
+        {{ $t("pricing.premium_product.popular") }}
       </div>
     </div>
     <div class="features-container">
@@ -174,21 +255,32 @@ const minorFeatures = computed<Feature[]>(() => {
       </div>
       <div class="prize-subtext">
         <div>
-          <span>{{ $t('pricing.per_month') }}</span><span v-if="!isYearly">*</span>
+          <span>{{ $t("pricing.per_month") }}</span><span v-if="!isYearly">*</span>
         </div>
         <div v-if="isYearly">
-          {{ $t('pricing.amount_per_year', {amount: prices.yearly}) }}*
+          {{ $t("pricing.amount_per_year", { amount: prices.yearly }) }}*
         </div>
       </div>
-      <div v-if="isYearly" class="saving-info">
+      <div
+        v-if="isYearly"
+        class="saving-info"
+      >
         <div>
-          {{ $t('pricing.savings', {amount: prices.saving}) }}
+          {{ $t("pricing.savings", { amount: prices.saving }) }}
         </div>
-        <BcTooltip position="top" :fit-content="true">
+        <BcTooltip
+          position="top"
+          :fit-content="true"
+        >
           <FontAwesomeIcon :icon="faInfoCircle" />
           <template #tooltip>
             <div class="saving-tooltip-container">
-              {{ $t('pricing.savings_tooltip', {monthly: prices.monthly, monthly_yearly: prices.monthly_based_on_yearly}) }}
+              {{
+                $t("pricing.savings_tooltip", {
+                  monthly: prices.monthly,
+                  monthly_yearly: prices.monthly_based_on_yearly,
+                })
+              }}
             </div>
           </template>
         </BcTooltip>
@@ -208,16 +300,27 @@ const minorFeatures = computed<Feature[]>(() => {
           :link="feature.link"
         />
       </div>
-      <div v-if="planButton.isDowngrade" :disabled="planButton.disabled" class="plan-button dismiss" @click="buttonCallback()">
+      <div
+        v-if="planButton.isDowngrade"
+        :disabled="planButton.disabled"
+        class="plan-button dismiss"
+        @click="buttonCallback()"
+      >
         {{ planButton.text }}
       </div>
-      <Button v-else :label="planButton.text" :disabled="planButton.disabled" class="plan-button" @click="buttonCallback()" />
+      <Button
+        v-else
+        :label="planButton.text"
+        :disabled="planButton.disabled"
+        class="plan-button"
+        @click="buttonCallback()"
+      />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/pricing.scss';
+@use "~/assets/css/pricing.scss";
 
 .box-container {
   box-sizing: border-box;
@@ -301,7 +404,7 @@ const minorFeatures = computed<Feature[]>(() => {
       margin-bottom: 35px;
     }
 
-    .minor-features-container{
+    .minor-features-container {
       display: flex;
       flex-direction: column;
       gap: 9px;
diff --git a/frontend/components/pricing/PremiumProducts.vue b/frontend/components/pricing/PremiumProducts.vue
index 9f496e63d..da890794b 100644
--- a/frontend/components/pricing/PremiumProducts.vue
+++ b/frontend/components/pricing/PremiumProducts.vue
@@ -11,7 +11,10 @@ defineProps<Props>()
 <template>
   <div class="premium-products-container">
     <div class="premium-products-row">
-      <template v-for="product in products?.premium_products" :key="product.product_id_yearly">
+      <template
+        v-for="product in products?.premium_products"
+        :key="product.product_id_yearly"
+      >
         <PricingPremiumProductBox
           v-if="product.price_per_year_eur > 0"
           :product
@@ -20,7 +23,7 @@ defineProps<Props>()
       </template>
     </div>
     <div class="footnote">
-      {{ $t('pricing.excluding_vat') }}
+      {{ $t("pricing.excluding_vat") }}
     </div>
   </div>
 </template>
@@ -51,7 +54,7 @@ defineProps<Props>()
 }
 
 @media (max-width: 1360px) {
-  .premium-products-container{
+  .premium-products-container {
     margin-bottom: 36px;
     .premium-products-row {
       gap: 10px;
diff --git a/frontend/components/pricing/PremiumViaAppBanner.vue b/frontend/components/pricing/PremiumViaAppBanner.vue
index 080b7ae94..7f829ccf7 100644
--- a/frontend/components/pricing/PremiumViaAppBanner.vue
+++ b/frontend/components/pricing/PremiumViaAppBanner.vue
@@ -4,8 +4,11 @@ const { isPremiumSubscribedViaApp } = useProductsStore()
 </script>
 
 <template>
-  <div v-if="isPremiumSubscribedViaApp" class="banner">
-    {{ $t('pricing.premium_via_app_banner') }}
+  <div
+    v-if="isPremiumSubscribedViaApp"
+    class="banner"
+  >
+    {{ $t("pricing.premium_via_app_banner") }}
   </div>
 </template>
 
diff --git a/frontend/components/pricing/TypeToggle.vue b/frontend/components/pricing/TypeToggle.vue
index 3ae9a3a9c..a27a3c636 100644
--- a/frontend/components/pricing/TypeToggle.vue
+++ b/frontend/components/pricing/TypeToggle.vue
@@ -1,20 +1,21 @@
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <div class="type-toggle-container">
     <div class="premium">
       <div class="label">
-        {{ $t('pricing.premium') }}
+        {{ $t("pricing.premium") }}
       </div>
     </div>
-    <div class="api-keys" disabled>
+    <div
+      class="api-keys"
+      disabled
+    >
       <div class="label">
-        {{ $t('pricing.API_keys') }}
+        {{ $t("pricing.API_keys") }}
       </div>
       <div class="subtext">
-        {{ $t('common.coming_soon') }}
+        {{ $t("common.coming_soon") }}
       </div>
     </div>
   </div>
@@ -90,7 +91,7 @@
       font-weight: var(--montserrat-bold);
     }
 
-    .api-keys .subtext{
+    .api-keys .subtext {
       font-size: 9px;
     }
   }
diff --git a/frontend/components/rocketpool/RocketpoolToggle.vue b/frontend/components/rocketpool/RocketpoolToggle.vue
index 415725fe8..346a8dc96 100644
--- a/frontend/components/rocketpool/RocketpoolToggle.vue
+++ b/frontend/components/rocketpool/RocketpoolToggle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
-  faInfoCircle
+  faInfoCircle,
 } from '@fortawesome/pro-regular-svg-icons'
 
 const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
@@ -9,27 +9,42 @@ const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
 const { setting, changeSetting } = useGlobalSetting<boolean>('rpl')
 
 const rpActive = {
-  get value ():boolean {
+  get value(): boolean {
     return setting.value ?? true
   },
-  set value (newValue: boolean) {
+  set value(newValue: boolean) {
     changeSetting(newValue)
-  }
+  },
 }
-
 </script>
+
 <template>
-  <div class="rp-row" :class="{ 'disable-in-production': !showInDevelopment }" @click.stop="">
+  <div
+    class="rp-row"
+    :class="{ 'disable-in-production': !showInDevelopment }"
+    @click.stop=""
+  >
     <IconRocketPool class="icon" />
     <span class="text">
       {{ $t(`rocketpool.mode`) }}
     </span>
-    <BcTooltip class="link" :text="$t('rocketpool.tooltip')">
-      <FontAwesomeIcon :icon="faInfoCircle" class="tooltip-icon" />
+    <BcTooltip
+      class="link"
+      :text="$t('rocketpool.tooltip')"
+    >
+      <FontAwesomeIcon
+        :icon="faInfoCircle"
+        class="tooltip-icon"
+      />
     </BcTooltip>
-    <BcToggle v-model="rpActive.value" class="toggle" :disabled="!showInDevelopment" />
+    <BcToggle
+      v-model="rpActive.value"
+      class="toggle"
+      :disabled="!showInDevelopment"
+    />
   </div>
 </template>
+
 <style lang="scss" scoped>
 .rp-row {
   display: flex;
diff --git a/frontend/components/slot/viz/SlotVizIcon.vue b/frontend/components/slot/viz/SlotVizIcon.vue
index 6f0add034..6c5490dfa 100644
--- a/frontend/components/slot/viz/SlotVizIcon.vue
+++ b/frontend/components/slot/viz/SlotVizIcon.vue
@@ -5,8 +5,8 @@ interface Props {
   icon: SlotVizIcons
 }
 const props = defineProps<Props>()
-
 </script>
+
 <template>
   <IconSlotAttestation v-if="props.icon === 'attestation'" />
   <IconSlotHeadAttestation v-else-if="props.icon === 'head_attestation'" />
diff --git a/frontend/components/slot/viz/SlotVizTile.vue b/frontend/components/slot/viz/SlotVizTile.vue
index 07e12aa25..59e31a698 100644
--- a/frontend/components/slot/viz/SlotVizTile.vue
+++ b/frontend/components/slot/viz/SlotVizTile.vue
@@ -1,20 +1,32 @@
 <script setup lang="ts">
 import type { VDBSlotVizSlot } from '~/types/api/slot_viz'
-import { type SlotVizCategories, type SlotVizIcons } from '~/types/dashboard/slotViz'
+import {
+  type SlotVizCategories,
+  type SlotVizIcons,
+} from '~/types/dashboard/slotViz'
+
 interface Props {
-  data: VDBSlotVizSlot,
-  currentSlotId?: number,
+  data: VDBSlotVizSlot
+  currentSlotId?: number
   selectedCategories: SlotVizCategories[]
 }
 const props = defineProps<Props>()
 
 const data = computed(() => {
-  const slot:VDBSlotVizSlot = {
+  const slot: VDBSlotVizSlot = {
     ...props.data,
-    attestations: props.selectedCategories.includes('attestation') ? props.data.attestations : undefined,
-    proposal: props.selectedCategories.includes('proposal') ? props.data.proposal : undefined,
-    slashing: props.selectedCategories.includes('slashing') ? props.data.slashing : undefined,
-    sync: props.selectedCategories.includes('sync') ? props.data.sync : undefined
+    attestations: props.selectedCategories.includes('attestation')
+      ? props.data.attestations
+      : undefined,
+    proposal: props.selectedCategories.includes('proposal')
+      ? props.data.proposal
+      : undefined,
+    slashing: props.selectedCategories.includes('slashing')
+      ? props.data.slashing
+      : undefined,
+    sync: props.selectedCategories.includes('sync')
+      ? props.data.sync
+      : undefined,
   }
   const showIcons = props.selectedCategories.includes('visible')
   let outer = ''
@@ -30,7 +42,8 @@ const data = computed(() => {
     case 'scheduled':
       if (props.currentSlotId && props.currentSlotId > slot.slot) {
         outer = 'scheduled-past'
-      } else if (props.currentSlotId === slot.slot) {
+      }
+      else if (props.currentSlotId === slot.slot) {
         outer = 'scheduled-current'
       }
       break
@@ -42,19 +55,32 @@ const data = computed(() => {
   let inner = ''
   if (slot.status === 'scheduled') {
     inner = 'pending'
-  } else {
-    const hasFailed = !!slot.attestations?.failed || !!slot.sync?.failed || !!slot.slashing?.failed || (!!slot.proposal && slot.status === 'missed')
-    const hasSuccess = !!slot.attestations?.success || !!slot.sync?.success || !!slot.slashing?.success || (!!slot.proposal && slot.status === 'proposed')
+  }
+  else {
+    const hasFailed
+      = !!slot.attestations?.failed
+      || !!slot.sync?.failed
+      || !!slot.slashing?.failed
+      || (!!slot.proposal && slot.status === 'missed')
+    const hasSuccess
+      = !!slot.attestations?.success
+      || !!slot.sync?.success
+      || !!slot.slashing?.success
+      || (!!slot.proposal && slot.status === 'proposed')
     const hasPending = !!slot.attestations?.scheduled || !!slot.sync?.scheduled
     if (!hasFailed && !hasSuccess && !hasPending) {
       inner = 'proposed'
-    } else if (hasFailed && hasSuccess) {
+    }
+    else if (hasFailed && hasSuccess) {
       inner = 'mixed'
-    } else if (hasFailed) {
+    }
+    else if (hasFailed) {
       inner = 'missed'
-    } else if (hasSuccess) {
+    }
+    else if (hasSuccess) {
       inner = 'proposed'
-    } else if (hasPending) {
+    }
+    else if (hasPending) {
       inner = 'pending'
     }
   }
@@ -79,21 +105,46 @@ const data = computed(() => {
     outer,
     inner,
     icons,
-    firstIconClass: `count_${icons.length}`
+    firstIconClass: `count_${icons.length}`,
   }
 })
 </script>
+
 <template>
-  <SlotVizTooltip :id="data.id" :data="props.data" :current-slot-id="currentSlotId">
-    <div :id="data.id" class="tile" :class="data.outer">
-      <div class="inner" :class="data.inner">
-        <IconPlus v-show="data.icons?.length > 2" class="plus" />
-        <SlotVizIcon v-if="data.icons?.length" :icon="data.icons[0]" class="first_icon" :class="data.firstIconClass" />
-        <SlotVizIcon v-if="data.icons?.length === 2" :icon="data.icons[1]" class="second_icon" />
+  <SlotVizTooltip
+    :id="data.id"
+    :data="props.data"
+    :current-slot-id="currentSlotId"
+  >
+    <div
+      :id="data.id"
+      class="tile"
+      :class="data.outer"
+    >
+      <div
+        class="inner"
+        :class="data.inner"
+      >
+        <IconPlus
+          v-show="data.icons?.length > 2"
+          class="plus"
+        />
+        <SlotVizIcon
+          v-if="data.icons?.length"
+          :icon="data.icons[0]"
+          class="first_icon"
+          :class="data.firstIconClass"
+        />
+        <SlotVizIcon
+          v-if="data.icons?.length === 2"
+          :icon="data.icons[1]"
+          class="second_icon"
+        />
       </div>
     </div>
   </SlotVizTooltip>
 </template>
+
 <style lang="scss" scoped>
 .tile {
   display: flex;
@@ -148,14 +199,14 @@ const data = computed(() => {
     height: 10px;
   }
 }
-.scheduled-current{
+.scheduled-current {
   box-shadow: 0px 0px 2px var(--text-color);
 }
-.scheduled-past{
+.scheduled-past {
   opacity: 0.5;
-  background-color: rgb(100,100,100);
+  background-color: rgb(100, 100, 100);
   .inner {
-    background-color: rgb(100,100,100);
+    background-color: rgb(100, 100, 100);
   }
 }
 
diff --git a/frontend/components/slot/viz/SlotVizTooltip.vue b/frontend/components/slot/viz/SlotVizTooltip.vue
index 4fad583dc..499b81f5e 100644
--- a/frontend/components/slot/viz/SlotVizTooltip.vue
+++ b/frontend/components/slot/viz/SlotVizTooltip.vue
@@ -1,11 +1,30 @@
 <script setup lang="ts">
-import type { VDBSlotVizDuty, VDBSlotVizSlot, VDBSlotVizStatus } from '~/types/api/slot_viz'
+import type {
+  VDBSlotVizDuty,
+  VDBSlotVizSlot,
+  VDBSlotVizStatus,
+} from '~/types/api/slot_viz'
 import { type SlotVizIcons } from '~/types/dashboard/slotViz'
-type RowDuty = { validator?: number; dutySubText?: string; dutySubLink?: string, duty_object?: number }
-type Row = { count?: number; icon: SlotVizIcons; class?: string; change?: string; dutyText?: string, validators?: number[], duties?: RowDuty[], andMore?: number }
+
+type RowDuty = {
+  validator?: number
+  dutySubText?: string
+  dutySubLink?: string
+  duty_object?: number
+}
+type Row = {
+  count?: number
+  icon: SlotVizIcons
+  class?: string
+  change?: string
+  dutyText?: string
+  validators?: number[]
+  duties?: RowDuty[]
+  andMore?: number
+}
 interface Props {
   id: string
-  data: VDBSlotVizSlot,
+  data: VDBSlotVizSlot
   currentSlotId?: number
 }
 const props = defineProps<Props>()
@@ -15,11 +34,18 @@ const data = computed(() => {
   const slot = props.data
   const rows: Row[][] = []
 
-  const status = slot.status === 'scheduled' && slot.slot < (props.currentSlotId ?? 0) ? 'scheduled-past' : slot.status
+  const status
+    = slot.status === 'scheduled' && slot.slot < (props.currentSlotId ?? 0)
+      ? 'scheduled-past'
+      : slot.status
 
   const networkLabelPath = `slotViz.tooltip.network.${status}`
 
-  const hasDuties = !!slot?.proposal || !!slot?.slashing || !!slot?.attestations || !!slot?.sync
+  const hasDuties
+    = !!slot?.proposal
+    || !!slot?.slashing
+    || !!slot?.attestations
+    || !!slot?.sync
   let hasSuccessDuties = false
   let hasFailedDuties = false
   let maxCount = 0
@@ -44,49 +70,65 @@ const data = computed(() => {
           hasScheduledDuty = true
           break
       }
-      rows.push([{
-        class: className,
-        icon: 'proposal',
-        dutyText,
-        count: 1,
-        duties: [
-          {
-            ...slot.proposal,
-            dutySubText,
-            dutySubLink: slot.status === 'proposed' ? `/block/${slot.proposal.duty_object}` : `/slot/${slot.proposal.duty_object}`
-          }
-        ]
-      }])
+      rows.push([
+        {
+          class: className,
+          icon: 'proposal',
+          dutyText,
+          count: 1,
+          duties: [
+            {
+              ...slot.proposal,
+              dutySubText,
+              dutySubLink:
+                slot.status === 'proposed'
+                  ? `/block/${slot.proposal.duty_object}`
+                  : `/slot/${slot.proposal.duty_object}`,
+            },
+          ],
+        },
+      ])
     }
 
     if (slot.slashing?.failed) {
       const dutyText = $t('slotViz.tooltip.slashing.failed.main')
       const dutySubText = $t('slotViz.tooltip.slashing.failed.sub')
-      rows.push([{
-        class: 'failed',
-        icon: 'slashing',
-        dutyText,
-        count: slot.slashing.failed.total_count,
-        duties: slot.slashing.failed.slashings?.map(slash => ({
-          ...slash,
-          dutySubText,
-          dutySubLink: `/validator/${slash.duty_object}`
-        })),
-        andMore: Math.max(0, (slot.slashing.failed.total_count - slot.slashing.failed.slashings?.length))
-      }])
+      rows.push([
+        {
+          class: 'failed',
+          icon: 'slashing',
+          dutyText,
+          count: slot.slashing.failed.total_count,
+          duties: slot.slashing.failed.slashings?.map(slash => ({
+            ...slash,
+            dutySubText,
+            dutySubLink: `/validator/${slash.duty_object}`,
+          })),
+          andMore: Math.max(
+            0,
+            slot.slashing.failed.total_count
+            - slot.slashing.failed.slashings?.length,
+          ),
+        },
+      ])
     }
     if (slot.slashing?.success) {
       hasSuccessDuties = true
       const dutyText = $t('slotViz.tooltip.slashing.success.main')
-      rows.push([{
-        class: 'success',
-        icon: 'slashing',
-        dutyText,
-        count: slot.slashing.success.total_count
-      }])
+      rows.push([
+        {
+          class: 'success',
+          icon: 'slashing',
+          dutyText,
+          count: slot.slashing.success.total_count,
+        },
+      ])
     }
 
-    const addDuties = (type: SlotVizIcons, duty?: VDBSlotVizStatus<VDBSlotVizDuty>) => {
+    const addDuties = (
+      type: SlotVizIcons,
+      duty?: VDBSlotVizStatus<VDBSlotVizDuty>,
+    ) => {
       if (!duty) {
         return
       }
@@ -103,7 +145,10 @@ const data = computed(() => {
           count: duty.scheduled.total_count,
           dutyText,
           validators: duty.scheduled.validators,
-          andMore: Math.max(0, (duty.scheduled.total_count - duty.scheduled.validators?.length))
+          andMore: Math.max(
+            0,
+            duty.scheduled.total_count - duty.scheduled.validators?.length,
+          ),
         })
       }
       if (duty.success) {
@@ -113,7 +158,7 @@ const data = computed(() => {
           class: 'success',
           icon: type,
           count: duty.success.total_count,
-          dutyText
+          dutyText,
         })
       }
       if (duty.failed) {
@@ -125,7 +170,10 @@ const data = computed(() => {
           count: duty.failed.total_count,
           dutyText,
           validators: duty.failed.validators,
-          andMore: Math.max(0, (duty.failed.total_count - duty.failed.validators?.length))
+          andMore: Math.max(
+            0,
+            duty.failed.total_count - duty.failed.validators?.length,
+          ),
         })
       }
     }
@@ -133,18 +181,46 @@ const data = computed(() => {
     addDuties('sync', slot.sync)
   }
 
-  const isScheduled = slot.status === 'scheduled' || (slot.status === 'proposed' && hasScheduledDuty)
+  const isScheduled
+    = slot.status === 'scheduled'
+    || (slot.status === 'proposed' && hasScheduledDuty)
   let stateLabel = ''
   if (isScheduled) {
-    stateLabel = formatMultiPartSpan($t, `slotViz.tooltip.status.scheduled.${hasDuties ? 'has_duties' : 'no_duties'}`, [undefined, 'scheduled', undefined])
-  } else if (hasFailedDuties && hasSuccessDuties) {
-    stateLabel = formatMultiPartSpan($t, 'slotViz.tooltip.status.duties_some', [undefined, 'some', undefined])
-  } else if (hasFailedDuties) {
-    stateLabel = formatMultiPartSpan($t, 'slotViz.tooltip.status.duties_failed', [undefined, 'failed', undefined])
-  } else if (hasSuccessDuties) {
-    stateLabel = formatMultiPartSpan($t, 'slotViz.tooltip.status.duties_success', [undefined, 'success', undefined])
-  } else {
-    stateLabel = formatMultiPartSpan($t, 'slotViz.tooltip.status.no_duties', [undefined, 'scheduled', undefined])
+    stateLabel = formatMultiPartSpan(
+      $t,
+      `slotViz.tooltip.status.scheduled.${
+        hasDuties ? 'has_duties' : 'no_duties'
+      }`,
+      [undefined, 'scheduled', undefined],
+    )
+  }
+  else if (hasFailedDuties && hasSuccessDuties) {
+    stateLabel = formatMultiPartSpan($t, 'slotViz.tooltip.status.duties_some', [
+      undefined,
+      'some',
+      undefined,
+    ])
+  }
+  else if (hasFailedDuties) {
+    stateLabel = formatMultiPartSpan(
+      $t,
+      'slotViz.tooltip.status.duties_failed',
+      [undefined, 'failed', undefined],
+    )
+  }
+  else if (hasSuccessDuties) {
+    stateLabel = formatMultiPartSpan(
+      $t,
+      'slotViz.tooltip.status.duties_success',
+      [undefined, 'success', undefined],
+    )
+  }
+  else {
+    stateLabel = formatMultiPartSpan($t, 'slotViz.tooltip.status.no_duties', [
+      undefined,
+      'scheduled',
+      undefined,
+    ])
   }
 
   return {
@@ -152,57 +228,116 @@ const data = computed(() => {
     networkLabelPath,
     rows,
     hasDuties,
-    minWidth: (1 + (`${maxCount}`.length) * 11) + 'px'
+    minWidth: 1 + `${maxCount}`.length * 11 + 'px',
   }
 })
 </script>
+
 <template>
-  <BcTooltip :target="props.id" layout="special" scroll-container="#slot-viz" :hover-delay="350">
+  <BcTooltip
+    :target="props.id"
+    layout="special"
+    scroll-container="#slot-viz"
+    :hover-delay="350"
+  >
     <slot />
     <template #tooltip>
       <div class="with-duties">
         <div class="rows">
           <div class="row network">
-            <i18n-t :keypath="data.networkLabelPath" tag="span">
+            <i18n-t
+              :keypath="data.networkLabelPath"
+              tag="span"
+            >
               <template #slot>
-                <BcLink :to="`/slot/${props.data.slot}`" target="_blank" class="link">
+                <BcLink
+                  :to="`/slot/${props.data.slot}`"
+                  target="_blank"
+                  class="link"
+                >
                   <BcFormatNumber :value="props.data.slot" />
                 </BcLink>
               </template>
             </i18n-t>
           </div>
-          <!--eslint-disable-next-line vue/no-v-html-->
-          <div class="row state" v-html="data.stateLabel" />
+          <!-- eslint-disable vue/no-v-html -->
+          <div
+            class="row state"
+            v-html="data.stateLabel"
+          />
+          <!-- eslint-enable vue/no-v-html -->
         </div>
-        <div v-for="(rows, index) in data.rows" :key="index" class="rows">
-          <div v-for="row in rows" :key="row.class" class="row">
-            <div class="count-icon" :class="row.class">
-              <span :style="{minWidth: data.minWidth}">{{ row.count }}x</span>
-              <SlotVizIcon :icon="row.icon" class="icon" />
+        <div
+          v-for="(rows, index) in data.rows"
+          :key="index"
+          class="rows"
+        >
+          <div
+            v-for="row in rows"
+            :key="row.class"
+            class="row"
+          >
+            <div
+              class="count-icon"
+              :class="row.class"
+            >
+              <span :style="{ minWidth: data.minWidth }">{{ row.count }}x</span>
+              <SlotVizIcon
+                :icon="row.icon"
+                class="icon"
+              />
             </div>
             <div class="value-col">
               <span :class="row.class">{{ row.dutyText }}</span>
-              <div v-if="row.validators?.length" class="validators">
-                <span v-for="(validator, vIndex) in row.validators" :key="validator">
-                  <BcLink :to="`/validator/${validator}`" target="_blank" class="link">
+              <div
+                v-if="row.validators?.length"
+                class="validators"
+              >
+                <span
+                  v-for="(validator, vIndex) in row.validators"
+                  :key="validator"
+                >
+                  <BcLink
+                    :to="`/validator/${validator}`"
+                    target="_blank"
+                    class="link"
+                  >
                     {{ validator }}
                   </BcLink>
-                  <span v-if="vIndex < row.validators.length -1 || row.andMore">, </span>
+                  <span v-if="vIndex < row.validators.length - 1 || row.andMore">,
+                  </span>
+                </span>
+                <span v-if="row.andMore">
+                  ...{{ $t("common.and_more", { count: row.andMore }) }}
                 </span>
-                <span v-if="row.andMore"> ...{{ $t('common.and_more', { count: row.andMore }) }} </span>
               </div>
-              <div v-if="row.duties" class="duties">
-                <div v-for="(duty, d_index) in row.duties" :key="d_index">
-                  <BcLink :to="`/validator/${duty.validator}`" target="_blank" class="link">
+              <div
+                v-if="row.duties"
+                class="duties"
+              >
+                <div
+                  v-for="(duty, d_index) in row.duties"
+                  :key="d_index"
+                >
+                  <BcLink
+                    :to="`/validator/${duty.validator}`"
+                    target="_blank"
+                    class="link"
+                  >
                     {{ duty.validator }}
                   </BcLink>
                   <span class="sub-text"> {{ duty.dutySubText }} </span>
-                  <BcLink v-if="duty.dutySubLink" :to="duty.dutySubLink" target="_blank" class="link">
+                  <BcLink
+                    v-if="duty.dutySubLink"
+                    :to="duty.dutySubLink"
+                    target="_blank"
+                    class="link"
+                  >
                     {{ duty.duty_object }}
                   </BcLink>
                 </div>
                 <div v-if="row.andMore">
-                  ...{{ $t('common.and_more', { count: row.andMore }) }}
+                  ...{{ $t("common.and_more", { count: row.andMore }) }}
                 </div>
               </div>
             </div>
@@ -228,7 +363,7 @@ const data = computed(() => {
       padding-left: var(--padding);
       padding-right: var(--padding);
 
-      &:has(+.rows) {
+      &:has(+ .rows) {
         border-bottom: 3px solid var(--container-border-color);
       }
     }
@@ -242,10 +377,10 @@ const data = computed(() => {
     }
 
     .row {
-        display: flex;
-        align-items: center;
+      display: flex;
+      align-items: center;
 
-      &.state{
+      &.state {
         text-align: left;
       }
 
@@ -277,7 +412,7 @@ const data = computed(() => {
       }
 
       .duties > div,
-      .validators{
+      .validators {
         margin-top: var(--padding);
       }
 
@@ -310,8 +445,8 @@ const data = computed(() => {
           gap: var(--padding-tiny);
           // otherwise the text: `...and XX more` will mess up the first column
           > span:not(:has(> a)) {
-              grid-column: span 2;
-              text-align: left
+            grid-column: span 2;
+            text-align: left;
           }
         }
       }
diff --git a/frontend/components/slot/viz/SlotVizViewer.vue b/frontend/components/slot/viz/SlotVizViewer.vue
index b3f20c240..1c25a0e34 100644
--- a/frontend/components/slot/viz/SlotVizViewer.vue
+++ b/frontend/components/slot/viz/SlotVizViewer.vue
@@ -1,21 +1,24 @@
 <script setup lang="ts">
 import { faEye } from '@fortawesome/pro-solid-svg-icons'
-import {
-  faInfoCircle
-} from '@fortawesome/pro-regular-svg-icons'
+import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { SlotVizEpoch } from '~/types/api/slot_viz'
 import { type SlotVizCategories } from '~/types/dashboard/slotViz'
 import { formatNumber } from '~/utils/format'
-import { IconSlotAttestation, IconSlotBlockProposal, IconSlotSlashing, IconSlotSync } from '#components'
+import {
+  IconSlotAttestation,
+  IconSlotBlockProposal,
+  IconSlotSlashing,
+  IconSlotSync,
+} from '#components'
 import { COOKIE_KEY } from '~/types/cookie'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 import type { MultiBarItem } from '~/types/multiBar'
 import type { ChainInfoFields } from '~/types/network'
 
 interface Props {
-  data: SlotVizEpoch[],
-  initiallyHideVisible?: boolean,
+  data: SlotVizEpoch[]
+  initiallyHideVisible?: boolean
   timestamp?: number
   networkInfo?: ChainInfoFields
 }
@@ -24,31 +27,47 @@ const props = defineProps<Props>()
 const { tsToSlot } = useNetworkStore()
 const { t: $t } = useTranslation()
 
-const selectedCategories = useCookie<SlotVizCategories[]>(COOKIE_KEY.SLOT_VIZ_SELECTED_CATEGORIES, { default: () => ['attestation', 'proposal', 'slashing', 'sync', 'visible', 'initial'] })
+const selectedCategories = useCookie<SlotVizCategories[]>(
+  COOKIE_KEY.SLOT_VIZ_SELECTED_CATEGORIES,
+  {
+    default: () => [
+      'attestation',
+      'proposal',
+      'slashing',
+      'sync',
+      'visible',
+      'initial',
+    ],
+  },
+)
 
 const icons: MultiBarItem[] = [
   {
     component: IconSlotBlockProposal,
     value: 'proposal',
-    tooltip: $t('slotViz.filter.proposal')
-  }, {
+    tooltip: $t('slotViz.filter.proposal'),
+  },
+  {
     component: IconSlotAttestation,
     value: 'attestation',
-    tooltip: $t('slotViz.filter.attestation')
-  }, {
+    tooltip: $t('slotViz.filter.attestation'),
+  },
+  {
     component: IconSlotSync,
     value: 'sync',
-    tooltip: $t('slotViz.filter.sync')
-  }, {
+    tooltip: $t('slotViz.filter.sync'),
+  },
+  {
     component: IconSlotSlashing,
     value: 'slashing',
-    tooltip: $t('slotViz.filter.slashing')
-  }, {
+    tooltip: $t('slotViz.filter.slashing'),
+  },
+  {
     icon: faEye,
     value: 'visible',
     className: 'visible-icon',
-    tooltip: $t('slotViz.filter.visible')
-  }
+    tooltip: $t('slotViz.filter.visible'),
+  },
 ]
 
 const mostRecentScheduledSlotId = computed(() => {
@@ -65,7 +84,8 @@ const mostRecentScheduledSlotId = computed(() => {
     for (let j = row.slots.length - 1; j >= 0; j--) {
       if (row.slots[j].status === 'scheduled') {
         id = row.slots[j].slot
-      } else {
+      }
+      else {
         return id
       }
     }
@@ -75,41 +95,63 @@ const mostRecentScheduledSlotId = computed(() => {
 
 const currentSlotId = computed(() => {
   // in case of some backend issues Inan want's us to tick in the future ... so let's tick
-  return Math.max(mostRecentScheduledSlotId.value ?? 0, tsToSlot((props.timestamp ?? 0) / 1000) - 1)
+  return Math.max(
+    mostRecentScheduledSlotId.value ?? 0,
+    tsToSlot((props.timestamp ?? 0) / 1000) - 1,
+  )
 })
 
-watch(() => props, () => {
-  if (props.initiallyHideVisible !== undefined) {
-    const initialIndex = selectedCategories.value.indexOf('initial')
-    if (initialIndex < 0) {
-      return
-    }
-    const categories = selectedCategories.value
-    if (props.initiallyHideVisible) {
-      categories.splice(initialIndex, 1)
-      const visibleIndex = categories.indexOf('visible')
-      if (visibleIndex >= 0) {
-        categories.splice(visibleIndex, 1)
+watch(
+  () => props,
+  () => {
+    if (props.initiallyHideVisible !== undefined) {
+      const initialIndex = selectedCategories.value.indexOf('initial')
+      if (initialIndex < 0) {
+        return
+      }
+      const categories = selectedCategories.value
+      if (props.initiallyHideVisible) {
+        categories.splice(initialIndex, 1)
+        const visibleIndex = categories.indexOf('visible')
+        if (visibleIndex >= 0) {
+          categories.splice(visibleIndex, 1)
+        }
+      }
+      else {
+        categories.splice(initialIndex, 1, 'visible')
       }
-    } else {
-      categories.splice(initialIndex, 1, 'visible')
-    }
-
-    selectedCategories.value = categories
-  }
-}, { immediate: true })
 
+      selectedCategories.value = categories
+    }
+  },
+  { immediate: true },
+)
 </script>
+
 <template>
-  <div id="slot-viz" class="content">
+  <div
+    id="slot-viz"
+    class="content"
+  >
     <div class="header-row">
-      <BcTooltip class="info" :text="$t('slotViz.info_tootlip')" :dont-open-permanently="true">
-        <BcLink to="https://kb.beaconcha.in/v2beta/slot-visualization#how-does-it-work" target="_blank" class="link">
+      <BcTooltip
+        class="info"
+        :text="$t('slotViz.info_tootlip')"
+        :dont-open-permanently="true"
+      >
+        <BcLink
+          to="https://kb.beaconcha.in/v2beta/slot-visualization#how-does-it-work"
+          target="_blank"
+          class="link"
+        >
           <FontAwesomeIcon :icon="faInfoCircle" />
         </BcLink>
-      </BCTooltip>
+      </BcTooltip>
       <div class="filter-row">
-        <BcToggleMultiBar v-model="selectedCategories" :buttons="icons" />
+        <BcToggleMultiBar
+          v-model="selectedCategories"
+          :buttons="icons"
+        />
       </div>
       <h1 class="network">
         {{ networkInfo?.name }}
@@ -119,9 +161,18 @@ watch(() => props, () => {
       </div>
     </div>
     <div class="grid">
-      <template v-for="row in props.data" :key="row.epoch">
+      <template
+        v-for="row in props.data"
+        :key="row.epoch"
+      >
         <div class="epoch">
-          <BcFormatNumber :text="row.state === 'head' ? $t('slotViz.head') : formatNumber(row.epoch)" />
+          <BcFormatNumber
+            :text="
+              row.state === 'head'
+                ? $t('slotViz.head')
+                : formatNumber(row.epoch)
+            "
+          />
         </div>
         <div class="row">
           <SlotVizTile
@@ -136,9 +187,10 @@ watch(() => props, () => {
     </div>
   </div>
 </template>
+
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/main.scss";
+@use "~/assets/css/fonts.scss";
 
 .content {
   position: relative;
@@ -149,13 +201,11 @@ watch(() => props, () => {
     justify-content: center;
     padding: var(--padding-large) var(--padding-large) var(--padding) 9px;
     gap: var(--padding);
-    grid-template:
-      [row1-start] "info filter-row network header-right"[row1-end] / max-content max-content 1fr max-content;
+    grid-template: [row1-start] "info filter-row network header-right" [row1-end] / max-content max-content 1fr max-content;
 
     @media (max-width: 800px) {
       column-gap: var(--padding-small);
-      grid-template:
-        [row1-start] "network network network"[row1-end] [row2-start] "info filter-row header-right"[row2-end] / max-content max-content 1fr;
+      grid-template: [row1-start] "network network network" [row1-end] [row2-start] "info filter-row header-right" [row2-end] / max-content max-content 1fr;
     }
 
     @media (max-width: 490px) {
@@ -237,7 +287,7 @@ watch(() => props, () => {
   }
 
   :deep(.visible-icon):before {
-    content: ' ';
+    content: " ";
     background-color: var(--container-border-color);
     height: 100%;
     width: 1px;
diff --git a/frontend/components/user/settings/UserSettingsDeleteAccount.vue b/frontend/components/user/settings/UserSettingsDeleteAccount.vue
index 31052eb2c..7476eeede 100644
--- a/frontend/components/user/settings/UserSettingsDeleteAccount.vue
+++ b/frontend/components/user/settings/UserSettingsDeleteAccount.vue
@@ -13,12 +13,14 @@ const onDelete = () => {
   dialog.open(BcDialogConfirm, {
     data: {
       title: $t('user_settings.delete_account.dialog.title'),
-      question: $t('user_settings.delete_account.dialog.warning', { email: user.value?.email || $t('common.unavailable') }),
+      question: $t('user_settings.delete_account.dialog.warning', {
+        email: user.value?.email || $t('common.unavailable'),
+      }),
       noLabel: $t('user_settings.delete_account.dialog.no_label'),
       yesLabel: $t('user_settings.delete_account.dialog.yes_label'),
-      severity: 'danger'
+      severity: 'danger',
     },
-    onClose: response => response?.data && deleteAction()
+    onClose: response => response?.data && deleteAction(),
   })
 }
 
@@ -31,28 +33,33 @@ const deleteAction = async () => {
   await fetch(API_PATH.USER_DELETE)
   await navigateTo('/')
 }
-
 </script>
 
 <template>
   <div class="subscriptions-container">
     <div class="title">
-      {{ $t('user_settings.delete_account.title') }}
+      {{ $t("user_settings.delete_account.title") }}
     </div>
     <div class="content-container">
       <div class="warning">
-        {{ $t('user_settings.delete_account.warning') }}
+        {{ $t("user_settings.delete_account.warning") }}
       </div>
       <div class="button-container">
-        <Button :label="$t('user_settings.delete_account.button')" :disabled="buttonsDisabled" severity="danger" class="delete-button" @click="onDelete" />
+        <Button
+          :label="$t('user_settings.delete_account.button')"
+          :disabled="buttonsDisabled"
+          severity="danger"
+          class="delete-button"
+          @click="onDelete"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/main.scss";
+@use "~/assets/css/fonts.scss";
 
 .subscriptions-container {
   display: flex;
diff --git a/frontend/components/user/settings/UserSettingsEmail.vue b/frontend/components/user/settings/UserSettingsEmail.vue
index 46569c2a5..c0b3521b3 100644
--- a/frontend/components/user/settings/UserSettingsEmail.vue
+++ b/frontend/components/user/settings/UserSettingsEmail.vue
@@ -11,8 +11,8 @@ const { handleSubmit, errors, defineField } = useForm({
   validationSchema: yupObject({
     password: passwordValidation($t),
     newEmail: emailValidation($t),
-    confirmEmail: confirmEmailValidation($t, 'newEmail')
-  })
+    confirmEmail: confirmEmailValidation($t, 'newEmail'),
+  }),
 })
 
 const [password, passwordAttrs] = defineField('password')
@@ -31,38 +31,47 @@ const onSubmit = handleSubmit(async (values, { resetForm }) => {
     await fetch(API_PATH.USER_CHANGE_EMAIL, {
       body: {
         password: values.password,
-        email: values.newEmail
-      }
+        email: values.newEmail,
+      },
+    })
+    toast.showSuccess({
+      summary: $t('user_settings.email.success.toast_title'),
+      group: $t('user_settings.email.success.toast_group'),
+      detail: $t('user_settings.email.success.toast_message'),
     })
-    toast.showSuccess(
-      {
-        summary: $t('user_settings.email.success.toast_title'),
-        group: $t('user_settings.email.success.toast_group'),
-        detail: $t('user_settings.email.success.toast_message')
-      })
     resetForm()
-  } catch (error) {
-    toast.showError(
-      {
-        summary: $t('user_settings.email.error.toast_title'),
-        group: $t('user_settings.email.error.toast_group'),
-        detail: $t('user_settings.email.error.toast_message')
-      })
+  }
+  catch (error) {
+    toast.showError({
+      summary: $t('user_settings.email.error.toast_title'),
+      group: $t('user_settings.email.error.toast_group'),
+      detail: $t('user_settings.email.error.toast_message'),
+    })
   }
   buttonsDisabled.value = false
 })
 
-const canSubmit = computed(() => !buttonsDisabled.value && newEmail.value && confirmEmail.value && newEmail.value === confirmEmail.value && password.value && !Object.keys(errors.value).length)
-
+const canSubmit = computed(
+  () =>
+    !buttonsDisabled.value
+    && newEmail.value
+    && confirmEmail.value
+    && newEmail.value === confirmEmail.value
+    && password.value
+    && !Object.keys(errors.value).length,
+)
 </script>
 
 <template>
-  <form class="email-container" @submit="onSubmit">
+  <form
+    class="email-container"
+    @submit="onSubmit"
+  >
     <div class="title">
-      {{ $t('user_settings.email.title') }}
+      {{ $t("user_settings.email.title") }}
     </div>
     <label for="password">
-      {{ $t('user_settings.email.password') }}
+      {{ $t("user_settings.email.password") }}
     </label>
     <div class="input-row">
       <InputText
@@ -78,7 +87,7 @@ const canSubmit = computed(() => !buttonsDisabled.value && newEmail.value && con
       </div>
     </div>
     <label for="new-email">
-      {{ $t('user_settings.email.new') }}
+      {{ $t("user_settings.email.new") }}
     </label>
     <div class="input-row">
       <InputText
@@ -94,7 +103,7 @@ const canSubmit = computed(() => !buttonsDisabled.value && newEmail.value && con
       </div>
     </div>
     <label for="confirm-email">
-      {{ $t('user_settings.email.confirm') }}
+      {{ $t("user_settings.email.confirm") }}
     </label>
     <div class="input-row">
       <InputText
@@ -110,14 +119,18 @@ const canSubmit = computed(() => !buttonsDisabled.value && newEmail.value && con
       </div>
     </div>
     <div class="button-row">
-      <Button type="submit" :disabled="!canSubmit" :label="$t('navigation.save')" />
+      <Button
+        type="submit"
+        :disabled="!canSubmit"
+        :label="$t('navigation.save')"
+      />
     </div>
   </form>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/main.scss";
+@use "~/assets/css/fonts.scss";
 
 .email-container {
   display: flex;
diff --git a/frontend/components/user/settings/UserSettingsPassword.vue b/frontend/components/user/settings/UserSettingsPassword.vue
index e466d58bb..8e70fb829 100644
--- a/frontend/components/user/settings/UserSettingsPassword.vue
+++ b/frontend/components/user/settings/UserSettingsPassword.vue
@@ -11,8 +11,8 @@ const { handleSubmit, errors, defineField } = useForm({
   validationSchema: yupObject({
     oldPassword: passwordValidation($t),
     newPassword: newPasswordValidation($t, 'oldPassword'),
-    confirmPassword: confirmPasswordValidation($t, 'newPassword')
-  })
+    confirmPassword: confirmPasswordValidation($t, 'newPassword'),
+  }),
 })
 
 const [oldPassword, oldPasswordAttrs] = defineField('oldPassword')
@@ -30,38 +30,47 @@ const onSubmit = handleSubmit(async (values, { resetForm }) => {
   try {
     await fetch(API_PATH.USER_CHANGE_PASSWORD, {
       body: {
-        password: values.newPassword
-      }
+        password: values.newPassword,
+      },
+    })
+    toast.showSuccess({
+      summary: $t('user_settings.password.success.toast_title'),
+      group: $t('user_settings.password.success.toast_group'),
+      detail: $t('user_settings.password.success.toast_message'),
     })
-    toast.showSuccess(
-      {
-        summary: $t('user_settings.password.success.toast_title'),
-        group: $t('user_settings.password.success.toast_group'),
-        detail: $t('user_settings.password.success.toast_message')
-      })
     resetForm()
-  } catch (error) {
-    toast.showError(
-      {
-        summary: $t('user_settings.password.error.toast_title'),
-        group: $t('user_settings.password.error.toast_group'),
-        detail: $t('user_settings.password.error.toast_message')
-      })
+  }
+  catch (error) {
+    toast.showError({
+      summary: $t('user_settings.password.error.toast_title'),
+      group: $t('user_settings.password.error.toast_group'),
+      detail: $t('user_settings.password.error.toast_message'),
+    })
   }
   buttonsDisabled.value = false
 })
 
-const canSubmit = computed(() => !buttonsDisabled.value && oldPassword.value && newPassword.value && confirmPassword.value && newPassword.value === confirmPassword.value && !Object.keys(errors.value).length)
-
+const canSubmit = computed(
+  () =>
+    !buttonsDisabled.value
+    && oldPassword.value
+    && newPassword.value
+    && confirmPassword.value
+    && newPassword.value === confirmPassword.value
+    && !Object.keys(errors.value).length,
+)
 </script>
 
 <template>
-  <form class="password-container" @submit="onSubmit">
+  <form
+    class="password-container"
+    @submit="onSubmit"
+  >
     <div class="title">
-      {{ $t('user_settings.password.title') }}
+      {{ $t("user_settings.password.title") }}
     </div>
     <label for="old-password">
-      {{ $t('user_settings.password.old') }}
+      {{ $t("user_settings.password.old") }}
     </label>
     <div class="input-row">
       <InputText
@@ -77,7 +86,7 @@ const canSubmit = computed(() => !buttonsDisabled.value && oldPassword.value &&
       </div>
     </div>
     <label for="new-password">
-      {{ $t('user_settings.password.new') }}
+      {{ $t("user_settings.password.new") }}
     </label>
     <div class="input-row">
       <InputText
@@ -93,7 +102,7 @@ const canSubmit = computed(() => !buttonsDisabled.value && oldPassword.value &&
       </div>
     </div>
     <label for="confirm-password">
-      {{ $t('user_settings.password.confirm') }}
+      {{ $t("user_settings.password.confirm") }}
     </label>
     <div class="input-row">
       <InputText
@@ -109,14 +118,18 @@ const canSubmit = computed(() => !buttonsDisabled.value && oldPassword.value &&
       </div>
     </div>
     <div class="button-row">
-      <Button type="submit" :disabled="!canSubmit" :label="$t('navigation.save')" />
+      <Button
+        type="submit"
+        :disabled="!canSubmit"
+        :label="$t('navigation.save')"
+      />
     </div>
   </form>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/main.scss";
+@use "~/assets/css/fonts.scss";
 
 .password-container {
   display: flex;
diff --git a/frontend/components/user/settings/UserSettingsSubscriptions.vue b/frontend/components/user/settings/UserSettingsSubscriptions.vue
index fc05b3442..fe35cb8b9 100644
--- a/frontend/components/user/settings/UserSettingsSubscriptions.vue
+++ b/frontend/components/user/settings/UserSettingsSubscriptions.vue
@@ -5,7 +5,7 @@ const { stripeCustomerPortal, isStripeDisabled } = useStripe()
 
 const buttonsDisabled = defineModel<boolean | undefined>({ required: true })
 
-async function goToStripeCustomerPortal () {
+async function goToStripeCustomerPortal() {
   if (planButton.value.disabled) {
     return
   }
@@ -16,34 +16,39 @@ async function goToStripeCustomerPortal () {
 }
 
 const planButton = computed(() => {
-  const text = currentPremiumSubscription.value ? $t('pricing.premium_product.button.manage_plan') : $t('pricing.premium_product.button.select_plan')
+  const text = currentPremiumSubscription.value
+    ? $t('pricing.premium_product.button.manage_plan')
+    : $t('pricing.premium_product.button.select_plan')
   const disabled = isStripeDisabled.value || buttonsDisabled.value || undefined
 
   return { text, disabled }
 })
-
 </script>
 
 <template>
   <div class="subscriptions-container">
     <div class="title">
-      {{ $t('user_settings.subscriptions.title') }}
+      {{ $t("user_settings.subscriptions.title") }}
     </div>
     <div class="subtitle">
-      {{ $t('premium.title') }} | {{ currentPremiumSubscription?.product_name }}
+      {{ $t("premium.title") }} | {{ currentPremiumSubscription?.product_name }}
     </div>
     <div class="explanation">
-      {{ $t('user_settings.subscriptions.explanation') }}
+      {{ $t("user_settings.subscriptions.explanation") }}
     </div>
     <div class="button-row">
-      <Button :label="planButton.text" :disabled="planButton.disabled" @click="goToStripeCustomerPortal()" />
+      <Button
+        :label="planButton.text"
+        :disabled="planButton.disabled"
+        @click="goToStripeCustomerPortal()"
+      />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/main.scss";
+@use "~/assets/css/fonts.scss";
 
 .subscriptions-container {
   display: flex;
diff --git a/frontend/components/validator/table/ValidatorTableDutyRewards.vue b/frontend/components/validator/table/ValidatorTableDutyRewards.vue
index 71cc81e73..51225acb2 100644
--- a/frontend/components/validator/table/ValidatorTableDutyRewards.vue
+++ b/frontend/components/validator/table/ValidatorTableDutyRewards.vue
@@ -4,7 +4,7 @@ import { formatRewardValueOption } from '~/utils/dashboard/table'
 import { totalDutyRewards } from '~/utils/dashboard/validator'
 
 interface Props {
-  data?: ValidatorHistoryDuties,
+  data?: ValidatorHistoryDuties
 }
 const props = defineProps<Props>()
 
@@ -12,11 +12,11 @@ const { t: $t } = useTranslation()
 
 const mapped = computed(() => {
   const total = totalDutyRewards(props.data)
-  const details: {label: string, value?: string}[] = []
+  const details: { label: string, value?: string }[] = []
   if (!total || total.isZero()) {
     return {
       total,
-      details
+      details,
     }
   }
 
@@ -26,7 +26,7 @@ const mapped = computed(() => {
     }
     details.push({
       label: $t(`validator.rewards.${key}`),
-      value
+      value,
     })
   }
 
@@ -34,26 +34,38 @@ const mapped = computed(() => {
   addDetail('attestation_source', props?.data?.attestation_source?.income)
   addDetail('attestation_target', props?.data?.attestation_target?.income)
   addDetail('proposer_el', props?.data?.proposal?.el_income)
-  addDetail('proposer_attestation', props?.data?.proposal?.cl_attestation_inclusion_income)
+  addDetail(
+    'proposer_attestation',
+    props?.data?.proposal?.cl_attestation_inclusion_income,
+  )
   addDetail('proposer_sync', props?.data?.proposal?.cl_sync_inclusion_income)
-  addDetail('proposer_slashing', props?.data?.proposal?.cl_slashing_inclusion_income)
+  addDetail(
+    'proposer_slashing',
+    props?.data?.proposal?.cl_slashing_inclusion_income,
+  )
   addDetail('total', total.toString())
   return {
     total,
-    details
+    details,
   }
 })
-
 </script>
+
 <template>
   <BcFormatValue
     :value="mapped.total"
     :use-colors="true"
     :options="formatRewardValueOption"
   >
-    <template v-if="mapped.details?.length" #tooltip>
+    <template
+      v-if="mapped.details?.length"
+      #tooltip
+    >
       <div class="tooltip">
-        <div v-for="detail in mapped.details" :key="detail.label">
+        <div
+          v-for="detail in mapped.details"
+          :key="detail.label"
+        >
           <b>{{ detail.label }}: </b>
           <BcFormatValue
             :value="detail.value"
@@ -65,10 +77,11 @@ const mapped = computed(() => {
     </template>
   </BcFormatValue>
 </template>
+
 <style lang="scss" scoped>
-.tooltip{
+.tooltip {
   text-align: left;
-  .head{
+  .head {
     margin-top: var(--padding);
   }
 }
diff --git a/frontend/components/validator/table/ValidatorTableDutyStatus.vue b/frontend/components/validator/table/ValidatorTableDutyStatus.vue
index ce74da616..4d6481d08 100644
--- a/frontend/components/validator/table/ValidatorTableDutyStatus.vue
+++ b/frontend/components/validator/table/ValidatorTableDutyStatus.vue
@@ -3,7 +3,7 @@ import type { ValidatorHistoryDuties } from '~/types/api/common'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 
 interface Props {
-  data?: ValidatorHistoryDuties,
+  data?: ValidatorHistoryDuties
   compact?: boolean
 }
 const props = defineProps<Props>()
@@ -12,7 +12,9 @@ const { t: $t } = useTranslation()
 const { networkInfo } = useNetworkStore()
 
 const mapped = computed(() => {
-  const mapSuccess = (status?: 'success' | 'partial' | 'failed' | 'orphaned') => {
+  const mapSuccess = (
+    status?: 'success' | 'partial' | 'failed' | 'orphaned',
+  ) => {
     const success = status === 'success'
 
     let className = ''
@@ -34,7 +36,7 @@ const mapped = computed(() => {
       success,
       className,
       status,
-      tooltip: ''
+      tooltip: '',
     }
   }
   const head = mapSuccess(props?.data?.attestation_head?.status)
@@ -54,61 +56,113 @@ const mapped = computed(() => {
     const failed = networkInfo.value.slotsPerEpoch - success
     sync.tooltip = `${success} / ${failed}`
   }
-  const totalClassName = !(head.status && source.status && target.status) ? '' : (head.success || source.success || target.success) ? 'positive' : 'negative'
-  const totalTooltipTitle = totalClassName ? totalClassName === 'positive' ? $t('validator.duty.attestation_included') : $t('validator.duty.attestation_missed') : ''
+  const totalClassName = !(head.status && source.status && target.status)
+    ? ''
+    : head.success || source.success || target.success
+      ? 'positive'
+      : 'negative'
+  const totalTooltipTitle = totalClassName
+    ? totalClassName === 'positive'
+      ? $t('validator.duty.attestation_included')
+      : $t('validator.duty.attestation_missed')
+    : ''
   return {
     total: {
       className: totalClassName,
-      tooltipTitle: totalTooltipTitle
+      tooltipTitle: totalTooltipTitle,
     },
     head,
     source,
     target,
     proposal,
     slashing,
-    sync
+    sync,
   }
 })
-
 </script>
+
 <template>
   <div class="duty-status-container">
     <BcTooltip :fit-content="true">
-      <template v-if="mapped.total.tooltipTitle" #tooltip>
+      <template
+        v-if="mapped.total.tooltipTitle"
+        #tooltip
+      >
         <div class="tooltip">
           <b>
             {{ mapped.total.tooltipTitle }}
           </b>
           <div class="head">
-            <b>{{ $t('validator.duty.head') }}:</b> {{ $t(`common.${mapped.head.success}`) }}
+            <b>{{ $t("validator.duty.head") }}:</b>
+            {{ $t(`common.${mapped.head.success}`) }}
+          </div>
+          <div>
+            <b>{{ $t("validator.duty.source") }}:</b>
+            {{ $t(`common.${mapped.source.success}`) }}
+          </div>
+          <div>
+            <b>{{ $t("validator.duty.target") }}:</b>
+            {{ $t(`common.${mapped.target.success}`) }}
           </div>
-          <div><b>{{ $t('validator.duty.source') }}:</b> {{ $t(`common.${mapped.source.success}`) }}</div>
-          <div><b>{{ $t('validator.duty.target') }}:</b> {{ $t(`common.${mapped.target.success}`) }}</div>
         </div>
       </template>
-      <div class="attestations group" :class="mapped.total.className">
-        <SlotVizIcon :class="mapped.head.className" icon="head_attestation" />
-        <SlotVizIcon :class="mapped.source.className" icon="source_attestation" />
-        <SlotVizIcon :class="mapped.target.className" icon="target_attestation" />
+      <div
+        class="attestations group"
+        :class="mapped.total.className"
+      >
+        <SlotVizIcon
+          :class="mapped.head.className"
+          icon="head_attestation"
+        />
+        <SlotVizIcon
+          :class="mapped.source.className"
+          icon="source_attestation"
+        />
+        <SlotVizIcon
+          :class="mapped.target.className"
+          icon="target_attestation"
+        />
       </div>
     </BcTooltip>
-    <div v-if="!compact" class="group">
-      <BcTooltip :text="mapped.proposal.tooltip" :fit-content="true">
-        <SlotVizIcon :class="mapped.proposal.className" icon="proposal" />
+    <div
+      v-if="!compact"
+      class="group"
+    >
+      <BcTooltip
+        :text="mapped.proposal.tooltip"
+        :fit-content="true"
+      >
+        <SlotVizIcon
+          :class="mapped.proposal.className"
+          icon="proposal"
+        />
       </BcTooltip>
-      <BcTooltip :text="mapped.slashing.tooltip" :fit-content="true">
-        <SlotVizIcon :class="mapped.slashing.className" icon="slashing" />
+      <BcTooltip
+        :text="mapped.slashing.tooltip"
+        :fit-content="true"
+      >
+        <SlotVizIcon
+          :class="mapped.slashing.className"
+          icon="slashing"
+        />
       </BcTooltip>
-      <BcTooltip :text="mapped.sync.tooltip" :fit-content="true">
-        <SlotVizIcon :class="mapped.sync.className" icon="sync" />
+      <BcTooltip
+        :text="mapped.sync.tooltip"
+        :fit-content="true"
+      >
+        <SlotVizIcon
+          :class="mapped.sync.className"
+          icon="sync"
+        />
       </BcTooltip>
     </div>
   </div>
 </template>
+
 <style lang="scss" scoped>
-.tooltip{
+.tooltip {
   text-align: left;
-  .head{
+  .head {
     margin-top: var(--padding);
   }
 }
@@ -126,7 +180,7 @@ const mapped = computed(() => {
     border-radius: var(--border-radius);
     border: solid 1px transparent;
 
-    svg{
+    svg {
       margin: 3px 4px;
       height: 12px;
       width: auto;
@@ -138,9 +192,8 @@ const mapped = computed(() => {
       &.negative {
         border-color: var(--negative-color);
       }
-      &.positive{
+      &.positive {
         border-color: var(--positive-color);
-
       }
     }
   }
diff --git a/frontend/components/validator/table/ValidatorTableStatus.vue b/frontend/components/validator/table/ValidatorTableStatus.vue
index bae88adc6..77b92ce66 100644
--- a/frontend/components/validator/table/ValidatorTableStatus.vue
+++ b/frontend/components/validator/table/ValidatorTableStatus.vue
@@ -1,51 +1,56 @@
 <script setup lang="ts">
-import {
-  faPowerOff
-} from '@fortawesome/pro-solid-svg-icons'
+import { faPowerOff } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { ValidatorStatus } from '~/types/validator'
 
 interface Props {
-  status: ValidatorStatus,
-  position?: number,
+  status: ValidatorStatus
+  position?: number
   hideLabel?: boolean
 }
 const props = defineProps<Props>()
 
 const iconColor = computed(() => {
-  if (props.status.includes('online')) { return 'green' }
-  if (props.status.includes('offline')) { return 'red' }
+  if (props.status.includes('online')) return 'green'
+  if (props.status.includes('offline')) return 'red'
   return 'orange'
 })
-
 </script>
+
 <template>
   <div class="wrapper">
-    <FontAwesomeIcon :icon="faPowerOff" :class="iconColor" />
-    <span v-if="!hideLabel" class="status">
+    <FontAwesomeIcon
+      :icon="faPowerOff"
+      :class="iconColor"
+    />
+    <span
+      v-if="!hideLabel"
+      class="status"
+    >
       {{ $t(`validator_state.${status}`) }}
       <span v-if="position"> #<BcFormatNumber :value="position" /></span>
     </span>
   </div>
 </template>
+
 <style lang="scss" scoped>
 .wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--padding-small);
-  .status{
+  .status {
     text-transform: capitalize;
     text-wrap: nowrap;
   }
 
-  .green{
+  .green {
     color: var(--positive-color);
   }
-  .red{
+  .red {
     color: var(--negative-color);
   }
-  .orange{
+  .orange {
     color: var(--orange-color);
   }
 }
diff --git a/frontend/composables/notifications/useNotificationsManagementDashboards.ts b/frontend/composables/notifications/useNotificationsManagementDashboards.ts
index a3bef08c3..7e5807145 100644
--- a/frontend/composables/notifications/useNotificationsManagementDashboards.ts
+++ b/frontend/composables/notifications/useNotificationsManagementDashboards.ts
@@ -2,19 +2,36 @@ import type { TableQueryParams } from '~/types/datatable'
 import { API_PATH } from '~/types/customFetch'
 import type { InternalGetUserNotificationSettingsDashboardsResponse } from '~/types/api/notifications'
 
-export function useNotificationsManagementDashboards () {
+export function useNotificationsManagementDashboards() {
   const { fetch } = useCustomFetch()
 
-  const data = ref < InternalGetUserNotificationSettingsDashboardsResponse>()
-  const { query, pendingQuery, cursor, pageSize, onSort, setCursor, setPageSize, setSearch, setStoredQuery, isStoredQuery } = useTableQuery({ limit: 10, sort: 'dashboard_id:desc' }, 10)
+  const data = ref<InternalGetUserNotificationSettingsDashboardsResponse>()
+  const {
+    query,
+    pendingQuery,
+    cursor,
+    pageSize,
+    onSort,
+    setCursor,
+    setPageSize,
+    setSearch,
+    setStoredQuery,
+    isStoredQuery,
+  } = useTableQuery({ limit: 10, sort: 'dashboard_id:desc' }, 10)
   const isLoading = ref(false)
 
   const dashboardGroups = computed(() => data.value)
 
-  async function getDashboardGroups (q?: TableQueryParams) {
+  async function getDashboardGroups(q?: TableQueryParams) {
     isLoading.value = true
     setStoredQuery(q)
-    const res = await fetch<InternalGetUserNotificationSettingsDashboardsResponse>(API_PATH.GET_NOTIFICATIONS_SETTINGS_DASHBOARD, undefined, undefined, q)
+    const res
+      = await fetch<InternalGetUserNotificationSettingsDashboardsResponse>(
+        API_PATH.GET_NOTIFICATIONS_SETTINGS_DASHBOARD,
+        undefined,
+        undefined,
+        q,
+      )
 
     isLoading.value = false
     if (!isStoredQuery(q)) {
@@ -25,9 +42,23 @@ export function useNotificationsManagementDashboards () {
     return res
   }
 
-  watch(query, (q) => {
-    getDashboardGroups(q)
-  }, { immediate: true })
+  watch(
+    query,
+    (q) => {
+      getDashboardGroups(q)
+    },
+    { immediate: true },
+  )
 
-  return { dashboardGroups, query: pendingQuery, cursor, pageSize, isLoading, onSort, setCursor, setPageSize, setSearch }
+  return {
+    dashboardGroups,
+    query: pendingQuery,
+    cursor,
+    pageSize,
+    isLoading,
+    onSort,
+    setCursor,
+    setPageSize,
+    setSearch,
+  }
 }
diff --git a/frontend/composables/notifications/useNotificationsManagementSettings.ts b/frontend/composables/notifications/useNotificationsManagementSettings.ts
index ae0fdff6b..f06ff8c13 100644
--- a/frontend/composables/notifications/useNotificationsManagementSettings.ts
+++ b/frontend/composables/notifications/useNotificationsManagementSettings.ts
@@ -1,11 +1,18 @@
 import { inject, warn } from 'vue'
 import type { NotificationPairedDevice } from '~/types/api/notifications'
-import type { NotificationsManagementSettingsGeneralTab, NotificationsManagementSettingsProvider } from '~/types/notifications/settings'
+import type {
+  NotificationsManagementSettingsGeneralTab,
+  NotificationsManagementSettingsProvider,
+} from '~/types/notifications/settings'
 
-export function useNotificationsManagementSettings () {
-  const provider = inject<NotificationsManagementSettingsProvider>('notificationsManagementSettings')
+export function useNotificationsManagementSettings() {
+  const provider = inject<NotificationsManagementSettingsProvider>(
+    'notificationsManagementSettings',
+  )
 
-  const updateGeneralSettings = (newSettings: NotificationsManagementSettingsGeneralTab) => {
+  const updateGeneralSettings = (
+    newSettings: NotificationsManagementSettingsGeneralTab,
+  ) => {
     if (!provider) {
       warn('notifications management settings provider not injected')
       return
@@ -50,5 +57,11 @@ export function useNotificationsManagementSettings () {
     return provider?.isLoading.value
   })
 
-  return { isLoading, generalSettings, updateGeneralSettings, pairedDevices, updatePairedDevices }
+  return {
+    isLoading,
+    generalSettings,
+    updateGeneralSettings,
+    pairedDevices,
+    updatePairedDevices,
+  }
 }
diff --git a/frontend/composables/notifications/useNotificationsManagementSettingsProvider.ts b/frontend/composables/notifications/useNotificationsManagementSettingsProvider.ts
index ab1dda8e4..2a11d4d06 100644
--- a/frontend/composables/notifications/useNotificationsManagementSettingsProvider.ts
+++ b/frontend/composables/notifications/useNotificationsManagementSettingsProvider.ts
@@ -1,18 +1,32 @@
 import { warn } from 'vue'
 import { API_PATH } from '~/types/customFetch'
-import type { InternalGetUserNotificationSettingsResponse, NotificationSettings, NotificationPairedDevice } from '~/types/api/notifications'
-import type { NotificationsManagementSettingsGeneralTab, NotificationsManagementSettingsProvider } from '~/types/notifications/settings'
+import type {
+  InternalGetUserNotificationSettingsResponse,
+  NotificationSettings,
+  NotificationPairedDevice,
+} from '~/types/api/notifications'
+import type {
+  NotificationsManagementSettingsGeneralTab,
+  NotificationsManagementSettingsProvider,
+} from '~/types/notifications/settings'
 
-export function useUseNotificationsManagementSettingsProvider () {
+export function useUseNotificationsManagementSettingsProvider() {
   const { fetch } = useCustomFetch()
 
-  const { value, temp: tempSettings, bounce, instant } = useDebounceValue<NotificationSettings | undefined>(undefined, 1000)
+  const {
+    value,
+    temp: tempSettings,
+    bounce,
+    instant,
+  } = useDebounceValue<NotificationSettings | undefined>(undefined, 1000)
   const isLoading = ref(false)
   let updateRequested = false
 
-  async function refreshSettings () {
+  async function refreshSettings() {
     isLoading.value = true
-    const res = await fetch<InternalGetUserNotificationSettingsResponse>(API_PATH.NOTIFICATIONS_MANAGEMENT_GENERAL)
+    const res = await fetch<InternalGetUserNotificationSettingsResponse>(
+      API_PATH.NOTIFICATIONS_MANAGEMENT_GENERAL,
+    )
 
     isLoading.value = false
 
@@ -21,21 +35,36 @@ export function useUseNotificationsManagementSettingsProvider () {
   }
 
   const settings = computed(() => tempSettings.value as NotificationSettings)
-  const generalSettings = computed(() => settings.value.general_settings as NotificationsManagementSettingsGeneralTab)
+  const generalSettings = computed(
+    () =>
+      settings.value
+        .general_settings as NotificationsManagementSettingsGeneralTab,
+  )
   const pairedDevices = computed(() => settings.value.paired_devices)
 
-  function updateGeneralSettings (newSettings:NotificationsManagementSettingsGeneralTab) {
+  function updateGeneralSettings(
+    newSettings: NotificationsManagementSettingsGeneralTab,
+  ) {
     if (tempSettings.value && newSettings) {
       updateRequested = true
-      const original: NotificationSettings = tempSettings.value as NotificationSettings
-      bounce({ ...original, general_settings: { ...original.general_settings, ...newSettings } }, true, true)
+      const original: NotificationSettings
+        = tempSettings.value as NotificationSettings
+      bounce(
+        {
+          ...original,
+          general_settings: { ...original.general_settings, ...newSettings },
+        },
+        true,
+        true,
+      )
     }
   }
 
-  function updatePairedDevices (newDevices: NotificationPairedDevice[]) {
+  function updatePairedDevices(newDevices: NotificationPairedDevice[]) {
     if (tempSettings.value && newDevices) {
       updateRequested = true
-      const original: NotificationSettings = tempSettings.value as NotificationSettings
+      const original: NotificationSettings
+        = tempSettings.value as NotificationSettings
       bounce({ ...original, paired_devices: newDevices }, true, true)
     }
   }
@@ -44,14 +73,25 @@ export function useUseNotificationsManagementSettingsProvider () {
     if (updateRequested) {
       updateRequested = false
       try {
-        warn(`TODO: implement saving of new settings ${newSettings}`) // adding newSettings here so the parameter is used :)
-      } catch (e) {
+        // adding newSettings here so the parameter is used :)
+        warn(`TODO: implement saving of new settings ${newSettings}`)
+      }
+      catch (e) {
         refreshSettings()
       }
     }
   })
 
-  provide<NotificationsManagementSettingsProvider>('notificationsManagementSettings', { isLoading, generalSettings, updateGeneralSettings, pairedDevices, updatePairedDevices })
+  provide<NotificationsManagementSettingsProvider>(
+    'notificationsManagementSettings',
+    {
+      isLoading,
+      generalSettings,
+      updateGeneralSettings,
+      pairedDevices,
+      updatePairedDevices,
+    },
+  )
 
   return { refreshSettings, isLoading }
 }
diff --git a/frontend/composables/useBcDialog.ts b/frontend/composables/useBcDialog.ts
index a7f5aad67..ab2c2f89b 100644
--- a/frontend/composables/useBcDialog.ts
+++ b/frontend/composables/useBcDialog.ts
@@ -1,7 +1,7 @@
 import type { DialogProps } from 'primevue/dialog'
 import type { DynamicDialogInstance } from 'primevue/dynamicdialogoptions'
 
-export function useBcDialog <T> (dialogProps?: DialogProps) {
+export function useBcDialog<T>(dialogProps?: DialogProps) {
   const { width } = useWindowSize()
   const { setTouchableElement } = useSwipe()
 
@@ -9,14 +9,15 @@ export function useBcDialog <T> (dialogProps?: DialogProps) {
   const dialogRef = inject<Ref<DynamicDialogInstance>>('dialogRef')
   const uuid = ref(generateUUID())
 
-  const position = computed(() => width.value <= 430 ? 'bottom' : 'center')
+  const position = computed(() => (width.value <= 430 ? 'bottom' : 'center'))
 
   const setHeader = (header: string, show: boolean = true) => {
     if (dialogRef?.value?.options?.props) {
       if (show) {
         dialogRef.value.options.props.showHeader = true
         dialogRef.value.options.props!.header = header
-      } else {
+      }
+      else {
         dialogRef.value.options.props.showHeader = false
       }
     }
@@ -25,24 +26,30 @@ export function useBcDialog <T> (dialogProps?: DialogProps) {
   const setDialogDefaults = () => {
     if (dialogRef?.value?.options) {
       if (!dialogRef.value.options.props) {
-        dialogRef.value.options.props = { }
+        dialogRef.value.options.props = {}
       }
       if (dialogProps) {
-        dialogRef.value.options.props = { ...dialogRef.value.options.props, ...dialogProps }
+        dialogRef.value.options.props = {
+          ...dialogRef.value.options.props,
+          ...dialogProps,
+        }
       }
       dialogRef.value.options.props.dismissableMask = true
       dialogRef.value.options.props.modal = true
       dialogRef.value.options.props.draggable = false
       dialogRef.value.options.props.position = position.value
-      dialogRef.value.options.props.pt = { ...dialogRef.value.options.props.pt, root: { uuid: uuid.value } }
+      dialogRef.value.options.props.pt = {
+        ...dialogRef.value.options.props.pt,
+        root: { uuid: uuid.value },
+      }
     }
     props.value = dialogRef?.value?.data
   }
-  
+
   // is executed onSetup and onBeforeMount as in different cases the data was not available
   setDialogDefaults()
   onBeforeMount(() => {
-   setDialogDefaults()
+    setDialogDefaults()
   })
 
   onMounted(() => {
@@ -58,11 +65,15 @@ export function useBcDialog <T> (dialogProps?: DialogProps) {
     })
   })
 
-  watch(position, (pos) => {
-    if (dialogRef?.value?.options?.props) {
-      dialogRef.value.options.props.position = pos
-    }
-  }, { immediate: true })
+  watch(
+    position,
+    (pos) => {
+      if (dialogRef?.value?.options?.props) {
+        dialogRef.value.options.props.position = pos
+      }
+    },
+    { immediate: true },
+  )
 
   const close = () => {
     if (dialogRef?.value) {
@@ -70,5 +81,5 @@ export function useBcDialog <T> (dialogProps?: DialogProps) {
     }
   }
 
-  return { close, props, dialogRef, setHeader}
+  return { close, props, dialogRef, setHeader }
 }
diff --git a/frontend/composables/useBcSeo.ts b/frontend/composables/useBcSeo.ts
index d5922cbca..2075b020c 100644
--- a/frontend/composables/useBcSeo.ts
+++ b/frontend/composables/useBcSeo.ts
@@ -1,4 +1,10 @@
-export function useBcSeo (pageTitle?: string | Ref<string | number | undefined> | ComputedRef<string | number | undefined>, removeDynamicUrlValue = false) {
+export function useBcSeo(
+  pageTitle?:
+    | string
+    | Ref<string | number | undefined>
+    | ComputedRef<string | number | undefined>,
+  removeDynamicUrlValue = false,
+) {
   const { t: $t } = useTranslation()
   const route = useRoute()
   const { networkInfo } = useNetworkStore()
@@ -8,8 +14,17 @@ export function useBcSeo (pageTitle?: string | Ref<string | number | undefined>
   const url = 'https://beaconcha.in'
   const logo = `${url}/img/logo.png`
   const ogUrl = () => {
-    const value = removeDynamicUrlValue && Object.values(route.params).find(v => !!v && typeof v === 'string' && route.fullPath.endsWith(v))
-    const path = value ? route.fullPath.substring(0, route.fullPath.lastIndexOf(value as string) - 1) : route.fullPath
+    const value
+      = removeDynamicUrlValue
+      && Object.values(route.params).find(
+        v => !!v && typeof v === 'string' && route.fullPath.endsWith(v),
+      )
+    const path = value
+      ? route.fullPath.substring(
+        0,
+        route.fullPath.lastIndexOf(value as string) - 1,
+      )
+      : route.fullPath
     return `${url}${path}`
   }
   // Maybe we want to have page specific description and keywords in the future, but for now we keep it simple
@@ -21,10 +36,17 @@ export function useBcSeo (pageTitle?: string | Ref<string | number | undefined>
     const parts: string[] = [$t('seo.title'), 'beaconcha.in', year.toString()]
     if (typeof pageTitle === 'string') {
       parts.splice(0, 0, $t(pageTitle))
-    } else if (pageTitle?.value) {
+    }
+    else if (pageTitle?.value) {
       parts.splice(0, 0, `${pageTitle.value}`)
     }
-    return networkInfo.value.description + ' ' + networkInfo.value.name + ' ' + parts.join(' - ')
+    return (
+      networkInfo.value.description
+      + ' '
+      + networkInfo.value.name
+      + ' '
+      + parts.join(' - ')
+    )
   }
 
   useSeoMeta({
@@ -43,6 +65,6 @@ export function useBcSeo (pageTitle?: string | Ref<string | number | undefined>
     twitterTitle: dynamicTitle,
     twitterDescription: description,
     twitterImage: logo,
-    twitterImageAlt: imageAlt
+    twitterImageAlt: imageAlt,
   })
 }
diff --git a/frontend/composables/useBcToast.ts b/frontend/composables/useBcToast.ts
index 9699da00d..ff3071c8b 100644
--- a/frontend/composables/useBcToast.ts
+++ b/frontend/composables/useBcToast.ts
@@ -1,7 +1,7 @@
 import { inject, warn } from 'vue'
 import type { BcToastProvider, ToastData } from '~/types/toast'
 
-export function useBcToast () {
+export function useBcToast() {
   const toast = inject<BcToastProvider>('bcToast')
 
   const showError = (data: ToastData) => {
diff --git a/frontend/composables/useBcToastProvider.ts b/frontend/composables/useBcToastProvider.ts
index 67f54456c..3962676a5 100644
--- a/frontend/composables/useBcToastProvider.ts
+++ b/frontend/composables/useBcToastProvider.ts
@@ -3,35 +3,51 @@ import type { BcToastProvider, ToastData } from '~/types/toast'
 
 const TOAST_TIME = 3000
 
-export function useBcToastProvider () {
+export function useBcToastProvider() {
   const toast = useToast()
   const { t: $t } = useTranslation()
 
-  const { bounce, instant, temp, value } = useDebounceValue<ToastData[]>([], TOAST_TIME)
+  const { bounce, instant, temp, value } = useDebounceValue<ToastData[]>(
+    [],
+    TOAST_TIME,
+  )
 
   const showError = (data: ToastData) => {
     bounce([...temp.value, data], true)
   }
 
   const showInfo = (data: ToastData) => {
-    toast.add({ summary: data.summary, detail: data.detail, severity: 'info', life: TOAST_TIME })
+    toast.add({
+      summary: data.summary,
+      detail: data.detail,
+      severity: 'info',
+      life: TOAST_TIME,
+    })
   }
 
   const showSuccess = (data: ToastData) => {
-    toast.add({ summary: data.summary, detail: data.detail, severity: 'success', life: TOAST_TIME })
+    toast.add({
+      summary: data.summary,
+      detail: data.detail,
+      severity: 'success',
+      life: TOAST_TIME,
+    })
   }
 
   watch(value, (toasts) => {
     if (toasts.length) {
       if (toasts.length === 1) {
         const hasGroup = toasts[0].group
-        toast.add({ 
+        toast.add({
           summary: toasts[0].summary,
-          detail: hasGroup ? `${toasts[0].group}: ${toasts[0].detail}` : toasts[0].detail,
+          detail: hasGroup
+            ? `${toasts[0].group}: ${toasts[0].detail}`
+            : toasts[0].detail,
           severity: 'error',
-          life: TOAST_TIME 
+          life: TOAST_TIME,
         })
-      } else{
+      }
+      else {
         const groups: Record<string, ToastData[]> = {}
         const mapped = toasts.reduce((m, t) => {
           const group = t.group ?? ''
@@ -44,7 +60,10 @@ export function useBcToastProvider () {
         for (const key in mapped) {
           const list = mapped[key]
           const summary = list[0].summary
-          const detail = list.length === 1 ? `${key}: ${list[0].detail}` : $t('error.multiple_times', { error: key }, list.length)
+          const detail
+            = list.length === 1
+              ? `${key}: ${list[0].detail}`
+              : $t('error.multiple_times', { error: key }, list.length)
 
           toast.add({ summary, detail, severity: 'error', life: TOAST_TIME })
         }
diff --git a/frontend/composables/useCurrency.ts b/frontend/composables/useCurrency.ts
index 679ca89d5..2524085e5 100644
--- a/frontend/composables/useCurrency.ts
+++ b/frontend/composables/useCurrency.ts
@@ -3,16 +3,20 @@ import { type EthConversionRate } from '~/types/api/latest_state'
 import { COOKIE_KEY } from '~/types/cookie'
 import { type Currency } from '~/types/currencies'
 
-export function useCurrency () {
+export function useCurrency() {
   const { latestState } = useLatestStateStore()
   const { networkInfo } = useNetworkStore()
   const { t: $t } = useTranslation()
-  const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
+  const showInDevelopment = Boolean(
+    useRuntimeConfig().public.showInDevelopment,
+  )
   const available = ref<Currency[]>([])
-  const withLabel = ref<{currency: Currency, label: string}[]>([])
+  const withLabel = ref<{ currency: Currency, label: string }[]>([])
 
-  const selectedCurrency = useCookie<Currency>(COOKIE_KEY.CURRENCY, { default: () => 'NAT' })
-  function setCurrency (newCurrency: Currency) {
+  const selectedCurrency = useCookie<Currency>(COOKIE_KEY.CURRENCY, {
+    default: () => 'NAT',
+  })
+  function setCurrency(newCurrency: Currency) {
     selectedCurrency.value = newCurrency
   }
 
@@ -24,35 +28,54 @@ export function useCurrency () {
         list[rate.code as Currency] = rate
         return list
       },
-      rec
+      rec,
     )
   })
 
-  watch([latestState, networkInfo], () => {
-    let list: Currency[] = [networkInfo.value.elCurrency]
-    if (networkInfo.value.clCurrency !== networkInfo.value.elCurrency) {
-      list.push(networkInfo.value.clCurrency)
-    }
-    if (showInDevelopment) {
-      list.splice(0, 1, 'NAT')
-    }
-    list = list.concat((latestState.value?.exchange_rates || []).map(r => r.code as Currency))
-    // make sure we update the currency list only if it really changed (to prevent reactivity triggers)
-    if (JSON.stringify(list) !== JSON.stringify(available.value)) {
-      available.value = list
-
-      withLabel.value = list.map(currency => ({
-        currency,
-        label: $t(`currency.label.${currency}`, {}, rates.value?.[currency]?.currency || currency)
-      }))
-    }
-  }, { immediate: true })
+  watch(
+    [latestState, networkInfo],
+    () => {
+      let list: Currency[] = [networkInfo.value.elCurrency]
+      if (networkInfo.value.clCurrency !== networkInfo.value.elCurrency) {
+        list.push(networkInfo.value.clCurrency)
+      }
+      if (showInDevelopment) {
+        list.splice(0, 1, 'NAT')
+      }
+      list = list.concat(
+        (latestState.value?.exchange_rates || []).map(
+          r => r.code as Currency,
+        ),
+      )
+      // make sure we update the currency list only if it really changed (to prevent reactivity triggers)
+      if (JSON.stringify(list) !== JSON.stringify(available.value)) {
+        available.value = list
+
+        withLabel.value = list.map(currency => ({
+          currency,
+          label: $t(
+            `currency.label.${currency}`,
+            {},
+            rates.value?.[currency]?.currency || currency,
+          ),
+        }))
+      }
+    },
+    { immediate: true },
+  )
 
-  const currency = computed(() => selectedCurrency.value && available.value.includes(selectedCurrency.value) ? selectedCurrency.value : available.value[0])
+  const currency = computed(() =>
+    selectedCurrency.value && available.value.includes(selectedCurrency.value)
+      ? selectedCurrency.value
+      : available.value[0],
+  )
 
   watch([latestState, selectedCurrency], () => {
     // once we loaded our latestState and see that we don't support the currency we switch back to the first item
-    if (latestState.value && !available.value.includes(selectedCurrency.value)) {
+    if (
+      latestState.value
+      && !available.value.includes(selectedCurrency.value)
+    ) {
       selectedCurrency.value = available.value[0]
     }
   })
diff --git a/frontend/composables/useCurrentAds.ts b/frontend/composables/useCurrentAds.ts
index f19509301..83977917f 100644
--- a/frontend/composables/useCurrentAds.ts
+++ b/frontend/composables/useCurrentAds.ts
@@ -1,21 +1,37 @@
 import { useAdConfigurationStore } from '~/stores/useAdConfigurationStore'
 import type { AdConfiguration } from '~/types/adConfiguration'
 
-export function useCurrentAds () {
+export function useCurrentAds() {
   const { adConfigs, refreshAdConfigs } = useAdConfigurationStore()
   const { user } = useUserStore()
   const { path, name } = useRoute()
 
   const pathName = computed(() => name?.toString?.() || path)
 
-  watch(pathName, (newName) => {
-    refreshAdConfigs(newName)
-  }, { immediate: true })
+  watch(
+    pathName,
+    (newName) => {
+      refreshAdConfigs(newName)
+    },
+    { immediate: true },
+  )
 
   const ads = computed<AdConfiguration[]>(() => {
-    const configs: AdConfiguration[] = adConfigs.value[pathName.value]?.filter(c => c.enabled && (!user.value?.premium_perks.ad_free || c.for_all_users)) ?? []
+    const configs: AdConfiguration[]
+      = adConfigs.value[pathName.value]?.filter(
+        c =>
+          c.enabled && (!user.value?.premium_perks.ad_free || c.for_all_users),
+      ) ?? []
     adConfigs.value.global?.forEach((config) => {
-      if (config.enabled && (!user.value?.premium_perks.ad_free || config.for_all_users) && !configs.find(c => c.jquery_selector === config.jquery_selector && c.insert_mode === config.insert_mode)) {
+      if (
+        config.enabled
+        && (!user.value?.premium_perks.ad_free || config.for_all_users)
+        && !configs.find(
+          c =>
+            c.jquery_selector === config.jquery_selector
+            && c.insert_mode === config.insert_mode,
+        )
+      ) {
         configs.push(config)
       }
     })
diff --git a/frontend/composables/useCustomFetch.ts b/frontend/composables/useCustomFetch.ts
index 47216f87d..38ac6a5ca 100644
--- a/frontend/composables/useCustomFetch.ts
+++ b/frontend/composables/useCustomFetch.ts
@@ -6,9 +6,9 @@ import { mapping, type PathValues, API_PATH } from '~/types/customFetch'
 const APIcallTimeout = 30 * 1000 // 30 seconds
 
 const pathNames = Object.values(API_PATH)
-type PathName = typeof pathNames[number]
+type PathName = (typeof pathNames)[number]
 
-export function useCustomFetch () {
+export function useCustomFetch() {
   const headers = useRequestHeaders(['cookie'])
   const xForwardedFor = useRequestHeader('x-forwarded-for')
   const xRealIp = useRequestHeader('x-real-ip')
@@ -16,10 +16,16 @@ export function useCustomFetch () {
   const { showError } = useBcToast()
   const { t: $t } = useTranslation()
   const { $bcLogger } = useNuxtApp()
-  const uuid = inject<{value: string}>('app-uuid')
-
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  async function fetch<T> (pathName: PathName, options: NitroFetchOptions<string & {}> = { }, pathValues?: PathValues, query?: PathValues, dontShowError = false): Promise<T> {
+  const uuid = inject<{ value: string }>('app-uuid')
+
+  async function fetch<T>(
+    pathName: PathName,
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    options: NitroFetchOptions<string & {}> = {},
+    pathValues?: PathValues,
+    query?: PathValues,
+    dontShowError = false,
+  ): Promise<T> {
     const map = mapping[pathName]
     if (!map) {
       throw new Error(`path ${pathName} not found`)
@@ -36,13 +42,26 @@ export function useCustomFetch () {
     const url = useRequestURL()
     const runtimeConfig = useRuntimeConfig()
     const showInDevelopment = Boolean(runtimeConfig.showInDevelopment)
-    const { public: { apiClient, legacyApiClient, apiKey, domain, logIp }, private: pConfig } = runtimeConfig
-    const path = map.mock ? `${pathName}.json` : map.getPath?.(pathValues) || map.path
-    let baseURL = map.mock ? '../mock' : map.legacy ? legacyApiClient : apiClient
+    const {
+      public: { apiClient, legacyApiClient, apiKey, domain, logIp },
+      private: pConfig,
+    } = runtimeConfig
+    const path = map.mock
+      ? `${pathName}.json`
+      : map.getPath?.(pathValues) || map.path
+    let baseURL = map.mock
+      ? '../mock'
+      : map.legacy
+        ? legacyApiClient
+        : apiClient
     const ssrSecret = pConfig?.ssrSecret
 
     if (isServer) {
-      baseURL = map.mock ? `${domain || url.origin.replace('http:', 'https:')}/mock` : map.legacy ? pConfig?.legacyApiServer : pConfig?.apiServer
+      baseURL = map.mock
+        ? `${domain || url.origin.replace('http:', 'https:')}/mock`
+        : map.legacy
+          ? pConfig?.legacyApiServer
+          : pConfig?.apiServer
     }
 
     options.headers = new Headers({ ...options.headers, ...headers })
@@ -59,14 +78,20 @@ export function useCustomFetch () {
     const method = options.method || map.method || 'GET'
 
     if (isServer && logIp === 'LOG') {
-      $bcLogger.warn(`${uuid?.value} | x-forwarded-for: ${xForwardedFor}, x-real-ip: ${xRealIp} | ${method} -> ${pathName}, hasAuth: ${!!apiKey}`, headers)
+      $bcLogger.warn(
+        `${
+          uuid?.value
+        } | x-forwarded-for: ${xForwardedFor}, x-real-ip: ${xRealIp} | ${method} -> ${pathName}, hasAuth: ${!!apiKey}`,
+        headers,
+      )
     }
 
     // For non GET method's we need to set the csrf header for security
     if (method !== 'GET') {
       if (csrfHeader.value) {
         options.headers.append(csrfHeader.value[0], csrfHeader.value[1])
-      } else {
+      }
+      else {
         $bcLogger.warn(`${uuid?.value} | missing csrf header!`)
       }
     }
@@ -75,7 +100,7 @@ export function useCustomFetch () {
       const res = await $fetch<LoginResponse>(path, {
         method,
         baseURL,
-        ...options
+        ...options,
       })
       return res as T
     }
@@ -87,11 +112,16 @@ export function useCustomFetch () {
         setCsrfHeader(res.headers)
       }
       return res._data as T
-    } catch (e: any) {
+    }
+    catch (e: any) {
       if (!dontShowError && showInDevelopment) {
-        showError({ group: e.statusCode, summary: $t('error.ws_error'), detail: `${options.method}: ${baseURL}${path}` })
+        showError({
+          group: e.statusCode,
+          summary: $t('error.ws_error'),
+          detail: `${options.method}: ${baseURL}${path}`,
+        })
       }
-      throw (e)
+      throw e
     }
   }
 
diff --git a/frontend/composables/useDashboardKey.ts b/frontend/composables/useDashboardKey.ts
index c334200b2..88d34fe0e 100644
--- a/frontend/composables/useDashboardKey.ts
+++ b/frontend/composables/useDashboardKey.ts
@@ -1,12 +1,14 @@
 import { inject } from 'vue'
 import type { DashboardKeyData } from '~/types/dashboard'
 
-export function useDashboardKey () {
+export function useDashboardKey() {
   const data = inject<DashboardKeyData>('dashboard-key')
   const { isLoggedIn } = useUserStore()
 
   if (!data) {
-    throw new Error('useDashboardKey must be in a child of useDashboardKeyProvider')
+    throw new Error(
+      'useDashboardKey must be in a child of useDashboardKeyProvider',
+    )
   }
 
   const dashboardKey = computed(() => data.dashboardKey.value ?? '')
@@ -17,5 +19,14 @@ export function useDashboardKey () {
   const setDashboardKey = (key: string) => data.setDashboardKey(key)
   const dashboardType = computed(() => data.dashboardType.value)
 
-  return { ...data, dashboardKey, isPublic, isShared, isPrivate, publicEntities, setDashboardKey, dashboardType }
+  return {
+    ...data,
+    dashboardKey,
+    isPublic,
+    isShared,
+    isPrivate,
+    publicEntities,
+    setDashboardKey,
+    dashboardType,
+  }
 }
diff --git a/frontend/composables/useDashboardKeyProvider.ts b/frontend/composables/useDashboardKeyProvider.ts
index 1fd79ceeb..9f2092960 100644
--- a/frontend/composables/useDashboardKeyProvider.ts
+++ b/frontend/composables/useDashboardKeyProvider.ts
@@ -1,21 +1,37 @@
 import { pullAll, union } from 'lodash-es'
 import { provide, warn } from 'vue'
 import { COOKIE_KEY } from '~/types/cookie'
-import type { DashboardKey, DashboardKeyData, DashboardType } from '~/types/dashboard'
+import type {
+  DashboardKey,
+  DashboardKeyData,
+  DashboardType,
+} from '~/types/dashboard'
 import { isPublicDashboardKey, isSharedKey } from '~/utils/dashboard/key'
-export function useDashboardKeyProvider (type: DashboardType = 'validator', mockKey: DashboardKey = '') {
+
+export function useDashboardKeyProvider(
+  type: DashboardType = 'validator',
+  mockKey: DashboardKey = '',
+) {
   const route = useRoute()
   const router = useRouter()
   const dashboardType = ref(type)
   const dashboardKey = ref(mockKey)
-  const dashboardKeyCookie = useCookie(dashboardType.value === 'account' ? COOKIE_KEY.ACCOUNT_DASHOBARD_KEY : COOKIE_KEY.VALIDATOR_DASHOBARD_KEY)
+  const dashboardKeyCookie = useCookie(
+    dashboardType.value === 'account'
+      ? COOKIE_KEY.ACCOUNT_DASHOBARD_KEY
+      : COOKIE_KEY.VALIDATOR_DASHOBARD_KEY,
+  )
   const { isLoggedIn } = useUserStore()
 
   const setDashboardKey = (key: string) => {
     if (!route.name) {
       warn('route name missing', route)
     }
-    const newRoute = router.resolve({ name: route.name!, params: { id: key }, hash: document?.location?.hash })
+    const newRoute = router.resolve({
+      name: route.name!,
+      params: { id: key },
+      hash: document?.location?.hash,
+    })
     dashboardKey.value = key
     if (isClient) {
       // we only want to change the url in the browser and don't want to trigger a page refresh
@@ -33,14 +49,19 @@ export function useDashboardKeyProvider (type: DashboardType = 'validator', mock
         return
       }
       // only use the dashboard cookie key as default if you are not logged in and it's not private
-      if (!isLoggedIn.value && isPublicDashboardKey(dashboardKeyCookie.value) && !isSharedKey(dashboardKeyCookie.value)) {
+      if (
+        !isLoggedIn.value
+        && isPublicDashboardKey(dashboardKeyCookie.value)
+        && !isSharedKey(dashboardKeyCookie.value)
+      ) {
         setDashboardKey(`${dashboardKeyCookie.value}`)
       }
       return
     }
     if (Array.isArray(route.params.id)) {
       setDashboardKey(toBase64Url(route.params.id.join(',')))
-    } else {
+    }
+    else {
       setDashboardKey(route.params.id)
     }
   }
@@ -62,24 +83,38 @@ export function useDashboardKeyProvider (type: DashboardType = 'validator', mock
     return fromBase64Url(dashboardKey.value)?.split(',') ?? []
   })
 
-  const updateEntities = (list:string[]) => {
+  const updateEntities = (list: string[]) => {
     const filtered = list.filter(s => !!s).join(',')
     const key = toBase64Url(filtered)
     setDashboardKey(key)
   }
 
-  const addEntities = (list:string[]) => {
+  const addEntities = (list: string[]) => {
     updateEntities(union(publicEntities.value, list))
   }
 
-  const removeEntities = (list:string[]) => {
+  const removeEntities = (list: string[]) => {
     updateEntities(pullAll(publicEntities.value, list))
   }
 
-  const api = { dashboardKey, isPublic, isShared, publicEntities, addEntities, removeEntities, setDashboardKey, dashboardType }
+  const api = {
+    dashboardKey,
+    isPublic,
+    isShared,
+    publicEntities,
+    addEntities,
+    removeEntities,
+    setDashboardKey,
+    dashboardType,
+  }
 
   watch(isLoggedIn, (newValue, oldValue) => {
-    if (oldValue && !newValue && dashboardKeyCookie.value && !isNaN(parseInt(dashboardKeyCookie.value))) {
+    if (
+      oldValue
+      && !newValue
+      && dashboardKeyCookie.value
+      && !isNaN(parseInt(dashboardKeyCookie.value))
+    ) {
       setDashboardKey('')
     }
   })
diff --git a/frontend/composables/useDate.ts b/frontend/composables/useDate.ts
index 27ee80f5a..0767ae8c1 100644
--- a/frontend/composables/useDate.ts
+++ b/frontend/composables/useDate.ts
@@ -1,7 +1,7 @@
 import { inject } from 'vue'
 import type { DateInfo } from '~/types/date'
 
-export function useDate () {
+export function useDate() {
   const date = inject<DateInfo>('date-info')
 
   if (!date) {
diff --git a/frontend/composables/useDateProvider.ts b/frontend/composables/useDateProvider.ts
index f013dee92..b5aa9188d 100644
--- a/frontend/composables/useDateProvider.ts
+++ b/frontend/composables/useDateProvider.ts
@@ -1,12 +1,13 @@
 import { ref, provide } from 'vue'
 import type { DateInfo } from '~/types/date'
 
-// useDateProvider provides a global reactive timestamp, which should be more performant than every component ticking their own time.
+// useDateProvider provides a global reactive timestamp, which should be more
+// performant than every component ticking their own time.
 // -> a global heartbeat
-export function useDateProvider () {
+export function useDateProvider() {
   const date = ref(new Date())
   const timestamp = computed(() => date.value.getTime())
-  let interval:NodeJS.Timeout
+  let interval: NodeJS.Timeout
 
   const upDate = () => {
     date.value = new Date()
diff --git a/frontend/composables/useDebounceValue.ts b/frontend/composables/useDebounceValue.ts
index 019dc2459..eec5c4945 100644
--- a/frontend/composables/useDebounceValue.ts
+++ b/frontend/composables/useDebounceValue.ts
@@ -1,4 +1,4 @@
-export function useDebounceValue<T> (initialValue: T, bounceMs: number = 100) {
+export function useDebounceValue<T>(initialValue: T, bounceMs: number = 100) {
   const valueRef = shallowRef<T>(initialValue)
   const value = readonly(valueRef)
   const tempRef = shallowRef<T>(initialValue)
@@ -15,7 +15,12 @@ export function useDebounceValue<T> (initialValue: T, bounceMs: number = 100) {
     timeout.value = null
   }
 
-  const bounce = (value: T, instantIfNoTimer = false, endlesBounce = false, ms?: number) => {
+  const bounce = (
+    value: T,
+    instantIfNoTimer = false,
+    endlesBounce = false,
+    ms?: number,
+  ) => {
     tempRef.value = value
     if (instantIfNoTimer && !timeout.value) {
       valueRef.value = value
diff --git a/frontend/composables/useFormat.ts b/frontend/composables/useFormat.ts
index d0ee3e921..6dfe3156e 100644
--- a/frontend/composables/useFormat.ts
+++ b/frontend/composables/useFormat.ts
@@ -3,21 +3,54 @@ import type { AgeFormat } from '~/types/settings'
 import {
   formatEpochToDateTime as formatEpochToDateTimeImported,
   formatSlotToDateTime as formatSlotToDateTimeImported,
-  formatEpochToDate as formatEpochToDateImported
+  formatEpochToDate as formatEpochToDateImported,
 } from '~/utils/format'
 
-export function useFormat () {
+export function useFormat() {
   const { currentNetwork } = useNetworkStore()
 
-  function formatEpochToDateTime (epoch: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
-    return formatEpochToDateTimeImported(currentNetwork.value, epoch, timestamp, format, style, locales, withTime)
+  function formatEpochToDateTime(
+    epoch: number,
+    timestamp?: number,
+    format?: AgeFormat,
+    style?: StringUnitLength,
+    locales?: string,
+    withTime?: boolean,
+  ): string | null | undefined {
+    return formatEpochToDateTimeImported(
+      currentNetwork.value,
+      epoch,
+      timestamp,
+      format,
+      style,
+      locales,
+      withTime,
+    )
   }
 
-  function formatSlotToDateTime (slot: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
-    return formatSlotToDateTimeImported(currentNetwork.value, slot, timestamp, format, style, locales, withTime)
+  function formatSlotToDateTime(
+    slot: number,
+    timestamp?: number,
+    format?: AgeFormat,
+    style?: StringUnitLength,
+    locales?: string,
+    withTime?: boolean,
+  ): string | null | undefined {
+    return formatSlotToDateTimeImported(
+      currentNetwork.value,
+      slot,
+      timestamp,
+      format,
+      style,
+      locales,
+      withTime,
+    )
   }
 
-  function formatEpochToDate (epoch: number, locales: string): string | null | undefined {
+  function formatEpochToDate(
+    epoch: number,
+    locales: string,
+  ): string | null | undefined {
     return formatEpochToDateImported(currentNetwork.value, epoch, locales)
   }
 
diff --git a/frontend/composables/useGlobalSetting.ts b/frontend/composables/useGlobalSetting.ts
index b893ec974..0ff34bda6 100644
--- a/frontend/composables/useGlobalSetting.ts
+++ b/frontend/composables/useGlobalSetting.ts
@@ -1,6 +1,6 @@
 import { SettingDefaults, type CookieValue, type GlobalSetting } from '~/types/settings'
 
-export function useGlobalSetting<T> (identifier: GlobalSetting) {
+export function useGlobalSetting<T>(identifier: GlobalSetting) {
   const cookie = useCookie(identifier)
   const config = SettingDefaults[identifier]
 
@@ -8,7 +8,9 @@ export function useGlobalSetting<T> (identifier: GlobalSetting) {
     if (cookie.value === undefined || cookie.value === null) {
       return config.default as T
     }
-    return config?.parseValue ? config.parseValue<T>(cookie.value) : cookie.value as T
+    return config?.parseValue
+      ? config.parseValue<T>(cookie.value)
+      : (cookie.value as T)
   })
   const changeSetting = (value: T) => {
     cookie.value = config.valueToString !== undefined ? config.valueToString(value) : value as CookieValue
diff --git a/frontend/composables/useHashTabs.ts b/frontend/composables/useHashTabs.ts
index edd3994a3..25c5ee4fe 100644
--- a/frontend/composables/useHashTabs.ts
+++ b/frontend/composables/useHashTabs.ts
@@ -1,6 +1,6 @@
 import type { HashTabs } from '~/types/hashTabs'
 
-export function useHashTabs (tabs: HashTabs) {
+export function useHashTabs(tabs: HashTabs) {
   const activeIndex = ref(-1)
   const { hash: initialHash } = useRoute()
 
@@ -27,7 +27,10 @@ export function useHashTabs (tabs: HashTabs) {
 
   onMounted(() => {
     const hash = initialHash?.replace('#', '')
-    activeIndex.value = hash && tabs[hash] && !tabs[hash].disabled ? tabs[hash].index : findFirstValidIndex()
+    activeIndex.value
+      = hash && tabs[hash] && !tabs[hash].disabled
+        ? tabs[hash].index
+        : findFirstValidIndex()
   })
 
   const updateHash = (index: number) => {
@@ -37,12 +40,16 @@ export function useHashTabs (tabs: HashTabs) {
     window.location.hash = findHashForIndex(index)
   }
 
-  watch(activeIndex, (index) => {
-    if (isServer && index < 0) {
-      return
-    }
-    updateHash(index)
-  }, { immediate: true })
+  watch(
+    activeIndex,
+    (index) => {
+      if (isServer && index < 0) {
+        return
+      }
+      updateHash(index)
+    },
+    { immediate: true },
+  )
 
   const setActiveIndex = (index: number) => {
     if (isServer) {
diff --git a/frontend/composables/useInterval.ts b/frontend/composables/useInterval.ts
index 8a6f39fd2..3dfd75b97 100644
--- a/frontend/composables/useInterval.ts
+++ b/frontend/composables/useInterval.ts
@@ -1,6 +1,6 @@
 import { DateTime } from 'luxon'
 
-export function useInterval (seconds: number) {
+export function useInterval(seconds: number) {
   const { timestamp } = useDate()
   const tick = ref<number>(timestamp.value)
   const internalTick = ref<number>(timestamp.value)
@@ -11,7 +11,11 @@ export function useInterval (seconds: number) {
     }
     const dt = DateTime.fromMillis(ts)
     // we use in internal tick so that if the interval was reset we don't trigger a change in the tick
-    if (!internalTick.value || dt.diff(DateTime.fromMillis(internalTick.value), 'seconds').seconds >= seconds) {
+    if (
+      !internalTick.value
+      || dt.diff(DateTime.fromMillis(internalTick.value), 'seconds').seconds
+      >= seconds
+    ) {
       tick.value = ts
       internalTick.value = ts
     }
diff --git a/frontend/composables/useRefBridge.ts b/frontend/composables/useRefBridge.ts
index 191129d82..98c72091f 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -1,10 +1,13 @@
+/* eslint-disable vue/max-len -- TODO:   plz fix this */
 import { type ModelRef } from 'vue'
 
 export interface BridgeRef<T> extends Ref<T> {
-  pauseBridgeFromNowOn: () => void,
+  pauseBridgeFromNowOn: () => void
   wakeupBridgeAtNextTick: () => void
 }
-interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
+interface ConverterCallback<Tx, Ty> {
+  (x: Tx): Ty
+}
 
 /** This composable creates a two-way pipe between reactive variables of 2 different types. The values circulate back
  *  and forth transparently from A to B and B to A, the reactivity is preserved on both ends, the types are converted
@@ -14,8 +17,17 @@ interface ConverterCallback<Tx, Ty> { (x: Tx) : Ty}
  * @param createdToOrig (optional) Callback/Arrow function that converts the value in the created ref into the type of the value in the original ref. For strings and numbers, the function can be omitted (then the bridge converts the strings to numbers and vice-versa).
  * @returns a `BridgeRef` that is essentially a regular Vue `Ref` (you use it the same way, you can assign it to regular refs and v-models, no difference), containing two methods that you can call to control the bridge if needed (`.pauseBridgeFromNowOn()` and `.wakeupBridgeAtNextTick()`).
  * */
-export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : BridgeRef<Tcreated> {
-  return createBridge<Torig, Tcreated, Torig, Tcreated>(origRef, origToCreated ?? stringNumberConversion<Tcreated>, createdToOrig ?? stringNumberConversion<Torig>, false)
+export function usePrimitiveRefBridge<Torig, Tcreated>(
+  origRef: Ref<Torig> | ModelRef<Torig>,
+  origToCreated?: ConverterCallback<Torig, Tcreated>,
+  createdToOrig?: ConverterCallback<Tcreated, Torig>,
+): BridgeRef<Tcreated> {
+  return createBridge<Torig, Tcreated, Torig, Tcreated>(
+    origRef,
+    origToCreated ?? stringNumberConversion<Tcreated>,
+    createdToOrig ?? stringNumberConversion<Torig>,
+    false,
+  )
 }
 
 /** This composable creates a two-way pipe between reactive arrays of 2 different types. The values circulate back
@@ -26,8 +38,17 @@ export function usePrimitiveRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|Mode
  * @param createdToOrig (optional) Callback/Arrow function that converts an element in the created array into the type of the elements in the original array. For strings and numbers, the function can be omitted (then the bridge converts the strings to numbers and vice-versa).
  * @returns a `BridgeRef` that is essentially a regular Vue `Ref` (you use it the same way, you can assign it to regular refs and v-models, no difference), containing two methods that you can call to control the bridge if needed (`.pauseBridgeFromNowOn()` and `.wakeupBridgeAtNextTick()`).
  * */
-export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelRef<Torig[]>, origToCreated?: ConverterCallback<Torig, Tcreated>, createdToOrig?: ConverterCallback<Tcreated, Torig>) : BridgeRef<Tcreated[]> {
-  return createBridge<Torig, Tcreated, Torig[], Tcreated[]>(origRef, origToCreated ?? stringNumberConversion<Tcreated>, createdToOrig ?? stringNumberConversion<Torig>, true)
+export function useArrayRefBridge<Torig, Tcreated>(
+  origRef: Ref<Torig[]> | ModelRef<Torig[]>,
+  origToCreated?: ConverterCallback<Torig, Tcreated>,
+  createdToOrig?: ConverterCallback<Tcreated, Torig>,
+): BridgeRef<Tcreated[]> {
+  return createBridge<Torig, Tcreated, Torig[], Tcreated[]>(
+    origRef,
+    origToCreated ?? stringNumberConversion<Tcreated>,
+    createdToOrig ?? stringNumberConversion<Torig>,
+    true,
+  )
 }
 
 /** This composable creates a two-way pipe between reactive objects of 2 different structures. The values circulate back
@@ -38,11 +59,25 @@ export function useArrayRefBridge<Torig, Tcreated> (origRef: Ref<Torig[]>|ModelR
  * @param createdToOrig Callback/Arrow function that converts the object in the created ref into the structure of the object in the original ref.
  * @returns a `BridgeRef` that is essentially a regular Vue `Ref` (you use it the same way, you can assign it to regular refs and v-models, no difference), containing two methods that you can call to control the bridge if needed (`.pauseBridgeFromNowOn()` and `.wakeupBridgeAtNextTick()`).
  * */
-export function useObjectRefBridge<Torig, Tcreated> (origRef: Ref<Torig>|ModelRef<Torig>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>) : BridgeRef<Tcreated> {
-  return createBridge<Torig, Tcreated, Torig, Tcreated>(origRef, origToCreated, createdToOrig, false)
+export function useObjectRefBridge<Torig, Tcreated>(
+  origRef: Ref<Torig> | ModelRef<Torig>,
+  origToCreated: ConverterCallback<Torig, Tcreated>,
+  createdToOrig: ConverterCallback<Tcreated, Torig>,
+): BridgeRef<Tcreated> {
+  return createBridge<Torig, Tcreated, Torig, Tcreated>(
+    origRef,
+    origToCreated,
+    createdToOrig,
+    false,
+  )
 }
 
-function createBridge <Torig, Tcreated, TorigWhole, TcreatedWhole> (origRef: Ref<TorigWhole>|ModelRef<TorigWhole>, origToCreated: ConverterCallback<Torig, Tcreated>, createdToOrig: ConverterCallback<Tcreated, Torig>, bothEndsAreArrays: boolean) : BridgeRef<TcreatedWhole> {
+function createBridge<Torig, Tcreated, TorigWhole, TcreatedWhole>(
+  origRef: Ref<TorigWhole> | ModelRef<TorigWhole>,
+  origToCreated: ConverterCallback<Torig, Tcreated>,
+  createdToOrig: ConverterCallback<Tcreated, Torig>,
+  bothEndsAreArrays: boolean,
+): BridgeRef<TcreatedWhole> {
   const createdRef = ref<TcreatedWhole>() as BridgeRef<TcreatedWhole>
   let pauseBack = false
   let pauseForth = false
@@ -59,38 +94,66 @@ function createBridge <Torig, Tcreated, TorigWhole, TcreatedWhole> (origRef: Ref
     pauseForth = true
   }
 
-  watch(origRef, () => {
-    if (pauseForth) { return }
-    const OasC = (
-      (origRef.value !== undefined)
-        ? bothEndsAreArrays ? (origRef.value as Torig[]).map(el => origToCreated(el)) : origToCreated(origRef.value as Torig)
-        : undefined
-    ) as TcreatedWhole
-    createdRef.value = OasC
-    pauseBack = true
-    nextTick(() => { pauseBack = false })
-  }, { immediate: true, deep: true })
+  watch(
+    origRef,
+    () => {
+      if (pauseForth) {
+        return
+      }
+      const OasC = (
+        origRef.value !== undefined
+          ? bothEndsAreArrays
+            ? (origRef.value as Torig[]).map(el => origToCreated(el))
+            : origToCreated(origRef.value as Torig)
+          : undefined
+      ) as TcreatedWhole
+      createdRef.value = OasC
+      pauseBack = true
+      nextTick(() => {
+        pauseBack = false
+      })
+    },
+    { immediate: true, deep: true },
+  )
 
-  watch(createdRef, () => {
-    if (pauseBack) { return }
-    const CasO = (
-      (createdRef.value !== undefined)
-        ? bothEndsAreArrays ? (createdRef.value as Tcreated[]).map(el => createdToOrig(el)) : createdToOrig(createdRef.value as Tcreated)
-        : undefined
-    ) as TorigWhole
-    origRef.value = CasO
-    pauseForth = true
-    nextTick(() => { pauseForth = false })
-  }, { deep: true })
+  watch(
+    createdRef,
+    () => {
+      if (pauseBack) {
+        return
+      }
+      const CasO = (
+        createdRef.value !== undefined
+          ? bothEndsAreArrays
+            ? (createdRef.value as Tcreated[]).map(el => createdToOrig(el))
+            : createdToOrig(createdRef.value as Tcreated)
+          : undefined
+      ) as TorigWhole
+      origRef.value = CasO
+      pauseForth = true
+      nextTick(() => {
+        pauseForth = false
+      })
+    },
+    { deep: true },
+  )
 
   return createdRef
 }
 
-function stringNumberConversion<TO> (from: any) : TO {
+function stringNumberConversion<TO>(from: any): TO {
   switch (typeof from) {
-    case 'number' : return String(from) as TO
-    case 'string' : return Number(from) as TO
-    case 'undefined' : return undefined as TO
-    default : throw new TypeError('Type ' + typeof from + ' cannot be converted implicitely, please give the bridge a callback function achieving the conversion.')
+    case 'number':
+      return String(from) as TO
+    case 'string':
+      return Number(from) as TO
+    case 'undefined':
+      return undefined as TO
+    default:
+      throw new TypeError(
+        'Type '
+        + typeof from
+        + ' cannot be converted implicitely, please give the bridge a callback function achieving the conversion.',
+      )
   }
 }
diff --git a/frontend/composables/useStripe.ts b/frontend/composables/useStripe.ts
index 3905da9b2..130ced7e4 100644
--- a/frontend/composables/useStripe.ts
+++ b/frontend/composables/useStripe.ts
@@ -1,7 +1,7 @@
 import { inject, warn } from 'vue'
 import type { StripeProvider } from '~/types/stripe'
 
-export function useStripe () {
+export function useStripe() {
   const stripe = inject<StripeProvider>('stripe')
 
   const stripeInit = async (stripePulicKey: string) => {
diff --git a/frontend/composables/useStripeProvider.ts b/frontend/composables/useStripeProvider.ts
index 0ab123805..a012179ba 100644
--- a/frontend/composables/useStripeProvider.ts
+++ b/frontend/composables/useStripeProvider.ts
@@ -1,19 +1,26 @@
 import { provide, warn } from 'vue'
 import { type Stripe, loadStripe } from '@stripe/stripe-js'
 import type { StripeProvider } from '~/types/stripe'
-import type { StripeCustomerPortal, StripeCreateCheckoutSession } from '~/types/api/user'
+import type {
+  StripeCustomerPortal,
+  StripeCreateCheckoutSession,
+} from '~/types/api/user'
 import { API_PATH } from '~/types/customFetch'
 
-export function useStripeProvider () {
+export function useStripeProvider() {
   const { fetch } = useCustomFetch()
-  const { public: { stripeBaseUrl } } = useRuntimeConfig()
+  const {
+    public: { stripeBaseUrl },
+  } = useRuntimeConfig()
 
   const stripe = ref<Stripe | null>(null)
 
   const isStripeProcessing = ref(false)
 
   const isStripeDisabled = computed(() => {
-    return stripe === null || stripe.value === undefined || isStripeProcessing.value
+    return (
+      stripe === null || stripe.value === undefined || isStripeProcessing.value
+    )
   })
 
   const stripeInit = async (stripePulicKey: string) => {
@@ -31,10 +38,13 @@ export function useStripeProvider () {
 
     isStripeProcessing.value = true
 
-    const res = await fetch<StripeCustomerPortal>(API_PATH.STRIPE_CUSTOMER_PORTAL, {
-      body: JSON.stringify({ returnURL: window.location.href }),
-      baseURL: stripeBaseUrl
-    })
+    const res = await fetch<StripeCustomerPortal>(
+      API_PATH.STRIPE_CUSTOMER_PORTAL,
+      {
+        body: JSON.stringify({ returnURL: window.location.href }),
+        baseURL: stripeBaseUrl,
+      },
+    )
 
     window.open(res?.url, '_blank')
 
@@ -48,21 +58,30 @@ export function useStripeProvider () {
 
     isStripeProcessing.value = true
 
-    const res = await fetch<StripeCreateCheckoutSession>(API_PATH.STRIPE_CHECKOUT_SESSION, {
-      body: JSON.stringify({ priceId, addonQuantity: amount }),
-      baseURL: stripeBaseUrl
-    })
+    const res = await fetch<StripeCreateCheckoutSession>(
+      API_PATH.STRIPE_CHECKOUT_SESSION,
+      {
+        body: JSON.stringify({ priceId, addonQuantity: amount }),
+        baseURL: stripeBaseUrl,
+      },
+    )
 
     if (res.sessionId) {
       stripe.value!.redirectToCheckout({ sessionId: res.sessionId }) // stripe.value! checked via isStripeDisabled.value
-    } else {
+    }
+    else {
       warn('StripeCreateCheckoutSession error', res)
     }
 
     isStripeProcessing.value = false
   }
 
-  provide<StripeProvider>('stripe', { stripeInit, stripeCustomerPortal, stripePurchase, isStripeDisabled })
+  provide<StripeProvider>('stripe', {
+    stripeInit,
+    stripeCustomerPortal,
+    stripePurchase,
+    isStripeDisabled,
+  })
 
   return { stripeInit }
 }
diff --git a/frontend/composables/useSwipe.ts b/frontend/composables/useSwipe.ts
index 90333908d..5fbc315a5 100644
--- a/frontend/composables/useSwipe.ts
+++ b/frontend/composables/useSwipe.ts
@@ -1,11 +1,15 @@
 import { intersection } from 'lodash-es'
-import type { SwipeCallback, SwipeDirection, SwipeOptions } from '~/types/swipe'
+import type {
+  SwipeCallback,
+  SwipeDirection,
+  SwipeOptions,
+} from '~/types/swipe'
 
 export const useSwipe = (swipeOptions?: SwipeOptions, bounce = true) => {
   const options = {
     directional_threshold: 100,
     directions: ['all'],
-    ...swipeOptions
+    ...swipeOptions,
   }
   const touchStartX = ref(0)
   const touchEndX = ref(0)
@@ -20,7 +24,10 @@ export const useSwipe = (swipeOptions?: SwipeOptions, bounce = true) => {
     if (event.target === touchableElement.value) {
       return true
     }
-    return !isOrIsInIteractiveContainer(event.target as HTMLElement, touchableElement.value)
+    return !isOrIsInIteractiveContainer(
+      event.target as HTMLElement,
+      touchableElement.value,
+    )
   }
 
   const onTouchStart = (event: TouchEvent) => {
@@ -59,18 +66,24 @@ export const useSwipe = (swipeOptions?: SwipeOptions, bounce = true) => {
     const directions = options.directions
     if (!intersection(directions, ['all', 'left']).length && divX < 0) {
       divX = 0
-    } else if (!intersection(directions, ['all', 'right']).length && divX > 0) {
+    }
+    else if (!intersection(directions, ['all', 'right']).length && divX > 0) {
       divX = 0
     }
     if (!intersection(directions, ['all', 'top']).length && divY < 0) {
       divY = 0
-    } else if (!intersection(directions, ['all', 'bottom']).length && divY > 0) {
+    }
+    else if (
+      !intersection(directions, ['all', 'bottom']).length
+      && divY > 0
+    ) {
       divY = 0
     }
     // Only move horizontally or vertically
     if (Math.abs(divX) > Math.abs(divY)) {
       divY = 0
-    } else {
+    }
+    else {
       divX = 0
     }
 
@@ -86,14 +99,16 @@ export const useSwipe = (swipeOptions?: SwipeOptions, bounce = true) => {
     if (divX > threshold) {
       if (touchEndX.value < touchStartX.value) {
         gDirections.push('left')
-      } else {
+      }
+      else {
         gDirections.push('right')
       }
     }
     if (divY > threshold) {
       if (touchEndY.value < touchStartY.value) {
         gDirections.push('top')
-      } else {
+      }
+      else {
         gDirections.push('bottom')
       }
     }
@@ -101,7 +116,10 @@ export const useSwipe = (swipeOptions?: SwipeOptions, bounce = true) => {
       gDirections.push('all')
     }
 
-    if (intersection(gDirections, options.directions).length && onSwipe.value?.(event, gDirections)) {
+    if (
+      intersection(gDirections, options.directions).length
+      && onSwipe.value?.(event, gDirections)
+    ) {
       return true
     }
   }
@@ -115,11 +133,19 @@ export const useSwipe = (swipeOptions?: SwipeOptions, bounce = true) => {
     touchableElement.value = elem
     onSwipe.value = callback
     if (touchableElement.value) {
-      touchableElement.value.addEventListener('touchstart', onTouchStart, false)
+      touchableElement.value.addEventListener(
+        'touchstart',
+        onTouchStart,
+        false,
+      )
       touchableElement.value.addEventListener('touchend', onTouchEnd, false)
       touchableElement.value.addEventListener('touchcancel', onTouchEnd, false)
       touchableElement.value.addEventListener('touchmove', onTouchMove, false)
-      touchableElement.value.addEventListener('pointerdown', onPointerDown, false)
+      touchableElement.value.addEventListener(
+        'pointerdown',
+        onPointerDown,
+        false,
+      )
     }
   }
 
@@ -139,6 +165,7 @@ export const useSwipe = (swipeOptions?: SwipeOptions, bounce = true) => {
   })
 
   return {
-    setTouchableElement: (elem: HTMLElement, callback: SwipeCallback) => setElement(elem, callback)
+    setTouchableElement: (elem: HTMLElement, callback: SwipeCallback) =>
+      setElement(elem, callback),
   }
 }
diff --git a/frontend/composables/useTableQuery.ts b/frontend/composables/useTableQuery.ts
index f3ca2a005..d91746164 100644
--- a/frontend/composables/useTableQuery.ts
+++ b/frontend/composables/useTableQuery.ts
@@ -1,12 +1,19 @@
 import type { DataTableSortEvent } from 'primevue/datatable'
 import type { Cursor, TableQueryParams } from '~/types/datatable'
 
-export function useTableQuery (initialQuery?: TableQueryParams, initialPageSize = 10) {
+export function useTableQuery(
+  initialQuery?: TableQueryParams,
+  initialPageSize = 10,
+) {
   const cursor = ref<Cursor>()
   const pageSize = ref<number>(initialPageSize)
   const storedQuery = ref<TableQueryParams | undefined>()
 
-  const { value: query, temp: pendingQuery, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(initialQuery, 500)
+  const {
+    value: query,
+    temp: pendingQuery,
+    bounce: setQuery,
+  } = useDebounceValue<TableQueryParams | undefined>(initialQuery, 500)
 
   const onSort = (sort: DataTableSortEvent) => {
     setQuery(setQuerySort(sort, pendingQuery.value))
@@ -34,5 +41,16 @@ export function useTableQuery (initialQuery?: TableQueryParams, initialPageSize
     return JSON.stringify(storedQuery.value) === JSON.stringify(q)
   }
 
-  return { query, pendingQuery, cursor, pageSize, onSort, setCursor, setPageSize, setSearch, setStoredQuery, isStoredQuery }
+  return {
+    query,
+    pendingQuery,
+    cursor,
+    pageSize,
+    onSort,
+    setCursor,
+    setPageSize,
+    setSearch,
+    setStoredQuery,
+    isStoredQuery,
+  }
 }
diff --git a/frontend/composables/useTranslation.ts b/frontend/composables/useTranslation.ts
index 9aae72448..107df5e11 100644
--- a/frontend/composables/useTranslation.ts
+++ b/frontend/composables/useTranslation.ts
@@ -1,11 +1,11 @@
-import type { MessageSchema } from "~/i18n.config";
+import type { MessageSchema } from '~/i18n.config'
 
 export function useTranslation() {
   // enables autocompletion
   // https://vue-i18n.intlify.dev/guide/advanced/typescript.html#resource-keys-completion-supporting
   return {
     ...useI18n<{ message: MessageSchema }>({
-      useScope: "global",
-    })
-  };
+      useScope: 'global',
+    }),
+  }
 }
diff --git a/frontend/composables/useValidatorDashboardGroups.ts b/frontend/composables/useValidatorDashboardGroups.ts
index 46ebdc415..9b806fd83 100644
--- a/frontend/composables/useValidatorDashboardGroups.ts
+++ b/frontend/composables/useValidatorDashboardGroups.ts
@@ -1,16 +1,18 @@
 import type { VDBOverviewGroup } from '~/types/api/validator_dashboard'
 
-export function useValidatorDashboardGroups () {
+export function useValidatorDashboardGroups() {
   const { overview } = useValidatorDashboardOverviewStore()
   const { t: $t } = useTranslation()
 
   const groups = computed<VDBOverviewGroup[]>(() => {
     if (!overview.value?.groups) {
-      return [{
-        id: 0,
-        name: $t('dashboard.group.selection.default'),
-        count: 0
-      }]
+      return [
+        {
+          id: 0,
+          name: $t('dashboard.group.selection.default'),
+          count: 0,
+        },
+      ]
     }
 
     return overview.value.groups
diff --git a/frontend/composables/useValue.ts b/frontend/composables/useValue.ts
index d18bca548..f3a1fcdc8 100644
--- a/frontend/composables/useValue.ts
+++ b/frontend/composables/useValue.ts
@@ -1,43 +1,60 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { formatEther, commify } from '@ethersproject/units'
 import type { Currency, CryptoCurrency } from '~/types/currencies'
-import type { ExtendedLabel, WeiToValue, ValueConvertOptions } from '~/types/value'
+import type {
+  ExtendedLabel,
+  WeiToValue,
+  ValueConvertOptions,
+} from '~/types/value'
 import { isNative, isFiat } from '~/utils/currency'
 import { OneEther, OneGwei, lessThanGwei, lessThanEth } from '~/utils/ether'
 import { commmifyLeft, trim, withCurrency } from '~/utils/format'
 
-export function useValue () {
+export function useValue() {
   const { currency, rates } = useCurrency()
 
   const converter = computed(() => {
-    const weiToValue:WeiToValue = (wei?: string | BigNumber, options?: ValueConvertOptions): ExtendedLabel => {
+    const weiToValue: WeiToValue = (
+      wei?: string | BigNumber,
+      options?: ValueConvertOptions,
+    ): ExtendedLabel => {
       if (!wei) {
         return { label: '' }
       }
       const useNative = isNative(currency.value)
       const source: CryptoCurrency = options?.sourceCurrency ?? 'ETH'
-      const target: Currency = options?.targetCurrency || (useNative ? source : currency.value)
+      const target: Currency
+        = options?.targetCurrency || (useNative ? source : currency.value)
       let value = typeof wei === 'string' ? BigNumber.from(wei) : wei
       if (value.isZero()) {
         if (options?.fixedDecimalCount) {
           return {
-            label: withCurrency(`0.${nZeros(options?.fixedDecimalCount)}`, target)
+            label: withCurrency(
+              `0.${nZeros(options?.fixedDecimalCount)}`,
+              target,
+            ),
           }
         }
         return {
-          label: withCurrency('0', target)
+          label: withCurrency('0', target),
         }
       }
 
       // If a different sourceUnit is defined we multiply accordingly. We usually get gwei, but you never know.
       if (options?.sourceUnit === 'GWEI') {
         value = value.mul(OneGwei)
-      } else if (options?.sourceUnit === 'MAIN') {
+      }
+      else if (options?.sourceUnit === 'MAIN') {
         value = value.mul(OneEther)
       }
 
       // If we don't show the native currency but the input is not ETH we first convert it to ETH
-      if (!useNative && source !== 'ETH' && source !== target && rates.value[source]?.rate) {
+      if (
+        !useNative
+        && source !== 'ETH'
+        && source !== target
+        && rates.value[source]?.rate
+      ) {
         value = bigDiv(value, rates.value[source]!.rate)
       }
       // If source and target are different we convert it in the target currency
@@ -45,18 +62,38 @@ export function useValue () {
         value = bigMul(value, rates.value[target]!.rate)
       }
       let currencyLabel: string = target
-      const minDecimalCount: number | undefined = options?.fixedDecimalCount ?? options?.minDecimalCount
-      let maxDecimalCount: number = options?.fixedDecimalCount ?? options?.maxDecimalCount ?? 5
+      const minDecimalCount: number | undefined
+        = options?.fixedDecimalCount ?? options?.minDecimalCount
+      let maxDecimalCount: number
+        = options?.fixedDecimalCount ?? options?.maxDecimalCount ?? 5
 
       if (isFiat(target)) {
         maxDecimalCount = Math.min(maxDecimalCount, 2)
       }
-      if ((useNative || source === 'ETH') && (!options?.minUnit || options?.minUnit !== 'MAIN')) {
-        if (options?.fixedUnit === 'WEI' || ((!options?.minUnit || options?.minUnit === 'WEI') && lessThanGwei(value.abs(), options?.minUnitDecimalCount ?? maxDecimalCount))) {
+      if (
+        (useNative || source === 'ETH')
+        && (!options?.minUnit || options?.minUnit !== 'MAIN')
+      ) {
+        if (
+          options?.fixedUnit === 'WEI'
+          || ((!options?.minUnit || options?.minUnit === 'WEI')
+          && lessThanGwei(
+            value.abs(),
+            options?.minUnitDecimalCount ?? maxDecimalCount,
+          ))
+        ) {
           value = value.mul(OneEther)
           maxDecimalCount = 0
           currencyLabel = 'WEI'
-        } else if (options?.fixedUnit === 'GWEI' || ((!options?.minUnit || options?.minUnit === 'GWEI') && lessThanEth(value.abs(), options?.minUnitDecimalCount ?? maxDecimalCount))) {
+        }
+        else if (
+          options?.fixedUnit === 'GWEI'
+          || ((!options?.minUnit || options?.minUnit === 'GWEI')
+          && lessThanEth(
+            value.abs(),
+            options?.minUnitDecimalCount ?? maxDecimalCount,
+          ))
+        ) {
           value = value.mul(OneGwei)
           currencyLabel = 'GWEI'
         }
@@ -65,11 +102,21 @@ export function useValue () {
       const ether = formatEther(value)
       const label = trim(ether, maxDecimalCount, minDecimalCount)
       const fullLabel = commmifyLeft(ether)
-      const fullRequired = (label.startsWith('<') || !commify(label.replaceAll(',', '')).startsWith(fullLabel))
+      const fullRequired
+        = label.startsWith('<')
+        || !commify(label.replaceAll(',', '')).startsWith(fullLabel)
 
       return {
-        label: withCurrency(addPlusSign(label, options?.addPlus === true), currencyLabel),
-        fullLabel: fullRequired ? withCurrency(addPlusSign(fullLabel, options?.addPlus === true), currencyLabel) : undefined
+        label: withCurrency(
+          addPlusSign(label, options?.addPlus === true),
+          currencyLabel,
+        ),
+        fullLabel: fullRequired
+          ? withCurrency(
+            addPlusSign(fullLabel, options?.addPlus === true),
+            currencyLabel,
+          )
+          : undefined,
       }
     }
     return { weiToValue }
diff --git a/frontend/composables/useWindowSize.ts b/frontend/composables/useWindowSize.ts
index f5c4a32de..8a8c794cb 100644
--- a/frontend/composables/useWindowSize.ts
+++ b/frontend/composables/useWindowSize.ts
@@ -1,7 +1,7 @@
 import { inject } from 'vue'
 import type { WindowSize } from '~/types/window'
 
-export function useWindowSize () {
+export function useWindowSize() {
   const size = inject<WindowSize>('windowSize')
 
   const width = computed(() => size?.width?.value ?? 2000)
diff --git a/frontend/composables/useWindowSizeProvider.ts b/frontend/composables/useWindowSizeProvider.ts
index 75e6ea35f..01d9d104d 100644
--- a/frontend/composables/useWindowSizeProvider.ts
+++ b/frontend/composables/useWindowSizeProvider.ts
@@ -1,13 +1,15 @@
 import { ref, provide } from 'vue'
 import type { WindowSize } from '~/types/window'
 
-export function useWindowSizeProvider () {
+export function useWindowSizeProvider() {
   const width = ref(2000)
   const height = ref(2000)
 
   const validatePageSize = () => {
     width.value = document.body.clientWidth // clientWidth => window width - scrollbar width
-    height.value = window.innerHeight // we need to use the innerHeight as the body.clientHeight is content debendent and we don't want to have horizontal scrollbars over the whole page anyway.
+    // we need to use the innerHeight as the body.clientHeight is content
+    // debendent and we don't want to have horizontal scrollbars over the whole page anyway.
+    height.value = window.innerHeight
   }
 
   onMounted(() => {
diff --git a/frontend/decision-record.md b/frontend/decision-record.md
index 3a4099660..d2e222615 100644
--- a/frontend/decision-record.md
+++ b/frontend/decision-record.md
@@ -3,17 +3,22 @@
 ## D-001: conventinal commits for `commit message formatting`
 
 ### Status
+
 accepted by @MauserBitfly @benji-bitfly @marcel-bitfly
 
 ### Context
+
 At the moment commit messages are not formatted in a standard way.
 This makes it harder to work together, e.g. when resolving merge conflicts.
 
 ### Decision
+
 We are using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for commit messages.
 
 ### Consequences
+
 Commit messsages will be formatted in a standard way.
+
 - which will reduce the cognitive load
   - as it is easier to understand `code changes`, e.g. when `line blaming`
   - as it is easier to formulate meaningful `commit messages`
@@ -24,23 +29,26 @@ Commit messsages will be formatted in a standard way.
 
 1. [Conventinal Commits Cheat Sheet](https://gist.github.com/qoomon/5dfcdf8eec66a051ecd85625518cfd13)
 
-
 👇 Template: copy from here 👇
 
 ## D-XXX: Short_title_of_solved_problem_and_solution
 
 ### Status
+
 proposed | rejected | accepted | deprecated | superseded by D-XXX
 
 ### Context
+
 What is the issue that we're seeing that is motivating this decision or change?
 
 ### Decision
+
 What is the change that we're proposing and/or doing?
 
 ### Consequences
+
 What becomes easier or more difficult to do because of this change?
 
 ### References
 
-1. [Documenting architecture decisions](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions) - Michael Nygard
\ No newline at end of file
+1. [Documenting architecture decisions](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions) - Michael Nygard
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index 3de60bb04..aa77b4c25 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -1,16 +1,23 @@
 // @ts-check
 import withNuxt from './.nuxt/eslint.config.mjs'
 
-export default withNuxt(
-  {
-    ignores: [
-      "types/api",
-      "public",
-    ],
-  },
-  {
-      rules: {
-        "@typescript-eslint/no-explicit-any": "off", // should be removed eventually
+export default withNuxt({
+  rules: {
+    'vue/max-len': [
+      'error',
+      {
+        code: 120,
+        ignoreStrings: true,
+        ignoreHTMLAttributeValues: true,
       },
+    ],
   },
-)
+})
+  .prepend({
+    ignores: ['types/api', 'public', 'assets/css/prime_origin.scss'],
+  })
+  .override('nuxt/typescript/rules', {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off', // TODO: remove this rule
+    },
+  })
diff --git a/frontend/globals.d.ts b/frontend/globals.d.ts
index d1a33b1c8..cd7d80662 100644
--- a/frontend/globals.d.ts
+++ b/frontend/globals.d.ts
@@ -1,3 +1,3 @@
 interface Window {
   reviveAsync?: Record<string, { refresh: () => void }>
-}
\ No newline at end of file
+}
diff --git a/frontend/i18n.config.ts b/frontend/i18n.config.ts
index d9728d1b3..2a1f7b871 100644
--- a/frontend/i18n.config.ts
+++ b/frontend/i18n.config.ts
@@ -6,6 +6,6 @@ export default defineI18nConfig(() => ({
   legacy: false,
   locale: 'en',
   messages: {
-    en
-  }
+    en,
+  },
 }))
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index e974b9286..5980161a8 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -322,7 +322,7 @@
     },
     "subscriptions": {
       "dialog_title": "Edit Subscriptions",
-      "validators" : {
+      "validators": {
         "explanation": "All notifications are sent after network finality (~{count} min).",
         "is_validator_offline_subscribed": {
           "option": "Validator is offline",
@@ -334,78 +334,85 @@
           ]
         },
         "group_offline_threshold": {
-          "option":"Group is offline",
+          "option": "Group is offline",
           "hint": [
             "We will trigger a notification:",
             "Once validators in your group are offline. | Once {count}% of your group is offline. | Once {count}% of your group is offline.",
             "Once you have been offline for 3 epochs.",
             "Every 32 Epochs (~3 hours) during your downtime.",
             "Once you are back online.",
-            "Note:", "Notification resets if you do not meet the threshold given in the input field. | Notification resets if you do not meet the threshold of {count}%. | Notification resets if you do not meet the threshold of {count}%."
+            "Note:",
+            "Notification resets if you do not meet the threshold given in the input field. | Notification resets if you do not meet the threshold of {count}%. | Notification resets if you do not meet the threshold of {count}%."
           ],
           "placeholder": ""
         },
         "is_attestations_missed_subscribed": {
-          "option":"Attestations missed",
+          "option": "Attestations missed",
           "hint": "We will trigger every epoch ({count} minute) during downtime. | We will trigger every epoch ({count} minutes) during downtime."
         },
         "is_block_proposal_subscribed": {
-          "option":"Block proposal (missed & success)"
+          "option": "Block proposal (missed & success)"
         },
         "is_upcoming_block_proposal_subscribed": {
-          "option":"Upcoming block proposal",
+          "option": "Upcoming block proposal",
           "hint": "May trigger false positive notifications during reorgs."
         },
         "is_sync_subscribed": {
-          "option":"Sync committee"
+          "option": "Sync committee"
         },
         "is_withdrawal_processed_subscribed": {
-          "option":"Withdrawal processed"
+          "option": "Withdrawal processed"
         },
         "is_slashed_subscribed": {
-          "option":"Validator got slashed"
+          "option": "Validator got slashed"
         },
         "is_real_time_mode_enabled": {
-          "option":"Realtime mode",
+          "option": "Realtime mode",
           "hint": "Sends notifications after the first epoch and does not wait for finality to send notifications, which might cause false positive notifications."
         },
         "all": {
-          "option":"All events"
+          "option": "All events"
         }
       },
       "accounts": {
         "explanation": "",
         "is_incoming_transactions_subscribed": {
-          "option":"Incoming transactions"
+          "option": "Incoming transactions"
         },
         "is_outgoing_transactions_subscribed": {
-          "option":"Outgoing transactions"
+          "option": "Outgoing transactions"
         },
         "is_erc20_token_transfers_subscribed": {
-          "option":"ERC20 token transfers"
+          "option": "ERC20 token transfers"
         },
         "erc20_token_transfers_value_threshold": {
-          "option":"ERC20 token transfers",
+          "option": "ERC20 token transfers",
           "placeholder": "value ≥ $0"
         },
         "is_erc721_token_transfers_subscribed": {
-          "option":"ERC721 token transfers"
+          "option": "ERC721 token transfers"
         },
         "is_erc1155_token_transfers_subscribed": {
-          "option":"ERC1155 token transfers"
+          "option": "ERC1155 token transfers"
         },
         "all": {
-          "option":"All events"
+          "option": "All events"
         },
         "subscribed_chain_ids": {
-          "option":"Networks"
+          "option": "Networks"
         },
         "is_ignore_spam_transactions_enabled": {
-          "option":"Ignore spam transactions",
-          "hint": ["Ignores", "zero value transfer tx's", "and token tx's that have the", "\"hidden\" token label", "."]
+          "option": "Ignore spam transactions",
+          "hint": [
+            "Ignores",
+            "zero value transfer tx's",
+            "and token tx's that have the",
+            "\"hidden\" token label",
+            "."
+          ]
         }
       },
-      "button":"Close",
+      "button": "Close",
       "error_title": "Error",
       "error_group": "Notification subscriptions",
       "error_message": "We could not save your preferences."
@@ -500,7 +507,7 @@
           "webhook_url": "Webhook could not be sent successfully",
           "discord": "Discord webhook could not be sent successfully."
         }
-      } 
+      }
     }
   },
   "rocketpool": {
@@ -819,12 +826,7 @@
     "forgotten": "Forgot password?",
     "choose_password": "Choose a password",
     "confirm_password": "Confirm your password",
-    "please_agree": [
-      "I agree to the",
-      "T&C",
-      "and",
-      "Privacy Policy"
-    ],
+    "please_agree": ["I agree to the", "T&C", "and", "Privacy Policy"],
     "error_title": "Error",
     "error_login_group": "Cannot log in",
     "error_login_message": "your email or your password is unknown.",
diff --git a/frontend/i18n/fr.json b/frontend/i18n/fr.json
index 295290785..d5a919bd0 100644
--- a/frontend/i18n/fr.json
+++ b/frontend/i18n/fr.json
@@ -1,62 +1,62 @@
 {
-    "validator_state": {
-      "active": "actif",
-      "pending": "en attente",
-      "exited": "quitté",
-      "slashed": "slashé"
-    },
-    "statistics": {
-      "24h": "sur 24h",
-      "7d": "sur 7d",
-      "31d": "sur 31d",
-      "365d": "sur 365j",
-      "all": "depuis toujours"
-    },
-    "dashboard": {
-      "title": "Tableau de bord",
-      "validator": {
-        "overview": {
-          "total_efficiency": "Efficacité totale",
-          "total_rewards": "Récompense totale",
-          "proposal_luck": "Chance: Proposal",
-          "sync_committee_luck": "Chance: Sync Committee",
-          "total_apr": "APR total"
-        }
+  "validator_state": {
+    "active": "actif",
+    "pending": "en attente",
+    "exited": "quitté",
+    "slashed": "slashé"
+  },
+  "statistics": {
+    "24h": "sur 24h",
+    "7d": "sur 7d",
+    "31d": "sur 31d",
+    "365d": "sur 365j",
+    "all": "depuis toujours"
+  },
+  "dashboard": {
+    "title": "Tableau de bord",
+    "validator": {
+      "overview": {
+        "total_efficiency": "Efficacité totale",
+        "total_rewards": "Récompense totale",
+        "proposal_luck": "Chance: Proposal",
+        "sync_committee_luck": "Chance: Sync Committee",
+        "total_apr": "APR total"
       }
-    },
-    "login": {
-      "password": "Mot de passe",
-      "submit": "Identifiant",
-      "title": "Identifiant",
-      "email": "Adresse e-mail"
-    },
-    "footer": {
-      "legal_notices": "Mentions légales",
-      "resources": "Ressources",
-      "links": "Liens",
-      "imprint": "À propos",
-      "terms": "Termes et conditions",
-      "privacy": "Protection des données",
-      "api_docs": "Docs de l'API",
-      "api_pricing": "Tarifs d'accès à l'API",
-      "premium": "beaconcha.in Premium",
-      "advertise": "Devenez annonceur",
-      "shop": "Boutique fashion",
-      "status": "Statut du site",
-      "press_kit": "Dossier de presse"
-    },
-    "search_bar": {
-      "general_placeholder": "Cherchez dans la blockchain",
-      "account_placeholder": "Addresse ou nom ENS",
-      "validator_placeholder": "Index, Clé publique, Adresse ou ENS de dépôt ou de retrait, Graffiti, ...",
-      "searching": "Recherche en cours...",
-      "something_wrong": "Une erreur est survenue",
-      "try_again": "Essayez à nouveau dans quelques instants.",
-      "no_result_matches": "Aucun résultat ne correspond à",
-      "your_input": "votre entrée",
-      "your_filters": "vos filtres",
-      "one_result_hidden": "résultat caché",
-      "several_results_hidden": "résultats cachés",
-      "by_your_filters": "par vos filtres"
     }
+  },
+  "login": {
+    "password": "Mot de passe",
+    "submit": "Identifiant",
+    "title": "Identifiant",
+    "email": "Adresse e-mail"
+  },
+  "footer": {
+    "legal_notices": "Mentions légales",
+    "resources": "Ressources",
+    "links": "Liens",
+    "imprint": "À propos",
+    "terms": "Termes et conditions",
+    "privacy": "Protection des données",
+    "api_docs": "Docs de l'API",
+    "api_pricing": "Tarifs d'accès à l'API",
+    "premium": "beaconcha.in Premium",
+    "advertise": "Devenez annonceur",
+    "shop": "Boutique fashion",
+    "status": "Statut du site",
+    "press_kit": "Dossier de presse"
+  },
+  "search_bar": {
+    "general_placeholder": "Cherchez dans la blockchain",
+    "account_placeholder": "Addresse ou nom ENS",
+    "validator_placeholder": "Index, Clé publique, Adresse ou ENS de dépôt ou de retrait, Graffiti, ...",
+    "searching": "Recherche en cours...",
+    "something_wrong": "Une erreur est survenue",
+    "try_again": "Essayez à nouveau dans quelques instants.",
+    "no_result_matches": "Aucun résultat ne correspond à",
+    "your_input": "votre entrée",
+    "your_filters": "vos filtres",
+    "one_result_hidden": "résultat caché",
+    "several_results_hidden": "résultats cachés",
+    "by_your_filters": "par vos filtres"
   }
+}
diff --git a/frontend/middleware/redirect.global.ts b/frontend/middleware/redirect.global.ts
index 5501519ae..69252afda 100644
--- a/frontend/middleware/redirect.global.ts
+++ b/frontend/middleware/redirect.global.ts
@@ -1,6 +1,10 @@
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
-export default function ({ name, params, query }: RouteLocationNormalizedLoaded) {
+export default function ({
+  name,
+  params,
+  query,
+}: RouteLocationNormalizedLoaded) {
   const config = useRuntimeConfig()
   const showInDevelopment = Boolean(config.public.showInDevelopment)
   const v1Domain = config.public.v1Domain || 'https://beaconcha.in'
@@ -11,37 +15,41 @@ export default function ({ name, params, query }: RouteLocationNormalizedLoaded)
     case 'notifications':
       if (!showInDevelopment) {
         return navigateTo(`${v1Domain}/user/notifications`, {
-          external: true
+          external: true,
         })
       }
       break
     case 'block':
       return navigateTo(`${v1Domain}/block/${params.id || params.slug?.[1]}`, {
-        external: true
+        external: true,
       })
     case 'slot':
       return navigateTo(`${v1Domain}/slot/${params.id || params.slug?.[1]}`, {
-        external: true
+        external: true,
       })
     case 'epoch':
       return navigateTo(`${v1Domain}/epoch/${params.id || params.slug?.[1]}`, {
-        external: true
+        external: true,
       })
     case 'tx':
       return navigateTo(`${v1Domain}/tx/${params.id || params.slug?.[1]}`, {
-        external: true
+        external: true,
       })
     case 'address':
       return navigateTo(
         `${v1Domain}/address/${params.id || params.slug?.[1]}`,
-        { external: true }
+        { external: true },
       )
     case 'dashboard':
     case 'dashboard-id':
       if (query.validators && typeof query.validators === 'string') {
-        const list = query.validators.split(',').filter((v) => {
-          return isInt(v) || isPublicKey(v)
-        }).slice(0, 20).join(',')
+        const list = query.validators
+          .split(',')
+          .filter((v) => {
+            return isInt(v) || isPublicKey(v)
+          })
+          .slice(0, 20)
+          .join(',')
         if (list.length) {
           const hash = toBase64Url(list)
           return navigateTo(`/dashboard/${hash}`)
@@ -52,7 +60,7 @@ export default function ({ name, params, query }: RouteLocationNormalizedLoaded)
     case 'validator':
       return navigateTo(
         `${v1Domain}/validator/${params.id || params.slug?.[1]}`,
-        { external: true }
+        { external: true },
       )
     case 'mobile':
       return navigateTo(`${v1Domain}/mobile`, { external: true })
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index c7bcb1aa5..c4beff6f3 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -5,6 +5,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import { gitDescribeSync } from 'git-describe'
 import { warn } from 'vue'
+
 let gitVersion = ''
 
 try {
@@ -13,11 +14,16 @@ try {
     gitVersion = info.raw
   }
   if (gitVersion === '' && info.hash != null) {
-    warn('The GitHub tag of the explorer is unknown. Reading the GitHub hash instead.')
+    warn(
+      'The GitHub tag of the explorer is unknown. Reading the GitHub hash instead.',
+    )
     gitVersion = info.hash
   }
-} catch (err) {
-  warn('The GitHub tag and hash of the explorer cannot be read with git-describe.')
+}
+catch (err) {
+  warn(
+    'The GitHub tag and hash of the explorer cannot be read with git-describe.',
+  )
 }
 
 export default defineNuxtConfig({
@@ -27,8 +33,13 @@ export default defineNuxtConfig({
   devServer: {
     https: {
       key: 'server.key',
-      cert: 'server.crt'
-    }
+      cert: 'server.crt',
+    },
+  },
+  eslint: {
+    config: {
+      stylistic: true,
+    },
   },
   runtimeConfig: {
     public: {
@@ -43,69 +54,76 @@ export default defineNuxtConfig({
       logFile: '',
       showInDevelopment: '',
       chainIdByDefault: process.env.PUBLIC_CHAIN_ID_BY_DEFAULT,
-      maintenanceTS: ''
+      maintenanceTS: '',
     },
     private: {
       apiServer: process.env.PRIVATE_API_SERVER,
       legacyApiServer: process.env.PRIVATE_LEGACY_API_SERVER,
-      ssrSecret: process.env.PRIVATE_SSR_SECRET || ''
-    }
+      ssrSecret: process.env.PRIVATE_SSR_SECRET || '',
+    },
   },
-  css: ['~/assets/css/main.scss', '~/assets/css/prime.scss', '@fortawesome/fontawesome-svg-core/styles.css'],
+  css: [
+    '~/assets/css/main.scss',
+    '~/assets/css/prime.scss',
+    '@fortawesome/fontawesome-svg-core/styles.css',
+  ],
   modules: [
     '@nuxtjs/i18n',
     '@nuxtjs/color-mode',
-    ['@pinia/nuxt', {
-      storesDirs: ['./stores/**']
-    }],
-    ['nuxt-primevue', {
-      /* unstyled: true */
-    }],
+    [
+      '@pinia/nuxt',
+      {
+        storesDirs: ['./stores/**'],
+      },
+    ],
+    [
+      'nuxt-primevue',
+      {
+        /* unstyled: true */
+      },
+    ],
     '@nuxt/eslint',
   ],
   typescript: {
-    typeCheck: true
+    typeCheck: true,
   },
   colorMode: {
     preference: 'system', // default value of $colorMode.preference
-    fallback: 'dark' // fallback value if not system preference found
+    fallback: 'dark', // fallback value if not system preference found
   },
   i18n: {
-    vueI18n: './i18n.config.ts'
+    vueI18n: './i18n.config.ts',
   },
   routeRules: {
     '/': {
-      redirect: '/dashboard'
-    }
+      redirect: '/dashboard',
+    },
   },
   nitro: {
-    compressPublicAssets: true
+    compressPublicAssets: true,
   },
   vite: {
     build: {
       rollupOptions: {
         output: {
-          manualChunks (id) {
+          manualChunks(id) {
             if (id.includes('node_modules')) {
               return 'vendor'
             }
           },
-          format: 'es'
+          format: 'es',
         },
-        plugins: [
-          nodeResolve(),
-          commonjs()
-        ]
+        plugins: [nodeResolve(), commonjs()],
       },
-      minify: true
-    }
+      minify: true,
+    },
   },
   postcss: {
     plugins: {
-      autoprefixer: {}
-    }
+      autoprefixer: {},
+    },
   },
   build: {
-    transpile: ['echarts', 'zrender', 'tslib', 'resize-detector']
-  }
+    transpile: ['echarts', 'zrender', 'tslib', 'resize-detector'],
+  },
 })
diff --git a/frontend/package.json b/frontend/package.json
index d5c8051d4..2bb9eed11 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,7 +8,8 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
     "@nuxt/eslint": "^0.3.13",
diff --git a/frontend/pages/[...slug].vue b/frontend/pages/[...slug].vue
index efd5e7025..35da824b3 100644
--- a/frontend/pages/[...slug].vue
+++ b/frontend/pages/[...slug].vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 useBcSeo()
 </script>
+
 <template>
   <p>This page is not yet implemented: {{ $route.params.slug }}</p>
 </template>
diff --git a/frontend/pages/account-dashboard/[[id]]/index.vue b/frontend/pages/account-dashboard/[[id]]/index.vue
index 382f1a7db..05049f4dd 100644
--- a/frontend/pages/account-dashboard/[[id]]/index.vue
+++ b/frontend/pages/account-dashboard/[[id]]/index.vue
@@ -12,15 +12,15 @@ useBcSeo(seoTitle, true)
 
 // TODO: This duplicates code from the validator dashboard page
 // Once the account dashboard page is tackled, improve this
-const dashboardCreationControllerModal = ref<typeof DashboardCreationController>()
-function showDashboardCreation () {
+const dashboardCreationControllerModal
+  = ref<typeof DashboardCreationController>()
+function showDashboardCreation() {
   dashboardCreationControllerModal.value?.show()
 }
-
 </script>
 
 <template>
-  <div v-if="dashboardKey==''">
+  <div v-if="dashboardKey == ''">
     <BcPageWrapper>
       <DashboardCreationController
         ref="dashboardCreationControllerPanel"
@@ -31,7 +31,11 @@ function showDashboardCreation () {
     </BcPageWrapper>
   </div>
   <div v-else>
-    <DashboardCreationController ref="dashboardCreationControllerModal" class="modal-controller" :display-mode="'modal'" />
+    <DashboardCreationController
+      ref="dashboardCreationControllerModal"
+      class="modal-controller"
+      :display-mode="'modal'"
+    />
     <BcPageWrapper>
       <template #top>
         <DashboardHeader @show-creation="showDashboardCreation()" />
@@ -42,7 +46,6 @@ function showDashboardCreation () {
 </template>
 
 <style lang="scss" scoped>
-
 .panel-controller {
   display: flex;
   justify-content: center;
@@ -53,5 +56,4 @@ function showDashboardCreation () {
   max-width: 460px;
   width: 100%;
 }
-
 </style>
diff --git a/frontend/pages/dashboard/[[id]]/index.vue b/frontend/pages/dashboard/[[id]]/index.vue
index b93424e71..a2241fd49 100644
--- a/frontend/pages/dashboard/[[id]]/index.vue
+++ b/frontend/pages/dashboard/[[id]]/index.vue
@@ -6,7 +6,7 @@ import {
   faCubes,
   faFire,
   faWallet,
-  faMoneyBill
+  faMoneyBill,
 } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { DashboardCreationController } from '#components'
@@ -19,30 +19,36 @@ const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
 
 const tabs: HashTabs = {
   summary: {
-    index: 0
+    index: 0,
   },
   rewards: {
-    index: 1
+    index: 1,
   },
   blocks: {
-    index: 2
+    index: 2,
   },
   heatmap: {
     index: 3,
-    disabled: !showInDevelopment
+    disabled: !showInDevelopment,
   },
   deposits: {
-    index: 4
+    index: 4,
   },
   withdrawals: {
-    index: 5
-  }
+    index: 5,
+  },
 }
 
 const { activeIndex, setActiveIndex } = useHashTabs(tabs)
 
 const { dashboardKey, setDashboardKey } = useDashboardKeyProvider('validator')
-const { refreshDashboards, updateHash, dashboards, cookieDashboards, getDashboardLabel } = useUserDashboardStore()
+const {
+  refreshDashboards,
+  updateHash,
+  dashboards,
+  cookieDashboards,
+  getDashboardLabel,
+} = useUserDashboardStore()
 // when we run into an error loading a dashboard keep it here to prevent an infinity loop
 const errorDashboardKeys: string[] = []
 
@@ -53,21 +59,43 @@ const seoTitle = computed(() => {
 useBcSeo(seoTitle, true)
 
 const { refreshOverview, overview } = useValidatorDashboardOverviewStore()
-await useAsyncData('user_dashboards', () => refreshDashboards(), { watch: [isLoggedIn] })
-
-const { error: validatorOverviewError } = await useAsyncData('validator_overview', () => refreshOverview(dashboardKey.value), { watch: [dashboardKey] })
-watch(validatorOverviewError, (error) => {
-  // we temporary blacklist dashboard id's that threw an error
-  if (error && dashboardKey.value && !(!!dashboards.value?.account_dashboards?.find(d => d.id.toString() === dashboardKey.value) || !!dashboards.value?.validator_dashboards?.find(d => !d.is_archived && d.id.toString() === dashboardKey.value))) {
-    if (!errorDashboardKeys.includes(dashboardKey.value)) {
-      errorDashboardKeys.push(dashboardKey.value)
+await useAsyncData('user_dashboards', () => refreshDashboards(), {
+  watch: [isLoggedIn],
+})
+
+const { error: validatorOverviewError } = await useAsyncData(
+  'validator_overview',
+  () => refreshOverview(dashboardKey.value),
+  { watch: [dashboardKey] },
+)
+watch(
+  validatorOverviewError,
+  (error) => {
+    // we temporary blacklist dashboard id's that threw an error
+    if (
+      error
+      && dashboardKey.value
+      && !(
+        !!dashboards.value?.account_dashboards?.find(
+          d => d.id.toString() === dashboardKey.value,
+        )
+        || !!dashboards.value?.validator_dashboards?.find(
+          d => !d.is_archived && d.id.toString() === dashboardKey.value,
+        )
+      )
+    ) {
+      if (!errorDashboardKeys.includes(dashboardKey.value)) {
+        errorDashboardKeys.push(dashboardKey.value)
+      }
+      setDashboardKey('')
     }
-    setDashboardKey('')
-  }
-}, { immediate: true })
+  },
+  { immediate: true },
+)
 
-const dashboardCreationControllerModal = ref<typeof DashboardCreationController>()
-function showDashboardCreationDialog () {
+const dashboardCreationControllerModal
+  = ref<typeof DashboardCreationController>()
+function showDashboardCreationDialog() {
   dashboardCreationControllerModal.value?.show()
 }
 
@@ -77,39 +105,57 @@ const setDashboardKeyIfNoError = (key: string) => {
   }
 }
 
-watch([dashboardKey, isLoggedIn], ([newKey, newLoggedIn], [oldKey]) => {
-  if (!newLoggedIn || !newKey) {
-    // Some checks if we need to update the dashboard key or the public dashboard
-    let cd = dashboards.value?.validator_dashboards?.[0] as CookieDashboard
-    const isPublic = isPublicDashboardKey(newKey)
-    const isShared = isSharedKey(newKey)
-    if (isShared) {
-      return
-    }
-    if (newLoggedIn) {
-      // if we are logged in and have no dashboard key we only want to switch to the first dashboard if it is a private one
-      if (cd && cd.hash === undefined) {
-        setDashboardKeyIfNoError(cd.id.toString())
+watch(
+  [dashboardKey, isLoggedIn],
+  ([newKey, newLoggedIn], [oldKey]) => {
+    if (!newLoggedIn || !newKey) {
+      // Some checks if we need to update the dashboard key or the public dashboard
+      let cd = dashboards.value?.validator_dashboards?.[0] as CookieDashboard
+      const isPublic = isPublicDashboardKey(newKey)
+      const isShared = isSharedKey(newKey)
+      if (isShared) {
+        return
+      }
+      if (newLoggedIn) {
+        // if we are logged in and have no dashboard key we only want to switch
+        //  to the first dashboard if it is a private one
+        if (cd && cd.hash === undefined) {
+          setDashboardKeyIfNoError(cd.id.toString())
+        }
       }
-    } else if (!newLoggedIn && cd && isPublic && (!cd.hash || (cd.hash ?? '') === (oldKey ?? ''))) {
-      // we got a new public dashboard hash but the old hash matches the stored dashboard - so we update the stored dashboard
-      if (!errorDashboardKeys.includes(newKey)) {
-        updateHash('validator', newKey)
+      else if (
+        !newLoggedIn
+        && cd
+        && isPublic
+        && (!cd.hash || (cd.hash ?? '') === (oldKey ?? ''))
+      ) {
+        // we got a new public dashboard hash but the old hash matches the
+        // stored dashboard - so we update the stored dashboard
+        if (!errorDashboardKeys.includes(newKey)) {
+          updateHash('validator', newKey)
+        }
+        setDashboardKeyIfNoError(newKey ?? '')
+      }
+      else if (!newKey || !isPublic) {
+        // trying to view a private dashboad but not logged in
+        cd = cookieDashboards.value
+          ?.validator_dashboards?.[0] as CookieDashboard
+        setDashboardKeyIfNoError(cd?.hash ?? '')
       }
-      setDashboardKeyIfNoError(newKey ?? '')
-    } else if (!newKey || !isPublic) {
-      // trying to view a private dashboad but not logged in
-      cd = cookieDashboards.value?.validator_dashboards?.[0] as CookieDashboard
-      setDashboardKeyIfNoError(cd?.hash ?? '')
     }
-  }
-}, { immediate: true })
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
   <div v-if="!dashboardKey && !dashboards?.validator_dashboards?.length">
     <BcPageWrapper>
-      <DashboardCreationController class="panel-controller" :display-mode="'panel'" :initially-visible="true" />
+      <DashboardCreationController
+        class="panel-controller"
+        :display-mode="'panel'"
+        :initially-visible="true"
+      />
     </BcPageWrapper>
   </div>
   <div v-else>
@@ -128,44 +174,70 @@ watch([dashboardKey, isLoggedIn], ([newKey, newLoggedIn], [oldKey]) => {
       <div>
         <DashboardValidatorSlotViz />
       </div>
-      <TabView lazy class="dashboard-tab-view" :active-index="activeIndex" @update:active-index="setActiveIndex">
+      <TabView
+        lazy
+        class="dashboard-tab-view"
+        :active-index="activeIndex"
+        @update:active-index="setActiveIndex"
+      >
         <TabPanel>
           <template #header>
-            <BcTabHeader :header="$t('dashboard.validator.tabs.summary')" :icon="faChartLineUp" />
+            <BcTabHeader
+              :header="$t('dashboard.validator.tabs.summary')"
+              :icon="faChartLineUp"
+            />
           </template>
           <DashboardTableSummary />
         </TabPanel>
         <TabPanel>
           <template #header>
-            <BcTabHeader :header="$t('dashboard.validator.tabs.rewards')" :icon="faCubes" />
+            <BcTabHeader
+              :header="$t('dashboard.validator.tabs.rewards')"
+              :icon="faCubes"
+            />
           </template>
           <DashboardTableRewards />
         </TabPanel>
         <TabPanel>
           <template #header>
-            <BcTabHeader :header="$t('dashboard.validator.tabs.blocks')" :icon="faCube" />
+            <BcTabHeader
+              :header="$t('dashboard.validator.tabs.blocks')"
+              :icon="faCube"
+            />
           </template>
           <DashboardTableBlocks />
         </TabPanel>
         <TabPanel :disabled="tabs.heatmap.disabled">
           <template #header>
-            <BcTabHeader :header="$t('dashboard.validator.tabs.heatmap')" :icon="faFire" />
+            <BcTabHeader
+              :header="$t('dashboard.validator.tabs.heatmap')"
+              :icon="faFire"
+            />
           </template>
           Heatmap coming soon!
         </TabPanel>
         <TabPanel>
           <template #header>
-            <BcTabHeader :header="$t('dashboard.validator.tabs.deposits')" :icon="faWallet" />
+            <BcTabHeader
+              :header="$t('dashboard.validator.tabs.deposits')"
+              :icon="faWallet"
+            />
           </template>
           <div class="deposits">
             <DashboardTableElDeposits />
-            <FontAwesomeIcon :icon="faArrowDown" class="down_icon" />
+            <FontAwesomeIcon
+              :icon="faArrowDown"
+              class="down_icon"
+            />
             <DashboardTableClDeposits />
           </div>
         </TabPanel>
         <TabPanel>
           <template #header>
-            <BcTabHeader :header="$t('dashboard.validator.tabs.withdrawals')" :icon="faMoneyBill" />
+            <BcTabHeader
+              :header="$t('dashboard.validator.tabs.withdrawals')"
+              :icon="faMoneyBill"
+            />
           </template>
           <DashboardTableWithdrawals />
         </TabPanel>
@@ -183,7 +255,7 @@ watch([dashboardKey, isLoggedIn], ([newKey, newLoggedIn], [oldKey]) => {
   overflow: hidden;
 }
 
-:global(.dashboard-tab-view >.p-tabview-panels) {
+:global(.dashboard-tab-view > .p-tabview-panels) {
   min-height: 699px;
 }
 
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 77648f73e..3c823eef4 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -14,7 +14,11 @@ useBcSeo()
         v-if="showInDevelopment"
         :bar-shape="SearchbarShape.Big"
         :color-theme="SearchbarColors.Default"
-        :screen-width-causing-sudden-change="0 /*if you introduce a media query (or similar) changing the width of the bar, give the threshold here to avoid visual bugs in the list of results */"
+        :screen-width-causing-sudden-change="
+          0
+        /*if you introduce a media query (or similar) changing the width of the
+        bar, give the threshold here to avoid visual bugs in the list of results */
+        "
         class="bar"
       />
     </div>
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 467fe3184..731c7e1cd 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -15,8 +15,8 @@ useBcSeo('login_and_register.title_login')
 const { handleSubmit, errors, defineField } = useForm({
   validationSchema: yupObject({
     email: emailValidation($t),
-    password: passwordValidation($t)
-  })
+    password: passwordValidation($t),
+  }),
 })
 
 const [email, emailAttrs] = defineField('email')
@@ -31,9 +31,14 @@ const onSubmit = handleSubmit(async (values) => {
     }
 
     await navigateTo('/')
-  } catch (error) {
+  }
+  catch (error) {
     password.value = ''
-    toast.showError({ summary: $t('login_and_register.error_title'), group: $t('login_and_register.error_login_group'), detail: $t('login_and_register.error_login_message') })
+    toast.showError({
+      summary: $t('login_and_register.error_title'),
+      group: $t('login_and_register.error_login_group'),
+      detail: $t('login_and_register.error_login_message'),
+    })
   }
 })
 
@@ -42,7 +47,6 @@ const canSubmit = computed(() => email.value && password.value && !Object.keys(e
 const registerLink = computed(() => {
   return provideMobileAuthParams(route.query, '/register')
 })
-
 </script>
 
 <template>
@@ -50,11 +54,16 @@ const registerLink = computed(() => {
     <div class="page">
       <div class="container">
         <div class="title">
-          {{ $t('login_and_register.title_login') }}
+          {{ $t("login_and_register.title_login") }}
         </div>
         <form @submit="onSubmit">
           <div class="input-row">
-            <label for="email" class="label">{{ $t('login_and_register.email') }}</label>
+            <label
+              for="email"
+              class="label"
+            >{{
+              $t("login_and_register.email")
+            }}</label>
             <InputText
               id="email"
               v-model="email"
@@ -68,11 +77,18 @@ const registerLink = computed(() => {
             </div>
           </div>
           <div class="input-row">
-            <label for="password" class="label">
-              <div>{{ $t('login_and_register.password') }}</div>
+            <label
+              for="password"
+              class="label"
+            >
+              <div>{{ $t("login_and_register.password") }}</div>
               <div class="right-cell">
-                <BcLink to="/requestReset" :target="Target.Internal" class="link">
-                  {{ $t('login_and_register.forgotten') }}
+                <BcLink
+                  to="/requestReset"
+                  :target="Target.Internal"
+                  class="link"
+                >
+                  {{ $t("login_and_register.forgotten") }}
                 </BcLink>
               </div>
             </label>
@@ -90,12 +106,21 @@ const registerLink = computed(() => {
           </div>
           <div class="last-row">
             <div class="account-invitation">
-              {{ $t('login_and_register.dont_have_account') }}
-              <BcLink :to="registerLink" :target="Target.Internal" class="link">
-                {{ $t('login_and_register.signup_here') }}
+              {{ $t("login_and_register.dont_have_account") }}
+              <BcLink
+                :to="registerLink"
+                :target="Target.Internal"
+                class="link"
+              >
+                {{ $t("login_and_register.signup_here") }}
               </BcLink>
             </div>
-            <Button class="button" type="submit" :label="$t('login_and_register.submit_login')" :disabled="!canSubmit" />
+            <Button
+              class="button"
+              type="submit"
+              :label="$t('login_and_register.submit_login')"
+              :disabled="!canSubmit"
+            />
           </div>
         </form>
       </div>
@@ -115,7 +140,8 @@ const registerLink = computed(() => {
     padding: var(--padding-large);
     box-sizing: border-box;
     width: min(530px, 100%);
-    @media (max-width: 600px) { // mobile
+    @media (max-width: 600px) {
+      // mobile
       margin-top: 0px;
     }
 
diff --git a/frontend/pages/notifications.vue b/frontend/pages/notifications.vue
index c97e58631..3907b615a 100644
--- a/frontend/pages/notifications.vue
+++ b/frontend/pages/notifications.vue
@@ -3,7 +3,7 @@ import {
   faGaugeSimpleMax,
   faMonitorWaveform,
   faBolt,
-  faNetworkWired
+  faNetworkWired,
 } from '@fortawesome/pro-solid-svg-icons'
 import { BcDialogConfirm } from '#components'
 import type { HashTabs } from '~/types/hashTabs'
@@ -14,7 +14,9 @@ const { isLoggedIn } = useUserStore()
 const dialog = useDialog()
 const { t: $t } = useTranslation()
 
-await useAsyncData('user_dashboards', () => refreshDashboards(), { watch: [isLoggedIn] })
+await useAsyncData('user_dashboards', () => refreshDashboards(), {
+  watch: [isLoggedIn],
+})
 
 const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
 
@@ -22,24 +24,24 @@ const manageNotificationsModalVisisble = ref(false)
 
 const tabs: HashTabs = {
   dashboards: {
-    index: 0
+    index: 0,
   },
   machines: {
     index: 1,
-    disabled: !showInDevelopment
+    disabled: !showInDevelopment,
   },
   clients: {
     index: 2,
-    disabled: !showInDevelopment
+    disabled: !showInDevelopment,
   },
   rocketpool: {
     index: 3,
-    disabled: !showInDevelopment
+    disabled: !showInDevelopment,
   },
   network: {
     index: 4,
-    disabled: !showInDevelopment
-  }
+    disabled: !showInDevelopment,
+  },
 }
 
 const { activeIndex, setActiveIndex } = useHashTabs(tabs)
@@ -50,7 +52,7 @@ const openManageNotifications = () => {
   if (!isLoggedIn.value) {
     dialog.open(BcDialogConfirm, {
       props: {
-        header: $t('notifications.title')
+        header: $t('notifications.title'),
       },
       onClose: async (response) => {
         if (response?.data) {
@@ -58,14 +60,14 @@ const openManageNotifications = () => {
         }
       },
       data: {
-        question: $t('notifications.login_question')
-      }
+        question: $t('notifications.login_question'),
+      },
     })
-  } else {
+  }
+  else {
     manageNotificationsModalVisisble.value = true
   }
 }
-
 </script>
 
 <template>
@@ -77,26 +79,47 @@ const openManageNotifications = () => {
           TODO: Overview
         </div>
       </template>
-      <NotificationsManagementModal v-model="manageNotificationsModalVisisble" />
+      <NotificationsManagementModal
+        v-model="manageNotificationsModalVisisble"
+      />
       <div class="button-row">
-        <Button :label="$t('notifications.manage')" @click="openManageNotifications" />
+        <Button
+          :label="$t('notifications.manage')"
+          @click="openManageNotifications"
+        />
       </div>
-      <TabView lazy class="notifications-tab-view" :active-index="activeIndex" @update:active-index="setActiveIndex">
+      <TabView
+        lazy
+        class="notifications-tab-view"
+        :active-index="activeIndex"
+        @update:active-index="setActiveIndex"
+      >
         <TabPanel>
           <template #header>
-            <BcTabHeader :header="$t('notifications.tabs.dashboards')" :icon="faGaugeSimpleMax" />
+            <BcTabHeader
+              :header="$t('notifications.tabs.dashboards')"
+              :icon="faGaugeSimpleMax"
+            />
           </template>
-          <NotificationsDashboardsTable @open-dialog="openManageNotifications" />
+          <NotificationsDashboardsTable
+            @open-dialog="openManageNotifications"
+          />
         </TabPanel>
         <TabPanel :disabled="tabs.machines.disabled">
           <template #header>
-            <BcTabHeader :header="$t('notifications.tabs.machines')" :icon="faMonitorWaveform" />
+            <BcTabHeader
+              :header="$t('notifications.tabs.machines')"
+              :icon="faMonitorWaveform"
+            />
           </template>
           Machines coming soon!
         </TabPanel>
         <TabPanel :disabled="tabs.clients.disabled">
           <template #header>
-            <BcTabHeader :header="$t('notifications.tabs.clients')" :icon="faBolt" />
+            <BcTabHeader
+              :header="$t('notifications.tabs.clients')"
+              :icon="faBolt"
+            />
           </template>
           Clients coming soon!
         </TabPanel>
@@ -112,7 +135,10 @@ const openManageNotifications = () => {
         </TabPanel>
         <TabPanel :disabled="tabs.network.disabled">
           <template #header>
-            <BcTabHeader :header="$t('notifications.tabs.network')" :icon="faNetworkWired" />
+            <BcTabHeader
+              :header="$t('notifications.tabs.network')"
+              :icon="faNetworkWired"
+            />
           </template>
           <NotificationsNetworkTable />
         </TabPanel>
@@ -122,8 +148,7 @@ const openManageNotifications = () => {
 </template>
 
 <style lang="scss" scoped>
-
-:global(.notifications-tab-view >.p-tabview-panels) {
+:global(.notifications-tab-view > .p-tabview-panels) {
   min-height: 699px;
 }
 
@@ -135,7 +160,7 @@ const openManageNotifications = () => {
   margin-top: var(--padding-large);
 }
 
-.button-row{
+.button-row {
   display: flex;
   justify-content: flex-end;
 }
diff --git a/frontend/pages/playground.vue b/frontend/pages/playground.vue
index 5cac566f1..768efbc62 100644
--- a/frontend/pages/playground.vue
+++ b/frontend/pages/playground.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { useLatestStateStore } from '~/stores/useLatestStateStore'
-import { type InternalGetValidatorDashboardSlotVizResponse, type SlotVizEpoch } from '~/types/api/slot_viz'
+import {
+  type InternalGetValidatorDashboardSlotVizResponse,
+  type SlotVizEpoch,
+} from '~/types/api/slot_viz'
 import { formatNumber } from '~/utils/format'
 
 const { dashboardKey } = useDashboardKeyProvider(undefined, '100')
@@ -14,23 +17,31 @@ const { refreshOverview } = useValidatorDashboardOverviewStore()
 await Promise.all([
   useAsyncData('latest_state', () => refreshLatestState()),
   useAsyncData('test_slot_viz_data', async () => {
-    const res = await $fetch<InternalGetValidatorDashboardSlotVizResponse>('./mock/dashboard/slotViz.json')
+    const res = await $fetch<InternalGetValidatorDashboardSlotVizResponse>(
+      './mock/dashboard/slotViz.json',
+    )
     slotVizData.value = res.data
   }),
-  useAsyncData('validator_dashboard_overview', () => refreshOverview(dashboardKey.value))
+  useAsyncData('validator_dashboard_overview', () =>
+    refreshOverview(dashboardKey.value),
+  ),
 ])
 
 onMounted(async () => {
-  const res = await $fetch<InternalGetValidatorDashboardSlotVizResponse>('./mock/dashboard/slotViz.json')
+  const res = await $fetch<InternalGetValidatorDashboardSlotVizResponse>(
+    './mock/dashboard/slotViz.json',
+  )
   slotVizData.value = res.data
 })
-
 </script>
 
 <template>
   <div class="content">
     <h1>Playground for testing UI components</h1>
-    <BcLink to="/" class="row">
+    <BcLink
+      to="/"
+      class="row"
+    >
       <Button class="row">
         <IconBeaconchainLogo alt="Beaconcha.in logo" />
       </Button>
@@ -53,7 +64,10 @@ onMounted(async () => {
         <PlaygroundAds />
       </TabPanel>
       <TabPanel header="Slot Viz">
-        <SlotVizViewer v-if="slotVizData" :data="slotVizData" />
+        <SlotVizViewer
+          v-if="slotVizData"
+          :data="slotVizData"
+        />
       </TabPanel>
       <TabPanel header="Subset Validators">
         <PlaygroundSubsetList />
diff --git a/frontend/pages/pricing.vue b/frontend/pages/pricing.vue
index 76bebbc4f..d0845fa37 100644
--- a/frontend/pages/pricing.vue
+++ b/frontend/pages/pricing.vue
@@ -10,11 +10,15 @@ const { stripeInit } = useStripeProvider()
 const { products, getProducts } = useProductsStore()
 
 await useAsyncData('get_products', () => getProducts())
-watch(products, () => {
-  if (products.value?.stripe_public_key) {
-    stripeInit(products.value.stripe_public_key)
-  }
-}, { immediate: true })
+watch(
+  products,
+  () => {
+    if (products.value?.stripe_public_key) {
+      stripeInit(products.value.stripe_public_key)
+    }
+  },
+  { immediate: true },
+)
 
 const isYearly = ref(true)
 
@@ -35,12 +39,21 @@ const scrollToAddons = () => {
         <PricingPeriodToggle v-model="isYearly" />
         <PricingPremiumViaAppBanner />
         <PricingPremiumProducts :is-yearly="isYearly" />
-        <Button class="view-addons-button" @click="scrollToAddons()">
-          {{ $t('pricing.view_addons') }}<FontAwesomeIcon :icon="faArrowDown" />
+        <Button
+          class="view-addons-button"
+          @click="scrollToAddons()"
+        >
+          {{ $t("pricing.view_addons") }}<FontAwesomeIcon :icon="faArrowDown" />
         </Button>
         <PricingPremiumCompare />
-        <PricingPremiumAddons id="addons" :is-yearly="isYearly" />
-        <BcFaq class="faq" translation-path="faq.pricing" />
+        <PricingPremiumAddons
+          id="addons"
+          :is-yearly="isYearly"
+        />
+        <BcFaq
+          class="faq"
+          translation-path="faq.pricing"
+        />
       </div>
     </div>
   </BcPageWrapper>
@@ -51,7 +64,7 @@ const scrollToAddons = () => {
 </style>
 
 <style lang="scss" scoped>
-@use '~/assets/css/pricing.scss';
+@use "~/assets/css/pricing.scss";
 
 .page-container {
   position: relative;
@@ -107,7 +120,7 @@ const scrollToAddons = () => {
       }
     }
   }
-  .faq{
+  .faq {
     width: 100%;
     margin-top: 51px;
   }
diff --git a/frontend/pages/register.vue b/frontend/pages/register.vue
index 241759f3a..c2b775836 100644
--- a/frontend/pages/register.vue
+++ b/frontend/pages/register.vue
@@ -18,8 +18,8 @@ const { handleSubmit, errors, defineField } = useForm({
     email: emailValidation($t),
     password: passwordValidation($t),
     confirmPassword: confirmPasswordValidation($t, 'password'),
-    agreement: checkboxValidation('')
-  })
+    agreement: checkboxValidation(''),
+  }),
 })
 
 const [email, emailAttrs] = defineField('email')
@@ -36,24 +36,35 @@ const onSubmit = handleSubmit(async (values) => {
       method: 'POST',
       body: {
         email: values.email,
-        password: values.password
-      }
+        password: values.password,
+      },
     })
     if (handleMobileAuth(route.query)) {
       return
     }
     await navigateTo('/')
-  } catch (error) {
-    toast.showError({ summary: $t('login_and_register.error_title'), group: $t('login_and_register.error_register_group'), detail: $t('login_and_register.error_register_message') })
+  }
+  catch (error) {
+    toast.showError({
+      summary: $t('login_and_register.error_title'),
+      group: $t('login_and_register.error_register_group'),
+      detail: $t('login_and_register.error_register_message'),
+    })
   }
 })
 
-const canSubmit = computed(() => email.value && password.value && confirmPassword.value && agreement.value && !Object.keys(errors.value).length)
+const canSubmit = computed(
+  () =>
+    email.value
+    && password.value
+    && confirmPassword.value
+    && agreement.value
+    && !Object.keys(errors.value).length,
+)
 
 const loginLink = computed(() => {
   return provideMobileAuthParams(route.query, '/login')
 })
-
 </script>
 
 <template>
@@ -61,17 +72,26 @@ const loginLink = computed(() => {
     <div class="page">
       <div class="container">
         <div class="title">
-          {{ $t('login_and_register.title_register') }}
+          {{ $t("login_and_register.title_register") }}
         </div>
         <div class="login-invitation">
-          {{ $t('login_and_register.already_have_account') }}
-          <BcLink :to="loginLink" :target="Target.Internal" class="link">
-            {{ $t('login_and_register.login_here') }}
+          {{ $t("login_and_register.already_have_account") }}
+          <BcLink
+            :to="loginLink"
+            :target="Target.Internal"
+            class="link"
+          >
+            {{ $t("login_and_register.login_here") }}
           </BcLink>
         </div>
         <form @submit="onSubmit">
           <div class="input-row">
-            <label for="email" class="label">{{ $t('login_and_register.email') }}</label>
+            <label
+              for="email"
+              class="label"
+            >{{
+              $t("login_and_register.email")
+            }}</label>
             <InputText
               id="email"
               v-model="email"
@@ -85,7 +105,12 @@ const loginLink = computed(() => {
             </div>
           </div>
           <div class="input-row">
-            <label for="password" class="label">{{ $t('login_and_register.choose_password') }}</label>
+            <label
+              for="password"
+              class="label"
+            >{{
+              $t("login_and_register.choose_password")
+            }}</label>
             <InputText
               id="password"
               v-model="password"
@@ -99,7 +124,12 @@ const loginLink = computed(() => {
             </div>
           </div>
           <div class="input-row">
-            <label for="confirmPassword" class="label">{{ $t('login_and_register.confirm_password') }}</label>
+            <label
+              for="confirmPassword"
+              class="label"
+            >{{
+              $t("login_and_register.confirm_password")
+            }}</label>
             <InputText
               id="confirmPassword"
               v-model="confirmPassword"
@@ -124,17 +154,32 @@ const loginLink = computed(() => {
                 aria-describedby="text-error"
               />
               <div class="text">
-                <label for="agreement">{{ tOf($t, 'login_and_register.please_agree', 0) + ' ' }}</label>
-                <BcLink to="https://storage.googleapis.com/legal.beaconcha.in/tos.pdf" :target="Target.External" class="link">
-                  {{ tOf($t, 'login_and_register.please_agree', 1) }}
+                <label for="agreement">{{
+                  tOf($t, "login_and_register.please_agree", 0) + " "
+                }}</label>
+                <BcLink
+                  to="https://storage.googleapis.com/legal.beaconcha.in/tos.pdf"
+                  :target="Target.External"
+                  class="link"
+                >
+                  {{ tOf($t, "login_and_register.please_agree", 1) }}
                 </BcLink>
-                {{ tOf($t, 'login_and_register.please_agree', 2) }}
-                <BcLink to="https://storage.googleapis.com/legal.beaconcha.in/privacy.pdf" :target="Target.External" class="link">
-                  {{ tOf($t, 'login_and_register.please_agree', 3) }}
+                {{ tOf($t, "login_and_register.please_agree", 2) }}
+                <BcLink
+                  to="https://storage.googleapis.com/legal.beaconcha.in/privacy.pdf"
+                  :target="Target.External"
+                  class="link"
+                >
+                  {{ tOf($t, "login_and_register.please_agree", 3) }}
                 </BcLink>
               </div>
             </div>
-            <Button class="button" type="submit" :label="$t('login_and_register.submit_register')" :disabled="!canSubmit" />
+            <Button
+              class="button"
+              type="submit"
+              :label="$t('login_and_register.submit_register')"
+              :disabled="!canSubmit"
+            />
           </div>
         </form>
       </div>
@@ -154,7 +199,8 @@ const loginLink = computed(() => {
     padding: var(--padding-large);
     box-sizing: border-box;
     width: min(530px, 100%);
-    @media (max-width: 600px) { // mobile
+    @media (max-width: 600px) {
+      // mobile
       margin-top: 0px;
     }
 
@@ -203,7 +249,8 @@ const loginLink = computed(() => {
             margin-bottom: auto;
           }
           .text {
-            @media (max-width: 600px) { // mobile
+            @media (max-width: 600px) {
+              // mobile
               font-size: var(--small_text_font_size);
               line-height: 20px;
             }
@@ -212,7 +259,8 @@ const loginLink = computed(() => {
         .button {
           margin: auto;
           margin-right: 0;
-          @media (max-width: 600px) { // mobile
+          @media (max-width: 600px) {
+            // mobile
             width: 70px;
             padding: 0;
           }
diff --git a/frontend/pages/user/settings.vue b/frontend/pages/user/settings.vue
index 61e2b2284..6e00e2181 100644
--- a/frontend/pages/user/settings.vue
+++ b/frontend/pages/user/settings.vue
@@ -8,11 +8,15 @@ const { products, getProducts } = useProductsStore()
 const buttonsDisabled = ref(false)
 
 await useAsyncData('get_products', () => getProducts())
-watch(products, () => {
-  if (products.value?.stripe_public_key) {
-    stripeInit(products.value.stripe_public_key)
-  }
-}, { immediate: true })
+watch(
+  products,
+  () => {
+    if (products.value?.stripe_public_key) {
+      stripeInit(products.value.stripe_public_key)
+    }
+  },
+  { immediate: true },
+)
 
 if (!isLoggedIn.value) {
   // only users that are logged in can view this page
diff --git a/frontend/pages/validator/[[id]]/index.vue b/frontend/pages/validator/[[id]]/index.vue
index a01be41c1..ca9dd7a3e 100644
--- a/frontend/pages/validator/[[id]]/index.vue
+++ b/frontend/pages/validator/[[id]]/index.vue
@@ -15,6 +15,4 @@ warn(`route id: ${route.params.id}, query: ${route.query}`)
   </BcPageWrapper>
 </template>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>
diff --git a/frontend/plugins/bcLogger.ts b/frontend/plugins/bcLogger.ts
index 7f1966018..6c2a063cc 100644
--- a/frontend/plugins/bcLogger.ts
+++ b/frontend/plugins/bcLogger.ts
@@ -3,19 +3,24 @@ import * as path from 'path'
 import { warn } from 'vue'
 
 export default defineNuxtPlugin((_nuxtApp) => {
-  const { public: { logFile } } = useRuntimeConfig()
+  const {
+    public: { logFile },
+  } = useRuntimeConfig()
   return {
     provide: {
       bcLogger: {
-        warn: (msg: string, ...rest:any) => {
+        warn: (msg: string, ...rest: any) => {
           const ts = new Date().toISOString()
           if (isServer && logFile) {
             const filePath = path.resolve(logFile)
-            fs.appendFileSync(filePath, `${ts}: ${msg} | ${JSON.stringify(rest)}\n`)
+            fs.appendFileSync(
+              filePath,
+              `${ts}: ${msg} | ${JSON.stringify(rest)}\n`,
+            )
           }
           warn(`${ts}: ${msg}`, ...rest)
-        }
-      }
-    }
+        },
+      },
+    },
   }
 })
diff --git a/frontend/plugins/fontawesome.js b/frontend/plugins/fontawesome.js
index 87b56a4ab..fa111b99e 100644
--- a/frontend/plugins/fontawesome.js
+++ b/frontend/plugins/fontawesome.js
@@ -11,7 +11,8 @@ config.autoAddCss = false
 // You can add your icons directly in this plugin. See other examples for how you
 // can add other styles or just individual icons.
 /*
-If we want to include all icons we could add them like this, but it would be better for tree shaking to import them one by one
+If we want to include all icons we could add them like this, but it would be
+better for tree shaking to import them one by one
 library.add(fas)
 library.add(far)
 library.add(fab)
@@ -19,8 +20,6 @@ library.add(fab)
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {
-    css: [
-      '@fortawesome/fontawesome-svg-core/styles.css'
-    ]
+    css: ['@fortawesome/fontawesome-svg-core/styles.css'],
   })
 })
diff --git a/frontend/public/mock/dashboard/overview.json b/frontend/public/mock/dashboard/overview.json
index 35416d492..d47b3f1e6 100644
--- a/frontend/public/mock/dashboard/overview.json
+++ b/frontend/public/mock/dashboard/overview.json
@@ -44,7 +44,7 @@
     "efficiency": {
       "all_time": 55.454,
       "last_24h": 98.45,
-      "last_7d":  77.65,
+      "last_7d": 77.65,
       "last_30d": 88.88
     },
     "rewards": {
@@ -66,10 +66,10 @@
       }
     },
     "apr": {
-      "all_time": {"el":2.45, "cl": 1.45},
-      "last_24h": {"el":3.45, "cl": 21.45},
-      "last_7d": {"el":12.45, "cl": 31.45},
-      "last_30d": {"el":22.45, "cl": 51.45}
+      "all_time": { "el": 2.45, "cl": 1.45 },
+      "last_24h": { "el": 3.45, "cl": 21.45 },
+      "last_7d": { "el": 12.45, "cl": 31.45 },
+      "last_30d": { "el": 22.45, "cl": 51.45 }
     }
   }
 }
diff --git a/frontend/public/mock/dashboard/validatorRewardsChart.json b/frontend/public/mock/dashboard/validatorRewardsChart.json
index 99e8a5f30..238f79c95 100644
--- a/frontend/public/mock/dashboard/validatorRewardsChart.json
+++ b/frontend/public/mock/dashboard/validatorRewardsChart.json
@@ -1,2695 +1,2701 @@
 {
   "data": {
-    "categories": [10000, 10001, 10002, 10003, 10004, 10005, 10006, 10007, 10008, 10009, 10010, 10011, 10012, 10013, 10014, 10015, 10016, 10017, 10018, 10019, 10020, 10021, 10022, 10023, 10024, 10025, 10026, 10027, 10028, 10029, 10030, 10031, 10032, 10033, 10034, 10035, 10036, 10037, 10038, 10039, 10040, 10041, 10042, 10043, 10044, 10045, 10046, 10047, 10048, 10049],
+    "categories": [
+      10000, 10001, 10002, 10003, 10004, 10005, 10006, 10007, 10008, 10009,
+      10010, 10011, 10012, 10013, 10014, 10015, 10016, 10017, 10018, 10019,
+      10020, 10021, 10022, 10023, 10024, 10025, 10026, 10027, 10028, 10029,
+      10030, 10031, 10032, 10033, 10034, 10035, 10036, 10037, 10038, 10039,
+      10040, 10041, 10042, 10043, 10044, 10045, 10046, 10047, 10048, 10049
+    ],
     "series": [
-        {
-            "id": 0,
-            "property": "cl",
-            "data": [
-                "0",
-                "100000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "900000000000000000",
-                "10000000000000",
-                "900000000000000000",
-                "800000000000000000",
-                "700000000000000000",
-                "600000000000000000",
-                "500000000000000000",
-                "400000000000000000",
-                "300000000000000000",
-                "200000000000000000",
-                "100000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "100000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "850000000000000000",
-                "900000000000000000",
-                "950000000000000000",
-                "970000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "990000000000000000",
-                "990000000000000000",
-                "9910000000000000",
-                "990000000000000000",
-                "9932345000000001",
-                "99324450000001",
-                "9932495000001",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 1,
-            "property": "cl",
-            "data": [
-                "870000000000000000",
-                "30000000000000000",
-                "720000000000000000",
-                "240000000000000000",
-                "370000000000000000",
-                "120000000000000000",
-                "510000000000000000",
-                "630000000000000000",
-                "950000000000000000",
-                "450000000000000000",
-                "90000000000000000",
-                "330000000000000000",
-                "320000000000000000",
-                "800000000000000000",
-                "960000000000000000",
-                "410000000000000000",
-                "20000000000000000",
-                "710000000000000000",
-                "40000000000000000",
-                "900000000000000000",
-                "360000000000000000",
-                "530000000000000000",
-                "160000000000000000",
-                "170000000000000000",
-                "50000000000000000",
-                "170000000000000000",
-                "210000000000000000",
-                "740000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "810000000000000000",
-                "670000000000000000",
-                "280000000000000000",
-                "70000000000000000",
-                "410000000000000000",
-                "50000000000000000",
-                "130000000000000000",
-                "740000000000000000",
-                "340000000000000000",
-                "470000000000000000",
-                "70000000000000000",
-                "970000000000000000",
-                "540000000000000000",
-                "620000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "950000000000000000",
-                "220000000000000000",
-                "380000000000000000",
-                "53000000000"
-            ]
-        },
-        {
-            "id": 2,
-            "property": "cl",
-            "data": [
-                "840000000000000000",
-                "600000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "82000000000"
-            ]
-        },
-        {
-            "id": 3,
-            "property": "cl",
-            "data": [
-                "840000000000000000",
-                "600000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "42000000000"
-            ]
-        },
-        {
-            "id": 4,
-            "property": "cl",
-            "data": [
-                "770000000000000000",
-                "300000000000000000",
-                "960000000000000000",
-                "340000000000000000",
-                "900000000000000000",
-                "770000000000000000",
-                "530000000000000000",
-                "400000000000000000",
-                "800000000000000000",
-                "670000000000000000",
-                "0",
-                "360000000000000000",
-                "170000000000000000",
-                "160000000000000000",
-                "160000000000000000",
-                "570000000000000000",
-                "900000000000000000",
-                "710000000000000000",
-                "770000000000000000",
-                "880000000000000000",
-                "700000000000000000",
-                "830000000000000000",
-                "100000000000000000",
-                "580000000000000000",
-                "340000000000000000",
-                "220000000000000000",
-                "600000000000000000",
-                "220000000000000000",
-                "440000000000000000",
-                "330000000000000000",
-                "280000000000000000",
-                "470000000000000000",
-                "410000000000000000",
-                "360000000000000000",
-                "710000000000000000",
-                "610000000000000000",
-                "210000000000000000",
-                "20000000000000000",
-                "190000000000000000",
-                "160000000000000000",
-                "110000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "680000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 5,
-            "property": "cl",
-            "data": [
-                "900000000000000000",
-                "440000000000000000",
-                "350000000000000000",
-                "120000000000000000",
-                "920000000000000000",
-                "450000000000000000",
-                "110000000000000000",
-                "460000000000000000",
-                "910000000000000000",
-                "170000000000000000",
-                "490000000000000000",
-                "770000000000000000",
-                "40000000000000000",
-                "220000000000000000",
-                "270000000000000000",
-                "270000000000000000",
-                "170000000000000000",
-                "10000000000000000",
-                "470000000000000000",
-                "500000000000000000",
-                "490000000000000000",
-                "110000000000000000",
-                "690000000000000000",
-                "420000000000000000",
-                "280000000000000000",
-                "630000000000000000",
-                "230000000000000000",
-                "290000000000000000",
-                "990000000000000000",
-                "820000000000000000",
-                "800000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "250000000000000000",
-                "170000000000000000",
-                "0",
-                "510000000000000000",
-                "250000000000000000",
-                "90000000000000000",
-                "820000000000000000",
-                "520000000000000000",
-                "840000000000000000",
-                "420000000000000000",
-                "490000000000000000",
-                "790000000000000000",
-                "260000000000000000",
-                "120000000000000000",
-                "40000000000000000",
-                "710000000000000000",
-                "80000000000"
-            ]
-        },
-        {
-            "id": 6,
-            "property": "cl",
-            "data": [
-                "720000000000000000",
-                "410000000000000000",
-                "470000000000000000",
-                "350000000000000000",
-                "530000000000000000",
-                "270000000000000000",
-                "480000000000000000",
-                "460000000000000000",
-                "590000000000000000",
-                "380000000000000000",
-                "470000000000000000",
-                "510000000000000000",
-                "150000000000000000",
-                "220000000000000000",
-                "210000000000000000",
-                "520000000000000000",
-                "670000000000000000",
-                "560000000000000000",
-                "470000000000000000",
-                "720000000000000000",
-                "510000000000000000",
-                "280000000000000000",
-                "670000000000000000",
-                "470000000000000000",
-                "360000000000000000",
-                "460000000000000000",
-                "420000000000000000",
-                "640000000000000000",
-                "670000000000000000",
-                "680000000000000000",
-                "510000000000000000",
-                "380000000000000000",
-                "390000000000000000",
-                "350000000000000000",
-                "180000000000000000",
-                "210000000000000000",
-                "290000000000000000",
-                "180000000000000000",
-                "250000000000000000",
-                "400000000000000000",
-                "470000000000000000",
-                "570000000000000000",
-                "440000000000000000",
-                "460000000000000000",
-                "500000000000000000",
-                "320000000000000000",
-                "440000000000000000",
-                "370000000000000000",
-                "250000000000000000",
-                "20000000000"
-            ]
-        },
-        {
-            "id": 9,
-            "property": "cl",
-            "data": [
-                "580000000000000000",
-                "410000000000000000",
-                "470000000000000000",
-                "440000000000000000",
-                "540000000000000000",
-                "320000000000000000",
-                "540000000000000000",
-                "560000000000000000",
-                "690000000000000000",
-                "400000000000000000",
-                "280000000000000000",
-                "510000000000000000",
-                "180000000000000000",
-                "300000000000000000",
-                "260000000000000000",
-                "470000000000000000",
-                "520000000000000000",
-                "490000000000000000",
-                "470000000000000000",
-                "700000000000000000",
-                "480000000000000000",
-                "350000000000000000",
-                "610000000000000000",
-                "340000000000000000",
-                "290000000000000000",
-                "440000000000000000",
-                "560000000000000000",
-                "500000000000000000",
-                "550000000000000000",
-                "610000000000000000",
-                "430000000000000000",
-                "350000000000000000",
-                "310000000000000000",
-                "230000000000000000",
-                "320000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "410000000000000000",
-                "460000000000000000",
-                "310000000000000000",
-                "500000000000000000",
-                "380000000000000000",
-                "370000000000000000",
-                "410000000000000000",
-                "600000000000000000",
-                "570000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "630000000000000000",
-                "43000000000"
-            ]
-        },
-        {
-            "id": 10,
-            "property": "cl",
-            "data": [
-                "0",
-                "110000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "900000000000000000",
-                "1000000000000000000",
-                "900000000000000000",
-                "800000000000000000",
-                "700000000000000000",
-                "600000000000000000",
-                "500000000000000000",
-                "400000000000000000",
-                "300000000000000000",
-                "200000000000000000",
-                "100000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "100000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "850000000000000000",
-                "900000000000000000",
-                "950000000000000000",
-                "970000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "990000000000000000",
-                "990000000000000000",
-                "9910000000000000000",
-                "990000000000000000",
-                "9932345000000001",
-                "99324450000001",
-                "9932495000001",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 11,
-            "property": "cl",
-            "data": [
-                "840000000000000000",
-                "130000000000000000",
-                "720000000000000000",
-                "240000000000000000",
-                "370000000000000000",
-                "120000000000000000",
-                "510000000000000000",
-                "630000000000000000",
-                "950000000000000000",
-                "450000000000000000",
-                "90000000000000000",
-                "330000000000000000",
-                "320000000000000000",
-                "800000000000000000",
-                "960000000000000000",
-                "410000000000000000",
-                "20000000000000000",
-                "710000000000000000",
-                "40000000000000000",
-                "900000000000000000",
-                "360000000000000000",
-                "530000000000000000",
-                "160000000000000000",
-                "170000000000000000",
-                "50000000000000000",
-                "170000000000000000",
-                "210000000000000000",
-                "740000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "810000000000000000",
-                "670000000000000000",
-                "280000000000000000",
-                "70000000000000000",
-                "410000000000000000",
-                "50000000000000000",
-                "130000000000000000",
-                "740000000000000000",
-                "340000000000000000",
-                "470000000000000000",
-                "70000000000000000",
-                "970000000000000000",
-                "540000000000000000",
-                "620000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "950000000000000000",
-                "220000000000000000",
-                "380000000000000000",
-                "53000000000"
-            ]
-        },
-        {
-            "id": 12,
-            "property": "cl",
-            "data": [
-                "840000000000000000",
-                "60000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "82000000000"
-            ]
-        },
-        {
-            "id": 13,
-            "property": "cl",
-            "data": [
-                "840000000000000000",
-                "600000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "42000000000"
-            ]
-        },
-        {
-            "id": 14,
-            "property": "cl",
-            "data": [
-                "770000000000000000",
-                "300000000000000000",
-                "960000000000000000",
-                "340000000000000000",
-                "900000000000000000",
-                "770000000000000000",
-                "530000000000000000",
-                "400000000000000000",
-                "800000000000000000",
-                "670000000000000000",
-                "0",
-                "360000000000000000",
-                "170000000000000000",
-                "160000000000000000",
-                "160000000000000000",
-                "570000000000000000",
-                "900000000000000000",
-                "710000000000000000",
-                "770000000000000000",
-                "880000000000000000",
-                "700000000000000000",
-                "830000000000000000",
-                "100000000000000000",
-                "580000000000000000",
-                "340000000000000000",
-                "220000000000000000",
-                "600000000000000000",
-                "220000000000000000",
-                "440000000000000000",
-                "330000000000000000",
-                "280000000000000000",
-                "470000000000000000",
-                "410000000000000000",
-                "360000000000000000",
-                "710000000000000000",
-                "610000000000000000",
-                "210000000000000000",
-                "20000000000000000",
-                "190000000000000000",
-                "160000000000000000",
-                "110000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "680000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 15,
-            "property": "cl",
-            "data": [
-                "900000000000000000",
-                "440000000000000000",
-                "350000000000000000",
-                "120000000000000000",
-                "920000000000000000",
-                "450000000000000000",
-                "110000000000000000",
-                "460000000000000000",
-                "910000000000000000",
-                "170000000000000000",
-                "490000000000000000",
-                "770000000000000000",
-                "40000000000000000",
-                "220000000000000000",
-                "270000000000000000",
-                "270000000000000000",
-                "170000000000000000",
-                "10000000000000000",
-                "470000000000000000",
-                "500000000000000000",
-                "490000000000000000",
-                "110000000000000000",
-                "690000000000000000",
-                "420000000000000000",
-                "280000000000000000",
-                "630000000000000000",
-                "230000000000000000",
-                "290000000000000000",
-                "990000000000000000",
-                "820000000000000000",
-                "800000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "250000000000000000",
-                "170000000000000000",
-                "0",
-                "510000000000000000",
-                "250000000000000000",
-                "90000000000000000",
-                "820000000000000000",
-                "520000000000000000",
-                "840000000000000000",
-                "420000000000000000",
-                "490000000000000000",
-                "790000000000000000",
-                "260000000000000000",
-                "120000000000000000",
-                "40000000000000000",
-                "710000000000000000",
-                "80000000000"
-            ]
-        },
-        {
-            "id": 16,
-            "property": "cl",
-            "data": [
-                "720000000000000000",
-                "410000000000000000",
-                "470000000000000000",
-                "350000000000000000",
-                "530000000000000000",
-                "270000000000000000",
-                "480000000000000000",
-                "460000000000000000",
-                "590000000000000000",
-                "380000000000000000",
-                "470000000000000000",
-                "510000000000000000",
-                "150000000000000000",
-                "220000000000000000",
-                "210000000000000000",
-                "520000000000000000",
-                "670000000000000000",
-                "560000000000000000",
-                "470000000000000000",
-                "720000000000000000",
-                "510000000000000000",
-                "280000000000000000",
-                "670000000000000000",
-                "470000000000000000",
-                "360000000000000000",
-                "460000000000000000",
-                "420000000000000000",
-                "640000000000000000",
-                "670000000000000000",
-                "680000000000000000",
-                "510000000000000000",
-                "380000000000000000",
-                "390000000000000000",
-                "350000000000000000",
-                "180000000000000000",
-                "210000000000000000",
-                "290000000000000000",
-                "180000000000000000",
-                "250000000000000000",
-                "400000000000000000",
-                "470000000000000000",
-                "570000000000000000",
-                "440000000000000000",
-                "460000000000000000",
-                "500000000000000000",
-                "320000000000000000",
-                "440000000000000000",
-                "370000000000000000",
-                "250000000000000000",
-                "20000000000"
-            ]
-        },
-        {
-            "id": 19,
-            "property": "cl",
-            "data": [
-                "680000000000000000",
-                "400000000000000000",
-                "470000000000000000",
-                "440000000000000000",
-                "540000000000000000",
-                "320000000000000000",
-                "540000000000000000",
-                "560000000000000000",
-                "690000000000000000",
-                "400000000000000000",
-                "280000000000000000",
-                "510000000000000000",
-                "180000000000000000",
-                "300000000000000000",
-                "260000000000000000",
-                "470000000000000000",
-                "520000000000000000",
-                "490000000000000000",
-                "470000000000000000",
-                "700000000000000000",
-                "480000000000000000",
-                "350000000000000000",
-                "610000000000000000",
-                "340000000000000000",
-                "290000000000000000",
-                "440000000000000000",
-                "560000000000000000",
-                "500000000000000000",
-                "550000000000000000",
-                "610000000000000000",
-                "430000000000000000",
-                "350000000000000000",
-                "310000000000000000",
-                "230000000000000000",
-                "320000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "410000000000000000",
-                "460000000000000000",
-                "310000000000000000",
-                "500000000000000000",
-                "380000000000000000",
-                "370000000000000000",
-                "410000000000000000",
-                "600000000000000000",
-                "570000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "630000000000000000",
-                "43000000000"
-            ]
-        },
-        {
-            "id": 20,
-            "property": "cl",
-            "data": [
-                "0",
-                "100000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "900000000000000000",
-                "1000000000000000000",
-                "900000000000000000",
-                "800000000000000000",
-                "700000000000000000",
-                "600000000000000000",
-                "500000000000000000",
-                "400000000000000000",
-                "300000000000000000",
-                "200000000000000000",
-                "100000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "100000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "850000000000000000",
-                "900000000000000000",
-                "950000000000000000",
-                "970000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "990000000000000000",
-                "990000000000000000",
-                "9910000000000000000",
-                "990000000000000000",
-                "9932345000000001",
-                "99324450000001",
-                "9932495000001",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 21,
-            "property": "cl",
-            "data": [
-                "870000000000000000",
-                "30000000000000000",
-                "720000000000000000",
-                "240000000000000000",
-                "370000000000000000",
-                "120000000000000000",
-                "510000000000000000",
-                "630000000000000000",
-                "950000000000000000",
-                "450000000000000000",
-                "90000000000000000",
-                "330000000000000000",
-                "320000000000000000",
-                "800000000000000000",
-                "960000000000000000",
-                "410000000000000000",
-                "20000000000000000",
-                "710000000000000000",
-                "40000000000000000",
-                "900000000000000000",
-                "360000000000000000",
-                "530000000000000000",
-                "160000000000000000",
-                "170000000000000000",
-                "50000000000000000",
-                "170000000000000000",
-                "210000000000000000",
-                "740000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "810000000000000000",
-                "670000000000000000",
-                "280000000000000000",
-                "70000000000000000",
-                "410000000000000000",
-                "50000000000000000",
-                "130000000000000000",
-                "740000000000000000",
-                "340000000000000000",
-                "470000000000000000",
-                "70000000000000000",
-                "970000000000000000",
-                "540000000000000000",
-                "620000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "950000000000000000",
-                "220000000000000000",
-                "380000000000000000",
-                "53000000000"
-            ]
-        },
-        {
-            "id": 22,
-            "property": "cl",
-            "data": [
-                "840000000000000000",
-                "600000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "82000000000"
-            ]
-        },
-        {
-            "id": 23,
-            "property": "cl",
-            "data": [
-                "840000000000000000",
-                "600000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "42000000000"
-            ]
-        },
-        {
-            "id": 24,
-            "property": "cl",
-            "data": [
-                "770000000000000000",
-                "300000000000000000",
-                "960000000000000000",
-                "340000000000000000",
-                "900000000000000000",
-                "770000000000000000",
-                "530000000000000000",
-                "400000000000000000",
-                "800000000000000000",
-                "670000000000000000",
-                "0",
-                "360000000000000000",
-                "170000000000000000",
-                "160000000000000000",
-                "160000000000000000",
-                "570000000000000000",
-                "900000000000000000",
-                "710000000000000000",
-                "770000000000000000",
-                "880000000000000000",
-                "700000000000000000",
-                "830000000000000000",
-                "100000000000000000",
-                "580000000000000000",
-                "340000000000000000",
-                "220000000000000000",
-                "600000000000000000",
-                "220000000000000000",
-                "440000000000000000",
-                "330000000000000000",
-                "280000000000000000",
-                "470000000000000000",
-                "410000000000000000",
-                "360000000000000000",
-                "710000000000000000",
-                "610000000000000000",
-                "210000000000000000",
-                "20000000000000000",
-                "190000000000000000",
-                "160000000000000000",
-                "110000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "680000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 25,
-            "property": "cl",
-            "data": [
-                "900000000000000000",
-                "440000000000000000",
-                "350000000000000000",
-                "120000000000000000",
-                "920000000000000000",
-                "450000000000000000",
-                "110000000000000000",
-                "460000000000000000",
-                "910000000000000000",
-                "170000000000000000",
-                "490000000000000000",
-                "770000000000000000",
-                "40000000000000000",
-                "220000000000000000",
-                "270000000000000000",
-                "270000000000000000",
-                "170000000000000000",
-                "10000000000000000",
-                "470000000000000000",
-                "500000000000000000",
-                "490000000000000000",
-                "110000000000000000",
-                "690000000000000000",
-                "420000000000000000",
-                "280000000000000000",
-                "630000000000000000",
-                "230000000000000000",
-                "290000000000000000",
-                "990000000000000000",
-                "820000000000000000",
-                "800000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "250000000000000000",
-                "170000000000000000",
-                "0",
-                "510000000000000000",
-                "250000000000000000",
-                "90000000000000000",
-                "820000000000000000",
-                "520000000000000000",
-                "840000000000000000",
-                "420000000000000000",
-                "490000000000000000",
-                "790000000000000000",
-                "260000000000000000",
-                "120000000000000000",
-                "40000000000000000",
-                "710000000000000000",
-                "80000000000"
-            ]
-        },
-        {
-            "id": 26,
-            "property": "cl",
-            "data": [
-                "720000000000000000",
-                "410000000000000000",
-                "470000000000000000",
-                "350000000000000000",
-                "530000000000000000",
-                "270000000000000000",
-                "480000000000000000",
-                "460000000000000000",
-                "590000000000000000",
-                "380000000000000000",
-                "470000000000000000",
-                "510000000000000000",
-                "150000000000000000",
-                "220000000000000000",
-                "210000000000000000",
-                "520000000000000000",
-                "670000000000000000",
-                "560000000000000000",
-                "470000000000000000",
-                "720000000000000000",
-                "510000000000000000",
-                "280000000000000000",
-                "670000000000000000",
-                "470000000000000000",
-                "360000000000000000",
-                "460000000000000000",
-                "420000000000000000",
-                "640000000000000000",
-                "670000000000000000",
-                "680000000000000000",
-                "510000000000000000",
-                "380000000000000000",
-                "390000000000000000",
-                "350000000000000000",
-                "180000000000000000",
-                "210000000000000000",
-                "290000000000000000",
-                "180000000000000000",
-                "250000000000000000",
-                "400000000000000000",
-                "470000000000000000",
-                "570000000000000000",
-                "440000000000000000",
-                "460000000000000000",
-                "500000000000000000",
-                "320000000000000000",
-                "440000000000000000",
-                "370000000000000000",
-                "250000000000000000",
-                "20000000000"
-            ]
-        },
-        {
-            "id": 29,
-            "property": "cl",
-            "data": [
-                "680000000000000000",
-                "400000000000000000",
-                "470000000000000000",
-                "440000000000000000",
-                "540000000000000000",
-                "320000000000000000",
-                "540000000000000000",
-                "560000000000000000",
-                "690000000000000000",
-                "400000000000000000",
-                "280000000000000000",
-                "510000000000000000",
-                "180000000000000000",
-                "300000000000000000",
-                "260000000000000000",
-                "470000000000000000",
-                "520000000000000000",
-                "490000000000000000",
-                "470000000000000000",
-                "700000000000000000",
-                "480000000000000000",
-                "350000000000000000",
-                "610000000000000000",
-                "340000000000000000",
-                "290000000000000000",
-                "440000000000000000",
-                "560000000000000000",
-                "500000000000000000",
-                "550000000000000000",
-                "610000000000000000",
-                "430000000000000000",
-                "350000000000000000",
-                "310000000000000000",
-                "230000000000000000",
-                "320000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "410000000000000000",
-                "460000000000000000",
-                "310000000000000000",
-                "500000000000000000",
-                "380000000000000000",
-                "370000000000000000",
-                "410000000000000000",
-                "600000000000000000",
-                "570000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "630000000000000000",
-                "43000000000"
-            ]
-        },
-        {
-            "id": 0,
-            "property": "el",
-            "data": [
-                "0",
-                "100000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "900000000000000000",
-                "1000000000000000000",
-                "900000000000000000",
-                "800000000000000000",
-                "700000000000000000",
-                "600000000000000000",
-                "500000000000000000",
-                "400000000000000000",
-                "300000000000000000",
-                "200000000000000000",
-                "100000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "100000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "850000000000000000",
-                "900000000000000000",
-                "950000000000000000",
-                "970000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "990000000000000000",
-                "990000000000000000",
-                "9910000000000000000",
-                "990000000000000000",
-                "9932345000000001",
-                "99324450000001",
-                "9932495000001",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 1,
-            "property": "el",
-            "data": [
-                "870000000000000000",
-                "30000000000000000",
-                "720000000000000000",
-                "240000000000000000",
-                "370000000000000000",
-                "120000000000000000",
-                "510000000000000000",
-                "630000000000000000",
-                "950000000000000000",
-                "450000000000000000",
-                "90000000000000000",
-                "330000000000000000",
-                "320000000000000000",
-                "800000000000000000",
-                "960000000000000000",
-                "410000000000000000",
-                "20000000000000000",
-                "710000000000000000",
-                "40000000000000000",
-                "900000000000000000",
-                "360000000000000000",
-                "530000000000000000",
-                "160000000000000000",
-                "170000000000000000",
-                "50000000000000000",
-                "170000000000000000",
-                "210000000000000000",
-                "740000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "810000000000000000",
-                "670000000000000000",
-                "280000000000000000",
-                "70000000000000000",
-                "410000000000000000",
-                "50000000000000000",
-                "130000000000000000",
-                "740000000000000000",
-                "340000000000000000",
-                "470000000000000000",
-                "70000000000000000",
-                "970000000000000000",
-                "540000000000000000",
-                "620000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "950000000000000000",
-                "220000000000000000",
-                "380000000000000000",
-                "53000000000"
-            ]
-        },
-        {
-            "id": 2,
-            "property": "el",
-            "data": [
-                "840000000000000000",
-                "600000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "82000000000"
-            ]
-        },
-        {
-            "id": 3,
-            "property": "el",
-            "data": [
-                "840000000000000000",
-                "600000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "42000000000"
-            ]
-        },
-        {
-            "id": 4,
-            "property": "el",
-            "data": [
-                "770000000000000000",
-                "300000000000000000",
-                "960000000000000000",
-                "340000000000000000",
-                "900000000000000000",
-                "770000000000000000",
-                "530000000000000000",
-                "400000000000000000",
-                "800000000000000000",
-                "670000000000000000",
-                "0",
-                "360000000000000000",
-                "170000000000000000",
-                "160000000000000000",
-                "160000000000000000",
-                "570000000000000000",
-                "900000000000000000",
-                "710000000000000000",
-                "770000000000000000",
-                "880000000000000000",
-                "700000000000000000",
-                "830000000000000000",
-                "100000000000000000",
-                "580000000000000000",
-                "340000000000000000",
-                "220000000000000000",
-                "600000000000000000",
-                "220000000000000000",
-                "440000000000000000",
-                "330000000000000000",
-                "280000000000000000",
-                "470000000000000000",
-                "410000000000000000",
-                "360000000000000000",
-                "710000000000000000",
-                "610000000000000000",
-                "210000000000000000",
-                "20000000000000000",
-                "190000000000000000",
-                "160000000000000000",
-                "110000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "680000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 5,
-            "property": "el",
-            "data": [
-                "900000000000000000",
-                "440000000000000000",
-                "350000000000000000",
-                "120000000000000000",
-                "920000000000000000",
-                "450000000000000000",
-                "110000000000000000",
-                "460000000000000000",
-                "910000000000000000",
-                "170000000000000000",
-                "490000000000000000",
-                "770000000000000000",
-                "40000000000000000",
-                "220000000000000000",
-                "270000000000000000",
-                "270000000000000000",
-                "170000000000000000",
-                "10000000000000000",
-                "470000000000000000",
-                "500000000000000000",
-                "490000000000000000",
-                "110000000000000000",
-                "690000000000000000",
-                "420000000000000000",
-                "280000000000000000",
-                "630000000000000000",
-                "230000000000000000",
-                "290000000000000000",
-                "990000000000000000",
-                "820000000000000000",
-                "800000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "250000000000000000",
-                "170000000000000000",
-                "0",
-                "510000000000000000",
-                "250000000000000000",
-                "90000000000000000",
-                "820000000000000000",
-                "520000000000000000",
-                "840000000000000000",
-                "420000000000000000",
-                "490000000000000000",
-                "790000000000000000",
-                "260000000000000000",
-                "120000000000000000",
-                "40000000000000000",
-                "710000000000000000",
-                "80000000000"
-            ]
-        },
-        {
-            "id": 6,
-            "property": "el",
-            "data": [
-                "720000000000000000",
-                "410000000000000000",
-                "470000000000000000",
-                "350000000000000000",
-                "530000000000000000",
-                "270000000000000000",
-                "480000000000000000",
-                "460000000000000000",
-                "590000000000000000",
-                "380000000000000000",
-                "470000000000000000",
-                "510000000000000000",
-                "150000000000000000",
-                "220000000000000000",
-                "210000000000000000",
-                "520000000000000000",
-                "670000000000000000",
-                "560000000000000000",
-                "470000000000000000",
-                "720000000000000000",
-                "510000000000000000",
-                "280000000000000000",
-                "670000000000000000",
-                "470000000000000000",
-                "360000000000000000",
-                "460000000000000000",
-                "420000000000000000",
-                "640000000000000000",
-                "670000000000000000",
-                "680000000000000000",
-                "510000000000000000",
-                "380000000000000000",
-                "390000000000000000",
-                "350000000000000000",
-                "180000000000000000",
-                "210000000000000000",
-                "290000000000000000",
-                "180000000000000000",
-                "250000000000000000",
-                "400000000000000000",
-                "470000000000000000",
-                "570000000000000000",
-                "440000000000000000",
-                "460000000000000000",
-                "500000000000000000",
-                "320000000000000000",
-                "440000000000000000",
-                "370000000000000000",
-                "250000000000000000",
-                "20000000000"
-            ]
-        },
-        {
-            "id": 9,
-            "property": "el",
-            "data": [
-                "580000000000000000",
-                "410000000000000000",
-                "470000000000000000",
-                "440000000000000000",
-                "540000000000000000",
-                "320000000000000000",
-                "540000000000000000",
-                "560000000000000000",
-                "690000000000000000",
-                "400000000000000000",
-                "280000000000000000",
-                "510000000000000000",
-                "180000000000000000",
-                "300000000000000000",
-                "260000000000000000",
-                "470000000000000000",
-                "520000000000000000",
-                "490000000000000000",
-                "470000000000000000",
-                "700000000000000000",
-                "480000000000000000",
-                "350000000000000000",
-                "610000000000000000",
-                "340000000000000000",
-                "290000000000000000",
-                "440000000000000000",
-                "560000000000000000",
-                "500000000000000000",
-                "550000000000000000",
-                "610000000000000000",
-                "430000000000000000",
-                "350000000000000000",
-                "310000000000000000",
-                "230000000000000000",
-                "320000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "410000000000000000",
-                "460000000000000000",
-                "310000000000000000",
-                "500000000000000000",
-                "380000000000000000",
-                "370000000000000000",
-                "410000000000000000",
-                "600000000000000000",
-                "570000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "630000000000000000",
-                "43000000000"
-            ]
-        },
-        {
-            "id": 10,
-            "property": "el",
-            "data": [
-                "0",
-                "110000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "900000000000000000",
-                "1000000000000000000",
-                "900000000000000000",
-                "800000000000000000",
-                "700000000000000000",
-                "600000000000000000",
-                "500000000000000000",
-                "400000000000000000",
-                "300000000000000000",
-                "200000000000000000",
-                "100000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "100000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "850000000000000000",
-                "900000000000000000",
-                "950000000000000000",
-                "970000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "990000000000000000",
-                "990000000000000000",
-                "9910000000000000000",
-                "990000000000000000",
-                "9932345000000001",
-                "99324450000001",
-                "9932495000001",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 11,
-            "property": "el",
-            "data": [
-                "840000000000000000",
-                "130000000000000000",
-                "720000000000000000",
-                "240000000000000000",
-                "370000000000000000",
-                "120000000000000000",
-                "510000000000000000",
-                "630000000000000000",
-                "950000000000000000",
-                "450000000000000000",
-                "90000000000000000",
-                "330000000000000000",
-                "320000000000000000",
-                "800000000000000000",
-                "960000000000000000",
-                "410000000000000000",
-                "20000000000000000",
-                "710000000000000000",
-                "40000000000000000",
-                "900000000000000000",
-                "360000000000000000",
-                "530000000000000000",
-                "160000000000000000",
-                "170000000000000000",
-                "50000000000000000",
-                "170000000000000000",
-                "210000000000000000",
-                "740000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "810000000000000000",
-                "670000000000000000",
-                "280000000000000000",
-                "70000000000000000",
-                "410000000000000000",
-                "50000000000000000",
-                "130000000000000000",
-                "740000000000000000",
-                "340000000000000000",
-                "470000000000000000",
-                "70000000000000000",
-                "970000000000000000",
-                "540000000000000000",
-                "620000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "950000000000000000",
-                "220000000000000000",
-                "380000000000000000",
-                "53000000000"
-            ]
-        },
-        {
-            "id": 12,
-            "property": "el",
-            "data": [
-                "840000000000000000",
-                "60000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "82000000000"
-            ]
-        },
-        {
-            "id": 13,
-            "property": "el",
-            "data": [
-                "840000000000000000",
-                "600000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "42000000000"
-            ]
-        },
-        {
-            "id": 14,
-            "property": "el",
-            "data": [
-                "770000000000000000",
-                "300000000000000000",
-                "960000000000000000",
-                "340000000000000000",
-                "900000000000000000",
-                "770000000000000000",
-                "530000000000000000",
-                "400000000000000000",
-                "800000000000000000",
-                "670000000000000000",
-                "0",
-                "360000000000000000",
-                "170000000000000000",
-                "160000000000000000",
-                "160000000000000000",
-                "570000000000000000",
-                "900000000000000000",
-                "710000000000000000",
-                "770000000000000000",
-                "880000000000000000",
-                "700000000000000000",
-                "830000000000000000",
-                "100000000000000000",
-                "580000000000000000",
-                "340000000000000000",
-                "220000000000000000",
-                "600000000000000000",
-                "220000000000000000",
-                "440000000000000000",
-                "330000000000000000",
-                "280000000000000000",
-                "470000000000000000",
-                "410000000000000000",
-                "360000000000000000",
-                "710000000000000000",
-                "610000000000000000",
-                "210000000000000000",
-                "20000000000000000",
-                "190000000000000000",
-                "160000000000000000",
-                "110000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "680000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 15,
-            "property": "el",
-            "data": [
-                "900000000000000000",
-                "440000000000000000",
-                "350000000000000000",
-                "120000000000000000",
-                "920000000000000000",
-                "450000000000000000",
-                "110000000000000000",
-                "460000000000000000",
-                "910000000000000000",
-                "170000000000000000",
-                "490000000000000000",
-                "770000000000000000",
-                "40000000000000000",
-                "220000000000000000",
-                "270000000000000000",
-                "270000000000000000",
-                "170000000000000000",
-                "10000000000000000",
-                "470000000000000000",
-                "500000000000000000",
-                "490000000000000000",
-                "110000000000000000",
-                "690000000000000000",
-                "420000000000000000",
-                "280000000000000000",
-                "630000000000000000",
-                "230000000000000000",
-                "290000000000000000",
-                "990000000000000000",
-                "820000000000000000",
-                "800000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "250000000000000000",
-                "170000000000000000",
-                "0",
-                "510000000000000000",
-                "250000000000000000",
-                "90000000000000000",
-                "820000000000000000",
-                "520000000000000000",
-                "840000000000000000",
-                "420000000000000000",
-                "490000000000000000",
-                "790000000000000000",
-                "260000000000000000",
-                "120000000000000000",
-                "40000000000000000",
-                "710000000000000000",
-                "80000000000"
-            ]
-        },
-        {
-            "id": 16,
-            "property": "el",
-            "data": [
-                "720000000000000000",
-                "410000000000000000",
-                "470000000000000000",
-                "350000000000000000",
-                "530000000000000000",
-                "270000000000000000",
-                "480000000000000000",
-                "460000000000000000",
-                "590000000000000000",
-                "380000000000000000",
-                "470000000000000000",
-                "510000000000000000",
-                "150000000000000000",
-                "220000000000000000",
-                "210000000000000000",
-                "520000000000000000",
-                "670000000000000000",
-                "560000000000000000",
-                "470000000000000000",
-                "720000000000000000",
-                "510000000000000000",
-                "280000000000000000",
-                "670000000000000000",
-                "470000000000000000",
-                "360000000000000000",
-                "460000000000000000",
-                "420000000000000000",
-                "640000000000000000",
-                "670000000000000000",
-                "680000000000000000",
-                "510000000000000000",
-                "380000000000000000",
-                "390000000000000000",
-                "350000000000000000",
-                "180000000000000000",
-                "210000000000000000",
-                "290000000000000000",
-                "180000000000000000",
-                "250000000000000000",
-                "400000000000000000",
-                "470000000000000000",
-                "570000000000000000",
-                "440000000000000000",
-                "460000000000000000",
-                "500000000000000000",
-                "320000000000000000",
-                "440000000000000000",
-                "370000000000000000",
-                "250000000000000000",
-                "20000000000"
-            ]
-        },
-        {
-            "id": 19,
-            "property": "el",
-            "data": [
-                "680000000000000000",
-                "400000000000000000",
-                "470000000000000000",
-                "440000000000000000",
-                "540000000000000000",
-                "320000000000000000",
-                "540000000000000000",
-                "560000000000000000",
-                "690000000000000000",
-                "400000000000000000",
-                "280000000000000000",
-                "510000000000000000",
-                "180000000000000000",
-                "300000000000000000",
-                "260000000000000000",
-                "470000000000000000",
-                "520000000000000000",
-                "490000000000000000",
-                "470000000000000000",
-                "700000000000000000",
-                "480000000000000000",
-                "350000000000000000",
-                "610000000000000000",
-                "340000000000000000",
-                "290000000000000000",
-                "440000000000000000",
-                "560000000000000000",
-                "500000000000000000",
-                "550000000000000000",
-                "610000000000000000",
-                "430000000000000000",
-                "350000000000000000",
-                "310000000000000000",
-                "230000000000000000",
-                "320000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "410000000000000000",
-                "460000000000000000",
-                "310000000000000000",
-                "500000000000000000",
-                "380000000000000000",
-                "370000000000000000",
-                "410000000000000000",
-                "600000000000000000",
-                "570000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "630000000000000000",
-                "43000000000"
-            ]
-        },
-        {
-            "id": 20,
-            "property": "el",
-            "data": [
-                "0",
-                "100000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "900000000000000000",
-                "1000000000000000000",
-                "900000000000000000",
-                "800000000000000000",
-                "700000000000000000",
-                "600000000000000000",
-                "500000000000000000",
-                "400000000000000000",
-                "300000000000000000",
-                "200000000000000000",
-                "100000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "50000000000000000",
-                "0",
-                "100000000000000000",
-                "200000000000000000",
-                "300000000000000000",
-                "400000000000000000",
-                "500000000000000000",
-                "600000000000000000",
-                "700000000000000000",
-                "800000000000000000",
-                "850000000000000000",
-                "900000000000000000",
-                "950000000000000000",
-                "970000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "980000000000000000",
-                "990000000000000000",
-                "990000000000000000",
-                "9910000000000000000",
-                "990000000000000000",
-                "9932345000000001",
-                "99324450000001",
-                "9932495000001",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 21,
-            "property": "el",
-            "data": [
-                "870000000000000000",
-                "30000000000000000",
-                "720000000000000000",
-                "240000000000000000",
-                "370000000000000000",
-                "120000000000000000",
-                "510000000000000000",
-                "630000000000000000",
-                "950000000000000000",
-                "450000000000000000",
-                "90000000000000000",
-                "330000000000000000",
-                "320000000000000000",
-                "800000000000000000",
-                "960000000000000000",
-                "410000000000000000",
-                "20000000000000000",
-                "710000000000000000",
-                "40000000000000000",
-                "900000000000000000",
-                "360000000000000000",
-                "530000000000000000",
-                "160000000000000000",
-                "170000000000000000",
-                "50000000000000000",
-                "170000000000000000",
-                "210000000000000000",
-                "740000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "810000000000000000",
-                "670000000000000000",
-                "280000000000000000",
-                "70000000000000000",
-                "410000000000000000",
-                "50000000000000000",
-                "130000000000000000",
-                "740000000000000000",
-                "340000000000000000",
-                "470000000000000000",
-                "70000000000000000",
-                "970000000000000000",
-                "540000000000000000",
-                "620000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "950000000000000000",
-                "220000000000000000",
-                "380000000000000000",
-                "53000000000"
-            ]
-        },
-        {
-            "id": 22,
-            "property": "el",
-            "data": [
-                "840000000000000000",
-                "600000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "82000000000"
-            ]
-        },
-        {
-            "id": 23,
-            "property": "el",
-            "data": [
-                "840000000000000000",
-                "600000000000000000",
-                "160000000000000000",
-                "940000000000000000",
-                "70000000000000000",
-                "80000000000000000",
-                "880000000000000000",
-                "890000000000000000",
-                "240000000000000000",
-                "340000000000000000",
-                "380000000000000000",
-                "590000000000000000",
-                "590000000000000000",
-                "640000000000000000",
-                "0",
-                "480000000000000000",
-                "910000000000000000",
-                "380000000000000000",
-                "50000000000000000",
-                "930000000000000000",
-                "160000000000000000",
-                "710000000000000000",
-                "670000000000000000",
-                "70000000000000000",
-                "40000000000000000",
-                "680000000000000000",
-                "660000000000000000",
-                "540000000000000000",
-                "730000000000000000",
-                "910000000000000000",
-                "350000000000000000",
-                "280000000000000000",
-                "60000000000000000",
-                "420000000000000000",
-                "510000000000000000",
-                "50000000000000000",
-                "380000000000000000",
-                "70000000000000000",
-                "850000000000000000",
-                "990000000000000000",
-                "170000000000000000",
-                "380000000000000000",
-                "130000000000000000",
-                "460000000000000000",
-                "290000000000000000",
-                "690000000000000000",
-                "940000000000000000",
-                "100000000000000000",
-                "620000000000000000",
-                "42000000000"
-            ]
-        },
-        {
-            "id": 24,
-            "property": "el",
-            "data": [
-                "770000000000000000",
-                "300000000000000000",
-                "960000000000000000",
-                "340000000000000000",
-                "900000000000000000",
-                "770000000000000000",
-                "530000000000000000",
-                "400000000000000000",
-                "800000000000000000",
-                "670000000000000000",
-                "0",
-                "360000000000000000",
-                "170000000000000000",
-                "160000000000000000",
-                "160000000000000000",
-                "570000000000000000",
-                "900000000000000000",
-                "710000000000000000",
-                "770000000000000000",
-                "880000000000000000",
-                "700000000000000000",
-                "830000000000000000",
-                "100000000000000000",
-                "580000000000000000",
-                "340000000000000000",
-                "220000000000000000",
-                "600000000000000000",
-                "220000000000000000",
-                "440000000000000000",
-                "330000000000000000",
-                "280000000000000000",
-                "470000000000000000",
-                "410000000000000000",
-                "360000000000000000",
-                "710000000000000000",
-                "610000000000000000",
-                "210000000000000000",
-                "20000000000000000",
-                "190000000000000000",
-                "160000000000000000",
-                "110000000000000000",
-                "490000000000000000",
-                "520000000000000000",
-                "680000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "890000000000000000",
-                "920000000000000000",
-                "1000000000000000000",
-                "100000000000"
-            ]
-        },
-        {
-            "id": 25,
-            "property": "el",
-            "data": [
-                "900000000000000000",
-                "440000000000000000",
-                "350000000000000000",
-                "120000000000000000",
-                "920000000000000000",
-                "450000000000000000",
-                "110000000000000000",
-                "460000000000000000",
-                "910000000000000000",
-                "170000000000000000",
-                "490000000000000000",
-                "770000000000000000",
-                "40000000000000000",
-                "220000000000000000",
-                "270000000000000000",
-                "270000000000000000",
-                "170000000000000000",
-                "10000000000000000",
-                "470000000000000000",
-                "500000000000000000",
-                "490000000000000000",
-                "110000000000000000",
-                "690000000000000000",
-                "420000000000000000",
-                "280000000000000000",
-                "630000000000000000",
-                "230000000000000000",
-                "290000000000000000",
-                "990000000000000000",
-                "820000000000000000",
-                "800000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "250000000000000000",
-                "170000000000000000",
-                "0",
-                "510000000000000000",
-                "250000000000000000",
-                "90000000000000000",
-                "820000000000000000",
-                "520000000000000000",
-                "840000000000000000",
-                "420000000000000000",
-                "490000000000000000",
-                "790000000000000000",
-                "260000000000000000",
-                "120000000000000000",
-                "40000000000000000",
-                "710000000000000000",
-                "80000000000"
-            ]
-        },
-        {
-            "id": 26,
-            "property": "el",
-            "data": [
-                "720000000000000000",
-                "410000000000000000",
-                "470000000000000000",
-                "350000000000000000",
-                "530000000000000000",
-                "270000000000000000",
-                "480000000000000000",
-                "460000000000000000",
-                "590000000000000000",
-                "380000000000000000",
-                "470000000000000000",
-                "510000000000000000",
-                "150000000000000000",
-                "220000000000000000",
-                "210000000000000000",
-                "520000000000000000",
-                "670000000000000000",
-                "560000000000000000",
-                "470000000000000000",
-                "720000000000000000",
-                "510000000000000000",
-                "280000000000000000",
-                "670000000000000000",
-                "470000000000000000",
-                "360000000000000000",
-                "460000000000000000",
-                "420000000000000000",
-                "640000000000000000",
-                "670000000000000000",
-                "680000000000000000",
-                "510000000000000000",
-                "380000000000000000",
-                "390000000000000000",
-                "350000000000000000",
-                "180000000000000000",
-                "210000000000000000",
-                "290000000000000000",
-                "180000000000000000",
-                "250000000000000000",
-                "400000000000000000",
-                "470000000000000000",
-                "570000000000000000",
-                "440000000000000000",
-                "460000000000000000",
-                "500000000000000000",
-                "320000000000000000",
-                "440000000000000000",
-                "370000000000000000",
-                "250000000000000000",
-                "20000000000"
-            ]
-        },
-        {
-            "id": 29,
-            "property": "el",
-            "data": [
-                "680000000000000000",
-                "400000000000000000",
-                "470000000000000000",
-                "440000000000000000",
-                "540000000000000000",
-                "320000000000000000",
-                "540000000000000000",
-                "560000000000000000",
-                "690000000000000000",
-                "400000000000000000",
-                "280000000000000000",
-                "510000000000000000",
-                "180000000000000000",
-                "300000000000000000",
-                "260000000000000000",
-                "470000000000000000",
-                "520000000000000000",
-                "490000000000000000",
-                "470000000000000000",
-                "700000000000000000",
-                "480000000000000000",
-                "350000000000000000",
-                "610000000000000000",
-                "340000000000000000",
-                "290000000000000000",
-                "440000000000000000",
-                "560000000000000000",
-                "500000000000000000",
-                "550000000000000000",
-                "610000000000000000",
-                "430000000000000000",
-                "350000000000000000",
-                "310000000000000000",
-                "230000000000000000",
-                "320000000000000000",
-                "320000000000000000",
-                "250000000000000000",
-                "410000000000000000",
-                "460000000000000000",
-                "310000000000000000",
-                "500000000000000000",
-                "380000000000000000",
-                "370000000000000000",
-                "410000000000000000",
-                "600000000000000000",
-                "570000000000000000",
-                "420000000000000000",
-                "420000000000000000",
-                "630000000000000000",
-                "43000000000"
-            ]
-        }
+      {
+        "id": 0,
+        "property": "cl",
+        "data": [
+          "0",
+          "100000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "900000000000000000",
+          "10000000000000",
+          "900000000000000000",
+          "800000000000000000",
+          "700000000000000000",
+          "600000000000000000",
+          "500000000000000000",
+          "400000000000000000",
+          "300000000000000000",
+          "200000000000000000",
+          "100000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "100000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "850000000000000000",
+          "900000000000000000",
+          "950000000000000000",
+          "970000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "990000000000000000",
+          "990000000000000000",
+          "9910000000000000",
+          "990000000000000000",
+          "9932345000000001",
+          "99324450000001",
+          "9932495000001",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 1,
+        "property": "cl",
+        "data": [
+          "870000000000000000",
+          "30000000000000000",
+          "720000000000000000",
+          "240000000000000000",
+          "370000000000000000",
+          "120000000000000000",
+          "510000000000000000",
+          "630000000000000000",
+          "950000000000000000",
+          "450000000000000000",
+          "90000000000000000",
+          "330000000000000000",
+          "320000000000000000",
+          "800000000000000000",
+          "960000000000000000",
+          "410000000000000000",
+          "20000000000000000",
+          "710000000000000000",
+          "40000000000000000",
+          "900000000000000000",
+          "360000000000000000",
+          "530000000000000000",
+          "160000000000000000",
+          "170000000000000000",
+          "50000000000000000",
+          "170000000000000000",
+          "210000000000000000",
+          "740000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "810000000000000000",
+          "670000000000000000",
+          "280000000000000000",
+          "70000000000000000",
+          "410000000000000000",
+          "50000000000000000",
+          "130000000000000000",
+          "740000000000000000",
+          "340000000000000000",
+          "470000000000000000",
+          "70000000000000000",
+          "970000000000000000",
+          "540000000000000000",
+          "620000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "950000000000000000",
+          "220000000000000000",
+          "380000000000000000",
+          "53000000000"
+        ]
+      },
+      {
+        "id": 2,
+        "property": "cl",
+        "data": [
+          "840000000000000000",
+          "600000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "82000000000"
+        ]
+      },
+      {
+        "id": 3,
+        "property": "cl",
+        "data": [
+          "840000000000000000",
+          "600000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "42000000000"
+        ]
+      },
+      {
+        "id": 4,
+        "property": "cl",
+        "data": [
+          "770000000000000000",
+          "300000000000000000",
+          "960000000000000000",
+          "340000000000000000",
+          "900000000000000000",
+          "770000000000000000",
+          "530000000000000000",
+          "400000000000000000",
+          "800000000000000000",
+          "670000000000000000",
+          "0",
+          "360000000000000000",
+          "170000000000000000",
+          "160000000000000000",
+          "160000000000000000",
+          "570000000000000000",
+          "900000000000000000",
+          "710000000000000000",
+          "770000000000000000",
+          "880000000000000000",
+          "700000000000000000",
+          "830000000000000000",
+          "100000000000000000",
+          "580000000000000000",
+          "340000000000000000",
+          "220000000000000000",
+          "600000000000000000",
+          "220000000000000000",
+          "440000000000000000",
+          "330000000000000000",
+          "280000000000000000",
+          "470000000000000000",
+          "410000000000000000",
+          "360000000000000000",
+          "710000000000000000",
+          "610000000000000000",
+          "210000000000000000",
+          "20000000000000000",
+          "190000000000000000",
+          "160000000000000000",
+          "110000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "680000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 5,
+        "property": "cl",
+        "data": [
+          "900000000000000000",
+          "440000000000000000",
+          "350000000000000000",
+          "120000000000000000",
+          "920000000000000000",
+          "450000000000000000",
+          "110000000000000000",
+          "460000000000000000",
+          "910000000000000000",
+          "170000000000000000",
+          "490000000000000000",
+          "770000000000000000",
+          "40000000000000000",
+          "220000000000000000",
+          "270000000000000000",
+          "270000000000000000",
+          "170000000000000000",
+          "10000000000000000",
+          "470000000000000000",
+          "500000000000000000",
+          "490000000000000000",
+          "110000000000000000",
+          "690000000000000000",
+          "420000000000000000",
+          "280000000000000000",
+          "630000000000000000",
+          "230000000000000000",
+          "290000000000000000",
+          "990000000000000000",
+          "820000000000000000",
+          "800000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "250000000000000000",
+          "170000000000000000",
+          "0",
+          "510000000000000000",
+          "250000000000000000",
+          "90000000000000000",
+          "820000000000000000",
+          "520000000000000000",
+          "840000000000000000",
+          "420000000000000000",
+          "490000000000000000",
+          "790000000000000000",
+          "260000000000000000",
+          "120000000000000000",
+          "40000000000000000",
+          "710000000000000000",
+          "80000000000"
+        ]
+      },
+      {
+        "id": 6,
+        "property": "cl",
+        "data": [
+          "720000000000000000",
+          "410000000000000000",
+          "470000000000000000",
+          "350000000000000000",
+          "530000000000000000",
+          "270000000000000000",
+          "480000000000000000",
+          "460000000000000000",
+          "590000000000000000",
+          "380000000000000000",
+          "470000000000000000",
+          "510000000000000000",
+          "150000000000000000",
+          "220000000000000000",
+          "210000000000000000",
+          "520000000000000000",
+          "670000000000000000",
+          "560000000000000000",
+          "470000000000000000",
+          "720000000000000000",
+          "510000000000000000",
+          "280000000000000000",
+          "670000000000000000",
+          "470000000000000000",
+          "360000000000000000",
+          "460000000000000000",
+          "420000000000000000",
+          "640000000000000000",
+          "670000000000000000",
+          "680000000000000000",
+          "510000000000000000",
+          "380000000000000000",
+          "390000000000000000",
+          "350000000000000000",
+          "180000000000000000",
+          "210000000000000000",
+          "290000000000000000",
+          "180000000000000000",
+          "250000000000000000",
+          "400000000000000000",
+          "470000000000000000",
+          "570000000000000000",
+          "440000000000000000",
+          "460000000000000000",
+          "500000000000000000",
+          "320000000000000000",
+          "440000000000000000",
+          "370000000000000000",
+          "250000000000000000",
+          "20000000000"
+        ]
+      },
+      {
+        "id": 9,
+        "property": "cl",
+        "data": [
+          "580000000000000000",
+          "410000000000000000",
+          "470000000000000000",
+          "440000000000000000",
+          "540000000000000000",
+          "320000000000000000",
+          "540000000000000000",
+          "560000000000000000",
+          "690000000000000000",
+          "400000000000000000",
+          "280000000000000000",
+          "510000000000000000",
+          "180000000000000000",
+          "300000000000000000",
+          "260000000000000000",
+          "470000000000000000",
+          "520000000000000000",
+          "490000000000000000",
+          "470000000000000000",
+          "700000000000000000",
+          "480000000000000000",
+          "350000000000000000",
+          "610000000000000000",
+          "340000000000000000",
+          "290000000000000000",
+          "440000000000000000",
+          "560000000000000000",
+          "500000000000000000",
+          "550000000000000000",
+          "610000000000000000",
+          "430000000000000000",
+          "350000000000000000",
+          "310000000000000000",
+          "230000000000000000",
+          "320000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "410000000000000000",
+          "460000000000000000",
+          "310000000000000000",
+          "500000000000000000",
+          "380000000000000000",
+          "370000000000000000",
+          "410000000000000000",
+          "600000000000000000",
+          "570000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "630000000000000000",
+          "43000000000"
+        ]
+      },
+      {
+        "id": 10,
+        "property": "cl",
+        "data": [
+          "0",
+          "110000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "900000000000000000",
+          "1000000000000000000",
+          "900000000000000000",
+          "800000000000000000",
+          "700000000000000000",
+          "600000000000000000",
+          "500000000000000000",
+          "400000000000000000",
+          "300000000000000000",
+          "200000000000000000",
+          "100000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "100000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "850000000000000000",
+          "900000000000000000",
+          "950000000000000000",
+          "970000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "990000000000000000",
+          "990000000000000000",
+          "9910000000000000000",
+          "990000000000000000",
+          "9932345000000001",
+          "99324450000001",
+          "9932495000001",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 11,
+        "property": "cl",
+        "data": [
+          "840000000000000000",
+          "130000000000000000",
+          "720000000000000000",
+          "240000000000000000",
+          "370000000000000000",
+          "120000000000000000",
+          "510000000000000000",
+          "630000000000000000",
+          "950000000000000000",
+          "450000000000000000",
+          "90000000000000000",
+          "330000000000000000",
+          "320000000000000000",
+          "800000000000000000",
+          "960000000000000000",
+          "410000000000000000",
+          "20000000000000000",
+          "710000000000000000",
+          "40000000000000000",
+          "900000000000000000",
+          "360000000000000000",
+          "530000000000000000",
+          "160000000000000000",
+          "170000000000000000",
+          "50000000000000000",
+          "170000000000000000",
+          "210000000000000000",
+          "740000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "810000000000000000",
+          "670000000000000000",
+          "280000000000000000",
+          "70000000000000000",
+          "410000000000000000",
+          "50000000000000000",
+          "130000000000000000",
+          "740000000000000000",
+          "340000000000000000",
+          "470000000000000000",
+          "70000000000000000",
+          "970000000000000000",
+          "540000000000000000",
+          "620000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "950000000000000000",
+          "220000000000000000",
+          "380000000000000000",
+          "53000000000"
+        ]
+      },
+      {
+        "id": 12,
+        "property": "cl",
+        "data": [
+          "840000000000000000",
+          "60000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "82000000000"
+        ]
+      },
+      {
+        "id": 13,
+        "property": "cl",
+        "data": [
+          "840000000000000000",
+          "600000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "42000000000"
+        ]
+      },
+      {
+        "id": 14,
+        "property": "cl",
+        "data": [
+          "770000000000000000",
+          "300000000000000000",
+          "960000000000000000",
+          "340000000000000000",
+          "900000000000000000",
+          "770000000000000000",
+          "530000000000000000",
+          "400000000000000000",
+          "800000000000000000",
+          "670000000000000000",
+          "0",
+          "360000000000000000",
+          "170000000000000000",
+          "160000000000000000",
+          "160000000000000000",
+          "570000000000000000",
+          "900000000000000000",
+          "710000000000000000",
+          "770000000000000000",
+          "880000000000000000",
+          "700000000000000000",
+          "830000000000000000",
+          "100000000000000000",
+          "580000000000000000",
+          "340000000000000000",
+          "220000000000000000",
+          "600000000000000000",
+          "220000000000000000",
+          "440000000000000000",
+          "330000000000000000",
+          "280000000000000000",
+          "470000000000000000",
+          "410000000000000000",
+          "360000000000000000",
+          "710000000000000000",
+          "610000000000000000",
+          "210000000000000000",
+          "20000000000000000",
+          "190000000000000000",
+          "160000000000000000",
+          "110000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "680000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 15,
+        "property": "cl",
+        "data": [
+          "900000000000000000",
+          "440000000000000000",
+          "350000000000000000",
+          "120000000000000000",
+          "920000000000000000",
+          "450000000000000000",
+          "110000000000000000",
+          "460000000000000000",
+          "910000000000000000",
+          "170000000000000000",
+          "490000000000000000",
+          "770000000000000000",
+          "40000000000000000",
+          "220000000000000000",
+          "270000000000000000",
+          "270000000000000000",
+          "170000000000000000",
+          "10000000000000000",
+          "470000000000000000",
+          "500000000000000000",
+          "490000000000000000",
+          "110000000000000000",
+          "690000000000000000",
+          "420000000000000000",
+          "280000000000000000",
+          "630000000000000000",
+          "230000000000000000",
+          "290000000000000000",
+          "990000000000000000",
+          "820000000000000000",
+          "800000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "250000000000000000",
+          "170000000000000000",
+          "0",
+          "510000000000000000",
+          "250000000000000000",
+          "90000000000000000",
+          "820000000000000000",
+          "520000000000000000",
+          "840000000000000000",
+          "420000000000000000",
+          "490000000000000000",
+          "790000000000000000",
+          "260000000000000000",
+          "120000000000000000",
+          "40000000000000000",
+          "710000000000000000",
+          "80000000000"
+        ]
+      },
+      {
+        "id": 16,
+        "property": "cl",
+        "data": [
+          "720000000000000000",
+          "410000000000000000",
+          "470000000000000000",
+          "350000000000000000",
+          "530000000000000000",
+          "270000000000000000",
+          "480000000000000000",
+          "460000000000000000",
+          "590000000000000000",
+          "380000000000000000",
+          "470000000000000000",
+          "510000000000000000",
+          "150000000000000000",
+          "220000000000000000",
+          "210000000000000000",
+          "520000000000000000",
+          "670000000000000000",
+          "560000000000000000",
+          "470000000000000000",
+          "720000000000000000",
+          "510000000000000000",
+          "280000000000000000",
+          "670000000000000000",
+          "470000000000000000",
+          "360000000000000000",
+          "460000000000000000",
+          "420000000000000000",
+          "640000000000000000",
+          "670000000000000000",
+          "680000000000000000",
+          "510000000000000000",
+          "380000000000000000",
+          "390000000000000000",
+          "350000000000000000",
+          "180000000000000000",
+          "210000000000000000",
+          "290000000000000000",
+          "180000000000000000",
+          "250000000000000000",
+          "400000000000000000",
+          "470000000000000000",
+          "570000000000000000",
+          "440000000000000000",
+          "460000000000000000",
+          "500000000000000000",
+          "320000000000000000",
+          "440000000000000000",
+          "370000000000000000",
+          "250000000000000000",
+          "20000000000"
+        ]
+      },
+      {
+        "id": 19,
+        "property": "cl",
+        "data": [
+          "680000000000000000",
+          "400000000000000000",
+          "470000000000000000",
+          "440000000000000000",
+          "540000000000000000",
+          "320000000000000000",
+          "540000000000000000",
+          "560000000000000000",
+          "690000000000000000",
+          "400000000000000000",
+          "280000000000000000",
+          "510000000000000000",
+          "180000000000000000",
+          "300000000000000000",
+          "260000000000000000",
+          "470000000000000000",
+          "520000000000000000",
+          "490000000000000000",
+          "470000000000000000",
+          "700000000000000000",
+          "480000000000000000",
+          "350000000000000000",
+          "610000000000000000",
+          "340000000000000000",
+          "290000000000000000",
+          "440000000000000000",
+          "560000000000000000",
+          "500000000000000000",
+          "550000000000000000",
+          "610000000000000000",
+          "430000000000000000",
+          "350000000000000000",
+          "310000000000000000",
+          "230000000000000000",
+          "320000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "410000000000000000",
+          "460000000000000000",
+          "310000000000000000",
+          "500000000000000000",
+          "380000000000000000",
+          "370000000000000000",
+          "410000000000000000",
+          "600000000000000000",
+          "570000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "630000000000000000",
+          "43000000000"
+        ]
+      },
+      {
+        "id": 20,
+        "property": "cl",
+        "data": [
+          "0",
+          "100000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "900000000000000000",
+          "1000000000000000000",
+          "900000000000000000",
+          "800000000000000000",
+          "700000000000000000",
+          "600000000000000000",
+          "500000000000000000",
+          "400000000000000000",
+          "300000000000000000",
+          "200000000000000000",
+          "100000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "100000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "850000000000000000",
+          "900000000000000000",
+          "950000000000000000",
+          "970000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "990000000000000000",
+          "990000000000000000",
+          "9910000000000000000",
+          "990000000000000000",
+          "9932345000000001",
+          "99324450000001",
+          "9932495000001",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 21,
+        "property": "cl",
+        "data": [
+          "870000000000000000",
+          "30000000000000000",
+          "720000000000000000",
+          "240000000000000000",
+          "370000000000000000",
+          "120000000000000000",
+          "510000000000000000",
+          "630000000000000000",
+          "950000000000000000",
+          "450000000000000000",
+          "90000000000000000",
+          "330000000000000000",
+          "320000000000000000",
+          "800000000000000000",
+          "960000000000000000",
+          "410000000000000000",
+          "20000000000000000",
+          "710000000000000000",
+          "40000000000000000",
+          "900000000000000000",
+          "360000000000000000",
+          "530000000000000000",
+          "160000000000000000",
+          "170000000000000000",
+          "50000000000000000",
+          "170000000000000000",
+          "210000000000000000",
+          "740000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "810000000000000000",
+          "670000000000000000",
+          "280000000000000000",
+          "70000000000000000",
+          "410000000000000000",
+          "50000000000000000",
+          "130000000000000000",
+          "740000000000000000",
+          "340000000000000000",
+          "470000000000000000",
+          "70000000000000000",
+          "970000000000000000",
+          "540000000000000000",
+          "620000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "950000000000000000",
+          "220000000000000000",
+          "380000000000000000",
+          "53000000000"
+        ]
+      },
+      {
+        "id": 22,
+        "property": "cl",
+        "data": [
+          "840000000000000000",
+          "600000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "82000000000"
+        ]
+      },
+      {
+        "id": 23,
+        "property": "cl",
+        "data": [
+          "840000000000000000",
+          "600000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "42000000000"
+        ]
+      },
+      {
+        "id": 24,
+        "property": "cl",
+        "data": [
+          "770000000000000000",
+          "300000000000000000",
+          "960000000000000000",
+          "340000000000000000",
+          "900000000000000000",
+          "770000000000000000",
+          "530000000000000000",
+          "400000000000000000",
+          "800000000000000000",
+          "670000000000000000",
+          "0",
+          "360000000000000000",
+          "170000000000000000",
+          "160000000000000000",
+          "160000000000000000",
+          "570000000000000000",
+          "900000000000000000",
+          "710000000000000000",
+          "770000000000000000",
+          "880000000000000000",
+          "700000000000000000",
+          "830000000000000000",
+          "100000000000000000",
+          "580000000000000000",
+          "340000000000000000",
+          "220000000000000000",
+          "600000000000000000",
+          "220000000000000000",
+          "440000000000000000",
+          "330000000000000000",
+          "280000000000000000",
+          "470000000000000000",
+          "410000000000000000",
+          "360000000000000000",
+          "710000000000000000",
+          "610000000000000000",
+          "210000000000000000",
+          "20000000000000000",
+          "190000000000000000",
+          "160000000000000000",
+          "110000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "680000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 25,
+        "property": "cl",
+        "data": [
+          "900000000000000000",
+          "440000000000000000",
+          "350000000000000000",
+          "120000000000000000",
+          "920000000000000000",
+          "450000000000000000",
+          "110000000000000000",
+          "460000000000000000",
+          "910000000000000000",
+          "170000000000000000",
+          "490000000000000000",
+          "770000000000000000",
+          "40000000000000000",
+          "220000000000000000",
+          "270000000000000000",
+          "270000000000000000",
+          "170000000000000000",
+          "10000000000000000",
+          "470000000000000000",
+          "500000000000000000",
+          "490000000000000000",
+          "110000000000000000",
+          "690000000000000000",
+          "420000000000000000",
+          "280000000000000000",
+          "630000000000000000",
+          "230000000000000000",
+          "290000000000000000",
+          "990000000000000000",
+          "820000000000000000",
+          "800000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "250000000000000000",
+          "170000000000000000",
+          "0",
+          "510000000000000000",
+          "250000000000000000",
+          "90000000000000000",
+          "820000000000000000",
+          "520000000000000000",
+          "840000000000000000",
+          "420000000000000000",
+          "490000000000000000",
+          "790000000000000000",
+          "260000000000000000",
+          "120000000000000000",
+          "40000000000000000",
+          "710000000000000000",
+          "80000000000"
+        ]
+      },
+      {
+        "id": 26,
+        "property": "cl",
+        "data": [
+          "720000000000000000",
+          "410000000000000000",
+          "470000000000000000",
+          "350000000000000000",
+          "530000000000000000",
+          "270000000000000000",
+          "480000000000000000",
+          "460000000000000000",
+          "590000000000000000",
+          "380000000000000000",
+          "470000000000000000",
+          "510000000000000000",
+          "150000000000000000",
+          "220000000000000000",
+          "210000000000000000",
+          "520000000000000000",
+          "670000000000000000",
+          "560000000000000000",
+          "470000000000000000",
+          "720000000000000000",
+          "510000000000000000",
+          "280000000000000000",
+          "670000000000000000",
+          "470000000000000000",
+          "360000000000000000",
+          "460000000000000000",
+          "420000000000000000",
+          "640000000000000000",
+          "670000000000000000",
+          "680000000000000000",
+          "510000000000000000",
+          "380000000000000000",
+          "390000000000000000",
+          "350000000000000000",
+          "180000000000000000",
+          "210000000000000000",
+          "290000000000000000",
+          "180000000000000000",
+          "250000000000000000",
+          "400000000000000000",
+          "470000000000000000",
+          "570000000000000000",
+          "440000000000000000",
+          "460000000000000000",
+          "500000000000000000",
+          "320000000000000000",
+          "440000000000000000",
+          "370000000000000000",
+          "250000000000000000",
+          "20000000000"
+        ]
+      },
+      {
+        "id": 29,
+        "property": "cl",
+        "data": [
+          "680000000000000000",
+          "400000000000000000",
+          "470000000000000000",
+          "440000000000000000",
+          "540000000000000000",
+          "320000000000000000",
+          "540000000000000000",
+          "560000000000000000",
+          "690000000000000000",
+          "400000000000000000",
+          "280000000000000000",
+          "510000000000000000",
+          "180000000000000000",
+          "300000000000000000",
+          "260000000000000000",
+          "470000000000000000",
+          "520000000000000000",
+          "490000000000000000",
+          "470000000000000000",
+          "700000000000000000",
+          "480000000000000000",
+          "350000000000000000",
+          "610000000000000000",
+          "340000000000000000",
+          "290000000000000000",
+          "440000000000000000",
+          "560000000000000000",
+          "500000000000000000",
+          "550000000000000000",
+          "610000000000000000",
+          "430000000000000000",
+          "350000000000000000",
+          "310000000000000000",
+          "230000000000000000",
+          "320000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "410000000000000000",
+          "460000000000000000",
+          "310000000000000000",
+          "500000000000000000",
+          "380000000000000000",
+          "370000000000000000",
+          "410000000000000000",
+          "600000000000000000",
+          "570000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "630000000000000000",
+          "43000000000"
+        ]
+      },
+      {
+        "id": 0,
+        "property": "el",
+        "data": [
+          "0",
+          "100000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "900000000000000000",
+          "1000000000000000000",
+          "900000000000000000",
+          "800000000000000000",
+          "700000000000000000",
+          "600000000000000000",
+          "500000000000000000",
+          "400000000000000000",
+          "300000000000000000",
+          "200000000000000000",
+          "100000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "100000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "850000000000000000",
+          "900000000000000000",
+          "950000000000000000",
+          "970000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "990000000000000000",
+          "990000000000000000",
+          "9910000000000000000",
+          "990000000000000000",
+          "9932345000000001",
+          "99324450000001",
+          "9932495000001",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 1,
+        "property": "el",
+        "data": [
+          "870000000000000000",
+          "30000000000000000",
+          "720000000000000000",
+          "240000000000000000",
+          "370000000000000000",
+          "120000000000000000",
+          "510000000000000000",
+          "630000000000000000",
+          "950000000000000000",
+          "450000000000000000",
+          "90000000000000000",
+          "330000000000000000",
+          "320000000000000000",
+          "800000000000000000",
+          "960000000000000000",
+          "410000000000000000",
+          "20000000000000000",
+          "710000000000000000",
+          "40000000000000000",
+          "900000000000000000",
+          "360000000000000000",
+          "530000000000000000",
+          "160000000000000000",
+          "170000000000000000",
+          "50000000000000000",
+          "170000000000000000",
+          "210000000000000000",
+          "740000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "810000000000000000",
+          "670000000000000000",
+          "280000000000000000",
+          "70000000000000000",
+          "410000000000000000",
+          "50000000000000000",
+          "130000000000000000",
+          "740000000000000000",
+          "340000000000000000",
+          "470000000000000000",
+          "70000000000000000",
+          "970000000000000000",
+          "540000000000000000",
+          "620000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "950000000000000000",
+          "220000000000000000",
+          "380000000000000000",
+          "53000000000"
+        ]
+      },
+      {
+        "id": 2,
+        "property": "el",
+        "data": [
+          "840000000000000000",
+          "600000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "82000000000"
+        ]
+      },
+      {
+        "id": 3,
+        "property": "el",
+        "data": [
+          "840000000000000000",
+          "600000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "42000000000"
+        ]
+      },
+      {
+        "id": 4,
+        "property": "el",
+        "data": [
+          "770000000000000000",
+          "300000000000000000",
+          "960000000000000000",
+          "340000000000000000",
+          "900000000000000000",
+          "770000000000000000",
+          "530000000000000000",
+          "400000000000000000",
+          "800000000000000000",
+          "670000000000000000",
+          "0",
+          "360000000000000000",
+          "170000000000000000",
+          "160000000000000000",
+          "160000000000000000",
+          "570000000000000000",
+          "900000000000000000",
+          "710000000000000000",
+          "770000000000000000",
+          "880000000000000000",
+          "700000000000000000",
+          "830000000000000000",
+          "100000000000000000",
+          "580000000000000000",
+          "340000000000000000",
+          "220000000000000000",
+          "600000000000000000",
+          "220000000000000000",
+          "440000000000000000",
+          "330000000000000000",
+          "280000000000000000",
+          "470000000000000000",
+          "410000000000000000",
+          "360000000000000000",
+          "710000000000000000",
+          "610000000000000000",
+          "210000000000000000",
+          "20000000000000000",
+          "190000000000000000",
+          "160000000000000000",
+          "110000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "680000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 5,
+        "property": "el",
+        "data": [
+          "900000000000000000",
+          "440000000000000000",
+          "350000000000000000",
+          "120000000000000000",
+          "920000000000000000",
+          "450000000000000000",
+          "110000000000000000",
+          "460000000000000000",
+          "910000000000000000",
+          "170000000000000000",
+          "490000000000000000",
+          "770000000000000000",
+          "40000000000000000",
+          "220000000000000000",
+          "270000000000000000",
+          "270000000000000000",
+          "170000000000000000",
+          "10000000000000000",
+          "470000000000000000",
+          "500000000000000000",
+          "490000000000000000",
+          "110000000000000000",
+          "690000000000000000",
+          "420000000000000000",
+          "280000000000000000",
+          "630000000000000000",
+          "230000000000000000",
+          "290000000000000000",
+          "990000000000000000",
+          "820000000000000000",
+          "800000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "250000000000000000",
+          "170000000000000000",
+          "0",
+          "510000000000000000",
+          "250000000000000000",
+          "90000000000000000",
+          "820000000000000000",
+          "520000000000000000",
+          "840000000000000000",
+          "420000000000000000",
+          "490000000000000000",
+          "790000000000000000",
+          "260000000000000000",
+          "120000000000000000",
+          "40000000000000000",
+          "710000000000000000",
+          "80000000000"
+        ]
+      },
+      {
+        "id": 6,
+        "property": "el",
+        "data": [
+          "720000000000000000",
+          "410000000000000000",
+          "470000000000000000",
+          "350000000000000000",
+          "530000000000000000",
+          "270000000000000000",
+          "480000000000000000",
+          "460000000000000000",
+          "590000000000000000",
+          "380000000000000000",
+          "470000000000000000",
+          "510000000000000000",
+          "150000000000000000",
+          "220000000000000000",
+          "210000000000000000",
+          "520000000000000000",
+          "670000000000000000",
+          "560000000000000000",
+          "470000000000000000",
+          "720000000000000000",
+          "510000000000000000",
+          "280000000000000000",
+          "670000000000000000",
+          "470000000000000000",
+          "360000000000000000",
+          "460000000000000000",
+          "420000000000000000",
+          "640000000000000000",
+          "670000000000000000",
+          "680000000000000000",
+          "510000000000000000",
+          "380000000000000000",
+          "390000000000000000",
+          "350000000000000000",
+          "180000000000000000",
+          "210000000000000000",
+          "290000000000000000",
+          "180000000000000000",
+          "250000000000000000",
+          "400000000000000000",
+          "470000000000000000",
+          "570000000000000000",
+          "440000000000000000",
+          "460000000000000000",
+          "500000000000000000",
+          "320000000000000000",
+          "440000000000000000",
+          "370000000000000000",
+          "250000000000000000",
+          "20000000000"
+        ]
+      },
+      {
+        "id": 9,
+        "property": "el",
+        "data": [
+          "580000000000000000",
+          "410000000000000000",
+          "470000000000000000",
+          "440000000000000000",
+          "540000000000000000",
+          "320000000000000000",
+          "540000000000000000",
+          "560000000000000000",
+          "690000000000000000",
+          "400000000000000000",
+          "280000000000000000",
+          "510000000000000000",
+          "180000000000000000",
+          "300000000000000000",
+          "260000000000000000",
+          "470000000000000000",
+          "520000000000000000",
+          "490000000000000000",
+          "470000000000000000",
+          "700000000000000000",
+          "480000000000000000",
+          "350000000000000000",
+          "610000000000000000",
+          "340000000000000000",
+          "290000000000000000",
+          "440000000000000000",
+          "560000000000000000",
+          "500000000000000000",
+          "550000000000000000",
+          "610000000000000000",
+          "430000000000000000",
+          "350000000000000000",
+          "310000000000000000",
+          "230000000000000000",
+          "320000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "410000000000000000",
+          "460000000000000000",
+          "310000000000000000",
+          "500000000000000000",
+          "380000000000000000",
+          "370000000000000000",
+          "410000000000000000",
+          "600000000000000000",
+          "570000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "630000000000000000",
+          "43000000000"
+        ]
+      },
+      {
+        "id": 10,
+        "property": "el",
+        "data": [
+          "0",
+          "110000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "900000000000000000",
+          "1000000000000000000",
+          "900000000000000000",
+          "800000000000000000",
+          "700000000000000000",
+          "600000000000000000",
+          "500000000000000000",
+          "400000000000000000",
+          "300000000000000000",
+          "200000000000000000",
+          "100000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "100000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "850000000000000000",
+          "900000000000000000",
+          "950000000000000000",
+          "970000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "990000000000000000",
+          "990000000000000000",
+          "9910000000000000000",
+          "990000000000000000",
+          "9932345000000001",
+          "99324450000001",
+          "9932495000001",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 11,
+        "property": "el",
+        "data": [
+          "840000000000000000",
+          "130000000000000000",
+          "720000000000000000",
+          "240000000000000000",
+          "370000000000000000",
+          "120000000000000000",
+          "510000000000000000",
+          "630000000000000000",
+          "950000000000000000",
+          "450000000000000000",
+          "90000000000000000",
+          "330000000000000000",
+          "320000000000000000",
+          "800000000000000000",
+          "960000000000000000",
+          "410000000000000000",
+          "20000000000000000",
+          "710000000000000000",
+          "40000000000000000",
+          "900000000000000000",
+          "360000000000000000",
+          "530000000000000000",
+          "160000000000000000",
+          "170000000000000000",
+          "50000000000000000",
+          "170000000000000000",
+          "210000000000000000",
+          "740000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "810000000000000000",
+          "670000000000000000",
+          "280000000000000000",
+          "70000000000000000",
+          "410000000000000000",
+          "50000000000000000",
+          "130000000000000000",
+          "740000000000000000",
+          "340000000000000000",
+          "470000000000000000",
+          "70000000000000000",
+          "970000000000000000",
+          "540000000000000000",
+          "620000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "950000000000000000",
+          "220000000000000000",
+          "380000000000000000",
+          "53000000000"
+        ]
+      },
+      {
+        "id": 12,
+        "property": "el",
+        "data": [
+          "840000000000000000",
+          "60000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "82000000000"
+        ]
+      },
+      {
+        "id": 13,
+        "property": "el",
+        "data": [
+          "840000000000000000",
+          "600000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "42000000000"
+        ]
+      },
+      {
+        "id": 14,
+        "property": "el",
+        "data": [
+          "770000000000000000",
+          "300000000000000000",
+          "960000000000000000",
+          "340000000000000000",
+          "900000000000000000",
+          "770000000000000000",
+          "530000000000000000",
+          "400000000000000000",
+          "800000000000000000",
+          "670000000000000000",
+          "0",
+          "360000000000000000",
+          "170000000000000000",
+          "160000000000000000",
+          "160000000000000000",
+          "570000000000000000",
+          "900000000000000000",
+          "710000000000000000",
+          "770000000000000000",
+          "880000000000000000",
+          "700000000000000000",
+          "830000000000000000",
+          "100000000000000000",
+          "580000000000000000",
+          "340000000000000000",
+          "220000000000000000",
+          "600000000000000000",
+          "220000000000000000",
+          "440000000000000000",
+          "330000000000000000",
+          "280000000000000000",
+          "470000000000000000",
+          "410000000000000000",
+          "360000000000000000",
+          "710000000000000000",
+          "610000000000000000",
+          "210000000000000000",
+          "20000000000000000",
+          "190000000000000000",
+          "160000000000000000",
+          "110000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "680000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 15,
+        "property": "el",
+        "data": [
+          "900000000000000000",
+          "440000000000000000",
+          "350000000000000000",
+          "120000000000000000",
+          "920000000000000000",
+          "450000000000000000",
+          "110000000000000000",
+          "460000000000000000",
+          "910000000000000000",
+          "170000000000000000",
+          "490000000000000000",
+          "770000000000000000",
+          "40000000000000000",
+          "220000000000000000",
+          "270000000000000000",
+          "270000000000000000",
+          "170000000000000000",
+          "10000000000000000",
+          "470000000000000000",
+          "500000000000000000",
+          "490000000000000000",
+          "110000000000000000",
+          "690000000000000000",
+          "420000000000000000",
+          "280000000000000000",
+          "630000000000000000",
+          "230000000000000000",
+          "290000000000000000",
+          "990000000000000000",
+          "820000000000000000",
+          "800000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "250000000000000000",
+          "170000000000000000",
+          "0",
+          "510000000000000000",
+          "250000000000000000",
+          "90000000000000000",
+          "820000000000000000",
+          "520000000000000000",
+          "840000000000000000",
+          "420000000000000000",
+          "490000000000000000",
+          "790000000000000000",
+          "260000000000000000",
+          "120000000000000000",
+          "40000000000000000",
+          "710000000000000000",
+          "80000000000"
+        ]
+      },
+      {
+        "id": 16,
+        "property": "el",
+        "data": [
+          "720000000000000000",
+          "410000000000000000",
+          "470000000000000000",
+          "350000000000000000",
+          "530000000000000000",
+          "270000000000000000",
+          "480000000000000000",
+          "460000000000000000",
+          "590000000000000000",
+          "380000000000000000",
+          "470000000000000000",
+          "510000000000000000",
+          "150000000000000000",
+          "220000000000000000",
+          "210000000000000000",
+          "520000000000000000",
+          "670000000000000000",
+          "560000000000000000",
+          "470000000000000000",
+          "720000000000000000",
+          "510000000000000000",
+          "280000000000000000",
+          "670000000000000000",
+          "470000000000000000",
+          "360000000000000000",
+          "460000000000000000",
+          "420000000000000000",
+          "640000000000000000",
+          "670000000000000000",
+          "680000000000000000",
+          "510000000000000000",
+          "380000000000000000",
+          "390000000000000000",
+          "350000000000000000",
+          "180000000000000000",
+          "210000000000000000",
+          "290000000000000000",
+          "180000000000000000",
+          "250000000000000000",
+          "400000000000000000",
+          "470000000000000000",
+          "570000000000000000",
+          "440000000000000000",
+          "460000000000000000",
+          "500000000000000000",
+          "320000000000000000",
+          "440000000000000000",
+          "370000000000000000",
+          "250000000000000000",
+          "20000000000"
+        ]
+      },
+      {
+        "id": 19,
+        "property": "el",
+        "data": [
+          "680000000000000000",
+          "400000000000000000",
+          "470000000000000000",
+          "440000000000000000",
+          "540000000000000000",
+          "320000000000000000",
+          "540000000000000000",
+          "560000000000000000",
+          "690000000000000000",
+          "400000000000000000",
+          "280000000000000000",
+          "510000000000000000",
+          "180000000000000000",
+          "300000000000000000",
+          "260000000000000000",
+          "470000000000000000",
+          "520000000000000000",
+          "490000000000000000",
+          "470000000000000000",
+          "700000000000000000",
+          "480000000000000000",
+          "350000000000000000",
+          "610000000000000000",
+          "340000000000000000",
+          "290000000000000000",
+          "440000000000000000",
+          "560000000000000000",
+          "500000000000000000",
+          "550000000000000000",
+          "610000000000000000",
+          "430000000000000000",
+          "350000000000000000",
+          "310000000000000000",
+          "230000000000000000",
+          "320000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "410000000000000000",
+          "460000000000000000",
+          "310000000000000000",
+          "500000000000000000",
+          "380000000000000000",
+          "370000000000000000",
+          "410000000000000000",
+          "600000000000000000",
+          "570000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "630000000000000000",
+          "43000000000"
+        ]
+      },
+      {
+        "id": 20,
+        "property": "el",
+        "data": [
+          "0",
+          "100000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "900000000000000000",
+          "1000000000000000000",
+          "900000000000000000",
+          "800000000000000000",
+          "700000000000000000",
+          "600000000000000000",
+          "500000000000000000",
+          "400000000000000000",
+          "300000000000000000",
+          "200000000000000000",
+          "100000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "50000000000000000",
+          "0",
+          "100000000000000000",
+          "200000000000000000",
+          "300000000000000000",
+          "400000000000000000",
+          "500000000000000000",
+          "600000000000000000",
+          "700000000000000000",
+          "800000000000000000",
+          "850000000000000000",
+          "900000000000000000",
+          "950000000000000000",
+          "970000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "980000000000000000",
+          "990000000000000000",
+          "990000000000000000",
+          "9910000000000000000",
+          "990000000000000000",
+          "9932345000000001",
+          "99324450000001",
+          "9932495000001",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 21,
+        "property": "el",
+        "data": [
+          "870000000000000000",
+          "30000000000000000",
+          "720000000000000000",
+          "240000000000000000",
+          "370000000000000000",
+          "120000000000000000",
+          "510000000000000000",
+          "630000000000000000",
+          "950000000000000000",
+          "450000000000000000",
+          "90000000000000000",
+          "330000000000000000",
+          "320000000000000000",
+          "800000000000000000",
+          "960000000000000000",
+          "410000000000000000",
+          "20000000000000000",
+          "710000000000000000",
+          "40000000000000000",
+          "900000000000000000",
+          "360000000000000000",
+          "530000000000000000",
+          "160000000000000000",
+          "170000000000000000",
+          "50000000000000000",
+          "170000000000000000",
+          "210000000000000000",
+          "740000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "810000000000000000",
+          "670000000000000000",
+          "280000000000000000",
+          "70000000000000000",
+          "410000000000000000",
+          "50000000000000000",
+          "130000000000000000",
+          "740000000000000000",
+          "340000000000000000",
+          "470000000000000000",
+          "70000000000000000",
+          "970000000000000000",
+          "540000000000000000",
+          "620000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "950000000000000000",
+          "220000000000000000",
+          "380000000000000000",
+          "53000000000"
+        ]
+      },
+      {
+        "id": 22,
+        "property": "el",
+        "data": [
+          "840000000000000000",
+          "600000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "82000000000"
+        ]
+      },
+      {
+        "id": 23,
+        "property": "el",
+        "data": [
+          "840000000000000000",
+          "600000000000000000",
+          "160000000000000000",
+          "940000000000000000",
+          "70000000000000000",
+          "80000000000000000",
+          "880000000000000000",
+          "890000000000000000",
+          "240000000000000000",
+          "340000000000000000",
+          "380000000000000000",
+          "590000000000000000",
+          "590000000000000000",
+          "640000000000000000",
+          "0",
+          "480000000000000000",
+          "910000000000000000",
+          "380000000000000000",
+          "50000000000000000",
+          "930000000000000000",
+          "160000000000000000",
+          "710000000000000000",
+          "670000000000000000",
+          "70000000000000000",
+          "40000000000000000",
+          "680000000000000000",
+          "660000000000000000",
+          "540000000000000000",
+          "730000000000000000",
+          "910000000000000000",
+          "350000000000000000",
+          "280000000000000000",
+          "60000000000000000",
+          "420000000000000000",
+          "510000000000000000",
+          "50000000000000000",
+          "380000000000000000",
+          "70000000000000000",
+          "850000000000000000",
+          "990000000000000000",
+          "170000000000000000",
+          "380000000000000000",
+          "130000000000000000",
+          "460000000000000000",
+          "290000000000000000",
+          "690000000000000000",
+          "940000000000000000",
+          "100000000000000000",
+          "620000000000000000",
+          "42000000000"
+        ]
+      },
+      {
+        "id": 24,
+        "property": "el",
+        "data": [
+          "770000000000000000",
+          "300000000000000000",
+          "960000000000000000",
+          "340000000000000000",
+          "900000000000000000",
+          "770000000000000000",
+          "530000000000000000",
+          "400000000000000000",
+          "800000000000000000",
+          "670000000000000000",
+          "0",
+          "360000000000000000",
+          "170000000000000000",
+          "160000000000000000",
+          "160000000000000000",
+          "570000000000000000",
+          "900000000000000000",
+          "710000000000000000",
+          "770000000000000000",
+          "880000000000000000",
+          "700000000000000000",
+          "830000000000000000",
+          "100000000000000000",
+          "580000000000000000",
+          "340000000000000000",
+          "220000000000000000",
+          "600000000000000000",
+          "220000000000000000",
+          "440000000000000000",
+          "330000000000000000",
+          "280000000000000000",
+          "470000000000000000",
+          "410000000000000000",
+          "360000000000000000",
+          "710000000000000000",
+          "610000000000000000",
+          "210000000000000000",
+          "20000000000000000",
+          "190000000000000000",
+          "160000000000000000",
+          "110000000000000000",
+          "490000000000000000",
+          "520000000000000000",
+          "680000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "890000000000000000",
+          "920000000000000000",
+          "1000000000000000000",
+          "100000000000"
+        ]
+      },
+      {
+        "id": 25,
+        "property": "el",
+        "data": [
+          "900000000000000000",
+          "440000000000000000",
+          "350000000000000000",
+          "120000000000000000",
+          "920000000000000000",
+          "450000000000000000",
+          "110000000000000000",
+          "460000000000000000",
+          "910000000000000000",
+          "170000000000000000",
+          "490000000000000000",
+          "770000000000000000",
+          "40000000000000000",
+          "220000000000000000",
+          "270000000000000000",
+          "270000000000000000",
+          "170000000000000000",
+          "10000000000000000",
+          "470000000000000000",
+          "500000000000000000",
+          "490000000000000000",
+          "110000000000000000",
+          "690000000000000000",
+          "420000000000000000",
+          "280000000000000000",
+          "630000000000000000",
+          "230000000000000000",
+          "290000000000000000",
+          "990000000000000000",
+          "820000000000000000",
+          "800000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "250000000000000000",
+          "170000000000000000",
+          "0",
+          "510000000000000000",
+          "250000000000000000",
+          "90000000000000000",
+          "820000000000000000",
+          "520000000000000000",
+          "840000000000000000",
+          "420000000000000000",
+          "490000000000000000",
+          "790000000000000000",
+          "260000000000000000",
+          "120000000000000000",
+          "40000000000000000",
+          "710000000000000000",
+          "80000000000"
+        ]
+      },
+      {
+        "id": 26,
+        "property": "el",
+        "data": [
+          "720000000000000000",
+          "410000000000000000",
+          "470000000000000000",
+          "350000000000000000",
+          "530000000000000000",
+          "270000000000000000",
+          "480000000000000000",
+          "460000000000000000",
+          "590000000000000000",
+          "380000000000000000",
+          "470000000000000000",
+          "510000000000000000",
+          "150000000000000000",
+          "220000000000000000",
+          "210000000000000000",
+          "520000000000000000",
+          "670000000000000000",
+          "560000000000000000",
+          "470000000000000000",
+          "720000000000000000",
+          "510000000000000000",
+          "280000000000000000",
+          "670000000000000000",
+          "470000000000000000",
+          "360000000000000000",
+          "460000000000000000",
+          "420000000000000000",
+          "640000000000000000",
+          "670000000000000000",
+          "680000000000000000",
+          "510000000000000000",
+          "380000000000000000",
+          "390000000000000000",
+          "350000000000000000",
+          "180000000000000000",
+          "210000000000000000",
+          "290000000000000000",
+          "180000000000000000",
+          "250000000000000000",
+          "400000000000000000",
+          "470000000000000000",
+          "570000000000000000",
+          "440000000000000000",
+          "460000000000000000",
+          "500000000000000000",
+          "320000000000000000",
+          "440000000000000000",
+          "370000000000000000",
+          "250000000000000000",
+          "20000000000"
+        ]
+      },
+      {
+        "id": 29,
+        "property": "el",
+        "data": [
+          "680000000000000000",
+          "400000000000000000",
+          "470000000000000000",
+          "440000000000000000",
+          "540000000000000000",
+          "320000000000000000",
+          "540000000000000000",
+          "560000000000000000",
+          "690000000000000000",
+          "400000000000000000",
+          "280000000000000000",
+          "510000000000000000",
+          "180000000000000000",
+          "300000000000000000",
+          "260000000000000000",
+          "470000000000000000",
+          "520000000000000000",
+          "490000000000000000",
+          "470000000000000000",
+          "700000000000000000",
+          "480000000000000000",
+          "350000000000000000",
+          "610000000000000000",
+          "340000000000000000",
+          "290000000000000000",
+          "440000000000000000",
+          "560000000000000000",
+          "500000000000000000",
+          "550000000000000000",
+          "610000000000000000",
+          "430000000000000000",
+          "350000000000000000",
+          "310000000000000000",
+          "230000000000000000",
+          "320000000000000000",
+          "320000000000000000",
+          "250000000000000000",
+          "410000000000000000",
+          "460000000000000000",
+          "310000000000000000",
+          "500000000000000000",
+          "380000000000000000",
+          "370000000000000000",
+          "410000000000000000",
+          "600000000000000000",
+          "570000000000000000",
+          "420000000000000000",
+          "420000000000000000",
+          "630000000000000000",
+          "43000000000"
+        ]
+      }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/public/mock/dashboard/validatorSummary.json b/frontend/public/mock/dashboard/validatorSummary.json
index 5fde1b097..7fe952175 100644
--- a/frontend/public/mock/dashboard/validatorSummary.json
+++ b/frontend/public/mock/dashboard/validatorSummary.json
@@ -10,7 +10,7 @@
         "current_sync_count": 345,
         "slashed_count": 12
       },
-      "validators":{
+      "validators": {
         "online": 123124,
         "offline": 234,
         "exited": 22
diff --git a/frontend/public/mock/dashboard/validatorSummaryChart.json b/frontend/public/mock/dashboard/validatorSummaryChart.json
index 41759404a..10d17acb3 100644
--- a/frontend/public/mock/dashboard/validatorSummaryChart.json
+++ b/frontend/public/mock/dashboard/validatorSummaryChart.json
@@ -1,107 +1,216 @@
 {
   "data": {
-    "categories": [10000, 10001, 10002, 10003, 10004, 10005, 10006, 10007, 10008, 10009, 10010, 10011, 10012, 10013, 10014, 10015, 10016, 10017, 10018, 10019, 10020, 10021, 10022, 10023, 10024, 10025, 10026, 10027, 10028, 10029, 10030, 10031, 10032, 10033, 10034, 10035, 10036, 10037, 10038, 10039, 10040, 10041, 10042, 10043, 10044, 10045, 10046, 10047, 10048, 10049],
+    "categories": [
+      10000, 10001, 10002, 10003, 10004, 10005, 10006, 10007, 10008, 10009,
+      10010, 10011, 10012, 10013, 10014, 10015, 10016, 10017, 10018, 10019,
+      10020, 10021, 10022, 10023, 10024, 10025, 10026, 10027, 10028, 10029,
+      10030, 10031, 10032, 10033, 10034, 10035, 10036, 10037, 10038, 10039,
+      10040, 10041, 10042, 10043, 10044, 10045, 10046, 10047, 10048, 10049
+    ],
     "series": [
       {
         "id": -1,
-        "data": [68, 41, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43]
+        "data": [
+          68, 41, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52,
+          49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23,
+          32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43
+        ]
       },
       {
         "id": 0,
-        "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100]
+        "data": [
+          0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40,
+          30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95,
+          97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201,
+          99.2015, 100, 100
+        ]
       },
       {
         "id": 1,
-        "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53]
+        "data": [
+          87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71,
+          4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5,
+          13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53
+        ]
       },
       {
         "id": 2,
-        "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82]
+        "data": [
+          84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38,
+          5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38,
+          7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82
+        ]
       },
       {
         "id": 3,
-        "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42]
+        "data": [
+          84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38,
+          5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38,
+          7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42
+        ]
       },
       {
         "id": 4,
-        "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100]
+        "data": [
+          77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71,
+          77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71,
+          61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100
+        ]
       },
       {
         "id": 5,
-        "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80]
+        "data": [
+          90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1,
+          47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0,
+          51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80
+        ]
       },
       {
         "id": 6,
-        "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20]
+        "data": [
+          72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67,
+          56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35,
+          18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20
+        ]
       },
       {
         "id": 9,
-        "data": [58, 41, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43]
+        "data": [
+          58, 41, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52,
+          49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23,
+          32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43
+        ]
       },
       {
         "id": 10,
-        "data": [0, 11, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100]
+        "data": [
+          0, 11, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40,
+          30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95,
+          97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201,
+          99.2015, 100, 100
+        ]
       },
       {
         "id": 11,
-        "data": [84, 13, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53]
+        "data": [
+          84, 13, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71,
+          4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5,
+          13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53
+        ]
       },
       {
         "id": 12,
-        "data": [84, 6, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82]
+        "data": [
+          84, 6, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5,
+          93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7,
+          85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82
+        ]
       },
       {
         "id": 13,
-        "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42]
+        "data": [
+          84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38,
+          5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38,
+          7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42
+        ]
       },
       {
         "id": 14,
-        "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100]
+        "data": [
+          77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71,
+          77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71,
+          61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100
+        ]
       },
       {
         "id": 15,
-        "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80]
+        "data": [
+          90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1,
+          47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0,
+          51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80
+        ]
       },
       {
         "id": 16,
-        "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20]
+        "data": [
+          72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67,
+          56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35,
+          18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20
+        ]
       },
       {
         "id": 19,
-        "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43]
+        "data": [
+          68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52,
+          49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23,
+          32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43
+        ]
       },
       {
         "id": 20,
-        "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100]
+        "data": [
+          0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40,
+          30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95,
+          97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201,
+          99.2015, 100, 100
+        ]
       },
       {
         "id": 21,
-        "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53]
+        "data": [
+          87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71,
+          4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5,
+          13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53
+        ]
       },
       {
         "id": 22,
-        "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82]
+        "data": [
+          84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38,
+          5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38,
+          7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82
+        ]
       },
       {
         "id": 23,
-        "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42]
+        "data": [
+          84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38,
+          5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38,
+          7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42
+        ]
       },
       {
         "id": 24,
-        "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100]
+        "data": [
+          77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71,
+          77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71,
+          61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100
+        ]
       },
       {
         "id": 25,
-        "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80]
+        "data": [
+          90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1,
+          47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0,
+          51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80
+        ]
       },
       {
         "id": 26,
-        "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20]
+        "data": [
+          72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67,
+          56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35,
+          18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20
+        ]
       },
       {
         "id": 29,
-        "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43]
+        "data": [
+          68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52,
+          49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23,
+          32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43
+        ]
       }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/public/mock/dashboard/validatorSummaryDetails.json b/frontend/public/mock/dashboard/validatorSummaryDetails.json
index b1228bf00..072f00df5 100644
--- a/frontend/public/mock/dashboard/validatorSummaryDetails.json
+++ b/frontend/public/mock/dashboard/validatorSummaryDetails.json
@@ -193,8 +193,8 @@
         "validators": [1, 213, 1245, 453, 345, 23]
       },
       "attestation_count": {
-          "success": 0,
-          "failed": 32
+        "success": 0,
+        "failed": 32
       },
       "attestation_efficiency": 87.1234412,
       "attestation_avg_incl_dist": 12,
@@ -275,8 +275,8 @@
         "validators": [1, 213, 1245, 453, 345, 23]
       },
       "attestation_count": {
-          "success": 5111,
-          "failed": 3223
+        "success": 5111,
+        "failed": 3223
       },
       "attestation_efficiency": 87.1234412,
       "attestation_avg_incl_dist": 12,
diff --git a/frontend/public/mock/latestState.json b/frontend/public/mock/latestState.json
index 14c257442..aacf892cb 100644
--- a/frontend/public/mock/latestState.json
+++ b/frontend/public/mock/latestState.json
@@ -1,13 +1,13 @@
 {
-    "lastProposedSlot": 4181855,
-    "currentSlot": 4181855,
-    "currentEpoch": 130682,
-    "currentFinalizedEpoch": 130679,
-    "finalityDelay": 3,
-    "syncing": false,
-    "rates": {
-        "EUR": 2127.51,
-        "USD": 2304.85,
-        "GNO": 10.46
-    }
-}
\ No newline at end of file
+  "lastProposedSlot": 4181855,
+  "currentSlot": 4181855,
+  "currentEpoch": 130682,
+  "currentFinalizedEpoch": 130679,
+  "finalityDelay": 3,
+  "syncing": false,
+  "rates": {
+    "EUR": 2127.51,
+    "USD": 2304.85,
+    "GNO": 10.46
+  }
+}
diff --git a/frontend/public/mock/login.json b/frontend/public/mock/login.json
index 3a4419202..e1964b818 100644
--- a/frontend/public/mock/login.json
+++ b/frontend/public/mock/login.json
@@ -1,4 +1,4 @@
 {
-    "refresh_token": "mySuperCoolRefreshToken",
-    "access_token": "INowHaveAccessToken"
-}
\ No newline at end of file
+  "refresh_token": "mySuperCoolRefreshToken",
+  "access_token": "INowHaveAccessToken"
+}
diff --git a/frontend/public/mock/notifications/managementDashboard.json b/frontend/public/mock/notifications/managementDashboard.json
index 6836f61d2..eb0d14c72 100644
--- a/frontend/public/mock/notifications/managementDashboard.json
+++ b/frontend/public/mock/notifications/managementDashboard.json
@@ -28,4 +28,4 @@
       "networks": [1, 10, 42161, 8453]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/frontend/public/mock/notifications/testEmail.json b/frontend/public/mock/notifications/testEmail.json
index 9e26dfeeb..0967ef424 100644
--- a/frontend/public/mock/notifications/testEmail.json
+++ b/frontend/public/mock/notifications/testEmail.json
@@ -1 +1 @@
-{}
\ No newline at end of file
+{}
diff --git a/frontend/public/mock/notifications/testPush.json b/frontend/public/mock/notifications/testPush.json
index 9e26dfeeb..0967ef424 100644
--- a/frontend/public/mock/notifications/testPush.json
+++ b/frontend/public/mock/notifications/testPush.json
@@ -1 +1 @@
-{}
\ No newline at end of file
+{}
diff --git a/frontend/public/mock/refreshToken.json b/frontend/public/mock/refreshToken.json
index 2e947bedf..605f073c3 100644
--- a/frontend/public/mock/refreshToken.json
+++ b/frontend/public/mock/refreshToken.json
@@ -1,3 +1,3 @@
 {
-    "access_token": "thisIsANewAccessToken"
-}
\ No newline at end of file
+  "access_token": "thisIsANewAccessToken"
+}
diff --git a/frontend/public/mock/stripe/checkout-session.json b/frontend/public/mock/stripe/checkout-session.json
index d65023209..36b563dc8 100644
--- a/frontend/public/mock/stripe/checkout-session.json
+++ b/frontend/public/mock/stripe/checkout-session.json
@@ -1,4 +1,4 @@
 {
   "sessionId": "thisIsNotARealSessionId",
   "error": "somethign went wrong"
-}
\ No newline at end of file
+}
diff --git a/frontend/public/mock/stripe/customer-portal.json b/frontend/public/mock/stripe/customer-portal.json
index 23d2acc63..695f723d7 100644
--- a/frontend/public/mock/stripe/customer-portal.json
+++ b/frontend/public/mock/stripe/customer-portal.json
@@ -1,3 +1,3 @@
 {
   "url": "https://stripe.com/"
-}
\ No newline at end of file
+}
diff --git a/frontend/public/mock/user/dashboards.json b/frontend/public/mock/user/dashboards.json
index e63f67d81..846c63b0c 100644
--- a/frontend/public/mock/user/dashboards.json
+++ b/frontend/public/mock/user/dashboards.json
@@ -35,6 +35,6 @@
         "id": "8",
         "name": "The other wallets"
       }
-    ] 
+    ]
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/public/mock/user/me.json b/frontend/public/mock/user/me.json
index 80846bedf..7fd36499a 100644
--- a/frontend/public/mock/user/me.json
+++ b/frontend/public/mock/user/me.json
@@ -40,4 +40,4 @@
       "custom_machine_alerts": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/public/mock/user/me/email.json b/frontend/public/mock/user/me/email.json
index 9e26dfeeb..0967ef424 100644
--- a/frontend/public/mock/user/me/email.json
+++ b/frontend/public/mock/user/me/email.json
@@ -1 +1 @@
-{}
\ No newline at end of file
+{}
diff --git a/frontend/public/mock/user/me/password.json b/frontend/public/mock/user/me/password.json
index 9e26dfeeb..0967ef424 100644
--- a/frontend/public/mock/user/me/password.json
+++ b/frontend/public/mock/user/me/password.json
@@ -1 +1 @@
-{}
\ No newline at end of file
+{}
diff --git a/frontend/stores/dashboard/useUserDashboardStore.ts b/frontend/stores/dashboard/useUserDashboardStore.ts
index 9e8bafd3c..bb58471e0 100644
--- a/frontend/stores/dashboard/useUserDashboardStore.ts
+++ b/frontend/stores/dashboard/useUserDashboardStore.ts
@@ -1,8 +1,17 @@
 import { defineStore } from 'pinia'
 import { warn } from 'vue'
-import type { GetUserDashboardsResponse, UserDashboardsData, ValidatorDashboard } from '~/types/api/dashboard'
+import type {
+  GetUserDashboardsResponse,
+  UserDashboardsData,
+  ValidatorDashboard,
+} from '~/types/api/dashboard'
 import type { VDBPostReturnData } from '~/types/api/validator_dashboard'
-import { type DashboardKey, type DashboardType, type CookieDashboard, COOKIE_DASHBOARD_ID } from '~/types/dashboard'
+import {
+  type DashboardKey,
+  type DashboardType,
+  type CookieDashboard,
+  COOKIE_DASHBOARD_ID,
+} from '~/types/dashboard'
 import { COOKIE_KEY } from '~/types/cookie'
 import { API_PATH } from '~/types/customFetch'
 import type { ChainIDs } from '~/types/network'
@@ -13,7 +22,7 @@ const userDashboardStore = defineStore('user_dashboards_store', () => {
   return { data }
 })
 
-export function useUserDashboardStore () {
+export function useUserDashboardStore() {
   const { fetch } = useCustomFetch()
   const { t: $t } = useTranslation()
   const { data } = storeToRefs(userDashboardStore())
@@ -27,15 +36,18 @@ export function useUserDashboardStore () {
       if (typeof dashboardCookie.value === 'object') {
         // it seems the browser sometimes auto converts the string into an object
         return dashboardCookie.value as any as UserDashboardsData
-      } else {
+      }
+      else {
         return JSON.parse(dashboardCookie.value)
       }
     }
   })
 
-  async function refreshDashboards () {
+  async function refreshDashboards() {
     if (isLoggedIn.value) {
-      const res = await fetch<GetUserDashboardsResponse>(API_PATH.USER_DASHBOARDS)
+      const res = await fetch<GetUserDashboardsResponse>(
+        API_PATH.USER_DASHBOARDS,
+      )
       data.value = res.data
 
       // add fallback names for dashboards that have no names
@@ -51,14 +63,15 @@ export function useUserDashboardStore () {
           }
         })
       }
-    } else {
+    }
+    else {
       data.value = cookieDashboards.value
     }
     return dashboards.value
   }
 
   // Public dashboards are saved in a cookie (so that it's accessable during SSR)
-  function saveToCookie (db: UserDashboardsData | undefined | null) {
+  function saveToCookie(db: UserDashboardsData | undefined | null) {
     if (isLoggedIn.value) {
       warn('saveToCookie should only be called when not logged in')
       return
@@ -67,81 +80,121 @@ export function useUserDashboardStore () {
     dashboardCookie.value = JSON.stringify(db)
   }
 
-  async function createValidatorDashboard (name: string, network: ChainIDs, dashboardKey?: string):Promise<CookieDashboard |undefined> {
+  async function createValidatorDashboard(
+    name: string,
+    network: ChainIDs,
+    dashboardKey?: string,
+  ): Promise<CookieDashboard | undefined> {
     if (!isLoggedIn.value) {
       // Create local Validator dashboard
-      const cd:CookieDashboard = { id: COOKIE_DASHBOARD_ID.VALIDATOR, name: '', hash: dashboardKey ?? '' }
+      const cd: CookieDashboard = {
+        id: COOKIE_DASHBOARD_ID.VALIDATOR,
+        name: '',
+        hash: dashboardKey ?? '',
+      }
       data.value = {
         account_dashboards: dashboards.value?.account_dashboards || [],
-        validator_dashboards: [cd as ValidatorDashboard]
+        validator_dashboards: [cd as ValidatorDashboard],
       }
       saveToCookie(data.value)
       return cd
     }
     // Create user specific Validator dashboard
-    const res = await fetch<{data: VDBPostReturnData}>(API_PATH.DASHBOARD_CREATE_VALIDATOR, { body: { name, network } })
+    const res = await fetch<{ data: VDBPostReturnData }>(
+      API_PATH.DASHBOARD_CREATE_VALIDATOR,
+      { body: { name, network } },
+    )
     if (res.data) {
       data.value = {
         account_dashboards: dashboards.value?.account_dashboards || [],
         validator_dashboards: [
           ...(dashboards.value?.validator_dashboards || []),
-          { id: res.data.id, name: res.data.name, is_archived: false, validator_count: 0, group_count: 1 }
-        ]
+          {
+            id: res.data.id,
+            name: res.data.name,
+            is_archived: false,
+            validator_count: 0,
+            group_count: 1,
+          },
+        ],
       }
       return res.data
     }
   }
 
-  async function createAccountDashboard (name: string, dashboardKey?: string):Promise<CookieDashboard |undefined> {
+  async function createAccountDashboard(
+    name: string,
+    dashboardKey?: string,
+  ): Promise<CookieDashboard | undefined> {
     if (!isLoggedIn.value) {
       // Create local account dashboard
-      const cd:CookieDashboard = { id: COOKIE_DASHBOARD_ID.ACCOUNT, name: '', hash: dashboardKey ?? '' }
+      const cd: CookieDashboard = {
+        id: COOKIE_DASHBOARD_ID.ACCOUNT,
+        name: '',
+        hash: dashboardKey ?? '',
+      }
       data.value = {
         validator_dashboards: dashboards.value?.validator_dashboards || [],
-        account_dashboards: [cd]
+        account_dashboards: [cd],
       }
       saveToCookie(data.value)
       return cd
     }
     // Create user specific account dashboard
-    const res = await fetch<{data: VDBPostReturnData}>(API_PATH.DASHBOARD_CREATE_ACCOUNT, { body: { name } })
+    const res = await fetch<{ data: VDBPostReturnData }>(
+      API_PATH.DASHBOARD_CREATE_ACCOUNT,
+      { body: { name } },
+    )
     if (res.data) {
       data.value = {
         validator_dashboards: dashboards.value?.validator_dashboards || [],
         account_dashboards: [
           ...(dashboards.value?.account_dashboards || []),
-          { id: res.data.id, name: res.data.name }
-        ]
+          { id: res.data.id, name: res.data.name },
+        ],
       }
       return res.data
     }
   }
 
   // Update the hash (=hashed list of id's) of a specific local dashboard
-  function updateHash (type: DashboardType, hash: string) {
+  function updateHash(type: DashboardType, hash: string) {
     if (!isPublicDashboardKey(hash) || isSharedKey(hash)) {
       warn('invalid public hashed key: ', hash)
       return
     }
     if (type === 'validator') {
-      const cd:CookieDashboard = { id: COOKIE_DASHBOARD_ID.VALIDATOR, name: '', ...dashboards.value?.validator_dashboards?.[0], hash }
+      const cd: CookieDashboard = {
+        id: COOKIE_DASHBOARD_ID.VALIDATOR,
+        name: '',
+        ...dashboards.value?.validator_dashboards?.[0],
+        hash,
+      }
       data.value = {
         account_dashboards: dashboards.value?.account_dashboards || [],
-        validator_dashboards: [cd as ValidatorDashboard]
+        validator_dashboards: [cd as ValidatorDashboard],
+      }
+    }
+    else {
+      const cd: CookieDashboard = {
+        id: COOKIE_DASHBOARD_ID.ACCOUNT,
+        name: '',
+        ...dashboards.value?.account_dashboards?.[0],
+        hash,
       }
-    } else {
-      const cd:CookieDashboard = { id: COOKIE_DASHBOARD_ID.ACCOUNT, name: '', ...dashboards.value?.account_dashboards?.[0], hash }
       data.value = {
         validator_dashboards: dashboards.value?.validator_dashboards || [],
-        account_dashboards: [cd]
+        account_dashboards: [cd],
       }
     }
     saveToCookie(data.value)
   }
 
-  function getDashboardLabel (key: DashboardKey, type:DashboardType): string {
+  function getDashboardLabel(key: DashboardKey, type: DashboardType): string {
     const isValidatorDashboard = type === 'validator'
-    const list = isValidatorDashboard ? dashboards.value?.validator_dashboards : dashboards.value?.account_dashboards
+    const list = isValidatorDashboard
+      ? dashboards.value?.validator_dashboards
+      : dashboards.value?.account_dashboards
     const id = parseInt(key ?? '')
     if (!isNaN(id)) {
       const userDb = list?.find(db => db.id === id)
@@ -149,11 +202,14 @@ export function useUserDashboardStore () {
         return userDb.name
       }
 
-      // in production we should not get here, but with our public api key we can also view dashboards that are not part of our list
+      // in production we should not get here, but with our public api key we
+      // can also view dashboards that are not part of our list
       return `${isValidatorDashboard ? $t('dashboard.validator_dashboard') : $t('dashboard.account_dashboard')} ${id}`
     }
 
-    return isValidatorDashboard ? $t('dashboard.public_validator_dashboard') : $t('dashboard.public_account_dashboard')
+    return isValidatorDashboard
+      ? $t('dashboard.public_validator_dashboard')
+      : $t('dashboard.public_account_dashboard')
   }
 
   return {
@@ -163,6 +219,6 @@ export function useUserDashboardStore () {
     dashboards,
     getDashboardLabel,
     refreshDashboards,
-    updateHash
+    updateHash,
   }
 }
diff --git a/frontend/stores/dashboard/useValidatorDashboardBlocksStore.ts b/frontend/stores/dashboard/useValidatorDashboardBlocksStore.ts
index 5ab21cb82..95e3ae66a 100644
--- a/frontend/stores/dashboard/useValidatorDashboardBlocksStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardBlocksStore.ts
@@ -4,22 +4,30 @@ import type { DashboardKey } from '~/types/dashboard'
 import type { TableQueryParams } from '~/types/datatable'
 import { API_PATH } from '~/types/customFetch'
 
-const validatorDashboardBlocksStore = defineStore('validator_dashboard_blocks_store', () => {
-  const data = ref < InternalGetValidatorDashboardBlocksResponse>()
-  const query = ref < TableQueryParams>()
+const validatorDashboardBlocksStore = defineStore(
+  'validator_dashboard_blocks_store',
+  () => {
+    const data = ref<InternalGetValidatorDashboardBlocksResponse>()
+    const query = ref<TableQueryParams>()
 
-  return { data, query }
-})
+    return { data, query }
+  },
+)
 
-export function useValidatorDashboardBlocksStore () {
+export function useValidatorDashboardBlocksStore() {
   const { fetch } = useCustomFetch()
-  const { data, query: storedQuery } = storeToRefs(validatorDashboardBlocksStore())
+  const { data, query: storedQuery } = storeToRefs(
+    validatorDashboardBlocksStore(),
+  )
   const isLoading = ref(false)
 
   const blocks = computed(() => data.value)
   const query = computed(() => storedQuery.value)
 
-  async function getBlocks (dashboardKey: DashboardKey, query?: TableQueryParams) {
+  async function getBlocks(
+    dashboardKey: DashboardKey,
+    query?: TableQueryParams,
+  ) {
     if (!dashboardKey) {
       data.value = undefined
       isLoading.value = false
@@ -28,7 +36,12 @@ export function useValidatorDashboardBlocksStore () {
     }
     isLoading.value = true
     storedQuery.value = query
-    const res = await fetch<InternalGetValidatorDashboardBlocksResponse>(API_PATH.DASHBOARD_VALIDATOR_BLOCKS, undefined, { dashboardKey }, query)
+    const res = await fetch<InternalGetValidatorDashboardBlocksResponse>(
+      API_PATH.DASHBOARD_VALIDATOR_BLOCKS,
+      undefined,
+      { dashboardKey },
+      query,
+    )
     isLoading.value = false
 
     if (JSON.stringify(storedQuery.value) !== JSON.stringify(query)) {
diff --git a/frontend/stores/dashboard/useValidatorDashboardClDepositsStore.ts b/frontend/stores/dashboard/useValidatorDashboardClDepositsStore.ts
index 1b41797b2..740da4ec9 100644
--- a/frontend/stores/dashboard/useValidatorDashboardClDepositsStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardClDepositsStore.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import type {
   InternalGetValidatorDashboardConsensusLayerDepositsResponse,
-  InternalGetValidatorDashboardTotalConsensusDepositsResponse
+  InternalGetValidatorDashboardTotalConsensusDepositsResponse,
 } from '~/types/api/validator_dashboard'
 import type { DashboardKey } from '~/types/dashboard'
 import type { TableQueryParams } from '~/types/datatable'
@@ -10,20 +10,21 @@ import { API_PATH } from '~/types/customFetch'
 const validatorDashboardClDepositsStore = defineStore(
   'validator_dashboard_cl_deposits_store',
   () => {
-    const data = ref<InternalGetValidatorDashboardConsensusLayerDepositsResponse>()
+    const data
+      = ref<InternalGetValidatorDashboardConsensusLayerDepositsResponse>()
     const total = ref<string>()
     const query = ref<TableQueryParams>()
 
     return { data, query, total }
-  }
+  },
 )
 
-export function useValidatorDashboardClDepositsStore () {
+export function useValidatorDashboardClDepositsStore() {
   const { fetch } = useCustomFetch()
   const {
     data,
     total,
-    query: storedQuery
+    query: storedQuery,
   } = storeToRefs(validatorDashboardClDepositsStore())
 
   const deposits = computed(() => data.value)
@@ -32,9 +33,9 @@ export function useValidatorDashboardClDepositsStore () {
   const isLoadingDeposits = ref(false)
   const isLoadingTotal = ref(false)
 
-  async function getDeposits (
+  async function getDeposits(
     dashboardKey: DashboardKey,
-    query?: TableQueryParams
+    query?: TableQueryParams,
   ) {
     if (!dashboardKey) {
       data.value = undefined
@@ -44,12 +45,12 @@ export function useValidatorDashboardClDepositsStore () {
     }
     storedQuery.value = query
     isLoadingDeposits.value = true
-    const res =
-      await fetch<InternalGetValidatorDashboardConsensusLayerDepositsResponse>(
+    const res
+      = await fetch<InternalGetValidatorDashboardConsensusLayerDepositsResponse>(
         API_PATH.DASHBOARD_CL_DEPOSITS,
         undefined,
         { dashboardKey },
-        query
+        query,
       )
 
     if (JSON.stringify(storedQuery.value) !== JSON.stringify(query)) {
@@ -61,18 +62,18 @@ export function useValidatorDashboardClDepositsStore () {
     return res
   }
 
-  async function getTotalAmount (dashboardKey: DashboardKey) {
+  async function getTotalAmount(dashboardKey: DashboardKey) {
     if (!dashboardKey) {
       total.value = undefined
       isLoadingTotal.value = false
       return undefined
     }
     isLoadingTotal.value = true
-    const res =
-      await fetch<InternalGetValidatorDashboardTotalConsensusDepositsResponse>(
+    const res
+      = await fetch<InternalGetValidatorDashboardTotalConsensusDepositsResponse>(
         API_PATH.DASHBOARD_CL_DEPOSITS_TOTAL,
         undefined,
-        { dashboardKey }
+        { dashboardKey },
       )
     isLoadingTotal.value = false
     total.value = res?.data?.total_amount
@@ -86,6 +87,6 @@ export function useValidatorDashboardClDepositsStore () {
     query,
     getDeposits,
     isLoadingTotal,
-    isLoadingDeposits
+    isLoadingDeposits,
   }
 }
diff --git a/frontend/stores/dashboard/useValidatorDashboardElDepositsStore.ts b/frontend/stores/dashboard/useValidatorDashboardElDepositsStore.ts
index c6b7499af..c83689619 100644
--- a/frontend/stores/dashboard/useValidatorDashboardElDepositsStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardElDepositsStore.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import type {
   InternalGetValidatorDashboardExecutionLayerDepositsResponse,
-  InternalGetValidatorDashboardTotalExecutionDepositsResponse
+  InternalGetValidatorDashboardTotalExecutionDepositsResponse,
 } from '~/types/api/validator_dashboard'
 import type { DashboardKey } from '~/types/dashboard'
 import type { TableQueryParams } from '~/types/datatable'
@@ -10,20 +10,21 @@ import { API_PATH } from '~/types/customFetch'
 const validatorDashboardElDepositsStore = defineStore(
   'validator_dashboard_el_deposits_store',
   () => {
-    const data = ref<InternalGetValidatorDashboardExecutionLayerDepositsResponse>()
+    const data
+      = ref<InternalGetValidatorDashboardExecutionLayerDepositsResponse>()
     const total = ref<string>()
     const query = ref<TableQueryParams>()
 
     return { data, query, total }
-  }
+  },
 )
 
-export function useValidatorDashboardElDepositsStore () {
+export function useValidatorDashboardElDepositsStore() {
   const { fetch } = useCustomFetch()
   const {
     data,
     total,
-    query: storedQuery
+    query: storedQuery,
   } = storeToRefs(validatorDashboardElDepositsStore())
 
   const deposits = computed(() => data.value)
@@ -32,9 +33,9 @@ export function useValidatorDashboardElDepositsStore () {
   const isLoadingDeposits = ref(false)
   const isLoadingTotal = ref(false)
 
-  async function getDeposits (
+  async function getDeposits(
     dashboardKey: DashboardKey,
-    query?: TableQueryParams
+    query?: TableQueryParams,
   ) {
     if (!dashboardKey) {
       data.value = undefined
@@ -44,12 +45,12 @@ export function useValidatorDashboardElDepositsStore () {
     }
     storedQuery.value = query
     isLoadingDeposits.value = true
-    const res =
-      await fetch<InternalGetValidatorDashboardExecutionLayerDepositsResponse>(
+    const res
+      = await fetch<InternalGetValidatorDashboardExecutionLayerDepositsResponse>(
         API_PATH.DASHBOARD_EL_DEPOSITS,
         undefined,
         { dashboardKey },
-        query
+        query,
       )
 
     if (JSON.stringify(storedQuery.value) !== JSON.stringify(query)) {
@@ -61,18 +62,18 @@ export function useValidatorDashboardElDepositsStore () {
     return res
   }
 
-  async function getTotalAmount (dashboardKey: DashboardKey) {
+  async function getTotalAmount(dashboardKey: DashboardKey) {
     if (!dashboardKey) {
       total.value = undefined
       isLoadingTotal.value = false
       return undefined
     }
     isLoadingTotal.value = true
-    const res =
-      await fetch<InternalGetValidatorDashboardTotalExecutionDepositsResponse>(
+    const res
+      = await fetch<InternalGetValidatorDashboardTotalExecutionDepositsResponse>(
         API_PATH.DASHBOARD_EL_DEPOSITS_TOTAL,
         undefined,
-        { dashboardKey }
+        { dashboardKey },
       )
     isLoadingTotal.value = false
     total.value = res?.data?.total_amount
@@ -86,6 +87,6 @@ export function useValidatorDashboardElDepositsStore () {
     query,
     getDeposits,
     isLoadingTotal,
-    isLoadingDeposits
+    isLoadingDeposits,
   }
 }
diff --git a/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts b/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts
index 503ee8e3d..154d3fae9 100644
--- a/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts
@@ -1,6 +1,9 @@
 import { defineStore } from 'pinia'
 import { useAllValidatorDashboardRewardsDetailsStore } from './useValidatorDashboardRewardsDetailsStore'
-import type { VDBOverviewData, InternalGetValidatorDashboardResponse } from '~/types/api/validator_dashboard'
+import type {
+  VDBOverviewData,
+  InternalGetValidatorDashboardResponse,
+} from '~/types/api/validator_dashboard'
 import type { DashboardKey } from '~/types/dashboard'
 import { API_PATH } from '~/types/customFetch'
 
@@ -9,26 +12,32 @@ const validatorOverviewStore = defineStore('validator_overview_store', () => {
   return { data }
 })
 
-export function useValidatorDashboardOverviewStore () {
+export function useValidatorDashboardOverviewStore() {
   const { fetch } = useCustomFetch()
   const { data } = storeToRefs(validatorOverviewStore())
-  const { clearCache: clearRewardDetails } = useAllValidatorDashboardRewardsDetailsStore()
+  const { clearCache: clearRewardDetails }
+    = useAllValidatorDashboardRewardsDetailsStore()
 
   const overview = computed(() => data.value)
 
-  async function refreshOverview (key: DashboardKey) {
+  async function refreshOverview(key: DashboardKey) {
     if (!key) {
       data.value = undefined
       return
     }
     try {
-      const res = await fetch<InternalGetValidatorDashboardResponse>(API_PATH.DASHBOARD_OVERVIEW, undefined, { dashboardKey: key })
+      const res = await fetch<InternalGetValidatorDashboardResponse>(
+        API_PATH.DASHBOARD_OVERVIEW,
+        undefined,
+        { dashboardKey: key },
+      )
       data.value = res.data
 
       clearOverviewDependentCaches()
 
       return overview.value
-    } catch (e) {
+    }
+    catch (e) {
       data.value = undefined
       clearOverviewDependentCaches()
 
@@ -36,7 +45,7 @@ export function useValidatorDashboardOverviewStore () {
     }
   }
 
-  function clearOverviewDependentCaches () {
+  function clearOverviewDependentCaches() {
     clearRewardDetails()
   }
 
@@ -44,7 +53,13 @@ export function useValidatorDashboardOverviewStore () {
     if (!overview.value?.validators) {
       return false
     }
-    return !!overview.value.validators.online || !!overview.value.validators.exited || !!overview.value.validators.offline || !!overview.value.validators.pending || !!overview.value.validators.slashed
+    return (
+      !!overview.value.validators.online
+      || !!overview.value.validators.exited
+      || !!overview.value.validators.offline
+      || !!overview.value.validators.pending
+      || !!overview.value.validators.slashed
+    )
   })
 
   const validatorCount = computed(() => {
@@ -54,7 +69,13 @@ export function useValidatorDashboardOverviewStore () {
     if (!overview.value.validators) {
       return 0
     }
-    return overview.value.validators.exited + overview.value.validators.offline + overview.value.validators.online + overview.value.validators.pending + overview.value.validators.slashed
+    return (
+      overview.value.validators.exited
+      + overview.value.validators.offline
+      + overview.value.validators.online
+      + overview.value.validators.pending
+      + overview.value.validators.slashed
+    )
   })
 
   return { overview, refreshOverview, hasValidators, validatorCount }
diff --git a/frontend/stores/dashboard/useValidatorDashboardRewardsDetailsStore.ts b/frontend/stores/dashboard/useValidatorDashboardRewardsDetailsStore.ts
index bc0184f98..87fe94410 100644
--- a/frontend/stores/dashboard/useValidatorDashboardRewardsDetailsStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardRewardsDetailsStore.ts
@@ -1,27 +1,42 @@
 import { defineStore } from 'pinia'
-import type { VDBGroupRewardsData, InternalGetValidatorDashboardGroupRewardsResponse } from '~/types/api/validator_dashboard'
+import type {
+  VDBGroupRewardsData,
+  InternalGetValidatorDashboardGroupRewardsResponse,
+} from '~/types/api/validator_dashboard'
 import type { DashboardKey } from '~/types/dashboard'
 import { API_PATH } from '~/types/customFetch'
 
-const validatorDashboardRewardsDetailsStore = defineStore('validator_dashboard_rewards_details_store', () => {
-  const data = ref < Record<string, VDBGroupRewardsData >>({})
-  return { data }
-})
-
-export const useValidatorDashboardRewardsDetailsStore = (dashboardKey: DashboardKey, groupId: number, epoch: number) => {
+const validatorDashboardRewardsDetailsStore = defineStore(
+  'validator_dashboard_rewards_details_store',
+  () => {
+    const data = ref<Record<string, VDBGroupRewardsData>>({})
+    return { data }
+  },
+)
+
+export const useValidatorDashboardRewardsDetailsStore = (
+  dashboardKey: DashboardKey,
+  groupId: number,
+  epoch: number,
+) => {
   const { fetch } = useCustomFetch()
   const { data } = storeToRefs(validatorDashboardRewardsDetailsStore())
 
-  function getKey () {
+  function getKey() {
     return `${dashboardKey}_${groupId}_${epoch}`
   }
 
-  async function getDetails () {
-    // Rewards of an epoch will only change when validators changed (see useValidatorDashboardOverviewStore), so we can cache data
+  async function getDetails() {
+    // Rewards of an epoch will only change when validators changed
+    // (see useValidatorDashboardOverviewStore), so we can cache data
     if (data.value[getKey()]) {
       return data.value[getKey()]
     }
-    const res = await fetch<InternalGetValidatorDashboardGroupRewardsResponse>(API_PATH.DASHBOARD_VALIDATOR_REWARDS_DETAILS, undefined, { dashboardKey, groupId, epoch })
+    const res = await fetch<InternalGetValidatorDashboardGroupRewardsResponse>(
+      API_PATH.DASHBOARD_VALIDATOR_REWARDS_DETAILS,
+      undefined,
+      { dashboardKey, groupId, epoch },
+    )
     data.value = { ...data.value, [getKey()]: res.data }
     return res.data
   }
@@ -39,7 +54,7 @@ export const useValidatorDashboardRewardsDetailsStore = (dashboardKey: Dashboard
 export const useAllValidatorDashboardRewardsDetailsStore = () => {
   const { data } = storeToRefs(validatorDashboardRewardsDetailsStore())
 
-  function clearCache () {
+  function clearCache() {
     data.value = {}
   }
 
diff --git a/frontend/stores/dashboard/useValidatorDashboardRewardsStore.ts b/frontend/stores/dashboard/useValidatorDashboardRewardsStore.ts
index 478017efd..355388f5f 100644
--- a/frontend/stores/dashboard/useValidatorDashboardRewardsStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardRewardsStore.ts
@@ -5,16 +5,21 @@ import type { TableQueryParams } from '~/types/datatable'
 import { DAHSHBOARDS_NEXT_EPOCH_ID } from '~/types/dashboard'
 import { API_PATH } from '~/types/customFetch'
 
-const validatorDashboardRewardsStore = defineStore('validator_dashboard_rewards_store', () => {
-  const data = ref < InternalGetValidatorDashboardRewardsResponse>()
-  const query = ref < TableQueryParams>()
+const validatorDashboardRewardsStore = defineStore(
+  'validator_dashboard_rewards_store',
+  () => {
+    const data = ref<InternalGetValidatorDashboardRewardsResponse>()
+    const query = ref<TableQueryParams>()
 
-  return { data, query }
-})
+    return { data, query }
+  },
+)
 
-export function useValidatorDashboardRewardsStore () {
+export function useValidatorDashboardRewardsStore() {
   const { fetch } = useCustomFetch()
-  const { data, query: storedQuery } = storeToRefs(validatorDashboardRewardsStore())
+  const { data, query: storedQuery } = storeToRefs(
+    validatorDashboardRewardsStore(),
+  )
   const isLoading = ref(false)
 
   const { slotViz } = useValidatorSlotVizStore()
@@ -22,7 +27,10 @@ export function useValidatorDashboardRewardsStore () {
   const rewards = computed(() => data.value)
   const query = computed(() => storedQuery.value)
 
-  async function getRewards (dashboardKey: DashboardKey, query?: TableQueryParams) {
+  async function getRewards(
+    dashboardKey: DashboardKey,
+    query?: TableQueryParams,
+  ) {
     if (!dashboardKey) {
       data.value = undefined
       isLoading.value = false
@@ -31,7 +39,12 @@ export function useValidatorDashboardRewardsStore () {
     }
     isLoading.value = true
     storedQuery.value = query
-    const res = await fetch<InternalGetValidatorDashboardRewardsResponse>(API_PATH.DASHBOARD_VALIDATOR_REWARDS, undefined, { dashboardKey }, query)
+    const res = await fetch<InternalGetValidatorDashboardRewardsResponse>(
+      API_PATH.DASHBOARD_VALIDATOR_REWARDS,
+      undefined,
+      { dashboardKey },
+      query,
+    )
 
     isLoading.value = false
     if (JSON.stringify(storedQuery.value) !== JSON.stringify(query)) {
@@ -44,7 +57,15 @@ export function useValidatorDashboardRewardsStore () {
       const nextEpoch = slotViz.value?.findLast(e => e.epoch > searchEpoch)
 
       if (nextEpoch) {
-        res.data = [{ epoch: nextEpoch.epoch, group_id: DAHSHBOARDS_NEXT_EPOCH_ID, duty: { attestation: 0, proposal: 0, slashing: 0, sync: 0 }, reward: { cl: '0', el: '0' } }, ...res.data]
+        res.data = [
+          {
+            epoch: nextEpoch.epoch,
+            group_id: DAHSHBOARDS_NEXT_EPOCH_ID,
+            duty: { attestation: 0, proposal: 0, slashing: 0, sync: 0 },
+            reward: { cl: '0', el: '0' },
+          },
+          ...res.data,
+        ]
       }
     }
 
diff --git a/frontend/stores/dashboard/useValidatorDashboardSummaryDetailsStore.ts b/frontend/stores/dashboard/useValidatorDashboardSummaryDetailsStore.ts
index 5aaa9990d..f835986bc 100644
--- a/frontend/stores/dashboard/useValidatorDashboardSummaryDetailsStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardSummaryDetailsStore.ts
@@ -1,24 +1,35 @@
 import { defineStore } from 'pinia'
-import type { VDBGroupSummaryData, InternalGetValidatorDashboardGroupSummaryResponse } from '~/types/api/validator_dashboard'
+import type {
+  VDBGroupSummaryData,
+  InternalGetValidatorDashboardGroupSummaryResponse,
+} from '~/types/api/validator_dashboard'
 import type { DashboardKey } from '~/types/dashboard'
 import { API_PATH } from '~/types/customFetch'
 import type { SummaryTimeFrame } from '~/types/dashboard/summary'
 
-const validatorDashboardSummaryDetailsStore = defineStore('validator_dashboard_sumary_details_store', () => {
-  const data = ref < Record<string, VDBGroupSummaryData >>({})
-  const timeFrame = ref < SummaryTimeFrame>()
-  return { data, timeFrame }
-})
+const validatorDashboardSummaryDetailsStore = defineStore(
+  'validator_dashboard_sumary_details_store',
+  () => {
+    const data = ref<Record<string, VDBGroupSummaryData>>({})
+    const timeFrame = ref<SummaryTimeFrame>()
+    return { data, timeFrame }
+  },
+)
 
-export function useValidatorDashboardSummaryDetailsStore (dashboardKey: DashboardKey, groupId: number) {
+export function useValidatorDashboardSummaryDetailsStore(
+  dashboardKey: DashboardKey,
+  groupId: number,
+) {
   const { fetch } = useCustomFetch()
-  const { data, timeFrame: storeTimeFrame } = storeToRefs(validatorDashboardSummaryDetailsStore())
+  const { data, timeFrame: storeTimeFrame } = storeToRefs(
+    validatorDashboardSummaryDetailsStore(),
+  )
 
-  function getKey () {
+  function getKey() {
     return `${dashboardKey}_${groupId}`
   }
 
-  async function getDetails (timeFrame: SummaryTimeFrame) {
+  async function getDetails(timeFrame: SummaryTimeFrame) {
     // values might change so we reload whenever requested
     // values are cached in store to avoid loading spinner on expanding/collapsing rows though
     // except when the timeFrame changed, then we clear the cache
@@ -26,7 +37,11 @@ export function useValidatorDashboardSummaryDetailsStore (dashboardKey: Dashboar
       data.value = {}
       storeTimeFrame.value = timeFrame
     }
-    const res = await fetch<InternalGetValidatorDashboardGroupSummaryResponse>(API_PATH.DASHBOARD_SUMMARY_DETAILS, { query: { period: timeFrame } }, { dashboardKey, groupId })
+    const res = await fetch<InternalGetValidatorDashboardGroupSummaryResponse>(
+      API_PATH.DASHBOARD_SUMMARY_DETAILS,
+      { query: { period: timeFrame } },
+      { dashboardKey, groupId },
+    )
     data.value = { ...data.value, [getKey()]: res.data }
     return res.data
   }
diff --git a/frontend/stores/dashboard/useValidatorDashboardSummaryStore.ts b/frontend/stores/dashboard/useValidatorDashboardSummaryStore.ts
index 6b3943487..0bc1a0ead 100644
--- a/frontend/stores/dashboard/useValidatorDashboardSummaryStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardSummaryStore.ts
@@ -5,23 +5,32 @@ import type { TableQueryParams } from '~/types/datatable'
 import { API_PATH } from '~/types/customFetch'
 import type { SummaryTimeFrame } from '~/types/dashboard/summary'
 
-const validatorDashboardSummaryStore = defineStore('validator_dashboard_sumary_store', () => {
-  const data = ref < InternalGetValidatorDashboardSummaryResponse>()
-  const query = ref < TableQueryParams>()
+const validatorDashboardSummaryStore = defineStore(
+  'validator_dashboard_sumary_store',
+  () => {
+    const data = ref<InternalGetValidatorDashboardSummaryResponse>()
+    const query = ref<TableQueryParams>()
 
-  return { data, query }
-})
+    return { data, query }
+  },
+)
 
-export function useValidatorDashboardSummaryStore () {
+export function useValidatorDashboardSummaryStore() {
   const { fetch } = useCustomFetch()
 
-  const { data, query: storedQuery } = storeToRefs(validatorDashboardSummaryStore())
+  const { data, query: storedQuery } = storeToRefs(
+    validatorDashboardSummaryStore(),
+  )
   const isLoading = ref(false)
 
   const summary = computed(() => data.value)
   const query = computed(() => storedQuery.value)
 
-  async function getSummary (dashboardKey: DashboardKey, timeFrame: SummaryTimeFrame, query?: TableQueryParams) {
+  async function getSummary(
+    dashboardKey: DashboardKey,
+    timeFrame: SummaryTimeFrame,
+    query?: TableQueryParams,
+  ) {
     if (!dashboardKey) {
       data.value = undefined
       isLoading.value = false
@@ -31,7 +40,12 @@ export function useValidatorDashboardSummaryStore () {
     isLoading.value = true
     storedQuery.value = query
 
-    const res = await fetch<InternalGetValidatorDashboardSummaryResponse>(API_PATH.DASHBOARD_SUMMARY, { query: { period: timeFrame } }, { dashboardKey }, query)
+    const res = await fetch<InternalGetValidatorDashboardSummaryResponse>(
+      API_PATH.DASHBOARD_SUMMARY,
+      { query: { period: timeFrame } },
+      { dashboardKey },
+      query,
+    )
     isLoading.value = false
     if (JSON.stringify(storedQuery.value) !== JSON.stringify(query)) {
       return // in case some query params change while loading
diff --git a/frontend/stores/dashboard/useValidatorDashboardWithdrawalsStore.ts b/frontend/stores/dashboard/useValidatorDashboardWithdrawalsStore.ts
index 860a907f6..e5f86a453 100644
--- a/frontend/stores/dashboard/useValidatorDashboardWithdrawalsStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardWithdrawalsStore.ts
@@ -1,20 +1,30 @@
 import { defineStore } from 'pinia'
-import type { InternalGetValidatorDashboardWithdrawalsResponse, InternalGetValidatorDashboardTotalWithdrawalsResponse } from '~/types/api/validator_dashboard'
+import type {
+  InternalGetValidatorDashboardWithdrawalsResponse,
+  InternalGetValidatorDashboardTotalWithdrawalsResponse,
+} from '~/types/api/validator_dashboard'
 import type { DashboardKey } from '~/types/dashboard'
 import type { TableQueryParams } from '~/types/datatable'
 import { API_PATH } from '~/types/customFetch'
 
-const validatorDashboardWithdrawalsStore = defineStore('validator_dashboard_withdrawals', () => {
-  const data = ref<InternalGetValidatorDashboardWithdrawalsResponse>()
-  const total = ref<string >()
-  const query = ref<TableQueryParams>()
+const validatorDashboardWithdrawalsStore = defineStore(
+  'validator_dashboard_withdrawals',
+  () => {
+    const data = ref<InternalGetValidatorDashboardWithdrawalsResponse>()
+    const total = ref<string>()
+    const query = ref<TableQueryParams>()
 
-  return { data, query, total }
-})
+    return { data, query, total }
+  },
+)
 
-export function useValidatorDashboardWithdrawalsStore () {
+export function useValidatorDashboardWithdrawalsStore() {
   const { fetch } = useCustomFetch()
-  const { data, total, query: storedQuery } = storeToRefs(validatorDashboardWithdrawalsStore())
+  const {
+    data,
+    total,
+    query: storedQuery,
+  } = storeToRefs(validatorDashboardWithdrawalsStore())
 
   const withdrawals = computed(() => data.value)
   const totalAmount = computed(() => total.value)
@@ -22,7 +32,10 @@ export function useValidatorDashboardWithdrawalsStore () {
   const isLoadingWithdrawals = ref(false)
   const isLoadingTotal = ref(false)
 
-  async function getWithdrawals (dashboardKey: DashboardKey, query?: TableQueryParams) {
+  async function getWithdrawals(
+    dashboardKey: DashboardKey,
+    query?: TableQueryParams,
+  ) {
     if (!dashboardKey) {
       data.value = undefined
       isLoadingWithdrawals.value = false
@@ -32,7 +45,12 @@ export function useValidatorDashboardWithdrawalsStore () {
 
     storedQuery.value = query
     isLoadingWithdrawals.value = true
-    const res = await fetch<InternalGetValidatorDashboardWithdrawalsResponse>(API_PATH.DASHBOARD_VALIDATOR_WITHDRAWALS, undefined, { dashboardKey }, query)
+    const res = await fetch<InternalGetValidatorDashboardWithdrawalsResponse>(
+      API_PATH.DASHBOARD_VALIDATOR_WITHDRAWALS,
+      undefined,
+      { dashboardKey },
+      query,
+    )
 
     if (JSON.stringify(storedQuery.value) !== JSON.stringify(query)) {
       return // in case some query params change while loading
@@ -43,7 +61,7 @@ export function useValidatorDashboardWithdrawalsStore () {
     return res
   }
 
-  async function getTotalAmount (dashboardKey: DashboardKey) {
+  async function getTotalAmount(dashboardKey: DashboardKey) {
     if (!dashboardKey) {
       total.value = undefined
       isLoadingTotal.value = false
@@ -51,11 +69,24 @@ export function useValidatorDashboardWithdrawalsStore () {
     }
 
     isLoadingTotal.value = true
-    const res = await fetch<InternalGetValidatorDashboardTotalWithdrawalsResponse>(API_PATH.DASHBOARD_VALIDATOR_TOTAL_WITHDRAWALS, undefined, { dashboardKey })
+    const res
+      = await fetch<InternalGetValidatorDashboardTotalWithdrawalsResponse>(
+        API_PATH.DASHBOARD_VALIDATOR_TOTAL_WITHDRAWALS,
+        undefined,
+        { dashboardKey },
+      )
     isLoadingTotal.value = false
     total.value = res?.data?.total_amount
     return total.value
   }
 
-  return { totalAmount, getTotalAmount, withdrawals, query, getWithdrawals, isLoadingTotal, isLoadingWithdrawals }
+  return {
+    totalAmount,
+    getTotalAmount,
+    withdrawals,
+    query,
+    getWithdrawals,
+    isLoadingTotal,
+    isLoadingWithdrawals,
+  }
 }
diff --git a/frontend/stores/dashboard/useValidatorSlotVizStore.ts b/frontend/stores/dashboard/useValidatorSlotVizStore.ts
index 5d8bf4109..59e4ff44a 100644
--- a/frontend/stores/dashboard/useValidatorSlotVizStore.ts
+++ b/frontend/stores/dashboard/useValidatorSlotVizStore.ts
@@ -1,5 +1,8 @@
 import { defineStore } from 'pinia'
-import type { SlotVizEpoch, InternalGetValidatorDashboardSlotVizResponse } from '~/types/api/slot_viz'
+import type {
+  SlotVizEpoch,
+  InternalGetValidatorDashboardSlotVizResponse,
+} from '~/types/api/slot_viz'
 import type { DashboardKey } from '~/types/dashboard'
 import { API_PATH } from '~/types/customFetch'
 
@@ -8,18 +11,22 @@ const validatorSlotVizStore = defineStore('validator_slotViz', () => {
   return { data }
 })
 
-export function useValidatorSlotVizStore () {
+export function useValidatorSlotVizStore() {
   const { fetch } = useCustomFetch()
   const { data } = storeToRefs(validatorSlotVizStore())
 
   const slotViz = computed(() => data.value)
 
-  async function refreshSlotViz (dashboardKey: DashboardKey, groups?: number[]) {
+  async function refreshSlotViz(dashboardKey: DashboardKey, groups?: number[]) {
     let query
     if (groups?.length) {
       query = { group_ids: groups.join(',') }
     }
-    const res = await fetch<InternalGetValidatorDashboardSlotVizResponse>(API_PATH.DASHBOARD_SLOTVIZ, { headers: {}, query }, { dashboardKey: dashboardKey || 'MQ' })
+    const res = await fetch<InternalGetValidatorDashboardSlotVizResponse>(
+      API_PATH.DASHBOARD_SLOTVIZ,
+      { headers: {}, query },
+      { dashboardKey: dashboardKey || 'MQ' },
+    )
 
     // We use this hacky solution as we don't have an api endpoint to load a slot viz without validators
     // So we load it for a small public dashboard and then remove the validator informations from it.
@@ -28,11 +35,11 @@ export function useValidatorSlotVizStore () {
         ...e,
         slots: e.slots?.map(s => ({
           slot: s.slot,
-          status: s.status
-        }))
-      })
-      )
-    } else {
+          status: s.status,
+        })),
+      }))
+    }
+    else {
       data.value = res.data
     }
 
diff --git a/frontend/stores/notifications/useNotificationsDashboardStore.ts b/frontend/stores/notifications/useNotificationsDashboardStore.ts
index 746b81a8a..6555b6bb7 100644
--- a/frontend/stores/notifications/useNotificationsDashboardStore.ts
+++ b/frontend/stores/notifications/useNotificationsDashboardStore.ts
@@ -3,24 +3,43 @@ import type { InternalGetUserNotificationDashboardsResponse } from '~/types/api/
 import { API_PATH } from '~/types/customFetch'
 import type { TableQueryParams } from '~/types/datatable'
 
-const notificationsDashboardStore = defineStore('notifications-dashboard-store', () => {
-  const data = ref<InternalGetUserNotificationDashboardsResponse | undefined>()
-  return { data }
-})
+const notificationsDashboardStore = defineStore(
+  'notifications-dashboard-store',
+  () => {
+    const data = ref<InternalGetUserNotificationDashboardsResponse | undefined>()
+    return { data }
+  },
+)
 
-export function useNotificationsDashboardStore (networkId: globalThis.Ref<number>) {
+export function useNotificationsDashboardStore(networkId: globalThis.Ref<number>) {
   const { isLoggedIn } = useUserStore()
 
   const { fetch } = useCustomFetch()
   const { data } = storeToRefs(notificationsDashboardStore())
-  const { query, pendingQuery, cursor, pageSize, onSort, setCursor, setPageSize, setSearch, setStoredQuery, isStoredQuery } = useTableQuery({ limit: 10, sort: 'timestamp:desc' }, 10)
+  const {
+    query,
+    pendingQuery,
+    cursor,
+    pageSize,
+    onSort,
+    setCursor,
+    setPageSize,
+    setSearch,
+    setStoredQuery,
+    isStoredQuery,
+  } = useTableQuery({ limit: 10, sort: 'timestamp:desc' }, 10)
   const isLoading = ref(false)
 
-  async function loadNotificationsDashboards (q: TableQueryParams) {
+  async function loadNotificationsDashboards(q: TableQueryParams) {
     isLoading.value = true
     setStoredQuery(q)
-    try{
-      const result = await fetch<InternalGetUserNotificationDashboardsResponse>(API_PATH.NOTIFICATIONS_DASHBOARDS, { query: { network: networkId.value }}, undefined, q)
+    try {
+      const result = await fetch<InternalGetUserNotificationDashboardsResponse>(
+        API_PATH.NOTIFICATIONS_DASHBOARDS,
+        { query: { network: networkId.value } },
+        undefined,
+        q,
+      )
 
       isLoading.value = false
       if (!isStoredQuery(q)) {
@@ -28,8 +47,8 @@ export function useNotificationsDashboardStore (networkId: globalThis.Ref<number
       }
 
       data.value = result
-      
-    } catch(e) {
+    }
+    catch (e) {
       data.value = undefined
       isLoading.value = false
     }
@@ -40,11 +59,15 @@ export function useNotificationsDashboardStore (networkId: globalThis.Ref<number
     return data.value
   })
 
-  watch([query, networkId], ([q]) => {
+  watch([
+    query,
+    networkId], ([q]) => {
     if (q) {
       isLoggedIn.value && loadNotificationsDashboards(q)
     }
-  }, { immediate: true })
+  },
+  { immediate: true },
+  )
 
   return {
     cursor,
@@ -55,6 +78,6 @@ export function useNotificationsDashboardStore (networkId: globalThis.Ref<number
     query: pendingQuery,
     setCursor,
     setPageSize,
-    setSearch
+    setSearch,
   }
 }
diff --git a/frontend/stores/notifications/useNotificationsNetworkStore.ts b/frontend/stores/notifications/useNotificationsNetworkStore.ts
index cbbbbd6bd..f37090548 100644
--- a/frontend/stores/notifications/useNotificationsNetworkStore.ts
+++ b/frontend/stores/notifications/useNotificationsNetworkStore.ts
@@ -8,7 +8,7 @@ const notificationsNetworkStore = defineStore('notifications-network-store', ()
   return { data }
 })
 
-export function useNotificationsNetworkStore () {
+export function useNotificationsNetworkStore() {
   const { isLoggedIn } = useUserStore()
 
   const { fetch } = useCustomFetch()
@@ -16,19 +16,25 @@ export function useNotificationsNetworkStore () {
   const { query, pendingQuery, cursor, pageSize, onSort, setCursor, setPageSize, setSearch, setStoredQuery, isStoredQuery } = useTableQuery({ limit: 10, sort: 'timestamp:desc' }, 10)
   const isLoading = ref(false)
 
-  async function loadNetworkNotifications (q: TableQueryParams) {
+  async function loadNetworkNotifications(q: TableQueryParams) {
     isLoading.value = true
     setStoredQuery(q)
-    try{
-      const result = await fetch<InternalGetUserNotificationNetworksResponse>(API_PATH.NOTIFICATIONS_NETWORK, undefined, undefined, q)
+    try {
+      const result = await fetch<InternalGetUserNotificationNetworksResponse>(
+        API_PATH.NOTIFICATIONS_NETWORK,
+        undefined,
+        undefined,
+        q,
+      )
 
       isLoading.value = false
       if (!isStoredQuery(q)) {
         return // in case some query params change while loading
       }
 
-      data.value = result      
-    } catch(e) {
+      data.value = result
+    }
+    catch (e) {
       data.value = undefined
       isLoading.value = false
     }
@@ -54,6 +60,6 @@ export function useNotificationsNetworkStore () {
     query: pendingQuery,
     setCursor,
     setPageSize,
-    setSearch
+    setSearch,
   }
 }
diff --git a/frontend/stores/useAdConfigurationStore.ts b/frontend/stores/useAdConfigurationStore.ts
index eac40ba0d..a55124189 100644
--- a/frontend/stores/useAdConfigurationStore.ts
+++ b/frontend/stores/useAdConfigurationStore.ts
@@ -3,20 +3,24 @@ import type { AdConfiguration } from '~/types/adConfiguration'
 import { API_PATH } from '~/types/customFetch'
 
 const adConfigurationStore = defineStore('ad_configuration_store', () => {
-  const data = ref< Record<string, AdConfiguration[]>>({})
+  const data = ref<Record<string, AdConfiguration[]>>({})
   return { data }
 })
 
-export function useAdConfigurationStore () {
+export function useAdConfigurationStore() {
   const { fetch } = useCustomFetch()
   const { data } = storeToRefs(adConfigurationStore())
 
   const adConfigs = computed(() => data.value)
 
-  async function refreshAdConfigs (route:string) {
+  async function refreshAdConfigs(route: string) {
     const keys = ['global', route].join(',')
-    const res = await fetch<AdConfiguration[]>(API_PATH.AD_CONFIGURATIONs, undefined, { keys })
-    const newConfigurations:Record<string, AdConfiguration[]> = {}
+    const res = await fetch<AdConfiguration[]>(
+      API_PATH.AD_CONFIGURATIONs,
+      undefined,
+      { keys },
+    )
+    const newConfigurations: Record<string, AdConfiguration[]> = {}
     res.forEach((config) => {
       if (!newConfigurations[config.key]) {
         newConfigurations[config.key] = []
diff --git a/frontend/stores/useCsrfStore.ts b/frontend/stores/useCsrfStore.ts
index d817239ba..c98eafab8 100644
--- a/frontend/stores/useCsrfStore.ts
+++ b/frontend/stores/useCsrfStore.ts
@@ -11,12 +11,12 @@ const csrfStore = defineStore('csrf_store', () => {
   return { header }
 })
 
-export function useCsrfStore () {
+export function useCsrfStore() {
   const { header } = storeToRefs(csrfStore())
 
   const csrfHeader = computed(() => header.value)
 
-  function setCsrfHeader (headers: Headers) {
+  function setCsrfHeader(headers: Headers) {
     const h = getCSRFHeader(headers)
     if (h) {
       header.value = h
diff --git a/frontend/stores/useLatestStateStore.ts b/frontend/stores/useLatestStateStore.ts
index 1af978b48..11fe728f7 100644
--- a/frontend/stores/useLatestStateStore.ts
+++ b/frontend/stores/useLatestStateStore.ts
@@ -1,5 +1,8 @@
 import { defineStore } from 'pinia'
-import type { InternalGetLatestStateResponse, LatestStateData } from '~/types/api/latest_state'
+import type {
+  InternalGetLatestStateResponse,
+  LatestStateData,
+} from '~/types/api/latest_state'
 import { API_PATH } from '~/types/customFetch'
 
 const latestStateStore = defineStore('latest_state_store', () => {
@@ -7,21 +10,24 @@ const latestStateStore = defineStore('latest_state_store', () => {
   return { data }
 })
 
-export function useLatestStateStore () {
+export function useLatestStateStore() {
   const { fetch } = useCustomFetch()
   const { data } = storeToRefs(latestStateStore())
 
   const latestState = computed(() => data.value)
 
-  async function refreshLatestState () : Promise<LatestStateData|undefined> {
+  async function refreshLatestState(): Promise<LatestStateData | undefined> {
     try {
-      const res = await fetch<InternalGetLatestStateResponse>(API_PATH.LATEST_STATE)
+      const res = await fetch<InternalGetLatestStateResponse>(
+        API_PATH.LATEST_STATE,
+      )
       if (!res.data) {
         return undefined
       }
       data.value = res.data
       return data.value
-    } catch {
+    }
+    catch {
       return undefined
     }
   }
diff --git a/frontend/stores/useNetworkStore.ts b/frontend/stores/useNetworkStore.ts
index 9a6ec6d5e..ec916acfe 100644
--- a/frontend/stores/useNetworkStore.ts
+++ b/frontend/stores/useNetworkStore.ts
@@ -4,87 +4,101 @@ import type { ApiDataResponse } from '~/types/api/common'
 import * as networkTs from '~/types/network'
 
 interface ApiChainInfo {
-  chain_id: networkTs.ChainIDs,
+  chain_id: networkTs.ChainIDs
   name: string
 }
 
 const store = defineStore('network-store', () => {
   const data = ref<{
-    availableNetworks: networkTs.ChainIDs[],
+    availableNetworks: networkTs.ChainIDs[]
     currentNetwork: networkTs.ChainIDs
   }>({
     availableNetworks: [networkTs.ChainIDs.Ethereum],
-    currentNetwork: networkTs.ChainIDs.Any // this impossible value by defaut must be kept, it ensures that the `computed` of `currentNetwork` selects the network of highest priority when `setCurrentNetwork()` has not been called yet
+    // this impossible value by defaut must be kept, it ensures that the `computed`
+    // of `currentNetwork` selects the network of highest priority when `setCurrentNetwork()` has not been called yet
+    currentNetwork: networkTs.ChainIDs.Any,
   })
   return { data }
 })
 
-export function useNetworkStore () {
+export function useNetworkStore() {
   const { data } = storeToRefs(store())
 
   /**
    * Needs to be called once, when the front-end is loading. Unnecessary afterwards.
    */
-  async function loadAvailableNetworks () : Promise<boolean> {
+  async function loadAvailableNetworks(): Promise<boolean> {
     try {
       const { fetch } = useCustomFetch()
-      const response = await fetch<ApiDataResponse<ApiChainInfo[]>>(API_PATH.AVAILABLE_NETWORKS)
+      const response = await fetch<ApiDataResponse<ApiChainInfo[]>>(
+        API_PATH.AVAILABLE_NETWORKS,
+      )
       if (!response.data || !response.data.length) {
         return false
       }
-      data.value.availableNetworks = networkTs.sortChainIDsByPriority(response.data.map(apiInfo => apiInfo.chain_id))
+      data.value.availableNetworks = networkTs.sortChainIDsByPriority(
+        response.data.map(apiInfo => apiInfo.chain_id),
+      )
       return true
-    } catch {
+    }
+    catch {
       return false
     }
   }
 
   const availableNetworks = computed(() => data.value.availableNetworks)
-  const currentNetwork = computed(() => availableNetworks.value.includes(data.value.currentNetwork) ? data.value.currentNetwork : availableNetworks.value[0])
+  const currentNetwork = computed(() =>
+    availableNetworks.value.includes(data.value.currentNetwork)
+      ? data.value.currentNetwork
+      : availableNetworks.value[0],
+  )
   const networkInfo = computed(() => networkTs.ChainInfo[currentNetwork.value])
 
-  function isNetworkDisabled (chainId: networkTs.ChainIDs) : boolean {
+  function isNetworkDisabled(chainId: networkTs.ChainIDs): boolean {
     // TODO: return `false` for everything once we are ready
-    return !useRuntimeConfig().public.showInDevelopment && chainId !== currentNetwork.value
+    return (
+      !useRuntimeConfig().public.showInDevelopment
+      && chainId !== currentNetwork.value
+    )
   }
 
-  function setCurrentNetwork (chainId: networkTs.ChainIDs) {
+  function setCurrentNetwork(chainId: networkTs.ChainIDs) {
     data.value.currentNetwork = chainId
   }
 
-  function isMainNet () : boolean {
+  function isMainNet(): boolean {
     return networkTs.isMainNet(currentNetwork.value)
   }
 
-  function isL1 () : boolean {
+  function isL1(): boolean {
     return networkTs.isL1(currentNetwork.value)
   }
 
-  function epochsPerDay () : number {
+  function epochsPerDay(): number {
     return networkTs.epochsPerDay(currentNetwork.value)
   }
 
-  function epochToTs (epoch: number) : number | undefined {
+  function epochToTs(epoch: number): number | undefined {
     return networkTs.epochToTs(currentNetwork.value, epoch)
   }
 
-  function secondsPerEpoch ():number {
+  function secondsPerEpoch(): number {
     return networkTs.secondsPerEpoch(currentNetwork.value)
   }
 
-  function slotToTs (slot: number) : number | undefined {
+  function slotToTs(slot: number): number | undefined {
     return networkTs.slotToTs(currentNetwork.value, slot)
   }
 
-  function tsToSlot (ts: number) : number {
+  function tsToSlot(ts: number): number {
     return networkTs.tsToSlot(currentNetwork.value, ts)
   }
 
-  function slotToEpoch (slot: number) : number {
+  function slotToEpoch(slot: number): number {
     return networkTs.slotToEpoch(currentNetwork.value, slot)
   }
 
-  function tsToEpoch (ts: number): number {
+  function tsToEpoch(ts: number): number {
     return slotToEpoch(tsToSlot(ts))
   }
 
@@ -103,6 +117,6 @@ export function useNetworkStore () {
     slotToTs,
     tsToSlot,
     tsToEpoch,
-    slotToEpoch
+    slotToEpoch,
   }
 }
diff --git a/frontend/stores/useProductsStore.ts b/frontend/stores/useProductsStore.ts
index 75e813b55..f66fa77cc 100644
--- a/frontend/stores/useProductsStore.ts
+++ b/frontend/stores/useProductsStore.ts
@@ -1,15 +1,22 @@
 import { defineStore } from 'pinia'
-import type { InternalGetProductSummaryResponse, ProductSummary } from '~/types/api/user'
+import type {
+  InternalGetProductSummaryResponse,
+  ProductSummary,
+} from '~/types/api/user'
 import { API_PATH } from '~/types/customFetch'
-import { ProductCategoryPremium, ProductStoreAndroidPlaystore, ProductStoreIosAppstore } from '~/types/api/user'
+import {
+  ProductCategoryPremium,
+  ProductStoreAndroidPlaystore,
+  ProductStoreIosAppstore,
+} from '~/types/api/user'
 
 const productsStore = defineStore('products_store', () => {
-  const data = ref <ProductSummary>()
+  const data = ref<ProductSummary>()
 
   return { data }
 })
 
-export function useProductsStore () {
+export function useProductsStore() {
   const { fetch } = useCustomFetch()
   const { data } = storeToRefs(productsStore())
   const { user } = useUserStore()
@@ -17,28 +24,45 @@ export function useProductsStore () {
   const products = computed(() => data.value)
 
   const bestPremiumProduct = computed(() => {
-    return data.value?.premium_products.reduce((max, product) => (product.price_per_year_eur > max.price_per_year_eur ? product : max), data.value.premium_products[0])
+    return data.value?.premium_products.reduce(
+      (max, product) =>
+        product.price_per_year_eur > max.price_per_year_eur ? product : max,
+      data.value.premium_products[0],
+    )
   })
 
   const currentPremiumSubscription = computed(() => {
-    return user.value?.subscriptions?.find(sub => sub.product_category === ProductCategoryPremium)
+    return user.value?.subscriptions?.find(
+      sub => sub.product_category === ProductCategoryPremium,
+    )
   })
 
   const isPremiumSubscribedViaApp = computed(() => {
     const store = currentPremiumSubscription.value?.product_store
-    return (store === ProductStoreAndroidPlaystore || store === ProductStoreIosAppstore)
+    return (
+      store === ProductStoreAndroidPlaystore
+      || store === ProductStoreIosAppstore
+    )
   })
 
-  async function getProducts () {
+  async function getProducts() {
     if (data.value) {
       return data.value
     }
 
-    const res = await fetch<InternalGetProductSummaryResponse>(API_PATH.PRODUCT_SUMMARY)
+    const res = await fetch<InternalGetProductSummaryResponse>(
+      API_PATH.PRODUCT_SUMMARY,
+    )
 
     data.value = res.data
     return res
   }
 
-  return { products, getProducts, bestPremiumProduct, currentPremiumSubscription, isPremiumSubscribedViaApp }
+  return {
+    products,
+    getProducts,
+    bestPremiumProduct,
+    currentPremiumSubscription,
+    isPremiumSubscribedViaApp,
+  }
 }
diff --git a/frontend/stores/useTooltipStore.ts b/frontend/stores/useTooltipStore.ts
index 9eaec2041..c0d5bb6cc 100644
--- a/frontend/stores/useTooltipStore.ts
+++ b/frontend/stores/useTooltipStore.ts
@@ -5,12 +5,12 @@ const tooltipStore = defineStore('tooltip_store', () => {
   return { data }
 })
 
-export function useTooltipStore () {
+export function useTooltipStore() {
   const { data } = storeToRefs(tooltipStore())
 
   const selected = computed(() => data?.value)
 
-  function doSelect (element: HTMLElement | null) {
+  function doSelect(element: HTMLElement | null) {
     data.value = element
   }
 
diff --git a/frontend/stores/useUserStore.ts b/frontend/stores/useUserStore.ts
index c34707ff0..ca66bc1d2 100644
--- a/frontend/stores/useUserStore.ts
+++ b/frontend/stores/useUserStore.ts
@@ -8,17 +8,17 @@ const userStore = defineStore('user-store', () => {
   return { data }
 })
 
-export function useUserStore () {
+export function useUserStore() {
   const { fetch } = useCustomFetch()
   const { data } = storeToRefs(userStore())
   const router = useRouter()
 
-  async function doLogin (email: string, password: string) {
+  async function doLogin(email: string, password: string) {
     await fetch<LoginResponse>(API_PATH.LOGIN, {
       body: {
         email,
-        password
-      }
+        password,
+      },
     })
     await getUser()
   }
@@ -27,12 +27,19 @@ export function useUserStore () {
     data.value = user
   }
 
-  async function getUser () : Promise<UserInfo|undefined> {
+  async function getUser(): Promise<UserInfo | undefined> {
     try {
-      const res = await fetch<InternalGetUserInfoResponse>(API_PATH.USER, undefined, undefined, undefined, true)
+      const res = await fetch<InternalGetUserInfoResponse>(
+        API_PATH.USER,
+        undefined,
+        undefined,
+        undefined,
+        true,
+      )
       setUser(res.data)
       return res.data
-    } catch {
+    }
+    catch {
       setUser(undefined)
       return undefined
     }
diff --git a/frontend/types/adConfiguration.ts b/frontend/types/adConfiguration.ts
index 0d7d6896f..bd4927a09 100644
--- a/frontend/types/adConfiguration.ts
+++ b/frontend/types/adConfiguration.ts
@@ -1,12 +1,12 @@
 export type AdInsertMode = 'after' | 'before' | 'replace' | 'insert'
 
 export type AdConfiguration = {
-  'key': string,
-  'jquery_selector': string,
-  'insert_mode': AdInsertMode,
-  'refresh_interval': number,
-  'for_all_users': boolean,
-  'banner_id'?: number,
-  'html_content'?: string,
-  'enabled': boolean
+  key: string
+  jquery_selector: string
+  insert_mode: AdInsertMode
+  refresh_interval: number
+  for_all_users: boolean
+  banner_id?: number
+  html_content?: string
+  enabled: boolean
 }
diff --git a/frontend/types/cookie.ts b/frontend/types/cookie.ts
index ad1948c2e..1c69566ca 100644
--- a/frontend/types/cookie.ts
+++ b/frontend/types/cookie.ts
@@ -1,12 +1,12 @@
 export enum COOKIE_KEY {
   COOKIES_PREFERENCE = 'cookies-preference',
-  CURRENCY= 'currency',
-  REFRESH_TOKEN= 'refresh-token',
-  ACCESS_TOKEN= 'access-token',
-  VALIDATOR_DASHOBARD_KEY= 'validator-dashboard-key',
-  ACCOUNT_DASHOBARD_KEY= 'account-dashboard-key',
-  USER_DASHBOARDS= 'user-dashboards',
-  SLOT_VIZ_SELECTED_CATEGORIES = 'slot-viz-selected-categories'
+  CURRENCY = 'currency',
+  REFRESH_TOKEN = 'refresh-token',
+  ACCESS_TOKEN = 'access-token',
+  VALIDATOR_DASHOBARD_KEY = 'validator-dashboard-key',
+  ACCOUNT_DASHOBARD_KEY = 'account-dashboard-key',
+  USER_DASHBOARDS = 'user-dashboards',
+  SLOT_VIZ_SELECTED_CATEGORIES = 'slot-viz-selected-categories',
 }
 
 export type CookiesPreference = 'all' | 'functional' | undefined
diff --git a/frontend/types/currencies.ts b/frontend/types/currencies.ts
index cf1c1ba00..bc33058da 100644
--- a/frontend/types/currencies.ts
+++ b/frontend/types/currencies.ts
@@ -1,11 +1,28 @@
-const FiatCurrencies = ['AUD', 'CAD', 'CNY', 'EUR', 'GBP', 'JPY', 'USD', 'RUB'] as const
-type FiatCurrency = typeof FiatCurrencies[number]
+const FiatCurrencies = [
+  'AUD',
+  'CAD',
+  'CNY',
+  'EUR',
+  'GBP',
+  'JPY',
+  'USD',
+  'RUB',
+] as const
+type FiatCurrency = (typeof FiatCurrencies)[number]
 const CryptoCurrencies = ['ETH', 'GNO', 'DAI', 'xDAI'] as const
-type CryptoCurrency = typeof CryptoCurrencies[number]
+type CryptoCurrency = (typeof CryptoCurrencies)[number]
 const Native = 'NAT' as const
 type Native = typeof Native
 type Currency = FiatCurrency | CryptoCurrency | Native
 
 type CryptoUnits = 'MAIN' | 'GWEI' | 'WEI'
 
-export { type Currency, type CryptoUnits, type CryptoCurrency, type FiatCurrency, CryptoCurrencies, FiatCurrencies, Native }
+export {
+  type Currency,
+  type CryptoUnits,
+  type CryptoCurrency,
+  type FiatCurrency,
+  CryptoCurrencies,
+  FiatCurrencies,
+  Native,
+}
diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts
index 71bff1ffa..5efe31c31 100644
--- a/frontend/types/customFetch.ts
+++ b/frontend/types/customFetch.ts
@@ -1,4 +1,8 @@
-import { simulateAPIresponseForTheSearchBar, simulateAPIresponseAboutNetworkList, mockManageNotificationsGeneral } from '~/utils/mock'
+import {
+  simulateAPIresponseForTheSearchBar,
+  simulateAPIresponseAboutNetworkList,
+  mockManageNotificationsGeneral,
+} from '~/utils/mock'
 
 export enum API_PATH {
   AD_CONFIGURATIONs = '/adConfigurations',
@@ -40,8 +44,8 @@ export enum API_PATH {
   NOTIFICATIONS_TEST_PUSH = '/notifications/test_push',
   NOTIFICATIONS_TEST_EMAIL = '/notifications/test_email',
   LATEST_STATE = '/latestState',
-  NOTIFICATIONS_DASHBOARDS='/notifications/dashboards',
-  NOTIFICATIONS_NETWORK='/notifications/networks',
+  NOTIFICATIONS_DASHBOARDS = '/notifications/dashboards',
+  NOTIFICATIONS_NETWORK = '/notifications/networks',
   REGISTER = '/register',
   LOGIN = '/login',
   LOGOUT = '/logout',
@@ -51,20 +55,20 @@ export enum API_PATH {
   STRIPE_CUSTOMER_PORTAL = '/stripe/customer-portal',
   STRIPE_CHECKOUT_SESSION = '/stripe/checkout-session',
   SAVE_DASHBOARDS_SETTINGS = '/settings-dashboards',
-  NOTIFICATIONS_TEST_WEBHOOK = '/users/me/notifications/test-webhook'
+  NOTIFICATIONS_TEST_WEBHOOK = '/users/me/notifications/test-webhook',
 }
 
 export type PathValues = Record<string, string | number>
 
 interface MockFunction {
-  (body?: any, param?: PathValues, query?: PathValues) : any
+  (body?: any, param?: PathValues, query?: PathValues): any
 }
 
 type MappingData = {
-  path: string,
-  getPath?: (values?: PathValues) => string,
-  mock?: boolean,
-  mockFunction?: MockFunction,
+  path: string
+  getPath?: (values?: PathValues) => string
+  mock?: boolean
+  mockFunction?: MockFunction
   legacy?: boolean
   method?: 'GET' | 'POST' | 'PUT' | 'DELETE' // 'GET' will be used as default
 }
@@ -72,198 +76,217 @@ type MappingData = {
 export const mapping: Record<string, MappingData> = {
   [API_PATH.DASHBOARD_VALIDATOR_MANAGEMENT]: {
     path: 'validator-dashboards/{dashboard_id}/validators',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/validators`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/validators`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_VALIDATOR_BLOCKS]: {
     path: 'validator-dashboards/{dashboard_id}/blocks',
     getPath: values => `/validator-dashboards/${values?.dashboardKey}/blocks`,
-    mock: false
+    mock: false,
   },
   [API_PATH.DASHBOARD_VALIDATOR_WITHDRAWALS]: {
     path: 'validator-dashboards/{dashboard_id}/withdrawals',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/withdrawals`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/withdrawals`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_VALIDATOR_TOTAL_WITHDRAWALS]: {
     path: 'validator-dashboards/{dashboard_id}/total-withdrawals',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/total-withdrawals`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/total-withdrawals`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_VALIDATOR_GROUPS]: {
     path: 'validator-dashboards/{dashboard_id}/groups',
     getPath: values => `/validator-dashboards/${values?.dashboardKey}/groups`,
     mock: false,
-    method: 'POST'
+    method: 'POST',
   },
   [API_PATH.DASHBOARD_VALIDATOR_GROUP_MODIFY]: {
     path: 'validator-dashboards/{dashboard_id}/groups/{group_id}',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/groups/${values?.groupId}`,
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/groups/${values?.groupId}`,
     mock: false,
-    method: 'PUT' // can be 'DELETE' = delete group or 'PUT' = modify group
+    method: 'PUT', // can be 'DELETE' = delete group or 'PUT' = modify group
   },
   [API_PATH.AD_CONFIGURATIONs]: {
     path: '/ad-configurations?={keys}',
     getPath: values => `/ad-configurations?keys=${values?.keys}`,
-    mock: true
+    mock: true,
   },
   [API_PATH.USER]: {
     path: '/users/me',
-    mock: false
+    mock: false,
   },
   [API_PATH.USER_CHANGE_EMAIL]: {
     path: '/users/me/email',
     mock: true,
-    method: 'PUT'
+    method: 'PUT',
   },
   [API_PATH.USER_CHANGE_PASSWORD]: {
     path: '/users/me/password',
     mock: true,
-    method: 'PUT'
+    method: 'PUT',
   },
   [API_PATH.USER_DELETE]: {
     path: '/users/me',
     mock: true,
-    method: 'DELETE'
+    method: 'DELETE',
   },
   [API_PATH.USER_DASHBOARDS]: {
     path: '/users/me/dashboards',
-    mock: false
+    mock: false,
   },
   [API_PATH.DASHBOARD_CREATE_ACCOUNT]: {
     path: '/account-dashboards',
     mock: true,
-    method: 'POST'
+    method: 'POST',
   },
   [API_PATH.DASHBOARD_CREATE_VALIDATOR]: {
     path: '/validator-dashboards',
     mock: false,
-    method: 'POST'
+    method: 'POST',
   },
   [API_PATH.DASHBOARD_DELETE_ACCOUNT]: {
     path: '/account-dashboards/{dashboardKey}',
     getPath: values => `/account-dashboards/${values?.dashboardKey}`,
     mock: true,
-    method: 'DELETE'
+    method: 'DELETE',
   },
   [API_PATH.DASHBOARD_DELETE_VALIDATOR]: {
     path: '/validator-dashboards/{dashboardKey}',
     getPath: values => `/validator-dashboards/${values?.dashboardKey}`,
     mock: false,
-    method: 'DELETE'
+    method: 'DELETE',
   },
   [API_PATH.DASHBOARD_RENAME_ACCOUNT]: {
     path: '/account-dashboards/{dashboardKey}/name',
     getPath: values => `/account-dashboards/${values?.dashboardKey}/name`,
     mock: true,
-    method: 'PUT'
+    method: 'PUT',
   },
   [API_PATH.DASHBOARD_RENAME_VALIDATOR]: {
     path: '/validator-dashboards/{dashboardKey}/name',
     getPath: values => `/validator-dashboards/${values?.dashboardKey}/name`,
     mock: false,
-    method: 'PUT'
+    method: 'PUT',
   },
   [API_PATH.DASHBOARD_VALIDATOR_CREATE_PUBLIC_ID]: {
     path: '/validator-dashboards/{dashboardKey}/public-ids',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/public-ids`,
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/public-ids`,
     mock: false,
-    method: 'POST'
+    method: 'POST',
   },
   [API_PATH.DASHBOARD_VALIDATOR_EDIT_PUBLIC_ID]: {
     path: '/validator-dashboards/{dashboardKey}/public-ids/{publicId}',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/public-ids/${values?.publicId}`,
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/public-ids/${values?.publicId}`,
     mock: false,
-    method: 'PUT'
+    method: 'PUT',
   },
   [API_PATH.DASHBOARD_SUMMARY_DETAILS]: {
     path: '/validator-dashboards/{dashboardKey}/groups/{group_id}/summary',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/groups/${values?.groupId}/summary`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/groups/${values?.groupId}/summary`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_SUMMARY]: {
     path: '/validator-dashboards/{dashboardKey}/summary',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/summary`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/summary`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_VALIDATOR_REWARDS_CHART]: {
     path: '/validator-dashboards/{dashboardKey}/rewards-chart',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/rewards-chart`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/rewards-chart`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_VALIDATOR_REWARDS_DETAILS]: {
     path: '/validator-dashboards/{dashboardKey}/groups/{group_id}/rewards',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/groups/${values?.groupId}/rewards/${values?.epoch}`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/groups/${values?.groupId}/rewards/${values?.epoch}`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_VALIDATOR_REWARDS]: {
     path: '/validator-dashboards/{dashboardKey}/rewards',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/rewards`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/rewards`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_EL_DEPOSITS]: {
     path: '/validator-dashboards/{dashboard_id}/execution-layer-deposits',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/execution-layer-deposits`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/execution-layer-deposits`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_EL_DEPOSITS_TOTAL]: {
     path: '/validator-dashboards/{dashboard_id}/total-execution-layer-deposits',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/total-execution-layer-deposits`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/total-execution-layer-deposits`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_CL_DEPOSITS]: {
     path: '/validator-dashboards/{dashboard_id}/consensus-layer-deposits',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/consensus-layer-deposits`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/consensus-layer-deposits`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_CL_DEPOSITS_TOTAL]: {
     path: '/validator-dashboards/{dashboard_id}/total-consensus-layer-deposits',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/total-consensus-layer-deposits`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/total-consensus-layer-deposits`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_SUMMARY_CHART]: {
     path: '/validator-dashboards/{dashboardKey}/summary-chart?',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/summary-chart`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/summary-chart`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_OVERVIEW]: {
     path: '/validator-dashboards/{dashboardKey}',
     getPath: values => `/validator-dashboards/${values?.dashboardKey}`,
-    mock: false
+    mock: false,
   },
   [API_PATH.DASHBOARD_SLOTVIZ]: {
     path: '/validator-dashboards/{dashboardKey}/slot-viz',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/slot-viz`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/slot-viz`,
+    mock: false,
   },
   [API_PATH.GET_NOTIFICATIONS_SETTINGS_DASHBOARD]: {
     path: '/users/me/notifications/settings/dashboards',
-    mock: false
+    mock: false,
   },
   [API_PATH.NOTIFICATIONS_MANAGEMENT_GENERAL]: {
     path: '/users/me/notifications/settings/general',
     mockFunction: mockManageNotificationsGeneral,
-    mock: true
+    mock: true,
   },
   [API_PATH.NOTIFICATIONS_TEST_PUSH]: {
     path: '/users/me/notifications/test-push',
     method: 'POST',
-    mock: true
+    mock: true,
   },
   [API_PATH.NOTIFICATIONS_TEST_EMAIL]: {
     path: '/users/me/notifications/test-emails',
     method: 'POST',
-    mock: true
+    mock: true,
   },
   [API_PATH.DASHBOARD_VALIDATOR_EPOCH_DUTY]: {
     path: '/validator-dashboards/{dashboard_id}/duties/{epoch}:',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/duties/${values?.epoch}`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/duties/${values?.epoch}`,
+    mock: false,
   },
   [API_PATH.DASHBOARD_VALIDATOR_INDICES]: {
     path: '/validator-dashboards/{dashboard_id}/summary/validators',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/summary/validators`,
-    mock: false
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/summary/validators`,
+    mock: false,
   },
   [API_PATH.NOTIFICATIONS_DASHBOARDS]: {
     path: '/users/me/notifications/dashboards',
@@ -274,58 +297,59 @@ export const mapping: Record<string, MappingData> = {
   [API_PATH.LATEST_STATE]: {
     path: '/latest-state',
     mockFunction: mockLatestState,
-    mock: false
+    mock: false,
   },
   [API_PATH.REGISTER]: {
     path: '/users',
     method: 'POST',
-    mock: true
+    mock: true,
   },
   [API_PATH.LOGIN]: {
     path: '/login',
     method: 'POST',
-    mock: false
+    mock: false,
   },
   [API_PATH.LOGOUT]: {
     path: '/logout',
     method: 'POST',
-    mock: false
+    mock: false,
   },
   [API_PATH.SEARCH]: {
     path: '/search',
     method: 'POST',
     mockFunction: simulateAPIresponseForTheSearchBar,
-    mock: false
+    mock: false,
   },
   [API_PATH.AVAILABLE_NETWORKS]: {
     path: '/available-networks',
     method: 'GET',
     mockFunction: simulateAPIresponseAboutNetworkList,
-    mock: true
+    mock: true,
   },
   [API_PATH.PRODUCT_SUMMARY]: {
     path: '/product-summary',
-    mock: false
+    mock: false,
   },
   [API_PATH.STRIPE_CUSTOMER_PORTAL]: {
     path: '/user/stripe/customer-portal',
     method: 'POST',
-    mock: false
+    mock: false,
   },
   [API_PATH.STRIPE_CHECKOUT_SESSION]: {
     path: '/user/stripe/create-checkout-session',
     method: 'POST',
-    mock: false
+    mock: false,
   },
   [API_PATH.SAVE_DASHBOARDS_SETTINGS]: {
     path: '/users/me/notifications/settings/{for}-dashboards/{dashboard_key}/groups/{group_id}',
-    getPath: values => `/users/me/notifications/settings/${values?.for}-dashboards/${values?.dashboardKey}/groups/${values?.groupId}`,
+    getPath: values =>
+      `/users/me/notifications/settings/${values?.for}-dashboards/${values?.dashboardKey}/groups/${values?.groupId}`,
     method: 'POST',
-    mock: false
+    mock: false,
   },
   [API_PATH.NOTIFICATIONS_TEST_WEBHOOK]: {
     path: '/users/me/notifications/test-webhook',
     method: 'POST',
-    mock: false
-  }
+    mock: false,
+  },
 }
diff --git a/frontend/types/dashboard/index.ts b/frontend/types/dashboard/index.ts
index 1938de883..fcc68d8b3 100644
--- a/frontend/types/dashboard/index.ts
+++ b/frontend/types/dashboard/index.ts
@@ -12,23 +12,23 @@ export const DAHSHBOARDS_ALL_GROUPS_ID = -1
 export const DAHSHBOARDS_NEXT_EPOCH_ID = -2
 
 export type DashboardKeyData = {
-  dashboardType:globalThis.Ref<DashboardType>,
-  dashboardKey:globalThis.Ref<string>,
-  isPublic:globalThis.Ref<boolean>,
-  isShared:globalThis.Ref<boolean>,
-  publicEntities:globalThis.Ref<string[]>,
-  addEntities:(list:string[]) =>void,
-  removeEntities:(list:string[]) =>void,
-  setDashboardKey:(key:string) =>void,
+  dashboardType: globalThis.Ref<DashboardType>
+  dashboardKey: globalThis.Ref<string>
+  isPublic: globalThis.Ref<boolean>
+  isShared: globalThis.Ref<boolean>
+  publicEntities: globalThis.Ref<string[]>
+  addEntities: (list: string[]) => void
+  removeEntities: (list: string[]) => void
+  setDashboardKey: (key: string) => void
 }
 
 // smallest similarites of AccountDashboard and ValidatorDashboard
 export interface Dashboard {
-  id: number;
-  name: string;
+  id: number
+  name: string
 }
 
 // For not logged in Users we store the Dashboard in Cookies
-export interface CookieDashboard extends Dashboard{
-  hash?: string;
+export interface CookieDashboard extends Dashboard {
+  hash?: string
 }
diff --git a/frontend/types/dashboard/overview.ts b/frontend/types/dashboard/overview.ts
index 33bb1f4c2..1e6df595f 100644
--- a/frontend/types/dashboard/overview.ts
+++ b/frontend/types/dashboard/overview.ts
@@ -1,12 +1,12 @@
 import type { ExtendedLabel } from '~/types/value'
 
 export type OverviewTableData = {
-  label: string,
-  addValidatorModal?: boolean,
-  value?: ExtendedLabel,
-  additonalValues?: ExtendedLabel[][],
+  label: string
+  addValidatorModal?: boolean
+  value?: ExtendedLabel
+  additonalValues?: ExtendedLabel[][]
   infos?: {
-    label: string,
+    label: string
     value: string | number
   }[]
 }
diff --git a/frontend/types/dashboard/rewards.ts b/frontend/types/dashboard/rewards.ts
index 7c7b40204..a72ae68fa 100644
--- a/frontend/types/dashboard/rewards.ts
+++ b/frontend/types/dashboard/rewards.ts
@@ -3,17 +3,17 @@ import type { ExtendedLabel } from '~/types/value'
 import type { ChartSeries } from '~/types/api/common'
 
 export interface RewardChartGroupData {
-  id: number;
-  name: string;
-  bigData: BigNumber[];
+  id: number
+  name: string
+  bigData: BigNumber[]
 }
 export interface RewardChartSeries extends ChartSeries<number, number> {
-  name: string;
-  color: string;
-  type: 'bar';
-  stack: 'x';
-  barMaxWidth: number;
-  bigData: BigNumber[];
+  name: string
+  color: string
+  type: 'bar'
+  stack: 'x'
+  barMaxWidth: number
+  bigData: BigNumber[]
   formatedData: ExtendedLabel[]
-  groups: RewardChartGroupData[];
+  groups: RewardChartGroupData[]
 }
diff --git a/frontend/types/dashboard/slotViz.ts b/frontend/types/dashboard/slotViz.ts
index 2b86830f8..e046ad471 100644
--- a/frontend/types/dashboard/slotViz.ts
+++ b/frontend/types/dashboard/slotViz.ts
@@ -1,2 +1,12 @@
-export type SlotVizCategories = 'attestation' | 'proposal' | 'slashing' | 'sync' | 'visible' | 'initial'
-export type SlotVizIcons = SlotVizCategories | 'head_attestation' | 'source_attestation' | 'target_attestation'
+export type SlotVizCategories =
+  | 'attestation'
+  | 'proposal'
+  | 'slashing'
+  | 'sync'
+  | 'visible'
+  | 'initial'
+export type SlotVizIcons =
+  | SlotVizCategories
+  | 'head_attestation'
+  | 'source_attestation'
+  | 'target_attestation'
diff --git a/frontend/types/dashboard/summary.ts b/frontend/types/dashboard/summary.ts
index 30221315a..b46e2ff29 100644
--- a/frontend/types/dashboard/summary.ts
+++ b/frontend/types/dashboard/summary.ts
@@ -1,34 +1,81 @@
 import { type ChartHistorySeconds } from '~/types/api/common'
 
-export const SummaryDetailsEfficiencyProps = ['attestations_head', 'attestations_source', 'attestations_target', 'slashings', 'sync'] as const
-export type SummaryDetailsEfficiencyProp = typeof SummaryDetailsEfficiencyProps[number]
+export const SummaryDetailsEfficiencyProps = [
+  'attestations_head',
+  'attestations_source',
+  'attestations_target',
+  'slashings',
+  'sync',
+] as const
+export type SummaryDetailsEfficiencyProp =
+  (typeof SummaryDetailsEfficiencyProps)[number]
 
-export const SummaryDetailsEfficiencyValidatorProps = ['validators_sync', 'validators_proposal', 'validators_slashings'] as const
-export type SummaryDetailsEfficiencyValidatorProp = typeof SummaryDetailsEfficiencyValidatorProps[number]
+export const SummaryDetailsEfficiencyValidatorProps = [
+  'validators_sync',
+  'validators_proposal',
+  'validators_slashings',
+] as const
+export type SummaryDetailsEfficiencyValidatorProp =
+  (typeof SummaryDetailsEfficiencyValidatorProps)[number]
 
-export const SummaryDetailsEfficiencyLuckProps = ['proposal_luck', 'sync_luck'] as const
-export type SummaryDetailsEfficiencyLuckProp = typeof SummaryDetailsEfficiencyLuckProps[number]
+export const SummaryDetailsEfficiencyLuckProps = [
+  'proposal_luck',
+  'sync_luck',
+] as const
+export type SummaryDetailsEfficiencyLuckProp =
+  (typeof SummaryDetailsEfficiencyLuckProps)[number]
 
 export const SummaryDetailsEfficiencyCustomProps = ['attestations'] as const
-export type SummaryDetailsEfficiencyCustomProp = typeof SummaryDetailsEfficiencyCustomProps[number]
+export type SummaryDetailsEfficiencyCustomProp =
+  (typeof SummaryDetailsEfficiencyCustomProps)[number]
 
-export const SummaryDetailsEfficiencySpecialProps = ['reward', 'efficiency', 'apr', 'luck', 'attestation_avg_incl_dist', 'attestation_efficiency', 'proposals', 'missed_rewards'] as const
-export type SummaryDetailsEfficiencySpecialProp = typeof SummaryDetailsEfficiencySpecialProps[number]
+export const SummaryDetailsEfficiencySpecialProps = [
+  'reward',
+  'efficiency',
+  'apr',
+  'luck',
+  'attestation_avg_incl_dist',
+  'attestation_efficiency',
+  'proposals',
+  'missed_rewards',
+] as const
+export type SummaryDetailsEfficiencySpecialProp =
+  (typeof SummaryDetailsEfficiencySpecialProps)[number]
 
-export type SummaryDetailsEfficiencyCombinedProp = SummaryDetailsEfficiencySpecialProp | SummaryDetailsEfficiencyProp | SummaryDetailsEfficiencyCustomProp | SummaryDetailsEfficiencyLuckProp | SummaryDetailsEfficiencyValidatorProp
+export type SummaryDetailsEfficiencyCombinedProp =
+  | SummaryDetailsEfficiencySpecialProp
+  | SummaryDetailsEfficiencyProp
+  | SummaryDetailsEfficiencyCustomProp
+  | SummaryDetailsEfficiencyLuckProp
+  | SummaryDetailsEfficiencyValidatorProp
 
-export type DashboardValidatorContext = 'dashboard' | 'group' | 'attestation' | 'sync' | 'slashings' | 'proposal'
+export type DashboardValidatorContext =
+  | 'dashboard'
+  | 'group'
+  | 'attestation'
+  | 'sync'
+  | 'slashings'
+  | 'proposal'
 
-export type SummaryRow = { prop?: SummaryDetailsEfficiencyCombinedProp, title: string}
+export type SummaryRow = {
+  prop?: SummaryDetailsEfficiencyCombinedProp
+  title: string
+}
 
-export const SummaryTimeFrames = ['last_1h', 'last_24h', 'last_7d', 'last_30d', 'all_time'] as const
-export type SummaryTimeFrame = typeof SummaryTimeFrames[number]
+export const SummaryTimeFrames = [
+  'last_1h',
+  'last_24h',
+  'last_7d',
+  'last_30d',
+  'all_time',
+] as const
+export type SummaryTimeFrame = (typeof SummaryTimeFrames)[number]
 
 export type SummaryTableVisibility = {
-  proposals: boolean,
-  attestations: boolean,
-  reward: boolean,
-  efficiency: boolean,
+  proposals: boolean
+  attestations: boolean
+  reward: boolean
+  efficiency: boolean
   validatorsSortable: boolean
 }
 
@@ -36,14 +83,19 @@ export const SUMMARY_CHART_GROUP_TOTAL = -1
 export const SUMMARY_CHART_GROUP_NETWORK_AVERAGE = -2
 
 export type AggregationTimeframe = keyof ChartHistorySeconds
-export const AggregationTimeframes: AggregationTimeframe[] = ['epoch', 'hourly', 'daily', 'weekly']
+export const AggregationTimeframes: AggregationTimeframe[] = [
+  'epoch',
+  'hourly',
+  'daily',
+  'weekly',
+]
 
 export const EfficiencyTypes = ['all', 'attestation', 'sync', 'proposal']
-export type EfficiencyType = typeof EfficiencyTypes[number]
+export type EfficiencyType = (typeof EfficiencyTypes)[number]
 
 export type SummaryChartFilter = {
-  groupIds: number[],
-  aggregation: AggregationTimeframe,
-  efficiency: EfficiencyType,
-  initialised?: boolean,
+  groupIds: number[]
+  aggregation: AggregationTimeframe
+  efficiency: EfficiencyType
+  initialised?: boolean
 }
diff --git a/frontend/types/datatable.ts b/frontend/types/datatable.ts
index bcfbcfd70..27be1ccf1 100644
--- a/frontend/types/datatable.ts
+++ b/frontend/types/datatable.ts
@@ -3,9 +3,9 @@ export type ColumnOrder = 'asc' | 'desc'
 export type SortOrder = 1 | 0 | -1 | undefined | null
 
 export type TableQueryParams = {
-  limit?: number;
-  cursor?: Cursor;
-  order?: ColumnOrder;
-  sort?: string;
-  search?: string;
+  limit?: number
+  cursor?: Cursor
+  order?: ColumnOrder
+  sort?: string
+  search?: string
 }
diff --git a/frontend/types/date.ts b/frontend/types/date.ts
index 05c9e9da8..30461845e 100644
--- a/frontend/types/date.ts
+++ b/frontend/types/date.ts
@@ -1,4 +1,4 @@
 export type DateInfo = {
-  date: globalThis.Ref<Date>,
-  timestamp: globalThis.Ref<number>,
+  date: globalThis.Ref<Date>
+  timestamp: globalThis.Ref<number>
 }
diff --git a/frontend/types/hashTabs.ts b/frontend/types/hashTabs.ts
index 058a3555e..3c2cb37f5 100644
--- a/frontend/types/hashTabs.ts
+++ b/frontend/types/hashTabs.ts
@@ -1,5 +1,5 @@
 export type HashTab = {
-  index: number,
+  index: number
   disabled?: boolean
 }
 export type HashTabs = Record<string, HashTab>
diff --git a/frontend/types/helper.ts b/frontend/types/helper.ts
index b5dd662d9..b2fdd4fbd 100644
--- a/frontend/types/helper.ts
+++ b/frontend/types/helper.ts
@@ -1,9 +1,9 @@
 /**
  * Get all possible key paths of an object
  * without arrays
- * 
+ *
  * @example
- * 
+ *
  * type Person = {
  *  age: number
  *  address: {
@@ -13,11 +13,11 @@
  *    outdoor: string[]
  *  }
  * }
- * 
- * type Paths = KeyPaths<Person> // "age" | "address.street" 
- * 
- * @warning 
- * 
+ *
+ * type Paths = KeyPaths<Person> // "age" | "address.street"
+ *
+ * @warning
+ *
  * Arrays are removed
  */
 type KeyPaths<T> = {
@@ -27,7 +27,7 @@ type KeyPaths<T> = {
         ? never // remove Arrays
         : `${K}.${KeyPaths<T[K]>}`
       : K
-    : never
-}[keyof T];
+    : never;
+}[keyof T]
 
-export type { KeyPaths };
\ No newline at end of file
+export type { KeyPaths }
diff --git a/frontend/types/links.ts b/frontend/types/links.ts
index c5024b1f8..da6007ed2 100644
--- a/frontend/types/links.ts
+++ b/frontend/types/links.ts
@@ -1,4 +1,4 @@
 export const enum Target {
   Internal = '_self',
-  External = '_blank'
+  External = '_blank',
 }
diff --git a/frontend/types/menuBar.ts b/frontend/types/menuBar.ts
index d53fbef9d..d56e5383f 100644
--- a/frontend/types/menuBar.ts
+++ b/frontend/types/menuBar.ts
@@ -1,18 +1,18 @@
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 
 export interface MenuBarButton {
-  label?: string;
-  command?: () => void;
-  route?: string;
-  class?: string;
-  highlight?: boolean;
-  faIcon?: IconDefinition;
-  component?: Component;
-  active?: boolean;
-  disabledTooltip?: string;
+  label?: string
+  command?: () => void
+  route?: string
+  class?: string
+  highlight?: boolean
+  faIcon?: IconDefinition
+  component?: Component
+  active?: boolean
+  disabledTooltip?: string
 }
 
 export interface MenuBarEntry extends MenuBarButton {
-  dropdown: boolean;
-  items?: MenuBarButton[];
+  dropdown: boolean
+  items?: MenuBarButton[]
 }
diff --git a/frontend/types/multiBar.ts b/frontend/types/multiBar.ts
index 9ddcbeab7..ba194cbad 100644
--- a/frontend/types/multiBar.ts
+++ b/frontend/types/multiBar.ts
@@ -2,11 +2,11 @@ import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 
 export type MultiBarItem = {
   icon?: IconDefinition
-  component?: Component,
-  componentProps?: any,
-  componentClass?: string,
-  value: string,
-  tooltip?: string,
-  className?: string,
+  component?: Component
+  componentProps?: any
+  componentClass?: string
+  value: string
+  tooltip?: string
+  className?: string
   disabled?: boolean
 }
diff --git a/frontend/types/network.ts b/frontend/types/network.ts
index 3e51d2e1f..df6f86fe2 100644
--- a/frontend/types/network.ts
+++ b/frontend/types/network.ts
@@ -6,7 +6,7 @@ export enum ChainFamily {
   Arbitrum = 'Arbitrum',
   Optimism = 'Optimism',
   Base = 'Base',
-  Gnosis = 'Gnosis'
+  Gnosis = 'Gnosis',
 }
 
 export enum ChainIDs {
@@ -17,7 +17,7 @@ export enum ChainIDs {
   Sepolia = 11155111,
 
   ArbitrumOneEthereum = 42161,
-  ArbitrumNovaEthereum= 42170,
+  ArbitrumNovaEthereum = 42170,
   ArbitrumOneSepolia = 421614,
 
   OptimismEthereum = 10,
@@ -27,22 +27,22 @@ export enum ChainIDs {
   BaseSepolia = 84532,
 
   Gnosis = 100,
-  Chiado = 10200
+  Chiado = 10200,
 }
 
 export interface ChainInfoFields {
-  nameParts: string[],
-  name: string,
-  shortName: string,
-  description: string,
-  family: ChainFamily,
-  mainNet: ChainIDs, // if the network is a testnet, this field points to the non-test network
-  L1: ChainIDs, // if the network is a L2, this field points to the L1
-  clCurrency: CryptoCurrency,
-  elCurrency: CryptoCurrency,
-  timeStampSlot0: number, // if this property is 0, it means that the network has no slots
-  secondsPerSlot: number, // if this property is 0, it means that the network has no slots
-  slotsPerEpoch: number, // if this property is 0, it means that the network has no slots
+  nameParts: string[]
+  name: string
+  shortName: string
+  description: string
+  family: ChainFamily
+  mainNet: ChainIDs // if the network is a testnet, this field points to the non-test network
+  L1: ChainIDs // if the network is a L2, this field points to the L1
+  clCurrency: CryptoCurrency
+  elCurrency: CryptoCurrency
+  timeStampSlot0: number // if this property is 0, it means that the network has no slots
+  secondsPerSlot: number // if this property is 0, it means that the network has no slots
+  slotsPerEpoch: number // if this property is 0, it means that the network has no slots
   priority: number // default order of the networks on the screen (ex: in the drop-down of the search bar)
 }
 
@@ -60,7 +60,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 12,
     slotsPerEpoch: 32,
-    priority: 0 // data belonging to all networks is displayed first by default
+    priority: 0, // data belonging to all networks is displayed first by default
   },
 
   [ChainIDs.Ethereum]: {
@@ -76,7 +76,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 1606824023,
     secondsPerSlot: 12,
     slotsPerEpoch: 32,
-    priority: 1
+    priority: 1,
   },
   [ChainIDs.Holesky]: {
     nameParts: ['Ethereum', 'Holesky'],
@@ -91,7 +91,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 1695902400,
     secondsPerSlot: 12,
     slotsPerEpoch: 32,
-    priority: 2
+    priority: 2,
   },
   [ChainIDs.Sepolia]: {
     nameParts: ['Ethereum', 'Sepolia'],
@@ -106,7 +106,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 1655733600,
     secondsPerSlot: 12,
     slotsPerEpoch: 32,
-    priority: 3
+    priority: 3,
   },
 
   [ChainIDs.ArbitrumOneEthereum]: {
@@ -122,7 +122,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    priority: 10
+    priority: 10,
   },
   [ChainIDs.ArbitrumNovaEthereum]: {
     nameParts: ['Arbitrum Nova', ''],
@@ -137,7 +137,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    priority: 11
+    priority: 11,
   },
   [ChainIDs.ArbitrumOneSepolia]: {
     nameParts: ['Arbitrum', 'Sepolia'],
@@ -152,7 +152,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    priority: 12
+    priority: 12,
   },
 
   [ChainIDs.OptimismEthereum]: {
@@ -168,7 +168,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    priority: 20
+    priority: 20,
   },
   [ChainIDs.OptimismSepolia]: {
     nameParts: ['Optimism', 'Sepolia'],
@@ -183,7 +183,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    priority: 21
+    priority: 21,
   },
 
   [ChainIDs.BaseEthereum]: {
@@ -199,7 +199,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    priority: 30
+    priority: 30,
   },
   [ChainIDs.BaseSepolia]: {
     nameParts: ['Base', 'Sepolia'],
@@ -214,7 +214,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 0,
     secondsPerSlot: 0,
     slotsPerEpoch: 0,
-    priority: 31
+    priority: 31,
   },
 
   [ChainIDs.Gnosis]: {
@@ -230,7 +230,7 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 1638993340,
     secondsPerSlot: 5,
     slotsPerEpoch: 16,
-    priority: 40
+    priority: 40,
   },
   [ChainIDs.Chiado]: {
     nameParts: ['Gnosis', 'Chiado'],
@@ -245,12 +245,12 @@ export const ChainInfo: Record<ChainIDs, ChainInfoFields> = {
     timeStampSlot0: 1665396300,
     secondsPerSlot: 5,
     slotsPerEpoch: 16,
-    priority: 41
-  }
+    priority: 41,
+  },
 }
 
-export function getAllExistingChainIDs (sortByPriority : boolean) : ChainIDs[] {
-  const list : ChainIDs[] = []
+export function getAllExistingChainIDs(sortByPriority: boolean): ChainIDs[] {
+  const list: ChainIDs[] = []
 
   for (const id in ChainIDs) {
     if (isNaN(Number(id))) {
@@ -265,63 +265,71 @@ export function getAllExistingChainIDs (sortByPriority : boolean) : ChainIDs[] {
 
 /**
  * Should be used only when you test a network different from the current one.
- * Whereever you would write `isMainNet(currentNetwork.value)` you should rather use `isMainNet()` from `useNetworkStore.ts`.
+ * Whereever you would write `isMainNet(currentNetwork.value)` you should
+ * rather use `isMainNet()` from `useNetworkStore.ts`.
  */
-export function isMainNet (network: ChainIDs) : boolean {
-  return (ChainInfo[network].mainNet === network)
+export function isMainNet(network: ChainIDs): boolean {
+  return ChainInfo[network].mainNet === network
 }
 
 /**
  * Should be used only when you test a network different from the current one.
  * Wherever you would write `isL1(currentNetwork.value)` you should rather use `isL1()` from `useNetworkStore.ts`.
  */
-export function isL1 (network: ChainIDs) : boolean {
-  return (ChainInfo[network].L1 === network)
+export function isL1(network: ChainIDs): boolean {
+  return ChainInfo[network].L1 === network
 }
 
 /**
  * Should be used only when you work with a network different from the current one.
- * Wherever you would write `epochsPerDay(currentNetwork.value)` you should rather use `epochsPerDay()` from `useNetworkStore.ts`.
+ * Wherever you would write `epochsPerDay(currentNetwork.value)` you should
+ * rather use `epochsPerDay()` from `useNetworkStore.ts`.
  */
-export function epochsPerDay (chainId: ChainIDs): number {
+export function epochsPerDay(chainId: ChainIDs): number {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined) {
     return 0
   }
-  return 24 * 60 * 60 / (info.slotsPerEpoch * info.secondsPerSlot)
+  return (24 * 60 * 60) / (info.slotsPerEpoch * info.secondsPerSlot)
 }
 
 /**
  * Should be used only when you work with a network different from the current one.
- * Wherever you would write `epochToTs(currentNetwork.value, epoch)` you should rather use `epochToTs(epoch)` from `useNetworkStore.ts`.
+ * Wherever you would write `epochToTs(currentNetwork.value, epoch)` you should
+ *  rather use `epochToTs(epoch)` from `useNetworkStore.ts`.
  */
-export function epochToTs (chainId: ChainIDs, epoch: number): number | undefined {
+export function epochToTs(
+  chainId: ChainIDs,
+  epoch: number,
+): number | undefined {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined || epoch < 0) {
     return undefined
   }
 
-  return info.timeStampSlot0 + ((epoch * info.slotsPerEpoch) * info.secondsPerSlot)
+  return info.timeStampSlot0 + epoch * info.slotsPerEpoch * info.secondsPerSlot
 }
 
 /**
  * Should be used only when you work with a network different from the current one.
- * Wherever you would write `slotToTs(currentNetwork.value, slot)` you should rather use `slotToTs(slot)` from `useNetworkStore.ts`.
+ * Wherever you would write `slotToTs(currentNetwork.value, slot)` you should
+ *  rather use `slotToTs(slot)` from `useNetworkStore.ts`.
  */
-export function slotToTs (chainId: ChainIDs, slot: number): number | undefined {
+export function slotToTs(chainId: ChainIDs, slot: number): number | undefined {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined || slot < 0) {
     return undefined
   }
 
-  return info.timeStampSlot0 + (slot * info.secondsPerSlot)
+  return info.timeStampSlot0 + slot * info.secondsPerSlot
 }
 
 /**
  * Should be used only when you work with a network different from the current one.
- * Wherever you would write `tsToSlot(currentNetwork.value, ts)` you should rather use `tsToSlot(ts)` from `useNetworkStore.ts`.
+ * Wherever you would write `tsToSlot(currentNetwork.value, ts)` you should
+ * rather use `tsToSlot(ts)` from `useNetworkStore.ts`.
  */
-export function tsToSlot (chainId: ChainIDs, ts: number): number {
+export function tsToSlot(chainId: ChainIDs, ts: number): number {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined) {
     return -1
@@ -331,9 +339,10 @@ export function tsToSlot (chainId: ChainIDs, ts: number): number {
 
 /**
  * Should be used only when you work with a network different from the current one.
- * Wherever you would write `slotToEpoch(currentNetwork.value, slot)` you should rather use `slotToEpoch(slot)` from `useNetworkStore.ts`.
+ * Wherever you would write `slotToEpoch(currentNetwork.value, slot)` you should
+ *  rather use `slotToEpoch(slot)` from `useNetworkStore.ts`.
  */
-export function slotToEpoch (chainId: ChainIDs, slot: number): number {
+export function slotToEpoch(chainId: ChainIDs, slot: number): number {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined) {
     return -1
@@ -343,9 +352,10 @@ export function slotToEpoch (chainId: ChainIDs, slot: number): number {
 
 /**
  * Should be used only when you work with a network different from the current one.
- * Wherever you would write `secondsPerEpoch(currentNetwork.value)` you should rather use `secondsPerEpoch()` from `useNetworkStore.ts`.
+ * Wherever you would write `secondsPerEpoch(currentNetwork.value)` you should
+ * rather use `secondsPerEpoch()` from `useNetworkStore.ts`.
  */
-export function secondsPerEpoch (chainId: ChainIDs): number {
+export function secondsPerEpoch(chainId: ChainIDs): number {
   const info = ChainInfo[chainId]
   if (info.timeStampSlot0 === undefined) {
     return -1
@@ -357,6 +367,6 @@ export function secondsPerEpoch (chainId: ChainIDs): number {
  * @param list List to sort. Its order will be modified because the function sorts in place.
  * @returns List sorted in place, so the same as parameter `list`.
  */
-export function sortChainIDsByPriority (list : ChainIDs[]) : ChainIDs[] {
+export function sortChainIDsByPriority(list: ChainIDs[]): ChainIDs[] {
   return list.sort((a, b) => ChainInfo[a].priority - ChainInfo[b].priority)
 }
diff --git a/frontend/types/notifications/settings.ts b/frontend/types/notifications/settings.ts
index 910bcee82..558119ffc 100644
--- a/frontend/types/notifications/settings.ts
+++ b/frontend/types/notifications/settings.ts
@@ -1,11 +1,23 @@
-import type { NotificationSettingsGeneral, NotificationPairedDevice } from '~/types/api/notifications'
+import type {
+  NotificationSettingsGeneral,
+  NotificationPairedDevice,
+} from '~/types/api/notifications'
 
-export type NotificationsManagementSettingsGeneralTab = Pick<NotificationSettingsGeneral, 'do_not_disturb_timestamp' | 'is_email_notifications_enabled' | 'is_push_notifications_enabled'>;
+export type NotificationsManagementSettingsGeneralTab = Pick<
+  NotificationSettingsGeneral,
+  | 'do_not_disturb_timestamp'
+  | 'is_email_notifications_enabled'
+  | 'is_push_notifications_enabled'
+>
 
-export interface NotificationsManagementSettingsProvider{
-  generalSettings: ComputedRef<NotificationsManagementSettingsGeneralTab | undefined>,
-  updateGeneralSettings: (newSettings: NotificationsManagementSettingsGeneralTab) => void,
-  pairedDevices: ComputedRef<NotificationPairedDevice[] | undefined>,
-  updatePairedDevices: (newDevices: NotificationPairedDevice[]) => void,
+export interface NotificationsManagementSettingsProvider {
+  generalSettings: ComputedRef<
+    NotificationsManagementSettingsGeneralTab | undefined
+  >
+  updateGeneralSettings: (
+    newSettings: NotificationsManagementSettingsGeneralTab,
+  ) => void
+  pairedDevices: ComputedRef<NotificationPairedDevice[] | undefined>
+  updatePairedDevices: (newDevices: NotificationPairedDevice[]) => void
   isLoading: Ref<boolean>
 }
diff --git a/frontend/types/notifications/subscriptionModal.ts b/frontend/types/notifications/subscriptionModal.ts
index 5aafa27a8..ead7b7fea 100644
--- a/frontend/types/notifications/subscriptionModal.ts
+++ b/frontend/types/notifications/subscriptionModal.ts
@@ -3,7 +3,7 @@ import type { ChainIDs } from '../network'
 export interface InternalEntry {
   type: 'binary' | 'amount' | 'percent' | 'networks'
   networks?: ChainIDs[]
-  check?: boolean,
+  check?: boolean
   num?: number
 }
 
diff --git a/frontend/types/pricing.ts b/frontend/types/pricing.ts
index bb1b0d002..4856c8efa 100644
--- a/frontend/types/pricing.ts
+++ b/frontend/types/pricing.ts
@@ -1,8 +1,8 @@
 export interface Feature {
-  name: string,
-  subtext?: string,
-  available: boolean,
-  tooltip?: string,
-  percentage?: number,
+  name: string
+  subtext?: string
+  available: boolean
+  tooltip?: string
+  percentage?: number
   link?: string
 }
diff --git a/frontend/types/searchbar.ts b/frontend/types/searchbar.ts
index a3ab040d8..c0ec45557 100644
--- a/frontend/types/searchbar.ts
+++ b/frontend/types/searchbar.ts
@@ -1,6 +1,11 @@
+/* eslint-disable vue/max-len -- TODO:   plz fix this */
 import type { ComposerTranslation } from 'vue-i18n'
 import type { ChainIDs } from '~/types/network'
-import { type ApiErrorResponse, type SearchResult, type InternalPostSearchResponse } from '~/types/api/common'
+import {
+  type ApiErrorResponse,
+  type SearchResult,
+  type InternalPostSearchResponse,
+} from '~/types/api/common'
 
 export const MinimumTimeBetweenAPIcalls = 400 // ms
 export const LayoutThreshold = 500 // px  (tells when the bar must switch between its narrow and large layouts)
@@ -8,23 +13,23 @@ export const LayoutThreshold = 500 // px  (tells when the bar must switch betwee
 export enum SearchbarShape { // do not change the litterals, they are used as class names
   Small = 'small',
   Medium = 'medium',
-  Big = 'big'
+  Big = 'big',
 }
 export enum SearchbarColors { // do not change the litterals, they are used as class names
   Default = 'default',
   DarkBlue = 'darkblue',
-  LightBlue = 'lightblue'
+  LightBlue = 'lightblue',
 }
 export enum SearchbarPurpose {
   GlobalSearch,
   AccountAddition,
-  ValidatorAddition
+  ValidatorAddition,
 }
 
 // List of the possible ways to organise the information in each row of the result-suggestion list.
 export enum SuggestionrowCells {
   NameDescriptionLowlevelCategory, // this mode displays everything
-  SubcategoryIdentificationDescription // shows less information, and this information is a bit different from what the complete mode shows
+  SubcategoryIdentificationDescription, // shows less information, and this information is a bit different from what the complete mode shows
   // If you add here a display-mode, update the `SearchbarPurposeInfo` record to tell SuggestionRow.vue which display-mode
   // it should use, and then implement this mode in the `<template>` of SuggestionRow.vue.
 }
@@ -34,7 +39,7 @@ export enum Category {
   NFTs,
   Protocol,
   Addresses,
-  Validators
+  Validators,
 }
 
 export enum SubCategory {
@@ -48,7 +53,7 @@ export enum SubCategory {
   Accounts,
   EnsOverview,
   Graffiti,
-  Validators
+  Validators,
 }
 
 export enum ResultType {
@@ -74,15 +79,15 @@ export enum ResultType {
   ValidatorsByWithdrawalCredential = 'validators_by_withdrawal_credential',
   ValidatorsByWithdrawalAddress = 'validators_by_withdrawal_address',
   ValidatorsByWithdrawalEnsName = 'validators_by_withdrawal_ens_name',
-  ValidatorsByGraffiti = 'validators_by_graffiti'
+  ValidatorsByGraffiti = 'validators_by_graffiti',
   // ValidatorsByName = 'validators_by_name'  // for users having given a name to their validator in our DB
 }
 
 // The parameter of the callback function that you give to <BcSearchbarMain>'s props `pick-by-default` is an array of `Matching` elements
 // and the function returns one `Matching` element (or undefined).
 export type Matching = {
-  closeness: number, // how close this result is to what the user inputted (lower value = better similarity)
-  network: ChainIDs, // the network that this result belongs to
+  closeness: number // how close this result is to what the user inputted (lower value = better similarity)
+  network: ChainIDs // the network that this result belongs to
   type: ResultType // the type of the result
 }
 /* When the user presses Enter, the callback function receives a simplified representation of the suggested results and returns one
@@ -91,22 +96,26 @@ export type Matching = {
    triggers the event `@go` to call your handler with the actual data of the matching that you picked. If you return `undefined` instead
    of a matching, nothing happens (either no result suits you or you want to deactivate Enter).
    You will find futher below a function named `pickHighestPriorityAmongBestMatchings`. It is an example that you can use directly. */
-export interface PickingCallBackFunction { (possibilities : Matching[]) : Matching|undefined }
+export interface PickingCallBackFunction {
+  (possibilities: Matching[]): Matching | undefined
+}
 
 export interface SearchRequest {
-  input: string,
-  networks: ChainIDs[],
-  types: ResultType[],
+  input: string
+  networks: ChainIDs[]
+  types: ResultType[]
   count?: boolean
 }
 export type SingleAPIresult = SearchResult
-export interface SearchAheadAPIresponse extends ApiErrorResponse, InternalPostSearchResponse {}
+export interface SearchAheadAPIresponse
+  extends ApiErrorResponse,
+  InternalPostSearchResponse {}
 
 // in SuggestionRow.vue, you will see that the drop-down where the list of result suggestions appear is organised into 3 rows that display a "name", a "description" and some "low level data", about each result
 export type ResultSuggestionOutput = {
-  name : string,
-  description : string,
-  lowLevelData : string
+  name: string
+  description: string
+  lowLevelData: string
 }
 
 // This type determines different sources that we can retrieve data from, mainly to fill the fields of ResultSuggestionOutput after the API responded
@@ -117,7 +126,7 @@ export enum Indirect {
   APIhash_value,
   CategoryTitle,
   SubCategoryTitle,
-  TypeTitle
+  TypeTitle,
 }
 // The following 3 definitions will be used as parameters of function `t()` of I18n.
 export type TranslatableLitteral = [string, number] // you will have to destructure the parameters with an ellipsis, like so: t(...myTranslatableLitteral)
@@ -128,56 +137,65 @@ const PLURAL = 2 // Any number greater than 1 is good, this is just for I18n to
 export type FillFrom = Indirect | TranslatableLitteral | ''
 
 export interface HowToFillresultSuggestionOutput {
-  name : FillFrom,
-  description : FillFrom,
-  lowLevelData : FillFrom,
+  name: FillFrom
+  description: FillFrom
+  lowLevelData: FillFrom
 }
 
 export interface ResultSuggestion {
-  output: ResultSuggestionOutput,
-  queryParam: string, // Data returned by the API that identifies this very result in the back-end. This is the most important data for callback function '@go' given in the props of the Searchbar component.
-  closeness: number, // How close the suggested result is to the user input (important for graffitis and token names, later for other things if the back-end evolves to find other approximate results).
-  count : number, // How many identical results are found (often 1 but the API can inform us if there is more). This value is NaN when there is at least 1 result but the API did not clarify how many.
-  chainId : ChainIDs, // Network that the result belongs to. If the result exists on all networks, it is `ChainIDs.Any` (so 0).
-  type : ResultType, // Tells what thing(s) this result corresponds to.
+  output: ResultSuggestionOutput
+  queryParam: string // Data returned by the API that identifies this very result in the back-end. This is the most important data for callback function '@go' given in the props of the Searchbar component.
+  closeness: number // How close the suggested result is to the user input (important for graffitis and token names, later for other things if the back-end evolves to find other approximate results).
+  count: number // How many identical results are found (often 1 but the API can inform us if there is more). This value is NaN when there is at least 1 result but the API did not clarify how many.
+  chainId: ChainIDs // Network that the result belongs to. If the result exists on all networks, it is `ChainIDs.Any` (so 0).
+  type: ResultType // Tells what thing(s) this result corresponds to.
   rawResult: SingleAPIresult // Original data given by the API.
 }
 
 export interface ResultSuggestionInternal extends ResultSuggestion {
-  stringifyiedRawResult : string, // Original data given by the API.
-  nameWasUnknown : boolean, // Tells whether the API had the possibility to fill field `name` in `output` but could not.
-  lacksPremiumSubscription : boolean // `true` if the result is not accessible to the user due to account restrictions
+  stringifyiedRawResult: string // Original data given by the API.
+  nameWasUnknown: boolean // Tells whether the API had the possibility to fill field `name` in `output` but could not.
+  lacksPremiumSubscription: boolean // `true` if the result is not accessible to the user due to account restrictions
 }
 
 export interface OrganizedResults {
   networks: {
-    chainId: ChainIDs,
+    chainId: ChainIDs
     types: {
-      type: ResultType,
+      type: ResultType
       suggestions: ResultSuggestionInternal[]
     }[]
   }[]
 }
 
 interface SearchbarPurposeInfoField {
-  searchable: Category[], // List of categories that the bar can search in. The cateogry filter-buttons will appear on the screen in the same order as in this list.
-  unsearchable: ResultType[], // List of types that the bar will not search for.
-  askAPItoCountResults: boolean, // If `true`, the search-bar will ask the API explicitely to count results when what it searches for can be counted (this is told by field `countable` in the TypeInfo record further below). Note that even if not asked, the API can still return counts and batches and we will read this information anyway if so.
-  button: 'search' | 'add', // Utility of the button.
-  placeHolder: string, // I18n path of the hint to display in the input field when it is empty.
-  cellsInSuggestionRows: SuggestionrowCells, // Determines what is shown in each row of the result-suggestion list.
+  searchable: Category[] // List of categories that the bar can search in. The cateogry filter-buttons will appear on the screen in the same order as in this list.
+  unsearchable: ResultType[] // List of types that the bar will not search for.
+  askAPItoCountResults: boolean // If `true`, the search-bar will ask the API explicitely to count results when what it searches for can be counted (this is told by field `countable` in the TypeInfo record further below). Note that even if not asked, the API can still return counts and batches and we will read this information anyway if so.
+  button: 'search' | 'add' // Utility of the button.
+  placeHolder: string // I18n path of the hint to display in the input field when it is empty.
+  cellsInSuggestionRows: SuggestionrowCells // Determines what is shown in each row of the result-suggestion list.
   differentialRequests: boolean // If activated, the bar decreases the workload for the API **in certain scenarii** by asking only for results that it does not know yet (which can happen when the user started a search with filters and activates a new filter, then the bar asks only for results corresponding to the newly selected filter). The downside is that the bar cannot help the user by mentionning the number of filtered-out results at the bottom of the suggestion list.
 }
 // this Record describes the look and behavior of the search-bar according to the value that you pass in its props `:bar-purpose`
-export const SearchbarPurposeInfo: Record<SearchbarPurpose, SearchbarPurposeInfoField> = {
+export const SearchbarPurposeInfo: Record<
+  SearchbarPurpose,
+  SearchbarPurposeInfoField
+> = {
   [SearchbarPurpose.GlobalSearch]: {
-    searchable: [Category.Protocol, Category.Addresses, Category.Tokens, Category.NFTs, Category.Validators], // to display the filter buttons in a different order, write the categories in a different order here
+    searchable: [
+      Category.Protocol,
+      Category.Addresses,
+      Category.Tokens,
+      Category.NFTs,
+      Category.Validators,
+    ], // to display the filter buttons in a different order, write the categories in a different order here
     unsearchable: [],
     askAPItoCountResults: false,
     button: 'search',
     placeHolder: 'search_bar.general_placeholder',
     cellsInSuggestionRows: SuggestionrowCells.NameDescriptionLowlevelCategory,
-    differentialRequests: true
+    differentialRequests: true,
   },
   [SearchbarPurpose.AccountAddition]: {
     searchable: [Category.Addresses],
@@ -185,8 +203,9 @@ export const SearchbarPurposeInfo: Record<SearchbarPurpose, SearchbarPurposeInfo
     askAPItoCountResults: false,
     button: 'add',
     placeHolder: 'search_bar.account_placeholder',
-    cellsInSuggestionRows: SuggestionrowCells.SubcategoryIdentificationDescription,
-    differentialRequests: true
+    cellsInSuggestionRows:
+      SuggestionrowCells.SubcategoryIdentificationDescription,
+    differentialRequests: true,
   },
   [SearchbarPurpose.ValidatorAddition]: {
     searchable: [Category.Validators],
@@ -194,25 +213,41 @@ export const SearchbarPurposeInfo: Record<SearchbarPurpose, SearchbarPurposeInfo
     askAPItoCountResults: false,
     button: 'add',
     placeHolder: 'search_bar.validator_placeholder',
-    cellsInSuggestionRows: SuggestionrowCells.SubcategoryIdentificationDescription,
-    differentialRequests: true
-  }
+    cellsInSuggestionRows:
+      SuggestionrowCells.SubcategoryIdentificationDescription,
+    differentialRequests: true,
+  },
 }
 
 interface CategoryInfoFields {
-  title : TranslatableLitteral,
-  filterLabel : TranslatableLitteral
+  title: TranslatableLitteral
+  filterLabel: TranslatableLitteral
 }
 export const CategoryInfo: Record<Category, CategoryInfoFields> = {
-  [Category.Tokens]: { title: ['common.erc20token', PLURAL], filterLabel: ['common.token', PLURAL] },
-  [Category.NFTs]: { title: ['common.nft', PLURAL], filterLabel: ['common.nft', PLURAL] },
-  [Category.Protocol]: { title: ['common.protocol', SINGULAR], filterLabel: ['common.protocol', SINGULAR] },
-  [Category.Addresses]: { title: ['common.address', PLURAL], filterLabel: ['common.address', PLURAL] },
-  [Category.Validators]: { title: ['common.validator', PLURAL], filterLabel: ['common.validator', PLURAL] }
+  [Category.Tokens]: {
+    title: ['common.erc20token', PLURAL],
+    filterLabel: ['common.token', PLURAL],
+  },
+  [Category.NFTs]: {
+    title: ['common.nft', PLURAL],
+    filterLabel: ['common.nft', PLURAL],
+  },
+  [Category.Protocol]: {
+    title: ['common.protocol', SINGULAR],
+    filterLabel: ['common.protocol', SINGULAR],
+  },
+  [Category.Addresses]: {
+    title: ['common.address', PLURAL],
+    filterLabel: ['common.address', PLURAL],
+  },
+  [Category.Validators]: {
+    title: ['common.validator', PLURAL],
+    filterLabel: ['common.validator', PLURAL],
+  },
 }
 
 interface SubCategoryInfoFields {
-  title : TranslatableLitteral
+  title: TranslatableLitteral
 }
 export const SubCategoryInfo: Record<SubCategory, SubCategoryInfoFields> = {
   [SubCategory.Tokens]: { title: ['common.token', SINGULAR] },
@@ -225,18 +260,18 @@ export const SubCategoryInfo: Record<SubCategory, SubCategoryInfoFields> = {
   [SubCategory.Accounts]: { title: ['common.account', SINGULAR] },
   [SubCategory.EnsOverview]: { title: ['search_bar.ens_overview', SINGULAR] },
   [SubCategory.Graffiti]: { title: ['common.graffiti', SINGULAR] },
-  [SubCategory.Validators]: { title: ['common.validator', SINGULAR] }
+  [SubCategory.Validators]: { title: ['common.validator', SINGULAR] },
 }
 
 interface TypeInfoFields {
-  title: TranslatableLitteral,
-  category: Category,
-  subCategory: SubCategory,
-  priority: number,
-  belongsToAllNetworks: boolean,
-  countSource: Indirect, // if it is possible for the API to find several identical results of this type and count them, then this field tells us what field in the response contains the count (it can be an array, in this case we will read the length property)
-  queryParamField : Indirect, // name of the field in singleAPIresult whose data identifies precisely a result in the back-end
-  howToFillresultSuggestionOutput : HowToFillresultSuggestionOutput // will be used at execution time to know what data we must copy into each ResultSuggestion.output
+  title: TranslatableLitteral
+  category: Category
+  subCategory: SubCategory
+  priority: number
+  belongsToAllNetworks: boolean
+  countSource: Indirect // if it is possible for the API to find several identical results of this type and count them, then this field tells us what field in the response contains the count (it can be an array, in this case we will read the length property)
+  queryParamField: Indirect // name of the field in singleAPIresult whose data identifies precisely a result in the back-end
+  howToFillresultSuggestionOutput: HowToFillresultSuggestionOutput // will be used at execution time to know what data we must copy into each ResultSuggestion.output
 }
 
 export const TypeInfo: Record<ResultType, TypeInfoFields> = {
@@ -248,7 +283,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: true,
     countSource: Indirect.None,
     queryParamField: Indirect.APIstr_value, // this tells us that field `str_value` in singleAPIresult identifies precisely a result of type ResultType.Tokens when communicating about it with the back-end
-    howToFillresultSuggestionOutput: { name: Indirect.APIstr_value, description: '', lowLevelData: Indirect.APIhash_value } // this tells us that field `name` in ResultSuggestionOutput will be filled with the content of `str_value` in singleAPIresult, and `lowLevelData` will be filled with `hash_value`
+    howToFillresultSuggestionOutput: {
+      name: Indirect.APIstr_value,
+      description: '',
+      lowLevelData: Indirect.APIhash_value,
+    }, // this tells us that field `name` in ResultSuggestionOutput will be filled with the content of `str_value` in singleAPIresult, and `lowLevelData` will be filled with `hash_value`
   },
   [ResultType.NFTs]: {
     title: ['common.nft_as_token', SINGULAR],
@@ -258,7 +297,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: true,
     countSource: Indirect.None,
     queryParamField: Indirect.APIstr_value,
-    howToFillresultSuggestionOutput: { name: Indirect.APIstr_value, description: '', lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.APIstr_value,
+      description: '',
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.Epochs]: {
     title: ['common.epoch', SINGULAR],
@@ -268,7 +311,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.None,
     queryParamField: Indirect.APInum_value,
-    howToFillresultSuggestionOutput: { name: Indirect.TypeTitle, description: Indirect.APInum_value, lowLevelData: '' }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.TypeTitle,
+      description: Indirect.APInum_value,
+      lowLevelData: '',
+    },
   },
   [ResultType.Slots]: {
     title: ['common.slot', SINGULAR],
@@ -278,7 +325,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.None,
     queryParamField: Indirect.APInum_value,
-    howToFillresultSuggestionOutput: { name: Indirect.TypeTitle, description: Indirect.APInum_value, lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.TypeTitle,
+      description: Indirect.APInum_value,
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.Blocks]: {
     title: ['common.block', SINGULAR],
@@ -288,7 +339,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.None,
     queryParamField: Indirect.APInum_value,
-    howToFillresultSuggestionOutput: { name: Indirect.TypeTitle, description: Indirect.APInum_value, lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.TypeTitle,
+      description: Indirect.APInum_value,
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.BlockRoots]: {
     title: ['common.block_root', SINGULAR],
@@ -298,7 +353,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.None,
     queryParamField: Indirect.APInum_value,
-    howToFillresultSuggestionOutput: { name: Indirect.TypeTitle, description: Indirect.APInum_value, lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.TypeTitle,
+      description: Indirect.APInum_value,
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.StateRoots]: {
     title: ['common.state_root', SINGULAR],
@@ -308,7 +367,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.None,
     queryParamField: Indirect.APInum_value,
-    howToFillresultSuggestionOutput: { name: Indirect.TypeTitle, description: Indirect.APInum_value, lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.TypeTitle,
+      description: Indirect.APInum_value,
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.Transactions]: {
     title: ['common.transaction', SINGULAR],
@@ -318,7 +381,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.None,
     queryParamField: Indirect.APIhash_value,
-    howToFillresultSuggestionOutput: { name: Indirect.TypeTitle, description: '', lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.TypeTitle,
+      description: '',
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.TransactionBatches]: {
     title: ['common.tx_batch', SINGULAR],
@@ -328,7 +395,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.None,
     queryParamField: Indirect.APInum_value,
-    howToFillresultSuggestionOutput: { name: Indirect.TypeTitle, description: Indirect.APInum_value, lowLevelData: '' }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.TypeTitle,
+      description: Indirect.APInum_value,
+      lowLevelData: '',
+    },
   },
   [ResultType.StateBatches]: {
     title: ['common.state_batch', SINGULAR],
@@ -338,7 +409,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.None,
     queryParamField: Indirect.APInum_value,
-    howToFillresultSuggestionOutput: { name: Indirect.TypeTitle, description: Indirect.APInum_value, lowLevelData: '' }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.TypeTitle,
+      description: Indirect.APInum_value,
+      lowLevelData: '',
+    },
   },
   [ResultType.Contracts]: {
     title: ['common.contract', SINGULAR],
@@ -348,7 +423,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: true,
     countSource: Indirect.None,
     queryParamField: Indirect.APIhash_value,
-    howToFillresultSuggestionOutput: { name: Indirect.APIstr_value, description: '', lowLevelData: Indirect.APIhash_value } // str_value is the name of the contract (for ex: "uniswap") but if the API gives '' we will replace it with a generic name (the title of this type: "Contract")
+    howToFillresultSuggestionOutput: {
+      name: Indirect.APIstr_value,
+      description: '',
+      lowLevelData: Indirect.APIhash_value,
+    }, // str_value is the name of the contract (for ex: "uniswap") but if the API gives '' we will replace it with a generic name (the title of this type: "Contract")
   },
   [ResultType.Accounts]: {
     title: ['common.account', SINGULAR],
@@ -358,7 +437,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: true,
     countSource: Indirect.None,
     queryParamField: Indirect.APIhash_value,
-    howToFillresultSuggestionOutput: { name: Indirect.TypeTitle, description: '', lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.TypeTitle,
+      description: '',
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.EnsAddresses]: {
     title: ['common.ens_address', SINGULAR],
@@ -368,7 +451,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: true,
     countSource: Indirect.None,
     queryParamField: Indirect.APIstr_value,
-    howToFillresultSuggestionOutput: { name: Indirect.APIstr_value, description: '', lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.APIstr_value,
+      description: '',
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.EnsOverview]: {
     title: ['common.overview_of_ens', SINGULAR],
@@ -378,7 +465,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: true,
     countSource: Indirect.None,
     queryParamField: Indirect.APIstr_value,
-    howToFillresultSuggestionOutput: { name: Indirect.SubCategoryTitle, description: Indirect.APIstr_value, lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.SubCategoryTitle,
+      description: Indirect.APIstr_value,
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.Graffiti]: {
     title: ['common.graffiti', SINGULAR],
@@ -388,7 +479,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.None,
     queryParamField: Indirect.APIstr_value,
-    howToFillresultSuggestionOutput: { name: Indirect.TypeTitle, description: ['search_bar.blocks_with', 0], lowLevelData: Indirect.APIstr_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.TypeTitle,
+      description: ['search_bar.blocks_with', 0],
+      lowLevelData: Indirect.APIstr_value,
+    },
   },
   [ResultType.ValidatorsByIndex]: {
     title: ['search_bar.validator_by_index', 0],
@@ -398,7 +493,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.None,
     queryParamField: Indirect.APInum_value,
-    howToFillresultSuggestionOutput: { name: Indirect.SubCategoryTitle, description: Indirect.APInum_value, lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.SubCategoryTitle,
+      description: Indirect.APInum_value,
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.ValidatorsByPubkey]: {
     title: ['search_bar.validator_by_public_key', 0],
@@ -408,7 +507,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.None,
     queryParamField: Indirect.APIhash_value,
-    howToFillresultSuggestionOutput: { name: Indirect.SubCategoryTitle, description: Indirect.APInum_value, lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.SubCategoryTitle,
+      description: Indirect.APInum_value,
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.ValidatorsByDepositAddress]: {
     title: ['search_bar.validator_by_deposit_address', 0],
@@ -418,7 +521,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.APInum_value,
     queryParamField: Indirect.APIhash_value,
-    howToFillresultSuggestionOutput: { name: Indirect.SubCategoryTitle, description: ['search_bar.deposited_by', 0], lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.SubCategoryTitle,
+      description: ['search_bar.deposited_by', 0],
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.ValidatorsByDepositEnsName]: {
     title: ['search_bar.validator_by_deposit_ens', 0],
@@ -428,7 +535,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.APInum_value,
     queryParamField: Indirect.APIstr_value,
-    howToFillresultSuggestionOutput: { name: Indirect.SubCategoryTitle, description: ['search_bar.deposited_by', 0], lowLevelData: Indirect.APIstr_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.SubCategoryTitle,
+      description: ['search_bar.deposited_by', 0],
+      lowLevelData: Indirect.APIstr_value,
+    },
   },
   [ResultType.ValidatorsByWithdrawalCredential]: {
     title: ['search_bar.validator_by_credential', 0],
@@ -438,7 +549,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.APInum_value,
     queryParamField: Indirect.APIhash_value,
-    howToFillresultSuggestionOutput: { name: Indirect.SubCategoryTitle, description: ['search_bar.credential', SINGULAR], lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.SubCategoryTitle,
+      description: ['search_bar.credential', SINGULAR],
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.ValidatorsByWithdrawalAddress]: {
     title: ['search_bar.validator_by_withdrawal_address', 0],
@@ -448,7 +563,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.APInum_value,
     queryParamField: Indirect.APIhash_value,
-    howToFillresultSuggestionOutput: { name: Indirect.SubCategoryTitle, description: ['search_bar.withdrawn_to', 0], lowLevelData: Indirect.APIhash_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.SubCategoryTitle,
+      description: ['search_bar.withdrawn_to', 0],
+      lowLevelData: Indirect.APIhash_value,
+    },
   },
   [ResultType.ValidatorsByWithdrawalEnsName]: {
     title: ['search_bar.validator_by_withdrawal_ens', 0],
@@ -458,7 +577,11 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.APInum_value,
     queryParamField: Indirect.APIstr_value,
-    howToFillresultSuggestionOutput: { name: Indirect.SubCategoryTitle, description: ['search_bar.withdrawn_to', 0], lowLevelData: Indirect.APIstr_value }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.SubCategoryTitle,
+      description: ['search_bar.withdrawn_to', 0],
+      lowLevelData: Indirect.APIstr_value,
+    },
   },
   [ResultType.ValidatorsByGraffiti]: {
     title: ['search_bar.validator_by_graffiti', 0],
@@ -468,8 +591,12 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
     belongsToAllNetworks: false,
     countSource: Indirect.APInum_value,
     queryParamField: Indirect.APIstr_value,
-    howToFillresultSuggestionOutput: { name: Indirect.SubCategoryTitle, description: ['search_bar.block_graffiti', 0], lowLevelData: Indirect.APIstr_value }
-  }
+    howToFillresultSuggestionOutput: {
+      name: Indirect.SubCategoryTitle,
+      description: ['search_bar.block_graffiti', 0],
+      lowLevelData: Indirect.APIstr_value,
+    },
+  },
   /* [ResultType.ValidatorsByName]: {
     title: ['search_bar.validator_by_name', 0],
     category: Category.Validators,
@@ -482,25 +609,34 @@ export const TypeInfo: Record<ResultType, TypeInfoFields> = {
   } */
 }
 
-export interface PremiumRowCallBackFunction { (result: ResultSuggestion) : boolean }
+export interface PremiumRowCallBackFunction {
+  (result: ResultSuggestion): boolean
+}
 
-export interface ExposedSearchbarMethods { // for internal use
-  hideResult : (whichOne : ResultSuggestion) => void,
-  closeDropdown : () => void
-  empty : () => void
+export interface ExposedSearchbarMethods {
+  // for internal use
+  hideResult: (whichOne: ResultSuggestion) => void
+  closeDropdown: () => void
+  empty: () => void
 }
 export interface SearchBar // your ref to the search-bar component must be of this type
-       extends ComponentPublicInstance, ExposedSearchbarMethods {}
+  extends ComponentPublicInstance,
+  ExposedSearchbarMethods {}
 
 export type CategoryFilter = Map<Category, boolean> // for internal use
 export type NetworkFilter = Map<ChainIDs, boolean> // for internal use
 export type SearchbarDropdownLayout = 'narrow-dropdown' | 'large-dropdown' // for internal use (do not change the litterals, they are used as class names)
 
-export function wasOutputDataGivenByTheAPI (type : ResultType, resultSuggestionOutputField : keyof HowToFillresultSuggestionOutput) : boolean {
-  switch (TypeInfo[type].howToFillresultSuggestionOutput[resultSuggestionOutputField]) {
-    case Indirect.APIstr_value :
-    case Indirect.APInum_value :
-    case Indirect.APIhash_value :
+export function wasOutputDataGivenByTheAPI(
+  type: ResultType,
+  resultSuggestionOutputField: keyof HowToFillresultSuggestionOutput,
+): boolean {
+  switch (
+    TypeInfo[type].howToFillresultSuggestionOutput[resultSuggestionOutputField]
+  ) {
+    case Indirect.APIstr_value:
+    case Indirect.APInum_value:
+    case Indirect.APIhash_value:
       return true
     default:
       return false
@@ -510,47 +646,70 @@ export function wasOutputDataGivenByTheAPI (type : ResultType, resultSuggestionO
 /**
  * @returns Data read from the API response. `undefined` means that something is wrong.
  */
-export function realizeData (apiResponseElement: SingleAPIresult, dataSource: FillFrom, t: ComposerTranslation) : any {
+export function realizeData(
+  apiResponseElement: SingleAPIresult,
+  dataSource: FillFrom,
+  t: ComposerTranslation,
+): any {
   const type = apiResponseElement.type as ResultType
-  let sourceField : keyof SingleAPIresult
+  let sourceField: keyof SingleAPIresult
 
   switch (dataSource) {
-    case Indirect.None : return ''
-    case Indirect.APIstr_value : sourceField = 'str_value'; break
-    case Indirect.APInum_value : sourceField = 'num_value'; break
-    case Indirect.APIhash_value : sourceField = 'hash_value'; break
-    case Indirect.CategoryTitle : return t(...CategoryInfo[TypeInfo[type].category].title)
-    case Indirect.SubCategoryTitle : return t(...SubCategoryInfo[TypeInfo[type].subCategory].title)
-    case Indirect.TypeTitle : return t(...TypeInfo[type].title)
-    default :
-      return (dataSource === '') ? '' : t(...dataSource)
+    case Indirect.None:
+      return ''
+    case Indirect.APIstr_value:
+      sourceField = 'str_value'
+      break
+    case Indirect.APInum_value:
+      sourceField = 'num_value'
+      break
+    case Indirect.APIhash_value:
+      sourceField = 'hash_value'
+      break
+    case Indirect.CategoryTitle:
+      return t(...CategoryInfo[TypeInfo[type].category].title)
+    case Indirect.SubCategoryTitle:
+      return t(...SubCategoryInfo[TypeInfo[type].subCategory].title)
+    case Indirect.TypeTitle:
+      return t(...TypeInfo[type].title)
+    default:
+      return dataSource === '' ? '' : t(...dataSource)
   }
 
   return apiResponseElement[sourceField]
 }
 
-const listOfResultTypesAsDeclared : ResultType[] = []
-const listOfResultTypesPrioritized : ResultType[] = []
+const listOfResultTypesAsDeclared: ResultType[] = []
+const listOfResultTypesPrioritized: ResultType[] = []
 // Returns all litterals in `ResultType` used to communicate with the API.
 // This function is fast on average: it computes the list only at the first call. Subsequent calls return the already computed list.
-export function getListOfResultTypes (sortByPriority : boolean) : ResultType[] {
+export function getListOfResultTypes(sortByPriority: boolean): ResultType[] {
   if (listOfResultTypesAsDeclared.length === 0) {
     for (const type in ResultType) {
       const ty = type as keyof typeof ResultType
       listOfResultTypesAsDeclared.push(ResultType[ty])
       listOfResultTypesPrioritized.push(ResultType[ty])
     }
-    listOfResultTypesPrioritized.sort((a, b) => { return TypeInfo[a].priority - TypeInfo[b].priority })
+    listOfResultTypesPrioritized.sort(
+      (a, b) => TypeInfo[a].priority - TypeInfo[b].priority,
+    )
   }
-  return sortByPriority ? listOfResultTypesPrioritized : listOfResultTypesAsDeclared
+  return sortByPriority
+    ? listOfResultTypesPrioritized
+    : listOfResultTypesAsDeclared
 }
 
-const searchableTypesPerCategory : Record<Category, ResultType[]> = {} as Record<Category, ResultType[]>
+const searchableTypesPerCategory: Record<Category, ResultType[]> = {} as Record<
+  Category,
+  ResultType[]
+>
 /**
  * @returns the list of types belonging to the given category.
  * This function is fast on average: it computes the lists only at the first call. Subsequent calls return the already computed lists.
  */
-export function getListOfResultTypesInCategory (category: Category) : ResultType[] {
+export function getListOfResultTypesInCategory(
+  category: Category,
+): ResultType[] {
   if (!(category in searchableTypesPerCategory)) {
     for (const t of getListOfResultTypes(true)) {
       const c = TypeInfo[t].category
@@ -574,7 +733,9 @@ export function getListOfResultTypesInCategory (category: Category) : ResultType
  * @param possibilities here the function receives the list of matchings (representing result suggestions)
  * @returns the matching fulfilling the criteria explained above
  */
-export function pickHighestPriorityAmongBestMatchings (possibilities : Matching[]) : Matching|undefined {
+export function pickHighestPriorityAmongBestMatchings(
+  possibilities: Matching[],
+): Matching | undefined {
   let bestMatchWithHigherPriority = possibilities[0]
   for (const possibility of possibilities) {
     if (possibility.closeness < bestMatchWithHigherPriority.closeness) {
@@ -587,6 +748,8 @@ export function pickHighestPriorityAmongBestMatchings (possibilities : Matching[
 /**
  * @returns the I18n path of a TranslatableLitteral that you can give to t(). Useful to display the litteral in singular or in plural with respect to your needs.
  */
-export function getI18nPathOfTranslatableLitteral (litteral: TranslatableLitteral) : string {
+export function getI18nPathOfTranslatableLitteral(
+  litteral: TranslatableLitteral,
+): string {
   return litteral[0] as string
 }
diff --git a/frontend/types/settings.ts b/frontend/types/settings.ts
index 01348db7b..0f9fc47ae 100644
--- a/frontend/types/settings.ts
+++ b/frontend/types/settings.ts
@@ -5,29 +5,29 @@ export type AgeFormat = 'absolute' | 'relative'
 export type CookieValue = string | null | undefined
 
 interface SettingsGetter {
-  <T>(value?: string): T;
+  <T>(value?: string): T
 }
 
 interface SettingsSetter {
-  <T>(value?: T): string;
+  <T>(value?: T): string
 }
 
 type SettingsConfig = {
-  default: unknown,
-  parseValue?: SettingsGetter,
+  default: unknown
+  parseValue?: SettingsGetter
   valueToString?: SettingsSetter
 }
 
 const parseValueBoolean = (value: string) => value === 'true'
 const valueToStringBoolean = (value: boolean) => value ? 'true' : 'false'
 
-export const SettingDefaults:Record<GlobalSetting, SettingsConfig> = {
+export const SettingDefaults: Record<GlobalSetting, SettingsConfig> = {
   'age-format': {
-    default: 'absolute'
+    default: 'absolute',
   },
-  rpl: {
+  'rpl': {
     parseValue: parseValueBoolean as SettingsGetter,
     valueToString: valueToStringBoolean as SettingsSetter,
-    default: true
-  }
+    default: true,
+  },
 }
diff --git a/frontend/types/stripe.ts b/frontend/types/stripe.ts
index 7cce7fdb2..dfdd1086e 100644
--- a/frontend/types/stripe.ts
+++ b/frontend/types/stripe.ts
@@ -1,6 +1,6 @@
-export interface StripeProvider{
-  stripeInit: (stripePulicKey: string) => Promise<void>,
-  stripeCustomerPortal: () => Promise<void>,
-  stripePurchase: (priceId: string, amount: number) => Promise<void>,
+export interface StripeProvider {
+  stripeInit: (stripePulicKey: string) => Promise<void>
+  stripeCustomerPortal: () => Promise<void>
+  stripePurchase: (priceId: string, amount: number) => Promise<void>
   isStripeDisabled: Ref<boolean>
 }
diff --git a/frontend/types/swipe.ts b/frontend/types/swipe.ts
index 4ad88392f..bf8787412 100644
--- a/frontend/types/swipe.ts
+++ b/frontend/types/swipe.ts
@@ -1,6 +1,11 @@
 export type SwipeDirection = 'left' | 'top' | 'right' | 'bottom' | 'all'
-export type SwipeCallback = (event: TouchEvent, directions: SwipeDirection[]) => undefined | boolean; // if callback returns true we keep the element at it's position (example: dialog hides where you left it and not pops back)
+// if callback returns true we keep the element at it's position
+// (example: dialog hides where you left it and not pops back)
+export type SwipeCallback = (
+  event: TouchEvent,
+  directions: SwipeDirection[],
+) => undefined | boolean
 export type SwipeOptions = {
-    directional_threshold?: number; // Pixels offset to trigger swipe
-    directions?: SwipeDirection[];
-};
+  directional_threshold?: number // Pixels offset to trigger swipe
+  directions?: SwipeDirection[]
+}
diff --git a/frontend/types/tag.ts b/frontend/types/tag.ts
index 54a0e791a..99b297577 100644
--- a/frontend/types/tag.ts
+++ b/frontend/types/tag.ts
@@ -1,4 +1,11 @@
-export const TagColors = ['success', 'failed', 'orphaned', 'partial', 'light', 'dark'] as const
-export type TagColor = typeof TagColors[number]
+export const TagColors = [
+  'success',
+  'failed',
+  'orphaned',
+  'partial',
+  'light',
+  'dark',
+] as const
+export type TagColor = (typeof TagColors)[number]
 
 export type TagSize = 'default' | 'compact' | 'circle'
diff --git a/frontend/types/toast.ts b/frontend/types/toast.ts
index df2d74560..742725ea7 100644
--- a/frontend/types/toast.ts
+++ b/frontend/types/toast.ts
@@ -1,12 +1,12 @@
 export type ToastData = {
-  summary: string,
-  detail?: string,
+  summary: string
+  detail?: string
   group?: string
 }
-type ToastFunction = (data: ToastData)=>void
+type ToastFunction = (data: ToastData) => void
 
-export interface BcToastProvider{
-  showError:ToastFunction,
-  showInfo: ToastFunction,
+export interface BcToastProvider {
+  showError: ToastFunction
+  showInfo: ToastFunction
   showSuccess: ToastFunction
 }
diff --git a/frontend/types/user.ts b/frontend/types/user.ts
index 2ae1d9386..44d69334f 100644
--- a/frontend/types/user.ts
+++ b/frontend/types/user.ts
@@ -1,4 +1,4 @@
 export type LoginResponse = {
-    access_token: string;
-    refresh_token: string;
+  access_token: string
+  refresh_token: string
 }
diff --git a/frontend/types/validator/index.ts b/frontend/types/validator/index.ts
index 6e4e703fc..2848e23f3 100644
--- a/frontend/types/validator/index.ts
+++ b/frontend/types/validator/index.ts
@@ -1,16 +1,26 @@
-import type { VDBManageValidatorsTableRow, VDBSummaryValidator, VDBSummaryValidatorsData } from '../api/validator_dashboard'
+import type {
+  VDBManageValidatorsTableRow,
+  VDBSummaryValidator,
+  VDBSummaryValidatorsData,
+} from '../api/validator_dashboard'
 
 export type ValidatorStatus = VDBManageValidatorsTableRow['status']
 
-export type ValidatorSubsetCategory = VDBSummaryValidatorsData['category'] | 'all' | 'exited_withdrawing' | 'exited_withdrawn' | 'slashed_withdrawing' | 'slashed_withdrawn'
+export type ValidatorSubsetCategory =
+  | VDBSummaryValidatorsData['category']
+  | 'all'
+  | 'exited_withdrawing'
+  | 'exited_withdrawn'
+  | 'slashed_withdrawing'
+  | 'slashed_withdrawn'
 
 export type ValidatorSubset = {
-  category: ValidatorSubsetCategory,
+  category: ValidatorSubsetCategory
   validators: VDBSummaryValidator[]
 }
 export type ValidatorSummaryIconRowKey = 'online' | 'offline' | 'exited'
 
 export type SummaryValidatorsIconRowInfo = {
-  count: number,
+  count: number
   key: ValidatorSummaryIconRowKey
 }
diff --git a/frontend/types/value.ts b/frontend/types/value.ts
index bef61e538..0652af516 100644
--- a/frontend/types/value.ts
+++ b/frontend/types/value.ts
@@ -8,7 +8,7 @@ export type ValueConvertOptions = {
   fixedDecimalCount?: number // can override the usual settings, but can't go over 2 for fiat
   maxDecimalCount?: number // max decimal count
   minDecimalCount?: number // min decimal count
-  minUnit?: CryptoUnits // if output should only be in higher units (for example GWEI -> then it will never go down to WEI)
+  minUnit?: CryptoUnits // if output should only be in higher units (e.g. GWEI -> then it will never go down to WEI)
   minUnitDecimalCount?: number // decimal count to check for value while unit conversion - defaults to max decimal count
   fixedUnit?: CryptoUnits // fixed output unit - overrides min unit
   addPlus?: boolean // add + sign if value is positive
@@ -21,9 +21,17 @@ export type ExtendedLabel = {
   fullLabel?: string
 }
 
-export const TimeFrames = ['last_24h', 'last_7d', 'last_30d', 'all_time'] as const
-export type TimeFrame = typeof TimeFrames[number]
+export const TimeFrames = [
+  'last_24h',
+  'last_7d',
+  'last_30d',
+  'all_time',
+] as const
+export type TimeFrame = (typeof TimeFrames)[number]
 
-export type WeiToValue = (wei?: string | BigNumber, options?: ValueConvertOptions) => ExtendedLabel
+export type WeiToValue = (
+  wei?: string | BigNumber,
+  options?: ValueConvertOptions,
+) => ExtendedLabel
 
 export type CompareResult = 'higher' | 'equal' | 'lower'
diff --git a/frontend/types/window.ts b/frontend/types/window.ts
index 64acf8731..5070825c8 100644
--- a/frontend/types/window.ts
+++ b/frontend/types/window.ts
@@ -1,4 +1,4 @@
 export type WindowSize = {
-  width: Ref<number>,
-  height: Ref<number>,
+  width: Ref<number>
+  height: Ref<number>
 }
diff --git a/frontend/utils/bigMath.ts b/frontend/utils/bigMath.ts
index 888bf77ce..21d21677c 100644
--- a/frontend/utils/bigMath.ts
+++ b/frontend/utils/bigMath.ts
@@ -12,7 +12,7 @@ const split = (num: number) => {
   const factor = getFactor(split[1])
   return {
     factor,
-    combined: split.join('')
+    combined: split.join(''),
   }
 }
 
@@ -32,8 +32,11 @@ export const bigDiv = (big: BigNumber, num: number): BigNumber => {
   return big.mul(factor).div(combined)
 }
 
-export const convertSum = (...values:string[]):BigNumber | undefined => {
-  return values?.reduce((sum, newValue) => sum.add(BigNumber.from(newValue)), BigNumber.from('0'))
+export const convertSum = (...values: string[]): BigNumber | undefined => {
+  return values?.reduce(
+    (sum, newValue) => sum.add(BigNumber.from(newValue)),
+    BigNumber.from('0'),
+  )
 }
 
 export const totalElCl = (value: ClElValue<string>): BigNumber | undefined => {
@@ -51,7 +54,9 @@ export const subWei = (total: string, value: string): BigNumber | undefined => {
   return BigNumber.from(total).sub(BigNumber.from(value ?? '0'))
 }
 
-export const totalElClNumbers = (value: ClElValue<number>): number | undefined => {
+export const totalElClNumbers = (
+  value: ClElValue<number>,
+): number | undefined => {
   if (!value) {
     return
   }
diff --git a/frontend/utils/colors.ts b/frontend/utils/colors.ts
index 4fb66270e..14b9f8b9c 100644
--- a/frontend/utils/colors.ts
+++ b/frontend/utils/colors.ts
@@ -1,43 +1,108 @@
-export function getSummaryChartGroupColors (theme: string) {
-  const colorsLight = ['#ffaa31', '#7db5ec', '#b2df27', '#5d78dc', '#ffdb58', '#f067e9', '#57bd64', '#a448c0', '#dc2a7f', '#e6beff', '#87ceeb', '#438d61', '#e7416a', '#6be4d8', '#fabebe', '#90d9a5', '#ff6a00', '#ffbe7c', '#bcb997', '#deb244', '#dda0dd', '#fa8072', '#d2b48c', '#6b8e23', '#0e8686', '#9a6324', '#932929', '#808000', '#30308e', '#708090']
-  const colorsDark = ['#ffaa31', '#7db5ec', '#c3f529', '#5d78dc', '#ffdb58', '#f067e9', '#57bd64', '#a448c0', '#dc2a7f', '#e6beff', '#87ceeb', '#438d61', '#e7416a', '#6be4d8', '#fabebe', '#aaffc3', '#ff6a00', '#ffd8b1', '#fffac8', '#deb244', '#dda0dd', '#fa8072', '#d2b48c', '#6b8e23', '#0e8686', '#9a6324', '#932929', '#808000', '#30308e', '#708090']
+export function getSummaryChartGroupColors(theme: string) {
+  const colorsLight = [
+    '#ffaa31',
+    '#7db5ec',
+    '#b2df27',
+    '#5d78dc',
+    '#ffdb58',
+    '#f067e9',
+    '#57bd64',
+    '#a448c0',
+    '#dc2a7f',
+    '#e6beff',
+    '#87ceeb',
+    '#438d61',
+    '#e7416a',
+    '#6be4d8',
+    '#fabebe',
+    '#90d9a5',
+    '#ff6a00',
+    '#ffbe7c',
+    '#bcb997',
+    '#deb244',
+    '#dda0dd',
+    '#fa8072',
+    '#d2b48c',
+    '#6b8e23',
+    '#0e8686',
+    '#9a6324',
+    '#932929',
+    '#808000',
+    '#30308e',
+    '#708090',
+  ]
+  const colorsDark = [
+    '#ffaa31',
+    '#7db5ec',
+    '#c3f529',
+    '#5d78dc',
+    '#ffdb58',
+    '#f067e9',
+    '#57bd64',
+    '#a448c0',
+    '#dc2a7f',
+    '#e6beff',
+    '#87ceeb',
+    '#438d61',
+    '#e7416a',
+    '#6be4d8',
+    '#fabebe',
+    '#aaffc3',
+    '#ff6a00',
+    '#ffd8b1',
+    '#fffac8',
+    '#deb244',
+    '#dda0dd',
+    '#fa8072',
+    '#d2b48c',
+    '#6b8e23',
+    '#0e8686',
+    '#9a6324',
+    '#932929',
+    '#808000',
+    '#30308e',
+    '#708090',
+  ]
 
   return theme === 'light' ? colorsLight : colorsDark
 }
 
-export function getChartTextColor (theme: string) {
+export function getChartTextColor(theme: string) {
   const styles = window.getComputedStyle(document.documentElement)
 
   if (theme === 'light') {
     return styles.getPropertyValue('--light-black')
-  } else {
+  }
+  else {
     return styles.getPropertyValue('--light-grey')
   }
 }
 
-export function getChartTooltipBackgroundColor (theme: string) {
+export function getChartTooltipBackgroundColor(theme: string) {
   const styles = window.getComputedStyle(document.documentElement)
 
   if (theme === 'light') {
     return styles.getPropertyValue('--light-grey-3')
-  } else {
+  }
+  else {
     return styles.getPropertyValue('--dark-grey')
   }
 }
 
-export function getRewardsChartLineColor (theme: string) {
+export function getRewardsChartLineColor(theme: string) {
   const styles = window.getComputedStyle(document.documentElement)
 
   if (theme === 'light') {
     return styles.getPropertyValue('--light-grey-3')
-  } else {
+  }
+  else {
     return styles.getPropertyValue('--dark-grey')
   }
 }
 
-export function getRewardChartColors () {
+export function getRewardChartColors() {
   return {
     el: '#ffaa31',
-    cl: '#7DB5EC'
+    cl: '#7DB5EC',
   }
 }
diff --git a/frontend/utils/currency.ts b/frontend/utils/currency.ts
index f1fb7e778..f8f2a3ca9 100644
--- a/frontend/utils/currency.ts
+++ b/frontend/utils/currency.ts
@@ -1,7 +1,15 @@
-import { FiatCurrencies, type FiatCurrency, CryptoCurrencies, type CryptoCurrency, type Currency } from '~/types/currencies'
+import {
+  FiatCurrencies,
+  type FiatCurrency,
+  CryptoCurrencies,
+  type CryptoCurrency,
+  type Currency,
+} from '~/types/currencies'
 
-const isFiat = (value?:Currency) => !!value && FiatCurrencies.includes(value as FiatCurrency)
-const isCrypto = (value?:Currency) => !!value && CryptoCurrencies.includes(value as CryptoCurrency)
-const isNative = (value?:Currency) => value === 'NAT'
+const isFiat = (value?: Currency) =>
+  !!value && FiatCurrencies.includes(value as FiatCurrency)
+const isCrypto = (value?: Currency) =>
+  !!value && CryptoCurrencies.includes(value as CryptoCurrency)
+const isNative = (value?: Currency) => value === 'NAT'
 
 export { isFiat, isCrypto, isNative }
diff --git a/frontend/utils/dashboard/group.ts b/frontend/utils/dashboard/group.ts
index 3ee3dff39..210605c62 100644
--- a/frontend/utils/dashboard/group.ts
+++ b/frontend/utils/dashboard/group.ts
@@ -1,14 +1,23 @@
 import type { ComposerTranslation } from 'vue-i18n'
 import type { VDBOverviewGroup } from '~/types/api/validator_dashboard'
-import { DAHSHBOARDS_ALL_GROUPS_ID, DAHSHBOARDS_NEXT_EPOCH_ID } from '~/types/dashboard'
+import {
+  DAHSHBOARDS_ALL_GROUPS_ID,
+  DAHSHBOARDS_NEXT_EPOCH_ID,
+} from '~/types/dashboard'
 
-export function getGroupLabel (t:ComposerTranslation, groupId?: number, groups?: VDBOverviewGroup[], allGroupLabel?: string):string {
+export function getGroupLabel(
+  t: ComposerTranslation,
+  groupId?: number,
+  groups?: VDBOverviewGroup[],
+  allGroupLabel?: string,
+): string {
   if (groupId === undefined) {
     return ''
   }
   if (groupId === DAHSHBOARDS_ALL_GROUPS_ID) {
     return allGroupLabel ?? t('dashboard.validator.summary.total_group_name')
-  } else if (groupId === DAHSHBOARDS_NEXT_EPOCH_ID) {
+  }
+  else if (groupId === DAHSHBOARDS_NEXT_EPOCH_ID) {
     return '-'
   }
   const group = groups?.find(g => g.id === groupId)
diff --git a/frontend/utils/dashboard/key.ts b/frontend/utils/dashboard/key.ts
index a82cad83c..5b05bd92b 100644
--- a/frontend/utils/dashboard/key.ts
+++ b/frontend/utils/dashboard/key.ts
@@ -1,4 +1,4 @@
-export function isPublicDashboardKey (value?: string): boolean {
+export function isPublicDashboardKey(value?: string): boolean {
   if (!value) {
     return true
   }
@@ -7,6 +7,6 @@ export function isPublicDashboardKey (value?: string): boolean {
   return isNaN(id)
 }
 
-export function isSharedKey (value?: string): boolean {
+export function isSharedKey(value?: string): boolean {
   return !!value?.startsWith('v-')
 }
diff --git a/frontend/utils/dashboard/table.ts b/frontend/utils/dashboard/table.ts
index ad2cb4c60..97afac0a0 100644
--- a/frontend/utils/dashboard/table.ts
+++ b/frontend/utils/dashboard/table.ts
@@ -1,5 +1,8 @@
 import type { ValueConvertOptions } from '~/types/value'
 
 export const formatRewardValueOption: ValueConvertOptions = {
-  addPlus: true, maxDecimalCount: 6, minUnit: 'MAIN', minDecimalCount: 0
+  addPlus: true,
+  maxDecimalCount: 6,
+  minUnit: 'MAIN',
+  minDecimalCount: 0,
 }
diff --git a/frontend/utils/dashboard/validator.ts b/frontend/utils/dashboard/validator.ts
index f98b909e1..474793861 100644
--- a/frontend/utils/dashboard/validator.ts
+++ b/frontend/utils/dashboard/validator.ts
@@ -1,43 +1,67 @@
 import type { ValidatorHistoryDuties } from '~/types/api/common'
 import type { VDBSummaryValidator } from '~/types/api/validator_dashboard'
-import type { ValidatorSubset, ValidatorSubsetCategory } from '~/types/validator'
+import type {
+  ValidatorSubset,
+  ValidatorSubsetCategory,
+} from '~/types/validator'
 
-export function totalDutyRewards (duties?: ValidatorHistoryDuties) {
+export function totalDutyRewards(duties?: ValidatorHistoryDuties) {
   if (!duties) {
     return
   }
 
-  const values: string[] = [duties.attestation_head?.income, duties.attestation_source?.income, duties.attestation_target?.income, duties.slashing?.income, duties.sync?.income, duties.proposal?.cl_attestation_inclusion_income, duties.proposal?.cl_slashing_inclusion_income, duties.proposal?.cl_sync_inclusion_income, duties.proposal?.el_income].filter(v => !!v) as string[]
+  const values: string[] = [
+    duties.attestation_head?.income,
+    duties.attestation_source?.income,
+    duties.attestation_target?.income,
+    duties.slashing?.income,
+    duties.sync?.income,
+    duties.proposal?.cl_attestation_inclusion_income,
+    duties.proposal?.cl_slashing_inclusion_income,
+    duties.proposal?.cl_sync_inclusion_income,
+    duties.proposal?.el_income,
+  ].filter(v => !!v) as string[]
   if (values.length) {
     return convertSum(...values)
   }
 }
 
-export function sortValidatorIds (list?: number[]): number[] {
+export function sortValidatorIds(list?: number[]): number[] {
   if (!list) {
     return []
   }
   return [...list].sort((a, b) => a - b)
 }
 
-export function sortSummaryValidators (list?: VDBSummaryValidator[]): VDBSummaryValidator[] {
+export function sortSummaryValidators(
+  list?: VDBSummaryValidator[],
+): VDBSummaryValidator[] {
   if (!list) {
     return []
   }
   return [...list].sort((a, b) => a.index - b.index)
 }
 
-export function countSubsetDuties (list: ValidatorSubset[], categories: ValidatorSubsetCategory[]): number {
+export function countSubsetDuties(
+  list: ValidatorSubset[],
+  categories: ValidatorSubsetCategory[],
+): number {
   return categories.reduce((sum, cat) => {
     const subset = list.find(sub => sub.category === cat)
     return sum + countSummaryValidatorDuties(subset?.validators || [], cat)
   }, 0)
 }
-export function countSummaryValidatorDuties (validators: VDBSummaryValidator[], category: ValidatorSubsetCategory): number {
+export function countSummaryValidatorDuties(
+  validators: VDBSummaryValidator[],
+  category: ValidatorSubsetCategory,
+): number {
   let countBy: 'index' | 'duty-count' | 'duty-value' = 'index'
   if (category === 'sync_past') {
     countBy = 'duty-value'
-  } else if (['has_slashed', 'proposal_proposed', 'proposal_missed'].includes(category)) {
+  }
+  else if (
+    ['has_slashed', 'proposal_proposed', 'proposal_missed'].includes(category)
+  ) {
     countBy = 'duty-count'
   }
   if (countBy === 'index') {
diff --git a/frontend/utils/encryption.ts b/frontend/utils/encryption.ts
index 7262cd672..e0241f34f 100644
--- a/frontend/utils/encryption.ts
+++ b/frontend/utils/encryption.ts
@@ -1,26 +1,27 @@
 import { warn } from 'vue'
 
-export function toBase64Url (str: string):string {
+export function toBase64Url(str: string): string {
   if (!str) {
     return ''
   }
   return btoa(str).replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_')
 }
 
-export function fromBase64Url (str: string): string {
+export function fromBase64Url(str: string): string {
   if (!str) {
     return ''
   }
   try {
     // eslint-disable-next-line no-useless-escape
     return atob(padBase64(str).replace(/\-/g, '+').replace(/_/g, '/'))
-  } catch (e) {
+  }
+  catch (e) {
     warn('error getting fromBase64Url', str, e)
     return ''
   }
 }
 
-function padBase64 (input:string) {
+function padBase64(input: string) {
   const segmentLength = 4
   const stringLength = input.length
   const diff = stringLength % segmentLength
diff --git a/frontend/utils/ether.ts b/frontend/utils/ether.ts
index a7c9d9d8e..bd184b930 100644
--- a/frontend/utils/ether.ts
+++ b/frontend/utils/ether.ts
@@ -4,14 +4,14 @@ import { REGEXP_PUBLIC_KEX } from './regexp'
 export const OneGwei = BigNumber.from('1000000000')
 export const OneEther = BigNumber.from('1000000000000000000')
 
-export function lessThanGwei (value: BigNumber, decimals: number = 0): boolean {
+export function lessThanGwei(value: BigNumber, decimals: number = 0): boolean {
   return value.lt(OneGwei.div(Math.pow(10, decimals)))
 }
 
-export function lessThanEth (value: BigNumber, decimals: number = 0): boolean {
+export function lessThanEth(value: BigNumber, decimals: number = 0): boolean {
   return value.lt(OneEther.div(Math.pow(10, decimals)))
 }
 
-export function isPublicKey (value: string):boolean {
+export function isPublicKey(value: string): boolean {
   return !!value && REGEXP_PUBLIC_KEX.test(value)
 }
diff --git a/frontend/utils/fetch.ts b/frontend/utils/fetch.ts
index dcdd29a98..be73eb7a7 100644
--- a/frontend/utils/fetch.ts
+++ b/frontend/utils/fetch.ts
@@ -1,4 +1,4 @@
-export function getCSRFHeader (headers?: Headers): [string, string] | undefined {
+export function getCSRFHeader(headers?: Headers): [string, string] | undefined {
   if (!headers) {
     return
   }
diff --git a/frontend/utils/format.ts b/frontend/utils/format.ts
index ed13885fa..8788e0327 100644
--- a/frontend/utils/format.ts
+++ b/frontend/utils/format.ts
@@ -12,15 +12,21 @@ export const ONE_YEAR = ONE_DAY * 365
 
 export interface NumberFormatConfig {
   precision?: number
-  fixed?:number
+  fixed?: number
   addPositiveSign?: boolean
 }
 
-export function formatPercent (percent?: number, config?: NumberFormatConfig):string {
+export function formatPercent(
+  percent?: number,
+  config?: NumberFormatConfig,
+): string {
   if (percent === undefined) {
     return ''
   }
-  const { precision, fixed, addPositiveSign } = { ...{ precision: 2, fixed: 2, addPositiveSign: false }, ...config }
+  const { precision, fixed, addPositiveSign } = {
+    ...{ precision: 2, fixed: 2, addPositiveSign: false },
+    ...config,
+  }
   let result = trim(percent, precision, fixed)
   if (addPositiveSign) {
     result = addPlusSign(result)
@@ -28,40 +34,48 @@ export function formatPercent (percent?: number, config?: NumberFormatConfig):st
   return `${result}%`
 }
 
-export function calculatePercent (value?: number, base?: number):number {
+export function calculatePercent(value?: number, base?: number): number {
   if (!base) {
     return 0
   }
-  return (value ?? 0) * 100 / base
+  return ((value ?? 0) * 100) / base
 }
 
-export function formatAndCalculatePercent (value?: number, base?: number, config?: NumberFormatConfig):string {
+export function formatAndCalculatePercent(
+  value?: number,
+  base?: number,
+  config?: NumberFormatConfig,
+): string {
   if (!base) {
     return ''
   }
   return formatPercent(calculatePercent(value, base), config)
 }
 
-export function formatNumber (value?: number):string {
+export function formatNumber(value?: number): string {
   return value?.toLocaleString('en-US') ?? ''
 }
 
-export function addPlusSign (value: string, add = true): string {
+export function addPlusSign(value: string, add = true): string {
   if (!add || !value || value === '0' || value.startsWith('-')) {
     return value
   }
   return `+${value}`
 }
 
-export function withCurrency (value: string, currency: string):string {
+export function withCurrency(value: string, currency: string): string {
   return `${value} ${currency}`
 }
 
-export function nZeros (count: number):string {
-  return count > 0 ? Array.from(Array(count)).map(() => '0').join('') : ''
+export function nZeros(count: number): string {
+  return count > 0
+    ? Array.from(Array(count))
+      .map(() => '0')
+      .join('')
+    : ''
 }
 
-export function commmifyLeft (value: string):string {
+export function commmifyLeft(value: string): string {
   const formatted = commify(value)
   const i = formatted.lastIndexOf('.0')
   if (i >= 0 && i === formatted.length - 2) {
@@ -70,13 +84,20 @@ export function commmifyLeft (value: string):string {
   return formatted
 }
 
-export function trim (value:string | number, maxDecimalCount: number, minDecimalCount?: number):string {
+export function trim(
+  value: string | number,
+  maxDecimalCount: number,
+  minDecimalCount?: number,
+): string {
   if (typeof value !== 'string') {
     value = `${value}`
   }
-  minDecimalCount = minDecimalCount === undefined ? maxDecimalCount : Math.min(minDecimalCount, maxDecimalCount)
+  minDecimalCount
+    = minDecimalCount === undefined
+      ? maxDecimalCount
+      : Math.min(minDecimalCount, maxDecimalCount)
   const split = value.split('.')
-  let dec = (split[1] ?? '')
+  let dec = split[1] ?? ''
   const hasTinyValue = !!dec && REGEXP_HAS_NUMBERS.test(dec)
   dec = dec.substring(0, maxDecimalCount)
   while (dec.length < minDecimalCount) {
@@ -95,90 +116,175 @@ export function trim (value:string | number, maxDecimalCount: number, minDecimal
   return `${left}.${dec}`
 }
 
-function formatTs (ts?: number, timestamp?: number, format: AgeFormat = 'relative', style: StringUnitLength = 'narrow', locales: string = 'en-US', withTime = true) {
+function formatTs(
+  ts?: number,
+  timestamp?: number,
+  format: AgeFormat = 'relative',
+  style: StringUnitLength = 'narrow',
+  locales: string = 'en-US',
+  withTime = true,
+) {
   if (ts === undefined) {
     return undefined
   }
 
   if (format === 'relative') {
     return formatTsToRelative(ts * 1000, timestamp, style, locales)
-  } else {
+  }
+  else {
     return formatTsToAbsolute(ts, locales, withTime)
   }
 }
 
-export function formatTsToAbsolute (ts: number, locales: string, includeTime?: boolean): string {
+export function formatTsToAbsolute(
+  ts: number,
+  locales: string,
+  includeTime?: boolean,
+): string {
   const timeOptions: Intl.DateTimeFormatOptions = includeTime
     ? {
         hour: 'numeric',
-        minute: 'numeric'
+        minute: 'numeric',
       }
     : {}
   const options: Intl.DateTimeFormatOptions = {
     month: 'short',
     day: 'numeric',
     year: 'numeric',
-    ...timeOptions
+    ...timeOptions,
   }
   const date = new Date(ts * 1000)
-  return includeTime ? date.toLocaleString(locales, options) : date.toLocaleDateString(locales, options)
+  return includeTime
+    ? date.toLocaleString(locales, options)
+    : date.toLocaleDateString(locales, options)
 }
 
-export function formatTsToTime (ts: number, locales: string): string {
+export function formatTsToTime(ts: number, locales: string): string {
   const options: Intl.DateTimeFormatOptions = {
     hour: 'numeric',
-    minute: 'numeric'
+    minute: 'numeric',
   }
   const date = new Date(ts * 1000)
   return date.toLocaleTimeString(locales, options)
 }
 
-function formatTsToRelative (targetTimestamp?: number, baseTimestamp?: number, style: StringUnitLength = 'narrow', locales: string = 'en-US') : string | null | undefined {
+function formatTsToRelative(
+  targetTimestamp?: number,
+  baseTimestamp?: number,
+  style: StringUnitLength = 'narrow',
+  locales: string = 'en-US',
+): string | null | undefined {
   if (!targetTimestamp) {
     return undefined
   }
 
-  const date = baseTimestamp ? DateTime.fromMillis(baseTimestamp) : DateTime.now()
-  return DateTime.fromMillis(targetTimestamp).setLocale(locales).toRelative({ base: date, style })
+  const date = baseTimestamp
+    ? DateTime.fromMillis(baseTimestamp)
+    : DateTime.now()
+  return DateTime.fromMillis(targetTimestamp)
+    .setLocale(locales)
+    .toRelative({ base: date, style })
 }
 
-export function formatGoTimestamp (timestamp: string | number, compareTimestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) {
+export function formatGoTimestamp(
+  timestamp: string | number,
+  compareTimestamp?: number,
+  format?: AgeFormat,
+  style?: StringUnitLength,
+  locales?: string,
+  withTime?: boolean,
+) {
   if (typeof timestamp === 'number') {
     timestamp *= 1000
   }
   const dateTime = new Date(timestamp).getTime()
-  return formatTs(dateTime / 1000, compareTimestamp, format, style, locales, withTime)
+  return formatTs(
+    dateTime / 1000,
+    compareTimestamp,
+    format,
+    style,
+    locales,
+    withTime,
+  )
 }
 
 /**
  * Should be used only when you work with a network different from the current one.
- * Wherever you would write `formatEpochToDateTime(currentNetwork.value, ...)` you should rather use `formatEpochToDateTime(...)` from `useFormat.ts`.
+ * Wherever you would write `formatEpochToDateTime(currentNetwork.value, ...)`
+ * you should rather use `formatEpochToDateTime(...)` from `useFormat.ts`.
  */
-export function formatEpochToDateTime (chainId: ChainIDs, epoch: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
-  return formatTs(epochToTs(chainId, epoch), timestamp, format, style, locales, withTime)
+export function formatEpochToDateTime(
+  chainId: ChainIDs,
+  epoch: number,
+  timestamp?: number,
+  format?: AgeFormat,
+  style?: StringUnitLength,
+  locales?: string,
+  withTime?: boolean,
+): string | null | undefined {
+  return formatTs(
+    epochToTs(chainId, epoch),
+    timestamp,
+    format,
+    style,
+    locales,
+    withTime,
+  )
 }
 
 /**
  * Should be used only when you work with a network different from the current one.
- * Wherever you would write `formatSlotToDateTime(currentNetwork.value, ...)` you should rather use `formatSlotToDateTime(...)` from `useFormat.ts`.
+ * Wherever you would write `formatSlotToDateTime(currentNetwork.value, ...)`
+ * you should rather use `formatSlotToDateTime(...)` from `useFormat.ts`.
  */
-export function formatSlotToDateTime (chainId: ChainIDs, slot: number, timestamp?: number, format?: AgeFormat, style?: StringUnitLength, locales?: string, withTime?: boolean) : string | null | undefined {
-  return formatTs(slotToTs(chainId, slot), timestamp, format, style, locales, withTime)
+export function formatSlotToDateTime(
+  chainId: ChainIDs,
+  slot: number,
+  timestamp?: number,
+  format?: AgeFormat,
+  style?: StringUnitLength,
+  locales?: string,
+  withTime?: boolean,
+): string | null | undefined {
+  return formatTs(
+    slotToTs(chainId, slot),
+    timestamp,
+    format,
+    style,
+    locales,
+    withTime,
+  )
 }
 
 /**
  * Should be used only when you work with a network different from the current one.
- * Wherever you would write `formatEpochToDate(currentNetwork.value, ...)` you should rather use `formatEpochToDate(...)` from `useFormat.ts`.
+ * Wherever you would write `formatEpochToDate(currentNetwork.value, ...)` you
+ * should rather use `formatEpochToDate(...)` from `useFormat.ts`.
  */
-export function formatEpochToDate (chainId: ChainIDs, epoch: number, locales: string): string | null | undefined {
-  return formatEpochToDateTime(chainId, epoch, undefined, 'absolute', undefined, locales, false)
+export function formatEpochToDate(
+  chainId: ChainIDs,
+  epoch: number,
+  locales: string,
+): string | null | undefined {
+  return formatEpochToDateTime(
+    chainId,
+    epoch,
+    undefined,
+    'absolute',
+    undefined,
+    locales,
+    false,
+  )
 }
 
-export function formattedNumberToHtml (value?:string):string | undefined {
-  return value?.split(',').join("<span class='comma' />")
+export function formattedNumberToHtml(value?: string): string | undefined {
+  return value?.split(',').join('<span class=\'comma\' />')
 }
 
-export function formatTimeDuration (seconds: number | undefined, t: ComposerTranslation) : string | undefined {
+export function formatTimeDuration(
+  seconds: number | undefined,
+  t: ComposerTranslation,
+): string | undefined {
   if (seconds === undefined) {
     return undefined
   }
@@ -189,13 +295,16 @@ export function formatTimeDuration (seconds: number | undefined, t: ComposerTran
   if (seconds < ONE_MINUTE) {
     translationId = 'time_duration.seconds'
     divider = 1
-  } else if (seconds < ONE_HOUR) {
+  }
+  else if (seconds < ONE_HOUR) {
     translationId = 'time_duration.minutes'
     divider = ONE_MINUTE
-  } else if (seconds < ONE_DAY) {
+  }
+  else if (seconds < ONE_DAY) {
     translationId = 'time_duration.hours'
     divider = ONE_HOUR
-  } else if (seconds < ONE_YEAR) {
+  }
+  else if (seconds < ONE_YEAR) {
     translationId = 'time_duration.days'
     divider = ONE_DAY
   }
@@ -205,7 +314,10 @@ export function formatTimeDuration (seconds: number | undefined, t: ComposerTran
   return t(translationId, { amount }, amount === 1 ? 1 : 2)
 }
 
-export function formatNanoSecondDuration (nano:number | undefined, t: ComposerTranslation):string | undefined {
+export function formatNanoSecondDuration(
+  nano: number | undefined,
+  t: ComposerTranslation,
+): string | undefined {
   if (nano === undefined) {
     return undefined
   }
@@ -213,17 +325,33 @@ export function formatNanoSecondDuration (nano:number | undefined, t: ComposerTr
   return formatTimeDuration(seconds, t)
 }
 
-export function formatFiat (value:number, currency: string, locales: string, minimumFractionDigits?: number, maximumFractionDigits?: number) {
+export function formatFiat(
+  value: number,
+  currency: string,
+  locales: string,
+  minimumFractionDigits?: number,
+  maximumFractionDigits?: number,
+) {
   const formatter = new Intl.NumberFormat(locales, {
     style: 'currency',
     currency,
     minimumFractionDigits,
-    maximumFractionDigits
+    maximumFractionDigits,
   })
 
   return formatter.format(value)
 }
 
-export const formatPremiumProductPrice = (t: ComposerTranslation, price: number, digits?: number) => {
-  return formatFiat(price, 'EUR', t('locales.currency'), digits ?? 2, digits ?? 2)
+export const formatPremiumProductPrice = (
+  t: ComposerTranslation,
+  price: number,
+  digits?: number,
+) => {
+  return formatFiat(
+    price,
+    'EUR',
+    t('locales.currency'),
+    digits ?? 2,
+    digits ?? 2,
+  )
 }
diff --git a/frontend/utils/html.ts b/frontend/utils/html.ts
index bef95ba3a..34298793c 100644
--- a/frontend/utils/html.ts
+++ b/frontend/utils/html.ts
@@ -1,4 +1,7 @@
-export function isParent (parent:HTMLElement | null, child:HTMLElement | null): boolean {
+export function isParent(
+  parent: HTMLElement | null,
+  child: HTMLElement | null,
+): boolean {
   if (!parent || !child) {
     return false
   }
@@ -14,14 +17,20 @@ export function isParent (parent:HTMLElement | null, child:HTMLElement | null):
   return false
 }
 
-function isScrollable (element: HTMLElement): boolean {
-  if (element.offsetWidth < element.scrollWidth || element.offsetHeight < element.scrollHeight) {
+function isScrollable(element: HTMLElement): boolean {
+  if (
+    element.offsetWidth < element.scrollWidth
+    || element.offsetHeight < element.scrollHeight
+  ) {
     return true
   }
   return false
 }
 
-export function isOrIsInIteractiveContainer (child:HTMLElement | null, stopSearchAtElement?: HTMLElement): boolean {
+export function isOrIsInIteractiveContainer(
+  child: HTMLElement | null,
+  stopSearchAtElement?: HTMLElement,
+): boolean {
   if (!child || child === stopSearchAtElement) {
     return false
   }
@@ -35,7 +44,10 @@ export function isOrIsInIteractiveContainer (child:HTMLElement | null, stopSearc
   return isOrIsInIteractiveContainer(child.parentElement, stopSearchAtElement)
 }
 
-export function findAllScrollParents (child:HTMLElement | null, list?: HTMLElement[]): HTMLElement[] {
+export function findAllScrollParents(
+  child: HTMLElement | null,
+  list?: HTMLElement[],
+): HTMLElement[] {
   if (!list) {
     list = []
   }
diff --git a/frontend/utils/misc.ts b/frontend/utils/misc.ts
index 1ff130e3b..6b39f777b 100644
--- a/frontend/utils/misc.ts
+++ b/frontend/utils/misc.ts
@@ -8,7 +8,7 @@ export const addUpValues = (obj?: Record<string, number>): number => {
 /**
  * @returns Levenshtein distance between the two strings. Lower value means better similarity and vice-versa.
  */
-export function levenshteinDistance (str1 : string, str2 : string) : number {
+export function levenshteinDistance(str1: string, str2: string): number {
   const dist = []
 
   for (let i = 0; i <= str1.length; i++) {
@@ -16,25 +16,29 @@ export function levenshteinDistance (str1 : string, str2 : string) : number {
     for (let j = 1; j <= str2.length; j++) {
       if (i === 0) {
         dist[i][j] = j
-      } else {
-        const subst = (str1[i - 1] === str2[j - 1]) ? 0 : 1
-        dist[i][j] = Math.min(dist[i - 1][j] + 1, dist[i][j - 1] + 1, dist[i - 1][j - 1] + subst)
+      }
+      else {
+        const subst = str1[i - 1] === str2[j - 1] ? 0 : 1
+        dist[i][j] = Math.min(
+          dist[i - 1][j] + 1,
+          dist[i][j - 1] + 1,
+          dist[i - 1][j - 1] + subst,
+        )
       }
     }
   }
   return dist[str1.length][str2.length]
 }
 
-export function generateUUID () {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
-    .replace(/[xy]/g, function (c) {
-      const r = Math.random() * 16 | 0
-      const v = c === 'x' ? r : (r & 0x3 | 0x8)
-      return v.toString(16)
-    })
+export function generateUUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0
+    const v = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
 }
 
-export function isInt (value?: string): boolean {
+export function isInt(value?: string): boolean {
   if (!value) {
     return false
   }
diff --git a/frontend/utils/mobileAuth.ts b/frontend/utils/mobileAuth.ts
index eabbc6f9c..db704db2f 100644
--- a/frontend/utils/mobileAuth.ts
+++ b/frontend/utils/mobileAuth.ts
@@ -4,7 +4,7 @@ import type { LocationQuery } from 'vue-router'
 // Reasoning is that a mobile login request must be handled by mobile, if a user clicks on register or forgot password
 // during mobile login, they still must be forwarded to the app in the end.
 // This must be implemented on authentication pages like login, register, forgot password
-export function provideMobileAuthParams (queryParams: LocationQuery, path: string) {
+export function provideMobileAuthParams(queryParams: LocationQuery, path: string) {
   if (queryParams.redirect_uri && queryParams.client_id) {
     const redirectURI = queryParams.redirect_uri
     const state = queryParams.state || '' // optional
@@ -15,18 +15,18 @@ export function provideMobileAuthParams (queryParams: LocationQuery, path: strin
       query: {
         redirect_uri: redirectURI,
         state,
-        client_id: deviceID
-      }
+        client_id: deviceID,
+      },
     }
   }
   return {
-    path
+    path,
   }
 }
 
 // Call after a successfull authenticatio to check whethr the request originated from
 // the mobile app and if so handle the request accordingly. Otherwise the method does nothing and returns false
-export function handleMobileAuth (queryParams: LocationQuery): boolean {
+export function handleMobileAuth(queryParams: LocationQuery): boolean {
   if (queryParams.redirect_uri && queryParams.client_id) {
     const state = queryParams.state ? '&state=' + queryParams.state! : ''
 
diff --git a/frontend/utils/mock.ts b/frontend/utils/mock.ts
index 6856665e3..2b1f68265 100644
--- a/frontend/utils/mock.ts
+++ b/frontend/utils/mock.ts
@@ -1,16 +1,23 @@
 import type { InternalGetLatestStateResponse } from '~/types/api/latest_state'
 import type { ApiDataResponse } from '~/types/api/common'
 import { isMainNet } from '~/types/network'
-import { type SearchAheadAPIresponse, type ResultType, TypeInfo, Indirect } from '~/types/searchbar'
+import {
+  type SearchAheadAPIresponse,
+  type ResultType,
+  TypeInfo,
+  Indirect,
+} from '~/types/searchbar'
 import { type InternalGetUserNotificationSettingsResponse } from '~/types/api/notifications'
 
 const probabilityOfNoResultOrError = 0.0
 
-export function simulateAPIresponseForTheSearchBar (body? : Record<string, any>) : SearchAheadAPIresponse {
+export function simulateAPIresponseForTheSearchBar(
+  body?: Record<string, any>,
+): SearchAheadAPIresponse {
   const searched = body?.input as string
   const searchableTypes = body?.types as ResultType[]
   const searchableNetworks = body?.networks as number[]
-  const response : SearchAheadAPIresponse = {} as SearchAheadAPIresponse
+  const response: SearchAheadAPIresponse = {} as SearchAheadAPIresponse
   response.data = []
 
   if (Math.random() < probabilityOfNoResultOrError / 2) {
@@ -21,13 +28,16 @@ export function simulateAPIresponseForTheSearchBar (body? : Record<string, any>)
   }
 
   const n = Math.floor(Number(searched))
-  const searchedIsPositiveInteger = (n !== Infinity && n >= 0 && String(n) === searched)
+  const searchedIsPositiveInteger
+    = n !== Infinity && n >= 0 && String(n) === searched
 
   let ordinal = searched
   if (Number(searched) < 11 || Number(searched) > 13) {
     const last = searched.slice(-1)
-    ordinal += (last === '1') ? 'st' : (last === '2' ? 'nd' : (last === '3' ? 'rd' : 'th'))
-  } else {
+    ordinal
+      += last === '1' ? 'st' : last === '2' ? 'nd' : last === '3' ? 'rd' : 'th'
+  }
+  else {
     ordinal += 'th'
   }
 
@@ -36,105 +46,110 @@ export function simulateAPIresponseForTheSearchBar (body? : Record<string, any>)
       chain_id: 1,
       type: 'tokens',
       str_value: searched + 'Coin',
-      hash_value: '0x06e523CD06A0cF68DaA6D8EB5ad672B5ADad0AD4'
+      hash_value: '0x06e523CD06A0cF68DaA6D8EB5ad672B5ADad0AD4',
     },
     {
       chain_id: 1,
       type: 'accounts',
-      hash_value: '0xc9f2d4D703d5B14bdb0FF261e308F88306DfF47b'
+      hash_value: '0xc9f2d4D703d5B14bdb0FF261e308F88306DfF47b',
     },
     {
       chain_id: 1,
       type: 'graffiti',
-      str_value: searched + ' tutta la vita'
+      str_value: searched + ' tutta la vita',
     },
     {
       chain_id: 1,
       type: 'contracts',
       hash_value: '0xEB84C94dCBBceF74bf6CEB74Bc9bBf418939202D',
-      str_value: 'C' + searched
+      str_value: 'C' + searched,
     },
     {
       chain_id: 1,
       type: 'contracts',
       hash_value: '0x2b7290a54aD073bB3963DDEb538b630e8ff10aD7',
-      str_value: ''
-    }
+      str_value: '',
+    },
   )
   if (searchedIsPositiveInteger) {
     response.data.push(
       {
         chain_id: 1,
         type: 'epochs',
-        num_value: Number(searched)
+        num_value: Number(searched),
       },
       {
         chain_id: 1,
         type: 'slots',
         num_value: Number(searched),
-        hash_value: '0x910e0f2ee77c80bc506a1cefc90751b919cc612d42f17bb0acc49b546f42f0ce'
+        hash_value:
+          '0x910e0f2ee77c80bc506a1cefc90751b919cc612d42f17bb0acc49b546f42f0ce',
       },
       {
         chain_id: 1,
         type: 'blocks',
         num_value: Number(searched),
-        hash_value: '0x910e0f2ee77c80bc506a1cefc90751b919cc612d42f17bb0acc49b546f42f0ce'
+        hash_value:
+          '0x910e0f2ee77c80bc506a1cefc90751b919cc612d42f17bb0acc49b546f42f0ce',
       },
       {
         chain_id: 1,
         type: 'validator_by_index',
         num_value: Number(searched),
-        hash_value: '0xa525497ec3116c1310be8d73d2efd536dc0ce6bd4b0163dffddf94dad3d91d154c061b9a3bfd1b704a5ba67fc443974a'
+        hash_value:
+          '0xa525497ec3116c1310be8d73d2efd536dc0ce6bd4b0163dffddf94dad3d91d154c061b9a3bfd1b704a5ba67fc443974a',
       },
       {
         chain_id: 1,
         type: 'validators_by_deposit_ens_name',
         str_value: searched + 'kETH-hodler-club.eth',
-        hash_value: '0x3bfCb296F2d28FaDE20a7E53A508F73557Ca938'
+        hash_value: '0x3bfCb296F2d28FaDE20a7E53A508F73557Ca938',
       },
       {
         chain_id: 1,
         type: 'validators_by_graffiti',
-        str_value: ordinal + ' proposal!'
-      }
+        str_value: ordinal + ' proposal!',
+      },
     )
-  } else {
+  }
+  else {
     response.data.push(
       {
         chain_id: 1,
         type: 'tokens',
         str_value: searched,
-        hash_value: '0xb794f5ea0ba39494ce839613fffba74279579268'
+        hash_value: '0xb794f5ea0ba39494ce839613fffba74279579268',
       },
       {
         chain_id: 1,
         type: 'ens_addresses',
         str_value: searched + '.bitfly.eth',
-        hash_value: '0x3bfCb296F2d28FaDE20a7E53A508F73557Ca938'
+        hash_value: '0x3bfCb296F2d28FaDE20a7E53A508F73557Ca938',
       },
       {
         chain_id: 1,
         type: 'ens_overview',
         str_value: searched + '.bitfly.eth',
-        hash_value: '0x3bfCb296F2d28FaDE20a7E53A508F73557Ca938'
+        hash_value: '0x3bfCb296F2d28FaDE20a7E53A508F73557Ca938',
       },
       {
         chain_id: 1,
         type: 'validators_by_withdrawal_ens_name',
         str_value: searched + '.bitfly.eth',
-        hash_value: '0xEB84C94dCBBceF74bf6CEB74Bc9bBf418939202D'
+        hash_value: '0xEB84C94dCBBceF74bf6CEB74Bc9bBf418939202D',
       },
       {
         chain_id: 1,
         type: 'validator_by_public_key',
         num_value: Math.floor(Math.random() * 1000000),
-        hash_value: '0x8000300c7607886b7e6f1030f833162f81b02e702ff9cea045e5a1d4a13bc7010e277f077533c7899334df2d51d65660'
+        hash_value:
+          '0x8000300c7607886b7e6f1030f833162f81b02e702ff9cea045e5a1d4a13bc7010e277f077533c7899334df2d51d65660',
       },
       {
         chain_id: 1,
         type: 'validators_by_withdrawal_address',
-        hash_value: '0xc2c89C217d256b060e6b3Ae567B6b213ad9954B2'
-      }
+        hash_value: '0xc2c89C217d256b060e6b3Ae567B6b213ad9954B2',
+      },
     )
   }
   response.data.push(
@@ -142,177 +157,193 @@ export function simulateAPIresponseForTheSearchBar (body? : Record<string, any>)
       chain_id: 1,
       type: 'contracts',
       hash_value: '0x1c6bC968f5Be2410e98f0CB5Fad7363Fac875351',
-      str_value: 'Uniswap'
+      str_value: 'Uniswap',
     },
     {
       chain_id: 42161,
       type: 'contracts',
       hash_value: '0xF2C5B60e03cb38cA0e568b847BB8773c93E31e12',
-      str_value: 'Tormato Cash'
+      str_value: 'Tormato Cash',
     },
     {
       chain_id: 42161,
       type: 'transactions',
-      hash_value: '0xacd47cc7a30b4273aadec96b4e5aa06d1cfa627b751f358069b9a7febdba3c30'
+      hash_value:
+        '0xacd47cc7a30b4273aadec96b4e5aa06d1cfa627b751f358069b9a7febdba3c30',
     },
     {
       chain_id: 8453,
       type: 'accounts',
-      hash_value: '0x2b7290a54aD073bB3963DDEb538b630e8ff10aD7'
+      hash_value: '0x2b7290a54aD073bB3963DDEb538b630e8ff10aD7',
     },
     {
       chain_id: 8453,
       type: 'validators_by_deposit_address',
-      hash_value: '0x2b7290a54aD073bB3963DDEb538b630e8ff10aD7'
-    }
+      hash_value: '0x2b7290a54aD073bB3963DDEb538b630e8ff10aD7',
+    },
   )
   if (searchedIsPositiveInteger) {
     response.data.push(
       {
         chain_id: 8453,
         type: 'epochs',
-        num_value: Number(searched)
+        num_value: Number(searched),
       },
       {
         chain_id: 8453,
         type: 'slots',
         num_value: Number(searched),
-        hash_value: '0xb47b779916e7b1517863ec60c372abf0dc255180ed6b47dd6f93e77f2dd6b9ca'
+        hash_value:
+          '0xb47b779916e7b1517863ec60c372abf0dc255180ed6b47dd6f93e77f2dd6b9ca',
       },
       {
         chain_id: 8453,
         type: 'blocks',
         num_value: Number(searched),
-        hash_value: '0xb47b779916e7b1517863ec60c372abf0dc255180ed6b47dd6f93e77f2dd6b9ca'
+        hash_value:
+          '0xb47b779916e7b1517863ec60c372abf0dc255180ed6b47dd6f93e77f2dd6b9ca',
       },
       {
         chain_id: 8453,
         type: 'validator_by_index',
         num_value: Number(searched),
-        hash_value: '0x99f9ec412465e15243a5996205928ef1461fd4ef6b6a0c642748c6f85de72c801751facda0c96454a8c2ad3bd19f91ee'
+        hash_value:
+          '0x99f9ec412465e15243a5996205928ef1461fd4ef6b6a0c642748c6f85de72c801751facda0c96454a8c2ad3bd19f91ee',
       },
       {
         chain_id: 100,
         type: 'epochs',
-        num_value: Number(searched)
+        num_value: Number(searched),
       },
       {
         chain_id: 100,
         type: 'slots',
         num_value: Number(searched),
-        hash_value: '0xd13eb040661d8d8de07d154985be5f4332f57141948a9d67b87bb7a2cae29b81'
+        hash_value:
+          '0xd13eb040661d8d8de07d154985be5f4332f57141948a9d67b87bb7a2cae29b81',
       },
       {
         chain_id: 100,
         type: 'blocks',
         num_value: Number(searched),
-        hash_value: '0xd13eb040661d8d8de07d154985be5f4332f57141948a9d67b87bb7a2cae29b81'
+        hash_value:
+          '0xd13eb040661d8d8de07d154985be5f4332f57141948a9d67b87bb7a2cae29b81',
       },
       {
         chain_id: 100,
         type: 'validator_by_index',
         num_value: Number(searched),
-        hash_value: '0x85e5ac15a728a2bf0b0b4f22312dad780d4e27856e30997ee11f73d74d86682800046a86a01d134dbdf171326cd7cc54'
+        hash_value:
+          '0x85e5ac15a728a2bf0b0b4f22312dad780d4e27856e30997ee11f73d74d86682800046a86a01d134dbdf171326cd7cc54',
       },
       {
         chain_id: 100,
         type: 'validators_by_deposit_address',
-        hash_value: '0x2b7290a54aD073bB3963DDEb538b630e8ff10aD7'
+        hash_value: '0x2b7290a54aD073bB3963DDEb538b630e8ff10aD7',
       },
       {
         chain_id: 100,
         type: 'validators_by_withdrawal_address',
-        hash_value: '0xc2c89C217d256b060e6b3Ae567B6b213ad9954B2'
+        hash_value: '0xc2c89C217d256b060e6b3Ae567B6b213ad9954B2',
       },
       {
         chain_id: 100,
         type: 'validators_by_withdrawal_credential',
-        hash_value: '0x0100000000000000000000000c6bd499ef02a44031ffe8336f59c82d81333f2a'
+        hash_value:
+          '0x0100000000000000000000000c6bd499ef02a44031ffe8336f59c82d81333f2a',
       },
       {
         chain_id: 100,
         type: 'contracts',
         hash_value: '0x06e523CD06A0cF68DaA6D8EB5ad672B5ADad0AD4',
-        str_value: ''
-      }
+        str_value: '',
+      },
     )
-  } else {
+  }
+  else {
     response.data.push(
       {
         chain_id: 8453,
         type: 'tokens',
         str_value: searched + 'USD',
-        hash_value: '0xb794f5ea0ba39494ce839613fffba74279579268'
+        hash_value: '0xb794f5ea0ba39494ce839613fffba74279579268',
       },
       {
         chain_id: 8453,
         type: 'tokens',
         str_value: searched + 'Plus',
-        hash_value: '0x0701BF988309bf45a6771afaa6B8802Ba3E24090'
+        hash_value: '0x0701BF988309bf45a6771afaa6B8802Ba3E24090',
       },
       {
         chain_id: 100,
         type: 'tokens',
         str_value: searched + 'Coin',
-        hash_value: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F'
+        hash_value: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
       },
       {
         chain_id: 100,
         type: 'contracts',
         hash_value: '0xF2C5B60e03cb38cA0e568b847BB8773c93E31e12',
-        str_value: searched
+        str_value: searched,
       },
       {
         chain_id: 100,
         type: 'ens_addresses',
         str_value: searched + '-futureoffinance.eth',
-        hash_value: '0xA9Bc41b63fCb29F2d2FaDE0a7E3A50F7357Ca938'
+        hash_value: '0xA9Bc41b63fCb29F2d2FaDE0a7E3A50F7357Ca938',
       },
       {
         chain_id: 100,
         type: 'ens_addresses',
         str_value: searched + '.bitfly.eth',
-        hash_value: '0x3bfCb296F2d28FaDE20a7E53A508F73557CaBdF'
+        hash_value: '0x3bfCb296F2d28FaDE20a7E53A508F73557CaBdF',
       },
       {
         chain_id: 100,
         type: 'ens_overview',
         str_value: searched + '-green.eth',
-        hash_value: '0xA9Bc41b63fCb29F2d2FaDE0a7E3A50F7357Ca938'
+        hash_value: '0xA9Bc41b63fCb29F2d2FaDE0a7E3A50F7357Ca938',
       },
       {
         chain_id: 100,
         type: 'ens_overview',
         str_value: searched + '.bitfly.eth',
-        hash_value: '0x3bfCb296F2d28FaDE20a7E53A508F73557CaBdF'
+        hash_value: '0x3bfCb296F2d28FaDE20a7E53A508F73557CaBdF',
       },
       {
         chain_id: 100,
         type: 'validators_by_withdrawal_ens_name',
         str_value: searched + '-futureoffinance.eth',
-        hash_value: '0x0701BF988309bf45a6771afaa6B8802Ba3E24090'
+        hash_value: '0x0701BF988309bf45a6771afaa6B8802Ba3E24090',
       },
       {
         chain_id: 100,
         type: 'validators_by_withdrawal_ens_name',
         str_value: searched + '.bitfly.eth',
-        hash_value: '0xEB84C94dCBBceF74bf6CEB74Bc9bBf418939202D'
-      }
+        hash_value: '0xEB84C94dCBBceF74bf6CEB74Bc9bBf418939202D',
+      },
     )
   }
 
   // keeping only the results that the API is asked for
   if (searchableTypes.length) {
-    response.data = response.data.filter(singleRes => searchableTypes.includes(singleRes.type as ResultType))
+    response.data = response.data.filter(singleRes =>
+      searchableTypes.includes(singleRes.type as ResultType),
+    )
   }
   if (searchableNetworks.length) {
-    response.data = response.data.filter(singleRes => searchableNetworks.includes(singleRes.chain_id) || TypeInfo[singleRes.type as ResultType].belongsToAllNetworks)
+    response.data = response.data.filter(
+      singleRes =>
+        searchableNetworks.includes(singleRes.chain_id)
+        || TypeInfo[singleRes.type as ResultType].belongsToAllNetworks,
+    )
   }
   // adding fake numbers of identical results where it is possible
   for (const singleRes of response.data) {
     const batchSize = 2 + Math.floor(30 * Math.random())
     switch (TypeInfo[singleRes.type as ResultType].countSource) {
-      case Indirect.APInum_value: singleRes.num_value = batchSize
+      case Indirect.APInum_value:
+        singleRes.num_value = batchSize
         break
       // add cases here in the future if new fields can hold batches or counts
     }
@@ -323,7 +354,7 @@ export function simulateAPIresponseForTheSearchBar (body? : Record<string, any>)
 
 let mockSlot = 10000
 
-export function mockLatestState (..._:any): InternalGetLatestStateResponse {
+export function mockLatestState(..._: any): InternalGetLatestStateResponse {
   const randomize = (num: number) => {
     return num + Math.random() * num
   }
@@ -335,41 +366,56 @@ export function mockLatestState (..._:any): InternalGetLatestStateResponse {
           code: 'USD',
           currency: 'Dollar',
           symbol: '$',
-          rate: randomize(2996.79)
+          rate: randomize(2996.79),
         },
         {
           code: 'EUR',
           currency: 'Euro',
           symbol: '€',
-          rate: randomize(2758.45)
-        }
-      ]
-    }
+          rate: randomize(2758.45),
+        },
+      ],
+    },
   }
 }
 
 interface ApiChainInfo {
-  chain_id: number,
+  chain_id: number
   name: string
 }
 
-export function simulateAPIresponseAboutNetworkList () : ApiDataResponse<ApiChainInfo[]> {
+export function simulateAPIresponseAboutNetworkList(): ApiDataResponse<
+  ApiChainInfo[]
+> {
   const result = { data: [] } as ApiDataResponse<ApiChainInfo[]>
   if (isMainNet(Number(useRuntimeConfig().public.chainIdByDefault))) {
-    result.data.push({ chain_id: 1, name: 'ethereum' }, { chain_id: 100, name: 'gnosis' })
+    result.data.push(
+      { chain_id: 1, name: 'ethereum' },
+      { chain_id: 100, name: 'gnosis' },
+    )
     if (useRuntimeConfig().public.showInDevelopment) {
-      result.data.push({ chain_id: 42161, name: 'arbitrum' }, { chain_id: 8453, name: 'base' })
+      result.data.push(
+        { chain_id: 42161, name: 'arbitrum' },
+        { chain_id: 8453, name: 'base' },
+      )
     }
-  } else {
-    result.data.push({ chain_id: 17000, name: 'holesky' }, { chain_id: 10200, name: 'chiado' })
+  }
+  else {
+    result.data.push(
+      { chain_id: 17000, name: 'holesky' },
+      { chain_id: 10200, name: 'chiado' },
+    )
     if (useRuntimeConfig().public.showInDevelopment) {
-      result.data.push({ chain_id: 421614, name: 'arbitrum testnet' }, { chain_id: 84532, name: 'base testnet' })
+      result.data.push(
+        { chain_id: 421614, name: 'arbitrum testnet' },
+        { chain_id: 84532, name: 'base testnet' },
+      )
     }
   }
   return result
 }
 
-export function mockManageNotificationsGeneral (): InternalGetUserNotificationSettingsResponse {
+export function mockManageNotificationsGeneral(): InternalGetUserNotificationSettingsResponse {
   return {
     data: {
       general_settings: {
@@ -383,7 +429,7 @@ export function mockManageNotificationsGeneral (): InternalGetUserNotificationSe
         subscribed_clients: [],
         is_rocket_pool_new_reward_round_subscribed: true,
         rocket_pool_max_collateral_threshold: 29823,
-        rocket_pool_min_collateral_threshold: 123
+        rocket_pool_min_collateral_threshold: 123,
       },
       networks: [],
       paired_devices: [
@@ -391,15 +437,15 @@ export function mockManageNotificationsGeneral (): InternalGetUserNotificationSe
           id: 'ABC-test',
           name: 'My device',
           is_notifications_enabled: true,
-          paired_timestamp: 1620000000
+          paired_timestamp: 1620000000,
         },
         {
           id: 'DEF-test',
           name: 'My other device',
           is_notifications_enabled: false,
-          paired_timestamp: 1700000000
-        }
-      ]
-    }
+          paired_timestamp: 1700000000,
+        },
+      ],
+    },
   }
 }
diff --git a/frontend/utils/regexp.ts b/frontend/utils/regexp.ts
index 8f54e8116..4646c81f4 100644
--- a/frontend/utils/regexp.ts
+++ b/frontend/utils/regexp.ts
@@ -1,5 +1,6 @@
 export const REGEXP_HAS_NUMBERS = /^(?!0+$)\d+$/
 
+// eslint-disable-next-line vue/max-len
 export const REGEXP_VALID_EMAIL = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i
 
 export const REGEXP_VALID_NAME = /^(?=.*[a-zA-Z0-9])[a-zA-Z0-9 ]*$/
diff --git a/frontend/utils/table.ts b/frontend/utils/table.ts
index dfbf67522..ea166ddd0 100644
--- a/frontend/utils/table.ts
+++ b/frontend/utils/table.ts
@@ -1,21 +1,34 @@
 import type { DataTableSortEvent } from 'primevue/datatable'
 import type { TableQueryParams, Cursor } from '~/types/datatable'
 
-export const setQueryPageSize = (limit: number, query?: TableQueryParams): TableQueryParams => {
+export const setQueryPageSize = (
+  limit: number,
+  query?: TableQueryParams,
+): TableQueryParams => {
   return { ...query, limit }
 }
 
-export const setQueryCursor = (cursor: Cursor, query?: TableQueryParams): TableQueryParams => {
+export const setQueryCursor = (
+  cursor: Cursor,
+  query?: TableQueryParams,
+): TableQueryParams => {
   return { ...query, cursor }
 }
 
-export const setQuerySearch = (search?: string, query?: TableQueryParams): TableQueryParams => {
+export const setQuerySearch = (
+  search?: string,
+  query?: TableQueryParams,
+): TableQueryParams => {
   return { ...query, search }
 }
 
-export const getSortOrder = (dir?: number | null) => dir === -1 ? 'asc' : 'desc'
+export const getSortOrder = (dir?: number | null) =>
+  dir === -1 ? 'asc' : 'desc'
 
-export const setQuerySort = (sort?: DataTableSortEvent, query?: TableQueryParams): TableQueryParams => {
+export const setQuerySort = (
+  sort?: DataTableSortEvent,
+  query?: TableQueryParams,
+): TableQueryParams => {
   query = query || {}
   if (sort?.multiSortMeta?.length) {
     if (!query) {
@@ -23,19 +36,23 @@ export const setQuerySort = (sort?: DataTableSortEvent, query?: TableQueryParams
     }
     query = {
       ...query,
-      sort: sort?.multiSortMeta.map((obj) => {
-        return `${obj.field}:${getSortOrder(obj.order)}`
-      }).join(',')
+      sort: sort?.multiSortMeta
+        .map((obj) => {
+          return `${obj.field}:${getSortOrder(obj.order)}`
+        })
+        .join(','),
     }
-  } else if (sort?.sortField && sort?.sortOrder) {
+  }
+  else if (sort?.sortField && sort?.sortOrder) {
     if (!query) {
       query = {}
     }
     query = {
       ...query,
-      sort: `${sort.sortField}:${getSortOrder(sort?.sortOrder)}`
+      sort: `${sort.sortField}:${getSortOrder(sort?.sortOrder)}`,
     }
-  } else if (query) {
+  }
+  else if (query) {
     delete query.sort
     delete query.order
   }
diff --git a/frontend/utils/translation.ts b/frontend/utils/translation.ts
index d3f8328eb..47979723b 100644
--- a/frontend/utils/translation.ts
+++ b/frontend/utils/translation.ts
@@ -3,48 +3,80 @@ import type { ComposerTranslation } from 'vue-i18n'
 const NOT_FOUND = 'NOT_FOUND'
 const END_OF_ARRAY = 'END_OF_ARRAY'
 
-export function formatMultiPartSpan (t: ComposerTranslation, key: string, classes: (string | undefined)[], options?: any) {
-  const parts = classes.map((c, index) => {
-    const value = tOf(t, key, index, options)
-    if (!value) {
-      return undefined
-    }
-    const classString = c ? `class="${c}"` : ''
-    return `<span ${classString}>${value}</span>`
-  }).filter(v => !!v)
+export function formatMultiPartSpan(
+  t: ComposerTranslation,
+  key: string,
+  classes: (string | undefined)[],
+  options?: any,
+) {
+  const parts = classes
+    .map((c, index) => {
+      const value = tOf(t, key, index, options)
+      if (!value) {
+        return undefined
+      }
+      const classString = c ? `class="${c}"` : ''
+      return `<span ${classString}>${value}</span>`
+    })
+    .filter(v => !!v)
 
   return `<span>${parts.join(' ')}</span>`
 }
 
-/** Translation with default. Needed if we want to default to '' as the translation lib does not support to default to '' */
-export function tD (t: ComposerTranslation, path : string, options?: any, d:string = '') : string {
+/** Translation with default. Needed if we want to default to '' as the
+ * translation lib does not support to default to '' */
+export function tD(
+  t: ComposerTranslation,
+  path: string,
+  options?: any,
+  d: string = '',
+): string {
   if (typeof options === 'number') {
     options = { plural: options }
   }
   const translation = t(path, NOT_FOUND, { ...options, missingWarn: false })
-  return (translation === NOT_FOUND) ? d : translation
+  return translation === NOT_FOUND ? d : translation
 }
 
-function tOfWithEOA (t: ComposerTranslation, path : string, index : number, options?: any) : string {
+function tOfWithEOA(
+  t: ComposerTranslation,
+  path: string,
+  index: number,
+  options?: any,
+): string {
   return tD(t, `${path}[${index}]`, options, END_OF_ARRAY)
 }
 
 /** gets a translation at a specific index, if it exists */
-export function tOf (t: ComposerTranslation, path : string, index : number, options?: any) : string {
+export function tOf(
+  t: ComposerTranslation,
+  path: string,
+  index: number,
+  options?: any,
+): string {
   const element = tOfWithEOA(t, path, index, options)
-  return (element === END_OF_ARRAY) ? '' : element
+  return element === END_OF_ARRAY ? '' : element
 }
 
 /** returns an array of translations (with only one element if the translation data is a simple string) */
-export function tAll (t: ComposerTranslation, path : string, options?: any) : string[] {
+export function tAll(
+  t: ComposerTranslation,
+  path: string,
+  options?: any,
+): string[] {
   const list: string[] = []
   if (tD(t, path, options, NOT_FOUND) !== NOT_FOUND) {
     // the data is a string, we push the translation
     list.push(tD(t, path, options))
-  } else {
+  }
+  else {
     // the data is an array
     let index = 0
-    for (let value = tOfWithEOA(t, path, index, options); value !== END_OF_ARRAY; value = tOfWithEOA(t, path, ++index, options)) {
+    for (
+      let value = tOfWithEOA(t, path, index, options);
+      value !== END_OF_ARRAY;
+      value = tOfWithEOA(t, path, ++index, options)
+    ) {
       list.push(value)
     }
   }
diff --git a/frontend/utils/userValidation.ts b/frontend/utils/userValidation.ts
index 061ae2fe8..ca089d0de 100644
--- a/frontend/utils/userValidation.ts
+++ b/frontend/utils/userValidation.ts
@@ -1,27 +1,50 @@
 import type { ComposerTranslation } from 'vue-i18n'
-import type { StringSchema, BooleanSchema } from 'yup';
+import type { StringSchema, BooleanSchema } from 'yup'
 import { ref as yupRef, string as yupString, boolean as yupBool } from 'yup'
 
-export function passwordValidation (t: ComposerTranslation) : StringSchema {
-  return yupString().required(t('validation.password.empty')).min(5, t('validation.password.min', { amount: 5 })).max(64, t('validation.password.max', { amount: 64 }))
+export function passwordValidation(t: ComposerTranslation): StringSchema {
+  return yupString()
+    .required(t('validation.password.empty'))
+    .min(5, t('validation.password.min', { amount: 5 }))
+    .max(64, t('validation.password.max', { amount: 64 }))
 }
 
-export function confirmPasswordValidation (t: ComposerTranslation, comparerRefName: string) : StringSchema {
-  return passwordValidation(t).oneOf([yupRef(comparerRefName)], t('validation.password.no_match'))
+export function confirmPasswordValidation(
+  t: ComposerTranslation,
+  comparerRefName: string,
+): StringSchema {
+  return passwordValidation(t).oneOf(
+    [yupRef(comparerRefName)],
+    t('validation.password.no_match'),
+  )
 }
 
-export function newPasswordValidation (t: ComposerTranslation, oldRefName: string) : StringSchema {
-  return passwordValidation(t).notOneOf([yupRef(oldRefName)], t('validation.password.not_new'))
+export function newPasswordValidation(
+  t: ComposerTranslation,
+  oldRefName: string,
+): StringSchema {
+  return passwordValidation(t).notOneOf(
+    [yupRef(oldRefName)],
+    t('validation.password.not_new'),
+  )
 }
 
-export function emailValidation (t: ComposerTranslation) : StringSchema {
-  return yupString().required(t('validation.email.empty')).matches(REGEXP_VALID_EMAIL, t('validation.email.invalid'))
+export function emailValidation(t: ComposerTranslation): StringSchema {
+  return yupString()
+    .required(t('validation.email.empty'))
+    .matches(REGEXP_VALID_EMAIL, t('validation.email.invalid'))
 }
 
-export function confirmEmailValidation (t: ComposerTranslation, comparerRefName: string) : StringSchema {
-  return emailValidation(t).oneOf([yupRef(comparerRefName)], t('validation.email.no_match'))
+export function confirmEmailValidation(
+  t: ComposerTranslation,
+  comparerRefName: string,
+): StringSchema {
+  return emailValidation(t).oneOf(
+    [yupRef(comparerRefName)],
+    t('validation.email.no_match'),
+  )
 }
 
-export function checkboxValidation (errorMessage: string) : BooleanSchema {
+export function checkboxValidation(errorMessage: string): BooleanSchema {
   return yupBool().test('is-true', errorMessage, value => value === true)
 }
diff --git a/frontend/utils/validation.ts b/frontend/utils/validation.ts
index 3de04b35b..5bec30b13 100644
--- a/frontend/utils/validation.ts
+++ b/frontend/utils/validation.ts
@@ -1,9 +1,9 @@
-import { boolean, object, string, type AnySchema} from "yup";
+import { boolean, object, string, type AnySchema } from 'yup'
 
 export const createSchemaObject = (schema: Record<string, AnySchema>) => {
- return object({
-  ...schema
- })
+  return object({
+    ...schema,
+  })
 }
 
 export const validation = {