diff --git a/frontend/.vscode/extensions.json b/frontend/.vscode/extensions.json
index fcb6deda8..2f9947a77 100644
--- a/frontend/.vscode/extensions.json
+++ b/frontend/.vscode/extensions.json
@@ -7,4 +7,4 @@
     "nuxtr.nuxt-vscode-extentions",
     "vue.volar"
   ]
-}
\ No newline at end of file
+}
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
index 620085a67..20cd55771 100644
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -1,12 +1,4 @@
 {
-  "conventionalCommits.scopes": [
-    "i18n",
-    "vscode",
-    "eslint"
-  ],
-  "editor.rulers": [
-    80,
-    120
-],
-
-}
\ No newline at end of file
+  "conventionalCommits.scopes": ["i18n", "vscode", "eslint"],
+  "editor.rulers": [80, 120]
+}
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 0d41bc123..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 51caf3ee7..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/prime_origin.scss b/frontend/assets/css/prime_origin.scss
index 9e9368850..14df2e119 100644
--- a/frontend/assets/css/prime_origin.scss
+++ b/frontend/assets/css/prime_origin.scss
@@ -8,18 +8,18 @@
   font-family: "Inter var", sans-serif;
   font-feature-settings: "cv02", "cv03", "cv04", "cv11";
   font-variation-settings: normal;
-  --font-family:"Inter var", sans-serif;
-  --font-feature-settings: "cv02","cv03","cv04","cv11";
-  --surface-a:#ffffff;
-  --surface-b:#f9fafb;
-  --surface-c:#f3f4f6;
-  --surface-d:#e5e7eb;
-  --surface-e:#ffffff;
-  --surface-f:#ffffff;
-  --text-color:#4b5563;
-  --text-color-secondary:#6b7280;
-  --primary-color:#10b981;
-  --primary-color-text:#ffffff;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #ffffff;
+  --surface-b: #f9fafb;
+  --surface-c: #f3f4f6;
+  --surface-d: #e5e7eb;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #4b5563;
+  --text-color-secondary: #6b7280;
+  --primary-color: #10b981;
+  --primary-color-text: #ffffff;
   --surface-0: #ffffff;
   --surface-50: #f9fafb;
   --surface-100: #f3f4f6;
@@ -41,18 +41,18 @@
   --gray-700: #374151;
   --gray-800: #1f2937;
   --gray-900: #111827;
-  --content-padding:1.25rem;
-  --inline-spacing:0.5rem;
-  --border-radius:6px;
-  --surface-ground:#f9fafb;
-  --surface-section:#ffffff;
-  --surface-card:#ffffff;
-  --surface-overlay:#ffffff;
-  --surface-border:#dfe7ef;
-  --surface-hover:#f6f9fc;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #f9fafb;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dfe7ef;
+  --surface-hover: #f6f9fc;
   --focus-ring: 0 0 0 0.2rem #a7f3d0;
   --maskbg: rgba(0, 0, 0, 0.4);
-  --highlight-bg: #F0FDFA;
+  --highlight-bg: #f0fdfa;
   --highlight-text-color: #047857;
   color-scheme: light;
 }
@@ -74,126 +74,126 @@
   src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
 }
 :root {
-  --blue-50:#f5f9ff;
-  --blue-100:#d0e1fd;
-  --blue-200:#abc9fb;
-  --blue-300:#85b2f9;
-  --blue-400:#609af8;
-  --blue-500:#3b82f6;
-  --blue-600:#326fd1;
-  --blue-700:#295bac;
-  --blue-800:#204887;
-  --blue-900:#183462;
-  --green-50:#f4fcf7;
-  --green-100:#caf1d8;
-  --green-200:#a0e6ba;
-  --green-300:#76db9b;
-  --green-400:#4cd07d;
-  --green-500:#22c55e;
-  --green-600:#1da750;
-  --green-700:#188a42;
-  --green-800:#136c34;
-  --green-900:#0e4f26;
-  --yellow-50:#fefbf3;
-  --yellow-100:#faedc4;
-  --yellow-200:#f6de95;
-  --yellow-300:#f2d066;
-  --yellow-400:#eec137;
-  --yellow-500:#eab308;
-  --yellow-600:#c79807;
-  --yellow-700:#a47d06;
-  --yellow-800:#816204;
-  --yellow-900:#5e4803;
-  --cyan-50:#f3fbfd;
-  --cyan-100:#c3edf5;
-  --cyan-200:#94e0ed;
-  --cyan-300:#65d2e4;
-  --cyan-400:#35c4dc;
-  --cyan-500:#06b6d4;
-  --cyan-600:#059bb4;
-  --cyan-700:#047f94;
-  --cyan-800:#036475;
-  --cyan-900:#024955;
-  --pink-50:#fef6fa;
-  --pink-100:#fad3e7;
-  --pink-200:#f7b0d3;
-  --pink-300:#f38ec0;
-  --pink-400:#f06bac;
-  --pink-500:#ec4899;
-  --pink-600:#c93d82;
-  --pink-700:#a5326b;
-  --pink-800:#822854;
-  --pink-900:#5e1d3d;
-  --indigo-50:#f7f7fe;
-  --indigo-100:#dadafc;
-  --indigo-200:#bcbdf9;
-  --indigo-300:#9ea0f6;
-  --indigo-400:#8183f4;
-  --indigo-500:#6366f1;
-  --indigo-600:#5457cd;
-  --indigo-700:#4547a9;
-  --indigo-800:#363885;
-  --indigo-900:#282960;
-  --teal-50:#f3fbfb;
-  --teal-100:#c7eeea;
-  --teal-200:#9ae0d9;
-  --teal-300:#6dd3c8;
-  --teal-400:#41c5b7;
-  --teal-500:#14b8a6;
-  --teal-600:#119c8d;
-  --teal-700:#0e8174;
-  --teal-800:#0b655b;
-  --teal-900:#084a42;
-  --orange-50:#fff8f3;
-  --orange-100:#feddc7;
-  --orange-200:#fcc39b;
-  --orange-300:#fba86f;
-  --orange-400:#fa8e42;
-  --orange-500:#f97316;
-  --orange-600:#d46213;
-  --orange-700:#ae510f;
-  --orange-800:#893f0c;
-  --orange-900:#642e09;
-  --bluegray-50:#f7f8f9;
-  --bluegray-100:#dadee3;
-  --bluegray-200:#bcc3cd;
-  --bluegray-300:#9fa9b7;
-  --bluegray-400:#818ea1;
-  --bluegray-500:#64748b;
-  --bluegray-600:#556376;
-  --bluegray-700:#465161;
-  --bluegray-800:#37404c;
-  --bluegray-900:#282e38;
-  --purple-50:#fbf7ff;
-  --purple-100:#ead6fd;
-  --purple-200:#dab6fc;
-  --purple-300:#c996fa;
-  --purple-400:#b975f9;
-  --purple-500:#a855f7;
-  --purple-600:#8f48d2;
-  --purple-700:#763cad;
-  --purple-800:#5c2f88;
-  --purple-900:#432263;
-  --red-50:#fff5f5;
-  --red-100:#ffd0ce;
-  --red-200:#ffaca7;
-  --red-300:#ff8780;
-  --red-400:#ff6259;
-  --red-500:#ff3d32;
-  --red-600:#d9342b;
-  --red-700:#b32b23;
-  --red-800:#8c221c;
-  --red-900:#661814;
-  --primary-50:#f3fcf9;
-  --primary-100:#c6eee1;
-  --primary-200:#98e1c9;
-  --primary-300:#6bd4b1;
-  --primary-400:#3dc699;
-  --primary-500:#10b981;
-  --primary-600:#0e9d6e;
-  --primary-700:#0b825a;
-  --primary-800:#096647;
-  --primary-900:#064a34;
+  --blue-50: #f5f9ff;
+  --blue-100: #d0e1fd;
+  --blue-200: #abc9fb;
+  --blue-300: #85b2f9;
+  --blue-400: #609af8;
+  --blue-500: #3b82f6;
+  --blue-600: #326fd1;
+  --blue-700: #295bac;
+  --blue-800: #204887;
+  --blue-900: #183462;
+  --green-50: #f4fcf7;
+  --green-100: #caf1d8;
+  --green-200: #a0e6ba;
+  --green-300: #76db9b;
+  --green-400: #4cd07d;
+  --green-500: #22c55e;
+  --green-600: #1da750;
+  --green-700: #188a42;
+  --green-800: #136c34;
+  --green-900: #0e4f26;
+  --yellow-50: #fefbf3;
+  --yellow-100: #faedc4;
+  --yellow-200: #f6de95;
+  --yellow-300: #f2d066;
+  --yellow-400: #eec137;
+  --yellow-500: #eab308;
+  --yellow-600: #c79807;
+  --yellow-700: #a47d06;
+  --yellow-800: #816204;
+  --yellow-900: #5e4803;
+  --cyan-50: #f3fbfd;
+  --cyan-100: #c3edf5;
+  --cyan-200: #94e0ed;
+  --cyan-300: #65d2e4;
+  --cyan-400: #35c4dc;
+  --cyan-500: #06b6d4;
+  --cyan-600: #059bb4;
+  --cyan-700: #047f94;
+  --cyan-800: #036475;
+  --cyan-900: #024955;
+  --pink-50: #fef6fa;
+  --pink-100: #fad3e7;
+  --pink-200: #f7b0d3;
+  --pink-300: #f38ec0;
+  --pink-400: #f06bac;
+  --pink-500: #ec4899;
+  --pink-600: #c93d82;
+  --pink-700: #a5326b;
+  --pink-800: #822854;
+  --pink-900: #5e1d3d;
+  --indigo-50: #f7f7fe;
+  --indigo-100: #dadafc;
+  --indigo-200: #bcbdf9;
+  --indigo-300: #9ea0f6;
+  --indigo-400: #8183f4;
+  --indigo-500: #6366f1;
+  --indigo-600: #5457cd;
+  --indigo-700: #4547a9;
+  --indigo-800: #363885;
+  --indigo-900: #282960;
+  --teal-50: #f3fbfb;
+  --teal-100: #c7eeea;
+  --teal-200: #9ae0d9;
+  --teal-300: #6dd3c8;
+  --teal-400: #41c5b7;
+  --teal-500: #14b8a6;
+  --teal-600: #119c8d;
+  --teal-700: #0e8174;
+  --teal-800: #0b655b;
+  --teal-900: #084a42;
+  --orange-50: #fff8f3;
+  --orange-100: #feddc7;
+  --orange-200: #fcc39b;
+  --orange-300: #fba86f;
+  --orange-400: #fa8e42;
+  --orange-500: #f97316;
+  --orange-600: #d46213;
+  --orange-700: #ae510f;
+  --orange-800: #893f0c;
+  --orange-900: #642e09;
+  --bluegray-50: #f7f8f9;
+  --bluegray-100: #dadee3;
+  --bluegray-200: #bcc3cd;
+  --bluegray-300: #9fa9b7;
+  --bluegray-400: #818ea1;
+  --bluegray-500: #64748b;
+  --bluegray-600: #556376;
+  --bluegray-700: #465161;
+  --bluegray-800: #37404c;
+  --bluegray-900: #282e38;
+  --purple-50: #fbf7ff;
+  --purple-100: #ead6fd;
+  --purple-200: #dab6fc;
+  --purple-300: #c996fa;
+  --purple-400: #b975f9;
+  --purple-500: #a855f7;
+  --purple-600: #8f48d2;
+  --purple-700: #763cad;
+  --purple-800: #5c2f88;
+  --purple-900: #432263;
+  --red-50: #fff5f5;
+  --red-100: #ffd0ce;
+  --red-200: #ffaca7;
+  --red-300: #ff8780;
+  --red-400: #ff6259;
+  --red-500: #ff3d32;
+  --red-600: #d9342b;
+  --red-700: #b32b23;
+  --red-800: #8c221c;
+  --red-900: #661814;
+  --primary-50: #f3fcf9;
+  --primary-100: #c6eee1;
+  --primary-200: #98e1c9;
+  --primary-300: #6bd4b1;
+  --primary-400: #3dc699;
+  --primary-500: #10b981;
+  --primary-600: #0e9d6e;
+  --primary-700: #0b825a;
+  --primary-800: #096647;
+  --primary-900: #064a34;
 }
 
 .p-editor-container .p-editor-toolbar {
@@ -214,39 +214,75 @@
   border: 0 none;
   color: #6b7280;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+.p-editor-container
+  .p-editor-toolbar.ql-snow
+  .ql-picker
+  .ql-picker-label:hover {
   color: #4b5563;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+.p-editor-container
+  .p-editor-toolbar.ql-snow
+  .ql-picker
+  .ql-picker-label:hover
+  .ql-stroke {
   stroke: #4b5563;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+.p-editor-container
+  .p-editor-toolbar.ql-snow
+  .ql-picker
+  .ql-picker-label:hover
+  .ql-fill {
   fill: #4b5563;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+.p-editor-container
+  .p-editor-toolbar.ql-snow
+  .ql-picker.ql-expanded
+  .ql-picker-label {
   color: #4b5563;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+.p-editor-container
+  .p-editor-toolbar.ql-snow
+  .ql-picker.ql-expanded
+  .ql-picker-label
+  .ql-stroke {
   stroke: #4b5563;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+.p-editor-container
+  .p-editor-toolbar.ql-snow
+  .ql-picker.ql-expanded
+  .ql-picker-label
+  .ql-fill {
   fill: #4b5563;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+.p-editor-container
+  .p-editor-toolbar.ql-snow
+  .ql-picker.ql-expanded
+  .ql-picker-options {
   background: #ffffff;
   border: 0 none;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   border-radius: 6px;
   padding: 0.75rem 0;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+.p-editor-container
+  .p-editor-toolbar.ql-snow
+  .ql-picker.ql-expanded
+  .ql-picker-options
+  .ql-picker-item {
   color: #4b5563;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+.p-editor-container
+  .p-editor-toolbar.ql-snow
+  .ql-picker.ql-expanded
+  .ql-picker-options
+  .ql-picker-item:hover {
   color: #4b5563;
   background: #f3f4f6;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+.p-editor-container
+  .p-editor-toolbar.ql-snow
+  .ql-picker.ql-expanded:not(.ql-icon-picker)
+  .ql-picker-item {
   padding: 0.75rem 1.25rem;
 }
 .p-editor-container .p-editor-content {
@@ -290,8 +326,14 @@
   fill: #10b981;
 }
 .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
+.p-editor-container
+  .ql-snow.ql-toolbar
+  .ql-picker-label.ql-active
+  .ql-picker-label,
+.p-editor-container
+  .ql-snow.ql-toolbar
+  .ql-picker-item.ql-selected
+  .ql-picker-label {
   color: #10b981;
 }
 
@@ -312,7 +354,8 @@
     transition-duration: 0.2s;
   }
 
-  .p-disabled, .p-component:disabled {
+  .p-disabled,
+  .p-component:disabled {
     opacity: 0.6;
   }
 
@@ -389,10 +432,15 @@
     padding: 0.375rem 0.75rem;
     gap: 0.5rem;
   }
-  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+  .p-autocomplete
+    .p-autocomplete-multiple-container
+    .p-autocomplete-input-token {
     padding: 0.375rem 0;
   }
-  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+  .p-autocomplete
+    .p-autocomplete-multiple-container
+    .p-autocomplete-input-token
+    input {
     font-family: var(--font-family);
     font-feature-settings: var(--font-feature-settings, normal);
     font-size: 1rem;
@@ -406,10 +454,15 @@
     color: #4b5563;
     border-radius: 16px;
   }
-  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
+  .p-autocomplete
+    .p-autocomplete-multiple-container
+    .p-autocomplete-token
+    .p-autocomplete-token-icon {
     margin-left: 0.5rem;
   }
-  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus {
+  .p-autocomplete
+    .p-autocomplete-multiple-container
+    .p-autocomplete-token.p-focus {
     background: #d1d5db;
     color: #4b5563;
   }
@@ -438,16 +491,22 @@
   }
   .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus {
+  .p-autocomplete-panel
+    .p-autocomplete-items
+    .p-autocomplete-item.p-highlight.p-focus {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus {
+  .p-autocomplete-panel
+    .p-autocomplete-items
+    .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #e5e7eb;
   }
-  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-autocomplete-panel
+    .p-autocomplete-items
+    .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover {
     color: #4b5563;
     background: #f3f4f6;
   }
@@ -495,23 +554,26 @@
     border-top-left-radius: 6px;
   }
   .p-datepicker .p-datepicker-header .p-datepicker-prev,
-.p-datepicker .p-datepicker-header .p-datepicker-next {
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
     width: 2rem;
     height: 2rem;
     color: #6b7280;
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
-.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+  .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
     color: #374151;
     border-color: transparent;
     background: #f3f4f6;
   }
   .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
-.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
@@ -520,14 +582,23 @@
     line-height: 2rem;
   }
   .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
-.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
     color: #4b5563;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     font-weight: 600;
     padding: 0.5rem;
   }
-  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
-.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+  .p-datepicker
+    .p-datepicker-header
+    .p-datepicker-title
+    .p-datepicker-year:enabled:hover,
+  .p-datepicker
+    .p-datepicker-header
+    .p-datepicker-title
+    .p-datepicker-month:enabled:hover {
     color: #10b981;
   }
   .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
@@ -556,7 +627,7 @@
   }
   .p-datepicker table td > span.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
   .p-datepicker table td > span:focus {
     outline: 0 none;
@@ -570,7 +641,7 @@
   }
   .p-datepicker table td.p-datepicker-today > span.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
   .p-datepicker .p-datepicker-buttonbar {
     padding: 1rem 0;
@@ -590,7 +661,10 @@
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-datepicker .p-timepicker button:enabled:hover {
     color: #374151;
@@ -624,7 +698,7 @@
   }
   .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
   .p-datepicker .p-yearpicker {
     margin: 0.5rem 0;
@@ -636,7 +710,7 @@
   }
   .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
     border-left: 1px solid #e5e7eb;
@@ -652,29 +726,44 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
-  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+  .p-datepicker.p-datepicker-mobile table th,
+  .p-datepicker.p-datepicker-mobile table td {
     padding: 0;
   }
-  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+  .p-datepicker:not(.p-disabled)
+    table
+    td
+    span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
   }
-  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+  .p-datepicker:not(.p-disabled)
+    table
+    td
+    span:not(.p-highlight):not(.p-disabled):focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
-  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+  .p-datepicker:not(.p-disabled)
+    .p-monthpicker
+    .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
     background: #f3f4f6;
   }
-  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+  .p-datepicker:not(.p-disabled)
+    .p-monthpicker
+    .p-monthpicker-month:not(.p-disabled):focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
-  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+  .p-datepicker:not(.p-disabled)
+    .p-yearpicker
+    .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
     background: #f3f4f6;
   }
-  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+  .p-datepicker:not(.p-disabled)
+    .p-yearpicker
+    .p-yearpicker-year:not(.p-disabled):focus {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
@@ -683,7 +772,11 @@
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #d1d5db;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
     border-radius: 6px;
   }
   .p-cascadeselect:not(.p-disabled):hover {
@@ -736,25 +829,39 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+  .p-cascadeselect-panel
+    .p-cascadeselect-items
+    .p-cascadeselect-item.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+  .p-cascadeselect-panel
+    .p-cascadeselect-items
+    .p-cascadeselect-item.p-highlight.p-focus {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+  .p-cascadeselect-panel
+    .p-cascadeselect-items
+    .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #e5e7eb;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-cascadeselect-panel
+    .p-cascadeselect-items
+    .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
     color: #4b5563;
     background: #f3f4f6;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+  .p-cascadeselect-panel
+    .p-cascadeselect-items
+    .p-cascadeselect-item
+    .p-cascadeselect-item-content {
     padding: 0.75rem 1.25rem;
   }
-  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+  .p-cascadeselect-panel
+    .p-cascadeselect-items
+    .p-cascadeselect-item
+    .p-cascadeselect-group-icon {
     font-size: 0.875rem;
   }
 
@@ -779,7 +886,11 @@
     height: 22px;
     color: #4b5563;
     border-radius: 6px;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
@@ -821,7 +932,9 @@
   .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
     background-color: #f3f4f6;
   }
-  .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  .p-input-filled
+    .p-checkbox:not(.p-checkbox-disabled)
+    .p-checkbox-box.p-highlight:hover {
     background: #047857;
   }
 
@@ -876,7 +989,7 @@
     border: 1px solid #191919;
   }
   .p-colorpicker-panel .p-colorpicker-color-handle,
-.p-colorpicker-panel .p-colorpicker-hue-handle {
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
     border-color: #ffffff;
   }
 
@@ -887,7 +1000,11 @@
   .p-dropdown {
     background: #ffffff;
     border: 1px solid #d1d5db;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
     border-radius: 6px;
   }
   .p-dropdown:not(.p-disabled):hover {
@@ -909,7 +1026,8 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6b7280;
   }
-  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus,
+  .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -966,16 +1084,20 @@
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+  .p-dropdown-panel
+    .p-dropdown-items
+    .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #e5e7eb;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel
+    .p-dropdown-items
+    .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #4b5563;
     background: #f3f4f6;
   }
@@ -1019,32 +1141,32 @@
   }
 
   .p-inputgroup > .p-component,
-.p-inputgroup > .p-inputwrapper > .p-inputtext,
-.p-inputgroup > .p-float-label > .p-component {
+  .p-inputgroup > .p-inputwrapper > .p-inputtext,
+  .p-inputgroup > .p-float-label > .p-component {
     border-radius: 0;
     margin: 0;
   }
   .p-inputgroup > .p-component + .p-inputgroup-addon,
-.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon,
-.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
+  .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon,
+  .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
     border-left: 0 none;
   }
   .p-inputgroup > .p-component:focus,
-.p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
-.p-inputgroup > .p-float-label > .p-component:focus {
+  .p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
+  .p-inputgroup > .p-float-label > .p-component:focus {
     z-index: 1;
   }
   .p-inputgroup > .p-component:focus ~ label,
-.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label,
-.p-inputgroup > .p-float-label > .p-component:focus ~ label {
+  .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label,
+  .p-inputgroup > .p-float-label > .p-component:focus ~ label {
     z-index: 1;
   }
 
   .p-inputgroup-addon:first-child,
-.p-inputgroup button:first-child,
-.p-inputgroup input:first-child,
-.p-inputgroup > .p-inputwrapper:first-child,
-.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+  .p-inputgroup button:first-child,
+  .p-inputgroup input:first-child,
+  .p-inputgroup > .p-inputwrapper:first-child,
+  .p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
   }
@@ -1055,10 +1177,10 @@
   }
 
   .p-inputgroup-addon:last-child,
-.p-inputgroup button:last-child,
-.p-inputgroup input:last-child,
-.p-inputgroup > .p-inputwrapper:last-child,
-.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+  .p-inputgroup button:last-child,
+  .p-inputgroup input:last-child,
+  .p-inputgroup > .p-inputwrapper:last-child,
+  .p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
   }
@@ -1085,7 +1207,11 @@
   }
   .p-inputswitch .p-inputswitch-slider {
     background: #d1d5db;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
     border-radius: 30px;
   }
   .p-inputswitch .p-inputswitch-slider:before {
@@ -1114,7 +1240,8 @@
   .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
     background: #ffffff;
   }
-  .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
+  .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover
+    .p-inputswitch-slider {
     background: #059669;
   }
   .p-inputswitch.p-invalid .p-inputswitch-slider {
@@ -1129,7 +1256,11 @@
     background: #ffffff;
     padding: 0.75rem 0.75rem;
     border: 1px solid #d1d5db;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
     appearance: none;
     border-radius: 6px;
   }
@@ -1165,7 +1296,7 @@
   }
 
   .p-input-icon-left > svg:first-of-type,
-.p-input-icon-left > i:first-of-type {
+  .p-input-icon-left > i:first-of-type {
     left: 0.75rem;
     color: #6b7280;
   }
@@ -1179,7 +1310,7 @@
   }
 
   .p-input-icon-right > svg:last-of-type,
-.p-input-icon-right > i:last-of-type {
+  .p-input-icon-right > i:last-of-type {
     right: 0.75rem;
     color: #6b7280;
   }
@@ -1229,7 +1360,11 @@
     color: #4b5563;
     border: 1px solid #d1d5db;
     border-radius: 6px;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
   .p-listbox .p-listbox-header {
     padding: 0.75rem 1.25rem;
@@ -1261,7 +1396,7 @@
   }
   .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
   .p-listbox .p-listbox-list .p-listbox-item-group {
     margin: 0;
@@ -1278,11 +1413,13 @@
   .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+  .p-listbox:not(.p-disabled)
+    .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #e5e7eb;
   }
-  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-listbox:not(.p-disabled)
+    .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
     color: #4b5563;
     background: #f3f4f6;
   }
@@ -1299,7 +1436,11 @@
   .p-multiselect {
     background: #ffffff;
     border: 1px solid #d1d5db;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
     border-radius: 6px;
   }
   .p-multiselect:not(.p-disabled):hover {
@@ -1313,7 +1454,11 @@
   }
   .p-multiselect .p-multiselect-label {
     padding: 0.75rem 0.75rem;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
   .p-multiselect .p-multiselect-label.p-placeholder {
     color: #6b7280;
@@ -1325,7 +1470,9 @@
     color: #4b5563;
     border-radius: 16px;
   }
-  .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  .p-multiselect.p-multiselect-chip
+    .p-multiselect-token
+    .p-multiselect-token-icon {
     margin-left: 0.5rem;
   }
   .p-multiselect .p-multiselect-trigger {
@@ -1359,10 +1506,16 @@
     border-top-right-radius: 6px;
     border-top-left-radius: 6px;
   }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+  .p-multiselect-panel
+    .p-multiselect-header
+    .p-multiselect-filter-container
+    .p-inputtext {
     padding-right: 1.75rem;
   }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+  .p-multiselect-panel
+    .p-multiselect-header
+    .p-multiselect-filter-container
+    .p-multiselect-filter-icon {
     right: 0.75rem;
     color: #6b7280;
   }
@@ -1377,14 +1530,21 @@
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
+  }
+  .p-multiselect-panel
+    .p-multiselect-header
+    .p-multiselect-close:enabled:hover {
     color: #374151;
     border-color: transparent;
     background: #f3f4f6;
   }
-  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+  .p-multiselect-panel
+    .p-multiselect-header
+    .p-multiselect-close:focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
@@ -1403,16 +1563,22 @@
   }
   .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+  .p-multiselect-panel
+    .p-multiselect-items
+    .p-multiselect-item.p-highlight.p-focus {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+  .p-multiselect-panel
+    .p-multiselect-items
+    .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4b5563;
     background: #e5e7eb;
   }
-  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-multiselect-panel
+    .p-multiselect-items
+    .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
     color: #4b5563;
     background: #f3f4f6;
   }
@@ -1479,7 +1645,11 @@
     height: 22px;
     color: #4b5563;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
     border-color: #10b981;
@@ -1521,7 +1691,9 @@
   .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
     background: #10b981;
   }
-  .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  .p-input-filled
+    .p-radiobutton
+    .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
     background: #047857;
   }
 
@@ -1530,7 +1702,11 @@
   }
   .p-rating .p-rating-item .p-rating-icon {
     color: #4b5563;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
     font-size: 1.143rem;
   }
   .p-rating .p-rating-item .p-rating-icon.p-icon {
@@ -1549,10 +1725,14 @@
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
     color: #10b981;
   }
-  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  .p-rating:not(.p-disabled):not(.p-readonly)
+    .p-rating-item:hover
+    .p-rating-icon {
     color: #10b981;
   }
-  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+  .p-rating:not(.p-disabled):not(.p-readonly)
+    .p-rating-item:hover
+    .p-rating-icon.p-rating-cancel {
     color: #e73d3e;
   }
 
@@ -1560,10 +1740,14 @@
     background: #ffffff;
     border: 1px solid #d1d5db;
     color: #4b5563;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
   .p-selectbutton .p-button .p-button-icon-left,
-.p-selectbutton .p-button .p-button-icon-right {
+  .p-selectbutton .p-button .p-button-icon-right {
     color: #6b7280;
   }
   .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
@@ -1571,8 +1755,12 @@
     border-color: #d1d5db;
     color: #4b5563;
   }
-  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
-.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
+  .p-selectbutton
+    .p-button:not(.p-disabled):not(.p-highlight):hover
+    .p-button-icon-left,
+  .p-selectbutton
+    .p-button:not(.p-disabled):not(.p-highlight):hover
+    .p-button-icon-right {
     color: #374151;
   }
   .p-selectbutton .p-button.p-highlight {
@@ -1581,7 +1769,7 @@
     color: #ffffff;
   }
   .p-selectbutton .p-button.p-highlight .p-button-icon-left,
-.p-selectbutton .p-button.p-highlight .p-button-icon-right {
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
     color: #ffffff;
   }
   .p-selectbutton .p-button.p-highlight:hover {
@@ -1590,7 +1778,7 @@
     color: #ffffff;
   }
   .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
-.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
     color: #ffffff;
   }
   .p-selectbutton.p-invalid > .p-button {
@@ -1622,7 +1810,11 @@
     background: #ffffff;
     border: 2px solid #10b981;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
   .p-slider .p-slider-handle:focus {
     outline: 0 none;
@@ -1640,7 +1832,11 @@
   .p-treeselect {
     background: #ffffff;
     border: 1px solid #d1d5db;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
     border-radius: 6px;
   }
   .p-treeselect:not(.p-disabled):hover {
@@ -1654,7 +1850,11 @@
   }
   .p-treeselect .p-treeselect-label {
     padding: 0.75rem 0.75rem;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
   .p-treeselect .p-treeselect-label.p-placeholder {
     color: #6b7280;
@@ -1711,10 +1911,14 @@
     background: #ffffff;
     border: 1px solid #d1d5db;
     color: #4b5563;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
   .p-togglebutton.p-button .p-button-icon-left,
-.p-togglebutton.p-button .p-button-icon-right {
+  .p-togglebutton.p-button .p-button-icon-right {
     color: #6b7280;
   }
   .p-togglebutton.p-button:not(.p-disabled).p-focus {
@@ -1728,8 +1932,10 @@
     border-color: #d1d5db;
     color: #4b5563;
   }
-  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
-.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
+  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover
+    .p-button-icon-left,
+  .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover
+    .p-button-icon-right {
     color: #374151;
   }
   .p-togglebutton.p-button.p-highlight {
@@ -1738,7 +1944,7 @@
     color: #ffffff;
   }
   .p-togglebutton.p-button.p-highlight .p-button-icon-left,
-.p-togglebutton.p-button.p-highlight .p-button-icon-right {
+  .p-togglebutton.p-button.p-highlight .p-button-icon-right {
     color: #ffffff;
   }
   .p-togglebutton.p-button.p-highlight:hover {
@@ -1747,7 +1953,7 @@
     color: #ffffff;
   }
   .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
-.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
+  .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
     color: #ffffff;
   }
   .p-togglebutton.p-button.p-invalid > .p-button {
@@ -1760,7 +1966,11 @@
     border: 1px solid #10b981;
     padding: 0.75rem 1.25rem;
     font-size: 1rem;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
     border-radius: 6px;
   }
   .p-button:not(:disabled):hover {
@@ -1855,7 +2065,10 @@
     background-color: #ffffff;
   }
   .p-button.p-button-raised {
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
   .p-button.p-button-rounded {
     border-radius: 2rem;
@@ -1865,7 +2078,7 @@
     padding: 0.75rem 0;
   }
   .p-button.p-button-icon-only .p-button-icon-left,
-.p-button.p-button-icon-only .p-button-icon-right {
+  .p-button.p-button-icon-only .p-button-icon-right {
     margin: 0;
   }
   .p-button.p-button-icon-only.p-button-rounded {
@@ -1906,298 +2119,450 @@
     flex: 1;
   }
 
-  .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
+  .p-button.p-button-secondary,
+  .p-buttonset.p-button-secondary > .p-button,
+  .p-splitbutton.p-button-secondary > .p-button {
     color: #ffffff;
-    background: #64748B;
-    border: 1px solid #64748B;
+    background: #64748b;
+    border: 1px solid #64748b;
   }
-  .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover {
+  .p-button.p-button-secondary:not(:disabled):hover,
+  .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover,
+  .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover {
     background: #475569;
     color: #ffffff;
     border-color: #475569;
   }
-  .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 0.2rem #E2E8F0;
+  .p-button.p-button-secondary:not(:disabled):focus,
+  .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus,
+  .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e2e8f0;
   }
-  .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active {
+  .p-button.p-button-secondary:not(:disabled):active,
+  .p-buttonset.p-button-secondary > .p-button:not(:disabled):active,
+  .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active {
     background: #334155;
     color: #ffffff;
     border-color: #334155;
   }
-  .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined {
+  .p-button.p-button-secondary.p-button-outlined,
+  .p-buttonset.p-button-secondary > .p-button.p-button-outlined,
+  .p-splitbutton.p-button-secondary > .p-button.p-button-outlined {
     background-color: transparent;
-    color: #64748B;
+    color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover,
+  .p-buttonset.p-button-secondary
+    > .p-button.p-button-outlined:not(:disabled):hover,
+  .p-splitbutton.p-button-secondary
+    > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
-    color: #64748B;
+    color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active,
+  .p-buttonset.p-button-secondary
+    > .p-button.p-button-outlined:not(:disabled):active,
+  .p-splitbutton.p-button-secondary
+    > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
-    color: #64748B;
+    color: #64748b;
     border: 1px solid;
   }
-  .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text {
+  .p-button.p-button-secondary.p-button-text,
+  .p-buttonset.p-button-secondary > .p-button.p-button-text,
+  .p-splitbutton.p-button-secondary > .p-button.p-button-text {
     background-color: transparent;
-    color: #64748B;
+    color: #64748b;
     border-color: transparent;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover,
+  .p-buttonset.p-button-secondary
+    > .p-button.p-button-text:not(:disabled):hover,
+  .p-splitbutton.p-button-secondary
+    > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     border-color: transparent;
-    color: #64748B;
+    color: #64748b;
   }
-  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active,
+  .p-buttonset.p-button-secondary
+    > .p-button.p-button-text:not(:disabled):active,
+  .p-splitbutton.p-button-secondary
+    > .p-button.p-button-text:not(:disabled):active {
     background: rgba(100, 116, 139, 0.16);
     border-color: transparent;
-    color: #64748B;
+    color: #64748b;
   }
 
-  .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
+  .p-button.p-button-info,
+  .p-buttonset.p-button-info > .p-button,
+  .p-splitbutton.p-button-info > .p-button {
     color: #ffffff;
     background: #0ea5e9;
     border: 1px solid #0ea5e9;
   }
-  .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover {
+  .p-button.p-button-info:not(:disabled):hover,
+  .p-buttonset.p-button-info > .p-button:not(:disabled):hover,
+  .p-splitbutton.p-button-info > .p-button:not(:disabled):hover {
     background: #0284c7;
     color: #ffffff;
     border-color: #0284c7;
   }
-  .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 0.2rem #BFDBFE;
+  .p-button.p-button-info:not(:disabled):focus,
+  .p-buttonset.p-button-info > .p-button:not(:disabled):focus,
+  .p-splitbutton.p-button-info > .p-button:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
   }
-  .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active {
+  .p-button.p-button-info:not(:disabled):active,
+  .p-buttonset.p-button-info > .p-button:not(:disabled):active,
+  .p-splitbutton.p-button-info > .p-button:not(:disabled):active {
     background: #0369a1;
     color: #ffffff;
     border-color: #0369a1;
   }
-  .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined {
+  .p-button.p-button-info.p-button-outlined,
+  .p-buttonset.p-button-info > .p-button.p-button-outlined,
+  .p-splitbutton.p-button-info > .p-button.p-button-outlined {
     background-color: transparent;
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover,
+  .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover,
+  .p-splitbutton.p-button-info
+    > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active,
+  .p-buttonset.p-button-info
+    > .p-button.p-button-outlined:not(:disabled):active,
+  .p-splitbutton.p-button-info
+    > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text {
+  .p-button.p-button-info.p-button-text,
+  .p-buttonset.p-button-info > .p-button.p-button-text,
+  .p-splitbutton.p-button-info > .p-button.p-button-text {
     background-color: transparent;
     color: #0ea5e9;
     border-color: transparent;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-info.p-button-text:not(:disabled):hover,
+  .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover,
+  .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-info.p-button-text:not(:disabled):active,
+  .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active,
+  .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active {
     background: rgba(14, 165, 233, 0.16);
     border-color: transparent;
     color: #0ea5e9;
   }
 
-  .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
+  .p-button.p-button-success,
+  .p-buttonset.p-button-success > .p-button,
+  .p-splitbutton.p-button-success > .p-button {
     color: #ffffff;
-    background: #22C55E;
-    border: 1px solid #22C55E;
+    background: #22c55e;
+    border: 1px solid #22c55e;
   }
-  .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover {
-    background: #16A34A;
+  .p-button.p-button-success:not(:disabled):hover,
+  .p-buttonset.p-button-success > .p-button:not(:disabled):hover,
+  .p-splitbutton.p-button-success > .p-button:not(:disabled):hover {
+    background: #16a34a;
     color: #ffffff;
-    border-color: #16A34A;
+    border-color: #16a34a;
   }
-  .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 0.2rem #BBF7D0;
+  .p-button.p-button-success:not(:disabled):focus,
+  .p-buttonset.p-button-success > .p-button:not(:disabled):focus,
+  .p-splitbutton.p-button-success > .p-button:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bbf7d0;
   }
-  .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active {
-    background: #15803D;
+  .p-button.p-button-success:not(:disabled):active,
+  .p-buttonset.p-button-success > .p-button:not(:disabled):active,
+  .p-splitbutton.p-button-success > .p-button:not(:disabled):active {
+    background: #15803d;
     color: #ffffff;
-    border-color: #15803D;
+    border-color: #15803d;
   }
-  .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined {
+  .p-button.p-button-success.p-button-outlined,
+  .p-buttonset.p-button-success > .p-button.p-button-outlined,
+  .p-splitbutton.p-button-success > .p-button.p-button-outlined {
     background-color: transparent;
-    color: #22C55E;
+    color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover,
+  .p-buttonset.p-button-success
+    > .p-button.p-button-outlined:not(:disabled):hover,
+  .p-splitbutton.p-button-success
+    > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
-    color: #22C55E;
+    color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active,
+  .p-buttonset.p-button-success
+    > .p-button.p-button-outlined:not(:disabled):active,
+  .p-splitbutton.p-button-success
+    > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
-    color: #22C55E;
+    color: #22c55e;
     border: 1px solid;
   }
-  .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text {
+  .p-button.p-button-success.p-button-text,
+  .p-buttonset.p-button-success > .p-button.p-button-text,
+  .p-splitbutton.p-button-success > .p-button.p-button-text {
     background-color: transparent;
-    color: #22C55E;
+    color: #22c55e;
     border-color: transparent;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-success.p-button-text:not(:disabled):hover,
+  .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover,
+  .p-splitbutton.p-button-success
+    > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     border-color: transparent;
-    color: #22C55E;
+    color: #22c55e;
   }
-  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-success.p-button-text:not(:disabled):active,
+  .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active,
+  .p-splitbutton.p-button-success
+    > .p-button.p-button-text:not(:disabled):active {
     background: rgba(34, 197, 94, 0.16);
     border-color: transparent;
-    color: #22C55E;
+    color: #22c55e;
   }
 
-  .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
+  .p-button.p-button-warning,
+  .p-buttonset.p-button-warning > .p-button,
+  .p-splitbutton.p-button-warning > .p-button {
     color: #ffffff;
     background: #f97316;
     border: 1px solid #f97316;
   }
-  .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover {
+  .p-button.p-button-warning:not(:disabled):hover,
+  .p-buttonset.p-button-warning > .p-button:not(:disabled):hover,
+  .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover {
     background: #ea580c;
     color: #ffffff;
     border-color: #ea580c;
   }
-  .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 0.2rem #FDE68A;
+  .p-button.p-button-warning:not(:disabled):focus,
+  .p-buttonset.p-button-warning > .p-button:not(:disabled):focus,
+  .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde68a;
   }
-  .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active {
+  .p-button.p-button-warning:not(:disabled):active,
+  .p-buttonset.p-button-warning > .p-button:not(:disabled):active,
+  .p-splitbutton.p-button-warning > .p-button:not(:disabled):active {
     background: #c2410c;
     color: #ffffff;
     border-color: #c2410c;
   }
-  .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined {
+  .p-button.p-button-warning.p-button-outlined,
+  .p-buttonset.p-button-warning > .p-button.p-button-outlined,
+  .p-splitbutton.p-button-warning > .p-button.p-button-outlined {
     background-color: transparent;
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover,
+  .p-buttonset.p-button-warning
+    > .p-button.p-button-outlined:not(:disabled):hover,
+  .p-splitbutton.p-button-warning
+    > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active,
+  .p-buttonset.p-button-warning
+    > .p-button.p-button-outlined:not(:disabled):active,
+  .p-splitbutton.p-button-warning
+    > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     color: #f97316;
     border: 1px solid;
   }
-  .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text {
+  .p-button.p-button-warning.p-button-text,
+  .p-buttonset.p-button-warning > .p-button.p-button-text,
+  .p-splitbutton.p-button-warning > .p-button.p-button-text {
     background-color: transparent;
     color: #f97316;
     border-color: transparent;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover,
+  .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover,
+  .p-splitbutton.p-button-warning
+    > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     border-color: transparent;
     color: #f97316;
   }
-  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-warning.p-button-text:not(:disabled):active,
+  .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active,
+  .p-splitbutton.p-button-warning
+    > .p-button.p-button-text:not(:disabled):active {
     background: rgba(249, 115, 22, 0.16);
     border-color: transparent;
     color: #f97316;
   }
 
-  .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
+  .p-button.p-button-help,
+  .p-buttonset.p-button-help > .p-button,
+  .p-splitbutton.p-button-help > .p-button {
     color: #ffffff;
-    background: #A855F7;
-    border: 1px solid #A855F7;
+    background: #a855f7;
+    border: 1px solid #a855f7;
   }
-  .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover {
-    background: #9333EA;
+  .p-button.p-button-help:not(:disabled):hover,
+  .p-buttonset.p-button-help > .p-button:not(:disabled):hover,
+  .p-splitbutton.p-button-help > .p-button:not(:disabled):hover {
+    background: #9333ea;
     color: #ffffff;
-    border-color: #9333EA;
+    border-color: #9333ea;
   }
-  .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 0.2rem #E9D5FF;
+  .p-button.p-button-help:not(:disabled):focus,
+  .p-buttonset.p-button-help > .p-button:not(:disabled):focus,
+  .p-splitbutton.p-button-help > .p-button:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e9d5ff;
   }
-  .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active {
-    background: #7E22CE;
+  .p-button.p-button-help:not(:disabled):active,
+  .p-buttonset.p-button-help > .p-button:not(:disabled):active,
+  .p-splitbutton.p-button-help > .p-button:not(:disabled):active {
+    background: #7e22ce;
     color: #ffffff;
-    border-color: #7E22CE;
+    border-color: #7e22ce;
   }
-  .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined {
+  .p-button.p-button-help.p-button-outlined,
+  .p-buttonset.p-button-help > .p-button.p-button-outlined,
+  .p-splitbutton.p-button-help > .p-button.p-button-outlined {
     background-color: transparent;
-    color: #A855F7;
+    color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover,
+  .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover,
+  .p-splitbutton.p-button-help
+    > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
-    color: #A855F7;
+    color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active,
+  .p-buttonset.p-button-help
+    > .p-button.p-button-outlined:not(:disabled):active,
+  .p-splitbutton.p-button-help
+    > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
-    color: #A855F7;
+    color: #a855f7;
     border: 1px solid;
   }
-  .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text {
+  .p-button.p-button-help.p-button-text,
+  .p-buttonset.p-button-help > .p-button.p-button-text,
+  .p-splitbutton.p-button-help > .p-button.p-button-text {
     background-color: transparent;
-    color: #A855F7;
+    color: #a855f7;
     border-color: transparent;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-help.p-button-text:not(:disabled):hover,
+  .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover,
+  .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     border-color: transparent;
-    color: #A855F7;
+    color: #a855f7;
   }
-  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-help.p-button-text:not(:disabled):active,
+  .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active,
+  .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active {
     background: rgba(168, 85, 247, 0.16);
     border-color: transparent;
-    color: #A855F7;
+    color: #a855f7;
   }
 
-  .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
+  .p-button.p-button-danger,
+  .p-buttonset.p-button-danger > .p-button,
+  .p-splitbutton.p-button-danger > .p-button {
     color: #ffffff;
-    background: #EF4444;
-    border: 1px solid #EF4444;
+    background: #ef4444;
+    border: 1px solid #ef4444;
   }
-  .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover {
-    background: #DC2626;
+  .p-button.p-button-danger:not(:disabled):hover,
+  .p-buttonset.p-button-danger > .p-button:not(:disabled):hover,
+  .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover {
+    background: #dc2626;
     color: #ffffff;
-    border-color: #DC2626;
+    border-color: #dc2626;
   }
-  .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus {
-    box-shadow: 0 0 0 0.2rem #FECACA;
+  .p-button.p-button-danger:not(:disabled):focus,
+  .p-buttonset.p-button-danger > .p-button:not(:disabled):focus,
+  .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fecaca;
   }
-  .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active {
-    background: #B91C1C;
+  .p-button.p-button-danger:not(:disabled):active,
+  .p-buttonset.p-button-danger > .p-button:not(:disabled):active,
+  .p-splitbutton.p-button-danger > .p-button:not(:disabled):active {
+    background: #b91c1c;
     color: #ffffff;
-    border-color: #B91C1C;
+    border-color: #b91c1c;
   }
-  .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined {
+  .p-button.p-button-danger.p-button-outlined,
+  .p-buttonset.p-button-danger > .p-button.p-button-outlined,
+  .p-splitbutton.p-button-danger > .p-button.p-button-outlined {
     background-color: transparent;
-    color: #EF4444;
+    color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover,
+  .p-buttonset.p-button-danger
+    > .p-button.p-button-outlined:not(:disabled):hover,
+  .p-splitbutton.p-button-danger
+    > .p-button.p-button-outlined:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
-    color: #EF4444;
+    color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active {
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active,
+  .p-buttonset.p-button-danger
+    > .p-button.p-button-outlined:not(:disabled):active,
+  .p-splitbutton.p-button-danger
+    > .p-button.p-button-outlined:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
-    color: #EF4444;
+    color: #ef4444;
     border: 1px solid;
   }
-  .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text {
+  .p-button.p-button-danger.p-button-text,
+  .p-buttonset.p-button-danger > .p-button.p-button-text,
+  .p-splitbutton.p-button-danger > .p-button.p-button-text {
     background-color: transparent;
-    color: #EF4444;
+    color: #ef4444;
     border-color: transparent;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover {
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover,
+  .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover,
+  .p-splitbutton.p-button-danger
+    > .p-button.p-button-text:not(:disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     border-color: transparent;
-    color: #EF4444;
+    color: #ef4444;
   }
-  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active {
+  .p-button.p-button-danger.p-button-text:not(:disabled):active,
+  .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active,
+  .p-splitbutton.p-button-danger
+    > .p-button.p-button-text:not(:disabled):active {
     background: rgba(239, 68, 68, 0.16);
     border-color: transparent;
-    color: #EF4444;
+    color: #ef4444;
   }
 
   .p-button.p-button-link {
@@ -2286,15 +2651,16 @@
   }
 
   .p-speeddial-circle .p-speeddial-item,
-.p-speeddial-semi-circle .p-speeddial-item,
-.p-speeddial-quarter-circle .p-speeddial-item {
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
     margin: 0;
   }
-  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
-.p-speeddial-semi-circle .p-speeddial-item:first-child,
-.p-speeddial-semi-circle .p-speeddial-item:last-child,
-.p-speeddial-quarter-circle .p-speeddial-item:first-child,
-.p-speeddial-quarter-circle .p-speeddial-item:last-child {
+  .p-speeddial-circle .p-speeddial-item:first-child,
+  .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
     margin: 0;
   }
 
@@ -2311,11 +2677,15 @@
     color: #10b981;
     border: 1px solid;
   }
-  .p-splitbutton.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-outlined > .p-button:enabled:hover,
+  .p-splitbutton.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(16, 185, 129, 0.04);
     color: #10b981;
   }
-  .p-splitbutton.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-outlined > .p-button:enabled:active,
+  .p-splitbutton.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(16, 185, 129, 0.16);
     color: #10b981;
   }
@@ -2323,11 +2693,15 @@
     color: #6b7280;
     border-color: #6b7280;
   }
-  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover,
+  .p-splitbutton.p-button-outlined.p-button-plain
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: #f3f4f6;
     color: #6b7280;
   }
-  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active,
+  .p-splitbutton.p-button-outlined.p-button-plain
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: #e5e7eb;
     color: #6b7280;
   }
@@ -2336,12 +2710,16 @@
     color: #10b981;
     border-color: transparent;
   }
-  .p-splitbutton.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-text > .p-button:enabled:hover,
+  .p-splitbutton.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(16, 185, 129, 0.04);
     color: #10b981;
     border-color: transparent;
   }
-  .p-splitbutton.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-text > .p-button:enabled:active,
+  .p-splitbutton.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(16, 185, 129, 0.16);
     color: #10b981;
     border-color: transparent;
@@ -2349,16 +2727,23 @@
   .p-splitbutton.p-button-text.p-button-plain > .p-button {
     color: #6b7280;
   }
-  .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover,
+  .p-splitbutton.p-button-text.p-button-plain
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: #f3f4f6;
     color: #6b7280;
   }
-  .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active, .p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active,
+  .p-splitbutton.p-button-text.p-button-plain
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: #e5e7eb;
     color: #6b7280;
   }
   .p-splitbutton.p-button-raised {
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
   .p-splitbutton.p-button-rounded {
     border-radius: 2rem;
@@ -2390,31 +2775,40 @@
 
   .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
     background-color: transparent;
-    color: #64748B;
+    color: #64748b;
     border: 1px solid;
   }
-  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover,
+  .p-splitbutton.p-button-secondary.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(100, 116, 139, 0.04);
-    color: #64748B;
+    color: #64748b;
   }
-  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-secondary.p-button-outlined
+    > .p-button:enabled:active,
+  .p-splitbutton.p-button-secondary.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(100, 116, 139, 0.16);
-    color: #64748B;
+    color: #64748b;
   }
   .p-splitbutton.p-button-secondary.p-button-text > .p-button {
     background-color: transparent;
-    color: #64748B;
+    color: #64748b;
     border-color: transparent;
   }
-  .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover,
+  .p-splitbutton.p-button-secondary.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(100, 116, 139, 0.04);
     border-color: transparent;
-    color: #64748B;
+    color: #64748b;
   }
-  .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active,
+  .p-splitbutton.p-button-secondary.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(100, 116, 139, 0.16);
     border-color: transparent;
-    color: #64748B;
+    color: #64748b;
   }
 
   .p-splitbutton.p-button-info.p-button-outlined > .p-button {
@@ -2422,11 +2816,15 @@
     color: #0ea5e9;
     border: 1px solid;
   }
-  .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover,
+  .p-splitbutton.p-button-info.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     color: #0ea5e9;
   }
-  .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active,
+  .p-splitbutton.p-button-info.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(14, 165, 233, 0.16);
     color: #0ea5e9;
   }
@@ -2435,12 +2833,16 @@
     color: #0ea5e9;
     border-color: transparent;
   }
-  .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover,
+  .p-splitbutton.p-button-info.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(14, 165, 233, 0.04);
     border-color: transparent;
     color: #0ea5e9;
   }
-  .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active,
+  .p-splitbutton.p-button-info.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(14, 165, 233, 0.16);
     border-color: transparent;
     color: #0ea5e9;
@@ -2448,31 +2850,39 @@
 
   .p-splitbutton.p-button-success.p-button-outlined > .p-button {
     background-color: transparent;
-    color: #22C55E;
+    color: #22c55e;
     border: 1px solid;
   }
-  .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover,
+  .p-splitbutton.p-button-success.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(34, 197, 94, 0.04);
-    color: #22C55E;
+    color: #22c55e;
   }
-  .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active,
+  .p-splitbutton.p-button-success.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(34, 197, 94, 0.16);
-    color: #22C55E;
+    color: #22c55e;
   }
   .p-splitbutton.p-button-success.p-button-text > .p-button {
     background-color: transparent;
-    color: #22C55E;
+    color: #22c55e;
     border-color: transparent;
   }
-  .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover,
+  .p-splitbutton.p-button-success.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(34, 197, 94, 0.04);
     border-color: transparent;
-    color: #22C55E;
+    color: #22c55e;
   }
-  .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active,
+  .p-splitbutton.p-button-success.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(34, 197, 94, 0.16);
     border-color: transparent;
-    color: #22C55E;
+    color: #22c55e;
   }
 
   .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
@@ -2480,11 +2890,15 @@
     color: #f97316;
     border: 1px solid;
   }
-  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover,
+  .p-splitbutton.p-button-warning.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     color: #f97316;
   }
-  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active,
+  .p-splitbutton.p-button-warning.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(249, 115, 22, 0.16);
     color: #f97316;
   }
@@ -2493,12 +2907,16 @@
     color: #f97316;
     border-color: transparent;
   }
-  .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover,
+  .p-splitbutton.p-button-warning.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(249, 115, 22, 0.04);
     border-color: transparent;
     color: #f97316;
   }
-  .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active,
+  .p-splitbutton.p-button-warning.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(249, 115, 22, 0.16);
     border-color: transparent;
     color: #f97316;
@@ -2506,81 +2924,100 @@
 
   .p-splitbutton.p-button-help.p-button-outlined > .p-button {
     background-color: transparent;
-    color: #A855F7;
+    color: #a855f7;
     border: 1px solid;
   }
-  .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover,
+  .p-splitbutton.p-button-help.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(168, 85, 247, 0.04);
-    color: #A855F7;
+    color: #a855f7;
   }
-  .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active,
+  .p-splitbutton.p-button-help.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(168, 85, 247, 0.16);
-    color: #A855F7;
+    color: #a855f7;
   }
   .p-splitbutton.p-button-help.p-button-text > .p-button {
     background-color: transparent;
-    color: #A855F7;
+    color: #a855f7;
     border-color: transparent;
   }
-  .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover,
+  .p-splitbutton.p-button-help.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(168, 85, 247, 0.04);
     border-color: transparent;
-    color: #A855F7;
+    color: #a855f7;
   }
-  .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active,
+  .p-splitbutton.p-button-help.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(168, 85, 247, 0.16);
     border-color: transparent;
-    color: #A855F7;
+    color: #a855f7;
   }
 
   .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
     background-color: transparent;
-    color: #EF4444;
+    color: #ef4444;
     border: 1px solid;
   }
-  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover,
+  .p-splitbutton.p-button-danger.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(239, 68, 68, 0.04);
-    color: #EF4444;
+    color: #ef4444;
   }
-  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active,
+  .p-splitbutton.p-button-danger.p-button-outlined
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(239, 68, 68, 0.16);
-    color: #EF4444;
+    color: #ef4444;
   }
   .p-splitbutton.p-button-danger.p-button-text > .p-button {
     background-color: transparent;
-    color: #EF4444;
+    color: #ef4444;
     border-color: transparent;
   }
-  .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover,
+  .p-splitbutton.p-button-danger.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):hover {
     background: rgba(239, 68, 68, 0.04);
     border-color: transparent;
-    color: #EF4444;
+    color: #ef4444;
   }
-  .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active, .p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active,
+  .p-splitbutton.p-button-danger.p-button-text
+    > .p-button:not(button):not(a):not(.p-disabled):active {
     background: rgba(239, 68, 68, 0.16);
     border-color: transparent;
-    color: #EF4444;
+    color: #ef4444;
   }
 
   .p-carousel .p-carousel-content .p-carousel-prev,
-.p-carousel .p-carousel-content .p-carousel-next {
+  .p-carousel .p-carousel-content .p-carousel-next {
     width: 2rem;
     height: 2rem;
     color: #6b7280;
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     margin: 0.5rem;
   }
   .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
-.p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
     color: #374151;
     border-color: transparent;
     background: #f3f4f6;
   }
   .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
-.p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
@@ -2596,14 +3033,17 @@
     background-color: #d1d5db;
     width: 2rem;
     height: 0.5rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     border-radius: 0;
   }
   .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
     background: #9ca3af;
   }
   .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
-    background: #F0FDFA;
+    background: #f0fdfa;
     color: #047857;
   }
 
@@ -2660,25 +3100,27 @@
     min-width: 1.143rem;
     line-height: 1.143rem;
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
     margin-left: 0.5rem;
   }
   .p-datatable .p-sortable-column:not(.p-highlight):hover {
     background: #f3f4f6;
     color: #374151;
   }
-  .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+  .p-datatable
+    .p-sortable-column:not(.p-highlight):hover
+    .p-sortable-column-icon {
     color: #374151;
   }
   .p-datatable .p-sortable-column.p-highlight {
-    background: #F0FDFA;
+    background: #f0fdfa;
     color: #047857;
   }
   .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
     color: #047857;
   }
   .p-datatable .p-sortable-column.p-highlight:hover {
-    background: #F0FDFA;
+    background: #f0fdfa;
     color: #047857;
   }
   .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon {
@@ -2700,29 +3142,32 @@
     padding: 1rem 1rem;
   }
   .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
     width: 2rem;
     height: 2rem;
     color: #6b7280;
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
     color: #374151;
     border-color: transparent;
     background: #f3f4f6;
   }
   .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
@@ -2738,7 +3183,7 @@
     outline-offset: -0.15rem;
   }
   .p-datatable .p-datatable-tbody > tr.p-highlight {
-    background: #F0FDFA;
+    background: #f0fdfa;
     color: #047857;
   }
   .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
@@ -2746,21 +3191,38 @@
     outline-offset: -0.15rem;
   }
   .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-    box-shadow: inset 0 2px 0 0 #F0FDFA;
+    box-shadow: inset 0 2px 0 0 #f0fdfa;
   }
   .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-    box-shadow: inset 0 -2px 0 0 #F0FDFA;
+    box-shadow: inset 0 -2px 0 0 #f0fdfa;
   }
-  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
+  .p-datatable.p-datatable-hoverable-rows
+    .p-datatable-tbody
+    > tr:not(.p-highlight):hover {
     background: #f3f4f6;
     color: #4b5563;
   }
   .p-datatable .p-column-resizer-helper {
     background: #10b981;
   }
-  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+  .p-datatable.p-datatable-scrollable
+    > .p-datatable-wrapper
+    > .p-datatable-table
+    > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable
+    > .p-datatable-wrapper
+    > .p-datatable-table
+    > .p-datatable-tfoot,
+  .p-datatable.p-datatable-scrollable
+    > .p-datatable-wrapper
+    > .p-virtualscroller
+    > .p-datatable-table
+    > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable
+    > .p-datatable-wrapper
+    > .p-virtualscroller
+    > .p-datatable-table
+    > .p-datatable-tfoot {
     background-color: #f9fafb;
   }
   .p-datatable .p-datatable-loading-icon {
@@ -2797,7 +3259,10 @@
   .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
     border-width: 1px 0 1px 1px;
   }
-  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+  .p-datatable.p-datatable-gridlines
+    .p-datatable-tbody
+    > tr:last-child
+    > td:last-child {
     border-width: 1px;
   }
   .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
@@ -2806,35 +3271,71 @@
   .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
     border-width: 1px 1px 1px 1px;
   }
-  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+  .p-datatable.p-datatable-gridlines
+    .p-datatable-thead
+    + .p-datatable-tfoot
+    > tr
+    > td {
     border-width: 0 0 1px 1px;
   }
-  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+  .p-datatable.p-datatable-gridlines
+    .p-datatable-thead
+    + .p-datatable-tfoot
+    > tr
+    > td:last-child {
     border-width: 0 1px 1px 1px;
   }
-  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(
+      .p-datatable-tbody
+    )
+    .p-datatable-tbody
+    > tr
+    > td {
     border-width: 0 0 1px 1px;
   }
-  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(
+      .p-datatable-tbody
+    )
+    .p-datatable-tbody
+    > tr
+    > td:last-child {
     border-width: 0 1px 1px 1px;
   }
-  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(
+      .p-datatable-tfoot
+    )
+    .p-datatable-tbody
+    > tr:last-child
+    > td {
     border-width: 0 0 0 1px;
   }
-  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(
+      .p-datatable-tfoot
+    )
+    .p-datatable-tbody
+    > tr:last-child
+    > td:last-child {
     border-width: 0 1px 0 1px;
   }
   .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
     background: #f8f8fa;
   }
-  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
-    background: #F0FDFA;
+  .p-datatable.p-datatable-striped
+    .p-datatable-tbody
+    > tr.p-row-odd.p-highlight {
+    background: #f0fdfa;
     color: #047857;
   }
-  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+  .p-datatable.p-datatable-striped
+    .p-datatable-tbody
+    > tr.p-row-odd.p-highlight
+    .p-row-toggler {
     color: #047857;
   }
-  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+  .p-datatable.p-datatable-striped
+    .p-datatable-tbody
+    > tr.p-row-odd.p-highlight
+    .p-row-toggler:hover {
     color: #047857;
   }
   .p-datatable.p-datatable-sm .p-datatable-header {
@@ -2902,7 +3403,7 @@
   }
 
   .p-column-filter-row .p-column-filter-menu-button,
-.p-column-filter-row .p-column-filter-clear-button {
+  .p-column-filter-row .p-column-filter-clear-button {
     margin-left: 0.5rem;
   }
 
@@ -2913,19 +3414,24 @@
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-column-filter-menu-button:hover {
     color: #374151;
     border-color: transparent;
     background: #f3f4f6;
   }
-  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+  .p-column-filter-menu-button.p-column-filter-menu-button-open,
+  .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
     background: #f3f4f6;
     color: #374151;
   }
-  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
-    background: #F0FDFA;
+  .p-column-filter-menu-button.p-column-filter-menu-button-active,
+  .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #f0fdfa;
     color: #047857;
   }
   .p-column-filter-menu-button:focus-visible {
@@ -2941,7 +3447,10 @@
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-column-filter-clear-button:hover {
     color: #374151;
@@ -2965,7 +3474,9 @@
   .p-column-filter-overlay .p-column-filter-row-items {
     padding: 0.75rem 0;
   }
-  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+  .p-column-filter-overlay
+    .p-column-filter-row-items
+    .p-column-filter-row-item {
     margin: 0;
     padding: 0.75rem 1.25rem;
     border: 0 none;
@@ -2974,20 +3485,28 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+  .p-column-filter-overlay
+    .p-column-filter-row-items
+    .p-column-filter-row-item.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
-  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-column-filter-overlay
+    .p-column-filter-row-items
+    .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
     color: #4b5563;
     background: #f3f4f6;
   }
-  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+  .p-column-filter-overlay
+    .p-column-filter-row-items
+    .p-column-filter-row-item:focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: inset 0 0 0 0.15rem #a7f3d0;
   }
-  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+  .p-column-filter-overlay
+    .p-column-filter-row-items
+    .p-column-filter-separator {
     border-top: 1px solid #e5e7eb;
     margin: 0.25rem 0;
   }
@@ -3005,10 +3524,14 @@
     padding: 1.25rem;
     border-bottom: 1px solid #e5e7eb;
   }
-  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+  .p-column-filter-overlay-menu
+    .p-column-filter-constraint
+    .p-column-filter-matchmode-dropdown {
     margin-bottom: 0.5rem;
   }
-  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+  .p-column-filter-overlay-menu
+    .p-column-filter-constraint
+    .p-column-filter-remove-button {
     margin-top: 0.5rem;
   }
   .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
@@ -3052,7 +3575,9 @@
     border: 0 none;
     color: #4b5563;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition:
+      transform 0.2s,
+      box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #f3f4f6;
@@ -3064,27 +3589,37 @@
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+  .p-orderlist.p-orderlist-striped
+    .p-orderlist-list
+    .p-orderlist-item:nth-child(even) {
     background: #f8f8fa;
   }
-  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+  .p-orderlist.p-orderlist-striped
+    .p-orderlist-list
+    .p-orderlist-item:nth-child(even):hover {
     background: #f3f4f6;
   }
 
-  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+  .p-organizationchart
+    .p-organizationchart-node-content.p-organizationchart-selectable-node:not(
+      .p-highlight
+    ):hover {
     background: #f3f4f6;
     color: #4b5563;
   }
   .p-organizationchart .p-organizationchart-node-content.p-highlight {
-    background: #F0FDFA;
+    background: #f0fdfa;
     color: #047857;
   }
-  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+  .p-organizationchart
+    .p-organizationchart-node-content.p-highlight
+    .p-node-toggler
+    i {
     color: #80eed5;
   }
   .p-organizationchart .p-organizationchart-line-down {
@@ -3109,7 +3644,9 @@
     color: inherit;
     border-radius: 50%;
   }
-  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+  .p-organizationchart
+    .p-organizationchart-node-content
+    .p-node-toggler:focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
@@ -3124,9 +3661,9 @@
     border-radius: 6px;
   }
   .p-paginator .p-paginator-first,
-.p-paginator .p-paginator-prev,
-.p-paginator .p-paginator-next,
-.p-paginator .p-paginator-last {
+  .p-paginator .p-paginator-prev,
+  .p-paginator .p-paginator-next,
+  .p-paginator .p-paginator-last {
     background-color: transparent;
     border: 0 none;
     color: #6b7280;
@@ -3137,9 +3674,9 @@
     border-radius: 50%;
   }
   .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
     background: #f3f4f6;
     border-color: transparent;
     color: #374151;
@@ -3187,8 +3724,8 @@
     border-radius: 50%;
   }
   .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-    background: #F0FDFA;
-    border-color: #F0FDFA;
+    background: #f0fdfa;
+    border-color: #f0fdfa;
     color: #047857;
   }
   .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
@@ -3228,7 +3765,9 @@
     border: 0 none;
     color: #4b5563;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition:
+      transform 0.2s,
+      box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #f3f4f6;
@@ -3240,15 +3779,19 @@
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) {
+  .p-picklist.p-picklist-striped
+    .p-picklist-list
+    .p-picklist-item:nth-child(even) {
     background: #f8f8fa;
   }
-  .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover {
+  .p-picklist.p-picklist-striped
+    .p-picklist-list
+    .p-picklist-item:nth-child(even):hover {
     background: #f3f4f6;
   }
 
@@ -3263,14 +3806,14 @@
     background-color: #e5e7eb;
   }
   .p-timeline.p-timeline-vertical .p-timeline-event-opposite,
-.p-timeline.p-timeline-vertical .p-timeline-event-content {
+  .p-timeline.p-timeline-vertical .p-timeline-event-content {
     padding: 0 1rem;
   }
   .p-timeline.p-timeline-vertical .p-timeline-event-connector {
     width: 2px;
   }
   .p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
-.p-timeline.p-timeline-horizontal .p-timeline-event-content {
+  .p-timeline.p-timeline-horizontal .p-timeline-event-content {
     padding: 1rem 0;
   }
   .p-timeline.p-timeline-horizontal .p-timeline-event-connector {
@@ -3306,14 +3849,25 @@
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
+  }
+  .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content
+    .p-tree-toggler:enabled:hover {
     color: #374151;
     border-color: transparent;
     background: #f3f4f6;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+  .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content
+    .p-tree-toggler:focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
@@ -3325,22 +3879,47 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content
+    .p-checkbox
+    .p-indeterminate
+    .p-checkbox-icon {
     color: #4b5563;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-    background: #F0FDFA;
+    background: #f0fdfa;
     color: #047857;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
+  .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content.p-highlight
+    .p-tree-toggler,
+  .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content.p-highlight
+    .p-treenode-icon {
     color: #047857;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover,
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover {
+  .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content.p-highlight
+    .p-tree-toggler:hover,
+  .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content.p-highlight
+    .p-treenode-icon:hover {
     color: #047857;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+  .p-tree
+    .p-tree-container
+    .p-treenode
+    .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
     background: #f3f4f6;
     color: #4b5563;
   }
@@ -3422,18 +4001,20 @@
     min-width: 1.143rem;
     line-height: 1.143rem;
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
     margin-left: 0.5rem;
   }
   .p-treetable .p-sortable-column:not(.p-highlight):hover {
     background: #f3f4f6;
     color: #374151;
   }
-  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+  .p-treetable
+    .p-sortable-column:not(.p-highlight):hover
+    .p-sortable-column-icon {
     color: #374151;
   }
   .p-treetable .p-sortable-column.p-highlight {
-    background: #F0FDFA;
+    background: #f0fdfa;
     color: #047857;
   }
   .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
@@ -3457,7 +4038,10 @@
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     margin-right: 0.5rem;
   }
   .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
@@ -3473,7 +4057,14 @@
   .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
     margin-right: 0.5rem;
   }
-  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
+  .p-treetable
+    .p-treetable-tbody
+    > tr
+    > td
+    .p-treetable-toggler
+    + .p-checkbox
+    .p-indeterminate
+    .p-checkbox-icon {
     color: #4b5563;
   }
   .p-treetable .p-treetable-tbody > tr:focus-visible {
@@ -3481,7 +4072,7 @@
     outline-offset: -0.15rem;
   }
   .p-treetable .p-treetable-tbody > tr.p-highlight {
-    background: #F0FDFA;
+    background: #f0fdfa;
     color: #047857;
   }
   .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
@@ -3490,18 +4081,23 @@
   .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
     color: #047857;
   }
-  .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+  .p-treetable.p-treetable-hoverable-rows
+    .p-treetable-tbody
+    > tr:not(.p-highlight):hover {
     background: #f3f4f6;
     color: #4b5563;
   }
-  .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+  .p-treetable.p-treetable-hoverable-rows
+    .p-treetable-tbody
+    > tr:not(.p-highlight):hover
+    .p-treetable-toggler {
     color: #4b5563;
   }
   .p-treetable .p-column-resizer-helper {
     background: #10b981;
   }
   .p-treetable .p-treetable-scrollable-header,
-.p-treetable .p-treetable-scrollable-footer {
+  .p-treetable .p-treetable-scrollable-footer {
     background: #f9fafb;
   }
   .p-treetable .p-treetable-loading-icon {
@@ -3572,27 +4168,38 @@
     border-radius: 6px;
     transition: box-shadow 0.2s;
   }
-  .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon {
+  .p-accordion
+    .p-accordion-header
+    .p-accordion-header-link
+    .p-accordion-toggle-icon {
     margin-right: 0.5rem;
   }
-  .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible {
+  .p-accordion
+    .p-accordion-header:not(.p-disabled)
+    .p-accordion-header-link:focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: inset 0 0 0 0.2rem #a7f3d0;
   }
-  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+  .p-accordion
+    .p-accordion-header:not(.p-highlight):not(.p-disabled):hover
+    .p-accordion-header-link {
     background: #f3f4f6;
     border-color: #e5e7eb;
     color: #374151;
   }
-  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+  .p-accordion
+    .p-accordion-header:not(.p-disabled).p-highlight
+    .p-accordion-header-link {
     background: #f9fafb;
     border-color: #e5e7eb;
     color: #374151;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
-  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+  .p-accordion
+    .p-accordion-header:not(.p-disabled).p-highlight:hover
+    .p-accordion-header-link {
     border-color: #e5e7eb;
     background: #f3f4f6;
     color: #374151;
@@ -3615,7 +4222,10 @@
   .p-card {
     background: #ffffff;
     color: #4b5563;
-    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0 2px 1px -1px rgba(0, 0, 0, 0.2),
+      0 1px 1px 0 rgba(0, 0, 0, 0.14),
+      0 1px 3px 0 rgba(0, 0, 0, 0.12);
     border-radius: 6px;
   }
   .p-card .p-card-body {
@@ -3654,7 +4264,10 @@
   }
   .p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
     padding: 0;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
     padding: 1.25rem;
@@ -3724,7 +4337,10 @@
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
     color: #374151;
@@ -3763,7 +4379,11 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
   .p-scrollpanel .p-scrollpanel-bar:focus-visible {
     outline: 0 none;
@@ -3778,12 +4398,19 @@
     color: #4b5563;
   }
   .p-splitter .p-splitter-gutter {
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     background: #f9fafb;
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #e5e7eb;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
     outline: 0 none;
@@ -3815,12 +4442,18 @@
     transition: box-shadow 0.2s;
     margin: 0 0 -2px 0;
   }
-  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+  .p-tabview
+    .p-tabview-nav
+    li
+    .p-tabview-nav-link:not(.p-disabled):focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: inset 0 0 0 0.2rem #a7f3d0;
   }
-  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+  .p-tabview
+    .p-tabview-nav
+    li:not(.p-highlight):not(.p-disabled):hover
+    .p-tabview-nav-link {
     background: #ffffff;
     border-color: #9ca3af;
     color: #6b7280;
@@ -3834,7 +4467,10 @@
     background: #ffffff;
     color: #10b981;
     width: 3rem;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12);
     border-radius: 0;
   }
   .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
@@ -3934,7 +4570,10 @@
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     margin-right: 0.5rem;
   }
   .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
@@ -3994,7 +4633,10 @@
     color: #ffffff;
     width: 2rem;
     height: 2rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     border-radius: 50%;
     position: absolute;
     top: -1rem;
@@ -4035,23 +4677,26 @@
     font-size: 1.25rem;
   }
   .p-sidebar .p-sidebar-header .p-sidebar-close,
-.p-sidebar .p-sidebar-header .p-sidebar-icon {
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
     width: 2rem;
     height: 2rem;
     color: #6b7280;
     border: 0 none;
     background: transparent;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
-.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
     color: #374151;
     border-color: transparent;
     background: #f3f4f6;
   }
   .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
-.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
@@ -4108,7 +4753,7 @@
   }
   .p-fileupload .p-fileupload-content.p-fileupload-highlight {
     border: 1px dashed #10b981;
-    background-color: #F0FDFA;
+    background-color: #f0fdfa;
   }
   .p-fileupload .p-fileupload-file {
     padding: 1rem;
@@ -4208,47 +4853,102 @@
     padding: 0.75rem 1.25rem;
     user-select: none;
   }
-  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-contextmenu
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+  .p-contextmenu
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon {
     color: #6b7280;
     margin-right: 0.5rem;
   }
-  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-contextmenu
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
   .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
-  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-contextmenu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #047857;
   }
-  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-contextmenu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-contextmenu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #047857;
   }
   .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+  .p-contextmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content {
     color: #4b5563;
     background: #e5e7eb;
   }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-contextmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-contextmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-contextmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #4b5563;
   }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+  .p-contextmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover {
     color: #4b5563;
     background: #f3f4f6;
   }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: #4b5563;
-  }
-  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+  .p-contextmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-contextmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
   .p-contextmenu .p-menuitem-separator {
@@ -4286,43 +4986,53 @@
     height: 4rem;
   }
   .p-dock.p-dock-top .p-dock-item-second-prev,
-.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
-.p-dock.p-dock-bottom .p-dock-item-second-next {
+  .p-dock.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
     margin: 0 0.9rem;
   }
   .p-dock.p-dock-top .p-dock-item-prev,
-.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
-.p-dock.p-dock-bottom .p-dock-item-next {
+  .p-dock.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
     margin: 0 1.3rem;
   }
-  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+  .p-dock.p-dock-top .p-dock-item-current,
+  .p-dock.p-dock-bottom .p-dock-item-current {
     margin: 0 1.5rem;
   }
   .p-dock.p-dock-left .p-dock-item-second-prev,
-.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
-.p-dock.p-dock-right .p-dock-item-second-next {
+  .p-dock.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
     margin: 0.9rem 0;
   }
   .p-dock.p-dock-left .p-dock-item-prev,
-.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
-.p-dock.p-dock-right .p-dock-item-next {
+  .p-dock.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
     margin: 1.3rem 0;
   }
-  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+  .p-dock.p-dock-left .p-dock-item-current,
+  .p-dock.p-dock-right .p-dock-item-current {
     margin: 1.5rem 0;
   }
-  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container,
+  .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
     overflow-x: auto;
     width: 100%;
   }
-  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list,
+  .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
     margin: 0 auto;
   }
-  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container,
+  .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
     overflow-y: auto;
     height: 100%;
   }
-  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list,
+  .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
     margin: auto 0;
   }
   .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
@@ -4350,47 +5060,102 @@
     padding: 0.75rem 1.25rem;
     user-select: none;
   }
-  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-megamenu
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+  .p-megamenu
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon {
     color: #6b7280;
     margin-right: 0.5rem;
   }
-  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-megamenu
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
   .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
-  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-megamenu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #047857;
   }
-  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-megamenu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-megamenu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #047857;
   }
   .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+  .p-megamenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content {
     color: #4b5563;
     background: #e5e7eb;
   }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-megamenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-megamenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-megamenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #4b5563;
   }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+  .p-megamenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover {
     color: #4b5563;
     background: #f3f4f6;
   }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: #4b5563;
-  }
-  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+  .p-megamenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-megamenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
   .p-megamenu .p-megamenu-panel {
@@ -4420,34 +5185,75 @@
     min-width: 12.5rem;
     padding: 0.5rem 0;
   }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+  .p-megamenu.p-megamenu-horizontal
+    .p-megamenu-root-list
+    > .p-menuitem
+    > .p-menuitem-content {
     color: #4b5563;
     transition: box-shadow 0.2s;
     border-radius: 6px;
   }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+  .p-megamenu.p-megamenu-horizontal
+    .p-megamenu-root-list
+    > .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link {
     padding: 0.75rem 1.25rem;
     user-select: none;
   }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-megamenu.p-megamenu-horizontal
+    .p-megamenu-root-list
+    > .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+  .p-megamenu.p-megamenu-horizontal
+    .p-megamenu-root-list
+    > .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon {
     color: #6b7280;
     margin-right: 0.5rem;
   }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-megamenu.p-megamenu-horizontal
+    .p-megamenu-root-list
+    > .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
     margin-left: 0.5rem;
   }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+  .p-megamenu.p-megamenu-horizontal
+    .p-megamenu-root-list
+    > .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover {
     color: #4b5563;
     background: #f3f4f6;
   }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: #4b5563;
-  }
-  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+  .p-megamenu.p-megamenu-horizontal
+    .p-megamenu-root-list
+    > .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal
+    .p-megamenu-root-list
+    > .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal
+    .p-megamenu-root-list
+    > .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
   .p-megamenu.p-megamenu-mobile.p-megamenu-vertical {
@@ -4459,7 +5265,10 @@
     height: 2rem;
     color: #6b7280;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
     color: #6b7280;
@@ -4483,21 +5292,45 @@
   .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
     font-size: 0.875rem;
   }
-  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-megamenu.p-megamenu-mobile
+    .p-megamenu-root-list
+    .p-menuitem
+    .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     margin-left: auto;
     transition: transform 0.2s;
   }
-  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+  .p-megamenu.p-megamenu-mobile
+    .p-megamenu-root-list
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-content
+    > .p-menuitem-link
+    > .p-submenu-icon {
     transform: rotate(-180deg);
   }
-  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+  .p-megamenu.p-megamenu-mobile
+    .p-megamenu-root-list
+    .p-submenu-list
+    .p-submenu-icon {
     transition: transform 0.2s;
     transform: rotate(90deg);
   }
-  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+  .p-megamenu.p-megamenu-mobile
+    .p-megamenu-root-list
+    .p-submenu-list
+    .p-menuitem-active
+    > .p-menuitem-content
+    > .p-menuitem-link
+    > .p-submenu-icon {
     transform: rotate(-90deg);
   }
-  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+  .p-megamenu.p-megamenu-mobile
+    .p-megamenu-root-list
+    .p-submenu-list
+    .p-menuitem
+    .p-menuitem-content
+    .p-menuitem-link {
     padding-left: 2.25rem;
   }
 
@@ -4531,35 +5364,78 @@
   }
   .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
-  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-menu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #047857;
   }
-  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-menu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-menu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #047857;
   }
   .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+  .p-menu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content {
     color: #4b5563;
     background: #e5e7eb;
   }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-menu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-menu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-menu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #4b5563;
   }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+  .p-menu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover {
     color: #4b5563;
     background: #f3f4f6;
   }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: #4b5563;
-  }
-  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+  .p-menu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-menu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
   .p-menu.p-menu-overlay {
@@ -4596,29 +5472,67 @@
     transition: box-shadow 0.2s;
     border-radius: 6px;
   }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+  .p-menubar
+    .p-menubar-root-list
+    > .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link {
     padding: 0.75rem 1.25rem;
     user-select: none;
   }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-menubar
+    .p-menubar-root-list
+    > .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+  .p-menubar
+    .p-menubar-root-list
+    > .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon {
     color: #6b7280;
     margin-right: 0.5rem;
   }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-menubar
+    .p-menubar-root-list
+    > .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
     margin-left: 0.5rem;
   }
-  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+  .p-menubar
+    .p-menubar-root-list
+    > .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover {
     color: #4b5563;
     background: #f3f4f6;
   }
-  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: #4b5563;
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+  .p-menubar
+    .p-menubar-root-list
+    > .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar
+    .p-menubar-root-list
+    > .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-menubar
+    .p-menubar-root-list
+    > .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
   .p-menubar .p-menuitem > .p-menuitem-content {
@@ -4631,47 +5545,102 @@
     padding: 0.75rem 1.25rem;
     user-select: none;
   }
-  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-menubar
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+  .p-menubar
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon {
     color: #6b7280;
     margin-right: 0.5rem;
   }
-  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-menubar
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
   .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
-  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-menubar
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #047857;
   }
-  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-menubar
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-menubar
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #047857;
   }
   .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+  .p-menubar
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content {
     color: #4b5563;
     background: #e5e7eb;
   }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-menubar
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-menubar
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-menubar
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #4b5563;
   }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+  .p-menubar
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover {
     color: #4b5563;
     background: #f3f4f6;
   }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: #4b5563;
-  }
-  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+  .p-menubar
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-menubar
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
   .p-menubar .p-submenu-list {
@@ -4693,7 +5662,10 @@
     height: 2rem;
     color: #6b7280;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-menubar.p-menubar-mobile .p-menubar-button:hover {
     color: #6b7280;
@@ -4717,33 +5689,97 @@
   .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
     font-size: 0.875rem;
   }
-  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-menubar.p-menubar-mobile
+    .p-menubar-root-list
+    .p-menuitem
+    .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     margin-left: auto;
     transition: transform 0.2s;
   }
-  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+  .p-menubar.p-menubar-mobile
+    .p-menubar-root-list
+    .p-menuitem.p-menuitem-active
+    > .p-menuitem-content
+    > .p-menuitem-link
+    > .p-submenu-icon {
     transform: rotate(-180deg);
   }
-  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+  .p-menubar.p-menubar-mobile
+    .p-menubar-root-list
+    .p-submenu-list
+    .p-submenu-icon {
     transition: transform 0.2s;
     transform: rotate(90deg);
   }
-  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+  .p-menubar.p-menubar-mobile
+    .p-menubar-root-list
+    .p-submenu-list
+    .p-menuitem-active
+    > .p-menuitem-content
+    > .p-menuitem-link
+    > .p-submenu-icon {
     transform: rotate(-90deg);
   }
-  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+  .p-menubar.p-menubar-mobile
+    .p-menubar-root-list
+    .p-submenu-list
+    .p-menuitem
+    .p-menuitem-content
+    .p-menuitem-link {
     padding-left: 2.25rem;
   }
-  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+  .p-menubar.p-menubar-mobile
+    .p-menubar-root-list
+    .p-submenu-list
+    .p-menuitem
+    .p-submenu-list
+    .p-menuitem
+    .p-menuitem-content
+    .p-menuitem-link {
     padding-left: 3.75rem;
   }
-  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+  .p-menubar.p-menubar-mobile
+    .p-menubar-root-list
+    .p-submenu-list
+    .p-menuitem
+    .p-submenu-list
+    .p-menuitem
+    .p-submenu-list
+    .p-menuitem
+    .p-menuitem-content
+    .p-menuitem-link {
     padding-left: 5.25rem;
   }
-  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+  .p-menubar.p-menubar-mobile
+    .p-menubar-root-list
+    .p-submenu-list
+    .p-menuitem
+    .p-submenu-list
+    .p-menuitem
+    .p-submenu-list
+    .p-menuitem
+    .p-submenu-list
+    .p-menuitem
+    .p-menuitem-content
+    .p-menuitem-link {
     padding-left: 6.75rem;
   }
-  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+  .p-menubar.p-menubar-mobile
+    .p-menubar-root-list
+    .p-submenu-list
+    .p-menuitem
+    .p-submenu-list
+    .p-menuitem
+    .p-submenu-list
+    .p-menuitem
+    .p-submenu-list
+    .p-menuitem
+    .p-submenu-list
+    .p-menuitem
+    .p-menuitem-content
+    .p-menuitem-link {
     padding-left: 8.25rem;
   }
 
@@ -4757,28 +5793,45 @@
     border-radius: 6px;
     transition: box-shadow 0.2s;
   }
-  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action {
+  .p-panelmenu
+    .p-panelmenu-header
+    .p-panelmenu-header-content
+    .p-panelmenu-header-action {
     color: #6b7280;
     padding: 1.25rem;
     font-weight: 700;
   }
-  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon {
+  .p-panelmenu
+    .p-panelmenu-header
+    .p-panelmenu-header-content
+    .p-panelmenu-header-action
+    .p-submenu-icon {
     margin-right: 0.5rem;
   }
-  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon {
+  .p-panelmenu
+    .p-panelmenu-header
+    .p-panelmenu-header-content
+    .p-panelmenu-header-action
+    .p-menuitem-icon {
     margin-right: 0.5rem;
   }
-  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+  .p-panelmenu
+    .p-panelmenu-header:not(.p-disabled):focus-visible
+    .p-panelmenu-header-content {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: inset 0 0 0 0.2rem #a7f3d0;
   }
-  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+  .p-panelmenu
+    .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover
+    .p-panelmenu-header-content {
     background: #f3f4f6;
     border-color: #e5e7eb;
     color: #374151;
   }
-  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+  .p-panelmenu
+    .p-panelmenu-header:not(.p-disabled).p-highlight
+    .p-panelmenu-header-content {
     background: #f9fafb;
     border-color: #e5e7eb;
     color: #374151;
@@ -4786,7 +5839,9 @@
     border-bottom-left-radius: 0;
     margin-bottom: 0;
   }
-  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+  .p-panelmenu
+    .p-panelmenu-header:not(.p-disabled).p-highlight:hover
+    .p-panelmenu-header-content {
     border-color: #e5e7eb;
     background: #f3f4f6;
     color: #374151;
@@ -4810,62 +5865,148 @@
     transition: box-shadow 0.2s;
     border-radius: 0;
   }
-  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link {
     color: #4b5563;
     padding: 0.75rem 1.25rem;
     user-select: none;
   }
-  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon {
     color: #6b7280;
     margin-right: 0.5rem;
   }
-  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
-  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem.p-highlight
+    > .p-menuitem-content {
     color: #047857;
-    background: #F0FDFA;
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    background: #f0fdfa;
+  }
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #047857;
   }
-  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #047857;
   }
-  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem.p-highlight.p-focus
+    > .p-menuitem-content {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content {
     color: #4b5563;
     background: #e5e7eb;
   }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-    color: #4b5563;
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    color: #4b5563;
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover {
     color: #4b5563;
     background: #f3f4f6;
   }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: #4b5563;
-  }
-  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
-  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-menuitem
+    .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     margin-right: 0.5rem;
   }
   .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
     border-top: 1px solid #e5e7eb;
     margin: 0.25rem 0;
   }
-  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+  .p-panelmenu
+    .p-panelmenu-content
+    .p-submenu-list:not(.p-panelmenu-root-list) {
     padding: 0 0 0 1rem;
   }
   .p-panelmenu .p-panelmenu-panel {
@@ -4899,7 +6040,7 @@
     box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-steps .p-steps-item.p-highlight .p-steps-number {
-    background: #F0FDFA;
+    background: #f0fdfa;
     color: #047857;
   }
   .p-steps .p-steps-item.p-highlight .p-steps-title {
@@ -4941,12 +6082,18 @@
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
     margin-right: 0.5rem;
   }
-  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus-visible {
+  .p-tabmenu
+    .p-tabmenu-nav
+    .p-tabmenuitem
+    .p-menuitem-link:not(.p-disabled):focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: inset 0 0 0 0.2rem #a7f3d0;
   }
-  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+  .p-tabmenu
+    .p-tabmenu-nav
+    .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover
+    .p-menuitem-link {
     background: #ffffff;
     border-color: #9ca3af;
     color: #6b7280;
@@ -4989,47 +6136,102 @@
     padding: 0.75rem 1.25rem;
     user-select: none;
   }
-  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-tieredmenu
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+  .p-tieredmenu
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon {
     color: #6b7280;
     margin-right: 0.5rem;
   }
-  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-tieredmenu
+    .p-menuitem
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
   .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
     color: #047857;
-    background: #F0FDFA;
+    background: #f0fdfa;
   }
-  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-tieredmenu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #047857;
   }
-  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-tieredmenu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-tieredmenu
+    .p-menuitem.p-highlight
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #047857;
   }
   .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
     background: rgba(16, 185, 129, 0.24);
   }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+  .p-tieredmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content {
     color: #4b5563;
     background: #e5e7eb;
   }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  .p-tieredmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-text {
     color: #4b5563;
   }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+  .p-tieredmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-tieredmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
+    > .p-menuitem-content
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #4b5563;
   }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+  .p-tieredmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover {
     color: #4b5563;
     background: #f3f4f6;
   }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-    color: #4b5563;
-  }
-  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+  .p-tieredmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-menuitem-icon,
+  .p-tieredmenu
+    .p-menuitem:not(.p-highlight):not(.p-disabled)
+    > .p-menuitem-content:hover
+    .p-menuitem-link
+    .p-submenu-icon {
     color: #6b7280;
   }
   .p-tieredmenu .p-menuitem-separator {
@@ -5108,7 +6310,10 @@
     height: 2rem;
     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;
   }
   .p-message .p-message-close:hover {
     background: rgba(255, 255, 255, 0.5);
@@ -5197,7 +6402,10 @@
   .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
     font-size: 2rem;
   }
-  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  .p-toast
+    .p-toast-message
+    .p-toast-message-content
+    .p-toast-message-icon.p-icon {
     width: 2rem;
     height: 2rem;
   }
@@ -5212,7 +6420,10 @@
     height: 2rem;
     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;
   }
   .p-toast .p-toast-message .p-toast-icon-close:hover {
     background: rgba(255, 255, 255, 0.5);
@@ -5229,7 +6440,7 @@
     color: #3b82f6;
   }
   .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close {
+  .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close {
     color: #3b82f6;
   }
   .p-toast .p-toast-message.p-toast-message-success {
@@ -5239,7 +6450,7 @@
     color: #1ea97c;
   }
   .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
+  .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
     color: #1ea97c;
   }
   .p-toast .p-toast-message.p-toast-message-warn {
@@ -5249,7 +6460,7 @@
     color: #cc8925;
   }
   .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close {
+  .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close {
     color: #cc8925;
   }
   .p-toast .p-toast-message.p-toast-message-error {
@@ -5259,7 +6470,7 @@
     color: #ff5757;
   }
   .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
+  .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #ff5757;
   }
 
@@ -5269,7 +6480,10 @@
     color: #f9fafb;
     width: 4rem;
     height: 4rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     border-radius: 50%;
   }
   .p-galleria .p-galleria-close .p-galleria-close-icon {
@@ -5288,12 +6502,15 @@
     color: #f9fafb;
     width: 4rem;
     height: 4rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     border-radius: 6px;
     margin: 0 0.5rem;
   }
   .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon,
-.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
     font-size: 2rem;
   }
   .p-galleria .p-galleria-item-nav .p-icon {
@@ -5316,33 +6533,47 @@
     background-color: #d1d5db;
     width: 1rem;
     height: 1rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     border-radius: 50%;
   }
   .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
     background: #9ca3af;
   }
   .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-    background: #F0FDFA;
+    background: #f0fdfa;
     color: #047857;
   }
-  .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator {
+  .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator,
+  .p-galleria.p-galleria-indicators-top .p-galleria-indicator {
     margin-right: 0.5rem;
   }
-  .p-galleria.p-galleria-indicators-left .p-galleria-indicator, .p-galleria.p-galleria-indicators-right .p-galleria-indicator {
+  .p-galleria.p-galleria-indicators-left .p-galleria-indicator,
+  .p-galleria.p-galleria-indicators-right .p-galleria-indicator {
     margin-bottom: 0.5rem;
   }
   .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators {
     background: rgba(0, 0, 0, 0.5);
   }
-  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button {
+  .p-galleria.p-galleria-indicator-onitem
+    .p-galleria-indicators
+    .p-galleria-indicator
+    button {
     background: rgba(255, 255, 255, 0.4);
   }
-  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover {
+  .p-galleria.p-galleria-indicator-onitem
+    .p-galleria-indicators
+    .p-galleria-indicator
+    button:hover {
     background: rgba(255, 255, 255, 0.6);
   }
-  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-    background: #F0FDFA;
+  .p-galleria.p-galleria-indicator-onitem
+    .p-galleria-indicators
+    .p-galleria-indicator.p-highlight
+    button {
+    background: #f0fdfa;
     color: #047857;
   }
   .p-galleria .p-galleria-thumbnail-container {
@@ -5350,21 +6581,26 @@
     padding: 1rem 0.25rem;
   }
   .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
     margin: 0.5rem;
     background-color: transparent;
     color: #f9fafb;
     width: 2rem;
     height: 2rem;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     border-radius: 50%;
   }
   .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover,
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover {
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover {
     background: rgba(255, 255, 255, 0.1);
     color: #f9fafb;
   }
-  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+  .p-galleria
+    .p-galleria-thumbnail-container
+    .p-galleria-thumbnail-item-content:focus-visible {
     outline: 0 none;
     outline-offset: 0;
     box-shadow: 0 0 0 0.2rem #a7f3d0;
@@ -5381,7 +6617,10 @@
   .p-image-preview-indicator {
     background-color: transparent;
     color: #f8f9fa;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-image-preview-indicator .p-icon {
     width: 1.5rem;
@@ -5402,7 +6641,10 @@
     width: 3rem;
     height: 3rem;
     border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
     margin-right: 0.5rem;
   }
   .p-image-action.p-link:last-child {
@@ -5455,11 +6697,11 @@
     line-height: 1.5rem;
   }
   .p-badge.p-badge-secondary {
-    background-color: #64748B;
+    background-color: #64748b;
     color: #ffffff;
   }
   .p-badge.p-badge-success {
-    background-color: #22C55E;
+    background-color: #22c55e;
     color: #ffffff;
   }
   .p-badge.p-badge-info {
@@ -5471,7 +6713,7 @@
     color: #ffffff;
   }
   .p-badge.p-badge-danger {
-    background-color: #EF4444;
+    background-color: #ef4444;
     color: #ffffff;
   }
   .p-badge.p-badge-lg {
@@ -5510,7 +6752,10 @@
   .p-chip .p-chip-remove-icon {
     margin-left: 0.5rem;
     border-radius: 6px;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-chip .p-chip-remove-icon:focus-visible {
     outline: 0 none;
@@ -5524,7 +6769,11 @@
   .p-inplace .p-inplace-display {
     padding: 0.75rem 0.75rem;
     border-radius: 6px;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
   .p-inplace .p-inplace-display:not(.p-disabled):hover {
     background: #f3f4f6;
@@ -5560,7 +6809,9 @@
     stroke-dasharray: 89, 200;
     stroke-dashoffset: 0;
     stroke: #ff5757;
-    animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+    animation:
+      p-progress-spinner-dash 1.5s ease-in-out infinite,
+      p-progress-spinner-color 6s ease-in-out infinite;
     stroke-linecap: round;
   }
 
@@ -5584,7 +6835,8 @@
     }
   }
   @keyframes p-progress-spinner-color {
-    100%, 0% {
+    100%,
+    0% {
       stroke: #ff5757;
     }
     40% {
@@ -5593,7 +6845,8 @@
     66% {
       stroke: #1ea97c;
     }
-    80%, 90% {
+    80%,
+    90% {
       stroke: #cc8925;
     }
   }
@@ -5602,7 +6855,10 @@
     height: 3rem;
     border-radius: 50%;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      box-shadow 0.2s;
   }
   .p-scrolltop.p-link {
     background: rgba(0, 0, 0, 0.7);
@@ -5624,7 +6880,12 @@
     border-radius: 6px;
   }
   .p-skeleton:after {
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.4),
+      rgba(255, 255, 255, 0)
+    );
   }
 
   .p-tag {
@@ -5636,7 +6897,7 @@
     border-radius: 6px;
   }
   .p-tag.p-tag-success {
-    background-color: #22C55E;
+    background-color: #22c55e;
     color: #ffffff;
   }
   .p-tag.p-tag-info {
@@ -5648,7 +6909,7 @@
     color: #ffffff;
   }
   .p-tag.p-tag-danger {
-    background-color: #EF4444;
+    background-color: #ef4444;
     color: #ffffff;
   }
   .p-tag .p-tag-icon {
@@ -5678,20 +6939,32 @@
   }
 
   .p-selectbutton > .p-button,
-.p-togglebutton.p-button {
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  .p-togglebutton.p-button {
+    transition:
+      background-color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
 
   .p-accordion .p-accordion-header .p-accordion-header-link {
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
 
   .p-tabview .p-tabview-nav li .p-tabview-nav-link {
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
 
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition:
+      background-color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
 
   .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
@@ -5703,25 +6976,46 @@
   }
 
   .p-button:focus {
-    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #71f3c8, 0 1px 2px 0 black;
+    box-shadow:
+      0 0 0 2px #ffffff,
+      0 0 0 4px #71f3c8,
+      0 1px 2px 0 black;
   }
   .p-button.p-button-secondary:enabled:focus {
-    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black;
+    box-shadow:
+      0 0 0 2px #ffffff,
+      0 0 0 4px #b0b9c6,
+      0 1px 2px 0 black;
   }
   .p-button.p-button-success:enabled:focus {
-    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black;
+    box-shadow:
+      0 0 0 2px #ffffff,
+      0 0 0 4px #88eaac,
+      0 1px 2px 0 black;
   }
   .p-button.p-button-info:enabled:focus {
-    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black;
+    box-shadow:
+      0 0 0 2px #ffffff,
+      0 0 0 4px #83d3f8,
+      0 1px 2px 0 black;
   }
   .p-button.p-button-warning:enabled:focus {
-    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black;
+    box-shadow:
+      0 0 0 2px #ffffff,
+      0 0 0 4px #fcb98b,
+      0 1px 2px 0 black;
   }
   .p-button.p-button-help:enabled:focus {
-    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black;
+    box-shadow:
+      0 0 0 2px #ffffff,
+      0 0 0 4px #d4aafb,
+      0 1px 2px 0 black;
   }
   .p-button.p-button-danger:enabled:focus {
-    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black;
+    box-shadow:
+      0 0 0 2px #ffffff,
+      0 0 0 4px #f7a2a2,
+      0 1px 2px 0 black;
   }
 
   .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
@@ -5732,7 +7026,10 @@
   }
 
   .p-speeddial-item.p-focus > .p-speeddial-action {
-    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #71f3c8, 0 1px 2px 0 black;
+    box-shadow:
+      0 0 0 2px #ffffff,
+      0 0 0 4px #71f3c8,
+      0 1px 2px 0 black;
   }
 
   .p-toast-message {
@@ -5744,8 +7041,13 @@
   }
 
   .p-picklist-buttons .p-button,
-.p-orderlist-controls .p-button {
-    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  .p-orderlist-controls .p-button {
+    transition:
+      opacity 0.2s,
+      background-color 0.2s,
+      color 0.2s,
+      border-color 0.2s,
+      box-shadow 0.2s;
   }
 
   .p-steps .p-steps-item.p-highlight .p-steps-number {
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/BcButton.vue b/frontend/components/bc/BcButton.vue
index 7625eabb8..d8eb8fd83 100644
--- a/frontend/components/bc/BcButton.vue
+++ b/frontend/components/bc/BcButton.vue
@@ -12,7 +12,9 @@ const props = defineProps<{
   variant?: 'secondary' // | 'red'
 }>()
 
-const shouldAppearDisabled = computed(() => props.isDisabled || props.isAriaDisabled)
+const shouldAppearDisabled = computed(
+  () => props.isDisabled || props.isAriaDisabled,
+)
 </script>
 
 <template>
@@ -37,30 +39,30 @@ const shouldAppearDisabled = computed(() => props.isDisabled || props.isAriaDisa
 </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;
   }
+}
+.bc-button__icon {
+  margin-left: var(--padding-small);
+}
 </style>
diff --git a/frontend/components/bc/BcCurrencySelection.vue b/frontend/components/bc/BcCurrencySelection.vue
index 57940f67e..4db775158 100644
--- a/frontend/components/bc/BcCurrencySelection.vue
+++ b/frontend/components/bc/BcCurrencySelection.vue
@@ -18,7 +18,7 @@ const { currency, withLabel, setCurrency } = useCurrency()
     @update:model-value="(currency: Currency) => setCurrency(currency)"
   >
     <template #value>
-      <span class="item in-header ">
+      <span class="item in-header">
         <span
           v-if="showCurrencyIcon"
           class="icon"
@@ -26,8 +26,7 @@ const { currency, withLabel, setCurrency } = useCurrency()
           <IconCurrency
             v-if="currency"
             :currency="currency"
-          />
-        </span>{{ currency }}
+          /> </span>{{ currency }}
       </span>
     </template>
     <template #option="slotProps">
diff --git a/frontend/components/bc/BcDialog.vue b/frontend/components/bc/BcDialog.vue
index 8575aa121..9000bdc30 100644
--- a/frontend/components/bc/BcDialog.vue
+++ b/frontend/components/bc/BcDialog.vue
@@ -11,9 +11,11 @@ const props = defineProps<Props>()
 
 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) {
diff --git a/frontend/components/bc/BcFaq.vue b/frontend/components/bc/BcFaq.vue
index 96517eabf..1a4710df5 100644
--- a/frontend/components/bc/BcFaq.vue
+++ b/frontend/components/bc/BcFaq.vue
@@ -1,8 +1,6 @@
 <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
@@ -14,7 +12,7 @@ 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
diff --git a/frontend/components/bc/BcIconToggle.vue b/frontend/components/bc/BcIconToggle.vue
index ea5c9c3f9..e00b7d717 100644
--- a/frontend/components/bc/BcIconToggle.vue
+++ b/frontend/components/bc/BcIconToggle.vue
@@ -58,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 4e7614ba3..b33af7173 100644
--- a/frontend/components/bc/BcLink.vue
+++ b/frontend/components/bc/BcLink.vue
@@ -1,5 +1,4 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <NuxtLink :no-prefetch="true">
diff --git a/frontend/components/bc/BcMaintenanceBanner.vue b/frontend/components/bc/BcMaintenanceBanner.vue
index da25ee764..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,9 +11,12 @@ 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) {
@@ -19,7 +24,9 @@ const maintenanceLabel = computed(() => {
   }
   const ts = new Date(parsed * 1000).getTime()
   if (ts > tick.value) {
-    return $t('maintenance.planned', { date: formatTsToAbsolute(ts / 1000, $t('locales.date'), true) })
+    return $t('maintenance.planned', {
+      date: formatTsToAbsolute(ts / 1000, $t('locales.date'), true),
+    })
   }
   else {
     return $t('maintenance.ongoing')
@@ -37,7 +44,7 @@ const maintenanceLabel = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-.maintenance-banner{
+.maintenance-banner {
   width: 100%;
   padding: var(--padding-large);
   background-color: var(--grey-4);
@@ -45,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 455beccf6..f5597de48 100644
--- a/frontend/components/bc/BcToggle.vue
+++ b/frontend/components/bc/BcToggle.vue
@@ -37,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 3a513f9b4..5483be281 100644
--- a/frontend/components/bc/BcTooltip.vue
+++ b/frontend/components/bc/BcTooltip.vue
@@ -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
@@ -144,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()
@@ -180,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()
@@ -356,7 +382,6 @@ onUnmounted(() => {
     &::after {
       border-color: var(--tt-bg-color) transparent transparent transparent;
     }
-
   }
 
   &.right {
@@ -386,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 cdfbbc472..ba12b3aa1 100644
--- a/frontend/components/bc/BcTranslation.vue
+++ b/frontend/components/bc/BcTranslation.vue
@@ -50,5 +50,4 @@ defineProps<{
   </I18nT>
 </template>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/frontend/components/bc/ContentFilter.vue b/frontend/components/bc/ContentFilter.vue
index b407256c0..9cf5798bd 100644
--- a/frontend/components/bc/ContentFilter.vue
+++ b/frontend/components/bc/ContentFilter.vue
@@ -1,7 +1,5 @@
 <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'
 
 interface Props {
@@ -29,7 +27,7 @@ const filter = ref<string>('')
       :disabled="disabledFilter"
       class="p-button-icon-only"
       :class="{ filter_visible: filterVisible }"
-      @click="filterVisible=!filterVisible"
+      @click="filterVisible = !filterVisible"
     >
       <FontAwesomeIcon :icon="faMagnifyingGlass" />
     </Button>
@@ -37,46 +35,46 @@ const filter = ref<string>('')
 </template>
 
 <style lang="scss">
-  .filter_elements_container {
-    display: flex;
-    justify-content: flex-end;
-    position: relative;
+.filter_elements_container {
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+
+  > :first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    height: var(--default-button-height);
+    width: 0;
+    opacity: 0;
+    padding: 0;
+    position: absolute;
+    transition:
+      width 0.2s ease-in-out,
+      opacity 0.01s ease-in-out 0.19s,
+      padding 0.2s ease-in-out;
+
+    &.visible {
+      width: 230px;
+      opacity: 100%;
+      padding: 4px;
 
-    > :first-child{
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      height: var(--default-button-height);
-      width: 0;
-      opacity: 0;
-      padding: 0;
-      position: absolute;
       transition:
         width 0.2s ease-in-out,
-        opacity 0.01s ease-in-out 0.19s,
+        opacity 0.01s ease-in-out,
         padding 0.2s ease-in-out;
-
-      &.visible {
-        width: 230px;
-        opacity: 100%;
-        padding: 4px;
-
-        transition:
-          width 0.2s ease-in-out,
-          opacity 0.01s ease-in-out,
-          padding 0.2s ease-in-out;
-      }
     }
+  }
 
-    > :last-child{
-      flex-shrink: 0;
-      border-top-left-radius: var(--border-radius);
-      border-bottom-left-radius: var(--border-radius);
-      transition: all 0.2s ease-in-out;
+  > :last-child {
+    flex-shrink: 0;
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    transition: all 0.2s ease-in-out;
 
-      &.filter_visible {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
+    &.filter_visible {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
   }
+}
 </style>
diff --git a/frontend/components/bc/CookieModal.vue b/frontend/components/bc/CookieModal.vue
index 66d3ccccf..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,25 +25,25 @@ const visible = computed(() => cookiePreference.value === undefined)
   >
     <div class="dialog-container">
       <div class="text-container">
-        {{ tOf($t, 'cookies.text', 0) }}
+        {{ 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", 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') }}
+          {{ $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/CopyToClipboard.vue b/frontend/components/bc/CopyToClipboard.vue
index 6ef61a899..84891abe7 100644
--- a/frontend/components/bc/CopyToClipboard.vue
+++ b/frontend/components/bc/CopyToClipboard.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import {
-  faCopy,
-} from '@fortawesome/pro-solid-svg-icons'
+import { faCopy } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { warn } from 'vue'
 import BcTooltip from './BcTooltip.vue'
@@ -12,14 +10,19 @@ interface Props {
 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 {
   if (!props.value) {
     return
   }
 
-  navigator.clipboard.writeText(props.value)
+  navigator.clipboard
+    .writeText(props.value)
     .catch((error) => {
       warn('Error copying text to clipboard:', error)
     })
@@ -46,7 +49,7 @@ function copyToClipboard(): void {
 </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/InputNumber.vue b/frontend/components/bc/InputNumber.vue
index 86a45c296..d9ea19d85 100644
--- a/frontend/components/bc/InputNumber.vue
+++ b/frontend/components/bc/InputNumber.vue
@@ -9,20 +9,36 @@ const props = defineProps<{
 }>()
 
 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) {
+  if (
+    input === undefined
+    || input === null
+    || isNaN(input)
+    || input < props.min
+    || input > props.max
+  ) {
     input = NaN
   }
   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()
 }
@@ -36,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 a1a6fc553..d50a783fc 100644
--- a/frontend/components/bc/LoadingSpinner.vue
+++ b/frontend/components/bc/LoadingSpinner.vue
@@ -54,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;
@@ -72,8 +72,6 @@ defineProps<Props>()
       width: 100%;
       height: 100%;
     }
-
   }
-
 }
 </style>
diff --git a/frontend/components/bc/NetworkSelector.vue b/frontend/components/bc/NetworkSelector.vue
index c07c0060d..313898735 100644
--- a/frontend/components/bc/NetworkSelector.vue
+++ b/frontend/components/bc/NetworkSelector.vue
@@ -21,10 +21,14 @@ if (props.readonlyNetworks) {
   barSelection = ref<string[]>([])
 }
 else if (Array.isArray(selection.value)) {
-  barSelection = useArrayRefBridge<ChainIDs, string>(selection as Ref<ChainIDs[]>)
+  barSelection = useArrayRefBridge<ChainIDs, string>(
+    selection as Ref<ChainIDs[]>,
+  )
 }
 else {
-  barSelection = usePrimitiveRefBridge<ChainIDs, string>(selection as Ref<ChainIDs>)
+  barSelection = usePrimitiveRefBridge<ChainIDs, string>(
+    selection as Ref<ChainIDs>,
+  )
 }
 
 const buttons = computed(() => {
diff --git a/frontend/components/bc/PageWrapper.vue b/frontend/components/bc/PageWrapper.vue
index 1af0e271a..d4339f532 100644
--- a/frontend/components/bc/PageWrapper.vue
+++ b/frontend/components/bc/PageWrapper.vue
@@ -35,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 6895c2fdd..a3edeb70a 100644
--- a/frontend/components/bc/SearchbarGeneral.vue
+++ b/frontend/components/bc/SearchbarGeneral.vue
@@ -1,5 +1,12 @@
 <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
@@ -13,58 +20,58 @@ async function redirectToRelevantPage(result: ResultSuggestion) {
   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
   }
 
diff --git a/frontend/components/bc/ad/AdComponent.vue b/frontend/components/bc/ad/AdComponent.vue
index 3e2494d41..f17d9d50f 100644
--- a/frontend/components/bc/ad/AdComponent.vue
+++ b/frontend/components/bc/ad/AdComponent.vue
@@ -10,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
@@ -20,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()
   }
 }
diff --git a/frontend/components/bc/ad/AdControl.vue b/frontend/components/bc/ad/AdControl.vue
index fb621d01b..b11bca88e 100644
--- a/frontend/components/bc/ad/AdControl.vue
+++ b/frontend/components/bc/ad/AdControl.vue
@@ -2,7 +2,9 @@
 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>
@@ -22,5 +24,4 @@ const rest = computed(() => ads.value?.filter(c => c.jquery_selector !== 'top'))
   </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 c62fc0ab5..f813060de 100644
--- a/frontend/components/bc/dialog/BcDialogConfirm.vue
+++ b/frontend/components/bc/dialog/BcDialogConfirm.vue
@@ -56,7 +56,7 @@ const closeDialog = (response: boolean) => {
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/fonts.scss";
 
 .content {
   display: flex;
@@ -82,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 aba1cae5c..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,
@@ -19,29 +23,72 @@ 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]
     ],
   },
 ]
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 c04b18d41..3645433ae 100644
--- a/frontend/components/bc/form/BcForm.vue
+++ b/frontend/components/bc/form/BcForm.vue
@@ -1,6 +1,4 @@
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <form class="bc-form">
diff --git a/frontend/components/bc/form/BcFormRow.vue b/frontend/components/bc/form/BcFormRow.vue
index 027941e88..12c10691c 100644
--- a/frontend/components/bc/form/BcFormRow.vue
+++ b/frontend/components/bc/form/BcFormRow.vue
@@ -1,6 +1,4 @@
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <div class="bc-form-row">
diff --git a/frontend/components/bc/format/FormatGraffiti.vue b/frontend/components/bc/format/FormatGraffiti.vue
index 5b3cadc64..789b5d403 100644
--- a/frontend/components/bc/format/FormatGraffiti.vue
+++ b/frontend/components/bc/format/FormatGraffiti.vue
@@ -31,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%;
@@ -45,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 2f05d42b0..04b6a3f8f 100644
--- a/frontend/components/bc/format/FormatHash.vue
+++ b/frontend/components/bc/format/FormatHash.vue
@@ -2,9 +2,16 @@
 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
+  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
+  // 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
 }
@@ -15,11 +22,20 @@ 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' : '' })
+    parts.push({
+      value: props.ens,
+      className: !props.full ? 'truncate-text' : '',
+    })
   }
   else if (props.type === 'withdrawal_credentials') {
     const isSet = hash.startsWith('0x01')
@@ -29,7 +45,10 @@ const data = computed(() => {
       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' }])
+      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)}`
@@ -37,8 +56,15 @@ const data = computed(() => {
   }
   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) {
@@ -175,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 ec79e6bb3..d6f429c07 100644
--- a/frontend/components/bc/format/FormatNumber.vue
+++ b/frontend/components/bc/format/FormatNumber.vue
@@ -15,7 +15,9 @@ 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>
 
diff --git a/frontend/components/bc/format/FormatPercent.vue b/frontend/components/bc/format/FormatPercent.vue
index 345225eae..755096e3a 100644
--- a/frontend/components/bc/format/FormatPercent.vue
+++ b/frontend/components/bc/format/FormatPercent.vue
@@ -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>()
@@ -41,7 +42,11 @@ 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) {
@@ -61,7 +66,10 @@ const data = computed(() => {
     }
   }
   else if (props.colorBreakPoint) {
-    if ((props.base === 0 && percent === 0) || percent >= props.colorBreakPoint) {
+    if (
+      (props.base === 0 && percent === 0)
+      || percent >= props.colorBreakPoint
+    ) {
       className = 'text-positive'
     }
     else {
diff --git a/frontend/components/bc/format/FormatTimePassed.vue b/frontend/components/bc/format/FormatTimePassed.vue
index 6e9dc9f69..078f7537a 100644
--- a/frontend/components/bc/format/FormatTimePassed.vue
+++ b/frontend/components/bc/format/FormatTimePassed.vue
@@ -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),
+      }
     }
   }
 
@@ -71,7 +92,7 @@ const label = computed(() => {
 </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 4151c9b18..0915a2e3d 100644
--- a/frontend/components/bc/format/FormatValue.vue
+++ b/frontend/components/bc/format/FormatValue.vue
@@ -11,7 +11,12 @@ interface Props {
   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()
 
@@ -24,7 +29,8 @@ const data = computed(() => {
   }
   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
diff --git a/frontend/components/bc/header/MainHeader.vue b/frontend/components/bc/header/MainHeader.vue
index cf6bdfcf1..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'
@@ -26,7 +23,9 @@ 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)
 
@@ -44,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)
@@ -56,7 +59,9 @@ const userMenu = computed(() => {
   return [
     {
       label: $t('header.settings'),
-      command: async () => { await navigateTo('../user/settings') },
+      command: async () => {
+        await navigateTo('../user/settings')
+      },
     },
     {
       label: $t('header.logout'),
@@ -85,7 +90,7 @@ const userMenu = computed(() => {
     <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>:
+        <span v-if="latestState?.current_slot"><span>{{ $t("header.current_slot") }}</span>:
           <BcLink
             :to="`/slot/${latestState.current_slot}`"
             :disabled="!showInDevelopment || null"
@@ -96,7 +101,7 @@ const userMenu = computed(() => {
             />
           </BcLink>
         </span>
-        <span v-if="currentEpoch !== undefined"><span>{{ $t('header.current_epoch') }}</span>:
+        <span v-if="currentEpoch !== undefined"><span>{{ $t("header.current_epoch") }}</span>:
           <BcLink
             :to="`/epoch/${currentEpoch}`"
             :disabled="!showInDevelopment || null"
@@ -114,9 +119,9 @@ const userMenu = computed(() => {
               class="network-icon"
               :harmonize-perceived-size="true"
               :colored="false"
-            />{{ networkInfo.elCurrency }}
-          </span>:
-          <span> {{ rate.symbol }}
+            />{{ networkInfo.elCurrency }} </span>:
+          <span>
+            {{ rate.symbol }}
             <BcFormatNumber
               class="bold"
               :value="rate.rate"
@@ -131,7 +136,11 @@ 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>
@@ -240,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;
     }
@@ -249,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);
@@ -258,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) {
@@ -377,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 a5186a784..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,
@@ -37,9 +41,7 @@ import {
   faPaintBrush,
   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)
@@ -343,7 +348,8 @@ const items = computed(() => {
                 },
               ],
             },
-          ]],
+          ],
+        ],
       },
       {
         label: 'Gnosis',
@@ -561,7 +567,8 @@ const items = computed(() => {
                 },
               ],
             },
-          ]],
+          ],
+        ],
       },
       {
         label: 'Arbitrum',
@@ -675,7 +682,8 @@ const items = computed(() => {
                 },
               ],
             },
-          ]],
+          ],
+        ],
       },
       {
         label: 'Base',
@@ -789,7 +797,8 @@ const items = computed(() => {
                 },
               ],
             },
-          ]],
+          ],
+        ],
       },
       {
         label: 'Optimism',
@@ -936,7 +945,9 @@ const items = computed(() => {
     if (isLoggedIn.value) {
       list.push({
         label: $t('header.settings'),
-        command: async () => { await navigateTo('../user/settings') },
+        command: async () => {
+          await navigateTo('../user/settings')
+        },
       })
     }
   }
diff --git a/frontend/components/bc/input/BcInputCheckbox.vue b/frontend/components/bc/input/BcInputCheckbox.vue
index f24d820cc..b1676210b 100644
--- a/frontend/components/bc/input/BcInputCheckbox.vue
+++ b/frontend/components/bc/input/BcInputCheckbox.vue
@@ -1,7 +1,5 @@
 <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 { BcInputError } from '~/components/bc/input/BcInputError.vue'
 
@@ -48,7 +46,7 @@ const input = defineModel<boolean>()
 </template>
 
 <style lang="scss">
-.label{
+.label {
   cursor: pointer;
 }
 .bc-input-checkbox__info {
diff --git a/frontend/components/bc/input/BcInputError.vue b/frontend/components/bc/input/BcInputError.vue
index c9696f0e2..22de10d00 100644
--- a/frontend/components/bc/input/BcInputError.vue
+++ b/frontend/components/bc/input/BcInputError.vue
@@ -1,9 +1,9 @@
 <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.
-   */
+ * 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
diff --git a/frontend/components/bc/input/BcInputLabel.vue b/frontend/components/bc/input/BcInputLabel.vue
index 462598d0d..e8b8e4cd4 100644
--- a/frontend/components/bc/input/BcInputLabel.vue
+++ b/frontend/components/bc/input/BcInputLabel.vue
@@ -1,8 +1,5 @@
 <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 {
@@ -46,12 +43,20 @@ 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) {
@@ -112,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/premium/BcPremiumGem.vue b/frontend/components/bc/premium/BcPremiumGem.vue
index ff6fc3ba5..45152a6f2 100644
--- a/frontend/components/bc/premium/BcPremiumGem.vue
+++ b/frontend/components/bc/premium/BcPremiumGem.vue
@@ -1,7 +1,5 @@
 <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>
 
diff --git a/frontend/components/bc/premium/BcPremiumModal.vue b/frontend/components/bc/premium/BcPremiumModal.vue
index a5e811feb..5f82aacc2 100644
--- a/frontend/components/bc/premium/BcPremiumModal.vue
+++ b/frontend/components/bc/premium/BcPremiumModal.vue
@@ -4,7 +4,9 @@ interface Props {
   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 = () => {
@@ -18,14 +20,14 @@ onMounted(() => {
 
 <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') }}
+      {{ props?.dismissLabel || $t("navigation.dismiss") }}
     </div>
     <BcLink
       to="/pricing"
@@ -62,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 19a2f5d3d..98663167b 100644
--- a/frontend/components/bc/searchbar/CategorySelectors.vue
+++ b/frontend/components/bc/searchbar/CategorySelectors.vue
@@ -14,7 +14,9 @@ defineProps<{
   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()
 
@@ -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 d7bbaac49..747fe4740 100644
--- a/frontend/components/bc/searchbar/FilterButton.vue
+++ b/frontend/components/bc/searchbar/FilterButton.vue
@@ -27,7 +27,11 @@ const emit = defineEmits<{ (e: 'change', activated: boolean): void }>()
       :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 8bc4a5e81..68a9c9d0a 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: @thib-wien plz fix this -->
 <script setup lang="ts">
 import { type ComponentPublicInstance, warn } from 'vue'
 
@@ -58,10 +59,12 @@ enum SignalDirection {
 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.
@@ -85,7 +88,9 @@ let frameWidthAfterLastUpdate = 0 // used by determineReason() to find out why a
 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:
@@ -141,7 +150,9 @@ const exposedMembers: ExposedMembers = {
 
 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,108 +161,153 @@ 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)
+  logStep(
+    'event',
+    'props.widthMediaqueryThreshold reached:',
+    props.widthMediaqueryThreshold,
+  )
   if (!delayedForcedUpdateIncoming) {
     delayedForcedUpdateIncoming = true
     setTimeout(() => {
@@ -263,7 +319,8 @@ function catchResizingCausedByMediaquery() {
 
 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
@@ -282,11 +339,16 @@ function handleResizingEvent(force: boolean) {
   }
   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)
+      props.meCallbackToInformParentAboutChanges!(
+        SignalDirection.ChildrenToParent,
+      )
+    }
+    else {
+      logStep('good', 'parent not called because no width difference')
     }
-    else { logStep('good', 'parent not called because no width difference') }
   }
 }
 
@@ -308,7 +370,15 @@ 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()
@@ -338,14 +408,16 @@ function didMyGivenContentChange(): boolean {
 }
 
 function identifyChildren(): boolean {
-  if (innerElements.allInstanciatedElements.value.length !== slot.value.length) {
+  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) {
@@ -371,7 +443,12 @@ function invalidateChildrenIdentities() {
 
 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) {
@@ -383,8 +460,14 @@ function updateContent(additionalWidthAvailable: number, force: boolean) {
   }
 }
 
-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')
@@ -426,7 +509,11 @@ function enterUpdateCycleAsAparent(direction: SignalDirection, force: boolean =
     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 canUseMoreRoom: {
+      child: MiddleEllipsis
+      growth: number
+      flexGrow: number
+    }[] = []
     const hasEnoughRoom: MiddleEllipsis[] = []
     let totalAdditionalRoom = 0
     let totalFlexGrow = 0
@@ -444,7 +531,9 @@ function enterUpdateCycleAsAparent(direction: SignalDirection, force: boolean =
       }
     }
     // 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
@@ -452,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
       }
@@ -489,8 +579,19 @@ 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))
+    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')
@@ -517,9 +618,11 @@ 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
 }
@@ -540,7 +643,8 @@ 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
@@ -570,7 +674,8 @@ 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) {
@@ -585,10 +690,18 @@ function setFrameWidth(mode: WidthMode, x: number = 0) {
   }
 }
 
-function determineReason(considerThatTheChangeAffectsMeOnly: boolean): 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 {
@@ -607,14 +720,29 @@ function determineReason(considerThatTheChangeAffectsMeOnly: boolean): UpdateRea
       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 } {
     // 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
+    const frameWhidthToCompareTo = amIreadyForUpdate
+      ? widthAvailableDuringLastUpdate
+      : frameWidthAfterLastUpdate
+    const now
+      = getFrameWidth()
+      + (amIreadyForUpdate ? currentAdditionalWidthAvailable : 0)
+      - calculateTextWidth(currentText).width
     if (frameWhidthToCompareTo) {
       before = frameWhidthToCompareTo - textAfterLastUpdate.width
     }
@@ -643,7 +771,9 @@ function howMuchCanIshrinkOrGrow(accurate: boolean): number {
     }
   }
   else {
-    withoutRestriction = calculateTextWidth(props.text).width - (widthRightNow - ResizeObserverLagMargin)
+    withoutRestriction
+      = calculateTextWidth(props.text).width
+      - (widthRightNow - ResizeObserverLagMargin)
   }
   if (!accurate) {
     return withoutRestriction
@@ -653,11 +783,15 @@ function howMuchCanIshrinkOrGrow(accurate: boolean): number {
   }
   if (withoutRestriction >= 0) {
     const limit = parseFloat(frameStyle.maxWidth) || Number.MAX_SAFE_INTEGER
-    return (widthRightNow + withoutRestriction <= limit) ? withoutRestriction : limit - widthRightNow
+    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
   }
 }
 
@@ -695,7 +829,8 @@ function settleAfterUpdate() {
   textPropsDuringLastUpdate = props.text || ''
   initialFlexGrowDuringLastUpdate = props.initialFlexGrow
   ellipsesPropsDuringLastUpdate = props.ellipses
-  widthAvailableDuringLastUpdate = getFrameWidth() + currentAdditionalWidthAvailable
+  widthAvailableDuringLastUpdate
+    = getFrameWidth() + currentAdditionalWidthAvailable
   if (whatIam.value !== WhatIcanBe.Parent) {
     setFrameText(currentText)
   }
@@ -713,39 +848,49 @@ function saveFinalState() {
   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' :
+    case 'attention':
       msg = '\u001B[31m' + msg
       break
-    case 'event' :
+    case 'event':
       msg = '\u001B[33m' + msg
       break
-    case 'signal' :
+    case 'signal':
       msg = '\u001B[32m' + msg
       break
-    case 'good' :
+    case 'good':
       msg = '\u001B[34m' + msg
       break
-    case 'completed' :
+    case 'completed':
       msg = '\u001B[35m' + msg
       break
-    default :
+    default:
       msg = '\u001B[0m' + msg
   }
   const writer = console
@@ -753,10 +898,17 @@ function logStep(color: 'neutral' | 'attention' | 'event' | 'signal' | 'good' |
 }
 
 function whatIsMyGivenContent(): any {
-  return whatIam.value !== WhatIcanBe.Parent ? (props.text ? 'text' : 'no text') : innerElements.allInstanciatedElements.value
+  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) {
@@ -769,16 +921,19 @@ function searchForIdealLength(originalText: string = '', targetWidth: number): s
       if (current.width > targetWidth) {
         maxLength = current.text.length
         maxWidth = current.width
-        averageCharWidthBetweenCurrentAndBound = (current.width - minWidth) / (current.text.length - minLength)
+        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
+      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
@@ -792,7 +947,13 @@ function searchForIdealLength(originalText: string = '', targetWidth: number): s
       else if (estimatedLengthExcess === 0) {
         break
       }
-      current = calculateTextWidth(clipText(originalText, lengthToTry, numberOfEllipsesSetInProps(lengthToTry)))
+      current = calculateTextWidth(
+        clipText(
+          originalText,
+          lengthToTry,
+          numberOfEllipsesSetInProps(lengthToTry),
+        ),
+      )
       totalIterationsWhenClipping++
     }
     numberOfClippings++
@@ -800,7 +961,11 @@ function searchForIdealLength(originalText: string = '', targetWidth: number): s
   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 ''
   }
@@ -826,7 +991,11 @@ function clipText(originalText: string, room: number, nEllipses: number): string
   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
@@ -849,14 +1018,18 @@ function clipText(originalText: string, room: number, nEllipses: number): string
     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 }
+  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--
     }
@@ -871,7 +1044,11 @@ function clipText(originalText: string, room: number, nEllipses: number): string
   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--
     }
@@ -908,7 +1085,9 @@ 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>
@@ -918,12 +1097,16 @@ const frameClassList = computed(() => 'middle-ellipsis-root-frame ' + props.clas
   >
     {{ 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 5cd1ecca1..18f235496 100644
--- a/frontend/components/bc/searchbar/NetworkSelector.vue
+++ b/frontend/components/bc/searchbar/NetworkSelector.vue
@@ -1,7 +1,12 @@
 <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 }>()
@@ -10,7 +15,9 @@ defineProps<{
   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()
 
@@ -18,17 +25,20 @@ const headState = ref<{ look: 'on' | 'off', network: string }>({
   look: 'off',
   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
@@ -43,7 +53,13 @@ onUnmounted(() => {
 })
 
 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)) {
+  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
@@ -64,19 +80,27 @@ 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 {
     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],
+    })
   }
 }
 
@@ -104,14 +128,14 @@ 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"
       >
         <span class="label">
-          {{ t('search_bar.network_filter_label') + ' ' + headState.network }}
+          {{ t("search_bar.network_filter_label") + " " + headState.network }}
         </span>
         <fontAwesomeIcon
           class="arrow"
@@ -124,7 +148,11 @@ function oneOptionChanged(index: number) {
       ref="dropdown"
       class="dropdown"
       :class="[barShape, colorTheme]"
-      @keydown="(e) => { if (e.key === 'Escape') dropdownIsOpen = false }"
+      @keydown="
+        (e) => {
+          if (e.key === 'Escape') dropdownIsOpen = false;
+        }
+      "
     >
       <div
         v-for="(line, i) of listInDropdown"
@@ -208,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);
       }
 
@@ -223,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 df3a50f01..b1a82f7c9 100644
--- a/frontend/components/bc/searchbar/SearchbarButton.vue
+++ b/frontend/components/bc/searchbar/SearchbarButton.vue
@@ -32,7 +32,7 @@ defineProps<{
 </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 c71897538..d84333631 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: @thib-wien 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
@@ -117,7 +118,9 @@ const results = {
 }
 
 function hideResult(whichOne: ResultSuggestion) {
-  results.raw.stringifyiedList.delete((whichOne as ResultSuggestionInternal).stringifyiedRawResult)
+  results.raw.stringifyiedList.delete(
+    (whichOne as ResultSuggestionInternal).stringifyiedRawResult,
+  )
   // now we update the list of result suggestions
   refreshOutputArea()
 }
@@ -179,17 +182,23 @@ function updateGlobalState(state: States) {
 }
 
 function reconfigureSearchbar() {
-  differentialRequests = SearchbarPurposeInfo[props.barPurpose].differentialRequests
+  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)
@@ -216,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
     }
   })
@@ -237,8 +250,13 @@ 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)) {
+  if (
+    !globalState.value.showDropdown
+    || !dropdown.value
+    || !textFieldAndButton.value
+    || dropdown.value.contains(event.target as Node)
+    || textFieldAndButton.value.contains(event.target as Node)
+  ) {
     return
   }
   closeDropdown()
@@ -264,10 +282,10 @@ function textMightHaveChanged() {
 
 function handleKeyPressInTextField(key: string) {
   switch (key) {
-    case 'Enter' :
+    case 'Enter':
       userPressedSearchButtonOrEnter()
       break
-    case 'Escape' :
+    case 'Escape':
       closeDropdown()
       break
     default:
@@ -294,7 +312,11 @@ 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 {
@@ -307,19 +329,23 @@ function userFiltersChanged() {
 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
   }
@@ -340,7 +366,12 @@ function userPressedSearchButtonOrEnter() {
       // 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
         }
       }
@@ -448,10 +479,15 @@ async function callAPIthenOrganizeResultsThenCallBack(nonceWhenCalled: number) {
   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
   }
@@ -481,12 +517,20 @@ 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)
     }
@@ -505,29 +549,47 @@ 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)
+    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)
     }
   }
 }
@@ -537,10 +599,19 @@ 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
   }
 
@@ -553,14 +624,23 @@ function convertSingleAPIresultIntoResultSuggestion(stringifyiedRawResult: strin
     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 {
@@ -577,20 +657,36 @@ function convertSingleAPIresultIntoResultSuggestion(stringifyiedRawResult: strin
   }
 
   // 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)
+      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.')
+    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
     }
   }
@@ -608,14 +704,35 @@ function convertSingleAPIresultIntoResultSuggestion(stringifyiedRawResult: strin
     }
   }
 
-  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
@@ -625,13 +742,18 @@ function areResultsCountable(types: ResultType[], toTellTheAPI: boolean): boolea
   return false
 }
 
-function generateTypesFromCategories(categories: Set<Category> | Category[]): 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 {
@@ -642,9 +764,16 @@ 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 {
   return !differentialRequests && results.organized.howManyResultsOut > 0
@@ -671,7 +800,10 @@ function informationIfNoResult(): 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')
@@ -777,7 +909,7 @@ function informationIfHiddenResults(): string {
                 :class="barShape"
               >
                 <div
-                  v-if="i+j+k > 0"
+                  v-if="i + j + k > 0"
                   class="separation-between-suggestions"
                   :class="[barShape, dropdownLayout]"
                 />
@@ -787,8 +919,19 @@ function informationIfHiddenResults(): string {
                   :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>
@@ -807,7 +950,10 @@ function informationIfHiddenResults(): string {
           </div>
         </div>
         <div
-          v-else-if="globalState.state === States.WaitingForResults || globalState.state === States.Error"
+          v-else-if="
+            globalState.state === States.WaitingForResults
+              || globalState.state === States.Error
+          "
           class="output-area"
           :class="[barShape, colorTheme]"
         >
@@ -815,7 +961,7 @@ function informationIfHiddenResults(): string {
             v-if="globalState.state === States.WaitingForResults"
             class="info center"
           >
-            {{ t('search_bar.searching') }}
+            {{ t("search_bar.searching") }}
             <BcLoadingSpinner
               :loading="true"
               size="small"
@@ -827,10 +973,10 @@ function informationIfHiddenResults(): string {
             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>
@@ -839,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 {
@@ -855,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;
@@ -906,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 2caef18ff..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 {
@@ -32,7 +34,9 @@ const props = defineProps<{
 const { t } = useTranslation()
 
 function formatSubcategoryCell(): string {
-  const i18nPathOfSubcategoryTitle = getI18nPathOfTranslatableLitteral(SubCategoryInfo[TypeInfo[props.suggestion.type].subCategory].title)
+  const i18nPathOfSubcategoryTitle = getI18nPathOfTranslatableLitteral(
+    SubCategoryInfo[TypeInfo[props.suggestion.type].subCategory].title,
+  )
   let label = t(i18nPathOfSubcategoryTitle, props.suggestion.count)
 
   if (props.suggestion.count >= 2) {
@@ -42,7 +46,10 @@ function formatSubcategoryCell(): string {
 }
 
 function formatIdentificationCell(): string {
-  if (wasOutputDataGivenByTheAPI(props.suggestion.type, 'name') && !props.suggestion.nameWasUnknown) {
+  if (
+    wasOutputDataGivenByTheAPI(props.suggestion.type, 'name')
+    && !props.suggestion.nameWasUnknown
+  ) {
     return props.suggestion.output.name
   }
   return props.suggestion.output.lowLevelData
@@ -52,8 +59,8 @@ 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,12 +68,17 @@ 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]"
   >
@@ -120,13 +132,18 @@ const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivat
         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()"
+      @click="(e: Event) => e.stopPropagation()"
     >
       <BcPremiumGem
         v-if="suggestion.lacksPremiumSubscription"
@@ -147,11 +164,15 @@ const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivat
   </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]"
   >
-    <!-- In this mode, we show less cells and their content comes from dedicated functions instead of a pure copy of `props.suggestion.output` -->
+    <!-- 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"
@@ -194,7 +215,7 @@ const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivat
     <div
       class="premium-invitation"
       :class="dropdownLayout"
-      @click="(e : Event) => e.stopPropagation()"
+      @click="(e: Event) => e.stopPropagation()"
     >
       <BcPremiumGem
         v-if="suggestion.lacksPremiumSubscription"
@@ -210,12 +231,14 @@ const deactivationClass = props.suggestion.lacksPremiumSubscription ? 'deactivat
     </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 {
@@ -347,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 4458bb103..99ae72406 100644
--- a/frontend/components/bc/searchbar/TypeIcons.vue
+++ b/frontend/components/bc/searchbar/TypeIcons.vue
@@ -12,12 +12,18 @@ const subCategory = computed(() => TypeInfo[props.type].subCategory)
   <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/table/AgeHeader.vue b/frontend/components/bc/table/AgeHeader.vue
index 426a914df..864f645c4 100644
--- a/frontend/components/bc/table/AgeHeader.vue
+++ b/frontend/components/bc/table/AgeHeader.vue
@@ -12,7 +12,9 @@ const toggleAgeSetting = () => {
   <span
     class="age-header"
     @click="toggleAgeSetting"
-  >{{ $t('table.age') }}</span>
+  >{{
+    $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 76ce28c39..477d6e264 100644
--- a/frontend/components/bc/table/BcTable.vue
+++ b/frontend/components/bc/table/BcTable.vue
@@ -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>>({})
 
@@ -77,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(':')) {
@@ -132,7 +141,11 @@ const sort = computed(() => {
         <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>
@@ -143,7 +156,8 @@ const sort = computed(() => {
       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>
@@ -205,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 13b8bacc0..a00ac408e 100644
--- a/frontend/components/bc/table/BcTableControl.vue
+++ b/frontend/components/bc/table/BcTableControl.vue
@@ -4,9 +4,7 @@ import {
   faHashtag,
   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
@@ -97,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 d36f39173..54d53c6f5 100644
--- a/frontend/components/bc/table/BcTablePopoutEdit.vue
+++ b/frontend/components/bc/table/BcTablePopoutEdit.vue
@@ -1,7 +1,5 @@
 <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 }>()
diff --git a/frontend/components/bc/table/TablePager.vue b/frontend/components/bc/table/TablePager.vue
index 0f18b0b0d..05cd7f1b8 100644
--- a/frontend/components/bc/table/TablePager.vue
+++ b/frontend/components/bc/table/TablePager.vue
@@ -10,11 +10,16 @@ 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) {
@@ -29,16 +34,28 @@ const data = computed(() => {
       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,11 +82,14 @@ 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>
@@ -81,7 +101,7 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
           :disabled="!currentOffset"
           @click="first"
         >
-          {{ $t('table.first') }}
+          {{ $t("table.first") }}
         </div>
         <div
           class="item button"
@@ -94,7 +114,7 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
           />
         </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"
@@ -111,18 +131,16 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
           :disabled="data.page! >= data.lastPage!"
           @click="last"
         >
-          {{ $t('table.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"
@@ -160,7 +178,13 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
       >
         <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>
@@ -175,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 0bdf62503..6e9e714b1 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/max-len -- TODO: @thib-wien plz fix this -->
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { type MultiBarItem } from '~/types/multiBar'
@@ -12,7 +13,11 @@ 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 {
   const states = props.buttons.reduce((map, { value }) => {
@@ -32,12 +37,16 @@ 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>
diff --git a/frontend/components/bc/toggle/MultiBarButton.vue b/frontend/components/bc/toggle/MultiBarButton.vue
index a0607bb67..398c1e0c4 100644
--- a/frontend/components/bc/toggle/MultiBarButton.vue
+++ b/frontend/components/bc/toggle/MultiBarButton.vue
@@ -37,7 +37,13 @@ const icon = computed(() => {
           {{ 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>
diff --git a/frontend/components/bc/toggle/SingleBar.vue b/frontend/components/bc/toggle/SingleBar.vue
index 11e70d207..5e0ddbf6a 100644
--- a/frontend/components/bc/toggle/SingleBar.vue
+++ b/frontend/components/bc/toggle/SingleBar.vue
@@ -16,16 +16,22 @@ interface Props {
     tooltip?: string
     disabled?: boolean
   }[]
-  allowDeselect?: boolean // if true, clicking the selected button will deselect it causing the whole SingleBar not to have a value
+  // 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) {
   for (const key in values.value) {
diff --git a/frontend/components/bc/toggle/SingleBarButton.vue b/frontend/components/bc/toggle/SingleBarButton.vue
index 68c135cee..a93af379c 100644
--- a/frontend/components/bc/toggle/SingleBarButton.vue
+++ b/frontend/components/bc/toggle/SingleBarButton.vue
@@ -14,7 +14,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
+const topBottomPadding = computed(() => (props.subText ? '8px' : '16px'))
 </script>
 
 <template>
@@ -31,7 +31,15 @@ const topBottomPadding = computed(() => props.subText ? '8px' : '16px')
         >
           {{ 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
@@ -68,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);
   }
 }
@@ -117,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 a4737917c..976c84930 100644
--- a/frontend/components/block/table/BlockTableRewardItem.vue
+++ b/frontend/components/block/table/BlockTableRewardItem.vue
@@ -22,11 +22,11 @@ defineProps<Props>()
       :value="reward?.cl"
       :no-tooltip="true"
     />
-    <span v-else>{{ $t('dashboard.validator.blocks.cl_pending') }}</span>
+    <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>
+          <span>{{ $t("dashboard.validator.blocks.el_rewards") }}: </span>
           <BcFormatValue
             :value="reward?.el"
             :no-tooltip="true"
@@ -34,14 +34,14 @@ defineProps<Props>()
           />
         </div>
         <div class="tt-row">
-          <span>{{ $t('dashboard.validator.blocks.cl_rewards') }}: </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>
+          <span v-else>{{ $t("dashboard.validator.blocks.pending") }}</span>
         </div>
       </div>
     </template>
@@ -61,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 f48ce40ad..c00e3c659 100644
--- a/frontend/components/block/table/BlockTableStatus.vue
+++ b/frontend/components/block/table/BlockTableStatus.vue
@@ -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'
diff --git a/frontend/components/dashboard/DashboardControls.vue b/frontend/components/dashboard/DashboardControls.vue
index 054c87d6d..780803322 100644
--- a/frontend/components/dashboard/DashboardControls.vue
+++ b/frontend/components/dashboard/DashboardControls.vue
@@ -11,7 +11,13 @@ import {
 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'
@@ -24,9 +30,18 @@ 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) {
@@ -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 }
@@ -110,7 +134,9 @@ const editButtons = computed<MenuBarEntry[]>(() => {
   if (!shareButtonOptions.value.disabled) {
     buttons.push({
       faIcon: shareButtonOptions.value.icon,
-      label: shareButtonOptions.value.edit ? $t('dashboard.share_dashboard') : $t('dashboard.shared_dashboard'),
+      label: shareButtonOptions.value.edit
+        ? $t('dashboard.share_dashboard')
+        : $t('dashboard.shared_dashboard'),
       command: share,
     })
   }
@@ -150,9 +176,12 @@ const shareView = () => {
 }
 
 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 = () => {
@@ -173,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 }
 })
@@ -182,8 +216,17 @@ 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,
@@ -191,17 +234,35 @@ const onDelete = () => {
 
   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 })
+      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_ACCOUNT,
+        { body: { key } },
+        { dashboardKey: key },
+      )
     }
 
     await refreshDashboards()
@@ -215,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 ?? []
@@ -240,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
@@ -298,8 +369,8 @@ const editDashboard = () => {
 </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 942165293..c2d4ba477 100644
--- a/frontend/components/dashboard/DashboardHeader.vue
+++ b/frontend/components/dashboard/DashboardHeader.vue
@@ -20,7 +20,9 @@ const getDashboardName = (db: Dashboard): string => {
     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')
+    return db.id === COOKIE_DASHBOARD_ID.ACCOUNT
+      ? $t('dashboard.account_dashboard')
+      : $t('dashboard.validator_dashboard')
   }
 }
 
@@ -50,9 +52,18 @@ const items = computed<MenuBarEntry[]>(() => {
       })
     }
   }
-  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') {
diff --git a/frontend/components/dashboard/DashboardRenameModal.vue b/frontend/components/dashboard/DashboardRenameModal.vue
index 6bc97754a..6b8c07e86 100644
--- a/frontend/components/dashboard/DashboardRenameModal.vue
+++ b/frontend/components/dashboard/DashboardRenameModal.vue
@@ -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,8 +40,15 @@ 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
 
@@ -59,7 +70,7 @@ const rename = async () => {
         :disabled="renameDisabled"
         @click="rename"
       >
-        {{ $t('navigation.save') }}
+        {{ $t("navigation.save") }}
       </Button>
     </div>
   </div>
@@ -83,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 e8045a50b..466742695 100644
--- a/frontend/components/dashboard/DashboardShareCodeModal.vue
+++ b/frontend/components/dashboard/DashboardShareCodeModal.vue
@@ -6,7 +6,8 @@ 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
+  // 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,7 +55,11 @@ 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
@@ -62,7 +74,9 @@ const unpublish = async () => {
         :value="path"
         :size="330"
       />
-      <label class="title">{{ $t('dashboard.share_dialog.public_dashboard_url') }}</label>
+      <label class="title">{{
+        $t("dashboard.share_dialog.public_dashboard_url")
+      }}</label>
       <BcCopyLabel
         :value="path"
         class="copy_label"
@@ -70,15 +84,19 @@ const unpublish = async () => {
       <label
         v-if="isShared"
         class="disclaimer"
-      >{{ $t('dashboard.share_dialog.only_viewing_permission') }}</label>
+      >{{
+        $t("dashboard.share_dialog.only_viewing_permission")
+      }}</label>
       <label
         v-else
         class="disclaimer"
-      >{{ $t('dashboard.share_dialog.share_public_disclaimer') }}</label>
+      >{{
+        $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>
+      >{{ $t("dashboard.share_dialog.upgrade") }}<BcPremiumGem class="gem" /></label>
       <div
         v-if="!isReadonly"
         class="footer"
@@ -87,13 +105,13 @@ const unpublish = async () => {
           :disabled="isUpdating"
           @click="unpublish"
         >
-          {{ $t('navigation.unpublish') }}
+          {{ $t("navigation.unpublish") }}
         </Button>
         <Button
           :disabled="isUpdating"
           @click="edit"
         >
-          {{ $t('dashboard.share_dialog.edit') }}
+          {{ $t("dashboard.share_dialog.edit") }}
         </Button>
       </div>
     </div>
diff --git a/frontend/components/dashboard/DashboardShareModal.vue b/frontend/components/dashboard/DashboardShareModal.vue
index 8277dbf60..af4c395e6 100644
--- a/frontend/components/dashboard/DashboardShareModal.vue
+++ b/frontend/components/dashboard/DashboardShareModal.vue
@@ -1,7 +1,5 @@
 <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'
@@ -20,25 +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
@@ -47,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
@@ -72,7 +96,11 @@ const share = () => {
 }
 
 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>
 
@@ -82,7 +110,9 @@ const shareGroupTooltip = computed(() => {
       <label
         for="dashboardName"
         class="medium"
-      >{{ $t('dashboard.share_dialog.setting.name.label') }}</label>
+      >{{
+        $t("dashboard.share_dialog.setting.name.label")
+      }}</label>
       <InputText
         id="dashboardName"
         v-model="dashboardName"
@@ -100,7 +130,9 @@ const shareGroupTooltip = computed(() => {
         <label
           for="shareGroup"
           :class="{ 'text-disabled': !isPremiumUser }"
-        >{{ $t('dashboard.share_dialog.setting.group.label') }}</label>
+        >{{
+          $t("dashboard.share_dialog.setting.group.label")
+        }}</label>
 
         <BcTooltip
           position="top"
@@ -118,7 +150,7 @@ const shareGroupTooltip = computed(() => {
         :disabled="publishDisabled"
         @click="share"
       >
-        {{ isNew ? $t('navigation.publish') : $t('navigation.update') }}
+        {{ isNew ? $t("navigation.publish") : $t("navigation.update") }}
       </Button>
     </div>
   </div>
@@ -158,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 66c2a09b4..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,15 +38,25 @@ 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))
+      processedGroups = orderBy(
+        processedGroups,
+        [g => g.name.toLowerCase()],
+        getSortOrder(sortOrder.value),
+      )
     }
     else {
-      processedGroups = orderBy(processedGroups, sortField.value, getSortOrder(sortOrder.value))
+      processedGroups = orderBy(
+        processedGroups,
+        sortField.value,
+        getSortOrder(sortOrder.value),
+      )
     }
   }
   const totalCount = processedGroups.length
@@ -68,7 +75,9 @@ const size = computed(() => {
   }
 })
 
-const newGroupDisabled = computed(() => !REGEXP_VALID_NAME.test(newGroupName.value))
+const newGroupDisabled = computed(
+  () => !REGEXP_VALID_NAME.test(newGroupName.value),
+)
 
 const resetData = () => {
   search.value = ''
@@ -92,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)
 }
 
@@ -116,7 +137,9 @@ 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,
+      }),
     },
   })
 }
@@ -139,13 +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>
@@ -163,17 +200,25 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
       <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>
+        <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>
+        >{{
+          $t("dashboard.validator.group_management.title")
+        }}</span>
       </template>
       <template #bc-table-sub-header>
         <div class="add-row">
@@ -181,11 +226,13 @@ 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;"
+            style="display: inline"
             :disabled="newGroupDisabled"
             @click="addGroup"
           >
@@ -215,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"
@@ -271,7 +322,8 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
                     <BcFormatNumber
                       :value="data.paging.total_count"
                       default="0"
-                    /> /
+                    />
+                    /
                     <BcFormatNumber :value="maxGroupsPerDashboard" />
                   </span>
                 </div>
@@ -293,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) {
@@ -315,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;
 }
 
@@ -406,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 fbf8811e3..e5435cbd6 100644
--- a/frontend/components/dashboard/OverviewBox.vue
+++ b/frontend/components/dashboard/OverviewBox.vue
@@ -1,11 +1,7 @@
 <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'
 
@@ -82,7 +78,9 @@ const openValidatorModal = () => {
               v-for="info in props.data.infos"
               :key="info.label"
             >
-              <div><b>{{ info.label }}:</b> {{ info.value }}</div>
+              <div>
+                <b>{{ info.label }}:</b> {{ info.value }}
+              </div>
             </div>
           </div>
         </template>
@@ -121,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 d77b2a12c..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')
@@ -34,9 +45,9 @@ const text = computed(() => {
       <div class="button-row">
         <div
           class="dismiss"
-          @click="dismissed=true"
+          @click="dismissed = true"
         >
-          {{ $t('navigation.dismiss') }}
+          {{ $t("navigation.dismiss") }}
         </div>
         <BcLink
           :to="`/dashboard`"
diff --git a/frontend/components/dashboard/ValidatorEpochDutiesModal.vue b/frontend/components/dashboard/ValidatorEpochDutiesModal.vue
index a35ebd29c..fba8245c1 100644
--- a/frontend/components/dashboard/ValidatorEpochDutiesModal.vue
+++ b/frontend/components/dashboard/ValidatorEpochDutiesModal.vue
@@ -18,19 +18,30 @@ const size = computed(() => {
 })
 
 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,9 +122,13 @@ 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>
@@ -190,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" />
@@ -205,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;
@@ -221,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 48e57f694..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[]>()
@@ -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
   }
@@ -168,7 +204,10 @@ 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: {
@@ -204,7 +243,12 @@ 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)) {
@@ -217,14 +261,24 @@ const loadData = async () => {
   }
 }
 
-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) => {
@@ -241,16 +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 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 premiumLimit = computed(
+  () => total.value >= maxValidatorsPerDashboard.value,
+)
 </script>
 
 <template>
@@ -268,15 +332,24 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
       <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-if="size.showWithdrawalCredentials">
+          {{ $t("dashboard.validator.management.sub_title") }}</span>
         <span
           v-else
           class="small-title"
-        >{{ $t('dashboard.validator.manage_validators') }}</span>
+        >{{
+          $t("dashboard.validator.manage_validators")
+        }}</span>
       </template>
       <template #bc-table-sub-header>
         <div class="add-row">
@@ -285,7 +358,8 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
             :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). -->
+          <!-- 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"
@@ -294,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"
           />
@@ -346,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>
@@ -398,7 +477,7 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
                   class="edit-button"
                   @click.stop.prevent="editSelected()"
                 >
-                  <span class="edit-label">{{ $t('common.edit') }}</span>
+                  <span class="edit-label">{{ $t("common.edit") }}</span>
                   <FontAwesomeIcon
                     class="edit-icon"
                     :icon="faEdit"
@@ -419,7 +498,7 @@ 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"
@@ -429,23 +508,25 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
                 </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"
@@ -493,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) {
@@ -515,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;
 }
 
@@ -590,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 89e317763..c640debb2 100644
--- a/frontend/components/dashboard/ValidatorOverview.vue
+++ b/frontend/components/dashboard/ValidatorOverview.vue
@@ -13,13 +13,18 @@ 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 {
@@ -48,7 +53,10 @@ const dataList = computed(() => {
 
   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 },
@@ -63,13 +71,25 @@ const dataList = computed(() => {
   ]
 
   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>
@@ -85,7 +105,7 @@ const dataList = computed(() => {
 </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 32190be2a..054db067c 100644
--- a/frontend/components/dashboard/ValidatorSlotViz.vue
+++ b/frontend/components/dashboard/ValidatorSlotViz.vue
@@ -13,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) {
@@ -33,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 = () => {
@@ -49,20 +63,31 @@ const toggleAll = () => {
   }
 }
 
-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>
 
@@ -89,7 +114,7 @@ const selectedLabel = computed(() => {
             class="pointer"
             @click="toggleAll"
           >
-            {{ $t('dashboard.group.selection.all') }}
+            {{ $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 176976a14..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()
@@ -37,31 +45,49 @@ watch(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)
@@ -77,7 +103,11 @@ const toggleGroups = () => {
 }
 
 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'))
@@ -133,7 +163,9 @@ const selectedLabel = computed(() => {
             input-id="total"
             :binary="true"
           />
-          <label for="total">{{ $t("dashboard.validator.summary.chart.total") }}</label>
+          <label for="total">{{
+            $t("dashboard.validator.summary.chart.total")
+          }}</label>
         </div>
         <div class="special-groups">
           <Checkbox
@@ -141,13 +173,15 @@ const selectedLabel = computed(() => {
             input-id="average"
             :binary="true"
           />
-          <label for="average">{{ $t("dashboard.validator.summary.chart.average") }}</label>
+          <label for="average">{{
+            $t("dashboard.validator.summary.chart.average")
+          }}</label>
         </div>
         <span
           class="pointer"
           @click="toggleGroups"
         >
-          {{ $t('dashboard.group.selection.all') }}
+          {{ $t("dashboard.group.selection.all") }}
         </span>
       </template>
       <template #value>
@@ -161,12 +195,12 @@ const selectedLabel = computed(() => {
 .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;
-  }
+    }
   }
 }
 
@@ -183,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 b3e487d2e..b0fcf8128 100644
--- a/frontend/components/dashboard/chart/RewardsChart.vue
+++ b/frontend/components/dashboard/chart/RewardsChart.vue
@@ -14,10 +14,18 @@ import {
 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'
@@ -28,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,
@@ -48,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()
 
@@ -84,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)) {
@@ -117,7 +141,9 @@ 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}` })),
+    formatedData: Array.from(Array(categoryCount)).map(() => ({
+      label: `0 ${currencyLabel.value}`,
+    })),
     data: Array.from(Array(categoryCount)).map(() => 0),
   }
   const elSeries: RewardChartSeries = {
@@ -130,7 +156,9 @@ 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}` })),
+    formatedData: Array.from(Array(categoryCount)).map(() => ({
+      label: `0 ${currencyLabel.value}`,
+    })),
     data: Array.from(Array(categoryCount)).map(() => 0),
   }
   list.push(elSeries)
@@ -149,7 +177,9 @@ const series = computed<RewardChartSeries[]>(() => {
       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') {
@@ -247,7 +277,16 @@ const option = computed<ECBasicOption | undefined>(() => {
         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
       },
     },
diff --git a/frontend/components/dashboard/chart/RewardsChartTooltip.vue b/frontend/components/dashboard/chart/RewardsChartTooltip.vue
index 207c534f0..181d16c3f 100644
--- a/frontend/components/dashboard/chart/RewardsChartTooltip.vue
+++ b/frontend/components/dashboard/chart/RewardsChartTooltip.vue
@@ -1,7 +1,10 @@
 <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 {
@@ -55,7 +58,10 @@ const data = computed<Series[]>(() => {
   }
 
   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 {
@@ -71,7 +77,11 @@ 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}`,
+    value: `${
+      props
+        .weiToValue(props.series[1].bigData[props.dataIndex]
+        .add(props.series[0].bigData[props.dataIndex])).label
+    }`,
     groups: mapData(totalGroups),
   }
   return [el, cl, total]
@@ -107,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 98e3fdb52..4b7e17143 100644
--- a/frontend/components/dashboard/chart/SummaryChart.vue
+++ b/frontend/components/dashboard/chart/SummaryChart.vue
@@ -13,12 +13,21 @@ import {
 } 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,
@@ -45,11 +54,19 @@ 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
@@ -70,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 []
   }
@@ -133,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
     }
@@ -171,9 +201,13 @@ 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 {
@@ -191,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))}`
@@ -225,7 +266,8 @@ const option = computed(() => {
       right: '5%',
     },
     xAxis: [
-      { // xAxis of the chart
+      {
+        // xAxis of the chart
         type: 'category',
         data: chartCategories.value,
         boundaryGap: false,
@@ -235,7 +277,8 @@ const option = computed(() => {
           formatter: formatTimestamp,
         },
       },
-      { // xAxis of the time frame selection
+      {
+        // xAxis of the time frame selection
         type: 'category',
         data: categories.value,
         show: false,
@@ -244,7 +287,9 @@ const option = computed(() => {
     ],
     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],
@@ -252,7 +297,10 @@ const option = computed(() => {
       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} %',
@@ -292,7 +340,10 @@ const option = computed(() => {
         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
@@ -305,7 +356,17 @@ const option = computed(() => {
           }
         })
         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
       },
     },
@@ -347,8 +408,8 @@ 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,
@@ -372,26 +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 {
       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 {
       timestamps.fromIndex = timestamps.toIndex - 1
-      timestamps.start = timestamps.fromIndex * 100 / max
+      timestamps.start = (timestamps.fromIndex * 100) / max
       timestamps.fromTs = categories.value[timestamps.fromIndex]
     }
   }
@@ -408,7 +476,10 @@ const validateDataZoom = (instant?: boolean) => {
     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)
     }
@@ -417,7 +488,10 @@ const validateDataZoom = (instant?: boolean) => {
     }
   }
   // 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
 
@@ -485,7 +559,7 @@ const onMouseMove = (e: MouseEvent) => {
         class="no-data"
         alignment="center"
       >
-        {{ $t('dashboard.validator.summary.chart.no_data') }}
+        {{ $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 0cefdf024..5eab596f7 100644
--- a/frontend/components/dashboard/chart/SummaryChartTooltip.vue
+++ b/frontend/components/dashboard/chart/SummaryChartTooltip.vue
@@ -1,6 +1,9 @@
 <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
@@ -48,7 +51,7 @@ defineProps<Props>()
 </template>
 
 <style lang="scss">
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/fonts.scss";
 
 .tooltip-container {
   background-color: var(--tooltip-background);
@@ -74,7 +77,6 @@ defineProps<Props>()
     }
 
     &:not(.highlight) {
-
       .efficiency,
       .name {
         opacity: 0.5;
@@ -82,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 aca089fe5..3a4fd4ee1 100644
--- a/frontend/components/dashboard/chart/TooltipHeader.vue
+++ b/frontend/components/dashboard/chart/TooltipHeader.vue
@@ -1,7 +1,10 @@
 <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 {
@@ -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 e685ae22f..e1425bd49 100644
--- a/frontend/components/dashboard/creation/DashboardCreationController.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationController.vue
@@ -1,10 +1,14 @@
 <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()
@@ -29,20 +33,32 @@ 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
@@ -71,13 +87,12 @@ function onNext() {
     if (type.value === 'account') {
       createDashboard()
     }
-    else
-      if (forcedNetworkIfValidatorDashboard) {
-        createDashboard()
-      }
-      else {
-        state.value = 'network'
-      }
+    else if (forcedNetworkIfValidatorDashboard) {
+      createDashboard()
+    }
+    else {
+      state.value = 'network'
+    }
   }
   else if (state.value === 'network') {
     createDashboard()
@@ -92,25 +107,45 @@ function onBack() {
 
 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}`)
+    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}`)
   }
diff --git a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
index 63fc81a01..caf4c9232 100644
--- a/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationNetworkMask.vue
@@ -3,12 +3,17 @@ 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 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[]>([])
 
@@ -16,22 +21,32 @@ 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
@@ -42,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"
@@ -56,13 +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') }}
+          {{ $t("navigation.continue") }}
         </Button>
       </div>
     </div>
@@ -70,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 ed19fcb6a..bc94293bd 100644
--- a/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
+++ b/frontend/components/dashboard/creation/DashboardCreationTypeMask.vue
@@ -34,7 +34,12 @@ const name = defineModel<string>('name', { required: true })
 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,10 +56,10 @@ 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"
@@ -75,7 +80,7 @@ const next = () => {
           :disabled="continueDisabled"
           @click="next"
         >
-          {{ $t('navigation.continue') }}
+          {{ $t("navigation.continue") }}
         </Button>
       </div>
     </div>
@@ -83,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 7cb8005ad..5286c9b37 100644
--- a/frontend/components/dashboard/group/GroupLabel.vue
+++ b/frontend/components/dashboard/group/GroupLabel.vue
@@ -15,7 +15,9 @@ const name = computed(() => {
     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')
+    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 fb66b2841..40536e302 100644
--- a/frontend/components/dashboard/group/GroupSelection.vue
+++ b/frontend/components/dashboard/group/GroupSelection.vue
@@ -13,7 +13,9 @@ 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
 })
diff --git a/frontend/components/dashboard/group/GroupSelectionDialog.vue b/frontend/components/dashboard/group/GroupSelectionDialog.vue
index 6b4c7d096..4d0cd173e 100644
--- a/frontend/components/dashboard/group/GroupSelectionDialog.vue
+++ b/frontend/components/dashboard/group/GroupSelectionDialog.vue
@@ -19,26 +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') }}
+      {{ $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 70e8ea252..ffa629f51 100644
--- a/frontend/components/dashboard/table/DashboardTableAddValidator.vue
+++ b/frontend/components/dashboard/table/DashboardTableAddValidator.vue
@@ -14,9 +14,13 @@ const addValidator = () => {
     class="empty delayed-fadein-animation"
     @click="addValidator"
   >
-    <span class="big_text">{{ $t('dashboard.validator.summary.add_validator') }}</span>
+    <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 26f26b930..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()
@@ -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, 'Σ')
@@ -87,7 +104,13 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
   <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>
@@ -211,7 +234,9 @@ 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
@@ -270,7 +295,7 @@ 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}`"
@@ -285,7 +310,7 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('common.slot') }}:
+                    {{ $t("common.slot") }}:
                   </div>
                   <BcLink
                     :to="`/slot/${slotProps.data.slot}`"
@@ -309,7 +334,7 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('dashboard.validator.col.status') }}:
+                    {{ $t("dashboard.validator.col.status") }}:
                   </div>
                   <div class="value">
                     <BlockTableStatus
@@ -321,7 +346,7 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
                 </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"
@@ -335,7 +360,7 @@ 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"
@@ -344,7 +369,7 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('block.col.graffiti') }}:
+                    {{ $t("block.col.graffiti") }}:
                   </div>
                   <BcFormatGraffiti :graffiti="slotProps.data.graffiti" />
                 </div>
@@ -364,7 +389,7 @@ const isRowExpandable = (row: VDBBlocksTableRow) => {
 @use "~/assets/css/utils.scss";
 
 :deep(.block-table) {
-  >.p-datatable-wrapper {
+  > .p-datatable-wrapper {
     min-height: 529px;
   }
 
@@ -392,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);
   }
@@ -417,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 2469d06b1..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()
@@ -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) {
@@ -224,7 +242,9 @@ const isRowExpandable = (row: VDBConsensusDepositsTableRow) => {
               :header="$t('table.amount')"
             >
               <template #body="slotProps">
-                <div v-if="slotProps.data.index === undefined && isLoadingTotal">
+                <div
+                  v-if="slotProps.data.index === undefined && isLoadingTotal"
+                >
                   <BcLoadingSpinner
                     :loading="true"
                     size="small"
@@ -254,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"
@@ -264,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) }}
@@ -272,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"
@@ -285,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"
@@ -298,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"
@@ -308,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"
@@ -332,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;
   }
 
@@ -355,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/DashboardTableElDeposits.vue b/frontend/components/dashboard/table/DashboardTableElDeposits.vue
index a6bd5e20e..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()
@@ -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) {
@@ -249,7 +267,9 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
               :header="$t('table.amount')"
             >
               <template #body="slotProps">
-                <div v-if="slotProps.data.index === undefined && isLoadingTotal">
+                <div
+                  v-if="slotProps.data.index === undefined && isLoadingTotal"
+                >
                   <BcLoadingSpinner
                     :loading="true"
                     size="small"
@@ -278,7 +298,7 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
               <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"
@@ -288,7 +308,7 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 </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) }}
@@ -296,7 +316,7 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('common.block') }}
+                    {{ $t("common.block") }}
                   </div>
                   <BcLink
                     :to="`/block/${slotProps.data.block}`"
@@ -308,7 +328,7 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('table.from') }}
+                    {{ $t("table.from") }}
                   </div>
                   <BcFormatHash
                     v-if="slotProps.data.index !== undefined"
@@ -320,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"
@@ -332,7 +352,7 @@ 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"
@@ -343,7 +363,7 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 </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"
@@ -353,7 +373,7 @@ const isRowExpandable = (row: VDBExecutionDepositsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('table.valid') }}
+                    {{ $t("table.valid") }}
                   </div>
                   <div>
                     <BcTableValidTag :valid="slotProps.data.valid" />
@@ -375,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;
   }
 
@@ -400,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 5196223ad..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()
@@ -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, 'Σ')
@@ -113,7 +133,10 @@ 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>
@@ -122,7 +145,13 @@ const wrappedRewards = computed(() => {
   <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"
     >
@@ -181,7 +210,9 @@ 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
@@ -209,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
@@ -228,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
@@ -247,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
@@ -283,7 +320,7 @@ const wrappedRewards = computed(() => {
 @use "~/assets/css/utils.scss";
 
 :deep(.rewards-table) {
-  >.p-datatable-wrapper {
+  > .p-datatable-wrapper {
     min-height: 577px;
   }
 
@@ -307,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);
   }
@@ -320,7 +357,7 @@ const wrappedRewards = computed(() => {
     }
   }
 
-  tr:has(+.total-row) {
+  tr:has(+ .total-row) {
     td {
       border-bottom-color: var(--primary-color);
     }
@@ -328,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 3e20d838f..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()
 
@@ -72,13 +91,21 @@ const data = computed(() => {
       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,
@@ -94,7 +121,10 @@ const data = computed(() => {
       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,
@@ -135,7 +165,7 @@ 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
@@ -253,7 +283,7 @@ const openDuties = () => {
   background-color: var(--container-background);
 }
 
-.spinner{
+.spinner {
   padding: var(--padding-large);
 }
 
@@ -300,8 +330,8 @@ const openDuties = () => {
       width: 360px;
 
       .col {
-        >div,
-        >span {
+        > div,
+        > span {
           height: 32px;
           padding: var(--padding-small);
           text-wrap: nowrap;
@@ -312,8 +342,8 @@ const openDuties = () => {
           }
         }
 
-        &.icon{
-          svg{
+        &.icon {
+          svg {
             height: 14px;
             width: 18px;
           }
@@ -330,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 e08a98844..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()
@@ -41,26 +60,40 @@ const colsVisible = computed<SummaryTableVisibility>(() => {
 })
 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,7 +123,13 @@ 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>
@@ -102,7 +141,7 @@ const searchPlaceholder = computed(() => $t(isPublic.value && (groups.value?.len
     >
       <template #header-center="{ tableIsShown }">
         <h1 class="summary_title">
-          {{ $t('dashboard.validator.summary.title') }}
+          {{ $t("dashboard.validator.summary.title") }}
         </h1>
         <BcDropdown
           v-if="tableIsShown"
@@ -167,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>
@@ -327,8 +366,7 @@ const searchPlaceholder = computed(() => $t(isPublic.value && (groups.value?.len
 }
 
 :deep(.summary_table) {
-
-  >.p-datatable-wrapper {
+  > .p-datatable-wrapper {
     min-height: 529px;
   }
 
@@ -367,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 ed281b1e7..c90ce7a34 100644
--- a/frontend/components/dashboard/table/DashboardTableValidators.vue
+++ b/frontend/components/dashboard/table/DashboardTableValidators.vue
@@ -1,14 +1,18 @@
 <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[]
@@ -47,7 +51,9 @@ 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>
@@ -77,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 244c21b6c..0c2c871a0 100644
--- a/frontend/components/dashboard/table/DashboardTableValueDuty.vue
+++ b/frontend/components/dashboard/table/DashboardTableValueDuty.vue
@@ -16,7 +16,7 @@ defineProps<Props>()
       v-if="duty.attestation !== undefined"
       class="group"
     >
-      {{ $t('dashboard.validator.rewards.attestation') }}
+      {{ $t("dashboard.validator.rewards.attestation") }}
       <BcFormatPercent
         class="round-brackets"
         :percent="duty.attestation"
@@ -28,7 +28,7 @@ defineProps<Props>()
       v-if="duty.proposal !== undefined"
       class="group"
     >
-      {{ $t('dashboard.validator.rewards.proposal') }}
+      {{ $t("dashboard.validator.rewards.proposal") }}
       <BcFormatPercent
         class="round-brackets"
         :percent="duty.proposal"
@@ -40,7 +40,7 @@ defineProps<Props>()
       v-if="duty.sync !== undefined"
       class="group"
     >
-      {{ $t('dashboard.validator.rewards.sync_committee') }}
+      {{ $t("dashboard.validator.rewards.sync_committee") }}
       <BcFormatPercent
         class="round-brackets"
         :percent="duty.sync"
@@ -52,7 +52,7 @@ defineProps<Props>()
       v-if="duty.slashing !== undefined"
       class="group"
     >
-      {{ $t('dashboard.validator.rewards.slashing') }}
+      {{ $t("dashboard.validator.rewards.slashing") }}
       <BcFormatNumber
         class="round-brackets"
         :value="duty.slashing"
@@ -62,7 +62,7 @@ defineProps<Props>()
 </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 259677299..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()
@@ -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) {
@@ -130,7 +152,9 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
   <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>
@@ -163,11 +187,13 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
                   v-if="slotProps.data.is_missing_estimate"
                   class="value-with-tooltip-container"
                 >
-                  {{ $t('dashboard.validator.withdrawals.pending') }}
+                  {{ $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>
@@ -195,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>
@@ -208,7 +239,10 @@ 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"
@@ -228,7 +262,10 @@ 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"
@@ -250,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"
                 />
@@ -263,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"
@@ -283,7 +328,12 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
               :header="$t('dashboard.validator.col.amount')"
             >
               <template #body="slotProps">
-                <div v-if="slotProps.data.identifier === totalIdentifier && isLoadingTotal">
+                <div
+                  v-if="
+                    slotProps.data.identifier === totalIdentifier
+                      && isLoadingTotal
+                  "
+                >
                   <BcLoadingSpinner
                     :loading="true"
                     size="small"
@@ -295,12 +345,15 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
                 >
                   <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>
@@ -310,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) }}
@@ -318,7 +371,7 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('common.epoch') }}:
+                    {{ $t("common.epoch") }}:
                   </div>
                   <BcLink
                     :to="`/epoch/${slotProps.data.epoch}`"
@@ -334,7 +387,7 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
                 </div>
                 <div class="row">
                   <div class="label">
-                    {{ $t('common.slot') }}:
+                    {{ $t("common.slot") }}:
                   </div>
                   <BcLink
                     :to="`/slot/${slotProps.data.slot}`"
@@ -357,7 +410,7 @@ const isRowInFuture = (row: ExtendedVDBWithdrawalsTableRow) => {
                 </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"
@@ -386,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 {
@@ -401,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);
   }
@@ -421,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 5fa97e147..d7f8d4b2f 100644
--- a/frontend/components/dashboard/table/SummaryDetails.vue
+++ b/frontend/components/dashboard/table/SummaryDetails.vue
@@ -1,6 +1,11 @@
 <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
@@ -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',
@@ -104,7 +148,7 @@ const rowClass = (data: SummaryRow) => {
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/utils.scss';
+@use "~/assets/css/utils.scss";
 
 .details-container {
   display: flex;
@@ -131,7 +175,7 @@ const rowClass = (data: SummaryRow) => {
       border-left: var(--container-border);
     }
 
-    .spacing-top{
+    .spacing-top {
       margin-top: var(--padding-small);
     }
 
@@ -170,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 acb25014d..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,7 +8,16 @@ 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>
@@ -27,11 +34,12 @@ const total = computed(() => props.missedRewards ? convertSum(props.missedReward
       <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>
+            <span class="bold">{{ $t("dashboard.validator.blocks.el_rewards") }}:
+            </span>
             <BcFormatValue
               :value="missedRewards?.proposer_rewards.el"
               :no-tooltip="true"
@@ -39,7 +47,8 @@ const total = computed(() => props.missedRewards ? convertSum(props.missedReward
             />
           </div>
           <div class="tt-row">
-            <span class="bold">{{ $t('dashboard.validator.blocks.cl_rewards') }}: </span>
+            <span class="bold">{{ $t("dashboard.validator.blocks.cl_rewards") }}:
+            </span>
             <BcFormatValue
               :value="missedRewards?.proposer_rewards.cl"
               :no-tooltip="true"
@@ -47,7 +56,8 @@ const total = computed(() => props.missedRewards ? convertSum(props.missedReward
             />
           </div>
           <div class="tt-row">
-            <span class="bold">{{ $t('dashboard.validator.summary.row.attestations') }}: </span>
+            <span class="bold">{{ $t("dashboard.validator.summary.row.attestations") }}:
+            </span>
             <BcFormatValue
               :value="missedRewards?.attestations"
               :no-tooltip="true"
@@ -55,7 +65,8 @@ const total = computed(() => props.missedRewards ? convertSum(props.missedReward
             />
           </div>
           <div class="tt-row">
-            <span class="bold">{{ $t('dashboard.validator.summary.row.sync_committee') }}: </span>
+            <span class="bold">{{ $t("dashboard.validator.summary.row.sync_committee") }}:
+            </span>
             <BcFormatValue
               :value="missedRewards?.sync"
               :no-tooltip="true"
@@ -77,7 +88,7 @@ const total = computed(() => props.missedRewards ? convertSum(props.missedReward
   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 f356482d1..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,7 +8,9 @@ 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>
@@ -28,7 +28,8 @@ const total = computed(() => props.reward ? totalElCl(props.reward) : undefined)
       <template #tooltip>
         <div>
           <div class="tt-row">
-            <span class="bold">{{ $t('dashboard.validator.blocks.el_rewards') }}: </span>
+            <span class="bold">{{ $t("dashboard.validator.blocks.el_rewards") }}:
+            </span>
             <BcFormatValue
               :value="reward?.el"
               :no-tooltip="true"
@@ -36,7 +37,8 @@ const total = computed(() => props.reward ? totalElCl(props.reward) : undefined)
             />
           </div>
           <div class="tt-row">
-            <span class="bold">{{ $t('dashboard.validator.blocks.cl_rewards') }}: </span>
+            <span class="bold">{{ $t("dashboard.validator.blocks.cl_rewards") }}:
+            </span>
             <BcFormatValue
               :value="reward?.cl"
               :no-tooltip="true"
diff --git a/frontend/components/dashboard/table/SummaryStatus.vue b/frontend/components/dashboard/table/SummaryStatus.vue
index a92f44a1e..4f900e8a8 100644
--- a/frontend/components/dashboard/table/SummaryStatus.vue
+++ b/frontend/components/dashboard/table/SummaryStatus.vue
@@ -58,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 892109d8d..251ed8a27 100644
--- a/frontend/components/dashboard/table/SummaryValidators.vue
+++ b/frontend/components/dashboard/table/SummaryValidators.vue
@@ -1,14 +1,18 @@
 <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
@@ -105,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 4978b6a5f..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,7 +10,10 @@ 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>
@@ -38,7 +39,7 @@ const combinedTotal = computed<number>(() => props.total ?? props.icons?.reduce(
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/utils.scss';
+@use "~/assets/css/utils.scss";
 
 .status {
   display: flex;
@@ -78,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 dfc03e0e0..ec81480a0 100644
--- a/frontend/components/dashboard/table/SummaryValue.vue
+++ b/frontend/components/dashboard/table/SummaryValue.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 {
   faCube,
   faSync,
@@ -18,7 +16,11 @@ import {
   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'
 
@@ -55,19 +57,33 @@ const data = computed(() => {
       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,
+        status_count:
+          (prop as VDBGroupSummaryColumnItem).status_count
+          || (prop as StatusCount),
         sync_count: props.property === 'sync' ? col.sync_count : undefined,
       },
       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') {
@@ -88,7 +104,9 @@ const data = computed(() => {
     }
   }
   else if (col && props.property === 'attestation_efficiency') {
-    const tooltip: { title: string, text: string } | undefined = $tm('dashboard.validator.tooltip.attestation_efficiency')
+    const tooltip: { title: string, text: string } | undefined = $tm(
+      'dashboard.validator.tooltip.attestation_efficiency',
+    )
     return {
       attestationEfficiency: col.attestation_efficiency,
       tooltip,
@@ -137,7 +155,12 @@ const data = computed(() => {
 })
 
 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 = () => {
@@ -181,7 +204,7 @@ const openValidatorModal = () => {
       >
         <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"
@@ -198,16 +221,25 @@ 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>
@@ -264,7 +296,7 @@ const openValidatorModal = () => {
       <FontAwesomeIcon :icon="faInfoCircle" />
       <template #tooltip>
         <div class="row">
-          <b>{{ $t('common.execution_layer') }}:</b>
+          <b>{{ $t("common.execution_layer") }}:</b>
           <BcFormatValue
             class="space_before"
             :value="data.apr.income.el"
@@ -272,7 +304,7 @@ const openValidatorModal = () => {
           <BcFormatPercent :percent="data.apr.apr.el" />)
         </div>
         <div class="row">
-          <b>{{ $t('common.consensus_layer') }}:</b>
+          <b>{{ $t("common.consensus_layer") }}:</b>
           <BcFormatValue
             class="space_before"
             :value="data.apr.income.cl"
@@ -310,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>
@@ -355,7 +390,12 @@ const openValidatorModal = () => {
   >
     <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>
@@ -387,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 dceba955a..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'
@@ -21,22 +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 {
+        paging.value = null
       }
     }
     else {
       paging.value = null
     }
-  }
-  else {
-    paging.value = null
-  }
-}, { immediate: true })
+  },
+  { immediate: true },
+)
 
 const currentPage = computed<VDBSummaryValidator[]>(() => {
   if (!props.validators?.length) {
@@ -50,7 +52,8 @@ 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)
     })
@@ -66,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 []
   }
@@ -143,7 +155,6 @@ function mapDutyLinks(dutyObjects?: number[]): { to?: string, label: string }[]
               </BcLink>
               <span v-else>{{ link.label }}</span>
               <span>, </span>
-
             </template>
           </span>
         </template>
@@ -160,14 +171,14 @@ function mapDutyLinks(dutyObjects?: number[]): { to?: string, label: string }[]
         :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;
@@ -186,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 f6eed8890..0232a6bf6 100644
--- a/frontend/components/dashboard/validator/subset/ValidatorSubsetListHeader.vue
+++ b/frontend/components/dashboard/validator/subset/ValidatorSubsetListHeader.vue
@@ -77,7 +77,9 @@ 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>
@@ -92,7 +94,9 @@ const count = computed(() => countSummaryValidatorDuties(props.validators, props
       :icon="icon.slotVizCategory"
       :class="icon.className"
     />
-    <span>{{ $t(`dashboard.validator.subset_dialog.category.${category}`) }}</span>
+    <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 83c7bc67d..0fbbe2344 100644
--- a/frontend/components/dashboard/validator/subset/ValidatorSubsetModal.vue
+++ b/frontend/components/dashboard/validator/subset/ValidatorSubsetModal.vue
@@ -1,15 +1,25 @@
 <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()
@@ -32,53 +42,62 @@ 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)
     }
@@ -95,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') {
+    if (
+      props.value?.context === 'group'
+      || props.value?.context === 'dashboard'
+    ) {
       const all: ValidatorSubset = {
         category: 'all',
         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']
@@ -133,7 +180,10 @@ const subsets = computed<ValidatorSubset[]>(() => {
             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)) {
@@ -168,7 +218,7 @@ const subsets = computed<ValidatorSubset[]>(() => {
       <BcContentFilter
         v-model="filter"
         :search-placeholder="$t('common.index')"
-        @filter-changed="(f:string) => filter=f"
+        @filter-changed="(f: string) => (filter = f)"
       />
     </div>
 
diff --git a/frontend/components/dashboard/validator/subset/ValidatorSubsetSubHeader.vue b/frontend/components/dashboard/validator/subset/ValidatorSubsetSubHeader.vue
index c45c6543b..c2be1775a 100644
--- a/frontend/components/dashboard/validator/subset/ValidatorSubsetSubHeader.vue
+++ b/frontend/components/dashboard/validator/subset/ValidatorSubsetSubHeader.vue
@@ -1,8 +1,15 @@
 <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 {
@@ -18,12 +25,22 @@ 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,
   }
-  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': {
@@ -128,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/ErrorFace.vue b/frontend/components/icon/ErrorFace.vue
index 365a117e5..2c6fed295 100644
--- a/frontend/components/icon/ErrorFace.vue
+++ b/frontend/components/icon/ErrorFace.vue
@@ -22,8 +22,8 @@ const look = props.inline ? 'inline' : ''
 
 <style lang="scss" scoped>
 .inline {
-  position:relative;
-  top:2px;
-  height:14px;
+  position: relative;
+  top: 2px;
+  height: 14px;
 }
 </style>
diff --git a/frontend/components/icon/IconCrypto.vue b/frontend/components/icon/IconCrypto.vue
index 04124800f..49b1992eb 100644
--- a/frontend/components/icon/IconCrypto.vue
+++ b/frontend/components/icon/IconCrypto.vue
@@ -9,15 +9,15 @@ defineProps<Props>()
 
 <template>
   <IconNetworkEthereum
-    v-if="currency==='ETH'"
+    v-if="currency === 'ETH'"
     class="monochromatic"
   />
   <IconNetworkGnosis
-    v-else-if="currency==='GNO'"
+    v-else-if="currency === 'GNO'"
     class="monochromatic"
   />
   <IconCryptoDai
-    v-else-if="currency==='DAI' || currency==='xDAI'"
+    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 6ac7fa7e8..463383f9a 100644
--- a/frontend/components/icon/IconCurrency.vue
+++ b/frontend/components/icon/IconCurrency.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import type { CryptoCurrency, Currency, FiatCurrency } from '~/types/currencies'
+import type {
+  CryptoCurrency,
+  Currency,
+  FiatCurrency,
+} from '~/types/currencies'
 
 interface Props {
   currency?: Currency
diff --git a/frontend/components/icon/IconNetwork.vue b/frontend/components/icon/IconNetwork.vue
index 1ac2321ef..f93ec5675 100644
--- a/frontend/components/icon/IconNetwork.vue
+++ b/frontend/components/icon/IconNetwork.vue
@@ -4,18 +4,36 @@ 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>
@@ -58,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/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/NftIcon.vue b/frontend/components/icon/datatype/NftIcon.vue
index 644a7f765..879e25254 100644
--- a/frontend/components/icon/datatype/NftIcon.vue
+++ b/frontend/components/icon/datatype/NftIcon.vue
@@ -7,42 +7,112 @@
     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;"
+      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;"
+        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;"
+        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;"
+        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;"
+        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;"
+        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;"
+        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"
       />
diff --git a/frontend/components/icon/network/NetworkArbitrum.vue b/frontend/components/icon/network/NetworkArbitrum.vue
index a7ff0012c..ca8c45384 100644
--- a/frontend/components/icon/network/NetworkArbitrum.vue
+++ b/frontend/components/icon/network/NetworkArbitrum.vue
@@ -35,21 +35,21 @@
 
 <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 5735ff659..0086252f9 100644
--- a/frontend/components/icon/network/NetworkBase.vue
+++ b/frontend/components/icon/network/NetworkBase.vue
@@ -13,12 +13,12 @@
 
 <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 b1e3b773c..788b16093 100644
--- a/frontend/components/icon/network/NetworkEthereum.vue
+++ b/frontend/components/icon/network/NetworkEthereum.vue
@@ -36,13 +36,13 @@
   fill: #343434;
 }
 .color2 {
-  fill: #8C8C8C;
+  fill: #8c8c8c;
 }
 .color3 {
-  fill: #3C3C3B;
+  fill: #3c3c3b;
 }
 .color4 {
-  fill: #2A262C;
+  fill: #2a262c;
 }
 .color5 {
   fill: #393939;
@@ -50,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 6b096fc8a..84c71b9fb 100644
--- a/frontend/components/icon/network/NetworkGnosis.vue
+++ b/frontend/components/icon/network/NetworkGnosis.vue
@@ -36,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 2334b37b0..6dc39adfd 100644
--- a/frontend/components/icon/network/NetworkOptimism.vue
+++ b/frontend/components/icon/network/NetworkOptimism.vue
@@ -23,6 +23,6 @@
 
 <style lang="scss" scoped>
 .color1 {
-  fill: #F3454A;
+  fill: #f3454a;
 }
 </style>
diff --git a/frontend/components/notifications/DashboardsTable.vue b/frontend/components/notifications/DashboardsTable.vue
index ce4420acd..4ee46dd41 100644
--- a/frontend/components/notifications/DashboardsTable.vue
+++ b/frontend/components/notifications/DashboardsTable.vue
@@ -1,8 +1,6 @@
 <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'
@@ -14,7 +12,15 @@ const cursor = ref<Cursor>()
 const pageSize = ref<number>(10)
 const { t: $t } = useTranslation()
 
-const { onSort, setCursor, setPageSize, setSearch, notificationsDashboards, query, isLoading } = useNotificationsDashboardStore()
+const {
+  onSort,
+  setCursor,
+  setPageSize,
+  setSearch,
+  notificationsDashboards,
+  query,
+  isLoading,
+} = useNotificationsDashboardStore()
 
 const { groups } = useValidatorDashboardGroups()
 
@@ -43,8 +49,10 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
   return {
     paging: notificationsDashboards.value.paging,
     // TODO: set unique identifier after backend is ready
-    data: notificationsDashboards.value.data
-      .map((item, index) => ({ ...item, identifier: index })),
+    data: notificationsDashboards.value.data.map((item, index) => ({
+      ...item,
+      identifier: index,
+    })),
     // .filter(() => false) // comment in to test empty table
   }
 })
@@ -148,14 +156,24 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
                     <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-if="slotProps.data.entity.type === 'account'">
                     <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
@@ -175,13 +193,13 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
               :header="$t('notifications.dashboards.col.notification')"
             >
               <template #body="slotProps">
-                {{ slotProps.data.notification.join(', ') }}
+                {{ slotProps.data.notification.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="slotProps.data.entity.type"
@@ -189,16 +207,18 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
                   :dashboard-name="slotProps.data.dashboardName"
                 />
                 <div class="label-group">
-                  {{ $t('notifications.dashboards.expansion.label-group') }}
+                  {{ $t("notifications.dashboards.expansion.label-group") }}
                 </div>
                 <div class="group">
                   {{ groupNameLabel(slotProps.data.group_id) }}
                 </div>
                 <div class="label-notification">
-                  {{ $t('notifications.dashboards.expansion.label-notification') }}
+                  {{
+                    $t("notifications.dashboards.expansion.label-notification")
+                  }}
                 </div>
                 <div class="notification">
-                  {{ slotProps.data.notification.join(', ') }}
+                  {{ slotProps.data.notification.join(", ") }}
                 </div>
               </div>
             </template>
@@ -211,11 +231,37 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
             <!-- 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>
@@ -231,7 +277,7 @@ const notificationsDashboardsWithUniqueIdentifier = computed(() => {
 $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;
 }
 
@@ -293,7 +339,7 @@ $breakpoint-lg: 1024px;
     }
   }
 }
-:deep(.right-info){
+:deep(.right-info) {
   flex-direction: column;
   justify-content: center;
 }
@@ -328,7 +374,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 2eb1288e0..87f8b4a91 100644
--- a/frontend/components/notifications/DashboardsTableEmpty.vue
+++ b/frontend/components/notifications/DashboardsTableEmpty.vue
@@ -1,6 +1,9 @@
 <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()
 
@@ -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(() => {
diff --git a/frontend/components/notifications/management/NotificationsManagementDashboards.vue b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
index abc4d343d..3ddc9a93f 100644
--- a/frontend/components/notifications/management/NotificationsManagementDashboards.vue
+++ b/frontend/components/notifications/management/NotificationsManagementDashboards.vue
@@ -1,22 +1,26 @@
 <script lang="ts" setup>
-import {
-  faTrash,
-  faDesktop,
-  faUser,
-} from '@fortawesome/pro-solid-svg-icons'
+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
@@ -33,13 +37,28 @@ interface SettingsWithContext {
 // #### 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',
+  '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 ####
 
@@ -47,18 +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)
+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') })
+    toast.showError({
+      summary: $t('notifications.subscriptions.error_title'),
+      group: $t('notifications.subscriptions.error_group'),
+      detail: $t('notifications.subscriptions.error_message'),
+    })
   }
 })
 
@@ -74,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
   }
@@ -83,21 +121,36 @@ const wrappedDashboardGroups: ComputedRef<ApiPagingResponse<WrappedRow> | undefi
     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}`,
     })),
   }
 
-  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
@@ -109,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, {
@@ -122,7 +178,10 @@ 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,
@@ -131,7 +190,11 @@ const onEdit = (col: Dialog, row: WrappedRow) => {
               closeCallback()
             }
             catch (error) {
-              toast.showError({ summary: $t('notifications.subscriptions.error_title'), group: $t('notifications.subscriptions.error_group'), detail: $t('notifications.subscriptions.error_message') })
+              toast.showError({
+                summary: $t('notifications.subscriptions.error_title'),
+                group: $t('notifications.subscriptions.error_group'),
+                detail: $t('notifications.subscriptions.error_message'),
+              })
             }
           },
         },
@@ -147,15 +210,22 @@ const onEdit = (col: Dialog, row: WrappedRow) => {
 }
 
 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 },
-  }, {
-    for: settingsAndContext.row.dashboard_type,
-    dashboardKey: String(settingsAndContext.row.dashboard_id),
-    groupId: String(settingsAndContext.row.group_id),
-  })
+  await fetch<ApiErrorResponse>(
+    API_PATH.SAVE_DASHBOARDS_SETTINGS,
+    {
+      method: 'PUT',
+      signal: AbortSignal.timeout(TimeoutForSavingFailures),
+      body: {
+        ...settingsAndContext.row.settings,
+        ...settingsAndContext.settings,
+      },
+    },
+    {
+      for: settingsAndContext.row.dashboard_type,
+      dashboardKey: String(settingsAndContext.row.dashboard_id),
+      groupId: String(settingsAndContext.row.group_id),
+    },
+  )
 }
 
 function getTypeIcon(type: DashboardType) {
@@ -264,7 +334,9 @@ 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>
@@ -291,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
@@ -302,7 +374,7 @@ function getTypeIcon(type: DashboardType) {
             </div>
             <div class="info">
               <div class="label">
-                {{ $t('notifications.col.webhook') }}
+                {{ $t("notifications.col.webhook") }}
               </div>
 
               <BcTablePopoutEdit
@@ -313,7 +385,7 @@ function getTypeIcon(type: DashboardType) {
             </div>
             <div class="info">
               <div class="label">
-                {{ $t('notifications.col.networks') }}
+                {{ $t("notifications.col.networks") }}
               </div>
 
               <BcTablePopoutEdit
@@ -323,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>
@@ -378,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 23565cdb0..35f05358b 100644
--- a/frontend/components/notifications/management/NotificationsManagementGeneralTab.vue
+++ b/frontend/components/notifications/management/NotificationsManagementGeneralTab.vue
@@ -12,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
@@ -36,21 +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)
+    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'),
-      })
+    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,29 +95,50 @@ 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
@@ -102,8 +150,10 @@ 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"
@@ -126,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 }}
@@ -135,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
@@ -156,40 +206,40 @@ const textMutedUntil = computed(() => {
         v-model="isPushToggleOn"
       />
       <div v-else>
-        {{ tOf($t, 'notifications.general.download_app', 0) }}
+        {{ 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", 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') }}
+        {{ $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') }}
+        {{ $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 fc19bf8ff..10af96be5 100644
--- a/frontend/components/notifications/management/NotificationsManagementModal.vue
+++ b/frontend/components/notifications/management/NotificationsManagementModal.vue
@@ -14,7 +14,8 @@ const visible = defineModel<boolean>()
 
 const showInDevelopment = Boolean(useRuntimeConfig().public.showInDevelopment)
 
-const { refreshSettings, isLoading } = useUseNotificationsManagementSettingsProvider()
+const { refreshSettings, isLoading }
+  = useUseNotificationsManagementSettingsProvider()
 refreshSettings()
 </script>
 
@@ -154,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 95abae2fc..8fda90cbf 100644
--- a/frontend/components/notifications/management/NotificationsManagementPairedDeviceModalContent.vue
+++ b/frontend/components/notifications/management/NotificationsManagementPairedDeviceModalContent.vue
@@ -16,9 +16,13 @@ const accountAccessToggle = ref(false)
 
 <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
@@ -29,20 +33,24 @@ const accountAccessToggle = ref(false)
     </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 b5832eea5..2b8e2b0d5 100644
--- a/frontend/components/notifications/management/NotificationsManagementPairedDevicesModal.vue
+++ b/frontend/components/notifications/management/NotificationsManagementPairedDevicesModal.vue
@@ -13,7 +13,7 @@ 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"
@@ -48,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 6fac2da2d..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 AllOptions = NotificationSettingsValidatorDashboard &
+  NotificationSettingsAccountDashboard
 type DefinedAPIentry = Exclude<APIentry, null | undefined>
 
 interface Props {
   dashboardType: DashboardType
   initialSettings: AllOptions
-  saveUserSettings: (settings: Record<keyof AllOptions, DefinedAPIentry>) => void
+  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)
+  [
+    '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,71 +91,106 @@ 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 {
   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)) {
@@ -122,28 +198,32 @@ function convertAPIentryToInternalEntry(apiKey: keyof AllOptions): InternalEntry
       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.')
+      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,
       }
-    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),
@@ -160,12 +240,12 @@ function sendUserPreferencesToAPI() {
     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
@@ -176,7 +256,7 @@ function sendUserPreferencesToAPI() {
         }
         break
       }
-      case 'networks' :
+      case 'networks':
         output[key] = value.networks!
         break
     }
@@ -196,14 +276,19 @@ function closeDialog(): void {
     class="content"
   >
     <div class="title">
-      {{ t('notifications.subscriptions.dialog_title') }}
+      {{ t("notifications.subscriptions.dialog_title") }}
     </div>
 
     <div
-      v-if="t(tPath+'explanation')"
+      v-if="t(tPath + 'explanation')"
       class="explanation"
     >
-      {{ t(tPath+'explanation', (networkInfo.family === ChainFamily.Gnosis) ? 5 : 20) }}
+      {{
+        t(
+          tPath + "explanation",
+          networkInfo.family === ChainFamily.Gnosis ? 5 : 20,
+        )
+      }}
     </div>
 
     <div
@@ -214,9 +299,15 @@ function closeDialog(): void {
       <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
@@ -226,7 +317,7 @@ function closeDialog(): void {
       <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"
@@ -244,7 +335,7 @@ function closeDialog(): void {
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/fonts.scss';
+@use "~/assets/css/fonts.scss";
 
 .content {
   display: flex;
@@ -259,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 b271f530a..7aaeff725 100644
--- a/frontend/components/notifications/management/SubscriptionRow.vue
+++ b/frontend/components/notifications/management/SubscriptionRow.vue
@@ -9,7 +9,9 @@ const props = defineProps<{
   valueInText?: number
 }>()
 
-const emitEvent = defineEmits<{ (e: 'checkboxClick', checked: boolean): void }>()
+const emitEvent = defineEmits<{
+  (e: 'checkboxClick', checked: boolean): void
+}>()
 
 const { t } = useTranslation()
 
@@ -20,20 +22,25 @@ const tooltipLines = computed(() => {
   if (props.valueInText !== undefined) {
     options = { plural: props.valueInText }
   }
-  else
-    if (Array.isArray(parentVmodel.value)) {
-      options = { plural: parentVmodel.value.length, list: parentVmodel.value.join(', ') }
+  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 {
-      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 }
+      plural = parentVmodel.value ? 2 : 1
     }
+    options = { plural }
+  }
   return tAll(t, props.tPath + '.hint', options)
 })
 
@@ -46,7 +53,7 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
       class="caption"
       :class="deactivationClass"
     >
-      {{ t(tPath+'.option') }}
+      {{ t(tPath + ".option") }}
     </span>
     <BcTooltip
       v-if="tooltipLines[0]"
@@ -113,9 +120,9 @@ const deactivationClass = props.lacksPremiumSubscription ? 'deactivated' : ''
         <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]"
         />
diff --git a/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue b/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue
index ebb3b163f..6e92de4e3 100644
--- a/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue
+++ b/frontend/components/notifications/management/modal/NotificationsManagementModalWebhook.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faPaperPlane,
-} from '@fortawesome/pro-solid-svg-icons'
+import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons'
 import { useForm } from 'vee-validate'
 import { warn } from 'vue'
 import { API_PATH } from '~/types/customFetch'
@@ -20,21 +18,24 @@ const validationSchema = createSchemaObject({
   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)
@@ -44,11 +45,13 @@ const { fetch } = useCustomFetch()
 const handleTestNotification = async () => {
   // 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
   }
@@ -64,7 +67,9 @@ const handleTestNotification = async () => {
           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, {
@@ -73,7 +78,9 @@ const handleTestNotification = async () => {
         webhook_url: webhook_url.value,
       },
     })
-    toast.showSuccess({ summary: $t('notifications.dashboards.toast.success.test_webhook_url') })
+    toast.showSuccess({
+      summary: $t('notifications.dashboards.toast.success.test_webhook_url'),
+    })
   }
   catch (error) {
     const summary = is_discord_webhook_enabled.value
@@ -103,7 +110,7 @@ const id = useId()
     :id
     class="notifications-management-dialog-webhook__header"
   >
-    {{ $t('notifications.dashboards.dialog.heading_webhook') }}
+    {{ $t("notifications.dashboards.dialog.heading_webhook") }}
   </h2>
   <BcForm
     v-focustrap
@@ -148,7 +155,7 @@ const id = useId()
         :is-aria-disabled="!isFormValid || !webhook_url"
         @click="handleTestNotification()"
       >
-        {{ $t('notifications.dashboards.dialog.button_webhook_test') }}
+        {{ $t("notifications.dashboards.dialog.button_webhook_test") }}
         <template #icon>
           <FontAwesomeIcon :icon="faPaperPlane" />
         </template>
@@ -157,7 +164,7 @@ const id = useId()
         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>
diff --git a/frontend/components/playground/DashboardValidatorManageValidators.vue b/frontend/components/playground/DashboardValidatorManageValidators.vue
index 54b18d7bf..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()
@@ -11,8 +14,7 @@ const dialog = useDialog()
 function onClose(groupId: boolean) {
   setTimeout(() => {
     alert('new group: ' + groupId)
-  }, 100,
-  )
+  }, 100)
 }
 
 const openGroupSelection = (withPreselection: boolean) => {
@@ -45,7 +47,9 @@ const 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"
@@ -107,11 +111,11 @@ const openEpochDuties = () => {
 </template>
 
 <style lang="scss" scoped>
-.premium-row{
+.premium-row {
   display: inline-flex;
   gap: 10px;
 }
-.group-selection{
+.group-selection {
   width: 200px;
 }
 .icon-holder {
@@ -121,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 099a7f583..c564b2806 100644
--- a/frontend/components/playground/MiddleEllipsisTests.vue
+++ b/frontend/components/playground/MiddleEllipsisTests.vue
@@ -1,12 +1,13 @@
 <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
+  randomInt = (214013 * randomInt + 2531011) & 0xffffffff
+  const normalized = ((randomInt >> 16) & 0xffff) / 65535
   return Math.round(normalized * max)
 }
 
@@ -38,12 +39,14 @@ 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"
@@ -70,18 +73,26 @@ const showAllCSSclipped = ref<boolean>(false)
         :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"
@@ -114,10 +125,13 @@ const showAllCSSclipped = ref<boolean>(false)
     </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>
@@ -155,9 +169,15 @@ const showAllCSSclipped = ref<boolean>(false)
     </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">
@@ -180,12 +200,19 @@ const showAllCSSclipped = ref<boolean>(false)
     </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>
@@ -200,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>
@@ -220,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 5cabc998e..de2378f2e 100644
--- a/frontend/components/playground/PlaygroundAds.vue
+++ b/frontend/components/playground/PlaygroundAds.vue
@@ -49,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 b1b870951..508ca6b0c 100644
--- a/frontend/components/playground/PlaygroundComposable.vue
+++ b/frontend/components/playground/PlaygroundComposable.vue
@@ -1,6 +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>
@@ -26,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 80434e97e..a86184145 100644
--- a/frontend/components/playground/PlaygroundConversion.vue
+++ b/frontend/components/playground/PlaygroundConversion.vue
@@ -14,7 +14,9 @@ const onCurrencyChange = (event: Event) => {
   }
 }
 
-const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
+const currentEpoch = computed(
+  () => (latestState.value?.current_slot || 0) * 32,
+)
 </script>
 
 <template>
@@ -37,9 +39,7 @@ 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 } }">
@@ -47,12 +47,8 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
         </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" /></div>
+    <div>less than Wei+ :<BcFormatValue value="0000000000000001000" /></div>
     <div>
       less than 1Eth in ETH :<BcFormatValue
         value="0000000010002000001"
@@ -62,7 +58,12 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
     <div>
       less than 1Wei in ETH, min 0 decimals, max: 6:<BcFormatValue
         value="0000000000000000001"
-        :options="{ minUnit: 'MAIN', addPlus: true, maxDecimalCount: 6, minDecimalCount: 0 }"
+        :options="{
+          minUnit: 'MAIN',
+          addPlus: true,
+          maxDecimalCount: 6,
+          minDecimalCount: 0,
+        }"
       />
     </div>
 
@@ -142,33 +143,35 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
       />
     </div>
     <div>
-      Input in  gwei [1001000]: <BcFormatValue
+      Input in gwei [1001000]:
+      <BcFormatValue
         value="1001000"
         :options="{ sourceUnit: 'GWEI' }"
       />
     </div>
     <div>
-      Input in eth [2]: <BcFormatValue
+      Input in eth [2]:
+      <BcFormatValue
         value="2"
         :options="{ sourceUnit: 'MAIN' }"
       />
     </div>
     <div>
-      Input in eth [2] fixed out in GWEI: <BcFormatValue
+      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
+      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>
@@ -178,7 +181,8 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
     />
   </div>
   <div>
-    100000.1234, min/max 3: <BcFormatNumber
+    100000.1234, min/max 3:
+    <BcFormatNumber
       :value="100000.1234"
       :min-decimals="3"
       :max-decimals="3"
@@ -191,9 +195,7 @@ 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, +:
@@ -234,12 +236,10 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
     percent lower
     <BcFormatPercent
       :percent="85.123"
-      :compare-percent="84.50"
+      :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" />
@@ -307,7 +307,7 @@ const currentEpoch = computed(() => (latestState.value?.current_slot || 0) * 32)
 </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 c21de707e..1ea2d287d 100644
--- a/frontend/components/playground/PlaygroundDialog.vue
+++ b/frontend/components/playground/PlaygroundDialog.vue
@@ -1,6 +1,13 @@
 <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()
@@ -8,8 +15,7 @@ const { currentNetwork } = useNetworkStore()
 function onClose(answer: boolean) {
   setTimeout(() => {
     alert('response: ' + answer)
-  }, 100,
-  )
+  }, 100)
 }
 
 const openQuestion = (yesLabel?: string, noLabel?: string) => {
@@ -58,7 +64,8 @@ function openSubscriptions(props: any) {
   })
 }
 
-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 7d4a3e47a..561aab1ff 100644
--- a/frontend/components/playground/PlaygroundDutyStatus.vue
+++ b/frontend/components/playground/PlaygroundDutyStatus.vue
@@ -93,13 +93,27 @@ const data: ValidatorHistoryDuties[] = [
 <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"
@@ -128,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 07cc298ad..5978ad797 100644
--- a/frontend/components/playground/PlaygroundEncryption.vue
+++ b/frontend/components/playground/PlaygroundEncryption.vue
@@ -11,27 +11,15 @@ const encrypted2 = computed(() => toBase64Url(decrypted2.value))
 <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/PlaygroundIcons.vue b/frontend/components/playground/PlaygroundIcons.vue
index 26940486e..b2acc6cc5 100644
--- a/frontend/components/playground/PlaygroundIcons.vue
+++ b/frontend/components/playground/PlaygroundIcons.vue
@@ -107,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"
@@ -119,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">
@@ -141,11 +145,11 @@ import { getAllExistingChainIDs, type ChainIDs } from '~/types/network'
     <IconDatatypeAccountIcon class="icon-size" />
     <IconDatatypeEnsIcon
       class="icon-size"
-      style="color:red"
+      style="color: red"
     />
     <IconDatatypeEnsIcon
       class="icon-size"
-      style="color:blue"
+      style="color: blue"
     />
     <IconDatatypeGraffitiIcon class="icon-size" />
     <IconDatatypeValidatorIcon class="icon-size" />
diff --git a/frontend/components/playground/PlaygroundInput.vue b/frontend/components/playground/PlaygroundInput.vue
index 8f2228b8f..40e6321cf 100644
--- a/frontend/components/playground/PlaygroundInput.vue
+++ b/frontend/components/playground/PlaygroundInput.vue
@@ -9,13 +9,13 @@ const input3 = ref('')
     <div>
       <BcInputLabel
         :value="input1"
-        @set-value="(v: string) => input1 = v"
+        @set-value="(v: string) => (input1 = v)"
       />
     </div>
     <div>
       <BcInputLabel
         :value="input2"
-        @set-value="(v: string) => input2 = v"
+        @set-value="(v: string) => (input2 = v)"
       />
     </div>
     <div>
@@ -23,7 +23,7 @@ const input3 = ref('')
         :value="input3"
         :label="input3 || 'Default'"
         :can-be-empty="true"
-        @set-value="(v: string) => input3 = v"
+        @set-value="(v: string) => (input3 = v)"
       />
     </div>
     <div>
@@ -46,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 b14c03acf..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,14 +17,26 @@ 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>
@@ -75,9 +83,7 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
   <TabView lazy>
     <TabPanel header="Buttons">
       <div class="element_container">
-        <Button>
-          Text Button
-        </Button>
+        <Button> Text Button </Button>
         <Button
           label="Empty Modal"
           @click="emptyModalVisibility = true"
@@ -126,11 +132,12 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
     </TabPanel>
     <TabPanel header="Checkbox">
       <div class="element_container">
-        default checkbox: <Checkbox
+        default checkbox:
+        <Checkbox
           v-model="selected"
           :binary="true"
-        />
-        disabled: <Checkbox disabled />
+        /> disabled:
+        <Checkbox disabled />
       </div>
     </TabPanel>
     <TabPanel header="Toggle">
@@ -169,7 +176,7 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
           <BcToggleMultiBar
             v-model="selectedList"
             :buttons="completeList"
-            style="margin-right: 10px;"
+            style="margin-right: 10px"
           >
             <template #attestation>
               <IconSlotAttestation />
@@ -179,7 +186,7 @@ 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>
@@ -197,7 +204,7 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
     <TabPanel header="Dropdown">
       <div
         class="element_container"
-        style="background-color: darkred; padding: 5px;"
+        style="background-color: darkred; padding: 5px"
       >
         <BcDropdown
           v-model="dropodownSelection"
@@ -206,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"
@@ -215,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>
@@ -229,7 +236,7 @@ const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No'
         <BcLoadingSpinner
           :loading="loading"
           size="small"
-          style="color: lightblue;"
+          style="color: lightblue"
         />
         <BcLoadingSpinner
           :loading="loading"
@@ -270,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;
@@ -282,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 e5ed47a37..528af49bb 100644
--- a/frontend/components/playground/PlaygroundSubsetList.vue
+++ b/frontend/components/playground/PlaygroundSubsetList.vue
@@ -6,23 +6,41 @@ 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>
@@ -41,7 +59,7 @@ const categories: ValidatorSubsetCategory[] = ['all', 'online', 'offline', 'pend
 </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 6370a9667..8d63c3f76 100644
--- a/frontend/components/playground/PlaygroundTable.vue
+++ b/frontend/components/playground/PlaygroundTable.vue
@@ -35,9 +35,13 @@ const data = {
 
 const selected = ref()
 
-watch(selected, () => {
-  warn('selected', selected)
-}, { deep: true })
+watch(
+  selected,
+  () => {
+    warn('selected', selected)
+  },
+  { deep: true },
+)
 </script>
 
 <template>
diff --git a/frontend/components/playground/PlaygroundTags.vue b/frontend/components/playground/PlaygroundTags.vue
index f4d6bf691..73e129b10 100644
--- a/frontend/components/playground/PlaygroundTags.vue
+++ b/frontend/components/playground/PlaygroundTags.vue
@@ -1,12 +1,14 @@
 <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>
@@ -84,11 +86,11 @@ const blockStati: BlockStatus[] = ['missed', 'orphaned', 'scheduled', 'success']
 </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 ab64a4b14..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
     }
@@ -28,7 +30,7 @@ const savingPercentage = computed(() => {
       v-if="savingPercentage > 0"
       class="save-up-text"
     >
-      {{ $t('pricing.save_up_to', { percentage: savingPercentage }) }}
+      {{ $t("pricing.save_up_to", { percentage: savingPercentage }) }}
     </div>
   </div>
 </template>
@@ -40,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 4f53a724f..ece28fde4 100644
--- a/frontend/components/pricing/PremiumAddonBox.vue
+++ b/frontend/components/pricing/PremiumAddonBox.vue
@@ -1,7 +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'
 
@@ -19,36 +26,67 @@ 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() {
@@ -61,7 +99,12 @@ const addonButton = computed(() => {
         await stripeCustomerPortal()
       }
       else {
-        await stripePurchase(props.isYearly ? props.addon.stripe_price_id_yearly : props.addon.stripe_price_id_monthly, quantityForPurchase.value)
+        await stripePurchase(
+          props.isYearly
+            ? props.addon.stripe_price_id_yearly
+            : props.addon.stripe_price_id_monthly,
+          quantityForPurchase.value,
+        )
       }
     }
     else {
@@ -77,7 +120,11 @@ const addonButton = computed(() => {
 })
 
 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(() => {
@@ -112,7 +159,7 @@ const purchaseQuantityButtons = computed(() => {
       <div class="validator-count">
         {{ boxText.validatorCount }}
         <div class="subtext">
-          {{ $t('pricing.addons.per_dashboard') }}
+          {{ $t("pricing.addons.per_dashboard") }}
           <BcTooltip
             position="top"
             :fit-content="true"
@@ -123,7 +170,13 @@ const purchaseQuantityButtons = computed(() => {
             />
             <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>
@@ -143,10 +196,10 @@ const purchaseQuantityButtons = computed(() => {
             class="month"
             yearly
           >
-            {{ $t('pricing.per_month') }}
+            {{ $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>
@@ -154,7 +207,7 @@ const purchaseQuantityButtons = computed(() => {
             {{ prices.monthly }}
           </div>
           <div class="month">
-            {{ $t('pricing.per_month') }}*
+            {{ $t("pricing.per_month") }}*
           </div>
         </template>
       </div>
@@ -163,7 +216,7 @@ const purchaseQuantityButtons = computed(() => {
         class="saving-info"
       >
         <div>
-          {{ $t('pricing.savings', { amount: prices.saving }) }}
+          {{ $t("pricing.savings", { amount: prices.saving }) }}
         </div>
         <BcTooltip
           position="top"
@@ -172,7 +225,12 @@ const purchaseQuantityButtons = computed(() => {
           <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>
@@ -182,7 +240,11 @@ const purchaseQuantityButtons = computed(() => {
           v-if="addonSubscriptionCount"
           class="quantity-label"
         >
-          {{ $t('pricing.addons.currently_active', { amount: addonSubscriptionCount }) }}
+          {{
+            $t("pricing.addons.currently_active", {
+              amount: addonSubscriptionCount,
+            })
+          }}
         </div>
         <div
           v-else
@@ -213,15 +275,15 @@ const purchaseQuantityButtons = computed(() => {
       </div>
       <div class="limit-reached-row">
         <div v-if="limitReached">
-          {{ tOf($t, 'pricing.addons.contact_support', 0) }}
+          {{ 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", 1) }}
           </BcLink>
-          {{ tOf($t, 'pricing.addons.contact_support', 2) }}
+          {{ tOf($t, "pricing.addons.contact_support", 2) }}
         </div>
       </div>
       <Button
@@ -235,7 +297,7 @@ const purchaseQuantityButtons = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/pricing.scss';
+@use "~/assets/css/pricing.scss";
 
 .box-container {
   width: 290px;
@@ -435,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 7b40df179..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'
 
@@ -29,7 +27,10 @@ type CompareRow = {
 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 => {
     if (['support_us', 'bulk_adding'].includes(property)) {
@@ -45,13 +46,17 @@ const rows = computed(() => {
         value = $t('pricing.full_history')
       }
       else {
-        value = $t('common.last_x', { duration: formatTimeDuration(value as number, $t) })
+        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 {
@@ -59,7 +64,14 @@ const rows = computed(() => {
       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':
@@ -105,27 +117,69 @@ 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
 })
@@ -133,7 +187,7 @@ const rows = computed(() => {
 
 <template>
   <div class="compare-plans-container">
-    <h1>{{ $t('pricing.compare') }}</h1>
+    <h1>{{ $t("pricing.compare") }}</h1>
     <div
       class="content"
       :class="{ 'show-content': showContent }"
@@ -181,9 +235,9 @@ const rows = computed(() => {
     >
       <Button
         class="pricing_button"
-        @click="() => showContent = !showContent"
+        @click="() => (showContent = !showContent)"
       >
-        {{ $t(showContent ? 'pricing.hide_feature' : 'pricing.show_feature') }}
+        {{ $t(showContent ? "pricing.hide_feature" : "pricing.show_feature") }}
       </Button>
     </div>
   </div>
@@ -390,7 +444,6 @@ const rows = computed(() => {
         }
       }
     }
-
   }
 
   .button-row {
diff --git a/frontend/components/pricing/PremiumProductBox.vue b/frontend/components/pricing/PremiumProductBox.vue
index a00a9b986..e6e123bc7 100644
--- a/frontend/components/pricing/PremiumProductBox.vue
+++ b/frontend/components/pricing/PremiumProductBox.vue
@@ -8,7 +8,12 @@ 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()
@@ -20,18 +25,30 @@ interface Props {
 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,
+    ),
   }
 })
 
@@ -49,11 +66,20 @@ 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,
   }
@@ -69,7 +95,12 @@ async function buttonCallback() {
       await stripeCustomerPortal()
     }
     else {
-      await stripePurchase(props.isYearly ? props.product.stripe_price_id_yearly : props.product.stripe_price_id_monthly, 1)
+      await stripePurchase(
+        props.isYearly
+          ? props.product.stripe_price_id_yearly
+          : props.product.stripe_price_id_monthly,
+        1,
+      )
     }
   }
   else {
@@ -83,12 +114,28 @@ 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 {
@@ -101,30 +148,54 @@ const planButton = computed(() => {
     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,
     },
     {
-      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) }),
+      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,
@@ -175,7 +246,7 @@ const minorFeatures = computed<Feature[]>(() => {
         v-if="product.is_popular"
         class="popular"
       >
-        {{ $t('pricing.premium_product.popular') }}
+        {{ $t("pricing.premium_product.popular") }}
       </div>
     </div>
     <div class="features-container">
@@ -184,10 +255,10 @@ 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
@@ -195,7 +266,7 @@ const minorFeatures = computed<Feature[]>(() => {
         class="saving-info"
       >
         <div>
-          {{ $t('pricing.savings', { amount: prices.saving }) }}
+          {{ $t("pricing.savings", { amount: prices.saving }) }}
         </div>
         <BcTooltip
           position="top"
@@ -204,7 +275,12 @@ const minorFeatures = computed<Feature[]>(() => {
           <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>
@@ -244,7 +320,7 @@ const minorFeatures = computed<Feature[]>(() => {
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/pricing.scss';
+@use "~/assets/css/pricing.scss";
 
 .box-container {
   box-sizing: border-box;
@@ -328,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 0ce52b0de..da890794b 100644
--- a/frontend/components/pricing/PremiumProducts.vue
+++ b/frontend/components/pricing/PremiumProducts.vue
@@ -23,7 +23,7 @@ defineProps<Props>()
       </template>
     </div>
     <div class="footnote">
-      {{ $t('pricing.excluding_vat') }}
+      {{ $t("pricing.excluding_vat") }}
     </div>
   </div>
 </template>
@@ -54,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 c07a084a4..7f829ccf7 100644
--- a/frontend/components/pricing/PremiumViaAppBanner.vue
+++ b/frontend/components/pricing/PremiumViaAppBanner.vue
@@ -8,7 +8,7 @@ const { isPremiumSubscribedViaApp } = useProductsStore()
     v-if="isPremiumSubscribedViaApp"
     class="banner"
   >
-    {{ $t('pricing.premium_via_app_banner') }}
+    {{ $t("pricing.premium_via_app_banner") }}
   </div>
 </template>
 
diff --git a/frontend/components/pricing/TypeToggle.vue b/frontend/components/pricing/TypeToggle.vue
index 4fdb15779..a27a3c636 100644
--- a/frontend/components/pricing/TypeToggle.vue
+++ b/frontend/components/pricing/TypeToggle.vue
@@ -1,12 +1,10 @@
-<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
@@ -14,10 +12,10 @@
       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>
@@ -93,7 +91,7 @@
       font-weight: var(--montserrat-bold);
     }
 
-    .api-keys .subtext{
+    .api-keys .subtext {
       font-size: 9px;
     }
   }
diff --git a/frontend/components/slot/viz/SlotVizTile.vue b/frontend/components/slot/viz/SlotVizTile.vue
index ebaf4767d..59e31a698 100644
--- a/frontend/components/slot/viz/SlotVizTile.vue
+++ b/frontend/components/slot/viz/SlotVizTile.vue
@@ -1,6 +1,9 @@
 <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
@@ -12,10 +15,18 @@ const props = defineProps<Props>()
 const data = computed(() => {
   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 = ''
@@ -46,8 +57,16 @@ const data = computed(() => {
     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')
+    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'
@@ -180,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 69044c12c..61a3ccb82 100644
--- a/frontend/components/slot/viz/SlotVizTooltip.vue
+++ b/frontend/components/slot/viz/SlotVizTooltip.vue
@@ -1,9 +1,27 @@
 <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
@@ -16,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
@@ -45,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
       }
@@ -104,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) {
@@ -126,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,
+          ),
         })
       }
     }
@@ -134,22 +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])
+    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])
+    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])
+    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])
+    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.no_duties', [
+      undefined,
+      'scheduled',
+      undefined,
+    ])
   }
 
   return {
@@ -157,7 +228,7 @@ const data = computed(() => {
     networkLabelPath,
     rows,
     hasDuties,
-    minWidth: (1 + (`${maxCount}`.length) * 11) + 'px',
+    minWidth: 1 + `${maxCount}`.length * 11 + 'px',
   }
 })
 </script>
@@ -232,9 +303,12 @@ const data = computed(() => {
                   >
                     {{ 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"
@@ -262,7 +336,7 @@ const data = computed(() => {
                   </BcLink>
                 </div>
                 <div v-if="row.andMore">
-                  ...{{ $t('common.and_more', { count: row.andMore }) }}
+                  ...{{ $t("common.and_more", { count: row.andMore }) }}
                 </div>
               </div>
             </div>
@@ -288,7 +362,7 @@ const data = computed(() => {
       padding-left: var(--padding);
       padding-right: var(--padding);
 
-      &:has(+.rows) {
+      &:has(+ .rows) {
         border-bottom: 3px solid var(--container-border-color);
       }
     }
@@ -302,10 +376,10 @@ const data = computed(() => {
     }
 
     .row {
-        display: flex;
-        align-items: center;
+      display: flex;
+      align-items: center;
 
-      &.state{
+      &.state {
         text-align: left;
       }
 
@@ -337,7 +411,7 @@ const data = computed(() => {
       }
 
       .duties > div,
-      .validators{
+      .validators {
         margin-top: var(--padding);
       }
 
@@ -370,8 +444,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 a7c9b8c10..1c25a0e34 100644
--- a/frontend/components/slot/viz/SlotVizViewer.vue
+++ b/frontend/components/slot/viz/SlotVizViewer.vue
@@ -1,13 +1,16 @@
 <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'
@@ -24,26 +27,42 @@ 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'),
-  }, {
+  },
+  {
     component: IconSlotAttestation,
     value: 'attestation',
     tooltip: $t('slotViz.filter.attestation'),
-  }, {
+  },
+  {
     component: IconSlotSync,
     value: 'sync',
     tooltip: $t('slotViz.filter.sync'),
-  }, {
+  },
+  {
     component: IconSlotSlashing,
     value: 'slashing',
     tooltip: $t('slotViz.filter.slashing'),
-  }, {
+  },
+  {
     icon: faEye,
     value: 'visible',
     className: 'visible-icon',
@@ -76,30 +95,37 @@ 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>
@@ -120,7 +146,7 @@ watch(() => props, () => {
         >
           <FontAwesomeIcon :icon="faInfoCircle" />
         </BcLink>
-      </BCTooltip>
+      </BcTooltip>
       <div class="filter-row">
         <BcToggleMultiBar
           v-model="selectedCategories"
@@ -140,7 +166,13 @@ watch(() => props, () => {
         :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
@@ -157,8 +189,8 @@ watch(() => props, () => {
 </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;
@@ -169,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) {
@@ -257,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 e838105ba..7476eeede 100644
--- a/frontend/components/user/settings/UserSettingsDeleteAccount.vue
+++ b/frontend/components/user/settings/UserSettingsDeleteAccount.vue
@@ -13,7 +13,9 @@ 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',
@@ -36,11 +38,11 @@ const deleteAction = async () => {
 <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
@@ -56,8 +58,8 @@ const deleteAction = async () => {
 </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 b6a04a6b2..c0b3521b3 100644
--- a/frontend/components/user/settings/UserSettingsEmail.vue
+++ b/frontend/components/user/settings/UserSettingsEmail.vue
@@ -34,26 +34,32 @@ const onSubmit = handleSubmit(async (values, { resetForm }) => {
         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'),
-      })
+    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>
@@ -62,10 +68,10 @@ const canSubmit = computed(() => !buttonsDisabled.value && newEmail.value && con
     @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
@@ -81,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
@@ -97,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
@@ -123,8 +129,8 @@ const canSubmit = computed(() => !buttonsDisabled.value && newEmail.value && con
 </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 e069428d2..8e70fb829 100644
--- a/frontend/components/user/settings/UserSettingsPassword.vue
+++ b/frontend/components/user/settings/UserSettingsPassword.vue
@@ -33,26 +33,32 @@ const onSubmit = handleSubmit(async (values, { resetForm }) => {
         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'),
-      })
+    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>
@@ -61,10 +67,10 @@ const canSubmit = computed(() => !buttonsDisabled.value && oldPassword.value &&
     @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
@@ -80,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
@@ -96,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
@@ -122,8 +128,8 @@ const canSubmit = computed(() => !buttonsDisabled.value && oldPassword.value &&
 </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 6ecda6c7d..fe35cb8b9 100644
--- a/frontend/components/user/settings/UserSettingsSubscriptions.vue
+++ b/frontend/components/user/settings/UserSettingsSubscriptions.vue
@@ -16,7 +16,9 @@ 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 }
@@ -26,13 +28,13 @@ const planButton = computed(() => {
 <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
@@ -45,8 +47,8 @@ const planButton = computed(() => {
 </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 c8bb889f8..51225acb2 100644
--- a/frontend/components/validator/table/ValidatorTableDutyRewards.vue
+++ b/frontend/components/validator/table/ValidatorTableDutyRewards.vue
@@ -34,9 +34,15 @@ 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,
@@ -73,9 +79,9 @@ const mapped = computed(() => {
 </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 3c0aaaac6..4d6481d08 100644
--- a/frontend/components/validator/table/ValidatorTableDutyStatus.vue
+++ b/frontend/components/validator/table/ValidatorTableDutyStatus.vue
@@ -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 = ''
@@ -54,8 +56,16 @@ 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,
@@ -83,10 +93,17 @@ const mapped = computed(() => {
             {{ 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
@@ -143,9 +160,9 @@ const mapped = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-.tooltip{
+.tooltip {
   text-align: left;
-  .head{
+  .head {
     margin-top: var(--padding);
   }
 }
@@ -163,7 +180,7 @@ const mapped = computed(() => {
     border-radius: var(--border-radius);
     border: solid 1px transparent;
 
-    svg{
+    svg {
       margin: 3px 4px;
       height: 12px;
       width: auto;
@@ -175,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 b5eedb803..77b92ce66 100644
--- a/frontend/components/validator/table/ValidatorTableStatus.vue
+++ b/frontend/components/validator/table/ValidatorTableStatus.vue
@@ -1,7 +1,5 @@
 <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'
 
@@ -41,18 +39,18 @@ const iconColor = computed(() => {
   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 494429d8d..7e5807145 100644
--- a/frontend/composables/notifications/useNotificationsManagementDashboards.ts
+++ b/frontend/composables/notifications/useNotificationsManagementDashboards.ts
@@ -5,8 +5,19 @@ import type { InternalGetUserNotificationSettingsDashboardsResponse } from '~/ty
 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)
@@ -14,7 +25,13 @@ export function useNotificationsManagementDashboards() {
   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 643d474b3..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')
+  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 941f703bb..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() {
   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() {
     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[]) {
     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,7 +73,8 @@ export function useUseNotificationsManagementSettingsProvider() {
     if (updateRequested) {
       updateRequested = false
       try {
-        warn(`TODO: implement saving of new settings ${newSettings}`) // adding newSettings here so the parameter is used :)
+        // adding newSettings here so the parameter is used :)
+        warn(`TODO: implement saving of new settings ${newSettings}`)
       }
       catch (e) {
         refreshSettings()
@@ -52,7 +82,16 @@ export function useUseNotificationsManagementSettingsProvider() {
     }
   })
 
-  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 196a98d64..ab2c2f89b 100644
--- a/frontend/composables/useBcDialog.ts
+++ b/frontend/composables/useBcDialog.ts
@@ -9,7 +9,7 @@ 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) {
@@ -26,16 +26,22 @@ 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
   }
@@ -59,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) {
diff --git a/frontend/composables/useBcSeo.ts b/frontend/composables/useBcSeo.ts
index 50cdb7f65..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
@@ -25,7 +40,13 @@ export function useBcSeo(pageTitle?: string | Ref<string | number | undefined> |
     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({
diff --git a/frontend/composables/useBcToastProvider.ts b/frontend/composables/useBcToastProvider.ts
index fbc5ba9d9..3962676a5 100644
--- a/frontend/composables/useBcToastProvider.ts
+++ b/frontend/composables/useBcToastProvider.ts
@@ -7,18 +7,31 @@ 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) => {
@@ -27,7 +40,9 @@ export function useBcToastProvider() {
         const hasGroup = toasts[0].group
         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,
         })
@@ -45,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 ddebdb9fb..2524085e5 100644
--- a/frontend/composables/useCurrency.ts
+++ b/frontend/composables/useCurrency.ts
@@ -7,11 +7,15 @@ 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 selectedCurrency = useCookie<Currency>(COOKIE_KEY.CURRENCY, { default: () => 'NAT' })
+  const selectedCurrency = useCookie<Currency>(COOKIE_KEY.CURRENCY, {
+    default: () => 'NAT',
+  })
   function setCurrency(newCurrency: Currency) {
     selectedCurrency.value = newCurrency
   }
@@ -28,31 +32,50 @@ export function useCurrency() {
     )
   })
 
-  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 cd9e91f8e..83977917f 100644
--- a/frontend/composables/useCurrentAds.ts
+++ b/frontend/composables/useCurrentAds.ts
@@ -8,14 +8,30 @@ export function useCurrentAds() {
 
   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 3ead85dcf..38ac6a5ca 100644
--- a/frontend/composables/useCustomFetch.ts
+++ b/frontend/composables/useCustomFetch.ts
@@ -6,7 +6,7 @@ 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() {
   const headers = useRequestHeaders(['cookie'])
@@ -18,8 +18,14 @@ export function useCustomFetch() {
   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> {
+  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,7 +78,12 @@ 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
@@ -91,9 +115,13 @@ export function useCustomFetch() {
     }
     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 ead755075..88d34fe0e 100644
--- a/frontend/composables/useDashboardKey.ts
+++ b/frontend/composables/useDashboardKey.ts
@@ -6,7 +6,9 @@ export function useDashboardKey() {
   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 b97fcbd58..9f2092960 100644
--- a/frontend/composables/useDashboardKeyProvider.ts
+++ b/frontend/composables/useDashboardKeyProvider.ts
@@ -1,22 +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
@@ -34,7 +49,11 @@ export function useDashboardKeyProvider(type: DashboardType = 'validator', mockK
         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
@@ -78,10 +97,24 @@ export function useDashboardKeyProvider(type: DashboardType = 'validator', mockK
     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/useDateProvider.ts b/frontend/composables/useDateProvider.ts
index 58cbbddfc..b5aa9188d 100644
--- a/frontend/composables/useDateProvider.ts
+++ b/frontend/composables/useDateProvider.ts
@@ -1,7 +1,8 @@
 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() {
   const date = ref(new Date())
diff --git a/frontend/composables/useDebounceValue.ts b/frontend/composables/useDebounceValue.ts
index 8e4069864..eec5c4945 100644
--- a/frontend/composables/useDebounceValue.ts
+++ b/frontend/composables/useDebounceValue.ts
@@ -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 9540a6ca6..6dfe3156e 100644
--- a/frontend/composables/useFormat.ts
+++ b/frontend/composables/useFormat.ts
@@ -9,15 +9,48 @@ import {
 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 26f39d4fa..0ff34bda6 100644
--- a/frontend/composables/useGlobalSetting.ts
+++ b/frontend/composables/useGlobalSetting.ts
@@ -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 ca9239425..25c5ee4fe 100644
--- a/frontend/composables/useHashTabs.ts
+++ b/frontend/composables/useHashTabs.ts
@@ -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 975d9a11d..3dfd75b97 100644
--- a/frontend/composables/useInterval.ts
+++ b/frontend/composables/useInterval.ts
@@ -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 de422e261..0a166e571 100644
--- a/frontend/composables/useRefBridge.ts
+++ b/frontend/composables/useRefBridge.ts
@@ -1,10 +1,13 @@
+/* eslint-disable vue/max-len -- TODO: @thib-wien plz fix this */
 import { type ModelRef } from 'vue'
 
 export interface BridgeRef<T> extends Ref<T> {
   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> | Mod
  * @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[]> | Model
  * @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,46 +94,66 @@ function createBridge<Torig, Tcreated, TorigWhole, TcreatedWhole>(origRef: Ref<T
     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 {
   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/useStripeProvider.ts b/frontend/composables/useStripeProvider.ts
index 98a611894..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() {
   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,10 +58,13 @@ 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
@@ -63,7 +76,12 @@ export function useStripeProvider() {
     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 1e32b74ba..5fbc315a5 100644
--- a/frontend/composables/useSwipe.ts
+++ b/frontend/composables/useSwipe.ts
@@ -1,5 +1,9 @@
 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 = {
@@ -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) => {
@@ -66,7 +73,10 @@ export const useSwipe = (swipeOptions?: SwipeOptions, bounce = true) => {
     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
@@ -106,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
     }
   }
@@ -120,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,
+      )
     }
   }
 
@@ -144,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 8e735bec7..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/useValidatorDashboardGroups.ts b/frontend/composables/useValidatorDashboardGroups.ts
index da14bbd08..9b806fd83 100644
--- a/frontend/composables/useValidatorDashboardGroups.ts
+++ b/frontend/composables/useValidatorDashboardGroups.ts
@@ -6,11 +6,13 @@ export function useValidatorDashboardGroups() {
 
   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 9edddf61c..f3a1fcdc8 100644
--- a/frontend/composables/useValue.ts
+++ b/frontend/composables/useValue.ts
@@ -1,7 +1,11 @@
 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'
@@ -10,18 +14,25 @@ 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 {
@@ -38,7 +49,12 @@ export function useValue() {
       }
 
       // 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
@@ -46,19 +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'
         }
@@ -67,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/useWindowSizeProvider.ts b/frontend/composables/useWindowSizeProvider.ts
index 89ba0122b..01d9d104d 100644
--- a/frontend/composables/useWindowSizeProvider.ts
+++ b/frontend/composables/useWindowSizeProvider.ts
@@ -7,7 +7,9 @@ export function useWindowSizeProvider() {
 
   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 b7fff267b..640d7b8a4 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -1,15 +1,22 @@
 // @ts-check
+// import stylistic from '@stylistic/eslint-plugin'
 import withNuxt from './.nuxt/eslint.config.mjs'
 
-export default withNuxt()
-  .prepend(
-    {
-      ignores: [
-        'types/api',
-        'public',
-      ],
-    },
-  )
+export default withNuxt({
+  rules: {
+    'vue/max-len': [
+      'error',
+      {
+        code: 120,
+        ignoreStrings: true,
+        ignoreHTMLAttributeValues: true,
+      },
+    ],
+  },
+})
+  .prepend({
+    ignores: ['types/api', 'public'],
+  })
   .override('nuxt/typescript/rules', {
     rules: {
       '@typescript-eslint/no-explicit-any': 'off', // TODO: remove this rule
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 1b5f7b615..5e3e6242b 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -312,7 +312,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",
@@ -324,78 +324,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."
@@ -489,7 +496,7 @@
           "webhook_url": "Webhook could not be sent successfully",
           "discord": "Discord webhook could not be sent successfully."
         }
-      } 
+      }
     }
   },
   "rocketpool": {
@@ -808,12 +815,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 09964f748..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'
@@ -39,9 +43,13 @@ export default function ({ name, params, query }: RouteLocationNormalizedLoaded)
     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}`)
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 9bdc5d1e7..c4beff6f3 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -14,12 +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.')
+  warn(
+    'The GitHub tag and hash of the explorer cannot be read with git-describe.',
+  )
 }
 
 export default defineNuxtConfig({
@@ -58,16 +62,26 @@ export default defineNuxtConfig({
       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: {
@@ -99,10 +113,7 @@ export default defineNuxtConfig({
           },
           format: 'es',
         },
-        plugins: [
-          nodeResolve(),
-          commonjs(),
-        ],
+        plugins: [nodeResolve(), commonjs()],
       },
       minify: true,
     },
diff --git a/frontend/pages/account-dashboard/[[id]]/index.vue b/frontend/pages/account-dashboard/[[id]]/index.vue
index fb2116a73..05049f4dd 100644
--- a/frontend/pages/account-dashboard/[[id]]/index.vue
+++ b/frontend/pages/account-dashboard/[[id]]/index.vue
@@ -12,14 +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>()
+const dashboardCreationControllerModal
+  = ref<typeof DashboardCreationController>()
 function showDashboardCreation() {
   dashboardCreationControllerModal.value?.show()
 }
 </script>
 
 <template>
-  <div v-if="dashboardKey==''">
+  <div v-if="dashboardKey == ''">
     <BcPageWrapper>
       <DashboardCreationController
         ref="dashboardCreationControllerPanel"
diff --git a/frontend/pages/dashboard/[[id]]/index.vue b/frontend/pages/dashboard/[[id]]/index.vue
index e6c9e9384..a2241fd49 100644
--- a/frontend/pages/dashboard/[[id]]/index.vue
+++ b/frontend/pages/dashboard/[[id]]/index.vue
@@ -42,7 +42,13 @@ const tabs: HashTabs = {
 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,20 +59,42 @@ 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>()
+const dashboardCreationControllerModal
+  = ref<typeof DashboardCreationController>()
 function showDashboardCreationDialog() {
   dashboardCreationControllerModal.value?.show()
 }
@@ -77,35 +105,47 @@ 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
       }
-    }
-    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)
+      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)
+        }
+        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>
@@ -215,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 ee5d4370a..731c7e1cd 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -34,7 +34,11 @@ const onSubmit = handleSubmit(async (values) => {
   }
   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'),
+    })
   }
 })
 
@@ -50,14 +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>
+            >{{
+              $t("login_and_register.email")
+            }}</label>
             <InputText
               id="email"
               v-model="email"
@@ -75,14 +81,14 @@ const registerLink = computed(() => {
               for="password"
               class="label"
             >
-              <div>{{ $t('login_and_register.password') }}</div>
+              <div>{{ $t("login_and_register.password") }}</div>
               <div class="right-cell">
                 <BcLink
                   to="/requestReset"
                   :target="Target.Internal"
                   class="link"
                 >
-                  {{ $t('login_and_register.forgotten') }}
+                  {{ $t("login_and_register.forgotten") }}
                 </BcLink>
               </div>
             </label>
@@ -100,13 +106,13 @@ const registerLink = computed(() => {
           </div>
           <div class="last-row">
             <div class="account-invitation">
-              {{ $t('login_and_register.dont_have_account') }}
+              {{ $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.signup_here") }}
               </BcLink>
             </div>
             <Button
@@ -134,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 e5b4f4df8..6340a8825 100644
--- a/frontend/pages/notifications.vue
+++ b/frontend/pages/notifications.vue
@@ -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)
 
@@ -77,7 +79,9 @@ const openManageNotifications = () => {
           TODO: Overview
         </div>
       </template>
-      <NotificationsManagementModal v-model="manageNotificationsModalVisisble" />
+      <NotificationsManagementModal
+        v-model="manageNotificationsModalVisisble"
+      />
       <div class="button-row">
         <Button
           :label="$t('notifications.manage')"
@@ -97,7 +101,9 @@ const openManageNotifications = () => {
               :icon="faGaugeSimpleMax"
             />
           </template>
-          <NotificationsDashboardsTable @open-dialog="openManageNotifications" />
+          <NotificationsDashboardsTable
+            @open-dialog="openManageNotifications"
+          />
         </TabPanel>
         <TabPanel :disabled="tabs.machines.disabled">
           <template #header>
@@ -142,7 +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;
 }
 
@@ -154,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 ced8b02f0..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,14 +17,20 @@ 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>
diff --git a/frontend/pages/pricing.vue b/frontend/pages/pricing.vue
index aa750f2c1..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)
 
@@ -39,7 +43,7 @@ const scrollToAddons = () => {
           class="view-addons-button"
           @click="scrollToAddons()"
         >
-          {{ $t('pricing.view_addons') }}<FontAwesomeIcon :icon="faArrowDown" />
+          {{ $t("pricing.view_addons") }}<FontAwesomeIcon :icon="faArrowDown" />
         </Button>
         <PricingPremiumCompare />
         <PricingPremiumAddons
@@ -60,7 +64,7 @@ const scrollToAddons = () => {
 </style>
 
 <style lang="scss" scoped>
-@use '~/assets/css/pricing.scss';
+@use "~/assets/css/pricing.scss";
 
 .page-container {
   position: relative;
@@ -116,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 72c5e348d..c2b775836 100644
--- a/frontend/pages/register.vue
+++ b/frontend/pages/register.vue
@@ -45,11 +45,22 @@ const onSubmit = handleSubmit(async (values) => {
     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') })
+    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')
@@ -61,16 +72,16 @@ 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') }}
+          {{ $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.login_here") }}
           </BcLink>
         </div>
         <form @submit="onSubmit">
@@ -78,7 +89,9 @@ const loginLink = computed(() => {
             <label
               for="email"
               class="label"
-            >{{ $t('login_and_register.email') }}</label>
+            >{{
+              $t("login_and_register.email")
+            }}</label>
             <InputText
               id="email"
               v-model="email"
@@ -95,7 +108,9 @@ const loginLink = computed(() => {
             <label
               for="password"
               class="label"
-            >{{ $t('login_and_register.choose_password') }}</label>
+            >{{
+              $t("login_and_register.choose_password")
+            }}</label>
             <InputText
               id="password"
               v-model="password"
@@ -112,7 +127,9 @@ const loginLink = computed(() => {
             <label
               for="confirmPassword"
               class="label"
-            >{{ $t('login_and_register.confirm_password') }}</label>
+            >{{
+              $t("login_and_register.confirm_password")
+            }}</label>
             <InputText
               id="confirmPassword"
               v-model="confirmPassword"
@@ -137,21 +154,23 @@ const loginLink = computed(() => {
                 aria-describedby="text-error"
               />
               <div class="text">
-                <label for="agreement">{{ tOf($t, 'login_and_register.please_agree', 0) + ' ' }}</label>
+                <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) }}
+                  {{ tOf($t, "login_and_register.please_agree", 1) }}
                 </BcLink>
-                {{ tOf($t, 'login_and_register.please_agree', 2) }}
+                {{ 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", 3) }}
                 </BcLink>
               </div>
             </div>
@@ -180,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;
     }
 
@@ -229,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;
             }
@@ -238,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 911f0dd1b..6c2a063cc 100644
--- a/frontend/plugins/bcLogger.ts
+++ b/frontend/plugins/bcLogger.ts
@@ -3,7 +3,9 @@ import * as path from 'path'
 import { warn } from 'vue'
 
 export default defineNuxtPlugin((_nuxtApp) => {
-  const { public: { logFile } } = useRuntimeConfig()
+  const {
+    public: { logFile },
+  } = useRuntimeConfig()
   return {
     provide: {
       bcLogger: {
@@ -11,7 +13,10 @@ export default defineNuxtPlugin((_nuxtApp) => {
           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 10a4b1036..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/js/revive.min.js b/frontend/public/js/revive.min.js
index b51b5fd23..52180e6f2 100644
--- a/frontend/public/js/revive.min.js
+++ b/frontend/public/js/revive.min.js
@@ -1,2 +1,520 @@
-(function(d,c){var a="5b200397ccf8a9353bf44ef99b45268c";c.reviveAsync=c.reviveAsync||{};(function(e){if(typeof e.CustomEvent==="function"){return false}function g(i,j){j=j||{bubbles:false,cancelable:false,detail:undefined};var h=document.createEvent("CustomEvent");h.initCustomEvent(i,j.bubbles,j.cancelable,j.detail);return h}g.prototype=e.Event.prototype;e.CustomEvent=g})(c);try{if(!c.reviveAsync.hasOwnProperty(a)){var f=c.reviveAsync[a]={id:Object.keys(c.reviveAsync).length,name:"revive",seq:0,main:function(){var e=function(){var g=false;try{if(!g){g=true;d.removeEventListener("DOMContentLoaded",e,false);c.removeEventListener("load",e,false);f.addEventListener("start",f.start);f.addEventListener("refresh",f.refresh);f.dispatchEvent("start",{start:true})}}catch(h){console.log(h)}};f.dispatchEvent("init");if(d.readyState==="complete"){setTimeout(e)}else{d.addEventListener("DOMContentLoaded",e,false);c.addEventListener("load",e,false)}},start:function(g){if(g.detail&&g.detail.hasOwnProperty("start")&&!g.detail.start){return}f.removeEventListener("start",f.start);f.dispatchEvent("refresh")},refresh:function(g){f.apply(f.detect())},ajax:function(e,g){var h=new XMLHttpRequest();h.onreadystatechange=function(){if(4===this.readyState){if(200===this.status){f.spc(JSON.parse(this.responseText))}}};this.dispatchEvent("send",g);h.open("GET",e+"?"+f.encode(g).join("&"),true);h.withCredentials=true;h.send()},encode:function(m,n){var e=[],h,i;for(h in m){if(m.hasOwnProperty(h)){var l=n?n+"["+h+"]":h;if((/^(string|number|boolean)$/).test(typeof m[h])){e.push(encodeURIComponent(l)+"="+encodeURIComponent(m[h]))}else{var g=f.encode(m[h],l);for(i in g){e.push(g[i])}}}}return e},apply:function(g){if(g.zones.length){var e="https:"===d.location.protocol?"https://ads.bitfly.at/www/delivery/asyncspc.php":"https://ads.bitfly.at/www/delivery/asyncspc.php";g.zones=g.zones.join("|");g.loc=d.location.href;if(d.referrer){g.referer=d.referrer}f.ajax(e,g)}},detect:function(){var e=d.querySelectorAll("ins["+f.getDataAttr("id")+"='"+a+"']");var l={zones:[],prefix:f.name+"-"+f.id+"-"};for(var r=0;r<e.length;r++){var p=f.getDataAttr("zoneid"),k=f.getDataAttr("seq"),n=e[r],s;if(n.hasAttribute(k)){s=n.getAttribute(k)}else{s=f.seq++;n.setAttribute(k,s);n.id=l.prefix+s}if(n.hasAttribute(p)){var o=f.getDataAttr("loaded"),q=new RegExp("^"+f.getDataAttr("(.*)")+"$"),g;if(n.hasAttribute(o)&&n.getAttribute(o)){continue}n.setAttribute(f.getDataAttr("loaded"),"1");for(var h=0;h<n.attributes.length;h++){if(g=n.attributes[h].name.match(q)){if("zoneid"===g[1]){l.zones[s]=n.attributes[h].value}else{if(!(/^(id|seq|loaded)$/).test(g[1])){l[g[1]]=n.attributes[h].value}}}}}}return l},createFrame:function(h){var e=d.createElement("IFRAME"),g=e.style;e.scrolling="no";e.frameBorder=0;e.allow="autoplay";e.width=h.width>0?h.width:0;e.height=h.height>0?h.height:0;g.border=0;g.overflow="hidden";return e},loadFrame:function(g,e){var h=g.contentDocument||g.contentWindow.document;h.open();h.writeln("<!DOCTYPE html>");h.writeln("<html>");h.writeln('<head><base target="_top"><meta charset="UTF-8"></head>');h.writeln('<body border="0" margin="0" style="margin: 0; padding: 0">');h.writeln(e);h.writeln("</body>");h.writeln("</html>");h.close()},spc:function(l){this.dispatchEvent("receive",l);for(var e in l){if(l.hasOwnProperty(e)){var p=l[e];var o=d.getElementById(e);if(o){var n=o.cloneNode(false);if(p.iframeFriendly){var k=f.createFrame(p);n.appendChild(k);o.parentNode.replaceChild(n,o);f.loadFrame(k,p.html)}else{n.style.textDecoration="none";n.innerHTML=p.html;var g=n.getElementsByTagName("SCRIPT");for(var m=0;m<g.length;m++){var r=document.createElement("SCRIPT");var q=g[m].attributes;for(var h=0;h<q.length;h++){r[q[h].nodeName]=q[h].value}if(g[m].innerHTML){r.text=g[m].innerHTML}g[m].parentNode.replaceChild(r,g[m])}o.parentNode.replaceChild(n,o)}}}}},getDataAttr:function(e){return"data-"+f.name+"-"+e},getEventName:function(e){return this.name+"-"+a+"-"+e},addEventListener:function(e,g){d.addEventListener(this.getEventName(e),g)},removeEventListener:function(e,g){d.removeEventListener(this.getEventName(e),g,true)},dispatchEvent:function(e,g){d.dispatchEvent(new CustomEvent(this.getEventName(e),{detail:g||{}}))}};f.main()}}catch(b){if(console.log){console.log(b)}}})(document,window);
-if(typeof org=="undefined"){var org={}}if(typeof org.openx=="undefined"){org.openx={}}if(typeof org.openx.util=="undefined"){org.openx.util={}}if(typeof org.openx.SWFObjectUtil=="undefined"){org.openx.SWFObjectUtil={}}org.openx.SWFObject=function(f,d,m,g,j,l,n,i,a,e){if(!document.getElementById){return}this.DETECT_KEY=e?e:"detectflash";this.skipDetect=org.openx.util.getRequestParameter(this.DETECT_KEY);this.params=new Object();this.variables=new Object();this.attributes=new Array();if(f){this.setAttribute("swf",f)}if(d){this.setAttribute("id",d)}if(m){this.setAttribute("width",m)}if(g){this.setAttribute("height",g)}if(j){this.setAttribute("version",new org.openx.PlayerVersion(j.toString().split(".")))}this.installedVer=org.openx.SWFObjectUtil.getPlayerVersion();if(!window.opera&&document.all&&this.installedVer.major>7){org.openx.SWFObject.doPrepUnload=true}if(l){this.addParam("bgcolor",l)}var b=n?n:"high";this.addParam("quality",b);var k=(i)?i:window.location;this.setAttribute("xiRedirectUrl",k);this.setAttribute("redirectUrl","");if(a){this.setAttribute("redirectUrl",a)}};org.openx.SWFObject.prototype={setAttribute:function(a,b){this.attributes[a]=b},getAttribute:function(a){return this.attributes[a]},addParam:function(a,b){this.params[a]=b},getParams:function(){return this.params},addVariable:function(a,b){this.variables[a]=b},getVariable:function(a){return this.variables[a]},getVariables:function(){return this.variables},getVariablePairs:function(){var a=new Array();var b;var c=this.getVariables();for(b in c){a[a.length]=b+"="+c[b]}return a},getSWFHTML:function(){var d="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){d='<embed type="application/x-shockwave-flash" src="'+this.getAttribute("swf")+'" width="'+this.getAttribute("width")+'" height="'+this.getAttribute("height")+'" style="'+this.getAttribute("style")+'"';d+=' id="'+this.getAttribute("id")+'" name="'+this.getAttribute("id")+'" ';var c=this.getParams();for(var a in c){d+=[a]+'="'+c[a]+'" '}var b=this.getVariablePairs().join("&");if(b.length>0){d+='flashvars="'+b+'"'}d+="/>"}else{d='<object id="'+this.getAttribute("id")+'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+this.getAttribute("width")+'" height="'+this.getAttribute("height")+'" style="'+this.getAttribute("style")+'">';d+='<param name="movie" value="'+this.getAttribute("swf")+'" />';var c=this.getParams();for(var a in c){d+='<param name="'+a+'" value="'+c[a]+'" />'}var b=this.getVariablePairs().join("&");if(b.length>0){d+='<param name="flashvars" value="'+b+'" />'}d+="</object>"}return d},write:function(a,b,d){if(this.skipDetect||this.installedVer.versionIsValid(this.getAttribute("version"))){var c=(typeof a=="string")?document.getElementById(a):a;c.innerHTML=this.getSWFHTML();this.logImpression(c,b);return true}else{if(this.getAttribute("redirectUrl")!=""){document.location.replace(this.getAttribute("redirectUrl"))}}this.logImpression(c,d);return false},logImpression:function(c,a){if(a){var b=document.createElement("IMG");b.style.position="absolute";b.style.width=0;b.src=a;c.appendChild(b)}}};org.openx.SWFObjectUtil.getPlayerVersion=function(){var c=new org.openx.PlayerVersion([0,0,0]);if(navigator.plugins&&navigator.mimeTypes.length){var a=navigator.plugins["Shockwave Flash"];if(a&&a.description){c=new org.openx.PlayerVersion(a.description.replace(/([a-zA-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."))}}else{if(navigator.userAgent&&navigator.userAgent.indexOf("Windows CE")>=0){var d=1;var b=3;while(d){try{b++;d=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+b);c=new org.openx.PlayerVersion([b,0,0])}catch(f){d=null}}}else{try{var d=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7")}catch(f){try{var d=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");c=new org.openx.PlayerVersion([6,0,21]);d.AllowScriptAccess="always"}catch(f){if(c.major==6){return c}}try{d=new ActiveXObject("ShockwaveFlash.ShockwaveFlash")}catch(f){}}if(d!=null){c=new org.openx.PlayerVersion(d.GetVariable("$version").split(" ")[1].split(","))}}}return c};org.openx.PlayerVersion=function(a){this.major=a[0]!=null?parseInt(a[0]):0;this.minor=a[1]!=null?parseInt(a[1]):0;this.rev=a[2]!=null?parseInt(a[2]):0};org.openx.PlayerVersion.prototype.versionIsValid=function(a){if(this.major<a.major){return false}if(this.major>a.major){return true}if(this.minor<a.minor){return false}if(this.minor>a.minor){return true}if(this.rev<a.rev){return false}return true};org.openx.util={getRequestParameter:function(d){var c=document.location.search||document.location.hash;if(d==null){return c}if(c){var b=c.substring(1).split("&");for(var a=0;a<b.length;a++){if(b[a].substring(0,b[a].indexOf("="))==d){return b[a].substring((b[a].indexOf("=")+1))}}}return""}};org.openx.SWFObjectUtil.cleanupSWFs=function(){var c=document.getElementsByTagName("OBJECT");for(var b=c.length-1;b>=0;b--){c[b].style.display="none";for(var a in c[b]){if(typeof c[b][a]=="function"){c[b][a]=function(){}}}}};if(org.openx.SWFObject.doPrepUnload){if(!org.openx.unloadSet){org.openx.SWFObjectUtil.prepUnload=function(){__flash_unloadHandler=function(){};__flash_savedUnloadHandler=function(){};window.attachEvent("onunload",org.openx.SWFObjectUtil.cleanupSWFs)};window.attachEvent("onbeforeunload",org.openx.SWFObjectUtil.prepUnload);org.openx.unloadSet=true}}if(!document.getElementById&&document.all){document.getElementById=function(a){return document.all[a]}}var getQueryParamValue=org.openx.util.getRequestParameter;var FlashObject=org.openx.SWFObject;var SWFObject=org.openx.SWFObject;document.mmm_fo=1;
\ No newline at end of file
+(function (d, c) {
+  var a = "5b200397ccf8a9353bf44ef99b45268c";
+  c.reviveAsync = c.reviveAsync || {};
+  (function (e) {
+    if (typeof e.CustomEvent === "function") {
+      return false;
+    }
+    function g(i, j) {
+      j = j || { bubbles: false, cancelable: false, detail: undefined };
+      var h = document.createEvent("CustomEvent");
+      h.initCustomEvent(i, j.bubbles, j.cancelable, j.detail);
+      return h;
+    }
+    g.prototype = e.Event.prototype;
+    e.CustomEvent = g;
+  })(c);
+  try {
+    if (!c.reviveAsync.hasOwnProperty(a)) {
+      var f = (c.reviveAsync[a] = {
+        id: Object.keys(c.reviveAsync).length,
+        name: "revive",
+        seq: 0,
+        main: function () {
+          var e = function () {
+            var g = false;
+            try {
+              if (!g) {
+                g = true;
+                d.removeEventListener("DOMContentLoaded", e, false);
+                c.removeEventListener("load", e, false);
+                f.addEventListener("start", f.start);
+                f.addEventListener("refresh", f.refresh);
+                f.dispatchEvent("start", { start: true });
+              }
+            } catch (h) {
+              console.log(h);
+            }
+          };
+          f.dispatchEvent("init");
+          if (d.readyState === "complete") {
+            setTimeout(e);
+          } else {
+            d.addEventListener("DOMContentLoaded", e, false);
+            c.addEventListener("load", e, false);
+          }
+        },
+        start: function (g) {
+          if (g.detail && g.detail.hasOwnProperty("start") && !g.detail.start) {
+            return;
+          }
+          f.removeEventListener("start", f.start);
+          f.dispatchEvent("refresh");
+        },
+        refresh: function (g) {
+          f.apply(f.detect());
+        },
+        ajax: function (e, g) {
+          var h = new XMLHttpRequest();
+          h.onreadystatechange = function () {
+            if (4 === this.readyState) {
+              if (200 === this.status) {
+                f.spc(JSON.parse(this.responseText));
+              }
+            }
+          };
+          this.dispatchEvent("send", g);
+          h.open("GET", e + "?" + f.encode(g).join("&"), true);
+          h.withCredentials = true;
+          h.send();
+        },
+        encode: function (m, n) {
+          var e = [],
+            h,
+            i;
+          for (h in m) {
+            if (m.hasOwnProperty(h)) {
+              var l = n ? n + "[" + h + "]" : h;
+              if (/^(string|number|boolean)$/.test(typeof m[h])) {
+                e.push(encodeURIComponent(l) + "=" + encodeURIComponent(m[h]));
+              } else {
+                var g = f.encode(m[h], l);
+                for (i in g) {
+                  e.push(g[i]);
+                }
+              }
+            }
+          }
+          return e;
+        },
+        apply: function (g) {
+          if (g.zones.length) {
+            var e =
+              "https:" === d.location.protocol
+                ? "https://ads.bitfly.at/www/delivery/asyncspc.php"
+                : "https://ads.bitfly.at/www/delivery/asyncspc.php";
+            g.zones = g.zones.join("|");
+            g.loc = d.location.href;
+            if (d.referrer) {
+              g.referer = d.referrer;
+            }
+            f.ajax(e, g);
+          }
+        },
+        detect: function () {
+          var e = d.querySelectorAll(
+            "ins[" + f.getDataAttr("id") + "='" + a + "']",
+          );
+          var l = { zones: [], prefix: f.name + "-" + f.id + "-" };
+          for (var r = 0; r < e.length; r++) {
+            var p = f.getDataAttr("zoneid"),
+              k = f.getDataAttr("seq"),
+              n = e[r],
+              s;
+            if (n.hasAttribute(k)) {
+              s = n.getAttribute(k);
+            } else {
+              s = f.seq++;
+              n.setAttribute(k, s);
+              n.id = l.prefix + s;
+            }
+            if (n.hasAttribute(p)) {
+              var o = f.getDataAttr("loaded"),
+                q = new RegExp("^" + f.getDataAttr("(.*)") + "$"),
+                g;
+              if (n.hasAttribute(o) && n.getAttribute(o)) {
+                continue;
+              }
+              n.setAttribute(f.getDataAttr("loaded"), "1");
+              for (var h = 0; h < n.attributes.length; h++) {
+                if ((g = n.attributes[h].name.match(q))) {
+                  if ("zoneid" === g[1]) {
+                    l.zones[s] = n.attributes[h].value;
+                  } else {
+                    if (!/^(id|seq|loaded)$/.test(g[1])) {
+                      l[g[1]] = n.attributes[h].value;
+                    }
+                  }
+                }
+              }
+            }
+          }
+          return l;
+        },
+        createFrame: function (h) {
+          var e = d.createElement("IFRAME"),
+            g = e.style;
+          e.scrolling = "no";
+          e.frameBorder = 0;
+          e.allow = "autoplay";
+          e.width = h.width > 0 ? h.width : 0;
+          e.height = h.height > 0 ? h.height : 0;
+          g.border = 0;
+          g.overflow = "hidden";
+          return e;
+        },
+        loadFrame: function (g, e) {
+          var h = g.contentDocument || g.contentWindow.document;
+          h.open();
+          h.writeln("<!DOCTYPE html>");
+          h.writeln("<html>");
+          h.writeln('<head><base target="_top"><meta charset="UTF-8"></head>');
+          h.writeln(
+            '<body border="0" margin="0" style="margin: 0; padding: 0">',
+          );
+          h.writeln(e);
+          h.writeln("</body>");
+          h.writeln("</html>");
+          h.close();
+        },
+        spc: function (l) {
+          this.dispatchEvent("receive", l);
+          for (var e in l) {
+            if (l.hasOwnProperty(e)) {
+              var p = l[e];
+              var o = d.getElementById(e);
+              if (o) {
+                var n = o.cloneNode(false);
+                if (p.iframeFriendly) {
+                  var k = f.createFrame(p);
+                  n.appendChild(k);
+                  o.parentNode.replaceChild(n, o);
+                  f.loadFrame(k, p.html);
+                } else {
+                  n.style.textDecoration = "none";
+                  n.innerHTML = p.html;
+                  var g = n.getElementsByTagName("SCRIPT");
+                  for (var m = 0; m < g.length; m++) {
+                    var r = document.createElement("SCRIPT");
+                    var q = g[m].attributes;
+                    for (var h = 0; h < q.length; h++) {
+                      r[q[h].nodeName] = q[h].value;
+                    }
+                    if (g[m].innerHTML) {
+                      r.text = g[m].innerHTML;
+                    }
+                    g[m].parentNode.replaceChild(r, g[m]);
+                  }
+                  o.parentNode.replaceChild(n, o);
+                }
+              }
+            }
+          }
+        },
+        getDataAttr: function (e) {
+          return "data-" + f.name + "-" + e;
+        },
+        getEventName: function (e) {
+          return this.name + "-" + a + "-" + e;
+        },
+        addEventListener: function (e, g) {
+          d.addEventListener(this.getEventName(e), g);
+        },
+        removeEventListener: function (e, g) {
+          d.removeEventListener(this.getEventName(e), g, true);
+        },
+        dispatchEvent: function (e, g) {
+          d.dispatchEvent(
+            new CustomEvent(this.getEventName(e), { detail: g || {} }),
+          );
+        },
+      });
+      f.main();
+    }
+  } catch (b) {
+    if (console.log) {
+      console.log(b);
+    }
+  }
+})(document, window);
+if (typeof org == "undefined") {
+  var org = {};
+}
+if (typeof org.openx == "undefined") {
+  org.openx = {};
+}
+if (typeof org.openx.util == "undefined") {
+  org.openx.util = {};
+}
+if (typeof org.openx.SWFObjectUtil == "undefined") {
+  org.openx.SWFObjectUtil = {};
+}
+org.openx.SWFObject = function (f, d, m, g, j, l, n, i, a, e) {
+  if (!document.getElementById) {
+    return;
+  }
+  this.DETECT_KEY = e ? e : "detectflash";
+  this.skipDetect = org.openx.util.getRequestParameter(this.DETECT_KEY);
+  this.params = new Object();
+  this.variables = new Object();
+  this.attributes = new Array();
+  if (f) {
+    this.setAttribute("swf", f);
+  }
+  if (d) {
+    this.setAttribute("id", d);
+  }
+  if (m) {
+    this.setAttribute("width", m);
+  }
+  if (g) {
+    this.setAttribute("height", g);
+  }
+  if (j) {
+    this.setAttribute(
+      "version",
+      new org.openx.PlayerVersion(j.toString().split(".")),
+    );
+  }
+  this.installedVer = org.openx.SWFObjectUtil.getPlayerVersion();
+  if (!window.opera && document.all && this.installedVer.major > 7) {
+    org.openx.SWFObject.doPrepUnload = true;
+  }
+  if (l) {
+    this.addParam("bgcolor", l);
+  }
+  var b = n ? n : "high";
+  this.addParam("quality", b);
+  var k = i ? i : window.location;
+  this.setAttribute("xiRedirectUrl", k);
+  this.setAttribute("redirectUrl", "");
+  if (a) {
+    this.setAttribute("redirectUrl", a);
+  }
+};
+org.openx.SWFObject.prototype = {
+  setAttribute: function (a, b) {
+    this.attributes[a] = b;
+  },
+  getAttribute: function (a) {
+    return this.attributes[a];
+  },
+  addParam: function (a, b) {
+    this.params[a] = b;
+  },
+  getParams: function () {
+    return this.params;
+  },
+  addVariable: function (a, b) {
+    this.variables[a] = b;
+  },
+  getVariable: function (a) {
+    return this.variables[a];
+  },
+  getVariables: function () {
+    return this.variables;
+  },
+  getVariablePairs: function () {
+    var a = new Array();
+    var b;
+    var c = this.getVariables();
+    for (b in c) {
+      a[a.length] = b + "=" + c[b];
+    }
+    return a;
+  },
+  getSWFHTML: function () {
+    var d = "";
+    if (
+      navigator.plugins &&
+      navigator.mimeTypes &&
+      navigator.mimeTypes.length
+    ) {
+      d =
+        '<embed type="application/x-shockwave-flash" src="' +
+        this.getAttribute("swf") +
+        '" width="' +
+        this.getAttribute("width") +
+        '" height="' +
+        this.getAttribute("height") +
+        '" style="' +
+        this.getAttribute("style") +
+        '"';
+      d +=
+        ' id="' +
+        this.getAttribute("id") +
+        '" name="' +
+        this.getAttribute("id") +
+        '" ';
+      var c = this.getParams();
+      for (var a in c) {
+        d += [a] + '="' + c[a] + '" ';
+      }
+      var b = this.getVariablePairs().join("&");
+      if (b.length > 0) {
+        d += 'flashvars="' + b + '"';
+      }
+      d += "/>";
+    } else {
+      d =
+        '<object id="' +
+        this.getAttribute("id") +
+        '" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="' +
+        this.getAttribute("width") +
+        '" height="' +
+        this.getAttribute("height") +
+        '" style="' +
+        this.getAttribute("style") +
+        '">';
+      d += '<param name="movie" value="' + this.getAttribute("swf") + '" />';
+      var c = this.getParams();
+      for (var a in c) {
+        d += '<param name="' + a + '" value="' + c[a] + '" />';
+      }
+      var b = this.getVariablePairs().join("&");
+      if (b.length > 0) {
+        d += '<param name="flashvars" value="' + b + '" />';
+      }
+      d += "</object>";
+    }
+    return d;
+  },
+  write: function (a, b, d) {
+    if (
+      this.skipDetect ||
+      this.installedVer.versionIsValid(this.getAttribute("version"))
+    ) {
+      var c = typeof a == "string" ? document.getElementById(a) : a;
+      c.innerHTML = this.getSWFHTML();
+      this.logImpression(c, b);
+      return true;
+    } else {
+      if (this.getAttribute("redirectUrl") != "") {
+        document.location.replace(this.getAttribute("redirectUrl"));
+      }
+    }
+    this.logImpression(c, d);
+    return false;
+  },
+  logImpression: function (c, a) {
+    if (a) {
+      var b = document.createElement("IMG");
+      b.style.position = "absolute";
+      b.style.width = 0;
+      b.src = a;
+      c.appendChild(b);
+    }
+  },
+};
+org.openx.SWFObjectUtil.getPlayerVersion = function () {
+  var c = new org.openx.PlayerVersion([0, 0, 0]);
+  if (navigator.plugins && navigator.mimeTypes.length) {
+    var a = navigator.plugins["Shockwave Flash"];
+    if (a && a.description) {
+      c = new org.openx.PlayerVersion(
+        a.description
+          .replace(/([a-zA-Z]|\s)+/, "")
+          .replace(/(\s+r|\s+b[0-9]+)/, ".")
+          .split("."),
+      );
+    }
+  } else {
+    if (navigator.userAgent && navigator.userAgent.indexOf("Windows CE") >= 0) {
+      var d = 1;
+      var b = 3;
+      while (d) {
+        try {
+          b++;
+          d = new ActiveXObject("ShockwaveFlash.ShockwaveFlash." + b);
+          c = new org.openx.PlayerVersion([b, 0, 0]);
+        } catch (f) {
+          d = null;
+        }
+      }
+    } else {
+      try {
+        var d = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
+      } catch (f) {
+        try {
+          var d = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
+          c = new org.openx.PlayerVersion([6, 0, 21]);
+          d.AllowScriptAccess = "always";
+        } catch (f) {
+          if (c.major == 6) {
+            return c;
+          }
+        }
+        try {
+          d = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
+        } catch (f) {}
+      }
+      if (d != null) {
+        c = new org.openx.PlayerVersion(
+          d.GetVariable("$version").split(" ")[1].split(","),
+        );
+      }
+    }
+  }
+  return c;
+};
+org.openx.PlayerVersion = function (a) {
+  this.major = a[0] != null ? parseInt(a[0]) : 0;
+  this.minor = a[1] != null ? parseInt(a[1]) : 0;
+  this.rev = a[2] != null ? parseInt(a[2]) : 0;
+};
+org.openx.PlayerVersion.prototype.versionIsValid = function (a) {
+  if (this.major < a.major) {
+    return false;
+  }
+  if (this.major > a.major) {
+    return true;
+  }
+  if (this.minor < a.minor) {
+    return false;
+  }
+  if (this.minor > a.minor) {
+    return true;
+  }
+  if (this.rev < a.rev) {
+    return false;
+  }
+  return true;
+};
+org.openx.util = {
+  getRequestParameter: function (d) {
+    var c = document.location.search || document.location.hash;
+    if (d == null) {
+      return c;
+    }
+    if (c) {
+      var b = c.substring(1).split("&");
+      for (var a = 0; a < b.length; a++) {
+        if (b[a].substring(0, b[a].indexOf("=")) == d) {
+          return b[a].substring(b[a].indexOf("=") + 1);
+        }
+      }
+    }
+    return "";
+  },
+};
+org.openx.SWFObjectUtil.cleanupSWFs = function () {
+  var c = document.getElementsByTagName("OBJECT");
+  for (var b = c.length - 1; b >= 0; b--) {
+    c[b].style.display = "none";
+    for (var a in c[b]) {
+      if (typeof c[b][a] == "function") {
+        c[b][a] = function () {};
+      }
+    }
+  }
+};
+if (org.openx.SWFObject.doPrepUnload) {
+  if (!org.openx.unloadSet) {
+    org.openx.SWFObjectUtil.prepUnload = function () {
+      __flash_unloadHandler = function () {};
+      __flash_savedUnloadHandler = function () {};
+      window.attachEvent("onunload", org.openx.SWFObjectUtil.cleanupSWFs);
+    };
+    window.attachEvent("onbeforeunload", org.openx.SWFObjectUtil.prepUnload);
+    org.openx.unloadSet = true;
+  }
+}
+if (!document.getElementById && document.all) {
+  document.getElementById = function (a) {
+    return document.all[a];
+  };
+}
+var getQueryParamValue = org.openx.util.getRequestParameter;
+var FlashObject = org.openx.SWFObject;
+var SWFObject = org.openx.SWFObject;
+document.mmm_fo = 1;
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/dashboards.json b/frontend/public/mock/notifications/dashboards.json
index 0340b37ae..31658d54b 100644
--- a/frontend/public/mock/notifications/dashboards.json
+++ b/frontend/public/mock/notifications/dashboards.json
@@ -13,11 +13,7 @@
         "type": "validator",
         "count": 134
       },
-      "notification": [
-        "Proposal missed",
-        "Back online",
-        "Foo Bar"
-      ]
+      "notification": ["Proposal missed", "Back online", "Foo Bar"]
     },
     {
       "group_id": 122,
@@ -29,11 +25,7 @@
         "type": "account",
         "count": 1
       },
-      "notification": [
-        "Proposal missed",
-        "Back online",
-        "Foo Bar"
-      ]
+      "notification": ["Proposal missed", "Back online", "Foo Bar"]
     },
     {
       "group_id": 1,
@@ -45,11 +37,7 @@
         "type": "validator",
         "count": 134
       },
-      "notification": [
-        "Proposal missed",
-        "Back online",
-        "Foo Bar"
-      ]
+      "notification": ["Proposal missed", "Back online", "Foo Bar"]
     }
   ]
 }
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 0db0f3102..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'
@@ -36,7 +45,9 @@ export function useUserDashboardStore() {
 
   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
@@ -69,10 +80,18 @@ 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],
@@ -81,23 +100,39 @@ export function useUserDashboardStore() {
       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],
@@ -106,7 +141,10 @@ export function useUserDashboardStore() {
       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 || [],
@@ -126,14 +164,24 @@ export function useUserDashboardStore() {
       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],
       }
     }
     else {
-      const cd: CookieDashboard = { id: COOKIE_DASHBOARD_ID.ACCOUNT, name: '', ...dashboards.value?.account_dashboards?.[0], hash }
+      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],
@@ -144,7 +192,9 @@ export function useUserDashboardStore() {
 
   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)
@@ -152,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 {
diff --git a/frontend/stores/dashboard/useValidatorDashboardBlocksStore.ts b/frontend/stores/dashboard/useValidatorDashboardBlocksStore.ts
index 60d3a538f..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() {
   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 5a3551b81..740da4ec9 100644
--- a/frontend/stores/dashboard/useValidatorDashboardClDepositsStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardClDepositsStore.ts
@@ -10,7 +10,8 @@ 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>()
 
diff --git a/frontend/stores/dashboard/useValidatorDashboardElDepositsStore.ts b/frontend/stores/dashboard/useValidatorDashboardElDepositsStore.ts
index bec5b8847..c83689619 100644
--- a/frontend/stores/dashboard/useValidatorDashboardElDepositsStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardElDepositsStore.ts
@@ -10,7 +10,8 @@ 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>()
 
diff --git a/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts b/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts
index 6e1be323d..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'
 
@@ -12,7 +15,8 @@ const validatorOverviewStore = defineStore('validator_overview_store', () => {
 export function useValidatorDashboardOverviewStore() {
   const { fetch } = useCustomFetch()
   const { data } = storeToRefs(validatorOverviewStore())
-  const { clearCache: clearRewardDetails } = useAllValidatorDashboardRewardsDetailsStore()
+  const { clearCache: clearRewardDetails }
+    = useAllValidatorDashboardRewardsDetailsStore()
 
   const overview = computed(() => data.value)
 
@@ -22,7 +26,11 @@ export function useValidatorDashboardOverviewStore() {
       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()
@@ -45,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(() => {
@@ -55,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 972569a0b..87fe94410 100644
--- a/frontend/stores/dashboard/useValidatorDashboardRewardsDetailsStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardRewardsDetailsStore.ts
@@ -1,14 +1,24 @@
 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())
 
@@ -17,11 +27,16 @@ export const useValidatorDashboardRewardsDetailsStore = (dashboardKey: Dashboard
   }
 
   async function getDetails() {
-    // Rewards of an epoch will only change when validators changed (see useValidatorDashboardOverviewStore), so we can cache data
+    // 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
   }
diff --git a/frontend/stores/dashboard/useValidatorDashboardRewardsStore.ts b/frontend/stores/dashboard/useValidatorDashboardRewardsStore.ts
index e4da7c4a2..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() {
   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 ce8f132a7..f835986bc 100644
--- a/frontend/stores/dashboard/useValidatorDashboardSummaryDetailsStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardSummaryDetailsStore.ts
@@ -1,18 +1,29 @@
 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() {
     return `${dashboardKey}_${groupId}`
@@ -26,7 +37,11 @@ export function useValidatorDashboardSummaryDetailsStore(dashboardKey: Dashboard
       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 73a85bd2d..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() {
   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 e21bfb6eb..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() {
   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
@@ -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 1772c895d..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'
 
@@ -19,7 +22,11 @@ export function useValidatorSlotVizStore() {
     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.
@@ -30,8 +37,7 @@ export function useValidatorSlotVizStore() {
           slot: s.slot,
           status: s.status,
         })),
-      }),
-      )
+      }))
     }
     else {
       data.value = res.data
diff --git a/frontend/stores/notifications/useNotificationsDashboardStore.ts b/frontend/stores/notifications/useNotificationsDashboardStore.ts
index b247e9a58..26b89773c 100644
--- a/frontend/stores/notifications/useNotificationsDashboardStore.ts
+++ b/frontend/stores/notifications/useNotificationsDashboardStore.ts
@@ -3,23 +3,42 @@ import { API_PATH } from '~/types/customFetch'
 import type { TableQueryParams } from '~/types/datatable'
 import type { NotifcationDashboardResponse } from '~/types/notifications/dashboards'
 
-const notificationsDashboardStore = defineStore('notifications-dashboard-store', () => {
-  const data = ref<NotifcationDashboardResponse | undefined>()
-  return { data }
-})
+const notificationsDashboardStore = defineStore(
+  'notifications-dashboard-store',
+  () => {
+    const data = ref<NotifcationDashboardResponse | undefined>()
+    return { data }
+  },
+)
 
 export function useNotificationsDashboardStore() {
   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: 'dashboard:desc' }, 10)
+  const {
+    query,
+    pendingQuery,
+    cursor,
+    pageSize,
+    onSort,
+    setCursor,
+    setPageSize,
+    setSearch,
+    setStoredQuery,
+    isStoredQuery,
+  } = useTableQuery({ limit: 10, sort: 'dashboard:desc' }, 10)
   const isLoading = ref(false)
 
   async function loadNotificationsDashboards(q: TableQueryParams) {
     isLoading.value = true
     setStoredQuery(q)
-    const result = await fetch<NotifcationDashboardResponse>(API_PATH.NOTIFICATIONS_DASHBOARDS, undefined, undefined, q)
+    const result = await fetch<NotifcationDashboardResponse>(
+      API_PATH.NOTIFICATIONS_DASHBOARDS,
+      undefined,
+      undefined,
+      q,
+    )
 
     isLoading.value = false
     if (!isStoredQuery(q)) {
@@ -34,11 +53,15 @@ export function useNotificationsDashboardStore() {
     return data.value
   })
 
-  watch(query, (q) => {
-    if (q) {
-      isLoggedIn.value && loadNotificationsDashboards(q)
-    }
-  }, { immediate: true })
+  watch(
+    query,
+    (q) => {
+      if (q) {
+        isLoggedIn.value && loadNotificationsDashboards(q)
+      }
+    },
+    { immediate: true },
+  )
 
   return {
     cursor,
diff --git a/frontend/stores/useAdConfigurationStore.ts b/frontend/stores/useAdConfigurationStore.ts
index a8f11eaf9..a55124189 100644
--- a/frontend/stores/useAdConfigurationStore.ts
+++ b/frontend/stores/useAdConfigurationStore.ts
@@ -3,7 +3,7 @@ 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 }
 })
 
@@ -15,7 +15,11 @@ export function useAdConfigurationStore() {
 
   async function refreshAdConfigs(route: string) {
     const keys = ['global', route].join(',')
-    const res = await fetch<AdConfiguration[]>(API_PATH.AD_CONFIGURATIONs, undefined, { keys })
+    const res = await fetch<AdConfiguration[]>(
+      API_PATH.AD_CONFIGURATIONs,
+      undefined,
+      { keys },
+    )
     const newConfigurations: Record<string, AdConfiguration[]> = {}
     res.forEach((config) => {
       if (!newConfigurations[config.key]) {
diff --git a/frontend/stores/useLatestStateStore.ts b/frontend/stores/useLatestStateStore.ts
index 437370537..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', () => {
@@ -15,7 +18,9 @@ export function useLatestStateStore() {
 
   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
       }
diff --git a/frontend/stores/useNetworkStore.ts b/frontend/stores/useNetworkStore.ts
index 428fc84ef..ec916acfe 100644
--- a/frontend/stores/useNetworkStore.ts
+++ b/frontend/stores/useNetworkStore.ts
@@ -14,7 +14,9 @@ const store = defineStore('network-store', () => {
     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 }
 })
@@ -28,11 +30,15 @@ export function useNetworkStore() {
   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 {
@@ -41,12 +47,19 @@ export function useNetworkStore() {
   }
 
   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 {
     // 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) {
diff --git a/frontend/stores/useProductsStore.ts b/frontend/stores/useProductsStore.ts
index 78716fc96..f66fa77cc 100644
--- a/frontend/stores/useProductsStore.ts
+++ b/frontend/stores/useProductsStore.ts
@@ -1,10 +1,17 @@
 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 }
 })
@@ -17,16 +24,25 @@ 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() {
@@ -34,11 +50,19 @@ export function useProductsStore() {
       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/useUserStore.ts b/frontend/stores/useUserStore.ts
index 0be2ae10d..ca66bc1d2 100644
--- a/frontend/stores/useUserStore.ts
+++ b/frontend/stores/useUserStore.ts
@@ -29,7 +29,13 @@ export function useUserStore() {
 
   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
     }
diff --git a/frontend/types/api/block.ts b/frontend/types/api/block.ts
index 56b0ff31b..c9de6fb15 100644
--- a/frontend/types/api/block.ts
+++ b/frontend/types/api/block.ts
@@ -1,6 +1,6 @@
 // Code generated by tygo. DO NOT EDIT.
 /* eslint-disable */
-import type { ApiDataResponse, Hash, Address, ClElValue } from './common'
+import type { ApiDataResponse, Hash, Address, ClElValue } from "./common";
 
 //////////
 // source: block.go
@@ -101,8 +101,8 @@ export interface BlockOverview {
   proposer_reward?: ClElValue<string /* decimal.Decimal */>;
   proposer_reward_recipient?: Address;
   status?: {
-    proposal: 'proposed' | 'orphaned' | 'missed' | 'scheduled';
-    finalized: 'finalized' | 'justified' | 'not_finalized';
+    proposal: "proposed" | "orphaned" | "missed" | "scheduled";
+    finalized: "finalized" | "justified" | "not_finalized";
   };
   priority_fees?: string /* decimal.Decimal */;
   transactions?: {
@@ -123,20 +123,24 @@ export interface BlockTransactionTableRow {
   block: number /* uint64 */;
   age: number /* uint64 */;
   from: Address;
-  type: 'out' | 'in' | 'out_in' | 'self' | 'contract';
+  type: "out" | "in" | "out_in" | "self" | "contract";
   to: Address;
   value: string /* decimal.Decimal */;
   gas_price: string /* decimal.Decimal */;
   tx_fee: string /* decimal.Decimal */;
 }
-export type InternalGetBlockTransactionsResponse = ApiDataResponse<BlockTransactionTableRow[]>;
+export type InternalGetBlockTransactionsResponse = ApiDataResponse<
+  BlockTransactionTableRow[]
+>;
 export interface BlockVoteTableRow {
   allocated_slot: number /* uint64 */;
   committee: number /* uint64 */;
   included_in_block: number /* uint64 */;
   validators: number /* uint64 */[];
 }
-export type InternalGetBlockVotesResponse = ApiDataResponse<BlockVoteTableRow[]>;
+export type InternalGetBlockVotesResponse = ApiDataResponse<
+  BlockVoteTableRow[]
+>;
 export interface EpochInfo {
   epoch: number /* uint64 */;
   block_root: Hash;
@@ -151,7 +155,9 @@ export interface BlockAttestationTableRow {
   target: EpochInfo;
   signature: Hash;
 }
-export type InternalGetBlockAttestationsResponse = ApiDataResponse<BlockAttestationTableRow[]>;
+export type InternalGetBlockAttestationsResponse = ApiDataResponse<
+  BlockAttestationTableRow[]
+>;
 export interface BlockWithdrawalTableRow {
   /**
    * no design present yet, TODO confirm this
@@ -163,19 +169,25 @@ export interface BlockWithdrawalTableRow {
   recipient: Address;
   amount: string /* decimal.Decimal */;
 }
-export type InternalGetBlockWtihdrawalsResponse = ApiDataResponse<BlockWithdrawalTableRow[]>;
+export type InternalGetBlockWtihdrawalsResponse = ApiDataResponse<
+  BlockWithdrawalTableRow[]
+>;
 export interface BlockBlsChangeTableRow {
   index: number /* uint64 */;
   signature: Hash;
   bls_pubkey: Hash;
   new_withdrawal_address: Address;
 }
-export type InternalGetBlockBlsChangesResponse = ApiDataResponse<BlockBlsChangeTableRow[]>;
+export type InternalGetBlockBlsChangesResponse = ApiDataResponse<
+  BlockBlsChangeTableRow[]
+>;
 export interface BlockVoluntaryExitTableRow {
   validator: number /* uint64 */;
   signature: Hash;
 }
-export type InternalGetBlockVoluntaryExitsResponse = ApiDataResponse<BlockVoluntaryExitTableRow[]>;
+export type InternalGetBlockVoluntaryExitsResponse = ApiDataResponse<
+  BlockVoluntaryExitTableRow[]
+>;
 export interface BlockBlobTableRow {
   versioned_hash: Hash;
   commitment: Hash;
@@ -185,4 +197,6 @@ export interface BlockBlobTableRow {
   block: number /* uint64 */;
   data: string;
 }
-export type InternalGetBlockBlobsResponse = ApiDataResponse<BlockBlobTableRow[]>;
+export type InternalGetBlockBlobsResponse = ApiDataResponse<
+  BlockBlobTableRow[]
+>;
diff --git a/frontend/types/api/common.ts b/frontend/types/api/common.ts
index ecce7231e..166456c1d 100644
--- a/frontend/types/api/common.ts
+++ b/frontend/types/api/common.ts
@@ -57,21 +57,27 @@ export interface PercentageDetails<T extends any> {
   min_value: T;
   max_value: T;
 }
-export interface ChartSeries<I extends number /* int */ | string, D extends number /* float64 */ | string /* decimal.Decimal */> {
+export interface ChartSeries<
+  I extends number /* int */ | string,
+  D extends number /* float64 */ | string /* decimal.Decimal */,
+> {
   id: I; // id may be a string or an int
   property?: string; // for stacking bar charts
   data: D[]; // y-axis values
 }
-export interface ChartData<I extends number /* int */ | string, D extends number /* float64 */ | string /* decimal.Decimal */> {
+export interface ChartData<
+  I extends number /* int */ | string,
+  D extends number /* float64 */ | string /* decimal.Decimal */,
+> {
   categories: number /* uint64 */[]; // x-axis
   series: ChartSeries<I, D>[];
 }
 export interface ValidatorHistoryEvent {
-  status: 'success' | 'partial' | 'failed';
+  status: "success" | "partial" | "failed";
   income: string /* decimal.Decimal */;
 }
 export interface ValidatorHistoryProposal {
-  status: 'success' | 'partial' | 'failed';
+  status: "success" | "partial" | "failed";
   el_income: string /* decimal.Decimal */;
   cl_attestation_inclusion_income: string /* decimal.Decimal */;
   cl_sync_inclusion_income: string /* decimal.Decimal */;
diff --git a/frontend/types/api/dashboard.ts b/frontend/types/api/dashboard.ts
index 37fa19546..f5c218836 100644
--- a/frontend/types/api/dashboard.ts
+++ b/frontend/types/api/dashboard.ts
@@ -1,6 +1,6 @@
 // Code generated by tygo. DO NOT EDIT.
 /* eslint-disable */
-import type { VDBPublicId, ApiDataResponse } from './common'
+import type { VDBPublicId, ApiDataResponse } from "./common";
 
 //////////
 // source: dashboard.go
@@ -14,7 +14,7 @@ export interface ValidatorDashboard {
   name: string;
   public_ids?: VDBPublicId[];
   is_archived: boolean;
-  archived_reason?: 'dashboard_limit' | 'validator_limit' | 'group_limit';
+  archived_reason?: "dashboard_limit" | "validator_limit" | "group_limit";
   validator_count: number /* uint64 */;
   group_count: number /* uint64 */;
 }
diff --git a/frontend/types/api/latest_state.ts b/frontend/types/api/latest_state.ts
index 3797bfb76..1becf32e8 100644
--- a/frontend/types/api/latest_state.ts
+++ b/frontend/types/api/latest_state.ts
@@ -1,6 +1,6 @@
 // Code generated by tygo. DO NOT EDIT.
 /* eslint-disable */
-import type { ApiDataResponse } from './common'
+import type { ApiDataResponse } from "./common";
 
 //////////
 // source: latest_state.go
diff --git a/frontend/types/api/notifications.ts b/frontend/types/api/notifications.ts
index 568641564..3baf46315 100644
--- a/frontend/types/api/notifications.ts
+++ b/frontend/types/api/notifications.ts
@@ -1,6 +1,12 @@
 // Code generated by tygo. DO NOT EDIT.
 /* eslint-disable */
-import type { ApiDataResponse, ApiPagingResponse, IndexBlocks, Address, Hash } from './common'
+import type {
+  ApiDataResponse,
+  ApiPagingResponse,
+  IndexBlocks,
+  Address,
+  Hash,
+} from "./common";
 
 //////////
 // source: notifications.go
@@ -30,7 +36,8 @@ export interface NotificationOverviewData {
   rocket_pool_subscription_count: number /* uint64 */;
   networks_subscription_count: number /* uint64 */;
 }
-export type InternalGetUserNotificationsResponse = ApiDataResponse<NotificationOverviewData>;
+export type InternalGetUserNotificationsResponse =
+  ApiDataResponse<NotificationOverviewData>;
 /**
  * ------------------------------------------------------------
  * Dashboards Table
@@ -45,7 +52,8 @@ export interface NotificationDashboardsTableRow {
   entity_count: number /* uint64 */;
   event_types: string[];
 }
-export type InternalGetUserNotificationDashboardsResponse = ApiPagingResponse<NotificationDashboardsTableRow>;
+export type InternalGetUserNotificationDashboardsResponse =
+  ApiPagingResponse<NotificationDashboardsTableRow>;
 export interface NotificationEventGroup {
   group_name: string;
   dashboard_id: number /* uint64 */;
@@ -74,7 +82,8 @@ export interface NotificationValidatorDashboardDetail {
   validator_back_online: NotificationEventValidatorBackOnline[];
   group_back_online: NotificationEventGroupBackOnline[];
 }
-export type InternalGetUserNotificationsValidatorDashboardResponse = ApiDataResponse<NotificationValidatorDashboardDetail>;
+export type InternalGetUserNotificationsValidatorDashboardResponse =
+  ApiDataResponse<NotificationValidatorDashboardDetail>;
 export interface NotificationEventExecution {
   address: Address;
   amount: string /* decimal.Decimal */;
@@ -88,7 +97,8 @@ export interface NotificationAccountDashboardDetail {
   erc721_token_transfers: NotificationEventExecution[];
   erc1155_token_transfers: NotificationEventExecution[];
 }
-export type InternalGetUserNotificationsAccountDashboardResponse = ApiDataResponse<NotificationAccountDashboardDetail>;
+export type InternalGetUserNotificationsAccountDashboardResponse =
+  ApiDataResponse<NotificationAccountDashboardDetail>;
 /**
  * ------------------------------------------------------------
  * Machines Table
@@ -99,7 +109,8 @@ export interface NotificationMachinesTableRow {
   event_type: string;
   timestamp: number /* int64 */;
 }
-export type InternalGetUserNotificationMachinesResponse = ApiPagingResponse<NotificationMachinesTableRow>;
+export type InternalGetUserNotificationMachinesResponse =
+  ApiPagingResponse<NotificationMachinesTableRow>;
 /**
  * ------------------------------------------------------------
  * Clients Table
@@ -109,7 +120,8 @@ export interface NotificationClientsTableRow {
   version: string;
   timestamp: number /* int64 */;
 }
-export type InternalGetUserNotificationClientsResponse = ApiPagingResponse<NotificationClientsTableRow>;
+export type InternalGetUserNotificationClientsResponse =
+  ApiPagingResponse<NotificationClientsTableRow>;
 /**
  * ------------------------------------------------------------
  * Rocket Pool Table
@@ -120,7 +132,8 @@ export interface NotificationRocketPoolTableRow {
   alert_value?: number /* float64 */; // only for some notification types, e.g. max collateral
   node_address: Hash;
 }
-export type InternalGetUserNotificationRocketPoolResponse = ApiPagingResponse<NotificationRocketPoolTableRow>;
+export type InternalGetUserNotificationRocketPoolResponse =
+  ApiPagingResponse<NotificationRocketPoolTableRow>;
 /**
  * ------------------------------------------------------------
  * Networks Table
@@ -131,7 +144,8 @@ export interface NotificationNetworksTableRow {
   event_type: string;
   alert_value: string /* decimal.Decimal */; // wei string for gas alerts, otherwise percentage (0-1) for participation rate
 }
-export type InternalGetUserNotificationNetworksResponse = ApiPagingResponse<NotificationNetworksTableRow>;
+export type InternalGetUserNotificationNetworksResponse =
+  ApiPagingResponse<NotificationNetworksTableRow>;
 /**
  * ------------------------------------------------------------
  * Notification Settings
@@ -145,14 +159,16 @@ export interface NotificationNetwork {
   chain_id: number /* uint64 */;
   settings: NotificationSettingsNetwork;
 }
-export type InternalPutUserNotificationSettingsNetworksResponse = ApiDataResponse<NotificationNetwork>;
+export type InternalPutUserNotificationSettingsNetworksResponse =
+  ApiDataResponse<NotificationNetwork>;
 export interface NotificationPairedDevice {
   id: string;
   paired_timestamp: number /* int64 */;
   name?: string;
   is_notifications_enabled: boolean;
 }
-export type InternalPutUserNotificationSettingsPairedDevicesResponse = ApiDataResponse<NotificationPairedDevice>;
+export type InternalPutUserNotificationSettingsPairedDevicesResponse =
+  ApiDataResponse<NotificationPairedDevice>;
 export interface NotificationSettingsGeneral {
   do_not_disturb_timestamp: number /* int64 */; // notifications are disabled until this timestamp
   is_email_notifications_enabled: boolean;
@@ -166,13 +182,15 @@ export interface NotificationSettingsGeneral {
   rocket_pool_max_collateral_threshold: number /* float64 */; // 0 means disabled
   rocket_pool_min_collateral_threshold: number /* float64 */; // 0 means disabled
 }
-export type InternalPutUserNotificationSettingsGeneralResponse = ApiDataResponse<NotificationSettingsGeneral>;
+export type InternalPutUserNotificationSettingsGeneralResponse =
+  ApiDataResponse<NotificationSettingsGeneral>;
 export interface NotificationSettings {
   general_settings: NotificationSettingsGeneral;
   networks: NotificationNetwork[];
   paired_devices: NotificationPairedDevice[];
 }
-export type InternalGetUserNotificationSettingsResponse = ApiDataResponse<NotificationSettings>;
+export type InternalGetUserNotificationSettingsResponse =
+  ApiDataResponse<NotificationSettings>;
 export interface NotificationSettingsValidatorDashboard {
   webhook_url: string;
   is_webhook_discord_enabled: boolean;
@@ -186,7 +204,8 @@ export interface NotificationSettingsValidatorDashboard {
   is_withdrawal_processed_subscribed: boolean;
   is_slashed_subscribed: boolean;
 }
-export type InternalPutUserNotificationSettingsValidatorDashboardResponse = ApiDataResponse<NotificationSettingsValidatorDashboard>;
+export type InternalPutUserNotificationSettingsValidatorDashboardResponse =
+  ApiDataResponse<NotificationSettingsValidatorDashboard>;
 export interface NotificationSettingsAccountDashboard {
   webhook_url: string;
   is_webhook_discord_enabled: boolean;
@@ -199,7 +218,8 @@ export interface NotificationSettingsAccountDashboard {
   is_erc721_token_transfers_subscribed: boolean;
   is_erc1155_token_transfers_subscribed: boolean;
 }
-export type InternalPutUserNotificationSettingsAccountDashboardResponse = ApiDataResponse<NotificationSettingsAccountDashboard>;
+export type InternalPutUserNotificationSettingsAccountDashboardResponse =
+  ApiDataResponse<NotificationSettingsAccountDashboard>;
 export interface NotificationSettingsDashboardsTableRow {
   is_account_dashboard: boolean; // if false it's a validator dashboard
   dashboard_id: number /* uint64 */;
@@ -208,7 +228,10 @@ export interface NotificationSettingsDashboardsTableRow {
   /**
    * if it's a validator dashboard, SubscribedEvents is NotificationSettingsAccountDashboard, otherwise NotificationSettingsValidatorDashboard
    */
-  settings: NotificationSettingsAccountDashboard | NotificationSettingsValidatorDashboard;
+  settings:
+    | NotificationSettingsAccountDashboard
+    | NotificationSettingsValidatorDashboard;
   chain_ids: number /* uint64 */[];
 }
-export type InternalGetUserNotificationSettingsDashboardsResponse = ApiPagingResponse<NotificationSettingsDashboardsTableRow>;
+export type InternalGetUserNotificationSettingsDashboardsResponse =
+  ApiPagingResponse<NotificationSettingsDashboardsTableRow>;
diff --git a/frontend/types/api/slot_viz.ts b/frontend/types/api/slot_viz.ts
index 3bc44e3c1..9c95c3ece 100644
--- a/frontend/types/api/slot_viz.ts
+++ b/frontend/types/api/slot_viz.ts
@@ -1,6 +1,6 @@
 // Code generated by tygo. DO NOT EDIT.
 /* eslint-disable */
-import type { ApiDataResponse } from './common'
+import type { ApiDataResponse } from "./common";
 
 //////////
 // source: slot_viz.go
@@ -34,7 +34,7 @@ export interface VDBSlotVizStatus<T extends any> {
 }
 export interface VDBSlotVizSlot {
   slot: number /* uint64 */;
-  status: 'proposed' | 'missed' | 'scheduled' | 'orphaned';
+  status: "proposed" | "missed" | "scheduled" | "orphaned";
   proposal?: VDBSlotVizTuple;
   attestations?: VDBSlotVizStatus<VDBSlotVizDuty>;
   sync?: VDBSlotVizStatus<VDBSlotVizDuty>;
@@ -42,8 +42,10 @@ export interface VDBSlotVizSlot {
 }
 export interface SlotVizEpoch {
   epoch: number /* uint64 */;
-  state?: 'scheduled' | 'head' | 'justifying' | 'justified' | 'finalized'; // all on landing page, only 'head' on dashboard page
+  state?: "scheduled" | "head" | "justifying" | "justified" | "finalized"; // all on landing page, only 'head' on dashboard page
   progress?: number /* float64 */; // only on landing page
   slots?: VDBSlotVizSlot[]; // only on dashboard page
 }
-export type InternalGetValidatorDashboardSlotVizResponse = ApiDataResponse<SlotVizEpoch[]>;
+export type InternalGetValidatorDashboardSlotVizResponse = ApiDataResponse<
+  SlotVizEpoch[]
+>;
diff --git a/frontend/types/api/user.ts b/frontend/types/api/user.ts
index 41a56eeae..74b5d565e 100644
--- a/frontend/types/api/user.ts
+++ b/frontend/types/api/user.ts
@@ -1,6 +1,6 @@
 // Code generated by tygo. DO NOT EDIT.
 /* eslint-disable */
-import type { ApiDataResponse, ChartHistorySeconds } from './common'
+import type { ApiDataResponse, ChartHistorySeconds } from "./common";
 
 //////////
 // source: user.go
diff --git a/frontend/types/api/validator_dashboard.ts b/frontend/types/api/validator_dashboard.ts
index 45493dd95..7e6229475 100644
--- a/frontend/types/api/validator_dashboard.ts
+++ b/frontend/types/api/validator_dashboard.ts
@@ -1,6 +1,20 @@
 // Code generated by tygo. DO NOT EDIT.
 /* eslint-disable */
-import type { PeriodicValues, ClElValue, ChartHistorySeconds, ApiDataResponse, StatusCount, ApiPagingResponse, Luck, ChartData, ValidatorHistoryDuties, Address, PubKey, Hash, PercentageDetails } from './common'
+import type {
+  PeriodicValues,
+  ClElValue,
+  ChartHistorySeconds,
+  ApiDataResponse,
+  StatusCount,
+  ApiPagingResponse,
+  Luck,
+  ChartData,
+  ValidatorHistoryDuties,
+  Address,
+  PubKey,
+  Hash,
+  PercentageDetails,
+} from "./common";
 
 //////////
 // source: validator_dashboard.go
@@ -30,7 +44,8 @@ export interface VDBOverviewData {
   apr: PeriodicValues<ClElValue<number /* float64 */>>;
   chart_history_seconds: ChartHistorySeconds;
 }
-export type InternalGetValidatorDashboardResponse = ApiDataResponse<VDBOverviewData>;
+export type InternalGetValidatorDashboardResponse =
+  ApiDataResponse<VDBOverviewData>;
 export interface VDBPostArchivingReturnData {
   id: number /* uint64 */;
   is_archived: boolean;
@@ -55,7 +70,8 @@ export interface VDBSummaryTableRow {
   proposals: StatusCount;
   reward: ClElValue<string /* decimal.Decimal */>;
 }
-export type InternalGetValidatorDashboardSummaryResponse = ApiPagingResponse<VDBSummaryTableRow>;
+export type InternalGetValidatorDashboardSummaryResponse =
+  ApiPagingResponse<VDBSummaryTableRow>;
 export interface VDBGroupSummaryColumnItem {
   status_count: StatusCount;
   validators?: number /* uint64 */[];
@@ -88,8 +104,11 @@ export interface VDBGroupSummaryData {
     collateral: number /* float64 */;
   };
 }
-export type InternalGetValidatorDashboardGroupSummaryResponse = ApiDataResponse<VDBGroupSummaryData>;
-export type InternalGetValidatorDashboardSummaryChartResponse = ApiDataResponse<ChartData<number /* int */, number /* float64 */>>; // line chart, series id is group id
+export type InternalGetValidatorDashboardGroupSummaryResponse =
+  ApiDataResponse<VDBGroupSummaryData>;
+export type InternalGetValidatorDashboardSummaryChartResponse = ApiDataResponse<
+  ChartData<number /* int */, number /* float64 */>
+>; // line chart, series id is group id
 /**
  * ------------------------------------------------------------
  * Summary Validators
@@ -99,10 +118,28 @@ export interface VDBSummaryValidator {
   duty_objects?: number /* uint64 */[];
 }
 export interface VDBSummaryValidatorsData {
-  category: 'deposited' | 'online' | 'offline' | 'slashing' | 'slashed' | 'exited' | 'withdrawn' | 'pending' | 'exiting' | 'withdrawing' | 'sync_current' | 'sync_upcoming' | 'sync_past' | 'has_slashed' | 'got_slashed' | 'proposal_proposed' | 'proposal_missed';
+  category:
+    | "deposited"
+    | "online"
+    | "offline"
+    | "slashing"
+    | "slashed"
+    | "exited"
+    | "withdrawn"
+    | "pending"
+    | "exiting"
+    | "withdrawing"
+    | "sync_current"
+    | "sync_upcoming"
+    | "sync_past"
+    | "has_slashed"
+    | "got_slashed"
+    | "proposal_proposed"
+    | "proposal_missed";
   validators: VDBSummaryValidator[];
 }
-export type InternalGetValidatorDashboardSummaryValidatorsResponse = ApiDataResponse<VDBSummaryValidatorsData[]>;
+export type InternalGetValidatorDashboardSummaryValidatorsResponse =
+  ApiDataResponse<VDBSummaryValidatorsData[]>;
 /**
  * ------------------------------------------------------------
  * Rewards Tab
@@ -119,7 +156,8 @@ export interface VDBRewardsTableRow {
   group_id: number /* int64 */;
   reward: ClElValue<string /* decimal.Decimal */>;
 }
-export type InternalGetValidatorDashboardRewardsResponse = ApiPagingResponse<VDBRewardsTableRow>;
+export type InternalGetValidatorDashboardRewardsResponse =
+  ApiPagingResponse<VDBRewardsTableRow>;
 export interface VDBGroupRewardsDetails {
   status_count: StatusCount;
   income: string /* decimal.Decimal */;
@@ -137,13 +175,17 @@ export interface VDBGroupRewardsData {
   proposal_cl_sync_inc_reward: string /* decimal.Decimal */;
   proposal_cl_slashing_inc_reward: string /* decimal.Decimal */;
 }
-export type InternalGetValidatorDashboardGroupRewardsResponse = ApiDataResponse<VDBGroupRewardsData>;
-export type InternalGetValidatorDashboardRewardsChartResponse = ApiDataResponse<ChartData<number /* int */, string /* decimal.Decimal */>>; // bar chart, series id is group id, property is 'el' or 'cl'
+export type InternalGetValidatorDashboardGroupRewardsResponse =
+  ApiDataResponse<VDBGroupRewardsData>;
+export type InternalGetValidatorDashboardRewardsChartResponse = ApiDataResponse<
+  ChartData<number /* int */, string /* decimal.Decimal */>
+>; // bar chart, series id is group id, property is 'el' or 'cl'
 export interface VDBEpochDutiesTableRow {
   validator: number /* uint64 */;
   duties: ValidatorHistoryDuties;
 }
-export type InternalGetValidatorDashboardDutiesResponse = ApiPagingResponse<VDBEpochDutiesTableRow>;
+export type InternalGetValidatorDashboardDutiesResponse =
+  ApiPagingResponse<VDBEpochDutiesTableRow>;
 /**
  * ------------------------------------------------------------
  * Blocks Tab
@@ -153,13 +195,14 @@ export interface VDBBlocksTableRow {
   group_id: number /* uint64 */;
   epoch: number /* uint64 */;
   slot: number /* uint64 */;
-  status: 'success' | 'missed' | 'orphaned' | 'scheduled';
+  status: "success" | "missed" | "orphaned" | "scheduled";
   block?: number /* uint64 */;
   reward_recipient?: Address;
   reward?: ClElValue<string /* decimal.Decimal */>;
   graffiti?: string;
 }
-export type InternalGetValidatorDashboardBlocksResponse = ApiPagingResponse<VDBBlocksTableRow>;
+export type InternalGetValidatorDashboardBlocksResponse =
+  ApiPagingResponse<VDBBlocksTableRow>;
 export interface VDBHeatmapEvents {
   proposal: boolean;
   slash: boolean;
@@ -175,9 +218,10 @@ export interface VDBHeatmap {
   timestamps: number /* int64 */[]; // X-Axis Categories (unix timestamp)
   group_ids: number /* uint64 */[]; // Y-Axis Categories
   data: VDBHeatmapCell[];
-  aggregation: 'epoch' | 'day';
+  aggregation: "epoch" | "day";
 }
-export type InternalGetValidatorDashboardHeatmapResponse = ApiDataResponse<VDBHeatmap>;
+export type InternalGetValidatorDashboardHeatmapResponse =
+  ApiDataResponse<VDBHeatmap>;
 export interface VDBHeatmapTooltipData {
   timestamp: number /* int64 */; // epoch or day
   proposers: StatusCount;
@@ -189,7 +233,8 @@ export interface VDBHeatmapTooltipData {
   attestation_income: string /* decimal.Decimal */;
   attestation_efficiency: number /* float64 */;
 }
-export type InternalGetValidatorDashboardGroupHeatmapResponse = ApiDataResponse<VDBHeatmapTooltipData>;
+export type InternalGetValidatorDashboardGroupHeatmapResponse =
+  ApiDataResponse<VDBHeatmapTooltipData>;
 /**
  * ------------------------------------------------------------
  * Deposits Tab
@@ -207,7 +252,8 @@ export interface VDBExecutionDepositsTableRow {
   amount: string /* decimal.Decimal */;
   valid: boolean;
 }
-export type InternalGetValidatorDashboardExecutionLayerDepositsResponse = ApiPagingResponse<VDBExecutionDepositsTableRow>;
+export type InternalGetValidatorDashboardExecutionLayerDepositsResponse =
+  ApiPagingResponse<VDBExecutionDepositsTableRow>;
 export interface VDBConsensusDepositsTableRow {
   public_key: PubKey;
   index: number /* uint64 */;
@@ -218,15 +264,18 @@ export interface VDBConsensusDepositsTableRow {
   amount: string /* decimal.Decimal */;
   signature: Hash;
 }
-export type InternalGetValidatorDashboardConsensusLayerDepositsResponse = ApiPagingResponse<VDBConsensusDepositsTableRow>;
+export type InternalGetValidatorDashboardConsensusLayerDepositsResponse =
+  ApiPagingResponse<VDBConsensusDepositsTableRow>;
 export interface VDBTotalExecutionDepositsData {
   total_amount: string /* decimal.Decimal */;
 }
-export type InternalGetValidatorDashboardTotalExecutionDepositsResponse = ApiDataResponse<VDBTotalExecutionDepositsData>;
+export type InternalGetValidatorDashboardTotalExecutionDepositsResponse =
+  ApiDataResponse<VDBTotalExecutionDepositsData>;
 export interface VDBTotalConsensusDepositsData {
   total_amount: string /* decimal.Decimal */;
 }
-export type InternalGetValidatorDashboardTotalConsensusDepositsResponse = ApiDataResponse<VDBTotalConsensusDepositsData>;
+export type InternalGetValidatorDashboardTotalConsensusDepositsResponse =
+  ApiDataResponse<VDBTotalConsensusDepositsData>;
 /**
  * ------------------------------------------------------------
  * Withdrawals Tab
@@ -240,11 +289,13 @@ export interface VDBWithdrawalsTableRow {
   amount: string /* decimal.Decimal */;
   is_missing_estimate: boolean;
 }
-export type InternalGetValidatorDashboardWithdrawalsResponse = ApiPagingResponse<VDBWithdrawalsTableRow>;
+export type InternalGetValidatorDashboardWithdrawalsResponse =
+  ApiPagingResponse<VDBWithdrawalsTableRow>;
 export interface VDBTotalWithdrawalsData {
   total_amount: string /* decimal.Decimal */;
 }
-export type InternalGetValidatorDashboardTotalWithdrawalsResponse = ApiDataResponse<VDBTotalWithdrawalsData>;
+export type InternalGetValidatorDashboardTotalWithdrawalsResponse =
+  ApiDataResponse<VDBTotalWithdrawalsData>;
 /**
  * ------------------------------------------------------------
  * Rocket Pool Tab
@@ -271,8 +322,10 @@ export interface VDBRocketPoolTableRow {
     unclaimed: string /* decimal.Decimal */;
   };
 }
-export type InternalGetValidatorDashboardRocketPoolResponse = ApiPagingResponse<VDBRocketPoolTableRow>;
-export type InternalGetValidatorDashboardTotalRocketPoolResponse = ApiDataResponse<VDBRocketPoolTableRow>;
+export type InternalGetValidatorDashboardRocketPoolResponse =
+  ApiPagingResponse<VDBRocketPoolTableRow>;
+export type InternalGetValidatorDashboardTotalRocketPoolResponse =
+  ApiDataResponse<VDBRocketPoolTableRow>;
 export interface VDBNodeRocketPoolData {
   timezone: string;
   refund_balance: string /* decimal.Decimal */;
@@ -283,18 +336,35 @@ export interface VDBNodeRocketPoolData {
     max: string /* decimal.Decimal */;
   };
 }
-export type InternalGetValidatorDashboardNodeRocketPoolResponse = ApiDataResponse<VDBNodeRocketPoolData>;
+export type InternalGetValidatorDashboardNodeRocketPoolResponse =
+  ApiDataResponse<VDBNodeRocketPoolData>;
 export interface VDBRocketPoolMinipoolsTableRow {
   node: Address;
   validator_index: number /* uint64 */;
-  minipool_status: 'initialized' | 'prelaunch' | 'staking' | 'withdrawable' | 'dissolved';
-  validator_status: 'slashed' | 'exited' | 'deposited' | 'pending' | 'slashing_offline' | 'slashing_online' | 'exiting_offline' | 'exiting_online' | 'active_offline' | 'active_online';
+  minipool_status:
+    | "initialized"
+    | "prelaunch"
+    | "staking"
+    | "withdrawable"
+    | "dissolved";
+  validator_status:
+    | "slashed"
+    | "exited"
+    | "deposited"
+    | "pending"
+    | "slashing_offline"
+    | "slashing_online"
+    | "exiting_offline"
+    | "exiting_online"
+    | "active_offline"
+    | "active_online";
   group_id: number /* uint64 */;
   deposit: string /* decimal.Decimal */;
   commission: number /* float64 */;
   created_timestamp: number /* int64 */;
 }
-export type InternalGetValidatorDashboardRocketPoolMinipoolsResponse = ApiPagingResponse<VDBRocketPoolMinipoolsTableRow>;
+export type InternalGetValidatorDashboardRocketPoolMinipoolsResponse =
+  ApiPagingResponse<VDBRocketPoolMinipoolsTableRow>;
 /**
  * ------------------------------------------------------------
  * Manage Modal
@@ -304,11 +374,22 @@ export interface VDBManageValidatorsTableRow {
   public_key: PubKey;
   group_id: number /* uint64 */;
   balance: string /* decimal.Decimal */;
-  status: 'slashed' | 'exited' | 'deposited' | 'pending' | 'slashing_offline' | 'slashing_online' | 'exiting_offline' | 'exiting_online' | 'active_offline' | 'active_online';
+  status:
+    | "slashed"
+    | "exited"
+    | "deposited"
+    | "pending"
+    | "slashing_offline"
+    | "slashing_online"
+    | "exiting_offline"
+    | "exiting_online"
+    | "active_offline"
+    | "active_online";
   queue_position?: number /* uint64 */;
   withdrawal_credential: Hash;
 }
-export type InternalGetValidatorDashboardValidatorsResponse = ApiPagingResponse<VDBManageValidatorsTableRow>;
+export type InternalGetValidatorDashboardValidatorsResponse =
+  ApiPagingResponse<VDBManageValidatorsTableRow>;
 /**
  * ------------------------------------------------------------
  * Misc.
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 4f28a06a2..c2b15fa79 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',
@@ -71,7 +75,8 @@ 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`,
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/validators`,
     mock: false,
   },
   [API_PATH.DASHBOARD_VALIDATOR_BLOCKS]: {
@@ -81,12 +86,14 @@ export const mapping: Record<string, MappingData> = {
   },
   [API_PATH.DASHBOARD_VALIDATOR_WITHDRAWALS]: {
     path: 'validator-dashboards/{dashboard_id}/withdrawals',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/withdrawals`,
+    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`,
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/total-withdrawals`,
     mock: false,
   },
   [API_PATH.DASHBOARD_VALIDATOR_GROUPS]: {
@@ -97,7 +104,8 @@ export const mapping: Record<string, MappingData> = {
   },
   [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
   },
@@ -165,64 +173,76 @@ export const mapping: Record<string, MappingData> = {
   },
   [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',
   },
   [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',
   },
   [API_PATH.DASHBOARD_SUMMARY_DETAILS]: {
     path: '/validator-dashboards/{dashboardKey}/groups/{group_id}/summary',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/groups/${values?.groupId}/summary`,
+    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`,
+    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`,
+    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}`,
+    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`,
+    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`,
+    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`,
+    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`,
+    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`,
+    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`,
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/summary-chart`,
     mock: false,
   },
   [API_PATH.DASHBOARD_OVERVIEW]: {
@@ -232,7 +252,8 @@ export const mapping: Record<string, MappingData> = {
   },
   [API_PATH.DASHBOARD_SLOTVIZ]: {
     path: '/validator-dashboards/{dashboardKey}/slot-viz',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/slot-viz`,
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/slot-viz`,
     mock: false,
   },
   [API_PATH.GET_NOTIFICATIONS_SETTINGS_DASHBOARD]: {
@@ -256,12 +277,14 @@ export const mapping: Record<string, MappingData> = {
   },
   [API_PATH.DASHBOARD_VALIDATOR_EPOCH_DUTY]: {
     path: '/validator-dashboards/{dashboard_id}/duties/{epoch}:',
-    getPath: values => `/validator-dashboards/${values?.dashboardKey}/duties/${values?.epoch}`,
+    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`,
+    getPath: values =>
+      `/validator-dashboards/${values?.dashboardKey}/summary/validators`,
     mock: false,
   },
   [API_PATH.NOTIFICATIONS_DASHBOARDS]: {
@@ -316,7 +339,8 @@ export const mapping: Record<string, MappingData> = {
   },
   [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,
   },
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 a320025d2..b46e2ff29 100644
--- a/frontend/types/dashboard/summary.ts
+++ b/frontend/types/dashboard/summary.ts
@@ -1,28 +1,75 @@
 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
@@ -36,10 +83,15 @@ 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[]
diff --git a/frontend/types/helper.ts b/frontend/types/helper.ts
index 8aa405337..b2fdd4fbd 100644
--- a/frontend/types/helper.ts
+++ b/frontend/types/helper.ts
@@ -27,7 +27,7 @@ type KeyPaths<T> = {
         ? never // remove Arrays
         : `${K}.${KeyPaths<T[K]>}`
       : K
-    : never
+    : never;
 }[keyof T]
 
 export type { KeyPaths }
diff --git a/frontend/types/network.ts b/frontend/types/network.ts
index 0cef2e2b4..df6f86fe2 100644
--- a/frontend/types/network.ts
+++ b/frontend/types/network.ts
@@ -265,10 +265,11 @@ 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)
+  return ChainInfo[network].mainNet === network
 }
 
 /**
@@ -276,37 +277,43 @@ export function isMainNet(network: ChainIDs): boolean {
  * 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)
+  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 {
   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 {
   const info = ChainInfo[chainId]
@@ -314,12 +321,13 @@ export function slotToTs(chainId: ChainIDs, slot: number): number | undefined {
     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 {
   const info = ChainInfo[chainId]
@@ -331,7 +339,8 @@ 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 {
   const info = ChainInfo[chainId]
@@ -343,7 +352,8 @@ 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 {
   const info = ChainInfo[chainId]
diff --git a/frontend/types/notifications/dashboards.ts b/frontend/types/notifications/dashboards.ts
index c41833e2a..7529027b4 100644
--- a/frontend/types/notifications/dashboards.ts
+++ b/frontend/types/notifications/dashboards.ts
@@ -15,4 +15,5 @@ export type NotifcationDashboardRow = {
   nofitication: string[]
 }
 
-export type NotifcationDashboardResponse = ApiPagingResponse<NotifcationDashboardRow>
+export type NotifcationDashboardResponse =
+  ApiPagingResponse<NotifcationDashboardRow>
diff --git a/frontend/types/notifications/settings.ts b/frontend/types/notifications/settings.ts
index 3baed8644..558119ffc 100644
--- a/frontend/types/notifications/settings.ts
+++ b/frontend/types/notifications/settings.ts
@@ -1,10 +1,22 @@
-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
+  generalSettings: ComputedRef<
+    NotificationsManagementSettingsGeneralTab | undefined
+  >
+  updateGeneralSettings: (
+    newSettings: NotificationsManagementSettingsGeneralTab,
+  ) => void
   pairedDevices: ComputedRef<NotificationPairedDevice[] | undefined>
   updatePairedDevices: (newDevices: NotificationPairedDevice[]) => void
   isLoading: Ref<boolean>
diff --git a/frontend/types/searchbar.ts b/frontend/types/searchbar.ts
index 41f7a3c02..b87057507 100644
--- a/frontend/types/searchbar.ts
+++ b/frontend/types/searchbar.ts
@@ -1,6 +1,11 @@
+/* eslint-disable vue/max-len -- TODO: @thib-wien 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)
@@ -91,7 +96,9 @@ 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
@@ -100,7 +107,9 @@ export interface SearchRequest {
   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 = {
@@ -169,9 +178,18 @@ interface SearchbarPurposeInfoField {
   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',
@@ -185,7 +203,8 @@ export const SearchbarPurposeInfo: Record<SearchbarPurpose, SearchbarPurposeInfo
     askAPItoCountResults: false,
     button: 'add',
     placeHolder: 'search_bar.account_placeholder',
-    cellsInSuggestionRows: SuggestionrowCells.SubcategoryIdentificationDescription,
+    cellsInSuggestionRows:
+      SuggestionrowCells.SubcategoryIdentificationDescription,
     differentialRequests: true,
   },
   [SearchbarPurpose.ValidatorAddition]: {
@@ -194,7 +213,8 @@ export const SearchbarPurposeInfo: Record<SearchbarPurpose, SearchbarPurposeInfo
     askAPItoCountResults: false,
     button: 'add',
     placeHolder: 'search_bar.validator_placeholder',
-    cellsInSuggestionRows: SuggestionrowCells.SubcategoryIdentificationDescription,
+    cellsInSuggestionRows:
+      SuggestionrowCells.SubcategoryIdentificationDescription,
     differentialRequests: true,
   },
 }
@@ -204,11 +224,26 @@ interface CategoryInfoFields {
   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 {
@@ -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,7 +591,11 @@ 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],
@@ -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
+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,23 +646,34 @@ export function wasOutputDataGivenByTheAPI(type: ResultType, resultSuggestionOut
 /**
  * @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
 
   switch (dataSource) {
-    case Indirect.None : return ''
-    case Indirect.APIstr_value : sourceField = 'str_value'
+    case Indirect.None:
+      return ''
+    case Indirect.APIstr_value:
+      sourceField = 'str_value'
       break
-    case Indirect.APInum_value : sourceField = 'num_value'
+    case Indirect.APInum_value:
+      sourceField = 'num_value'
       break
-    case Indirect.APIhash_value : sourceField = 'hash_value'
+    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.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]
@@ -543,17 +690,26 @@ export function getListOfResultTypes(sortByPriority: boolean): ResultType[] {
       listOfResultTypesAsDeclared.push(ResultType[ty])
       listOfResultTypesPrioritized.push(ResultType[ty])
     }
-    listOfResultTypesPrioritized.sort((a, b) => 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
@@ -577,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) {
@@ -590,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/swipe.ts b/frontend/types/swipe.ts
index 7d6154536..bf8787412 100644
--- a/frontend/types/swipe.ts
+++ b/frontend/types/swipe.ts
@@ -1,5 +1,10 @@
 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[]
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/validator/index.ts b/frontend/types/validator/index.ts
index 8262687ad..2848e23f3 100644
--- a/frontend/types/validator/index.ts
+++ b/frontend/types/validator/index.ts
@@ -1,8 +1,18 @@
-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
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/utils/bigMath.ts b/frontend/utils/bigMath.ts
index 216975dfc..21d21677c 100644
--- a/frontend/utils/bigMath.ts
+++ b/frontend/utils/bigMath.ts
@@ -33,7 +33,10 @@ export const bigDiv = (big: BigNumber, num: number): BigNumber => {
 }
 
 export const convertSum = (...values: string[]): BigNumber | undefined => {
-  return values?.reduce((sum, newValue) => sum.add(BigNumber.from(newValue)), BigNumber.from('0'))
+  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 9503cb290..14b9f8b9c 100644
--- a/frontend/utils/colors.ts
+++ b/frontend/utils/colors.ts
@@ -1,6 +1,68 @@
 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']
+  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
 }
diff --git a/frontend/utils/currency.ts b/frontend/utils/currency.ts
index 9d6210f56..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 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 f86e568f1..210605c62 100644
--- a/frontend/utils/dashboard/group.ts
+++ b/frontend/utils/dashboard/group.ts
@@ -1,8 +1,16 @@
 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 ''
   }
diff --git a/frontend/utils/dashboard/table.ts b/frontend/utils/dashboard/table.ts
index b9c1327cb..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 349cb177a..474793861 100644
--- a/frontend/utils/dashboard/validator.ts
+++ b/frontend/utils/dashboard/validator.ts
@@ -1,13 +1,26 @@
 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) {
   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)
   }
@@ -20,25 +33,35 @@ export function sortValidatorIds(list?: number[]): number[] {
   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/format.ts b/frontend/utils/format.ts
index d9129bfa8..8788e0327 100644
--- a/frontend/utils/format.ts
+++ b/frontend/utils/format.ts
@@ -16,11 +16,17 @@ export interface NumberFormatConfig {
   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)
@@ -32,10 +38,14 @@ 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 ''
   }
@@ -58,7 +68,11 @@ export function withCurrency(value: string, currency: string): string {
 }
 
 export function nZeros(count: number): string {
-  return count > 0 ? Array.from(Array(count)).map(() => '0').join('') : ''
+  return count > 0
+    ? Array.from(Array(count))
+      .map(() => '0')
+      .join('')
+    : ''
 }
 
 export function commmifyLeft(value: string): string {
@@ -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,7 +116,14 @@ 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
   }
@@ -108,7 +136,11 @@ function formatTs(ts?: number, timestamp?: number, format: AgeFormat = 'relative
   }
 }
 
-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',
@@ -122,7 +154,9 @@ export function formatTsToAbsolute(ts: number, locales: string, includeTime?: bo
     ...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 {
@@ -134,52 +168,123 @@ export function formatTsToTime(ts: number, locales: string): string {
   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 formatTimeDuration(seconds: number | undefined, t: ComposerTranslation): string | undefined {
+export function formatTimeDuration(
+  seconds: number | undefined,
+  t: ComposerTranslation,
+): string | undefined {
   if (seconds === undefined) {
     return undefined
   }
@@ -209,7 +314,10 @@ export function formatTimeDuration(seconds: number | undefined, t: ComposerTrans
   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
   }
@@ -217,7 +325,13 @@ 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,
@@ -228,6 +342,16 @@ export function formatFiat(value: number, currency: string, locales: string, min
   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 1c0d1a433..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
   }
@@ -15,13 +18,19 @@ export function isParent(parent: HTMLElement | null, child: HTMLElement | null):
 }
 
 function isScrollable(element: HTMLElement): boolean {
-  if (element.offsetWidth < element.scrollWidth || element.offsetHeight < element.scrollHeight) {
+  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 bd1a64df5..6b39f777b 100644
--- a/frontend/utils/misc.ts
+++ b/frontend/utils/misc.ts
@@ -18,8 +18,12 @@ export function levenshteinDistance(str1: string, str2: string): number {
         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)
+        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,
+        )
       }
     }
   }
@@ -27,12 +31,11 @@ export function levenshteinDistance(str1: string, str2: string): number {
 }
 
 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)
-    })
+  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 {
diff --git a/frontend/utils/mock.ts b/frontend/utils/mock.ts
index 58f3bbd1b..2b1f68265 100644
--- a/frontend/utils/mock.ts
+++ b/frontend/utils/mock.ts
@@ -1,12 +1,19 @@
 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[]
@@ -21,12 +28,14 @@ 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'))
+    ordinal
+      += last === '1' ? 'st' : last === '2' ? 'nd' : last === '3' ? 'rd' : 'th'
   }
   else {
     ordinal += 'th'
@@ -73,19 +82,22 @@ export function simulateAPIresponseForTheSearchBar(body?: Record<string, any>):
         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,
@@ -130,7 +142,8 @@ export function simulateAPIresponseForTheSearchBar(body?: Record<string, any>):
         chain_id: 1,
         type: 'validator_by_public_key',
         num_value: Math.floor(Math.random() * 1000000),
-        hash_value: '0x8000300c7607886b7e6f1030f833162f81b02e702ff9cea045e5a1d4a13bc7010e277f077533c7899334df2d51d65660',
+        hash_value:
+          '0x8000300c7607886b7e6f1030f833162f81b02e702ff9cea045e5a1d4a13bc7010e277f077533c7899334df2d51d65660',
       },
       {
         chain_id: 1,
@@ -155,7 +168,8 @@ export function simulateAPIresponseForTheSearchBar(body?: Record<string, any>):
     {
       chain_id: 42161,
       type: 'transactions',
-      hash_value: '0xacd47cc7a30b4273aadec96b4e5aa06d1cfa627b751f358069b9a7febdba3c30',
+      hash_value:
+        '0xacd47cc7a30b4273aadec96b4e5aa06d1cfa627b751f358069b9a7febdba3c30',
     },
     {
       chain_id: 8453,
@@ -179,19 +193,22 @@ export function simulateAPIresponseForTheSearchBar(body?: Record<string, any>):
         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,
@@ -202,19 +219,22 @@ export function simulateAPIresponseForTheSearchBar(body?: Record<string, any>):
         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,
@@ -229,7 +249,8 @@ export function simulateAPIresponseForTheSearchBar(body?: Record<string, any>):
       {
         chain_id: 100,
         type: 'validators_by_withdrawal_credential',
-        hash_value: '0x0100000000000000000000000c6bd499ef02a44031ffe8336f59c82d81333f2a',
+        hash_value:
+          '0x0100000000000000000000000c6bd499ef02a44031ffe8336f59c82d81333f2a',
       },
       {
         chain_id: 100,
@@ -306,16 +327,23 @@ export function simulateAPIresponseForTheSearchBar(body?: Record<string, any>):
 
   // 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
     }
@@ -356,18 +384,32 @@ interface ApiChainInfo {
   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' })
+    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
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 c5465c1a6..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,9 +36,11 @@ 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) {
diff --git a/frontend/utils/translation.ts b/frontend/utils/translation.ts
index 2a46704cd..47979723b 100644
--- a/frontend/utils/translation.ts
+++ b/frontend/utils/translation.ts
@@ -3,40 +3,67 @@ 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
@@ -45,7 +72,11 @@ export function tAll(t: ComposerTranslation, path: string, options?: any): strin
   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 8620db91b..ca089d0de 100644
--- a/frontend/utils/userValidation.ts
+++ b/frontend/utils/userValidation.ts
@@ -3,23 +3,46 @@ 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 }))
+  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'))
+  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 {