diff --git a/pkg/console/assets/css/output.css b/pkg/console/assets/css/output.css
index e28294cc..3f319537 100644
--- a/pkg/console/assets/css/output.css
+++ b/pkg/console/assets/css/output.css
@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -12,7 +12,6 @@
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
-    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-800: oklch(44.4% 0.177 26.899);
     --color-red-900: oklch(39.6% 0.141 25.723);
     --color-orange-100: oklch(95.4% 0.038 75.164);
@@ -61,7 +60,7 @@
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
-    --color-gray-950: oklch(13% 0.028 261.692);
+    --color-stone-700: oklch(37.4% 0.01 67.558);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -88,7 +87,6 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --tracking-wide: 0.025em;
-    --tracking-wider: 0.05em;
     --leading-relaxed: 1.625;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -235,6 +233,9 @@
   ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
   :-moz-ui-invalid {
     box-shadow: none;
   }
@@ -258,9 +259,6 @@
   .absolute {
     position: absolute;
   }
-  .fixed {
-    position: fixed;
-  }
   .relative {
     position: relative;
   }
@@ -273,9 +271,6 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
-  .top-1 {
-    top: calc(var(--spacing) * 1);
-  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -300,9 +295,6 @@
   .bottom-full {
     bottom: 100%;
   }
-  .left-1 {
-    left: calc(var(--spacing) * 1);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -399,6 +391,9 @@
   .hidden {
     display: none;
   }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -423,9 +418,6 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
-  .h-6 {
-    height: calc(var(--spacing) * 6);
-  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -450,9 +442,6 @@
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -510,9 +499,6 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
-  .w-11 {
-    width: calc(var(--spacing) * 11);
-  }
   .w-11\/12 {
     width: calc(11/12 * 100%);
   }
@@ -552,30 +538,16 @@
   .flex-none {
     flex: none;
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
   .table-auto {
     table-layout: auto;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
-  .-translate-x-1 {
-    --tw-translate-x: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .-translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -604,9 +576,6 @@
   .cursor-pointer {
     cursor: pointer;
   }
-  .resize {
-    resize: both;
-  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -634,6 +603,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -698,13 +670,6 @@
       margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
-  .space-x-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .space-x-3 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -719,13 +684,6 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
-  .space-x-6 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -811,18 +769,12 @@
   .border-gray-700 {
     border-color: var(--color-gray-700);
   }
-  .border-red-400 {
-    border-color: var(--color-red-400);
-  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
   .border-transparent {
     border-color: transparent;
   }
-  .border-white {
-    border-color: var(--color-white);
-  }
   .border-white\/20 {
     border-color: color-mix(in srgb, #fff 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -832,9 +784,6 @@
   .border-t-gray-900 {
     border-top-color: var(--color-gray-900);
   }
-  .bg-black {
-    background-color: var(--color-black);
-  }
   .bg-black\/20 {
     background-color: color-mix(in srgb, #000 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -914,27 +863,15 @@
     --tw-gradient-position: to left in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .bg-gradient-to-r {
-    --tw-gradient-position: to right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
   .from-gray-50 {
     --tw-gradient-from: var(--color-gray-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .from-white {
-    --tw-gradient-from: var(--color-white);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .via-gray-50 {
     --tw-gradient-via: var(--color-gray-50);
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
-  .to-gray-100 {
-    --tw-gradient-to: var(--color-gray-100);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-transparent {
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -969,9 +906,6 @@
   .px-30 {
     padding-inline: calc(var(--spacing) * 30);
   }
-  .py-0 {
-    padding-block: calc(var(--spacing) * 0);
-  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1011,9 +945,6 @@
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
-  .pl-8 {
-    padding-left: calc(var(--spacing) * 8);
-  }
   .pl-12 {
     padding-left: calc(var(--spacing) * 12);
   }
@@ -1142,9 +1073,6 @@
   .text-red-600 {
     color: var(--color-red-600);
   }
-  .text-red-700 {
-    color: var(--color-red-700);
-  }
   .text-red-800 {
     color: var(--color-red-800);
   }
@@ -1187,9 +1115,9 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
+  .invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1204,10 +1132,6 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1423,17 +1347,17 @@
     }
   }
   .dark\:border-gray-600 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       border-color: var(--color-gray-600);
     }
   }
   .dark\:border-gray-700 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       border-color: var(--color-gray-700);
     }
   }
   .dark\:border-gray-700\/50 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       border-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 50%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         border-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
@@ -1441,195 +1365,171 @@
     }
   }
   .dark\:border-red-500 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       border-color: var(--color-red-500);
     }
   }
   .dark\:border-t-gray-700 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       border-top-color: var(--color-gray-700);
     }
   }
-  .dark\:bg-black {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-black);
-    }
-  }
-  .dark\:bg-blue-900 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-blue-900);
-    }
-  }
-  .dark\:bg-gray-100 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-100);
-    }
-  }
-  .dark\:bg-gray-600 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-600);
-    }
-  }
-  .dark\:bg-gray-700 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-700);
+  .dark\:bg-\[\#000000\] {
+    &:is(.dark, .dark *) {
+      background-color: #000000;
     }
   }
-  .dark\:bg-gray-800 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-800);
+  .dark\:bg-\[\#141414\] {
+    &:is(.dark, .dark *) {
+      background-color: #141414;
     }
   }
-  .dark\:bg-gray-800\/90 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 90%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-gray-800) 90%, transparent);
-      }
+  .dark\:bg-\[\#141414\]\/90 {
+    &:is(.dark, .dark *) {
+      background-color: color-mix(in oklab, #141414 90%, transparent);
     }
   }
-  .dark\:bg-gray-900 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-900);
+  .dark\:bg-blue-900 {
+    &:is(.dark, .dark *) {
+      background-color: var(--color-blue-900);
     }
   }
-  .dark\:bg-gray-950 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-950);
+  .dark\:bg-gray-100 {
+    &:is(.dark, .dark *) {
+      background-color: var(--color-gray-100);
     }
   }
   .dark\:bg-green-900 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       background-color: var(--color-green-900);
     }
   }
   .dark\:bg-orange-900 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       background-color: var(--color-orange-900);
     }
   }
   .dark\:bg-purple-900 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       background-color: var(--color-purple-900);
     }
   }
   .dark\:bg-red-900 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       background-color: var(--color-red-900);
     }
   }
+  .dark\:bg-stone-700 {
+    &:is(.dark, .dark *) {
+      background-color: var(--color-stone-700);
+    }
+  }
   .dark\:from-gray-800 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       --tw-gradient-from: var(--color-gray-800);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
   }
   .dark\:via-gray-800 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       --tw-gradient-via: var(--color-gray-800);
       --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
   }
-  .dark\:to-gray-900 {
-    @media (prefers-color-scheme: dark) {
-      --tw-gradient-to: var(--color-gray-900);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    }
-  }
   .dark\:\!text-gray-400 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-gray-400) !important;
     }
   }
   .dark\:text-blue-300 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-blue-300);
     }
   }
   .dark\:text-gray-100 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-gray-100);
     }
   }
   .dark\:text-gray-200 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-gray-200);
     }
   }
   .dark\:text-gray-300 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-gray-300);
     }
   }
   .dark\:text-gray-400 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-gray-400);
     }
   }
   .dark\:text-gray-500 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-gray-500);
     }
   }
   .dark\:text-gray-600 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-gray-600);
     }
   }
   .dark\:text-gray-900 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-gray-900);
     }
   }
   .dark\:text-green-200 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-green-200);
     }
   }
   .dark\:text-green-400 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-green-400);
     }
   }
   .dark\:text-orange-200 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-orange-200);
     }
   }
   .dark\:text-purple-200 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-purple-200);
     }
   }
   .dark\:text-purple-400 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-purple-400);
     }
   }
   .dark\:text-red-200 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-red-200);
     }
   }
   .dark\:text-red-400 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-red-400);
     }
   }
   .dark\:text-yellow-400 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       color: var(--color-yellow-400);
     }
   }
-  .dark\:invert {
-    @media (prefers-color-scheme: dark) {
-      --tw-invert: invert(100%);
+  .dark\:invert-0 {
+    &:is(.dark, .dark *) {
+      --tw-invert: invert(0%);
       filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
     }
   }
   .dark\:hover\:\!bg-purple-700 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--color-purple-700) !important;
@@ -1638,7 +1538,7 @@
     }
   }
   .dark\:hover\:bg-gray-600 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--color-gray-600);
@@ -1647,7 +1547,7 @@
     }
   }
   .dark\:hover\:bg-gray-700 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--color-gray-700);
@@ -1655,8 +1555,17 @@
       }
     }
   }
+  .dark\:hover\:bg-gray-800 {
+    &:is(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-800);
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-purple-700 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--color-purple-700);
@@ -1664,8 +1573,17 @@
       }
     }
   }
+  .dark\:hover\:bg-stone-700 {
+    &:is(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-stone-700);
+        }
+      }
+    }
+  }
   .dark\:hover\:\!text-gray-300 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
           color: var(--color-gray-300) !important;
@@ -1674,7 +1592,7 @@
     }
   }
   .dark\:hover\:text-purple-300 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       &:hover {
         @media (hover: hover) {
           color: var(--color-purple-300);
@@ -1683,14 +1601,14 @@
     }
   }
   .dark\:focus\:border-purple-500 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       &:focus {
         border-color: var(--color-purple-500);
       }
     }
   }
   .dark\:focus\:border-red-500 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark, .dark *) {
       &:focus {
         border-color: var(--color-red-500);
       }
@@ -1927,11 +1845,6 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -2094,7 +2007,6 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
diff --git a/pkg/console/assets/images/Glyph_Black.svg b/pkg/console/assets/images/Glyph_Black.svg
deleted file mode 100755
index d2dd14a7..00000000
--- a/pkg/console/assets/images/Glyph_Black.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500"><defs><style>.cls-1{fill:#111;}</style></defs><path class="cls-1" d="M558.69,465,434.78,250,376.66,149.21,310.86,35.07a12.4,12.4,0,0,0-21.48,0L165.18,249.84,114.43,337.6a12.41,12.41,0,0,0,10.74,18.62l95.87.06a12.43,12.43,0,0,0,10.75-6.19l49.82-86.18,7.62-13.18a13.36,13.36,0,0,1,1-1.46,12.41,12.41,0,0,1,20.5,1.48l51.7,89.68L372,357a13.25,13.25,0,0,1,1.22,2.91,12.41,12.41,0,0,1-12,15.69l-112.78-.07a12.43,12.43,0,0,0-10.75,6.19l-48,83a12.4,12.4,0,0,0,10.73,18.61l99.39.07,123.93.08,124.18.08A12.4,12.4,0,0,0,558.69,465Z"/></svg>
\ No newline at end of file
diff --git a/pkg/console/assets/images/OAPLogo.svg b/pkg/console/assets/images/OAPLogo.svg
new file mode 100644
index 00000000..7fe4c586
--- /dev/null
+++ b/pkg/console/assets/images/OAPLogo.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.1665 18.077C30.5118 18.6749 30.5118 19.4117 30.1665 20.0096L23.6769 31.2491C22.9364 32.5316 23.862 34.1347 25.343 34.1347C26.0303 34.1347 26.6654 33.768 27.0091 33.1728L31.2731 25.788C32.017 24.4996 33.8768 24.4996 34.6207 25.788L39.7382 34.651C40.4821 35.9394 39.5522 37.5499 38.0643 37.5499H31.0256C31.0255 37.5499 31.0254 37.55 31.0254 37.5501C31.0254 37.5503 31.0253 37.5504 31.0251 37.5504H14.2627L14.2624 37.5501H13.1811C12.3486 37.5501 11.8283 36.649 12.2445 35.9281L21.9169 19.1764C22.2621 18.5785 22.2621 17.8418 21.9169 17.2438L21.6738 16.8228C20.9299 15.5344 19.0701 15.5344 18.3261 16.8228L6.91645 36.5834C6.5712 37.1814 5.93313 37.5497 5.24262 37.5497H1.93566C0.447809 37.5497 -0.482099 35.9392 0.261826 34.6508L18.3252 3.3667C19.0691 2.07829 20.9289 2.07829 21.6728 3.3667L30.1665 18.077Z" fill="#EDEDED"/>
+</svg>
diff --git a/pkg/console/assets/images/favicon.png b/pkg/console/assets/images/favicon.png
new file mode 100644
index 00000000..0bdfdbc7
Binary files /dev/null and b/pkg/console/assets/images/favicon.png differ
diff --git a/pkg/console/assets/input.css b/pkg/console/assets/input.css
index 1f8f3b93..39e6667b 100644
--- a/pkg/console/assets/input.css
+++ b/pkg/console/assets/input.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@variant dark (&:is(.dark, .dark *));
+
 /* JSON Syntax Highlighting */
 .json-key {
   @apply text-blue-600 font-semibold;
diff --git a/pkg/console/assets/js/theme.js b/pkg/console/assets/js/theme.js
new file mode 100644
index 00000000..01d4b286
--- /dev/null
+++ b/pkg/console/assets/js/theme.js
@@ -0,0 +1,30 @@
+function themeToggle() {
+    return {
+        theme: 'light',
+
+        init() {
+            console.log('Theme toggle initialized');
+            // Read current state from document (set by inline script)
+            const isDark = document.documentElement.classList.contains('dark');
+            this.theme = isDark ? 'dark' : 'light';
+            console.log('Current theme:', this.theme);
+        },
+
+        toggleTheme() {
+            console.log('Toggle clicked, current theme:', this.theme);
+            this.theme = this.theme === 'light' ? 'dark' : 'light';
+            console.log('New theme:', this.theme);
+            localStorage.setItem('theme', this.theme);
+            this.applyTheme();
+        },
+
+        applyTheme() {
+            console.log('Applying theme:', this.theme);
+            if (this.theme === 'dark') {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        }
+    }
+}
diff --git a/pkg/console/cache.go b/pkg/console/cache.go
new file mode 100644
index 00000000..c6c786ee
--- /dev/null
+++ b/pkg/console/cache.go
@@ -0,0 +1,79 @@
+package console
+
+import (
+	"context"
+	"sync"
+	"time"
+
+	"github.com/AudiusProject/audiusd/pkg/common"
+)
+
+// Cache is a generic thread-safe cache that periodically refreshes data in the background
+type Cache[T any] struct {
+	mu          sync.RWMutex
+	data        T
+	lastUpdated time.Time
+	updateFunc  func(context.Context) (T, error)
+	refreshRate time.Duration
+	logger      *common.Logger
+}
+
+// NewCache creates a new cache with the given update function and refresh rate
+func NewCache[T any](updateFunc func(context.Context) (T, error), refreshRate time.Duration, logger *common.Logger) *Cache[T] {
+	return &Cache[T]{
+		updateFunc:  updateFunc,
+		refreshRate: refreshRate,
+		logger:      logger,
+	}
+}
+
+// Get returns the cached data (thread-safe read)
+func (c *Cache[T]) Get() T {
+	c.mu.RLock()
+	defer c.mu.RUnlock()
+	return c.data
+}
+
+// GetLastUpdated returns when the cache was last updated
+func (c *Cache[T]) GetLastUpdated() time.Time {
+	c.mu.RLock()
+	defer c.mu.RUnlock()
+	return c.lastUpdated
+}
+
+// StartRefresh begins the background refresh loop
+// Should be called in a goroutine
+func (c *Cache[T]) StartRefresh(ctx context.Context) {
+	ticker := time.NewTicker(c.refreshRate)
+	defer ticker.Stop()
+
+	// Do initial refresh immediately (non-blocking)
+	c.refresh(ctx)
+
+	for {
+		select {
+		case <-ctx.Done():
+			c.logger.Info("Cache refresh stopped")
+			return
+		case <-ticker.C:
+			c.refresh(ctx)
+		}
+	}
+}
+
+// refresh updates the cached data by calling the update function
+func (c *Cache[T]) refresh(ctx context.Context) {
+	start := time.Now()
+	data, err := c.updateFunc(ctx)
+	if err != nil {
+		c.logger.Warn("Cache refresh failed", "error", err, "duration", time.Since(start))
+		return
+	}
+
+	c.mu.Lock()
+	c.data = data
+	c.lastUpdated = time.Now()
+	c.mu.Unlock()
+
+	c.logger.Debug("Cache refreshed", "duration", time.Since(start))
+}
diff --git a/pkg/console/cmd/main.go b/pkg/console/cmd/main.go
index 5ad7d02d..1e40a01b 100644
--- a/pkg/console/cmd/main.go
+++ b/pkg/console/cmd/main.go
@@ -1,19 +1,13 @@
 package main
 
 import (
-	"context"
-	"fmt"
 	"log"
-	"os"
-	"path/filepath"
-	"time"
 
 	"github.com/AudiusProject/audiusd/pkg/common"
 	"github.com/AudiusProject/audiusd/pkg/console"
 	"github.com/AudiusProject/audiusd/pkg/etl"
 	"github.com/AudiusProject/audiusd/pkg/sdk"
-	"github.com/testcontainers/testcontainers-go"
-	"github.com/testcontainers/testcontainers-go/wait"
+	"go.uber.org/zap"
 )
 
 func main() {
@@ -21,19 +15,14 @@ func main() {
 
 	logger.Info("Starting Console")
 
-	// Start postgres container with volume
-	dbURL, err := startPostgres(context.Background())
-	if err != nil {
-		log.Fatalf("Failed to start postgres: %s", err)
-	}
+	// Connect to postgres from Makefile (port 5444)
+	dbURL := "postgres://postgres:postgres@0.0.0.0:5444/audiusd?sslmode=disable"
 
 	logger.Info("pgURL", "url", dbURL)
-	// wait for postgres to be ready
-	time.Sleep(5 * time.Second)
 
-	auds := sdk.NewAudiusdSDK("rpc.audius.engineering")
+	auds := sdk.NewAudiusdSDK("creatornode.audius.co")
 
-	etl := etl.NewETLService(auds.Core, nil)
+	etl := etl.NewETLService(auds.Core, zap.NewNop())
 	etl.SetDBURL(dbURL)
 	etl.SetCheckReadiness(false)
 
@@ -45,52 +34,3 @@ func main() {
 		log.Fatal(err)
 	}
 }
-
-func startPostgres(ctx context.Context) (string, error) {
-	pguser := "postgres"
-	pgpass := "postgres"
-	pgdb := "audiusd"
-
-	// Get current working directory and create absolute path for postgres data
-	cwd, err := os.Getwd()
-	if err != nil {
-		return "", fmt.Errorf("failed to get current working directory: %w", err)
-	}
-
-	postgresDataPath := filepath.Join(cwd, "tmp", "postgres-data")
-
-	// Create the directory if it doesn't exist
-	if err := os.MkdirAll(postgresDataPath, 0755); err != nil {
-		return "", fmt.Errorf("failed to create postgres data directory: %w", err)
-	}
-
-	req := testcontainers.ContainerRequest{
-		Image:        "postgres:15",
-		Name:         "audiusd-console-postgres",
-		ExposedPorts: []string{"15432:5432/tcp"},
-		Env: map[string]string{
-			"POSTGRES_USER":     pguser,
-			"POSTGRES_PASSWORD": pgpass,
-			"POSTGRES_DB":       pgdb,
-		},
-		WaitingFor: wait.ForListeningPort("5432/tcp"),
-	}
-
-	postgresC, err := testcontainers.GenericContainer(ctx, testcontainers.GenericContainerRequest{
-		ContainerRequest: req,
-		Started:          true,
-		Reuse:            true,
-	})
-	if err != nil {
-		return "", fmt.Errorf("failed to start container: %w", err)
-	}
-
-	host, err := postgresC.Host(ctx)
-	if err != nil {
-		return "", fmt.Errorf("failed to get container host: %w", err)
-	}
-
-	// Use fixed port 15432 for consistent TablePlus connections
-	dsn := fmt.Sprintf("postgres://%s:%s@%s:15432/%s?sslmode=disable", pguser, pgpass, host, pgdb)
-	return dsn, nil
-}
diff --git a/pkg/console/console.go b/pkg/console/console.go
index 3fd08c3f..66640ba8 100644
--- a/pkg/console/console.go
+++ b/pkg/console/console.go
@@ -44,6 +44,7 @@ type Console struct {
 	latestTrustedBlock atomic.Int64
 	lastRefreshTime    atomic.Int64  // Unix timestamp of last refresh
 	refreshInterval    time.Duration // How often to refresh
+	dashboardCache     *Cache[*pages.DashboardProps]
 }
 
 func NewConsole(etl *etl.ETLService, e *echo.Echo, env string) *Console {
@@ -58,11 +59,11 @@ func NewConsole(etl *etl.ETLService, e *echo.Echo, env string) *Console {
 
 	switch env {
 	case "prod", "production", "mainnet":
-		trustedNodeURL = "rpc.audius.engineering"
+		trustedNodeURL = "creatornode.audius.co"
 	case "staging", "stage", "testnet":
-		trustedNodeURL = "rpc.staging.audius.engineering"
+		trustedNodeURL = "creatornode11.staging.audius.co"
 	case "dev":
-		trustedNodeURL = "rpc.dev.audius.engineering"
+		trustedNodeURL = "node2.oap.devnet"
 	}
 
 	return &Console{
@@ -76,7 +77,10 @@ func NewConsole(etl *etl.ETLService, e *echo.Echo, env string) *Console {
 }
 
 func (con *Console) Initialize() {
-	// start refresher
+	// Initialize dashboard cache with 5 second refresh rate
+	con.dashboardCache = NewCache(con.buildDashboardProps, 5*time.Second, con.logger.Child("dashboard-cache"))
+
+	// Start background refreshers (but not the dashboard cache yet - that needs ETL to be ready)
 	go con.refreshTrustedBlock()
 
 	e := con.e
@@ -153,7 +157,7 @@ func (con *Console) Initialize() {
 }
 
 func (con *Console) Run() error {
-	g, _ := errgroup.WithContext(context.Background())
+	g, ctx := errgroup.WithContext(context.Background())
 
 	g.Go(func() error {
 		info, err := con.trustedNode.Core.GetNodeInfo(context.Background(), &connect.Request[corev1.GetNodeInfoRequest]{})
@@ -189,6 +193,14 @@ func (con *Console) Run() error {
 		return nil
 	})
 
+	// Start dashboard cache refresh after ETL is ready
+	g.Go(func() error {
+		// Wait a moment for ETL to initialize
+		time.Sleep(2 * time.Second)
+		con.dashboardCache.StartRefresh(ctx)
+		return nil
+	})
+
 	g.Go(func() error {
 		if err := con.e.Start(":3000"); err != nil {
 			return err
@@ -237,9 +249,9 @@ func (con *Console) Hello(c echo.Context) error {
 	return p.Render(ctx, c.Response().Writer)
 }
 
-func (con *Console) Dashboard(c echo.Context) error {
-	ctx := c.Request().Context()
-
+// buildDashboardProps builds the dashboard props by querying the database
+// This is used by the cache to refresh dashboard data periodically
+func (con *Console) buildDashboardProps(ctx context.Context) (*pages.DashboardProps, error) {
 	// Get dashboard transaction stats from materialized view
 	txStats, err := con.etl.GetDB().GetDashboardTransactionStats(ctx)
 	if err != nil {
@@ -271,20 +283,12 @@ func (con *Console) Dashboard(c echo.Context) error {
 	var blockDelta int64
 	syncProgressPercentage := float64(100) // Default to fully synced
 
-	con.logger.Info("Latest block height", "height", latestBlockHeight)
-	con.logger.Info("Trusted block height", "height", trustedBlockHeight)
-
 	if trustedBlockHeight >= 0 && latestBlockHeight >= 0 {
-
 		blockDelta = trustedBlockHeight - latestBlockHeight
 		isSyncing = blockDelta > syncThreshold
 
-		con.logger.Info("Block delta", "delta", blockDelta)
-		con.logger.Info("Is syncing", "isSyncing", isSyncing)
-
 		if isSyncing && trustedBlockHeight > 0 {
 			syncProgressPercentage = (float64(latestBlockHeight) / float64(trustedBlockHeight)) * 100
-			con.logger.Info("Sync progress percentage", "percentage", syncProgressPercentage)
 			// Ensure percentage doesn't exceed 100
 			if syncProgressPercentage > 100 {
 				syncProgressPercentage = 100
@@ -293,7 +297,6 @@ func (con *Console) Dashboard(c echo.Context) error {
 			syncProgressPercentage = 100 // Fully synced
 		}
 	} else {
-		con.logger.Info("No trusted block info, assuming synced")
 		// If we don't have trusted block info, assume synced
 		isSyncing = false
 		blockDelta = 0
@@ -335,7 +338,7 @@ func (con *Console) Dashboard(c echo.Context) error {
 	})
 	if err != nil {
 		con.logger.Warn("Failed to get blocks", "error", err)
-		return c.String(http.StatusInternalServerError, "Failed to get blocks")
+		blocks = []db.EtlBlock{}
 	}
 
 	blockPointers := make([]*db.EtlBlock, len(blocks))
@@ -398,14 +401,11 @@ func (con *Console) Dashboard(c echo.Context) error {
 		slaRollupsData = []db.EtlSlaRollup{}
 	}
 
-	con.logger.Info("SLA rollups data retrieved", "count", len(slaRollupsData))
-
 	// Build SLA performance data points for chart - Initialize as empty slice, not nil
 	slaPerformanceData := make([]*pages.SLAPerformanceDataPoint, 0)
 
 	// Build chart data if we have any rollups
 	if len(slaRollupsData) > 0 {
-		con.logger.Info("Building SLA performance chart data", "rollupCount", len(slaRollupsData))
 
 		// Extract rollup IDs for healthy validators query
 		rollupIDs := make([]int32, len(slaRollupsData))
@@ -432,50 +432,17 @@ func (con *Console) Dashboard(c echo.Context) error {
 
 		// Filter out invalid rollups and build valid data points
 		validDataPoints := make([]*pages.SLAPerformanceDataPoint, 0, len(slaRollupsData))
-		for i, rollup := range slaRollupsData {
-			// Log the first rollup to see what data we're getting
-			if i == 0 {
-				con.logger.Info("First rollup data sample",
-					"id", rollup.ID,
-					"blockHeight", rollup.BlockHeight,
-					"validatorCount", rollup.ValidatorCount,
-					"bps", rollup.Bps,
-					"tps", rollup.Tps,
-					"createdAtValid", rollup.CreatedAt.Valid,
-					"blockStart", rollup.BlockStart,
-					"blockEnd", rollup.BlockEnd)
-			}
-
-			// Comprehensive validation of rollup data
-			if rollup.ID <= 0 {
-				con.logger.Debug("Skipping rollup with invalid ID", "index", i, "rollupId", rollup.ID)
-				continue
-			}
-
-			if !rollup.CreatedAt.Valid {
-				con.logger.Debug("Skipping rollup with invalid timestamp", "rollupId", rollup.ID)
-				continue
-			}
-
-			if rollup.BlockHeight <= 0 {
-				con.logger.Debug("Skipping rollup with invalid block height", "rollupId", rollup.ID, "blockHeight", rollup.BlockHeight)
-				continue
-			}
-
-			if rollup.Bps < 0 || rollup.Tps < 0 {
-				con.logger.Debug("Skipping rollup with invalid performance data", "rollupId", rollup.ID, "bps", rollup.Bps, "tps", rollup.Tps)
-				continue
-			}
-
-			if rollup.BlockStart < 0 || rollup.BlockEnd <= 0 || rollup.BlockStart > rollup.BlockEnd {
-				con.logger.Debug("Skipping rollup with invalid block range", "rollupId", rollup.ID, "start", rollup.BlockStart, "end", rollup.BlockEnd)
+		for _, rollup := range slaRollupsData {
+			// Skip invalid rollups
+			if rollup.ID <= 0 || !rollup.CreatedAt.Valid || rollup.BlockHeight <= 0 ||
+				rollup.Bps < 0 || rollup.Tps < 0 ||
+				rollup.BlockStart < 0 || rollup.BlockEnd <= 0 || rollup.BlockStart > rollup.BlockEnd {
 				continue
 			}
 
 			// Use the validator count from the rollup data itself
 			validatorCount := rollup.ValidatorCount
 			if validatorCount <= 0 {
-				con.logger.Debug("Invalid validator count in rollup, using fallback", "rollupId", rollup.ID, "count", validatorCount)
 				validatorCount = 1 // Minimum of 1 validator
 			}
 
@@ -507,25 +474,16 @@ func (con *Console) Dashboard(c echo.Context) error {
 		// Use the data if we have any valid points after filtering
 		if len(validDataPoints) > 0 {
 			slaPerformanceData = validDataPoints
-			con.logger.Info("Successfully built SLA performance data", "validPoints", len(validDataPoints))
-		} else {
-			con.logger.Warn("No valid rollup data points after filtering", "valid", len(validDataPoints), "total", len(slaRollupsData))
-			// Keep the empty slice - don't set to nil
 		}
-	} else {
-		con.logger.Info("No rollups available for chart", "rollupCount", len(slaRollupsData))
 	}
 
-	// Final debug of what we're passing to template
-	con.logger.Info("Final SLA performance data for template", "dataPoints", len(slaPerformanceData))
-
 	// Convert rollups to pointers for template
 	recentSLARollups := make([]*db.EtlSlaRollup, len(slaRollupsData))
 	for i := range slaRollupsData {
 		recentSLARollups[i] = &slaRollupsData[i]
 	}
 
-	props := pages.DashboardProps{
+	props := &pages.DashboardProps{
 		Stats:                  stats,
 		TransactionBreakdown:   transactionBreakdown,
 		RecentBlocks:           blockPointers,
@@ -536,10 +494,26 @@ func (con *Console) Dashboard(c echo.Context) error {
 		SyncProgressPercentage: syncProgressPercentage,
 	}
 
-	p := pages.Dashboard(props)
+	return props, nil
+}
 
-	// Use context with environment
-	return p.Render(ctx, c.Response().Writer)
+func (con *Console) Dashboard(c echo.Context) error {
+	// Get cached dashboard props
+	props := con.dashboardCache.Get()
+
+	// If cache isn't ready yet, build props on-demand
+	if props == nil {
+		var err error
+		props, err = con.buildDashboardProps(c.Request().Context())
+		if err != nil {
+			con.logger.Error("Failed to build dashboard props", "error", err)
+			return c.String(http.StatusInternalServerError, "Failed to load dashboard")
+		}
+	}
+
+	// Render the dashboard
+	p := pages.Dashboard(*props)
+	return p.Render(c.Request().Context(), c.Response().Writer)
 }
 
 func (con *Console) Validators(c echo.Context) error {
diff --git a/pkg/console/templates/layouts/base.templ b/pkg/console/templates/layouts/base.templ
index 1ed38475..aadcbd53 100644
--- a/pkg/console/templates/layouts/base.templ
+++ b/pkg/console/templates/layouts/base.templ
@@ -4,18 +4,26 @@ import "fmt"
 
 templ Base(pageTitle string) {
 	<html>
-		<title>{ fmt.Sprintf("%s | Audius Explorer", pageTitle) }</title>
+		<title>{ fmt.Sprintf("%s | Open Audio Explorer", pageTitle) }</title>
 		<head>
-			<link rel="icon" type="image/svg+xml" href="/assets/images/Glyph_Black.svg"/>
+			<link rel="icon" type="image/svg+xml" href="/assets/images/favicon.png"/>
+			<link rel="stylesheet" href="/assets/css/fonts.css"/>
 			<link rel="stylesheet" href="/assets/css/output.css"/>
 			<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
 			<script src="https://unpkg.com/htmx.org@1.9.10"></script>
 			<script src="/assets/js/search.js"></script>
 			<script src="/assets/js/timezone.js"></script>
+			<script src="/assets/js/theme.js"></script>
 			<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
 			<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+			<style>
+				body {
+					font-family: 'Satoshi', sans-serif;
+					letter-spacing: 0.03em;
+				}
+			</style>
 		</head>
-		<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100">
+		<body class="bg-gray-100 dark:bg-[#000000] text-gray-900 dark:text-gray-100">
 			@Frame(pageTitle) {
 				{ children... }
 			}
diff --git a/pkg/console/templates/layouts/base_templ.go b/pkg/console/templates/layouts/base_templ.go
index 89ae1c1d..0f6c3182 100644
--- a/pkg/console/templates/layouts/base_templ.go
+++ b/pkg/console/templates/layouts/base_templ.go
@@ -36,15 +36,15 @@ func Base(pageTitle string) templ.Component {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s | Audius Explorer", pageTitle))
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%s | Open Audio Explorer", pageTitle))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layouts/base.templ`, Line: 7, Col: 57}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layouts/base.templ`, Line: 7, Col: 61}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</title><head><link rel=\"icon\" type=\"image/svg+xml\" href=\"/assets/images/Glyph_Black.svg\"><link rel=\"stylesheet\" href=\"/assets/css/output.css\"><link rel=\"stylesheet\" href=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.css\"><script src=\"https://unpkg.com/htmx.org@1.9.10\"></script><script src=\"/assets/js/search.js\"></script><script src=\"/assets/js/timezone.js\"></script><script defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"></script><script src=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.js\"></script></head><body class=\"bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</title><head><link rel=\"icon\" type=\"image/svg+xml\" href=\"/assets/images/favicon.png\"><link rel=\"stylesheet\" href=\"/assets/css/fonts.css\"><link rel=\"stylesheet\" href=\"/assets/css/output.css\"><link rel=\"stylesheet\" href=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.css\"><script src=\"https://unpkg.com/htmx.org@1.9.10\"></script><script src=\"/assets/js/search.js\"></script><script src=\"/assets/js/timezone.js\"></script><script src=\"/assets/js/theme.js\"></script><script defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"></script><script src=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.js\"></script><style>\n\t\t\t\tbody {\n\t\t\t\t\tfont-family: 'Satoshi', sans-serif;\n\t\t\t\t\tletter-spacing: 0.03em;\n\t\t\t\t}\n\t\t\t</style></head><body class=\"bg-gray-100 dark:bg-[#000000] text-gray-900 dark:text-gray-100\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/pkg/console/templates/layouts/frame.templ b/pkg/console/templates/layouts/frame.templ
index 2c15d422..596a0f5e 100644
--- a/pkg/console/templates/layouts/frame.templ
+++ b/pkg/console/templates/layouts/frame.templ
@@ -11,54 +11,64 @@ func getEnvFromContext(ctx context.Context) string {
 
 templ Frame(pageTitle string) {
 	<div class="px-30">
+		<script>
+			// Apply theme immediately to prevent flash
+			(function() {
+				const savedTheme = localStorage.getItem('theme');
+				const theme = savedTheme || 'dark'; // default to dark mode
+				if (theme === 'dark') {
+					document.documentElement.classList.add('dark');
+				}
+			})();
+		</script>
 		<div class="flex justify-between py-3">
 			<a href="/" class="flex justify-center items-center gap-2 !no-underline hover:opacity-80 transition-opacity">
-				<img src="/assets/images/Glyph_Black.svg" alt="Audius Logo" class="h-10 w-10 dark:invert"/>
-				<div class="text-2xl font-bold text-gray-900 dark:text-gray-100">Audius Explorer</div>
+				<img src="/assets/images/OAPLogo.svg" alt="Audius Logo" class="h-10 w-10 invert dark:invert-0"/>
+				<div class="text-2xl font-bold text-gray-900 dark:text-gray-100">Open Audio Explorer</div>
 			</a>
 		</div>
 		<div class="flex flex-col gap-3">
-			<div class="flex justify-between py-3 bg-white dark:bg-gray-800 -mx-30 px-30">
-				<a href="/" class="!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors">Dashboard</a>
-				<a href="/validators" class="!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors">Validators</a>
-				<a href="/validators/uptime" class="!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors">Uptime</a>
-				<a href="/transactions" class="!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors">Transactions</a>
-				<a href="/blocks" class="!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors">Blocks</a>
-				<a href="/content" class="!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors">Content</a>
-			</div>
-			<div class="flex w-full items-center">
-				<div class="w-1/3 text-2xl font-bold pl-8 text-gray-900 dark:text-gray-100">{ pageTitle }</div>
-				<div class="w-2/3">
-					<div class="relative" x-data="searchBar()" x-init="init()" @navigate.window="window.location.href = $event.detail.path" data-env={ getEnvFromContext(ctx) }>
-						<div class="relative">
-							<input
-								type="text"
-								placeholder="Search for blocks, accounts, transactions, and content..."
-								class="w-full rounded-md border-2 p-2 pr-24 bg-gray-50 dark:bg-gray-800 dark:text-gray-100 focus:ring-1 focus:ring-purple-500"
-								:class="hasNoResults ? 'border-red-500 dark:border-red-500 focus:border-red-500 dark:focus:border-red-500' : 'border-gray-300 dark:border-gray-600 focus:border-purple-500 dark:focus:border-purple-500'"
-								x-model="query"
-								@input="handleInput"
-								@keydown="handleKeydown"
-								@focus="if (query.trim()) { showSuggestions = true }"
-							/>
-							<div class="absolute right-2 top-1/2 -translate-y-1/2 text-sm text-gray-500 dark:text-gray-400 bg-gradient-to-l from-gray-50 via-gray-50 to-transparent dark:from-gray-800 dark:via-gray-800 pl-12 rounded-r-md" x-text="searchType"></div>
-						</div>
-						<div
-							class="absolute w-full mt-1 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 max-h-96 overflow-y-auto z-50"
-							x-show="showSuggestions && suggestions.length > 0"
-							@click.away="showSuggestions = false"
-						>
-							<div class="py-1">
-								<template x-for="suggestion in suggestions" :key="suggestion.id">
-									<div
-										class="px-4 py-2 hover:bg-purple-50 dark:hover:bg-purple-700 cursor-pointer"
-										:class="{ 'bg-gray-50 dark:bg-gray-700 font-medium': suggestion.isHeader }"
-										@click="selectSuggestion(suggestion)"
-									>
-										<div class="text-sm truncate" :class="suggestion.isHeader ? 'text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-gray-100'" x-text="suggestion.title"></div>
-										<div x-show="!suggestion.isHeader" class="text-xs text-gray-500 dark:text-gray-400 truncate" x-text="suggestion.subtitle"></div>
-									</div>
-								</template>
+			<div class="flex justify-between py-3 bg-white dark:bg-[#141414] -mx-30 px-30">
+				<div class="flex w-full items-center">
+					<div class="w-2/3 flex justify-evenly">
+						<a href="/" class="!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors">Dashboard</a>
+						<a href="/validators" class="!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors">Validators</a>
+						<a href="/validators/uptime" class="!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors">Uptime</a>
+						<a href="/transactions" class="!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors">Transactions</a>
+						<a href="/blocks" class="!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors">Blocks</a>
+					</div>
+					<div class="w-1/3">
+						<div class="relative" x-data="searchBar()" x-init="init()" @navigate.window="window.location.href = $event.detail.path" data-env={ getEnvFromContext(ctx) }>
+							<div class="relative">
+								<input
+									type="text"
+									placeholder="Search for blocks, accounts, and transactions..."
+									class="w-full rounded-md border-2 p-2 pr-24 bg-gray-50 dark:bg-[#141414] dark:text-gray-100 focus:ring-1 focus:ring-purple-500"
+									:class="hasNoResults ? 'border-red-500 dark:border-red-500 focus:border-red-500 dark:focus:border-red-500' : 'border-gray-300 dark:border-gray-600 focus:border-purple-500 dark:focus:border-purple-500'"
+									x-model="query"
+									@input="handleInput"
+									@keydown="handleKeydown"
+									@focus="if (query.trim()) { showSuggestions = true }"
+								/>
+								<div class="absolute right-2 top-1/2 -translate-y-1/2 text-sm text-gray-500 dark:text-gray-400 bg-gradient-to-l from-gray-50 via-gray-50 to-transparent dark:from-gray-800 dark:via-gray-800 pl-12 rounded-r-md" x-text="searchType"></div>
+							</div>
+							<div
+								class="absolute w-full mt-1 bg-white dark:bg-[#141414] rounded-md shadow-lg border border-gray-200 dark:border-gray-700 max-h-96 overflow-y-auto z-50"
+								x-show="showSuggestions && suggestions.length > 0"
+								@click.away="showSuggestions = false"
+							>
+								<div class="py-1">
+									<template x-for="suggestion in suggestions" :key="suggestion.id">
+										<div
+											class="px-4 py-2 hover:bg-purple-50 dark:hover:bg-purple-700 cursor-pointer"
+											:class="{ 'bg-gray-50 dark:bg-[#141414] font-medium': suggestion.isHeader }"
+											@click="selectSuggestion(suggestion)"
+										>
+											<div class="text-sm truncate" :class="suggestion.isHeader ? 'text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-gray-100'" x-text="suggestion.title"></div>
+											<div x-show="!suggestion.isHeader" class="text-xs text-gray-500 dark:text-gray-400 truncate" x-text="suggestion.subtitle"></div>
+										</div>
+									</template>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -67,14 +77,22 @@ templ Frame(pageTitle string) {
 			{ children... }
 		</div>
 		<div class="mt-8 border-t border-gray-200 dark:border-gray-700 py-4">
-			<div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
+			<div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400" x-data="themeToggle()" x-init="init()">
 				<div class="flex items-center gap-4">
-					<a href="https://github.com/audiusproject" target="_blank" rel="noopener noreferrer" class="!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300">GitHub</a>
-					<a href="https://docs.audius.org" target="_blank" rel="noopener noreferrer" class="!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300">Docs</a>
-					<a href="https://api.audius.org" target="_blank" rel="noopener noreferrer" class="!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300">API</a>
+					<button @click="toggleTheme()" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer" title="Toggle theme">
+						<svg x-show="theme === 'light'" class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+						</svg>
+						<svg x-show="theme === 'dark'" class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+						</svg>
+					</button>
+					<a href="https://openaudio.org" target="_blank" rel="noopener noreferrer" class="!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300">OpenAudio</a>
+					<a href="https://github.com/openaudio" target="_blank" rel="noopener noreferrer" class="!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300">GitHub</a>
+					<a href="https://openaudio.org/docs" target="_blank" rel="noopener noreferrer" class="!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300">Docs</a>
 				</div>
 				<div class="flex items-center gap-4">
-					<span>Made with ⚡️ by the Protocol Team</span>
+					<span>Made with ⚡️ by the OpenAudio Team</span>
 				</div>
 			</div>
 		</div>
diff --git a/pkg/console/templates/layouts/frame_templ.go b/pkg/console/templates/layouts/frame_templ.go
index c871140a..db77da51 100644
--- a/pkg/console/templates/layouts/frame_templ.go
+++ b/pkg/console/templates/layouts/frame_templ.go
@@ -38,33 +38,20 @@ func Frame(pageTitle string) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"px-30\"><div class=\"flex justify-between py-3\"><a href=\"/\" class=\"flex justify-center items-center gap-2 !no-underline hover:opacity-80 transition-opacity\"><img src=\"/assets/images/Glyph_Black.svg\" alt=\"Audius Logo\" class=\"h-10 w-10 dark:invert\"><div class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">Audius Explorer</div></a></div><div class=\"flex flex-col gap-3\"><div class=\"flex justify-between py-3 bg-white dark:bg-gray-800 -mx-30 px-30\"><a href=\"/\" class=\"!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors\">Dashboard</a> <a href=\"/validators\" class=\"!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors\">Validators</a> <a href=\"/validators/uptime\" class=\"!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors\">Uptime</a> <a href=\"/transactions\" class=\"!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors\">Transactions</a> <a href=\"/blocks\" class=\"!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors\">Blocks</a> <a href=\"/content\" class=\"!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors\">Content</a></div><div class=\"flex w-full items-center\"><div class=\"w-1/3 text-2xl font-bold pl-8 text-gray-900 dark:text-gray-100\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"px-30\"><script>\n\t\t\t// Apply theme immediately to prevent flash\n\t\t\t(function() {\n\t\t\t\tconst savedTheme = localStorage.getItem('theme');\n\t\t\t\tconst theme = savedTheme || 'dark'; // default to dark mode\n\t\t\t\tif (theme === 'dark') {\n\t\t\t\t\tdocument.documentElement.classList.add('dark');\n\t\t\t\t}\n\t\t\t})();\n\t\t</script><div class=\"flex justify-between py-3\"><a href=\"/\" class=\"flex justify-center items-center gap-2 !no-underline hover:opacity-80 transition-opacity\"><img src=\"/assets/images/OAPLogo.svg\" alt=\"Audius Logo\" class=\"h-10 w-10 invert dark:invert-0\"><div class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">Open Audio Explorer</div></a></div><div class=\"flex flex-col gap-3\"><div class=\"flex justify-between py-3 bg-white dark:bg-[#141414] -mx-30 px-30\"><div class=\"flex w-full items-center\"><div class=\"w-2/3 flex justify-evenly\"><a href=\"/\" class=\"!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors\">Dashboard</a> <a href=\"/validators\" class=\"!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors\">Validators</a> <a href=\"/validators/uptime\" class=\"!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors\">Uptime</a> <a href=\"/transactions\" class=\"!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors\">Transactions</a> <a href=\"/blocks\" class=\"!text-gray-600 dark:!text-gray-400 !no-underline hover:!bg-purple-50 hover:!text-purple-700 dark:hover:!bg-purple-700 dark:hover:!text-gray-300 px-3 py-1 rounded transition-colors\">Blocks</a></div><div class=\"w-1/3\"><div class=\"relative\" x-data=\"searchBar()\" x-init=\"init()\" @navigate.window=\"window.location.href = $event.detail.path\" data-env=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(pageTitle)
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(getEnvFromContext(ctx))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layouts/frame.templ`, Line: 30, Col: 91}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layouts/frame.templ`, Line: 41, Col: 159}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</div><div class=\"w-2/3\"><div class=\"relative\" x-data=\"searchBar()\" x-init=\"init()\" @navigate.window=\"window.location.href = $event.detail.path\" data-env=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(getEnvFromContext(ctx))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layouts/frame.templ`, Line: 32, Col: 158}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\"><div class=\"relative\"><input type=\"text\" placeholder=\"Search for blocks, accounts, transactions, and content...\" class=\"w-full rounded-md border-2 p-2 pr-24 bg-gray-50 dark:bg-gray-800 dark:text-gray-100 focus:ring-1 focus:ring-purple-500\" :class=\"hasNoResults ? 'border-red-500 dark:border-red-500 focus:border-red-500 dark:focus:border-red-500' : 'border-gray-300 dark:border-gray-600 focus:border-purple-500 dark:focus:border-purple-500'\" x-model=\"query\" @input=\"handleInput\" @keydown=\"handleKeydown\" @focus=\"if (query.trim()) { showSuggestions = true }\"><div class=\"absolute right-2 top-1/2 -translate-y-1/2 text-sm text-gray-500 dark:text-gray-400 bg-gradient-to-l from-gray-50 via-gray-50 to-transparent dark:from-gray-800 dark:via-gray-800 pl-12 rounded-r-md\" x-text=\"searchType\"></div></div><div class=\"absolute w-full mt-1 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 max-h-96 overflow-y-auto z-50\" x-show=\"showSuggestions && suggestions.length > 0\" @click.away=\"showSuggestions = false\"><div class=\"py-1\"><template x-for=\"suggestion in suggestions\" :key=\"suggestion.id\"><div class=\"px-4 py-2 hover:bg-purple-50 dark:hover:bg-purple-700 cursor-pointer\" :class=\"{ 'bg-gray-50 dark:bg-gray-700 font-medium': suggestion.isHeader }\" @click=\"selectSuggestion(suggestion)\"><div class=\"text-sm truncate\" :class=\"suggestion.isHeader ? 'text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-gray-100'\" x-text=\"suggestion.title\"></div><div x-show=\"!suggestion.isHeader\" class=\"text-xs text-gray-500 dark:text-gray-400 truncate\" x-text=\"suggestion.subtitle\"></div></div></template></div></div></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"><div class=\"relative\"><input type=\"text\" placeholder=\"Search for blocks, accounts, and transactions...\" class=\"w-full rounded-md border-2 p-2 pr-24 bg-gray-50 dark:bg-[#141414] dark:text-gray-100 focus:ring-1 focus:ring-purple-500\" :class=\"hasNoResults ? 'border-red-500 dark:border-red-500 focus:border-red-500 dark:focus:border-red-500' : 'border-gray-300 dark:border-gray-600 focus:border-purple-500 dark:focus:border-purple-500'\" x-model=\"query\" @input=\"handleInput\" @keydown=\"handleKeydown\" @focus=\"if (query.trim()) { showSuggestions = true }\"><div class=\"absolute right-2 top-1/2 -translate-y-1/2 text-sm text-gray-500 dark:text-gray-400 bg-gradient-to-l from-gray-50 via-gray-50 to-transparent dark:from-gray-800 dark:via-gray-800 pl-12 rounded-r-md\" x-text=\"searchType\"></div></div><div class=\"absolute w-full mt-1 bg-white dark:bg-[#141414] rounded-md shadow-lg border border-gray-200 dark:border-gray-700 max-h-96 overflow-y-auto z-50\" x-show=\"showSuggestions && suggestions.length > 0\" @click.away=\"showSuggestions = false\"><div class=\"py-1\"><template x-for=\"suggestion in suggestions\" :key=\"suggestion.id\"><div class=\"px-4 py-2 hover:bg-purple-50 dark:hover:bg-purple-700 cursor-pointer\" :class=\"{ 'bg-gray-50 dark:bg-[#141414] font-medium': suggestion.isHeader }\" @click=\"selectSuggestion(suggestion)\"><div class=\"text-sm truncate\" :class=\"suggestion.isHeader ? 'text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-gray-100'\" x-text=\"suggestion.title\"></div><div x-show=\"!suggestion.isHeader\" class=\"text-xs text-gray-500 dark:text-gray-400 truncate\" x-text=\"suggestion.subtitle\"></div></div></template></div></div></div></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -72,7 +59,7 @@ func Frame(pageTitle string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div><div class=\"mt-8 border-t border-gray-200 dark:border-gray-700 py-4\"><div class=\"flex justify-between items-center text-sm text-gray-500 dark:text-gray-400\"><div class=\"flex items-center gap-4\"><a href=\"https://github.com/audiusproject\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300\">GitHub</a> <a href=\"https://docs.audius.org\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300\">Docs</a> <a href=\"https://api.audius.org\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300\">API</a></div><div class=\"flex items-center gap-4\"><span>Made with ⚡️ by the Protocol Team</span></div></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</div><div class=\"mt-8 border-t border-gray-200 dark:border-gray-700 py-4\"><div class=\"flex justify-between items-center text-sm text-gray-500 dark:text-gray-400\" x-data=\"themeToggle()\" x-init=\"init()\"><div class=\"flex items-center gap-4\"><button @click=\"toggleTheme()\" class=\"p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer\" title=\"Toggle theme\"><svg x-show=\"theme === 'light'\" class=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"></path></svg> <svg x-show=\"theme === 'dark'\" class=\"w-5 h-5 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"></path></svg></button> <a href=\"https://openaudio.org\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300\">OpenAudio</a> <a href=\"https://github.com/openaudio\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300\">GitHub</a> <a href=\"https://openaudio.org/docs\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"!text-gray-500 dark:!text-gray-400 !no-underline hover:!text-gray-700 dark:hover:!text-gray-300\">Docs</a></div><div class=\"flex items-center gap-4\"><span>Made with ⚡️ by the OpenAudio Team</span></div></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/pkg/console/templates/pages/account.templ b/pkg/console/templates/pages/account.templ
index 3526fc2b..bb397518 100644
--- a/pkg/console/templates/pages/account.templ
+++ b/pkg/console/templates/pages/account.templ
@@ -37,7 +37,7 @@ type AccountProps struct {
 
 templ Account(props AccountProps) {
 	@layouts.Base(fmt.Sprintf("Account %s", props.Address[:6])) {
-		<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+		<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 			<div class="flex justify-between items-center mb-6">
 				<h2 class="text-2xl font-light text-gray-900 dark:text-gray-100">
 					Account 
@@ -49,7 +49,7 @@ templ Account(props AccountProps) {
 					Page { fmt.Sprint(props.CurrentPage) } • { fmt.Sprint(props.PageSize) } transactions per page
 				</div>
 			</div>
-			<div class="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+			<div class="mb-6 p-4 bg-gray-50 dark:bg-[#141414] rounded-lg">
 				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
 					<div>
 						<div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Address</div>
@@ -64,7 +64,7 @@ templ Account(props AccountProps) {
 							<div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Filter by Relation</div>
 							<select
 								id="relationFilter"
-								class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+								class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-[#141414] text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
 								onchange="updateFilters()"
 							>
 								<option value="all" selected?={ props.CurrentFilter == "" || props.CurrentFilter == "all" }>All Relations</option>
@@ -80,7 +80,7 @@ templ Account(props AccountProps) {
 							type="date"
 							id="startDate"
 							value={ props.StartDate }
-							class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+							class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-[#141414] text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
 							onchange="updateFilters()"
 						/>
 					</div>
@@ -90,7 +90,7 @@ templ Account(props AccountProps) {
 							type="date"
 							id="endDate"
 							value={ props.EndDate }
-							class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+							class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-[#141414] text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
 							onchange="updateFilters()"
 						/>
 					</div>
@@ -110,7 +110,7 @@ templ Account(props AccountProps) {
 									</div>
 									<div class="flex-1">
 										<div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Type</div>
-										<span class="px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded">
+										<span class="px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded">
 											{ tx.TxType }
 										</span>
 									</div>
@@ -140,20 +140,20 @@ templ Account(props AccountProps) {
 				<div class="flex justify-between items-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
 					<div class="flex gap-3">
 						if props.HasPrev {
-							<a href={ templ.SafeURL(buildPaginationURL(props.Address, props.CurrentPage-1, props.PageSize, props.CurrentFilter, props.StartDate, props.EndDate)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
+							<a href={ templ.SafeURL(buildPaginationURL(props.Address, props.CurrentPage-1, props.PageSize, props.CurrentFilter, props.StartDate, props.EndDate)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
 								← Previous
 							</a>
 						} else {
-							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed">
+							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed">
 								← Previous
 							</span>
 						}
 						if props.HasNext {
-							<a href={ templ.SafeURL(buildPaginationURL(props.Address, props.CurrentPage+1, props.PageSize, props.CurrentFilter, props.StartDate, props.EndDate)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
+							<a href={ templ.SafeURL(buildPaginationURL(props.Address, props.CurrentPage+1, props.PageSize, props.CurrentFilter, props.StartDate, props.EndDate)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
 								Next →
 							</a>
 						} else {
-							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed">
+							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed">
 								Next →
 							</span>
 						}
diff --git a/pkg/console/templates/pages/account_templ.go b/pkg/console/templates/pages/account_templ.go
index 9439c55e..2047c9d8 100644
--- a/pkg/console/templates/pages/account_templ.go
+++ b/pkg/console/templates/pages/account_templ.go
@@ -76,7 +76,7 @@ func Account(props AccountProps) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Account  <span class=\"font-mono text-purple-600 dark:text-purple-400\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Account  <span class=\"font-mono text-purple-600 dark:text-purple-400\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -115,7 +115,7 @@ func Account(props AccountProps) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " transactions per page</div></div><div class=\"mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg\"><div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4\"><div><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Address</div><div class=\"font-mono text-sm text-gray-900 dark:text-gray-100 break-all\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " transactions per page</div></div><div class=\"mb-6 p-4 bg-gray-50 dark:bg-[#141414] rounded-lg\"><div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4\"><div><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Address</div><div class=\"font-mono text-sm text-gray-900 dark:text-gray-100 break-all\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -146,7 +146,7 @@ func Account(props AccountProps) templ.Component {
 				return templ_7745c5c3_Err
 			}
 			if len(props.RelationTypes) > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Filter by Relation</div><select id=\"relationFilter\" class=\"w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent\" onchange=\"updateFilters()\"><option value=\"all\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Filter by Relation</div><select id=\"relationFilter\" class=\"w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-[#141414] text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent\" onchange=\"updateFilters()\"><option value=\"all\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -220,7 +220,7 @@ func Account(props AccountProps) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\" class=\"w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent\" onchange=\"updateFilters()\"></div><div><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">To Date</div><input type=\"date\" id=\"endDate\" value=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\" class=\"w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-[#141414] text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent\" onchange=\"updateFilters()\"></div><div><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">To Date</div><input type=\"date\" id=\"endDate\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -233,7 +233,7 @@ func Account(props AccountProps) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\" class=\"w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent\" onchange=\"updateFilters()\"></div></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\" class=\"w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-[#141414] text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent\" onchange=\"updateFilters()\"></div></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -264,7 +264,7 @@ func Account(props AccountProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div></div><div class=\"flex-1\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Type</div><span class=\"px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div></div><div class=\"flex-1\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Type</div><span class=\"px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -334,12 +334,12 @@ func Account(props AccountProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">← Previous</a> ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">← Previous</a> ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed\">← Previous</span> ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed\">← Previous</span> ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -358,12 +358,12 @@ func Account(props AccountProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">Next →</a>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">Next →</a>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed\">Next →</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed\">Next →</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
diff --git a/pkg/console/templates/pages/block.templ b/pkg/console/templates/pages/block.templ
index 52fe933b..f29e535a 100644
--- a/pkg/console/templates/pages/block.templ
+++ b/pkg/console/templates/pages/block.templ
@@ -16,7 +16,7 @@ templ Block(props BlockProps) {
 	@layouts.Base(fmt.Sprintf("Block %d", props.Block.BlockHeight)) {
 		<div class="space-y-6">
 			<!-- Block Overview -->
-			<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+			<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 				<div class="flex items-center justify-between mb-6">
 					<h2 class="text-2xl font-light text-gray-900 dark:text-gray-100">Block { fmt.Sprintf("%d", props.Block.BlockHeight) }</h2>
 					<div class="text-sm text-gray-500 dark:text-gray-400">
@@ -45,7 +45,7 @@ templ Block(props BlockProps) {
 				</div>
 			</div>
 			<!-- Transactions -->
-			<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+			<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 				<div class="flex items-center justify-between mb-6">
 					<h3 class="text-xl font-light text-gray-900 dark:text-gray-100">Transactions</h3>
 					<div class="text-sm text-gray-500 dark:text-gray-400">
@@ -65,7 +65,7 @@ templ Block(props BlockProps) {
 									</div>
 									<div class="border-l border-gray-200 dark:border-gray-700 pl-4">
 										<div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Type</div>
-										<span class="px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded">
+										<span class="px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded">
 											{ tx.TxType }
 										</span>
 									</div>
diff --git a/pkg/console/templates/pages/block_templ.go b/pkg/console/templates/pages/block_templ.go
index 5b952d02..6bb8d970 100644
--- a/pkg/console/templates/pages/block_templ.go
+++ b/pkg/console/templates/pages/block_templ.go
@@ -53,7 +53,7 @@ func Block(props BlockProps) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"space-y-6\"><!-- Block Overview --><div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex items-center justify-between mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Block ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"space-y-6\"><!-- Block Overview --><div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex items-center justify-between mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Block ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -126,7 +126,7 @@ func Block(props BlockProps) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div></div></div></div><!-- Transactions --><div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex items-center justify-between mb-6\"><h3 class=\"text-xl font-light text-gray-900 dark:text-gray-100\">Transactions</h3><div class=\"text-sm text-gray-500 dark:text-gray-400\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div></div></div></div><!-- Transactions --><div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex items-center justify-between mb-6\"><h3 class=\"text-xl font-light text-gray-900 dark:text-gray-100\">Transactions</h3><div class=\"text-sm text-gray-500 dark:text-gray-400\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -175,7 +175,7 @@ func Block(props BlockProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</a></div><div class=\"border-l border-gray-200 dark:border-gray-700 pl-4\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Type</div><span class=\"px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</a></div><div class=\"border-l border-gray-200 dark:border-gray-700 pl-4\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Type</div><span class=\"px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
diff --git a/pkg/console/templates/pages/blocks.templ b/pkg/console/templates/pages/blocks.templ
index b9ca48aa..649250bb 100644
--- a/pkg/console/templates/pages/blocks.templ
+++ b/pkg/console/templates/pages/blocks.templ
@@ -18,7 +18,7 @@ type BlocksProps struct {
 
 templ Blocks(props BlocksProps) {
 	@layouts.Base("Blocks") {
-		<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+		<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 			<div class="flex justify-between items-center mb-6">
 				<h2 class="text-2xl font-light text-gray-900 dark:text-gray-100">Latest Blocks</h2>
 				<div class="text-sm text-gray-500 dark:text-gray-400">
@@ -63,20 +63,20 @@ templ Blocks(props BlocksProps) {
 				<div class="flex justify-between items-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
 					<div class="flex gap-3">
 						if props.HasPrev {
-							<a href={ templ.SafeURL(fmt.Sprintf("/blocks?page=%d&count=%d", props.CurrentPage-1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
+							<a href={ templ.SafeURL(fmt.Sprintf("/blocks?page=%d&count=%d", props.CurrentPage-1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
 								← Previous
 							</a>
 						} else {
-							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed">
+							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed">
 								← Previous
 							</span>
 						}
 						if props.HasNext {
-							<a href={ templ.SafeURL(fmt.Sprintf("/blocks?page=%d&count=%d", props.CurrentPage+1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
+							<a href={ templ.SafeURL(fmt.Sprintf("/blocks?page=%d&count=%d", props.CurrentPage+1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
 								Next →
 							</a>
 						} else {
-							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed">
+							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed">
 								Next →
 							</span>
 						}
diff --git a/pkg/console/templates/pages/blocks_templ.go b/pkg/console/templates/pages/blocks_templ.go
index 58aad0d8..629939bc 100644
--- a/pkg/console/templates/pages/blocks_templ.go
+++ b/pkg/console/templates/pages/blocks_templ.go
@@ -57,7 +57,7 @@ func Blocks(props BlocksProps) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Latest Blocks</h2><div class=\"text-sm text-gray-500 dark:text-gray-400\">Page ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Latest Blocks</h2><div class=\"text-sm text-gray-500 dark:text-gray-400\">Page ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -176,12 +176,12 @@ func Blocks(props BlocksProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">← Previous</a> ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">← Previous</a> ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed\">← Previous</span> ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed\">← Previous</span> ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -200,12 +200,12 @@ func Blocks(props BlocksProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">Next →</a>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">Next →</a>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed\">Next →</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed\">Next →</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
diff --git a/pkg/console/templates/pages/dashboard.templ b/pkg/console/templates/pages/dashboard.templ
index 6547ce2f..4300a9c5 100644
--- a/pkg/console/templates/pages/dashboard.templ
+++ b/pkg/console/templates/pages/dashboard.templ
@@ -150,18 +150,17 @@ templ Dashboard(props DashboardProps) {
 	@layouts.Base("Dashboard") {
 		<div class="space-y-6" x-data="blockEvents()" x-init="init()">
 			<!-- Section 1: Current Stats -->
-			<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+			<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 				<div id="stats-header" x-data="blockEvents()" x-init="init()">
 					<div class="flex items-center justify-between">
-						<div class="flex-1">
-							<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Block Height</h4>
+						<div class="flex-1 flex flex-col items-center">
 							<div class="flex items-center h-12" x-data="animatedNumber()" x-init="init(latestBlock.height)">
 								<template x-for="(digit, index) in digits" :key="index">
 									<div class="relative h-10 w-6 overflow-hidden flex items-center justify-center">
 										<!-- Current digit (slides down when animating) -->
 										<div class="absolute inset-0 flex items-center justify-center">
 											<span
-												class="text-3xl font-bold text-gray-900 dark:text-gray-100 tabular-nums"
+												class="text-4xl font-bold text-gray-900 dark:text-gray-100 tabular-nums"
 												:class="getCurrentDigitClass(digit)"
 												x-text="digit.current"
 											></span>
@@ -169,7 +168,7 @@ templ Dashboard(props DashboardProps) {
 										<!-- Next digit (slides in from above when animating) -->
 										<div class="absolute inset-0 flex items-center justify-center">
 											<span
-												class="text-3xl font-bold text-gray-900 dark:text-gray-100 tabular-nums"
+												class="text-4xl font-bold text-gray-900 dark:text-gray-100 tabular-nums"
 												:class="getNextDigitClass(digit)"
 												x-text="digit.next"
 											></span>
@@ -177,13 +176,9 @@ templ Dashboard(props DashboardProps) {
 									</div>
 								</template>
 							</div>
+							<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Block Height</h4>
 						</div>
-						<div class="flex-1 border-l border-gray-200 dark:border-gray-700 pl-6">
-							<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Chain ID</h4>
-							<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{ props.Stats.ChainID }</p>
-						</div>
-						<div class="flex-none w-32 border-l border-gray-200 dark:border-gray-700 pl-6">
-							<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Block Time</h4>
+						<div class="flex-1 w-32 border-l border-gray-200 dark:border-gray-700 pl-6 flex flex-col items-center">
 							if props.Stats.AvgBlockTime > 0 {
 								<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{ fmt.Sprintf("%.2fs", props.Stats.AvgBlockTime) }</p>
 							} else if props.Stats.BPS > 0 {
@@ -193,9 +188,9 @@ templ Dashboard(props DashboardProps) {
 								<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">-</p>
 								<p class="text-xs text-gray-500 dark:text-gray-400">No data</p>
 							}
+							<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Block Time</h4>
 						</div>
-						<div class="flex-none w-40 border-l border-gray-200 dark:border-gray-700 pl-6">
-							<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Sync Status</h4>
+						<div class="flex-1 w-40 border-l border-gray-200 dark:border-gray-700 pl-6 flex flex-col items-center">
 							if props.Stats.IsSyncing {
 								<div class="flex items-center">
 									<div class="w-2 h-2 bg-yellow-500 rounded-full mr-2 animate-pulse"></div>
@@ -206,8 +201,8 @@ templ Dashboard(props DashboardProps) {
 									<div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
 									<p class="text-xl font-bold text-green-600 dark:text-green-400">Synced</p>
 								</div>
-								<p class="text-xs text-gray-500 dark:text-gray-400">Up to date</p>
 							}
+							<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Sync Status</h4>
 						</div>
 					</div>
 					<!-- Sync Progress Bar -->
@@ -225,7 +220,7 @@ templ Dashboard(props DashboardProps) {
 									({ fmt.Sprintf("%.1f%%", props.SyncProgressPercentage) })
 								</span>
 							</div>
-							<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 relative overflow-hidden">
+							<div class="w-full bg-gray-200 dark:bg-stone-700 rounded-full h-2 relative overflow-hidden">
 								<!-- Exact progress representation using calculated percentage -->
 								<div
 									class={ fmt.Sprintf("bg-purple-600 h-2 rounded-full transition-all duration-300 ease-in-out %s", getProgressBarClass(props.SyncProgressPercentage)) }
@@ -236,11 +231,11 @@ templ Dashboard(props DashboardProps) {
 				</div>
 			</div>
 			<!-- Section 2: Live Map & Validator Info -->
-			<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
+			<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl overflow-hidden">
 				<div class="relative">
 					<!-- Map - Full Background -->
 					<div
-						class="relative bg-gray-100 dark:bg-gray-700 h-96 z-10"
+						class="relative bg-gray-100 dark:bg-stone-700 h-96 z-10"
 						x-data="livePlayMap()"
 						x-init="initSSEEventSource(); initMap()"
 					>
@@ -260,7 +255,7 @@ templ Dashboard(props DashboardProps) {
 				</div>
 			</div>
 			<!-- Section 3: Transaction Analytics -->
-			<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+			<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 				<div class="flex items-center justify-between mb-6">
 					<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Transaction Analytics</h3>
 				</div>
@@ -269,26 +264,26 @@ templ Dashboard(props DashboardProps) {
 					<div class="lg:col-span-2 space-y-6">
 						<!-- Top row: TPS and Total Transactions -->
 						<div class="grid grid-cols-2 gap-6">
-							<div id="tps-fragment" hx-get="/fragments/tps" hx-trigger="every 5s" hx-swap="outerHTML">
-								@TPSFragment(props.Stats)
-							</div>
 							<div id="total-transactions-fragment" hx-get="/fragments/total-transactions" hx-trigger="every 10s" hx-swap="outerHTML">
 								@TotalTransactionsFragment(props.Stats)
 							</div>
+							<div id="tps-fragment" hx-get="/fragments/tps" hx-trigger="every 5s" hx-swap="outerHTML">
+								@TPSFragment(props.Stats)
+							</div>
 						</div>
 						<!-- Bottom row: Volume metrics -->
 						<div class="grid grid-cols-3 border-t border-gray-200 dark:border-gray-700 pt-6">
-							<div class="border-r border-gray-200 dark:border-gray-700 pr-6">
+							<div class="border-r border-gray-200 dark:border-gray-700 pr-6 flex flex-col items-center">
 								<div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">24h Volume</div>
 								<div class="text-2xl font-light text-gray-900 dark:text-gray-100 mb-1">{ formatNumber(props.Stats.TotalTransactions24h) }</div>
 								<div class="text-xs text-gray-500 dark:text-gray-400">Daily rate</div>
 							</div>
-							<div class="border-r border-gray-200 dark:border-gray-700 pr-6 pl-6">
+							<div class="border-r border-gray-200 dark:border-gray-700 pr-6 pl-6 flex flex-col items-center">
 								<div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">7d Volume</div>
 								<div class="text-2xl font-light text-gray-900 dark:text-gray-100 mb-1">{ formatNumber(props.Stats.TotalTransactions7d) }</div>
 								<div class="text-xs text-gray-500 dark:text-gray-400">Avg: { formatNumber(props.Stats.TotalTransactions7d / 7) }/day</div>
 							</div>
-							<div class="pl-6">
+							<div class="pl-6 flex flex-col items-center">
 								<div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">30d Volume</div>
 								<div class="text-2xl font-light text-gray-900 dark:text-gray-100 mb-1">{ formatNumber(props.Stats.TotalTransactions30d) }</div>
 								<div class="text-xs text-gray-500 dark:text-gray-400">Avg: { formatNumber(props.Stats.TotalTransactions30d / 30) }/day</div>
@@ -302,7 +297,7 @@ templ Dashboard(props DashboardProps) {
 							if len(props.TransactionBreakdown) > 0 {
 								for _, breakdown := range props.TransactionBreakdown {
 									<div class="flex items-center justify-between">
-										<span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-gray-600 dark:text-gray-400">{ breakdown.Type }</span>
+										<span class="text-xs px-2 py-1 bg-gray-100 dark:bg-stone-700 rounded text-gray-600 dark:text-gray-200">{ breakdown.Type }</span>
 										<span class="text-sm font-medium text-gray-900 dark:text-gray-100 tabular-nums">{ formatNumber(breakdown.Count) }</span>
 									</div>
 								}
@@ -315,8 +310,8 @@ templ Dashboard(props DashboardProps) {
 			</div>
 			<!-- Section 4: SLA Performance Chart -->
 			if props.SLAPerformanceData != nil && len(props.SLAPerformanceData) > 0 {
-				<div class="bg-white dark:bg-gray-900 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
-					<div class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+				<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+					<div class="bg-white dark:bg-[#141414] px-6 py-4 border-b border-gray-200 dark:border-gray-700">
 						<div class="flex items-center justify-between">
 							<div class="flex items-center space-x-3">
 								<div class="w-3 h-3 bg-purple-500 rounded-full animate-pulse"></div>
@@ -335,7 +330,7 @@ templ Dashboard(props DashboardProps) {
 									<div class="font-medium" x-text="blockRange"></div>
 									<div class="text-gray-400" x-text="timeRange"></div>
 								</div>
-								<div class="w-px h-8 bg-gray-300 dark:bg-gray-600"></div>
+								<div class="w-px h-8 bg-gray-300 dark:bg-[#141414]"></div>
 								<div class="flex items-center space-x-1">
 									<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
 									<span class="font-medium">LIVE</span>
@@ -343,7 +338,7 @@ templ Dashboard(props DashboardProps) {
 							</div>
 						</div>
 					</div>
-					<div class="relative h-96 bg-gray-50 dark:bg-gray-900 p-4">
+					<div class="relative h-96 bg-gray-50 dark:bg-[#141414] p-4">
 						<canvas
 							id="slaPerformanceChart"
 							class="w-full h-full"
@@ -357,7 +352,7 @@ templ Dashboard(props DashboardProps) {
 			<!-- Section 5: Recent Blocks & Transactions -->
 			<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
 				<!-- Latest Blocks -->
-				<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+				<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 					<div class="flex justify-between items-center mb-4">
 						<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Latest Blocks</h3>
 						<a href="/blocks" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline text-sm">View all →</a>
@@ -365,14 +360,14 @@ templ Dashboard(props DashboardProps) {
 					if len(props.RecentBlocks) > 0 {
 						<div class="space-y-2">
 							for _, block := range props.RecentBlocks {
-								<div class="flex items-center justify-between py-3 px-4 border border-gray-200 dark:border-gray-700 rounded hover:bg-purple-50 hover:border-purple-200 dark:hover:bg-gray-700 transition-colors">
+								<div class="flex items-center justify-between py-3 px-4 border border-gray-200 dark:border-gray-700 rounded hover:bg-purple-50 hover:border-purple-200 dark:hover:bg-stone-700 transition-colors">
 									<div class="flex items-center gap-4">
-										<a href={ templ.SafeURL(fmt.Sprintf("/block/%d", block.BlockHeight)) } class="font-semibold text-purple-600 dark:text-purple-400 hover:underline">
+										<a href={ templ.SafeURL(fmt.Sprintf("/block/%d", block.BlockHeight)) } class="font-semibold text-gray-600 dark:text-gray-200 hover:underline">
 											{ fmt.Sprintf("#%d", block.BlockHeight) }
 										</a>
-										<a href={ templ.SafeURL(fmt.Sprintf("/validator/%s", block.ProposerAddress)) } class="font-mono text-xs text-purple-600 dark:text-purple-400 hover:underline">
+										<a href={ templ.SafeURL(fmt.Sprintf("/validator/%s", block.ProposerAddress)) } class="font-mono text-xs text-gray-600 dark:text-gray-200 hover:underline">
 											if len(block.ProposerAddress) > 8 {
-												{ block.ProposerAddress[:4] }...{ block.ProposerAddress[len(block.ProposerAddress)-4:] }
+												{ block.ProposerAddress[:12] }...{ block.ProposerAddress[len(block.ProposerAddress)-4:] }
 											} else {
 												{ block.ProposerAddress }
 											}
@@ -393,7 +388,7 @@ templ Dashboard(props DashboardProps) {
 					}
 				</div>
 				<!-- Latest Transactions -->
-				<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+				<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 					<div class="flex justify-between items-center mb-4">
 						<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Latest Transactions</h3>
 						<a href="/transactions" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline text-sm">View all →</a>
@@ -401,20 +396,20 @@ templ Dashboard(props DashboardProps) {
 					if len(props.RecentTransactions) > 0 {
 						<div class="space-y-2">
 							for _, tx := range props.RecentTransactions {
-								<div class="flex items-center justify-between py-3 px-4 border border-gray-200 dark:border-gray-700 rounded hover:bg-purple-50 hover:border-purple-200 dark:hover:bg-gray-700 transition-colors">
+								<div class="flex items-center justify-between py-3 px-4 border border-gray-200 dark:border-gray-700 rounded hover:bg-purple-50 hover:border-purple-200 dark:hover:bg-stone-700 transition-colors">
 									<div class="flex items-center gap-4">
-										<a href={ templ.SafeURL(fmt.Sprintf("/transaction/%s", tx.TxHash)) } class="font-mono text-sm text-purple-600 dark:text-purple-400 hover:underline">
+										<a href={ templ.SafeURL(fmt.Sprintf("/transaction/%s", tx.TxHash)) } class="font-mono text-sm text-gray-600 dark:text-gray-200 hover:underline">
 											if len(tx.TxHash) > 8 {
-												{ tx.TxHash[:4] }...{ tx.TxHash[len(tx.TxHash)-4:] }
+												{ tx.TxHash[:12] }...{ tx.TxHash[len(tx.TxHash)-4:] }
 											} else {
 												{ tx.TxHash }
 											}
 										</a>
-										<span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-gray-600 dark:text-gray-400">
+										<span class="text-xs px-2 py-1 bg-gray-100 dark:bg-stone-700 rounded text-gray-600 dark:text-gray-200">
 											{ tx.TxType }
 										</span>
 										if blockHeight, exists := props.BlockHeights[tx.TxHash]; exists {
-											<a href={ templ.SafeURL(fmt.Sprintf("/block/%d", blockHeight)) } class="text-xs text-purple-600 dark:text-purple-400 hover:underline">
+											<a href={ templ.SafeURL(fmt.Sprintf("/block/%d", blockHeight)) } class="text-xs text-gray-600 dark:text-gray-200 hover:underline">
 												{ fmt.Sprintf("#%d", blockHeight) }
 											</a>
 										}
@@ -471,10 +466,6 @@ templ StatsHeaderFragment(stats *DashboardStats, syncProgressPercentage float64)
 					</template>
 				</div>
 			</div>
-			<div class="flex-1 border-l border-gray-200 dark:border-gray-700 pl-6">
-				<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Chain ID</h4>
-				<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{ stats.ChainID }</p>
-			</div>
 			<div class="flex-none w-32 border-l border-gray-200 dark:border-gray-700 pl-6">
 				<h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Block Time</h4>
 				if stats.AvgBlockTime > 0 {
@@ -518,7 +509,7 @@ templ StatsHeaderFragment(stats *DashboardStats, syncProgressPercentage float64)
 						({ fmt.Sprintf("%.1f%%", syncProgressPercentage) })
 					</span>
 				</div>
-				<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 relative overflow-hidden">
+				<div class="w-full bg-gray-200 dark:[#141414] rounded-full h-2 relative overflow-hidden">
 					<!-- Exact progress representation using calculated percentage -->
 					<div
 						class={ fmt.Sprintf("bg-purple-600 h-2 rounded-full transition-all duration-300 ease-in-out %s", getProgressBarClass(syncProgressPercentage)) }
@@ -530,7 +521,7 @@ templ StatsHeaderFragment(stats *DashboardStats, syncProgressPercentage float64)
 }
 
 templ TPSFragment(stats *DashboardStats) {
-	<div id="tps-fragment" hx-get="/fragments/tps" hx-trigger="every 5s" hx-swap="outerHTML" class="border-r border-gray-200 dark:border-gray-700 pr-6">
+	<div id="tps-fragment" hx-get="/fragments/tps" hx-trigger="every 5s" hx-swap="outerHTML" class="pr-6 flex flex-col items-center">
 		<div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Transactions/sec</div>
 		<div class="text-4xl font-light text-gray-900 dark:text-gray-100 mb-1">{ fmt.Sprintf("%.1f", stats.TPS) }</div>
 		<div class="text-xs text-gray-500 dark:text-gray-400">30d Avg: { fmt.Sprintf("%.1f", float64(stats.TotalTransactions30d)/(30*24*60*60)) } TPS</div>
@@ -538,7 +529,7 @@ templ TPSFragment(stats *DashboardStats) {
 }
 
 templ TotalTransactionsFragment(stats *DashboardStats) {
-	<div id="total-transactions-fragment" hx-get="/fragments/total-transactions" hx-trigger="every 10s" hx-swap="outerHTML" class="pr-6">
+	<div id="total-transactions-fragment" hx-get="/fragments/total-transactions" hx-trigger="every 10s" hx-swap="outerHTML" class="border-r border-gray-200 dark:border-gray-700 pr-6 flex flex-col items-center">
 		<div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Total Transactions</div>
 		<div class="text-4xl font-light text-gray-900 dark:text-gray-100 mb-1">{ formatNumber(stats.TotalTransactions) }</div>
 		<div class={ fmt.Sprintf("text-xs %s", getPercentageChangeColorClass(stats.TotalTransactions24h, stats.TotalTransactionsPrevious24h)) }>{ getPercentageChangeText(stats.TotalTransactions24h, stats.TotalTransactionsPrevious24h) }</div>
@@ -1529,7 +1520,7 @@ templ SLAChartScript() {
 
 templ NetworkSidebarFragment(stats *DashboardStats) {
 	<div class="">
-		<div class="bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-lg p-3 border border-white/20 dark:border-gray-700/50 shadow-lg">
+		<div class="bg-white/90 dark:bg-[#141414]/90 backdrop-blur-md rounded-lg p-3 border border-white/20 dark:border-gray-700/50 shadow-lg">
 			<h4 class="text-xs font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">Network Info</h4>
 			<div class="space-y-1.5">
 				<div class="flex justify-between">
@@ -1550,7 +1541,7 @@ templ NetworkSidebarFragment(stats *DashboardStats) {
 				</template>
 			</div>
 		</div>
-		<div class="bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-lg p-3 border border-white/20 dark:border-gray-700/50 shadow-lg">
+		<div class="bg-white/90 dark:bg-[#141414]/90 backdrop-blur-md rounded-lg p-3 border border-white/20 dark:border-gray-700/50 shadow-lg">
 			<h4 class="text-xs font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">Recent Proposers</h4>
 			<div class="space-y-1">
 				<template x-if="recentBlocks.length > 0">
diff --git a/pkg/console/templates/pages/dashboard_templ.go b/pkg/console/templates/pages/dashboard_templ.go
index 8070685d..41423338 100644
--- a/pkg/console/templates/pages/dashboard_templ.go
+++ b/pkg/console/templates/pages/dashboard_templ.go
@@ -187,184 +187,171 @@ func Dashboard(props DashboardProps) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"space-y-6\" x-data=\"blockEvents()\" x-init=\"init()\"><!-- Section 1: Current Stats --><div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div id=\"stats-header\" x-data=\"blockEvents()\" x-init=\"init()\"><div class=\"flex items-center justify-between\"><div class=\"flex-1\"><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Block Height</h4><div class=\"flex items-center h-12\" x-data=\"animatedNumber()\" x-init=\"init(latestBlock.height)\"><template x-for=\"(digit, index) in digits\" :key=\"index\"><div class=\"relative h-10 w-6 overflow-hidden flex items-center justify-center\"><!-- Current digit (slides down when animating) --><div class=\"absolute inset-0 flex items-center justify-center\"><span class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 tabular-nums\" :class=\"getCurrentDigitClass(digit)\" x-text=\"digit.current\"></span></div><!-- Next digit (slides in from above when animating) --><div class=\"absolute inset-0 flex items-center justify-center\"><span class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 tabular-nums\" :class=\"getNextDigitClass(digit)\" x-text=\"digit.next\"></span></div></div></template></div></div><div class=\"flex-1 border-l border-gray-200 dark:border-gray-700 pl-6\"><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Chain ID</h4><p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.Stats.ChainID)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 183, Col: 91}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</p></div><div class=\"flex-none w-32 border-l border-gray-200 dark:border-gray-700 pl-6\"><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Block Time</h4>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"space-y-6\" x-data=\"blockEvents()\" x-init=\"init()\"><!-- Section 1: Current Stats --><div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div id=\"stats-header\" x-data=\"blockEvents()\" x-init=\"init()\"><div class=\"flex items-center justify-between\"><div class=\"flex-1 flex flex-col items-center\"><div class=\"flex items-center h-12\" x-data=\"animatedNumber()\" x-init=\"init(latestBlock.height)\"><template x-for=\"(digit, index) in digits\" :key=\"index\"><div class=\"relative h-10 w-6 overflow-hidden flex items-center justify-center\"><!-- Current digit (slides down when animating) --><div class=\"absolute inset-0 flex items-center justify-center\"><span class=\"text-4xl font-bold text-gray-900 dark:text-gray-100 tabular-nums\" :class=\"getCurrentDigitClass(digit)\" x-text=\"digit.current\"></span></div><!-- Next digit (slides in from above when animating) --><div class=\"absolute inset-0 flex items-center justify-center\"><span class=\"text-4xl font-bold text-gray-900 dark:text-gray-100 tabular-nums\" :class=\"getNextDigitClass(digit)\" x-text=\"digit.next\"></span></div></div></template></div><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Block Height</h4></div><div class=\"flex-1 w-32 border-l border-gray-200 dark:border-gray-700 pl-6 flex flex-col items-center\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if props.Stats.AvgBlockTime > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var4 string
-				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2fs", props.Stats.AvgBlockTime))
+				var templ_7745c5c3_Var3 string
+				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2fs", props.Stats.AvgBlockTime))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 188, Col: 119}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 183, Col: 119}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</p>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</p>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			} else if props.Stats.BPS > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var5 string
-				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2fs", 1.0/props.Stats.BPS))
+				var templ_7745c5c3_Var4 string
+				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2fs", 1.0/props.Stats.BPS))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 190, Col: 114}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 185, Col: 114}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</p><p class=\"text-xs text-gray-500 dark:text-gray-400\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</p><p class=\"text-xs text-gray-500 dark:text-gray-400\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var6 string
-				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2f BPS", props.Stats.BPS))
+				var templ_7745c5c3_Var5 string
+				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2f BPS", props.Stats.BPS))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 191, Col: 102}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 186, Col: 102}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</p>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</p>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">-</p><p class=\"text-xs text-gray-500 dark:text-gray-400\">No data</p>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">-</p><p class=\"text-xs text-gray-500 dark:text-gray-400\">No data</p>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div><div class=\"flex-none w-40 border-l border-gray-200 dark:border-gray-700 pl-6\"><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Sync Status</h4>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Block Time</h4></div><div class=\"flex-1 w-40 border-l border-gray-200 dark:border-gray-700 pl-6 flex flex-col items-center\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if props.Stats.IsSyncing {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<div class=\"flex items-center\"><div class=\"w-2 h-2 bg-yellow-500 rounded-full mr-2 animate-pulse\"></div><p class=\"text-xl font-bold text-yellow-600 dark:text-yellow-400\">Syncing</p></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"flex items-center\"><div class=\"w-2 h-2 bg-yellow-500 rounded-full mr-2 animate-pulse\"></div><p class=\"text-xl font-bold text-yellow-600 dark:text-yellow-400\">Syncing</p></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<div class=\"flex items-center\"><div class=\"w-2 h-2 bg-green-500 rounded-full mr-2\"></div><p class=\"text-xl font-bold text-green-600 dark:text-green-400\">Synced</p></div><p class=\"text-xs text-gray-500 dark:text-gray-400\">Up to date</p>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<div class=\"flex items-center\"><div class=\"w-2 h-2 bg-green-500 rounded-full mr-2\"></div><p class=\"text-xl font-bold text-green-600 dark:text-green-400\">Synced</p></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</div></div><!-- Sync Progress Bar -->")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Sync Status</h4></div></div><!-- Sync Progress Bar -->")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if props.Stats.IsSyncing && props.Stats.LatestChainHeight > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<div class=\"mt-4 pt-4 border-t border-gray-200 dark:border-gray-700\"><div class=\"flex items-center justify-between mb-2\"><span class=\"text-xs font-medium text-gray-600 dark:text-gray-400\">Sync Progress ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<div class=\"mt-4 pt-4 border-t border-gray-200 dark:border-gray-700\"><div class=\"flex items-center justify-between mb-2\"><span class=\"text-xs font-medium text-gray-600 dark:text-gray-400\">Sync Progress ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				if props.Stats.BlockDelta > 0 {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "| ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "| ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var7 string
-					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d blocks to go", props.Stats.BlockDelta))
+					var templ_7745c5c3_Var6 string
+					templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d blocks to go", props.Stats.BlockDelta))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 220, Col: 68}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 215, Col: 68}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</span> <span class=\"text-xs text-gray-500 dark:text-gray-500\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</span> <span class=\"text-xs text-gray-500 dark:text-gray-500\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var8 string
-				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d / %d", props.Stats.LatestIndexedHeight, props.Stats.LatestChainHeight))
+				var templ_7745c5c3_Var7 string
+				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d / %d", props.Stats.LatestIndexedHeight, props.Stats.LatestChainHeight))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 224, Col: 97}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 219, Col: 97}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, " (")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, " (")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var9 string
-				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f%%", props.SyncProgressPercentage))
+				var templ_7745c5c3_Var8 string
+				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f%%", props.SyncProgressPercentage))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 225, Col: 63}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 220, Col: 63}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, ")</span></div><div class=\"w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 relative overflow-hidden\"><!-- Exact progress representation using calculated percentage -->")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, ")</span></div><div class=\"w-full bg-gray-200 dark:bg-stone-700 rounded-full h-2 relative overflow-hidden\"><!-- Exact progress representation using calculated percentage -->")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var10 = []any{fmt.Sprintf("bg-purple-600 h-2 rounded-full transition-all duration-300 ease-in-out %s", getProgressBarClass(props.SyncProgressPercentage))}
-				templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var10...)
+				var templ_7745c5c3_Var9 = []any{fmt.Sprintf("bg-purple-600 h-2 rounded-full transition-all duration-300 ease-in-out %s", getProgressBarClass(props.SyncProgressPercentage))}
+				templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var9...)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<div class=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div class=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var11 string
-				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var10).String())
+				var templ_7745c5c3_Var10 string
+				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var9).String())
 				if templ_7745c5c3_Err != nil {
 					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 1, Col: 0}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\"></div></div></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"></div></div></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</div></div><!-- Section 2: Live Map & Validator Info --><div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden\"><div class=\"relative\"><!-- Map - Full Background --><div class=\"relative bg-gray-100 dark:bg-gray-700 h-96 z-10\" x-data=\"livePlayMap()\" x-init=\"initSSEEventSource(); initMap()\"><!-- Map container --><div id=\"playMap\" class=\"w-full h-full\"></div><!-- Connection status --><div class=\"absolute top-4 left-4 bg-black/20 backdrop-blur-sm rounded px-2 py-1\" x-show=\"!connected\"><span class=\"text-white/90 text-xs\">Connecting...</span></div></div><!-- Network Info Overlay - Left Side (aligned with zoom buttons) --><div class=\"absolute top-14 left-16 w-56 z-20\"><div id=\"network-sidebar\" class=\"space-y-2\" x-data=\"blockEvents()\" x-init=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</div></div><!-- Section 2: Live Map & Validator Info --><div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl overflow-hidden\"><div class=\"relative\"><!-- Map - Full Background --><div class=\"relative bg-gray-100 dark:bg-stone-700 h-96 z-10\" x-data=\"livePlayMap()\" x-init=\"initSSEEventSource(); initMap()\"><!-- Map container --><div id=\"playMap\" class=\"w-full h-full\"></div><!-- Connection status --><div class=\"absolute top-4 left-4 bg-black/20 backdrop-blur-sm rounded px-2 py-1\" x-show=\"!connected\"><span class=\"text-white/90 text-xs\">Connecting...</span></div></div><!-- Network Info Overlay - Left Side (aligned with zoom buttons) --><div class=\"absolute top-14 left-16 w-56 z-20\"><div id=\"network-sidebar\" class=\"space-y-2\" x-data=\"blockEvents()\" x-init=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var12 string
-			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("init({ validatorCount: %d })", props.Stats.ValidatorCount))
+			var templ_7745c5c3_Var11 string
+			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("init({ validatorCount: %d })", props.Stats.ValidatorCount))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 256, Col: 153}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 251, Col: 153}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -372,7 +359,15 @@ func Dashboard(props DashboardProps) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div></div></div></div><!-- Section 3: Transaction Analytics --><div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex items-center justify-between mb-6\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100\">Transaction Analytics</h3></div><div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\"><!-- Primary Metrics --><div class=\"lg:col-span-2 space-y-6\"><!-- Top row: TPS and Total Transactions --><div class=\"grid grid-cols-2 gap-6\"><div id=\"tps-fragment\" hx-get=\"/fragments/tps\" hx-trigger=\"every 5s\" hx-swap=\"outerHTML\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div></div></div></div><!-- Section 3: Transaction Analytics --><div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex items-center justify-between mb-6\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100\">Transaction Analytics</h3></div><div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\"><!-- Primary Metrics --><div class=\"lg:col-span-2 space-y-6\"><!-- Top row: TPS and Total Transactions --><div class=\"grid grid-cols-2 gap-6\"><div id=\"total-transactions-fragment\" hx-get=\"/fragments/total-transactions\" hx-trigger=\"every 10s\" hx-swap=\"outerHTML\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = TotalTransactionsFragment(props.Stats).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div><div id=\"tps-fragment\" hx-get=\"/fragments/tps\" hx-trigger=\"every 5s\" hx-swap=\"outerHTML\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -380,246 +375,238 @@ func Dashboard(props DashboardProps) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</div><div id=\"total-transactions-fragment\" hx-get=\"/fragments/total-transactions\" hx-trigger=\"every 10s\" hx-swap=\"outerHTML\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</div></div><!-- Bottom row: Volume metrics --><div class=\"grid grid-cols-3 border-t border-gray-200 dark:border-gray-700 pt-6\"><div class=\"border-r border-gray-200 dark:border-gray-700 pr-6 flex flex-col items-center\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">24h Volume</div><div class=\"text-2xl font-light text-gray-900 dark:text-gray-100 mb-1\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = TotalTransactionsFragment(props.Stats).Render(ctx, templ_7745c5c3_Buffer)
+			var templ_7745c5c3_Var12 string
+			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(props.Stats.TotalTransactions24h))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 278, Col: 127}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div></div><!-- Bottom row: Volume metrics --><div class=\"grid grid-cols-3 border-t border-gray-200 dark:border-gray-700 pt-6\"><div class=\"border-r border-gray-200 dark:border-gray-700 pr-6\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">24h Volume</div><div class=\"text-2xl font-light text-gray-900 dark:text-gray-100 mb-1\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div><div class=\"text-xs text-gray-500 dark:text-gray-400\">Daily rate</div></div><div class=\"border-r border-gray-200 dark:border-gray-700 pr-6 pl-6 flex flex-col items-center\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">7d Volume</div><div class=\"text-2xl font-light text-gray-900 dark:text-gray-100 mb-1\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var13 string
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(props.Stats.TotalTransactions24h))
+			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(props.Stats.TotalTransactions7d))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 283, Col: 127}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 283, Col: 126}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</div><div class=\"text-xs text-gray-500 dark:text-gray-400\">Daily rate</div></div><div class=\"border-r border-gray-200 dark:border-gray-700 pr-6 pl-6\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">7d Volume</div><div class=\"text-2xl font-light text-gray-900 dark:text-gray-100 mb-1\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</div><div class=\"text-xs text-gray-500 dark:text-gray-400\">Avg: ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var14 string
-			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(props.Stats.TotalTransactions7d))
+			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(props.Stats.TotalTransactions7d / 7))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 288, Col: 126}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 284, Col: 118}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div><div class=\"text-xs text-gray-500 dark:text-gray-400\">Avg: ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "/day</div></div><div class=\"pl-6 flex flex-col items-center\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">30d Volume</div><div class=\"text-2xl font-light text-gray-900 dark:text-gray-100 mb-1\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var15 string
-			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(props.Stats.TotalTransactions7d / 7))
+			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(props.Stats.TotalTransactions30d))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 289, Col: 118}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 288, Col: 127}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "/day</div></div><div class=\"pl-6\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">30d Volume</div><div class=\"text-2xl font-light text-gray-900 dark:text-gray-100 mb-1\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</div><div class=\"text-xs text-gray-500 dark:text-gray-400\">Avg: ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var16 string
-			templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(props.Stats.TotalTransactions30d))
+			templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(props.Stats.TotalTransactions30d / 30))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 293, Col: 127}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 289, Col: 120}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</div><div class=\"text-xs text-gray-500 dark:text-gray-400\">Avg: ")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var17 string
-			templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(props.Stats.TotalTransactions30d / 30))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 294, Col: 120}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "/day</div></div></div></div><!-- Transaction Types --><div class=\"border-l border-gray-200 dark:border-gray-700 pl-6\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4\">Transaction Types</div><div class=\"space-y-3\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "/day</div></div></div></div><!-- Transaction Types --><div class=\"border-l border-gray-200 dark:border-gray-700 pl-6\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4\">Transaction Types</div><div class=\"space-y-3\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if len(props.TransactionBreakdown) > 0 {
 				for _, breakdown := range props.TransactionBreakdown {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<div class=\"flex items-center justify-between\"><span class=\"text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-gray-600 dark:text-gray-400\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<div class=\"flex items-center justify-between\"><span class=\"text-xs px-2 py-1 bg-gray-100 dark:bg-stone-700 rounded text-gray-600 dark:text-gray-200\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var18 string
-					templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(breakdown.Type)
+					var templ_7745c5c3_Var17 string
+					templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(breakdown.Type)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 305, Col: 128}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 300, Col: 129}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</span> <span class=\"text-sm font-medium text-gray-900 dark:text-gray-100 tabular-nums\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</span> <span class=\"text-sm font-medium text-gray-900 dark:text-gray-100 tabular-nums\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var19 string
-					templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(breakdown.Count))
+					var templ_7745c5c3_Var18 string
+					templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(breakdown.Count))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 306, Col: 121}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 301, Col: 121}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</span></div>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</span></div>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
 			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<div class=\"text-sm text-gray-500 dark:text-gray-400\">No transaction data available</div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<div class=\"text-sm text-gray-500 dark:text-gray-400\">No transaction data available</div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</div></div></div></div><!-- Section 4: SLA Performance Chart -->")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</div></div></div></div><!-- Section 4: SLA Performance Chart -->")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if props.SLAPerformanceData != nil && len(props.SLAPerformanceData) > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "<div class=\"bg-white dark:bg-gray-900 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden\"><div class=\"bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 px-6 py-4 border-b border-gray-200 dark:border-gray-700\"><div class=\"flex items-center justify-between\"><div class=\"flex items-center space-x-3\"><div class=\"w-3 h-3 bg-purple-500 rounded-full animate-pulse\"></div><h2 class=\"text-lg font-bold text-gray-900 dark:text-gray-100 tracking-wide\">Network Performance</h2></div><a href=\"/rollups\" class=\"text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline text-sm\">View rollups →</a></div><div class=\"mt-3 flex items-center justify-between\"><div class=\"flex items-center space-x-4 text-xs text-gray-500 dark:text-gray-400\" x-data=\"chartMeta()\" x-init=\"init()\" data-chart-data=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "<div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden\"><div class=\"bg-white dark:bg-[#141414] px-6 py-4 border-b border-gray-200 dark:border-gray-700\"><div class=\"flex items-center justify-between\"><div class=\"flex items-center space-x-3\"><div class=\"w-3 h-3 bg-purple-500 rounded-full animate-pulse\"></div><h2 class=\"text-lg font-bold text-gray-900 dark:text-gray-100 tracking-wide\">Network Performance</h2></div><a href=\"/rollups\" class=\"text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline text-sm\">View rollups →</a></div><div class=\"mt-3 flex items-center justify-between\"><div class=\"flex items-center space-x-4 text-xs text-gray-500 dark:text-gray-400\" x-data=\"chartMeta()\" x-init=\"init()\" data-chart-data=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var20 string
-				templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(templ.JSONString(props.SLAPerformanceData))
+				var templ_7745c5c3_Var19 string
+				templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(templ.JSONString(props.SLAPerformanceData))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 332, Col: 68}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 327, Col: 68}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "\"><div class=\"text-right\"><div class=\"font-medium\" x-text=\"blockRange\"></div><div class=\"text-gray-400\" x-text=\"timeRange\"></div></div><div class=\"w-px h-8 bg-gray-300 dark:bg-gray-600\"></div><div class=\"flex items-center space-x-1\"><div class=\"w-2 h-2 bg-green-500 rounded-full animate-pulse\"></div><span class=\"font-medium\">LIVE</span></div></div></div></div><div class=\"relative h-96 bg-gray-50 dark:bg-gray-900 p-4\"><canvas id=\"slaPerformanceChart\" class=\"w-full h-full\" x-data=\"slaChart()\" x-init=\"initChart()\" data-chart-data=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\"><div class=\"text-right\"><div class=\"font-medium\" x-text=\"blockRange\"></div><div class=\"text-gray-400\" x-text=\"timeRange\"></div></div><div class=\"w-px h-8 bg-gray-300 dark:bg-[#141414]\"></div><div class=\"flex items-center space-x-1\"><div class=\"w-2 h-2 bg-green-500 rounded-full animate-pulse\"></div><span class=\"font-medium\">LIVE</span></div></div></div></div><div class=\"relative h-96 bg-gray-50 dark:bg-[#141414] p-4\"><canvas id=\"slaPerformanceChart\" class=\"w-full h-full\" x-data=\"slaChart()\" x-init=\"initChart()\" data-chart-data=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var21 string
-				templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(templ.JSONString(props.SLAPerformanceData))
+				var templ_7745c5c3_Var20 string
+				templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(templ.JSONString(props.SLAPerformanceData))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 352, Col: 67}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 347, Col: 67}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "\"></canvas></div></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "\"></canvas></div></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "<!-- Section 5: Recent Blocks & Transactions --><div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\"><!-- Latest Blocks --><div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-4\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100\">Latest Blocks</h3><a href=\"/blocks\" class=\"text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline text-sm\">View all →</a></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<!-- Section 5: Recent Blocks & Transactions --><div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\"><!-- Latest Blocks --><div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-4\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100\">Latest Blocks</h3><a href=\"/blocks\" class=\"text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline text-sm\">View all →</a></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if len(props.RecentBlocks) > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<div class=\"space-y-2\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "<div class=\"space-y-2\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				for _, block := range props.RecentBlocks {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "<div class=\"flex items-center justify-between py-3 px-4 border border-gray-200 dark:border-gray-700 rounded hover:bg-purple-50 hover:border-purple-200 dark:hover:bg-gray-700 transition-colors\"><div class=\"flex items-center gap-4\"><a href=\"")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<div class=\"flex items-center justify-between py-3 px-4 border border-gray-200 dark:border-gray-700 rounded hover:bg-purple-50 hover:border-purple-200 dark:hover:bg-stone-700 transition-colors\"><div class=\"flex items-center gap-4\"><a href=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var22 templ.SafeURL
-					templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/block/%d", block.BlockHeight)))
+					var templ_7745c5c3_Var21 templ.SafeURL
+					templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/block/%d", block.BlockHeight)))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 370, Col: 78}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 365, Col: 78}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "\" class=\"font-semibold text-purple-600 dark:text-purple-400 hover:underline\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\" class=\"font-semibold text-gray-600 dark:text-gray-200 hover:underline\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var23 string
-					templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("#%d", block.BlockHeight))
+					var templ_7745c5c3_Var22 string
+					templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("#%d", block.BlockHeight))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 371, Col: 50}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 366, Col: 50}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</a> <a href=\"")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "</a> <a href=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var24 templ.SafeURL
-					templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/validator/%s", block.ProposerAddress)))
+					var templ_7745c5c3_Var23 templ.SafeURL
+					templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/validator/%s", block.ProposerAddress)))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 373, Col: 86}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 368, Col: 86}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "\" class=\"font-mono text-xs text-purple-600 dark:text-purple-400 hover:underline\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "\" class=\"font-mono text-xs text-gray-600 dark:text-gray-200 hover:underline\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					if len(block.ProposerAddress) > 8 {
-						var templ_7745c5c3_Var25 string
-						templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(block.ProposerAddress[:4])
+						var templ_7745c5c3_Var24 string
+						templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(block.ProposerAddress[:12])
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 375, Col: 39}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 370, Col: 40}
 						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "...")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "...")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						var templ_7745c5c3_Var26 string
-						templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(block.ProposerAddress[len(block.ProposerAddress)-4:])
+						var templ_7745c5c3_Var25 string
+						templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(block.ProposerAddress[len(block.ProposerAddress)-4:])
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 375, Col: 98}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 370, Col: 99}
 						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					} else {
-						var templ_7745c5c3_Var27 string
-						templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(block.ProposerAddress)
+						var templ_7745c5c3_Var26 string
+						templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(block.ProposerAddress)
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 377, Col: 35}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 372, Col: 35}
 						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "</a></div><div class=\"text-xs text-gray-500 dark:text-gray-400\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</a></div><div class=\"text-xs text-gray-500 dark:text-gray-400\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -629,137 +616,137 @@ func Dashboard(props DashboardProps) templ.Component {
 							return templ_7745c5c3_Err
 						}
 					} else {
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "<span>—</span>")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "<span>—</span>")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, "</div></div>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "</div></div>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "</div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, "</div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, "<p class=\"text-gray-500 dark:text-gray-400\">No blocks found</p>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "<p class=\"text-gray-500 dark:text-gray-400\">No blocks found</p>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "</div><!-- Latest Transactions --><div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-4\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100\">Latest Transactions</h3><a href=\"/transactions\" class=\"text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline text-sm\">View all →</a></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, "</div><!-- Latest Transactions --><div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-4\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100\">Latest Transactions</h3><a href=\"/transactions\" class=\"text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline text-sm\">View all →</a></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if len(props.RecentTransactions) > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, "<div class=\"space-y-2\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "<div class=\"space-y-2\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				for _, tx := range props.RecentTransactions {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "<div class=\"flex items-center justify-between py-3 px-4 border border-gray-200 dark:border-gray-700 rounded hover:bg-purple-50 hover:border-purple-200 dark:hover:bg-gray-700 transition-colors\"><div class=\"flex items-center gap-4\"><a href=\"")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, "<div class=\"flex items-center justify-between py-3 px-4 border border-gray-200 dark:border-gray-700 rounded hover:bg-purple-50 hover:border-purple-200 dark:hover:bg-stone-700 transition-colors\"><div class=\"flex items-center gap-4\"><a href=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var28 templ.SafeURL
-					templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/transaction/%s", tx.TxHash)))
+					var templ_7745c5c3_Var27 templ.SafeURL
+					templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/transaction/%s", tx.TxHash)))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 406, Col: 76}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 401, Col: 76}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "\" class=\"font-mono text-sm text-purple-600 dark:text-purple-400 hover:underline\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "\" class=\"font-mono text-sm text-gray-600 dark:text-gray-200 hover:underline\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					if len(tx.TxHash) > 8 {
-						var templ_7745c5c3_Var29 string
-						templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(tx.TxHash[:4])
+						var templ_7745c5c3_Var28 string
+						templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(tx.TxHash[:12])
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 408, Col: 27}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 403, Col: 28}
 						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "...")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "...")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						var templ_7745c5c3_Var30 string
-						templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(tx.TxHash[len(tx.TxHash)-4:])
+						var templ_7745c5c3_Var29 string
+						templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(tx.TxHash[len(tx.TxHash)-4:])
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 408, Col: 62}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 403, Col: 63}
 						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					} else {
-						var templ_7745c5c3_Var31 string
-						templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(tx.TxHash)
+						var templ_7745c5c3_Var30 string
+						templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(tx.TxHash)
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 410, Col: 23}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 405, Col: 23}
 						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, "</a> <span class=\"text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-gray-600 dark:text-gray-400\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "</a> <span class=\"text-xs px-2 py-1 bg-gray-100 dark:bg-stone-700 rounded text-gray-600 dark:text-gray-200\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					var templ_7745c5c3_Var32 string
-					templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(tx.TxType)
+					var templ_7745c5c3_Var31 string
+					templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.JoinStringErrs(tx.TxType)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 414, Col: 22}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 409, Col: 22}
 					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var31))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "</span> ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, "</span> ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					if blockHeight, exists := props.BlockHeights[tx.TxHash]; exists {
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "<a href=\"")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "<a href=\"")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						var templ_7745c5c3_Var33 templ.SafeURL
-						templ_7745c5c3_Var33, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/block/%d", blockHeight)))
+						var templ_7745c5c3_Var32 templ.SafeURL
+						templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/block/%d", blockHeight)))
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 417, Col: 73}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 412, Col: 73}
 						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var33))
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "\" class=\"text-xs text-purple-600 dark:text-purple-400 hover:underline\">")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "\" class=\"text-xs text-gray-600 dark:text-gray-200 hover:underline\">")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						var templ_7745c5c3_Var34 string
-						templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("#%d", blockHeight))
+						var templ_7745c5c3_Var33 string
+						templ_7745c5c3_Var33, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("#%d", blockHeight))
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 418, Col: 45}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 413, Col: 45}
 						}
-						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var34))
+						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var33))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "</a>")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "</a>")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "</div><div class=\"text-xs text-gray-500 dark:text-gray-400\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "</div><div class=\"text-xs text-gray-500 dark:text-gray-400\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -769,27 +756,27 @@ func Dashboard(props DashboardProps) templ.Component {
 							return templ_7745c5c3_Err
 						}
 					} else {
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, "<span>—</span>")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "<span>—</span>")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 62, "</div></div>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, "</div></div>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, "</div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 62, "</div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "<p class=\"text-gray-500 dark:text-gray-400\">No transactions found</p>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, "<p class=\"text-gray-500 dark:text-gray-400\">No transactions found</p>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 65, "</div></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "</div></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -797,7 +784,7 @@ func Dashboard(props DashboardProps) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 66, " ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 65, " ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -805,7 +792,7 @@ func Dashboard(props DashboardProps) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 67, " ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 66, " ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -813,7 +800,7 @@ func Dashboard(props DashboardProps) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 68, " ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 67, " ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -848,176 +835,163 @@ func StatsHeaderFragment(stats *DashboardStats, syncProgressPercentage float64)
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var35 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var35 == nil {
-			templ_7745c5c3_Var35 = templ.NopComponent
+		templ_7745c5c3_Var34 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var34 == nil {
+			templ_7745c5c3_Var34 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "<div id=\"stats-header\" hx-get=\"/fragments/stats-header\" hx-trigger=\"every 10s\" hx-swap=\"outerHTML\" x-data=\"blockEvents()\" x-init=\"init()\"><div class=\"flex items-center justify-between\"><div class=\"flex-1\"><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Block Height</h4><div class=\"flex items-center h-12\" x-data=\"animatedNumber()\" x-init=\"init(latestBlock.height)\"><template x-for=\"(digit, index) in digits\" :key=\"index\"><div class=\"relative h-10 w-6 overflow-hidden flex items-center justify-center\"><!-- Current digit (slides down when animating) --><div class=\"absolute inset-0 flex items-center justify-center\"><span class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 tabular-nums\" :class=\"getCurrentDigitClass(digit)\" x-text=\"digit.current\"></span></div><!-- Next digit (slides in from above when animating) --><div class=\"absolute inset-0 flex items-center justify-center\"><span class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 tabular-nums\" :class=\"getNextDigitClass(digit)\" x-text=\"digit.next\"></span></div></div></template></div></div><div class=\"flex-1 border-l border-gray-200 dark:border-gray-700 pl-6\"><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Chain ID</h4><p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var36 string
-		templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinStringErrs(stats.ChainID)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 476, Col: 82}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var36))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 70, "</p></div><div class=\"flex-none w-32 border-l border-gray-200 dark:border-gray-700 pl-6\"><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Block Time</h4>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 68, "<div id=\"stats-header\" hx-get=\"/fragments/stats-header\" hx-trigger=\"every 10s\" hx-swap=\"outerHTML\" x-data=\"blockEvents()\" x-init=\"init()\"><div class=\"flex items-center justify-between\"><div class=\"flex-1\"><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Block Height</h4><div class=\"flex items-center h-12\" x-data=\"animatedNumber()\" x-init=\"init(latestBlock.height)\"><template x-for=\"(digit, index) in digits\" :key=\"index\"><div class=\"relative h-10 w-6 overflow-hidden flex items-center justify-center\"><!-- Current digit (slides down when animating) --><div class=\"absolute inset-0 flex items-center justify-center\"><span class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 tabular-nums\" :class=\"getCurrentDigitClass(digit)\" x-text=\"digit.current\"></span></div><!-- Next digit (slides in from above when animating) --><div class=\"absolute inset-0 flex items-center justify-center\"><span class=\"text-3xl font-bold text-gray-900 dark:text-gray-100 tabular-nums\" :class=\"getNextDigitClass(digit)\" x-text=\"digit.next\"></span></div></div></template></div></div><div class=\"flex-none w-32 border-l border-gray-200 dark:border-gray-700 pl-6\"><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Block Time</h4>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if stats.AvgBlockTime > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 71, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var37 string
-			templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2fs", stats.AvgBlockTime))
+			var templ_7745c5c3_Var35 string
+			templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2fs", stats.AvgBlockTime))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 481, Col: 110}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 472, Col: 110}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var37))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var35))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 72, "</p>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 70, "</p>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else if stats.BPS > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 73, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 71, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var38 string
-			templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2fs", 1.0/stats.BPS))
+			var templ_7745c5c3_Var36 string
+			templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2fs", 1.0/stats.BPS))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 483, Col: 105}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 474, Col: 105}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var38))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var36))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 74, "</p><p class=\"text-xs text-gray-500 dark:text-gray-400\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 72, "</p><p class=\"text-xs text-gray-500 dark:text-gray-400\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var39 string
-			templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2f BPS", stats.BPS))
+			var templ_7745c5c3_Var37 string
+			templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.2f BPS", stats.BPS))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 484, Col: 93}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 475, Col: 93}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var39))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var37))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 75, "</p>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 73, "</p>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 76, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">-</p><p class=\"text-xs text-gray-500 dark:text-gray-400\">No data</p>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 74, "<p class=\"text-3xl font-bold text-gray-900 dark:text-gray-100\">-</p><p class=\"text-xs text-gray-500 dark:text-gray-400\">No data</p>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 77, "</div><div class=\"flex-none w-40 border-l border-gray-200 dark:border-gray-700 pl-6\"><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Sync Status</h4>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 75, "</div><div class=\"flex-none w-40 border-l border-gray-200 dark:border-gray-700 pl-6\"><h4 class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Sync Status</h4>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if stats.IsSyncing {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 78, "<div class=\"flex items-center\"><div class=\"w-2 h-2 bg-yellow-500 rounded-full mr-2 animate-pulse\"></div><p class=\"text-xl font-bold text-yellow-600 dark:text-yellow-400\">Syncing</p></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 76, "<div class=\"flex items-center\"><div class=\"w-2 h-2 bg-yellow-500 rounded-full mr-2 animate-pulse\"></div><p class=\"text-xl font-bold text-yellow-600 dark:text-yellow-400\">Syncing</p></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 79, "<div class=\"flex items-center\"><div class=\"w-2 h-2 bg-green-500 rounded-full mr-2\"></div><p class=\"text-xl font-bold text-green-600 dark:text-green-400\">Synced</p></div><p class=\"text-xs text-gray-500 dark:text-gray-400\">Up to date</p>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 77, "<div class=\"flex items-center\"><div class=\"w-2 h-2 bg-green-500 rounded-full mr-2\"></div><p class=\"text-xl font-bold text-green-600 dark:text-green-400\">Synced</p></div><p class=\"text-xs text-gray-500 dark:text-gray-400\">Up to date</p>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 80, "</div></div><!-- Sync Progress Bar -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 78, "</div></div><!-- Sync Progress Bar -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if stats.IsSyncing && stats.LatestChainHeight > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 81, "<div class=\"mt-4 pt-4 border-t border-gray-200 dark:border-gray-700\"><div class=\"flex items-center justify-between mb-2\"><span class=\"text-xs font-medium text-gray-600 dark:text-gray-400\">Sync Progress ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 79, "<div class=\"mt-4 pt-4 border-t border-gray-200 dark:border-gray-700\"><div class=\"flex items-center justify-between mb-2\"><span class=\"text-xs font-medium text-gray-600 dark:text-gray-400\">Sync Progress ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if stats.BlockDelta > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 82, "| ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 80, "| ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var40 string
-				templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d blocks to go", stats.BlockDelta))
+				var templ_7745c5c3_Var38 string
+				templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d blocks to go", stats.BlockDelta))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 513, Col: 59}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 504, Col: 59}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var40))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var38))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 83, "</span> <span class=\"text-xs text-gray-500 dark:text-gray-500\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 81, "</span> <span class=\"text-xs text-gray-500 dark:text-gray-500\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var41 string
-			templ_7745c5c3_Var41, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d / %d", stats.LatestIndexedHeight, stats.LatestChainHeight))
+			var templ_7745c5c3_Var39 string
+			templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d / %d", stats.LatestIndexedHeight, stats.LatestChainHeight))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 517, Col: 82}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 508, Col: 82}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var41))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var39))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 84, " (")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 82, " (")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var42 string
-			templ_7745c5c3_Var42, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f%%", syncProgressPercentage))
+			var templ_7745c5c3_Var40 string
+			templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f%%", syncProgressPercentage))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 518, Col: 54}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 509, Col: 54}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var42))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var40))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 85, ")</span></div><div class=\"w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 relative overflow-hidden\"><!-- Exact progress representation using calculated percentage -->")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 83, ")</span></div><div class=\"w-full bg-gray-200 dark:[#141414] rounded-full h-2 relative overflow-hidden\"><!-- Exact progress representation using calculated percentage -->")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var43 = []any{fmt.Sprintf("bg-purple-600 h-2 rounded-full transition-all duration-300 ease-in-out %s", getProgressBarClass(syncProgressPercentage))}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var43...)
+			var templ_7745c5c3_Var41 = []any{fmt.Sprintf("bg-purple-600 h-2 rounded-full transition-all duration-300 ease-in-out %s", getProgressBarClass(syncProgressPercentage))}
+			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var41...)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 86, "<div class=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 84, "<div class=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var44 string
-			templ_7745c5c3_Var44, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var43).String())
+			var templ_7745c5c3_Var42 string
+			templ_7745c5c3_Var42, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var41).String())
 			if templ_7745c5c3_Err != nil {
 				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 1, Col: 0}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var44))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var42))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 87, "\"></div></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 85, "\"></div></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 88, "</div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 86, "</div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -1041,38 +1015,38 @@ func TPSFragment(stats *DashboardStats) templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var45 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var45 == nil {
-			templ_7745c5c3_Var45 = templ.NopComponent
+		templ_7745c5c3_Var43 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var43 == nil {
+			templ_7745c5c3_Var43 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 89, "<div id=\"tps-fragment\" hx-get=\"/fragments/tps\" hx-trigger=\"every 5s\" hx-swap=\"outerHTML\" class=\"border-r border-gray-200 dark:border-gray-700 pr-6\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Transactions/sec</div><div class=\"text-4xl font-light text-gray-900 dark:text-gray-100 mb-1\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 87, "<div id=\"tps-fragment\" hx-get=\"/fragments/tps\" hx-trigger=\"every 5s\" hx-swap=\"outerHTML\" class=\"pr-6 flex flex-col items-center\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Transactions/sec</div><div class=\"text-4xl font-light text-gray-900 dark:text-gray-100 mb-1\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var46 string
-		templ_7745c5c3_Var46, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f", stats.TPS))
+		var templ_7745c5c3_Var44 string
+		templ_7745c5c3_Var44, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f", stats.TPS))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 535, Col: 105}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 526, Col: 105}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var46))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var44))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 90, "</div><div class=\"text-xs text-gray-500 dark:text-gray-400\">30d Avg: ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 88, "</div><div class=\"text-xs text-gray-500 dark:text-gray-400\">30d Avg: ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var47 string
-		templ_7745c5c3_Var47, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f", float64(stats.TotalTransactions30d)/(30*24*60*60)))
+		var templ_7745c5c3_Var45 string
+		templ_7745c5c3_Var45, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f", float64(stats.TotalTransactions30d)/(30*24*60*60)))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 536, Col: 137}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 527, Col: 137}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var47))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var45))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 91, " TPS</div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 89, " TPS</div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -1096,60 +1070,60 @@ func TotalTransactionsFragment(stats *DashboardStats) templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var48 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var48 == nil {
-			templ_7745c5c3_Var48 = templ.NopComponent
+		templ_7745c5c3_Var46 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var46 == nil {
+			templ_7745c5c3_Var46 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 92, "<div id=\"total-transactions-fragment\" hx-get=\"/fragments/total-transactions\" hx-trigger=\"every 10s\" hx-swap=\"outerHTML\" class=\"pr-6\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Total Transactions</div><div class=\"text-4xl font-light text-gray-900 dark:text-gray-100 mb-1\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 90, "<div id=\"total-transactions-fragment\" hx-get=\"/fragments/total-transactions\" hx-trigger=\"every 10s\" hx-swap=\"outerHTML\" class=\"border-r border-gray-200 dark:border-gray-700 pr-6 flex flex-col items-center\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Total Transactions</div><div class=\"text-4xl font-light text-gray-900 dark:text-gray-100 mb-1\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var49 string
-		templ_7745c5c3_Var49, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(stats.TotalTransactions))
+		var templ_7745c5c3_Var47 string
+		templ_7745c5c3_Var47, templ_7745c5c3_Err = templ.JoinStringErrs(formatNumber(stats.TotalTransactions))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 543, Col: 112}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 534, Col: 112}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var49))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var47))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 93, "</div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 91, "</div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var50 = []any{fmt.Sprintf("text-xs %s", getPercentageChangeColorClass(stats.TotalTransactions24h, stats.TotalTransactionsPrevious24h))}
-		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var50...)
+		var templ_7745c5c3_Var48 = []any{fmt.Sprintf("text-xs %s", getPercentageChangeColorClass(stats.TotalTransactions24h, stats.TotalTransactionsPrevious24h))}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var48...)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 94, "<div class=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 92, "<div class=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var51 string
-		templ_7745c5c3_Var51, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var50).String())
+		var templ_7745c5c3_Var49 string
+		templ_7745c5c3_Var49, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var48).String())
 		if templ_7745c5c3_Err != nil {
 			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 1, Col: 0}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var51))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var49))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 95, "\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 93, "\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var52 string
-		templ_7745c5c3_Var52, templ_7745c5c3_Err = templ.JoinStringErrs(getPercentageChangeText(stats.TotalTransactions24h, stats.TotalTransactionsPrevious24h))
+		var templ_7745c5c3_Var50 string
+		templ_7745c5c3_Var50, templ_7745c5c3_Err = templ.JoinStringErrs(getPercentageChangeText(stats.TotalTransactions24h, stats.TotalTransactionsPrevious24h))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 544, Col: 227}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 535, Col: 227}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var52))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var50))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 96, "</div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 94, "</div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -1173,12 +1147,12 @@ func SSEEventScript() templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var53 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var53 == nil {
-			templ_7745c5c3_Var53 = templ.NopComponent
+		templ_7745c5c3_Var51 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var51 == nil {
+			templ_7745c5c3_Var51 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 97, "<script>\n\t\tlet globalEventSource = null;\n\n\t\tfunction initSSEEventSource() {\n\t\t\t// Close existing connection if any\n\t\t\tif (globalEventSource) {\n\t\t\t\tglobalEventSource.close();\n\t\t\t}\n\n\t\t\tglobalEventSource = new EventSource('/sse/events');\n\n\t\t\t// Dispatch custom events for each SSE event\n\t\t\tglobalEventSource.onmessage = (event) => {\n\t\t\t\ttry {\n\t\t\t\t\tconst data = JSON.parse(event.data);\n\t\t\t\t\tdocument.dispatchEvent(new CustomEvent(data.event, { detail: data.data }));\n\t\t\t\t} catch (e) {\n\t\t\t\t\tconsole.error('Error parsing SSE event data:', e, event.data);\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tglobalEventSource.onerror = (error) => {\n\t\t\t\tconsole.error('SSE connection error:', error);\n\t\t\t};\n\n\t\t\tglobalEventSource.onopen = () => {\n\t\t\t\tconsole.log('SSE connection opened');\n\t\t\t};\n\n\t\t\t// Cleanup on page unload\n\t\t\twindow.addEventListener('beforeunload', () => {\n\t\t\t\tif (globalEventSource) {\n\t\t\t\t\tglobalEventSource.close();\n\t\t\t\t\tglobalEventSource = null;\n\t\t\t\t}\n\t\t\t});\n\n\t\t\t// Cleanup on page visibility change (mobile browsers)\n\t\t\tdocument.addEventListener('visibilitychange', () => {\n\t\t\t\tif (document.hidden && globalEventSource) {\n\t\t\t\t\tglobalEventSource.close();\n\t\t\t\t\tglobalEventSource = null;\n\t\t\t\t} else if (!document.hidden && !globalEventSource) {\n\t\t\t\t\t// Reconnect when page becomes visible again\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tinitSSEEventSource();\n\t\t\t\t\t}, 1000);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn globalEventSource;\n\t\t}\n\n\t\t// Cleanup when Alpine.js is destroyed\n\t\tdocument.addEventListener('alpine:init', () => {\n\t\t\tAlpine.store('cleanup', {\n\t\t\t\teventSource: null,\n\t\t\t\tinit() {\n\t\t\t\t\tthis.eventSource = initSSEEventSource();\n\t\t\t\t},\n\t\t\t\tdestroy() {\n\t\t\t\t\tif (this.eventSource) {\n\t\t\t\t\t\tthis.eventSource.close();\n\t\t\t\t\t\tthis.eventSource = null;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 95, "<script>\n\t\tlet globalEventSource = null;\n\n\t\tfunction initSSEEventSource() {\n\t\t\t// Close existing connection if any\n\t\t\tif (globalEventSource) {\n\t\t\t\tglobalEventSource.close();\n\t\t\t}\n\n\t\t\tglobalEventSource = new EventSource('/sse/events');\n\n\t\t\t// Dispatch custom events for each SSE event\n\t\t\tglobalEventSource.onmessage = (event) => {\n\t\t\t\ttry {\n\t\t\t\t\tconst data = JSON.parse(event.data);\n\t\t\t\t\tdocument.dispatchEvent(new CustomEvent(data.event, { detail: data.data }));\n\t\t\t\t} catch (e) {\n\t\t\t\t\tconsole.error('Error parsing SSE event data:', e, event.data);\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tglobalEventSource.onerror = (error) => {\n\t\t\t\tconsole.error('SSE connection error:', error);\n\t\t\t};\n\n\t\t\tglobalEventSource.onopen = () => {\n\t\t\t\tconsole.log('SSE connection opened');\n\t\t\t};\n\n\t\t\t// Cleanup on page unload\n\t\t\twindow.addEventListener('beforeunload', () => {\n\t\t\t\tif (globalEventSource) {\n\t\t\t\t\tglobalEventSource.close();\n\t\t\t\t\tglobalEventSource = null;\n\t\t\t\t}\n\t\t\t});\n\n\t\t\t// Cleanup on page visibility change (mobile browsers)\n\t\t\tdocument.addEventListener('visibilitychange', () => {\n\t\t\t\tif (document.hidden && globalEventSource) {\n\t\t\t\t\tglobalEventSource.close();\n\t\t\t\t\tglobalEventSource = null;\n\t\t\t\t} else if (!document.hidden && !globalEventSource) {\n\t\t\t\t\t// Reconnect when page becomes visible again\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tinitSSEEventSource();\n\t\t\t\t\t}, 1000);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn globalEventSource;\n\t\t}\n\n\t\t// Cleanup when Alpine.js is destroyed\n\t\tdocument.addEventListener('alpine:init', () => {\n\t\t\tAlpine.store('cleanup', {\n\t\t\t\teventSource: null,\n\t\t\t\tinit() {\n\t\t\t\t\tthis.eventSource = initSSEEventSource();\n\t\t\t\t},\n\t\t\t\tdestroy() {\n\t\t\t\t\tif (this.eventSource) {\n\t\t\t\t\t\tthis.eventSource.close();\n\t\t\t\t\t\tthis.eventSource = null;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -1203,12 +1177,12 @@ func LivePlayMapScript() templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var54 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var54 == nil {
-			templ_7745c5c3_Var54 = templ.NopComponent
+		templ_7745c5c3_Var52 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var52 == nil {
+			templ_7745c5c3_Var52 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 98, "<script>\n\t\tfunction livePlayMap() {\n\t\t\treturn {\n\t\t\t\tmap: null,\n\t\t\t\teventSource: null,\n\t\t\t\tconnected: false,\n\t\t\t\tplayMarkers: [],\n\t\t\t\tplayEventListener: null,\n\t\t\t\tanimationFrames: new Set(),\n\t\t\t\ttimeouts: new Set(),\n\t\t\t\t\n\t\t\t\tinitMap() {\n\t\t\t\t\t// Create bound event listener for proper cleanup\n\t\t\t\t\tthis.playEventListener = (event) => {\n\t\t\t\t\t\tthis.addPlayToMap(event.detail);\n\t\t\t\t\t};\n\t\t\t\t\tdocument.addEventListener('play', this.playEventListener);\n\n\t\t\t\t\t// Initialize Leaflet map focused on US\n\t\t\t\t\tthis.map = L.map('playMap').setView([39.0, -110.0], 5);\n\t\t\t\t\t\n\t\t\t\t\t// Detect dark mode and use appropriate tiles\n\t\t\t\t\tconst isDarkMode = document.documentElement.classList.contains('dark') || \n\t\t\t\t\t                  window.matchMedia('(prefers-color-scheme: dark)').matches;\n\t\t\t\t\t\n\t\t\t\t\tif (isDarkMode) {\n\t\t\t\t\t\t// Dark mode tiles\n\t\t\t\t\t\tL.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {\n\t\t\t\t\t\t\tattribution: '© OpenStreetMap, © CartoDB',\n\t\t\t\t\t\t\tsubdomains: 'abcd'\n\t\t\t\t\t\t}).addTo(this.map);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Light mode tiles\n\t\t\t\t\t\tL.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n\t\t\t\t\t\t\tattribution: '© OpenStreetMap contributors'\n\t\t\t\t\t\t}).addTo(this.map);\n\t\t\t\t\t}\n\n\t\t\t\t\t// Setup cleanup on page unload\n\t\t\t\t\twindow.addEventListener('beforeunload', () => {\n\t\t\t\t\t\tthis.cleanup();\n\t\t\t\t\t});\n\n\t\t\t\t\t// Setup cleanup on Alpine destroy\n\t\t\t\t\tthis.$watch('$store.cleanup', () => {\n\t\t\t\t\t\t// This will be called when Alpine is destroyed\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\taddPlayToMap(play) {\n\t\t\t\t\tif (!this.map) return;\n\t\t\t\t\t\n\t\t\t\t\t// Set default duration if not provided\n\t\t\t\t\tif (!play.duration) {\n\t\t\t\t\t\tplay.duration = 5; // Default 5 seconds\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\tconst color = this.getRandomColor();\n\t\t\t\t\t\n\t\t\t\t\t// Create radar-style animation with expanding circles\n\t\t\t\t\tconst radarGroup = L.layerGroup().addTo(this.map);\n\t\t\t\t\t\n\t\t\t\t\t// Create multiple expanding circles for radar effect\n\t\t\t\t\tfor (let i = 0; i < 3; i++) {\n\t\t\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\t\t\tconst circle = L.circle([play.lat, play.lng], {\n\t\t\t\t\t\t\t\tradius: 0,\n\t\t\t\t\t\t\t\tfillColor: color,\n\t\t\t\t\t\t\t\tcolor: color,\n\t\t\t\t\t\t\t\tweight: 2,\n\t\t\t\t\t\t\t\topacity: 0.8,\n\t\t\t\t\t\t\t\tfillOpacity: 0.3\n\t\t\t\t\t\t\t}).addTo(radarGroup);\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t// Animate the circle expansion\n\t\t\t\t\t\t\tlet radius = 0;\n\t\t\t\t\t\t\tlet opacity = 0.8;\n\t\t\t\t\t\t\tconst maxRadius = 100000; // 100km in meters\n\t\t\t\t\t\t\tconst animationDuration = 1000; // Fixed 1 second animation duration\n\t\t\t\t\t\t\tconst startTime = Date.now();\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tconst animate = () => {\n\t\t\t\t\t\t\t\tconst elapsed = Date.now() - startTime;\n\t\t\t\t\t\t\t\tconst progress = Math.min(elapsed / animationDuration, 1);\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tradius = maxRadius * progress;\n\t\t\t\t\t\t\t\topacity = 0.8 * (1 - progress);\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tcircle.setRadius(radius);\n\t\t\t\t\t\t\t\tcircle.setStyle({ \n\t\t\t\t\t\t\t\t\topacity: opacity,\n\t\t\t\t\t\t\t\t\tfillOpacity: opacity * 0.3\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tif (progress < 1) {\n\t\t\t\t\t\t\t\t\tconst frameId = requestAnimationFrame(animate);\n\t\t\t\t\t\t\t\t\tthis.animationFrames.add(frameId);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tradarGroup.removeLayer(circle);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tanimate();\n\t\t\t\t\t\t}, i * 200); // Stagger each circle by 200ms\n\t\t\t\t\t\t\n\t\t\t\t\t\tthis.timeouts.add(timeout);\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t// Add center dot\n\t\t\t\t\tconst centerDot = L.circleMarker([play.lat, play.lng], {\n\t\t\t\t\t\tradius: 4,\n\t\t\t\t\t\tfillColor: color,\n\t\t\t\t\t\tcolor: '#ffffff',\n\t\t\t\t\t\tweight: 2,\n\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\tfillOpacity: 1\n\t\t\t\t\t}).addTo(radarGroup);\n\t\t\t\t\t\n\t\t\t\t\t// Add popup with play info\n\t\t\t\t\tconst timestamp = play.timestamp ? new Date(play.timestamp).toLocaleTimeString() : new Date().toLocaleTimeString();\n\t\t\t\t\tcenterDot.bindPopup(`Play at ${timestamp}`);\n\t\t\t\t\t\n\t\t\t\t\t// Store group for cleanup\n\t\t\t\t\tthis.playMarkers.push(radarGroup);\n\t\t\t\t\t\n\t\t\t\t\t// Remove entire radar group after duration\n\t\t\t\t\tconst cleanupTimeout = setTimeout(() => {\n\t\t\t\t\t\tif (this.map && this.map.hasLayer(radarGroup)) {\n\t\t\t\t\t\t\tthis.map.removeLayer(radarGroup);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.playMarkers = this.playMarkers.filter(m => m !== radarGroup);\n\t\t\t\t\t}, play.duration * 1000);\n\t\t\t\t\t\n\t\t\t\t\tthis.timeouts.add(cleanupTimeout);\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tgetRandomColor() {\n\t\t\t\t\tconst colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#f0932b', '#eb4d4b', '#6c5ce7'];\n\t\t\t\t\treturn colors[Math.floor(Math.random() * colors.length)];\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tcleanup() {\n\t\t\t\t\t// Clear all timeouts\n\t\t\t\t\tthis.timeouts.forEach(timeout => clearTimeout(timeout));\n\t\t\t\t\tthis.timeouts.clear();\n\t\t\t\t\t\n\t\t\t\t\t// Cancel all animation frames\n\t\t\t\t\tthis.animationFrames.forEach(frameId => cancelAnimationFrame(frameId));\n\t\t\t\t\tthis.animationFrames.clear();\n\t\t\t\t\t\n\t\t\t\t\t// Remove event listener\n\t\t\t\t\tif (this.playEventListener) {\n\t\t\t\t\t\tdocument.removeEventListener('play', this.playEventListener);\n\t\t\t\t\t\tthis.playEventListener = null;\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t// Clean up map markers\n\t\t\t\t\tthis.playMarkers.forEach(marker => {\n\t\t\t\t\t\tif (this.map && this.map.hasLayer(marker)) {\n\t\t\t\t\t\t\tthis.map.removeLayer(marker);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\tthis.playMarkers = [];\n\t\t\t\t\t\n\t\t\t\t\t// Remove map\n\t\t\t\t\tif (this.map) {\n\t\t\t\t\t\tthis.map.remove();\n\t\t\t\t\t\tthis.map = null;\n\t\t\t\t\t}\n\t\t\t\t},\n\n\t\t\t\t// Alpine.js lifecycle hook\n\t\t\t\tdestroy() {\n\t\t\t\t\tthis.cleanup();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 96, "<script>\n\t\tfunction livePlayMap() {\n\t\t\treturn {\n\t\t\t\tmap: null,\n\t\t\t\teventSource: null,\n\t\t\t\tconnected: false,\n\t\t\t\tplayMarkers: [],\n\t\t\t\tplayEventListener: null,\n\t\t\t\tanimationFrames: new Set(),\n\t\t\t\ttimeouts: new Set(),\n\t\t\t\t\n\t\t\t\tinitMap() {\n\t\t\t\t\t// Create bound event listener for proper cleanup\n\t\t\t\t\tthis.playEventListener = (event) => {\n\t\t\t\t\t\tthis.addPlayToMap(event.detail);\n\t\t\t\t\t};\n\t\t\t\t\tdocument.addEventListener('play', this.playEventListener);\n\n\t\t\t\t\t// Initialize Leaflet map focused on US\n\t\t\t\t\tthis.map = L.map('playMap').setView([39.0, -110.0], 5);\n\t\t\t\t\t\n\t\t\t\t\t// Detect dark mode and use appropriate tiles\n\t\t\t\t\tconst isDarkMode = document.documentElement.classList.contains('dark') || \n\t\t\t\t\t                  window.matchMedia('(prefers-color-scheme: dark)').matches;\n\t\t\t\t\t\n\t\t\t\t\tif (isDarkMode) {\n\t\t\t\t\t\t// Dark mode tiles\n\t\t\t\t\t\tL.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {\n\t\t\t\t\t\t\tattribution: '© OpenStreetMap, © CartoDB',\n\t\t\t\t\t\t\tsubdomains: 'abcd'\n\t\t\t\t\t\t}).addTo(this.map);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Light mode tiles\n\t\t\t\t\t\tL.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n\t\t\t\t\t\t\tattribution: '© OpenStreetMap contributors'\n\t\t\t\t\t\t}).addTo(this.map);\n\t\t\t\t\t}\n\n\t\t\t\t\t// Setup cleanup on page unload\n\t\t\t\t\twindow.addEventListener('beforeunload', () => {\n\t\t\t\t\t\tthis.cleanup();\n\t\t\t\t\t});\n\n\t\t\t\t\t// Setup cleanup on Alpine destroy\n\t\t\t\t\tthis.$watch('$store.cleanup', () => {\n\t\t\t\t\t\t// This will be called when Alpine is destroyed\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\taddPlayToMap(play) {\n\t\t\t\t\tif (!this.map) return;\n\t\t\t\t\t\n\t\t\t\t\t// Set default duration if not provided\n\t\t\t\t\tif (!play.duration) {\n\t\t\t\t\t\tplay.duration = 5; // Default 5 seconds\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\tconst color = this.getRandomColor();\n\t\t\t\t\t\n\t\t\t\t\t// Create radar-style animation with expanding circles\n\t\t\t\t\tconst radarGroup = L.layerGroup().addTo(this.map);\n\t\t\t\t\t\n\t\t\t\t\t// Create multiple expanding circles for radar effect\n\t\t\t\t\tfor (let i = 0; i < 3; i++) {\n\t\t\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\t\t\tconst circle = L.circle([play.lat, play.lng], {\n\t\t\t\t\t\t\t\tradius: 0,\n\t\t\t\t\t\t\t\tfillColor: color,\n\t\t\t\t\t\t\t\tcolor: color,\n\t\t\t\t\t\t\t\tweight: 2,\n\t\t\t\t\t\t\t\topacity: 0.8,\n\t\t\t\t\t\t\t\tfillOpacity: 0.3\n\t\t\t\t\t\t\t}).addTo(radarGroup);\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t// Animate the circle expansion\n\t\t\t\t\t\t\tlet radius = 0;\n\t\t\t\t\t\t\tlet opacity = 0.8;\n\t\t\t\t\t\t\tconst maxRadius = 100000; // 100km in meters\n\t\t\t\t\t\t\tconst animationDuration = 1000; // Fixed 1 second animation duration\n\t\t\t\t\t\t\tconst startTime = Date.now();\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tconst animate = () => {\n\t\t\t\t\t\t\t\tconst elapsed = Date.now() - startTime;\n\t\t\t\t\t\t\t\tconst progress = Math.min(elapsed / animationDuration, 1);\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tradius = maxRadius * progress;\n\t\t\t\t\t\t\t\topacity = 0.8 * (1 - progress);\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tcircle.setRadius(radius);\n\t\t\t\t\t\t\t\tcircle.setStyle({ \n\t\t\t\t\t\t\t\t\topacity: opacity,\n\t\t\t\t\t\t\t\t\tfillOpacity: opacity * 0.3\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tif (progress < 1) {\n\t\t\t\t\t\t\t\t\tconst frameId = requestAnimationFrame(animate);\n\t\t\t\t\t\t\t\t\tthis.animationFrames.add(frameId);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tradarGroup.removeLayer(circle);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tanimate();\n\t\t\t\t\t\t}, i * 200); // Stagger each circle by 200ms\n\t\t\t\t\t\t\n\t\t\t\t\t\tthis.timeouts.add(timeout);\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t// Add center dot\n\t\t\t\t\tconst centerDot = L.circleMarker([play.lat, play.lng], {\n\t\t\t\t\t\tradius: 4,\n\t\t\t\t\t\tfillColor: color,\n\t\t\t\t\t\tcolor: '#ffffff',\n\t\t\t\t\t\tweight: 2,\n\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\tfillOpacity: 1\n\t\t\t\t\t}).addTo(radarGroup);\n\t\t\t\t\t\n\t\t\t\t\t// Add popup with play info\n\t\t\t\t\tconst timestamp = play.timestamp ? new Date(play.timestamp).toLocaleTimeString() : new Date().toLocaleTimeString();\n\t\t\t\t\tcenterDot.bindPopup(`Play at ${timestamp}`);\n\t\t\t\t\t\n\t\t\t\t\t// Store group for cleanup\n\t\t\t\t\tthis.playMarkers.push(radarGroup);\n\t\t\t\t\t\n\t\t\t\t\t// Remove entire radar group after duration\n\t\t\t\t\tconst cleanupTimeout = setTimeout(() => {\n\t\t\t\t\t\tif (this.map && this.map.hasLayer(radarGroup)) {\n\t\t\t\t\t\t\tthis.map.removeLayer(radarGroup);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.playMarkers = this.playMarkers.filter(m => m !== radarGroup);\n\t\t\t\t\t}, play.duration * 1000);\n\t\t\t\t\t\n\t\t\t\t\tthis.timeouts.add(cleanupTimeout);\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tgetRandomColor() {\n\t\t\t\t\tconst colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#f0932b', '#eb4d4b', '#6c5ce7'];\n\t\t\t\t\treturn colors[Math.floor(Math.random() * colors.length)];\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tcleanup() {\n\t\t\t\t\t// Clear all timeouts\n\t\t\t\t\tthis.timeouts.forEach(timeout => clearTimeout(timeout));\n\t\t\t\t\tthis.timeouts.clear();\n\t\t\t\t\t\n\t\t\t\t\t// Cancel all animation frames\n\t\t\t\t\tthis.animationFrames.forEach(frameId => cancelAnimationFrame(frameId));\n\t\t\t\t\tthis.animationFrames.clear();\n\t\t\t\t\t\n\t\t\t\t\t// Remove event listener\n\t\t\t\t\tif (this.playEventListener) {\n\t\t\t\t\t\tdocument.removeEventListener('play', this.playEventListener);\n\t\t\t\t\t\tthis.playEventListener = null;\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t// Clean up map markers\n\t\t\t\t\tthis.playMarkers.forEach(marker => {\n\t\t\t\t\t\tif (this.map && this.map.hasLayer(marker)) {\n\t\t\t\t\t\t\tthis.map.removeLayer(marker);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\tthis.playMarkers = [];\n\t\t\t\t\t\n\t\t\t\t\t// Remove map\n\t\t\t\t\tif (this.map) {\n\t\t\t\t\t\tthis.map.remove();\n\t\t\t\t\t\tthis.map = null;\n\t\t\t\t\t}\n\t\t\t\t},\n\n\t\t\t\t// Alpine.js lifecycle hook\n\t\t\t\tdestroy() {\n\t\t\t\t\tthis.cleanup();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -1233,12 +1207,12 @@ func BlockEventsScript() templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var55 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var55 == nil {
-			templ_7745c5c3_Var55 = templ.NopComponent
+		templ_7745c5c3_Var53 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var53 == nil {
+			templ_7745c5c3_Var53 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 99, "<script>\n\t\tfunction animatedNumber() {\n\t\t\treturn {\n\t\t\t\tdisplayValue: 0,\n\t\t\t\tdigits: [],\n\t\t\t\tblockEventListener: null,\n\t\t\t\tanimationTimeouts: new Set(),\n\t\t\t\tisInitialized: false,\n\t\t\t\t\n\t\t\t\tinit(initialValue) {\n\t\t\t\t\t// Only initialize if we have a valid positive block height\n\t\t\t\t\t// This prevents flashing to 0 during SSE reconnection\n\t\t\t\t\tif (initialValue && initialValue > 0) {\n\t\t\t\t\t\tthis.displayValue = initialValue;\n\t\t\t\t\t\tthis.updateDigits(this.displayValue);\n\t\t\t\t\t\tthis.isInitialized = true;\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Try to get initial value from DOM as fallback\n\t\t\t\t\t\tthis.tryInitFromDOM();\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t// Create bound event listener for proper cleanup\n\t\t\t\t\tthis.blockEventListener = (event) => {\n\t\t\t\t\t\tif (event.detail && event.detail.height && event.detail.height > 0) {\n\t\t\t\t\t\t\t// If not initialized yet, use this as initial value\n\t\t\t\t\t\t\tif (!this.isInitialized) {\n\t\t\t\t\t\t\t\tthis.displayValue = event.detail.height;\n\t\t\t\t\t\t\t\tthis.updateDigits(this.displayValue);\n\t\t\t\t\t\t\t\tthis.isInitialized = true;\n\t\t\t\t\t\t\t} else if (event.detail.height !== this.displayValue) {\n\t\t\t\t\t\t\t\tthis.animateToNewValue(event.detail.height);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t\t\n\t\t\t\t\t// Listen directly to block events instead of watching parent data\n\t\t\t\t\tdocument.addEventListener('block', this.blockEventListener);\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\ttryInitFromDOM() {\n\t\t\t\t\t// Try to get block height from the stats header as fallback\n\t\t\t\t\tconst statsHeader = document.querySelector('#stats-header');\n\t\t\t\t\tif (statsHeader) {\n\t\t\t\t\t\tconst blockHeightEl = statsHeader.querySelector('.text-3xl');\n\t\t\t\t\t\tif (blockHeightEl && blockHeightEl.textContent) {\n\t\t\t\t\t\t\tconst height = parseInt(blockHeightEl.textContent.replace(/,/g, ''));\n\t\t\t\t\t\t\tif (height > 0) {\n\t\t\t\t\t\t\t\tthis.displayValue = height;\n\t\t\t\t\t\t\t\tthis.updateDigits(this.displayValue);\n\t\t\t\t\t\t\t\tthis.isInitialized = true;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tupdateDigits(value) {\n\t\t\t\t\tconst str = value.toString();\n\t\t\t\t\tconst newDigits = [];\n\t\t\t\t\t\n\t\t\t\t\t// Pad with leading zeros if necessary to maintain consistent width\n\t\t\t\t\tconst maxLength = Math.max(str.length, this.digits.length);\n\t\t\t\t\tconst paddedStr = str.padStart(maxLength, '0');\n\t\t\t\t\t\n\t\t\t\t\tfor (let i = 0; i < paddedStr.length; i++) {\n\t\t\t\t\t\tconst digit = parseInt(paddedStr[i]);\n\t\t\t\t\t\tconst existingDigit = this.digits[i];\n\t\t\t\t\t\t\n\t\t\t\t\t\tif (existingDigit) {\n\t\t\t\t\t\t\t// Keep existing digit state but update target\n\t\t\t\t\t\t\tnewDigits.push({\n\t\t\t\t\t\t\t\t...existingDigit,\n\t\t\t\t\t\t\t\tnext: digit,\n\t\t\t\t\t\t\t\tisAnimating: existingDigit.current !== digit\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// New digit\n\t\t\t\t\t\t\tnewDigits.push({\n\t\t\t\t\t\t\t\tcurrent: digit,\n\t\t\t\t\t\t\t\tnext: digit,\n\t\t\t\t\t\t\t\tisAnimating: false\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\tthis.digits = newDigits;\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tanimateToNewValue(newValue) {\n\t\t\t\t\tif (newValue === this.displayValue || newValue <= 0) return;\n\t\t\t\t\t\n\t\t\t\t\tthis.updateDigits(newValue);\n\t\t\t\t\t\n\t\t\t\t\t// Start animations for changed digits\n\t\t\t\t\tthis.digits.forEach((digit, index) => {\n\t\t\t\t\t\tif (digit.isAnimating) {\n\t\t\t\t\t\t\tthis.animateDigit(index);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\t\n\t\t\t\t\tthis.displayValue = newValue;\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tanimateDigit(index) {\n\t\t\t\t\tconst digit = this.digits[index];\n\t\t\t\t\t\n\t\t\t\t\t// Mark as animating\n\t\t\t\t\tdigit.isAnimating = true;\n\t\t\t\t\t\n\t\t\t\t\t// After animation duration, update the current digit and stop animating\n\t\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\t\tdigit.current = digit.next;\n\t\t\t\t\t\tdigit.isAnimating = false;\n\t\t\t\t\t\tthis.animationTimeouts.delete(timeout);\n\t\t\t\t\t}, 300); // Animation duration\n\t\t\t\t\t\n\t\t\t\t\tthis.animationTimeouts.add(timeout);\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tgetCurrentDigitClass(digit) {\n\t\t\t\t\tif (digit.isAnimating) {\n\t\t\t\t\t\treturn 'transform translate-y-full opacity-0 transition-all duration-300 ease-in-out';\n\t\t\t\t\t}\n\t\t\t\t\treturn 'transform translate-y-0 opacity-100';\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tgetNextDigitClass(digit) {\n\t\t\t\t\tif (digit.isAnimating) {\n\t\t\t\t\t\treturn 'transform translate-y-0 opacity-100 transition-all duration-300 ease-in-out';\n\t\t\t\t\t}\n\t\t\t\t\treturn 'transform -translate-y-full opacity-0';\n\t\t\t\t},\n\n\t\t\t\t// Alpine.js lifecycle hook\n\t\t\t\tdestroy() {\n\t\t\t\t\t// Clear all animation timeouts\n\t\t\t\t\tthis.animationTimeouts.forEach(timeout => clearTimeout(timeout));\n\t\t\t\t\tthis.animationTimeouts.clear();\n\t\t\t\t\t\n\t\t\t\t\t// Remove event listener\n\t\t\t\t\tif (this.blockEventListener) {\n\t\t\t\t\t\tdocument.removeEventListener('block', this.blockEventListener);\n\t\t\t\t\t\tthis.blockEventListener = null;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfunction blockEvents() {\n\t\t\treturn {\n\t\t\t\trecentBlocks: [],\n\t\t\t\tlatestBlock: { height: 0, proposer: '' },\n\t\t\t\tvalidatorCount: 0,\n\t\t\t\tblockEventListener: null,\n\t\t\t\t\n\t\t\t\tinit(initialState = {}) {\n\t\t\t\t\t// Set initial state from server-rendered values\n\t\t\t\t\tconst networkSidebar = document.querySelector('#network-sidebar');\n\t\t\t\t\tconst statsHeader = document.querySelector('#stats-header');\n\t\t\t\t\t\n\t\t\t\t\t// Set initial validator count from server\n\t\t\t\t\tif (initialState.validatorCount) {\n\t\t\t\t\t\tthis.validatorCount = parseInt(initialState.validatorCount);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (networkSidebar) {\n\t\t\t\t\t\tconst blockHeightEl = networkSidebar.querySelector('a[href^=\"/block/\"]');\n\t\t\t\t\t\tconst proposerEl = networkSidebar.querySelector('a[href^=\"/validator/\"]');\n\n\t\t\t\t\t\tif (blockHeightEl && proposerEl) {\n\t\t\t\t\t\t\tthis.latestBlock = {\n\t\t\t\t\t\t\t\theight: parseInt(blockHeightEl.textContent.replace('#', '')),\n\t\t\t\t\t\t\t\tproposer: proposerEl.href.split('/').pop()\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// Also get initial block height from stats header\n\t\t\t\t\tif (statsHeader) {\n\t\t\t\t\t\tconst blockHeightEl = statsHeader.querySelector('.text-3xl');\n\t\t\t\t\t\tif (blockHeightEl) {\n\t\t\t\t\t\t\tthis.latestBlock.height = parseInt(blockHeightEl.textContent);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// Create bound event listener for proper cleanup\n\t\t\t\t\tthis.blockEventListener = (event) => {\n\t\t\t\t\t\tthis.handleBlockEvent(event.detail);\n\t\t\t\t\t};\n\t\t\t\t\t\n\t\t\t\t\tdocument.addEventListener('block', this.blockEventListener);\n\t\t\t\t},\n\n\t\t\t\tformatProposer(proposer) {\n\t\t\t\t\treturn proposer.length > 12 \n\t\t\t\t\t\t? `${proposer.slice(0, 6)}...${proposer.slice(-4)}`\n\t\t\t\t\t\t: proposer;\n\t\t\t\t},\n\n\t\t\t\thandleBlockEvent(blockData) {\n\t\t\t\t\t// Check if we already have this block\n\t\t\t\t\tconst existingBlockIndex = this.recentBlocks.findIndex(block => block.height === blockData.height);\n\t\t\t\t\tif (existingBlockIndex !== -1) {\n\t\t\t\t\t\t// Remove the existing block if found\n\t\t\t\t\t\tthis.recentBlocks.splice(existingBlockIndex, 1);\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t// Add new block to the beginning of the array\n\t\t\t\t\tthis.recentBlocks.unshift(blockData);\n\t\t\t\t\t\n\t\t\t\t\t// Keep only the last 5 blocks to prevent memory growth\n\t\t\t\t\tif (this.recentBlocks.length > 5) {\n\t\t\t\t\t\tthis.recentBlocks = this.recentBlocks.slice(0, 5);\n\t\t\t\t\t}\n\n\t\t\t\t\t// Update latest block\n\t\t\t\t\tthis.latestBlock = blockData;\n\t\t\t\t},\n\n\t\t\t\t// Alpine.js lifecycle hook\n\t\t\t\tdestroy() {\n\t\t\t\t\t// Remove event listener\n\t\t\t\t\tif (this.blockEventListener) {\n\t\t\t\t\t\tdocument.removeEventListener('block', this.blockEventListener);\n\t\t\t\t\t\tthis.blockEventListener = null;\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t// Clear arrays\n\t\t\t\t\tthis.recentBlocks = [];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Global cleanup on page unload\n\t\twindow.addEventListener('beforeunload', () => {\n\t\t\t// Cleanup any remaining Alpine components\n\t\t\tif (window.Alpine && window.Alpine.store('cleanup')) {\n\t\t\t\twindow.Alpine.store('cleanup').destroy();\n\t\t\t}\n\t\t});\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 97, "<script>\n\t\tfunction animatedNumber() {\n\t\t\treturn {\n\t\t\t\tdisplayValue: 0,\n\t\t\t\tdigits: [],\n\t\t\t\tblockEventListener: null,\n\t\t\t\tanimationTimeouts: new Set(),\n\t\t\t\tisInitialized: false,\n\t\t\t\t\n\t\t\t\tinit(initialValue) {\n\t\t\t\t\t// Only initialize if we have a valid positive block height\n\t\t\t\t\t// This prevents flashing to 0 during SSE reconnection\n\t\t\t\t\tif (initialValue && initialValue > 0) {\n\t\t\t\t\t\tthis.displayValue = initialValue;\n\t\t\t\t\t\tthis.updateDigits(this.displayValue);\n\t\t\t\t\t\tthis.isInitialized = true;\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Try to get initial value from DOM as fallback\n\t\t\t\t\t\tthis.tryInitFromDOM();\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t// Create bound event listener for proper cleanup\n\t\t\t\t\tthis.blockEventListener = (event) => {\n\t\t\t\t\t\tif (event.detail && event.detail.height && event.detail.height > 0) {\n\t\t\t\t\t\t\t// If not initialized yet, use this as initial value\n\t\t\t\t\t\t\tif (!this.isInitialized) {\n\t\t\t\t\t\t\t\tthis.displayValue = event.detail.height;\n\t\t\t\t\t\t\t\tthis.updateDigits(this.displayValue);\n\t\t\t\t\t\t\t\tthis.isInitialized = true;\n\t\t\t\t\t\t\t} else if (event.detail.height !== this.displayValue) {\n\t\t\t\t\t\t\t\tthis.animateToNewValue(event.detail.height);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t\t\n\t\t\t\t\t// Listen directly to block events instead of watching parent data\n\t\t\t\t\tdocument.addEventListener('block', this.blockEventListener);\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\ttryInitFromDOM() {\n\t\t\t\t\t// Try to get block height from the stats header as fallback\n\t\t\t\t\tconst statsHeader = document.querySelector('#stats-header');\n\t\t\t\t\tif (statsHeader) {\n\t\t\t\t\t\tconst blockHeightEl = statsHeader.querySelector('.text-3xl');\n\t\t\t\t\t\tif (blockHeightEl && blockHeightEl.textContent) {\n\t\t\t\t\t\t\tconst height = parseInt(blockHeightEl.textContent.replace(/,/g, ''));\n\t\t\t\t\t\t\tif (height > 0) {\n\t\t\t\t\t\t\t\tthis.displayValue = height;\n\t\t\t\t\t\t\t\tthis.updateDigits(this.displayValue);\n\t\t\t\t\t\t\t\tthis.isInitialized = true;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tupdateDigits(value) {\n\t\t\t\t\tconst str = value.toString();\n\t\t\t\t\tconst newDigits = [];\n\t\t\t\t\t\n\t\t\t\t\t// Pad with leading zeros if necessary to maintain consistent width\n\t\t\t\t\tconst maxLength = Math.max(str.length, this.digits.length);\n\t\t\t\t\tconst paddedStr = str.padStart(maxLength, '0');\n\t\t\t\t\t\n\t\t\t\t\tfor (let i = 0; i < paddedStr.length; i++) {\n\t\t\t\t\t\tconst digit = parseInt(paddedStr[i]);\n\t\t\t\t\t\tconst existingDigit = this.digits[i];\n\t\t\t\t\t\t\n\t\t\t\t\t\tif (existingDigit) {\n\t\t\t\t\t\t\t// Keep existing digit state but update target\n\t\t\t\t\t\t\tnewDigits.push({\n\t\t\t\t\t\t\t\t...existingDigit,\n\t\t\t\t\t\t\t\tnext: digit,\n\t\t\t\t\t\t\t\tisAnimating: existingDigit.current !== digit\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// New digit\n\t\t\t\t\t\t\tnewDigits.push({\n\t\t\t\t\t\t\t\tcurrent: digit,\n\t\t\t\t\t\t\t\tnext: digit,\n\t\t\t\t\t\t\t\tisAnimating: false\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\tthis.digits = newDigits;\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tanimateToNewValue(newValue) {\n\t\t\t\t\tif (newValue === this.displayValue || newValue <= 0) return;\n\t\t\t\t\t\n\t\t\t\t\tthis.updateDigits(newValue);\n\t\t\t\t\t\n\t\t\t\t\t// Start animations for changed digits\n\t\t\t\t\tthis.digits.forEach((digit, index) => {\n\t\t\t\t\t\tif (digit.isAnimating) {\n\t\t\t\t\t\t\tthis.animateDigit(index);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\t\n\t\t\t\t\tthis.displayValue = newValue;\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tanimateDigit(index) {\n\t\t\t\t\tconst digit = this.digits[index];\n\t\t\t\t\t\n\t\t\t\t\t// Mark as animating\n\t\t\t\t\tdigit.isAnimating = true;\n\t\t\t\t\t\n\t\t\t\t\t// After animation duration, update the current digit and stop animating\n\t\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\t\tdigit.current = digit.next;\n\t\t\t\t\t\tdigit.isAnimating = false;\n\t\t\t\t\t\tthis.animationTimeouts.delete(timeout);\n\t\t\t\t\t}, 300); // Animation duration\n\t\t\t\t\t\n\t\t\t\t\tthis.animationTimeouts.add(timeout);\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tgetCurrentDigitClass(digit) {\n\t\t\t\t\tif (digit.isAnimating) {\n\t\t\t\t\t\treturn 'transform translate-y-full opacity-0 transition-all duration-300 ease-in-out';\n\t\t\t\t\t}\n\t\t\t\t\treturn 'transform translate-y-0 opacity-100';\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tgetNextDigitClass(digit) {\n\t\t\t\t\tif (digit.isAnimating) {\n\t\t\t\t\t\treturn 'transform translate-y-0 opacity-100 transition-all duration-300 ease-in-out';\n\t\t\t\t\t}\n\t\t\t\t\treturn 'transform -translate-y-full opacity-0';\n\t\t\t\t},\n\n\t\t\t\t// Alpine.js lifecycle hook\n\t\t\t\tdestroy() {\n\t\t\t\t\t// Clear all animation timeouts\n\t\t\t\t\tthis.animationTimeouts.forEach(timeout => clearTimeout(timeout));\n\t\t\t\t\tthis.animationTimeouts.clear();\n\t\t\t\t\t\n\t\t\t\t\t// Remove event listener\n\t\t\t\t\tif (this.blockEventListener) {\n\t\t\t\t\t\tdocument.removeEventListener('block', this.blockEventListener);\n\t\t\t\t\t\tthis.blockEventListener = null;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfunction blockEvents() {\n\t\t\treturn {\n\t\t\t\trecentBlocks: [],\n\t\t\t\tlatestBlock: { height: 0, proposer: '' },\n\t\t\t\tvalidatorCount: 0,\n\t\t\t\tblockEventListener: null,\n\t\t\t\t\n\t\t\t\tinit(initialState = {}) {\n\t\t\t\t\t// Set initial state from server-rendered values\n\t\t\t\t\tconst networkSidebar = document.querySelector('#network-sidebar');\n\t\t\t\t\tconst statsHeader = document.querySelector('#stats-header');\n\t\t\t\t\t\n\t\t\t\t\t// Set initial validator count from server\n\t\t\t\t\tif (initialState.validatorCount) {\n\t\t\t\t\t\tthis.validatorCount = parseInt(initialState.validatorCount);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (networkSidebar) {\n\t\t\t\t\t\tconst blockHeightEl = networkSidebar.querySelector('a[href^=\"/block/\"]');\n\t\t\t\t\t\tconst proposerEl = networkSidebar.querySelector('a[href^=\"/validator/\"]');\n\n\t\t\t\t\t\tif (blockHeightEl && proposerEl) {\n\t\t\t\t\t\t\tthis.latestBlock = {\n\t\t\t\t\t\t\t\theight: parseInt(blockHeightEl.textContent.replace('#', '')),\n\t\t\t\t\t\t\t\tproposer: proposerEl.href.split('/').pop()\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// Also get initial block height from stats header\n\t\t\t\t\tif (statsHeader) {\n\t\t\t\t\t\tconst blockHeightEl = statsHeader.querySelector('.text-3xl');\n\t\t\t\t\t\tif (blockHeightEl) {\n\t\t\t\t\t\t\tthis.latestBlock.height = parseInt(blockHeightEl.textContent);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// Create bound event listener for proper cleanup\n\t\t\t\t\tthis.blockEventListener = (event) => {\n\t\t\t\t\t\tthis.handleBlockEvent(event.detail);\n\t\t\t\t\t};\n\t\t\t\t\t\n\t\t\t\t\tdocument.addEventListener('block', this.blockEventListener);\n\t\t\t\t},\n\n\t\t\t\tformatProposer(proposer) {\n\t\t\t\t\treturn proposer.length > 12 \n\t\t\t\t\t\t? `${proposer.slice(0, 6)}...${proposer.slice(-4)}`\n\t\t\t\t\t\t: proposer;\n\t\t\t\t},\n\n\t\t\t\thandleBlockEvent(blockData) {\n\t\t\t\t\t// Check if we already have this block\n\t\t\t\t\tconst existingBlockIndex = this.recentBlocks.findIndex(block => block.height === blockData.height);\n\t\t\t\t\tif (existingBlockIndex !== -1) {\n\t\t\t\t\t\t// Remove the existing block if found\n\t\t\t\t\t\tthis.recentBlocks.splice(existingBlockIndex, 1);\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t// Add new block to the beginning of the array\n\t\t\t\t\tthis.recentBlocks.unshift(blockData);\n\t\t\t\t\t\n\t\t\t\t\t// Keep only the last 5 blocks to prevent memory growth\n\t\t\t\t\tif (this.recentBlocks.length > 5) {\n\t\t\t\t\t\tthis.recentBlocks = this.recentBlocks.slice(0, 5);\n\t\t\t\t\t}\n\n\t\t\t\t\t// Update latest block\n\t\t\t\t\tthis.latestBlock = blockData;\n\t\t\t\t},\n\n\t\t\t\t// Alpine.js lifecycle hook\n\t\t\t\tdestroy() {\n\t\t\t\t\t// Remove event listener\n\t\t\t\t\tif (this.blockEventListener) {\n\t\t\t\t\t\tdocument.removeEventListener('block', this.blockEventListener);\n\t\t\t\t\t\tthis.blockEventListener = null;\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t// Clear arrays\n\t\t\t\t\tthis.recentBlocks = [];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Global cleanup on page unload\n\t\twindow.addEventListener('beforeunload', () => {\n\t\t\t// Cleanup any remaining Alpine components\n\t\t\tif (window.Alpine && window.Alpine.store('cleanup')) {\n\t\t\t\twindow.Alpine.store('cleanup').destroy();\n\t\t\t}\n\t\t});\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -1263,12 +1237,12 @@ func SLAChartScript() templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var56 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var56 == nil {
-			templ_7745c5c3_Var56 = templ.NopComponent
+		templ_7745c5c3_Var54 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var54 == nil {
+			templ_7745c5c3_Var54 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 100, "<script src=\"https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js\"></script><script>\n\t\tfunction chartMeta() {\n\t\t\treturn {\n\t\t\t\tblockRange: '',\n\t\t\t\ttimeRange: '',\n\t\t\t\t\n\t\t\t\tinit() {\n\t\t\t\t\tconst dataStr = this.$el.getAttribute('data-chart-data');\n\t\t\t\t\t\n\t\t\t\t\ttry {\n\t\t\t\t\t\tconst chartData = JSON.parse(dataStr);\n\t\t\t\t\t\tif (chartData && chartData.length > 0) {\n\t\t\t\t\t\t\t// Sort by block height\n\t\t\t\t\t\t\tchartData.sort((a, b) => a.blockHeight - b.blockHeight);\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tconst firstBlock = chartData[0].blockHeight;\n\t\t\t\t\t\t\tconst lastBlock = chartData[chartData.length - 1].blockHeight;\n\t\t\t\t\t\t\tthis.blockRange = `Blocks ${firstBlock.toLocaleString()} - ${lastBlock.toLocaleString()}`;\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t// Calculate time range\n\t\t\t\t\t\t\tconst firstTime = new Date(chartData[0].timestamp);\n\t\t\t\t\t\t\tconst lastTime = new Date(chartData[chartData.length - 1].timestamp);\n\t\t\t\t\t\t\tconst now = new Date();\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t// Time since last data point\n\t\t\t\t\t\t\tconst timeSinceMs = now - lastTime;\n\t\t\t\t\t\t\tconst timeSince = this.formatTimeSince(timeSinceMs);\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t// Duration of the data range\n\t\t\t\t\t\t\tconst durationMs = lastTime - firstTime;\n\t\t\t\t\t\t\tconst duration = this.formatDuration(durationMs);\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tthis.timeRange = `${duration} span • ${timeSince} ago`;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.blockRange = 'No data available';\n\t\t\t\t\t\t\tthis.timeRange = '';\n\t\t\t\t\t\t}\n\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\tconsole.error('Failed to parse chart meta data:', e);\n\t\t\t\t\t\tthis.blockRange = 'Error loading data';\n\t\t\t\t\t\tthis.timeRange = '';\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tformatTimeSince(ms) {\n\t\t\t\t\tconst seconds = Math.floor(ms / 1000);\n\t\t\t\t\tconst minutes = Math.floor(seconds / 60);\n\t\t\t\t\tconst hours = Math.floor(minutes / 60);\n\t\t\t\t\tconst days = Math.floor(hours / 24);\n\t\t\t\t\t\n\t\t\t\t\tif (days > 0) return `${days} day${days > 1 ? 's' : ''}`;\n\t\t\t\t\tif (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''}`;\n\t\t\t\t\tif (minutes > 0) return `${minutes} min`;\n\t\t\t\t\treturn `${seconds} sec`;\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tformatDuration(ms) {\n\t\t\t\t\tconst seconds = Math.floor(ms / 1000);\n\t\t\t\t\tconst minutes = Math.floor(seconds / 60);\n\t\t\t\t\tconst hours = Math.floor(minutes / 60);\n\t\t\t\t\tconst days = Math.floor(hours / 24);\n\t\t\t\t\t\n\t\t\t\t\tif (days > 0) return `${days} day${days > 1 ? 's' : ''}`;\n\t\t\t\t\tif (hours > 0) return `${hours}h`;\n\t\t\t\t\tif (minutes > 0) return `${minutes}m`;\n\t\t\t\t\treturn `${seconds}s`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfunction slaChart() {\n\t\t\treturn {\n\t\t\t\tchart: null,\n\t\t\t\tchartData: [],\n\t\t\t\t\n\t\t\t\tinitChart() {\n\t\t\t\t\t// Get data from the data attribute\n\t\t\t\t\tconst canvas = document.getElementById('slaPerformanceChart');\n\t\t\t\t\tif (!canvas) {\n\t\t\t\t\t\tconsole.error('Chart canvas not found');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\tconst dataStr = canvas.getAttribute('data-chart-data');\n\t\t\t\t\tif (!dataStr || dataStr === 'null' || dataStr === 'undefined') {\n\t\t\t\t\t\tconsole.log('No chart data available');\n\t\t\t\t\t\tcanvas.style.display = 'none';\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\ttry {\n\t\t\t\t\t\tthis.chartData = JSON.parse(dataStr);\n\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\tconsole.error('Failed to parse chart data:', e, 'Raw data:', dataStr);\n\t\t\t\t\t\tthis.chartData = [];\n\t\t\t\t\t\tcanvas.style.display = 'none';\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// If no data or invalid data, don't create chart\n\t\t\t\t\tif (!this.chartData || !Array.isArray(this.chartData) || this.chartData.length === 0) {\n\t\t\t\t\t\tconsole.log('Invalid or empty chart data:', this.chartData);\n\t\t\t\t\t\tcanvas.style.display = 'none';\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Validate each data point\n\t\t\t\t\tconst validData = this.chartData.filter(point => {\n\t\t\t\t\t\treturn point && \n\t\t\t\t\t\t       typeof point.rollupId === 'number' && \n\t\t\t\t\t\t       typeof point.blockHeight === 'number' && \n\t\t\t\t\t\t       typeof point.timestamp === 'string' && \n\t\t\t\t\t\t       typeof point.validatorCount === 'number' && \n\t\t\t\t\t\t       typeof point.bps === 'number' && \n\t\t\t\t\t\t       typeof point.tps === 'number';\n\t\t\t\t\t});\n\n\t\t\t\t\tif (validData.length === 0) {\n\t\t\t\t\t\tconsole.log('No valid data points found');\n\t\t\t\t\t\tcanvas.style.display = 'none';\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.chartData = validData;\n\n\t\t\t\t\t// Sort data by block height (ascending)\n\t\t\t\t\tthis.chartData.sort((a, b) => a.blockHeight - b.blockHeight);\n\n\t\t\t\t\tconst ctx = canvas.getContext('2d');\n\t\t\t\t\tconst isDarkMode = document.documentElement.classList.contains('dark') || \n\t\t\t\t\t                  window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n\t\t\t\t\t// Calculate dynamic axis ranges\n\t\t\t\t\tconst validatorValues = this.chartData.map(point => point.validatorCount);\n\t\t\t\t\tconst healthyValidatorValues = this.chartData.map(point => point.healthyValidators);\n\t\t\t\t\tconst bpsValues = this.chartData.map(point => point.bps);\n\t\t\t\t\tconst tpsValues = this.chartData.map(point => point.tps);\n\t\t\t\t\t\n\t\t\t\t\t// Combined validator values for left axis (include both total and healthy validators)\n\t\t\t\t\tconst allValidatorValues = [...validatorValues, ...healthyValidatorValues];\n\t\t\t\t\t// Combined performance values for right axis\n\t\t\t\t\tconst performanceValues = [...bpsValues, ...tpsValues];\n\t\t\t\t\t\n\t\t\t\t\t// Calculate min/max with padding - now includes both validator count and healthy validator count\n\t\t\t\t\tconst validatorMin = Math.max(0, Math.min(...allValidatorValues) - 3);\n\t\t\t\t\tconst validatorMax = Math.max(...allValidatorValues) + 3;\n\t\t\t\t\tconst performanceMin = Math.max(0, Math.min(...performanceValues) - 1);\n\t\t\t\t\tconst performanceMax = Math.max(...performanceValues) + 2;\n\n\t\t\t\t\tconst labels = this.chartData.map(point => {\n\t\t\t\t\t\tconst date = new Date(point.timestamp);\n\t\t\t\t\t\treturn date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});\n\t\t\t\t\t});\n\n\n\n\t\t\t\t\tthis.chart = new Chart(ctx, {\n\t\t\t\t\t\ttype: 'line',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tlabels: labels,\n\t\t\t\t\t\t\tdatasets: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Validators',\n\t\t\t\t\t\t\t\t\tdata: this.chartData.map(point => point.validatorCount),\n\t\t\t\t\t\t\t\t\tborderColor: isDarkMode ? '#60a5fa' : '#2563eb',\n\t\t\t\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t\tfill: false,\n\t\t\t\t\t\t\t\t\ttension: 0.3,\n\t\t\t\t\t\t\t\t\tpointRadius: 0,\n\t\t\t\t\t\t\t\t\tpointHoverRadius: 6,\n\t\t\t\t\t\t\t\t\tpointBackgroundColor: isDarkMode ? '#60a5fa' : '#2563eb',\n\t\t\t\t\t\t\t\t\tpointBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointBorderWidth: 2,\n\t\t\t\t\t\t\t\t\tpointHoverBackgroundColor: isDarkMode ? '#93c5fd' : '#1d4ed8',\n\t\t\t\t\t\t\t\t\tpointHoverBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointHoverBorderWidth: 3,\n\t\t\t\t\t\t\t\t\tyAxisID: 'y'\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Healthy Validators',\n\t\t\t\t\t\t\t\t\tdata: this.chartData.map(point => point.healthyValidators),\n\t\t\t\t\t\t\t\t\tborderColor: isDarkMode ? '#10b981' : '#059669',\n\t\t\t\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t\tfill: false,\n\t\t\t\t\t\t\t\t\ttension: 0.3,\n\t\t\t\t\t\t\t\t\tpointRadius: 0,\n\t\t\t\t\t\t\t\t\tpointHoverRadius: 6,\n\t\t\t\t\t\t\t\t\tpointBackgroundColor: isDarkMode ? '#10b981' : '#059669',\n\t\t\t\t\t\t\t\t\tpointBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointBorderWidth: 2,\n\t\t\t\t\t\t\t\t\tpointHoverBackgroundColor: isDarkMode ? '#34d399' : '#047857',\n\t\t\t\t\t\t\t\t\tpointHoverBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointHoverBorderWidth: 3,\n\t\t\t\t\t\t\t\t\tyAxisID: 'y'\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'BPS',\n\t\t\t\t\t\t\t\t\tdata: this.chartData.map(point => point.bps),\n\t\t\t\t\t\t\t\t\tborderColor: isDarkMode ? '#c084fc' : '#7c3aed',\n\t\t\t\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t\tfill: false,\n\t\t\t\t\t\t\t\t\ttension: 0.3,\n\t\t\t\t\t\t\t\t\tpointRadius: 0,\n\t\t\t\t\t\t\t\t\tpointHoverRadius: 6,\n\t\t\t\t\t\t\t\t\tpointBackgroundColor: isDarkMode ? '#c084fc' : '#7c3aed',\n\t\t\t\t\t\t\t\t\tpointBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointBorderWidth: 2,\n\t\t\t\t\t\t\t\t\tpointHoverBackgroundColor: isDarkMode ? '#ddd6fe' : '#5b21b6',\n\t\t\t\t\t\t\t\t\tpointHoverBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointHoverBorderWidth: 3,\n\t\t\t\t\t\t\t\t\tyAxisID: 'y1'\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'TPS',\n\t\t\t\t\t\t\t\t\tdata: this.chartData.map(point => point.tps),\n\t\t\t\t\t\t\t\t\tborderColor: isDarkMode ? '#f472b6' : '#db2777',\n\t\t\t\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t\tfill: false,\n\t\t\t\t\t\t\t\t\ttension: 0.3,\n\t\t\t\t\t\t\t\t\tpointRadius: 0,\n\t\t\t\t\t\t\t\t\tpointHoverRadius: 6,\n\t\t\t\t\t\t\t\t\tpointBackgroundColor: isDarkMode ? '#f472b6' : '#db2777',\n\t\t\t\t\t\t\t\t\tpointBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointBorderWidth: 2,\n\t\t\t\t\t\t\t\t\tpointHoverBackgroundColor: isDarkMode ? '#fce7f3' : '#be185d',\n\t\t\t\t\t\t\t\t\tpointHoverBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointHoverBorderWidth: 3,\n\t\t\t\t\t\t\t\t\tyAxisID: 'y1'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t},\n\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\tresponsive: true,\n\t\t\t\t\t\t\tmaintainAspectRatio: false,\n\t\t\t\t\t\t\tinteraction: {\n\t\t\t\t\t\t\t\tmode: 'index',\n\t\t\t\t\t\t\t\tintersect: false,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\telements: {\n\t\t\t\t\t\t\t\tline: {\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tpoint: {\n\t\t\t\t\t\t\t\t\tradius: 0,\n\t\t\t\t\t\t\t\t\thoverRadius: 6,\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t\thoverBorderWidth: 3\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tanimation: {\n\t\t\t\t\t\t\t\tduration: 300,\n\t\t\t\t\t\t\t\teasing: 'easeInOutQuart'\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tplugins: {\n\t\t\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\t\t\tdisplay: false\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tlegend: {\n\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\tposition: 'top',\n\t\t\t\t\t\t\t\t\talign: 'start',\n\t\t\t\t\t\t\t\t\tlabels: {\n\t\t\t\t\t\t\t\t\t\tusePointStyle: true,\n\t\t\t\t\t\t\t\t\t\tpointStyle: 'rect',\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#d1d5db' : '#4b5563',\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tsize: 11,\n\t\t\t\t\t\t\t\t\t\t\tweight: '400'\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tpadding: 20,\n\t\t\t\t\t\t\t\t\t\tpointStyleWidth: 15,\n\t\t\t\t\t\t\t\t\t\tgenerateLabels: function(chart) {\n\t\t\t\t\t\t\t\t\t\t\tconst original = Chart.defaults.plugins.legend.labels.generateLabels;\n\t\t\t\t\t\t\t\t\t\t\tconst labels = original.call(this, chart);\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\tlabels.forEach((label, index) => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst dataset = chart.data.datasets[index];\n\t\t\t\t\t\t\t\t\t\t\t\tif (dataset) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel.fillStyle = dataset.borderColor;\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel.strokeStyle = dataset.borderColor;\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel.pointStyle = 'rect';\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\treturn labels;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ttooltip: {\n\t\t\t\t\t\t\t\t\tbackgroundColor: isDarkMode ? 'rgba(17, 24, 39, 0.96)' : 'rgba(255, 255, 255, 0.96)',\n\t\t\t\t\t\t\t\t\ttitleColor: isDarkMode ? '#f3f4f6' : '#1f2937',\n\t\t\t\t\t\t\t\t\tbodyColor: isDarkMode ? '#e5e7eb' : '#374151',\n\t\t\t\t\t\t\t\t\tborderColor: isDarkMode ? '#6b7280' : '#d1d5db',\n\t\t\t\t\t\t\t\t\tborderWidth: 1,\n\t\t\t\t\t\t\t\t\tcornerRadius: 8,\n\t\t\t\t\t\t\t\t\tdisplayColors: true,\n\t\t\t\t\t\t\t\t\ttitleFont: {\n\t\t\t\t\t\t\t\t\t\tsize: 12,\n\t\t\t\t\t\t\t\t\t\tweight: '600'\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tbodyFont: {\n\t\t\t\t\t\t\t\t\t\tsize: 10,\n\t\t\t\t\t\t\t\t\t\tweight: '400'\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tpadding: 12,\n\t\t\t\t\t\t\t\t\tmaxWidth: 350,\n\t\t\t\t\t\t\t\t\ttitleSpacing: 4,\n\t\t\t\t\t\t\t\t\tbodySpacing: 2,\n\t\t\t\t\t\t\t\t\tcallbacks: {\n\t\t\t\t\t\t\t\t\t\ttitle: (context) => {\n\t\t\t\t\t\t\t\t\t\t\tconst dataIndex = context[0].dataIndex;\n\t\t\t\t\t\t\t\t\t\t\tconst point = this.chartData[dataIndex];\n\t\t\t\t\t\t\t\t\t\t\tif (!point) return '';\n\t\t\t\t\t\t\t\t\t\t\tconst date = new Date(point.timestamp);\n\t\t\t\t\t\t\t\t\t\t\treturn date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tlabel: (context) => {\n\t\t\t\t\t\t\t\t\t\t\tconst datasetLabel = context.dataset.label;\n\t\t\t\t\t\t\t\t\t\t\tconst value = context.parsed.y;\n\t\t\t\t\t\t\t\t\t\t\tconst dataIndex = context.dataIndex;\n\t\t\t\t\t\t\t\t\t\t\tconst point = this.chartData[dataIndex];\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\tif (datasetLabel === 'Validators') {\n\t\t\t\t\t\t\t\t\t\t\t\treturn `Validators: ${value}`;\n\t\t\t\t\t\t\t\t\t\t\t} else if (datasetLabel === 'Healthy Validators') {\n\t\t\t\t\t\t\t\t\t\t\t\treturn `Healthy Validators: ${value}`;\n\t\t\t\t\t\t\t\t\t\t\t} else if (datasetLabel === 'BPS') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Convert BPS to Block Time for better readability\n\t\t\t\t\t\t\t\t\t\t\t\tconst blockTime = point && point.bps > 0 ? (1 / point.bps) : 0;\n\t\t\t\t\t\t\t\t\t\t\t\treturn `Block Time: ${blockTime.toFixed(2)}s`;\n\t\t\t\t\t\t\t\t\t\t\t} else if (datasetLabel === 'TPS') {\n\t\t\t\t\t\t\t\t\t\t\t\treturn `Transactions/sec: ${value.toFixed(2)}`;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tafterBody: (context) => {\n\t\t\t\t\t\t\t\t\t\t\tconst dataIndex = context[0].dataIndex;\n\t\t\t\t\t\t\t\t\t\t\tconst point = this.chartData[dataIndex];\n\t\t\t\t\t\t\t\t\t\t\tif (!point) return [];\n\t\t\t\t\t\t\t\t\t\t\treturn [\n\t\t\t\t\t\t\t\t\t\t\t\t'',\n\t\t\t\t\t\t\t\t\t\t\t\t`Block ${point.blockHeight.toLocaleString()}`\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tscales: {\n\t\t\t\t\t\t\t\tx: {\n\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\t\t\t\tdisplay: false\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tticks: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#9ca3af' : '#6b7280',\n\t\t\t\t\t\t\t\t\t\tmaxTicksLimit: 8,\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tweight: '400',\n\t\t\t\t\t\t\t\t\t\t\tsize: 10\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tgrid: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#374151' : '#f3f4f6',\n\t\t\t\t\t\t\t\t\t\tlineWidth: 0.5,\n\t\t\t\t\t\t\t\t\t\tborderDash: [3, 3]\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tborder: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#4b5563' : '#d1d5db',\n\t\t\t\t\t\t\t\t\t\twidth: 0.5\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ty: {\n\t\t\t\t\t\t\t\t\ttype: 'linear',\n\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\tposition: 'left',\n\t\t\t\t\t\t\t\t\tmin: validatorMin,\n\t\t\t\t\t\t\t\t\tmax: validatorMax,\n\t\t\t\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\t\ttext: 'Validators',\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#9ca3af' : '#6b7280',\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tweight: '500',\n\t\t\t\t\t\t\t\t\t\t\tsize: 11\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tticks: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#9ca3af' : '#6b7280',\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tweight: '400',\n\t\t\t\t\t\t\t\t\t\t\tsize: 10\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tgrid: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#374151' : '#f3f4f6',\n\t\t\t\t\t\t\t\t\t\tlineWidth: 0.5,\n\t\t\t\t\t\t\t\t\t\tborderDash: [3, 3]\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tborder: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#4b5563' : '#d1d5db',\n\t\t\t\t\t\t\t\t\t\twidth: 0.5\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ty1: {\n\t\t\t\t\t\t\t\t\ttype: 'linear',\n\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\tposition: 'right',\n\t\t\t\t\t\t\t\t\tmin: performanceMin,\n\t\t\t\t\t\t\t\t\tmax: performanceMax,\n\t\t\t\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\t\ttext: 'Performance (BPS/TPS)',\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#9ca3af' : '#6b7280',\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tweight: '500',\n\t\t\t\t\t\t\t\t\t\t\tsize: 11\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tticks: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#9ca3af' : '#6b7280',\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tweight: '400',\n\t\t\t\t\t\t\t\t\t\t\tsize: 10\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tgrid: {\n\t\t\t\t\t\t\t\t\t\tdrawOnChartArea: false,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tborder: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#4b5563' : '#d1d5db',\n\t\t\t\t\t\t\t\t\t\twidth: 0.5\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tonClick: (event, elements) => {\n\t\t\t\t\t\t\t\tif (elements.length > 0) {\n\t\t\t\t\t\t\t\t\tconst dataIndex = elements[0].index;\n\t\t\t\t\t\t\t\t\tconst point = this.chartData[dataIndex];\n\t\t\t\t\t\t\t\t\tif (point && point.rollupId) {\n\t\t\t\t\t\t\t\t\t\t// Navigate to rollup details page\n\t\t\t\t\t\t\t\t\t\twindow.location.href = `/validators/uptime/${point.rollupId}`;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tonHover: (event, elements) => {\n\t\t\t\t\t\t\t\tconst canvas = event.native.target;\n\t\t\t\t\t\t\t\tcanvas.style.cursor = elements.length > 0 ? 'pointer' : 'default';\n\t\t\t\t\t\t\t},\n\n\t\t\t\t\t\t\tlayout: {\n\t\t\t\t\t\t\t\tpadding: {\n\t\t\t\t\t\t\t\t\tleft: 10,\n\t\t\t\t\t\t\t\t\tright: 10,\n\t\t\t\t\t\t\t\t\ttop: 5,\n\t\t\t\t\t\t\t\t\tbottom: 5\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t},\n\n\n\n\n\n\t\t\t\t// Alpine.js lifecycle hook\n\t\t\t\tdestroy() {\n\t\t\t\t\tif (this.chart) {\n\t\t\t\t\t\tthis.chart.destroy();\n\t\t\t\t\t\tthis.chart = null;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 98, "<script src=\"https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js\"></script><script>\n\t\tfunction chartMeta() {\n\t\t\treturn {\n\t\t\t\tblockRange: '',\n\t\t\t\ttimeRange: '',\n\t\t\t\t\n\t\t\t\tinit() {\n\t\t\t\t\tconst dataStr = this.$el.getAttribute('data-chart-data');\n\t\t\t\t\t\n\t\t\t\t\ttry {\n\t\t\t\t\t\tconst chartData = JSON.parse(dataStr);\n\t\t\t\t\t\tif (chartData && chartData.length > 0) {\n\t\t\t\t\t\t\t// Sort by block height\n\t\t\t\t\t\t\tchartData.sort((a, b) => a.blockHeight - b.blockHeight);\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tconst firstBlock = chartData[0].blockHeight;\n\t\t\t\t\t\t\tconst lastBlock = chartData[chartData.length - 1].blockHeight;\n\t\t\t\t\t\t\tthis.blockRange = `Blocks ${firstBlock.toLocaleString()} - ${lastBlock.toLocaleString()}`;\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t// Calculate time range\n\t\t\t\t\t\t\tconst firstTime = new Date(chartData[0].timestamp);\n\t\t\t\t\t\t\tconst lastTime = new Date(chartData[chartData.length - 1].timestamp);\n\t\t\t\t\t\t\tconst now = new Date();\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t// Time since last data point\n\t\t\t\t\t\t\tconst timeSinceMs = now - lastTime;\n\t\t\t\t\t\t\tconst timeSince = this.formatTimeSince(timeSinceMs);\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t// Duration of the data range\n\t\t\t\t\t\t\tconst durationMs = lastTime - firstTime;\n\t\t\t\t\t\t\tconst duration = this.formatDuration(durationMs);\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tthis.timeRange = `${duration} span • ${timeSince} ago`;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.blockRange = 'No data available';\n\t\t\t\t\t\t\tthis.timeRange = '';\n\t\t\t\t\t\t}\n\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\tconsole.error('Failed to parse chart meta data:', e);\n\t\t\t\t\t\tthis.blockRange = 'Error loading data';\n\t\t\t\t\t\tthis.timeRange = '';\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tformatTimeSince(ms) {\n\t\t\t\t\tconst seconds = Math.floor(ms / 1000);\n\t\t\t\t\tconst minutes = Math.floor(seconds / 60);\n\t\t\t\t\tconst hours = Math.floor(minutes / 60);\n\t\t\t\t\tconst days = Math.floor(hours / 24);\n\t\t\t\t\t\n\t\t\t\t\tif (days > 0) return `${days} day${days > 1 ? 's' : ''}`;\n\t\t\t\t\tif (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''}`;\n\t\t\t\t\tif (minutes > 0) return `${minutes} min`;\n\t\t\t\t\treturn `${seconds} sec`;\n\t\t\t\t},\n\t\t\t\t\n\t\t\t\tformatDuration(ms) {\n\t\t\t\t\tconst seconds = Math.floor(ms / 1000);\n\t\t\t\t\tconst minutes = Math.floor(seconds / 60);\n\t\t\t\t\tconst hours = Math.floor(minutes / 60);\n\t\t\t\t\tconst days = Math.floor(hours / 24);\n\t\t\t\t\t\n\t\t\t\t\tif (days > 0) return `${days} day${days > 1 ? 's' : ''}`;\n\t\t\t\t\tif (hours > 0) return `${hours}h`;\n\t\t\t\t\tif (minutes > 0) return `${minutes}m`;\n\t\t\t\t\treturn `${seconds}s`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfunction slaChart() {\n\t\t\treturn {\n\t\t\t\tchart: null,\n\t\t\t\tchartData: [],\n\t\t\t\t\n\t\t\t\tinitChart() {\n\t\t\t\t\t// Get data from the data attribute\n\t\t\t\t\tconst canvas = document.getElementById('slaPerformanceChart');\n\t\t\t\t\tif (!canvas) {\n\t\t\t\t\t\tconsole.error('Chart canvas not found');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\tconst dataStr = canvas.getAttribute('data-chart-data');\n\t\t\t\t\tif (!dataStr || dataStr === 'null' || dataStr === 'undefined') {\n\t\t\t\t\t\tconsole.log('No chart data available');\n\t\t\t\t\t\tcanvas.style.display = 'none';\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\ttry {\n\t\t\t\t\t\tthis.chartData = JSON.parse(dataStr);\n\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\tconsole.error('Failed to parse chart data:', e, 'Raw data:', dataStr);\n\t\t\t\t\t\tthis.chartData = [];\n\t\t\t\t\t\tcanvas.style.display = 'none';\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// If no data or invalid data, don't create chart\n\t\t\t\t\tif (!this.chartData || !Array.isArray(this.chartData) || this.chartData.length === 0) {\n\t\t\t\t\t\tconsole.log('Invalid or empty chart data:', this.chartData);\n\t\t\t\t\t\tcanvas.style.display = 'none';\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Validate each data point\n\t\t\t\t\tconst validData = this.chartData.filter(point => {\n\t\t\t\t\t\treturn point && \n\t\t\t\t\t\t       typeof point.rollupId === 'number' && \n\t\t\t\t\t\t       typeof point.blockHeight === 'number' && \n\t\t\t\t\t\t       typeof point.timestamp === 'string' && \n\t\t\t\t\t\t       typeof point.validatorCount === 'number' && \n\t\t\t\t\t\t       typeof point.bps === 'number' && \n\t\t\t\t\t\t       typeof point.tps === 'number';\n\t\t\t\t\t});\n\n\t\t\t\t\tif (validData.length === 0) {\n\t\t\t\t\t\tconsole.log('No valid data points found');\n\t\t\t\t\t\tcanvas.style.display = 'none';\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.chartData = validData;\n\n\t\t\t\t\t// Sort data by block height (ascending)\n\t\t\t\t\tthis.chartData.sort((a, b) => a.blockHeight - b.blockHeight);\n\n\t\t\t\t\tconst ctx = canvas.getContext('2d');\n\t\t\t\t\tconst isDarkMode = document.documentElement.classList.contains('dark') || \n\t\t\t\t\t                  window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n\t\t\t\t\t// Calculate dynamic axis ranges\n\t\t\t\t\tconst validatorValues = this.chartData.map(point => point.validatorCount);\n\t\t\t\t\tconst healthyValidatorValues = this.chartData.map(point => point.healthyValidators);\n\t\t\t\t\tconst bpsValues = this.chartData.map(point => point.bps);\n\t\t\t\t\tconst tpsValues = this.chartData.map(point => point.tps);\n\t\t\t\t\t\n\t\t\t\t\t// Combined validator values for left axis (include both total and healthy validators)\n\t\t\t\t\tconst allValidatorValues = [...validatorValues, ...healthyValidatorValues];\n\t\t\t\t\t// Combined performance values for right axis\n\t\t\t\t\tconst performanceValues = [...bpsValues, ...tpsValues];\n\t\t\t\t\t\n\t\t\t\t\t// Calculate min/max with padding - now includes both validator count and healthy validator count\n\t\t\t\t\tconst validatorMin = Math.max(0, Math.min(...allValidatorValues) - 3);\n\t\t\t\t\tconst validatorMax = Math.max(...allValidatorValues) + 3;\n\t\t\t\t\tconst performanceMin = Math.max(0, Math.min(...performanceValues) - 1);\n\t\t\t\t\tconst performanceMax = Math.max(...performanceValues) + 2;\n\n\t\t\t\t\tconst labels = this.chartData.map(point => {\n\t\t\t\t\t\tconst date = new Date(point.timestamp);\n\t\t\t\t\t\treturn date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});\n\t\t\t\t\t});\n\n\n\n\t\t\t\t\tthis.chart = new Chart(ctx, {\n\t\t\t\t\t\ttype: 'line',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tlabels: labels,\n\t\t\t\t\t\t\tdatasets: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Validators',\n\t\t\t\t\t\t\t\t\tdata: this.chartData.map(point => point.validatorCount),\n\t\t\t\t\t\t\t\t\tborderColor: isDarkMode ? '#60a5fa' : '#2563eb',\n\t\t\t\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t\tfill: false,\n\t\t\t\t\t\t\t\t\ttension: 0.3,\n\t\t\t\t\t\t\t\t\tpointRadius: 0,\n\t\t\t\t\t\t\t\t\tpointHoverRadius: 6,\n\t\t\t\t\t\t\t\t\tpointBackgroundColor: isDarkMode ? '#60a5fa' : '#2563eb',\n\t\t\t\t\t\t\t\t\tpointBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointBorderWidth: 2,\n\t\t\t\t\t\t\t\t\tpointHoverBackgroundColor: isDarkMode ? '#93c5fd' : '#1d4ed8',\n\t\t\t\t\t\t\t\t\tpointHoverBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointHoverBorderWidth: 3,\n\t\t\t\t\t\t\t\t\tyAxisID: 'y'\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Healthy Validators',\n\t\t\t\t\t\t\t\t\tdata: this.chartData.map(point => point.healthyValidators),\n\t\t\t\t\t\t\t\t\tborderColor: isDarkMode ? '#10b981' : '#059669',\n\t\t\t\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t\tfill: false,\n\t\t\t\t\t\t\t\t\ttension: 0.3,\n\t\t\t\t\t\t\t\t\tpointRadius: 0,\n\t\t\t\t\t\t\t\t\tpointHoverRadius: 6,\n\t\t\t\t\t\t\t\t\tpointBackgroundColor: isDarkMode ? '#10b981' : '#059669',\n\t\t\t\t\t\t\t\t\tpointBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointBorderWidth: 2,\n\t\t\t\t\t\t\t\t\tpointHoverBackgroundColor: isDarkMode ? '#34d399' : '#047857',\n\t\t\t\t\t\t\t\t\tpointHoverBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointHoverBorderWidth: 3,\n\t\t\t\t\t\t\t\t\tyAxisID: 'y'\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'BPS',\n\t\t\t\t\t\t\t\t\tdata: this.chartData.map(point => point.bps),\n\t\t\t\t\t\t\t\t\tborderColor: isDarkMode ? '#c084fc' : '#7c3aed',\n\t\t\t\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t\tfill: false,\n\t\t\t\t\t\t\t\t\ttension: 0.3,\n\t\t\t\t\t\t\t\t\tpointRadius: 0,\n\t\t\t\t\t\t\t\t\tpointHoverRadius: 6,\n\t\t\t\t\t\t\t\t\tpointBackgroundColor: isDarkMode ? '#c084fc' : '#7c3aed',\n\t\t\t\t\t\t\t\t\tpointBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointBorderWidth: 2,\n\t\t\t\t\t\t\t\t\tpointHoverBackgroundColor: isDarkMode ? '#ddd6fe' : '#5b21b6',\n\t\t\t\t\t\t\t\t\tpointHoverBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointHoverBorderWidth: 3,\n\t\t\t\t\t\t\t\t\tyAxisID: 'y1'\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'TPS',\n\t\t\t\t\t\t\t\t\tdata: this.chartData.map(point => point.tps),\n\t\t\t\t\t\t\t\t\tborderColor: isDarkMode ? '#f472b6' : '#db2777',\n\t\t\t\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t\tfill: false,\n\t\t\t\t\t\t\t\t\ttension: 0.3,\n\t\t\t\t\t\t\t\t\tpointRadius: 0,\n\t\t\t\t\t\t\t\t\tpointHoverRadius: 6,\n\t\t\t\t\t\t\t\t\tpointBackgroundColor: isDarkMode ? '#f472b6' : '#db2777',\n\t\t\t\t\t\t\t\t\tpointBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointBorderWidth: 2,\n\t\t\t\t\t\t\t\t\tpointHoverBackgroundColor: isDarkMode ? '#fce7f3' : '#be185d',\n\t\t\t\t\t\t\t\t\tpointHoverBorderColor: isDarkMode ? '#1f2937' : '#ffffff',\n\t\t\t\t\t\t\t\t\tpointHoverBorderWidth: 3,\n\t\t\t\t\t\t\t\t\tyAxisID: 'y1'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t},\n\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\tresponsive: true,\n\t\t\t\t\t\t\tmaintainAspectRatio: false,\n\t\t\t\t\t\t\tinteraction: {\n\t\t\t\t\t\t\t\tmode: 'index',\n\t\t\t\t\t\t\t\tintersect: false,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\telements: {\n\t\t\t\t\t\t\t\tline: {\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tpoint: {\n\t\t\t\t\t\t\t\t\tradius: 0,\n\t\t\t\t\t\t\t\t\thoverRadius: 6,\n\t\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\t\thoverBorderWidth: 3\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tanimation: {\n\t\t\t\t\t\t\t\tduration: 300,\n\t\t\t\t\t\t\t\teasing: 'easeInOutQuart'\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tplugins: {\n\t\t\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\t\t\tdisplay: false\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tlegend: {\n\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\tposition: 'top',\n\t\t\t\t\t\t\t\t\talign: 'start',\n\t\t\t\t\t\t\t\t\tlabels: {\n\t\t\t\t\t\t\t\t\t\tusePointStyle: true,\n\t\t\t\t\t\t\t\t\t\tpointStyle: 'rect',\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#d1d5db' : '#4b5563',\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tsize: 11,\n\t\t\t\t\t\t\t\t\t\t\tweight: '400'\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tpadding: 20,\n\t\t\t\t\t\t\t\t\t\tpointStyleWidth: 15,\n\t\t\t\t\t\t\t\t\t\tgenerateLabels: function(chart) {\n\t\t\t\t\t\t\t\t\t\t\tconst original = Chart.defaults.plugins.legend.labels.generateLabels;\n\t\t\t\t\t\t\t\t\t\t\tconst labels = original.call(this, chart);\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\tlabels.forEach((label, index) => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst dataset = chart.data.datasets[index];\n\t\t\t\t\t\t\t\t\t\t\t\tif (dataset) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel.fillStyle = dataset.borderColor;\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel.strokeStyle = dataset.borderColor;\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel.pointStyle = 'rect';\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\treturn labels;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ttooltip: {\n\t\t\t\t\t\t\t\t\tbackgroundColor: isDarkMode ? 'rgba(17, 24, 39, 0.96)' : 'rgba(255, 255, 255, 0.96)',\n\t\t\t\t\t\t\t\t\ttitleColor: isDarkMode ? '#f3f4f6' : '#1f2937',\n\t\t\t\t\t\t\t\t\tbodyColor: isDarkMode ? '#e5e7eb' : '#374151',\n\t\t\t\t\t\t\t\t\tborderColor: isDarkMode ? '#6b7280' : '#d1d5db',\n\t\t\t\t\t\t\t\t\tborderWidth: 1,\n\t\t\t\t\t\t\t\t\tcornerRadius: 8,\n\t\t\t\t\t\t\t\t\tdisplayColors: true,\n\t\t\t\t\t\t\t\t\ttitleFont: {\n\t\t\t\t\t\t\t\t\t\tsize: 12,\n\t\t\t\t\t\t\t\t\t\tweight: '600'\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tbodyFont: {\n\t\t\t\t\t\t\t\t\t\tsize: 10,\n\t\t\t\t\t\t\t\t\t\tweight: '400'\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tpadding: 12,\n\t\t\t\t\t\t\t\t\tmaxWidth: 350,\n\t\t\t\t\t\t\t\t\ttitleSpacing: 4,\n\t\t\t\t\t\t\t\t\tbodySpacing: 2,\n\t\t\t\t\t\t\t\t\tcallbacks: {\n\t\t\t\t\t\t\t\t\t\ttitle: (context) => {\n\t\t\t\t\t\t\t\t\t\t\tconst dataIndex = context[0].dataIndex;\n\t\t\t\t\t\t\t\t\t\t\tconst point = this.chartData[dataIndex];\n\t\t\t\t\t\t\t\t\t\t\tif (!point) return '';\n\t\t\t\t\t\t\t\t\t\t\tconst date = new Date(point.timestamp);\n\t\t\t\t\t\t\t\t\t\t\treturn date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tlabel: (context) => {\n\t\t\t\t\t\t\t\t\t\t\tconst datasetLabel = context.dataset.label;\n\t\t\t\t\t\t\t\t\t\t\tconst value = context.parsed.y;\n\t\t\t\t\t\t\t\t\t\t\tconst dataIndex = context.dataIndex;\n\t\t\t\t\t\t\t\t\t\t\tconst point = this.chartData[dataIndex];\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\tif (datasetLabel === 'Validators') {\n\t\t\t\t\t\t\t\t\t\t\t\treturn `Validators: ${value}`;\n\t\t\t\t\t\t\t\t\t\t\t} else if (datasetLabel === 'Healthy Validators') {\n\t\t\t\t\t\t\t\t\t\t\t\treturn `Healthy Validators: ${value}`;\n\t\t\t\t\t\t\t\t\t\t\t} else if (datasetLabel === 'BPS') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Convert BPS to Block Time for better readability\n\t\t\t\t\t\t\t\t\t\t\t\tconst blockTime = point && point.bps > 0 ? (1 / point.bps) : 0;\n\t\t\t\t\t\t\t\t\t\t\t\treturn `Block Time: ${blockTime.toFixed(2)}s`;\n\t\t\t\t\t\t\t\t\t\t\t} else if (datasetLabel === 'TPS') {\n\t\t\t\t\t\t\t\t\t\t\t\treturn `Transactions/sec: ${value.toFixed(2)}`;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tafterBody: (context) => {\n\t\t\t\t\t\t\t\t\t\t\tconst dataIndex = context[0].dataIndex;\n\t\t\t\t\t\t\t\t\t\t\tconst point = this.chartData[dataIndex];\n\t\t\t\t\t\t\t\t\t\t\tif (!point) return [];\n\t\t\t\t\t\t\t\t\t\t\treturn [\n\t\t\t\t\t\t\t\t\t\t\t\t'',\n\t\t\t\t\t\t\t\t\t\t\t\t`Block ${point.blockHeight.toLocaleString()}`\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tscales: {\n\t\t\t\t\t\t\t\tx: {\n\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\t\t\t\tdisplay: false\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tticks: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#9ca3af' : '#6b7280',\n\t\t\t\t\t\t\t\t\t\tmaxTicksLimit: 8,\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tweight: '400',\n\t\t\t\t\t\t\t\t\t\t\tsize: 10\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tgrid: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#374151' : '#f3f4f6',\n\t\t\t\t\t\t\t\t\t\tlineWidth: 0.5,\n\t\t\t\t\t\t\t\t\t\tborderDash: [3, 3]\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tborder: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#4b5563' : '#d1d5db',\n\t\t\t\t\t\t\t\t\t\twidth: 0.5\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ty: {\n\t\t\t\t\t\t\t\t\ttype: 'linear',\n\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\tposition: 'left',\n\t\t\t\t\t\t\t\t\tmin: validatorMin,\n\t\t\t\t\t\t\t\t\tmax: validatorMax,\n\t\t\t\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\t\ttext: 'Validators',\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#9ca3af' : '#6b7280',\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tweight: '500',\n\t\t\t\t\t\t\t\t\t\t\tsize: 11\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tticks: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#9ca3af' : '#6b7280',\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tweight: '400',\n\t\t\t\t\t\t\t\t\t\t\tsize: 10\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tgrid: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#374151' : '#f3f4f6',\n\t\t\t\t\t\t\t\t\t\tlineWidth: 0.5,\n\t\t\t\t\t\t\t\t\t\tborderDash: [3, 3]\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tborder: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#4b5563' : '#d1d5db',\n\t\t\t\t\t\t\t\t\t\twidth: 0.5\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ty1: {\n\t\t\t\t\t\t\t\t\ttype: 'linear',\n\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\tposition: 'right',\n\t\t\t\t\t\t\t\t\tmin: performanceMin,\n\t\t\t\t\t\t\t\t\tmax: performanceMax,\n\t\t\t\t\t\t\t\t\ttitle: {\n\t\t\t\t\t\t\t\t\t\tdisplay: true,\n\t\t\t\t\t\t\t\t\t\ttext: 'Performance (BPS/TPS)',\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#9ca3af' : '#6b7280',\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tweight: '500',\n\t\t\t\t\t\t\t\t\t\t\tsize: 11\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tticks: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#9ca3af' : '#6b7280',\n\t\t\t\t\t\t\t\t\t\tfont: {\n\t\t\t\t\t\t\t\t\t\t\tweight: '400',\n\t\t\t\t\t\t\t\t\t\t\tsize: 10\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tgrid: {\n\t\t\t\t\t\t\t\t\t\tdrawOnChartArea: false,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tborder: {\n\t\t\t\t\t\t\t\t\t\tcolor: isDarkMode ? '#4b5563' : '#d1d5db',\n\t\t\t\t\t\t\t\t\t\twidth: 0.5\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tonClick: (event, elements) => {\n\t\t\t\t\t\t\t\tif (elements.length > 0) {\n\t\t\t\t\t\t\t\t\tconst dataIndex = elements[0].index;\n\t\t\t\t\t\t\t\t\tconst point = this.chartData[dataIndex];\n\t\t\t\t\t\t\t\t\tif (point && point.rollupId) {\n\t\t\t\t\t\t\t\t\t\t// Navigate to rollup details page\n\t\t\t\t\t\t\t\t\t\twindow.location.href = `/validators/uptime/${point.rollupId}`;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tonHover: (event, elements) => {\n\t\t\t\t\t\t\t\tconst canvas = event.native.target;\n\t\t\t\t\t\t\t\tcanvas.style.cursor = elements.length > 0 ? 'pointer' : 'default';\n\t\t\t\t\t\t\t},\n\n\t\t\t\t\t\t\tlayout: {\n\t\t\t\t\t\t\t\tpadding: {\n\t\t\t\t\t\t\t\t\tleft: 10,\n\t\t\t\t\t\t\t\t\tright: 10,\n\t\t\t\t\t\t\t\t\ttop: 5,\n\t\t\t\t\t\t\t\t\tbottom: 5\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t},\n\n\n\n\n\n\t\t\t\t// Alpine.js lifecycle hook\n\t\t\t\tdestroy() {\n\t\t\t\t\tif (this.chart) {\n\t\t\t\t\t\tthis.chart.destroy();\n\t\t\t\t\t\tthis.chart = null;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -1292,40 +1266,40 @@ func NetworkSidebarFragment(stats *DashboardStats) templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var57 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var57 == nil {
-			templ_7745c5c3_Var57 = templ.NopComponent
+		templ_7745c5c3_Var55 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var55 == nil {
+			templ_7745c5c3_Var55 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 101, "<div class=\"\"><div class=\"bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-lg p-3 border border-white/20 dark:border-gray-700/50 shadow-lg\"><h4 class=\"text-xs font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide\">Network Info</h4><div class=\"space-y-1.5\"><div class=\"flex justify-between\"><span class=\"text-xs text-gray-600 dark:text-gray-400\">Validators</span> <span class=\"text-xs font-semibold text-gray-900 dark:text-gray-100\" x-text=\"validatorCount\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 99, "<div class=\"\"><div class=\"bg-white/90 dark:bg-[#141414]/90 backdrop-blur-md rounded-lg p-3 border border-white/20 dark:border-gray-700/50 shadow-lg\"><h4 class=\"text-xs font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide\">Network Info</h4><div class=\"space-y-1.5\"><div class=\"flex justify-between\"><span class=\"text-xs text-gray-600 dark:text-gray-400\">Validators</span> <span class=\"text-xs font-semibold text-gray-900 dark:text-gray-100\" x-text=\"validatorCount\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var58 string
-		templ_7745c5c3_Var58, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", stats.ValidatorCount))
+		var templ_7745c5c3_Var56 string
+		templ_7745c5c3_Var56, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", stats.ValidatorCount))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 1537, Col: 139}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/dashboard.templ`, Line: 1528, Col: 139}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var58))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var56))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 102, "</span></div><template x-if=\"latestBlock.height > 0\"><div><div class=\"flex justify-between\"><span class=\"text-xs text-gray-600 dark:text-gray-400\">Latest Block</span> <a :href=\"'/block/' + latestBlock.height\" class=\"text-xs font-semibold text-purple-600 dark:text-purple-400 hover:underline\" x-text=\"'#' + latestBlock.height\"></a></div><div class=\"flex justify-between\"><span class=\"text-xs text-gray-600 dark:text-gray-400\">Proposer</span> <a :href=\"'/validator/' + latestBlock.proposer\" class=\"font-mono text-xs text-purple-600 dark:text-purple-400 hover:underline\" x-text=\"formatProposer(latestBlock.proposer)\"></a></div></div></template></div></div><div class=\"bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-lg p-3 border border-white/20 dark:border-gray-700/50 shadow-lg\"><h4 class=\"text-xs font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide\">Recent Proposers</h4><div class=\"space-y-1\"><template x-if=\"recentBlocks.length > 0\"><template x-for=\"(block, index) in recentBlocks\" :key=\"block.height\"><div class=\"flex items-center justify-between\"><span class=\"text-xs text-gray-500 dark:text-gray-500\" x-text=\"'#' + (index + 1)\"></span> <a :href=\"'/validator/' + block.proposer\" class=\"font-mono text-xs text-purple-600 dark:text-purple-400 hover:underline truncate\" x-text=\"formatProposer(block.proposer)\"></a></div></template></template><template x-if=\"recentBlocks.length === 0\"><div class=\"text-center py-1\"><p class=\"text-gray-500 dark:text-gray-400 text-xs\">No recent proposers</p><p class=\"text-xs text-gray-400 dark:text-gray-500\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 100, "</span></div><template x-if=\"latestBlock.height > 0\"><div><div class=\"flex justify-between\"><span class=\"text-xs text-gray-600 dark:text-gray-400\">Latest Block</span> <a :href=\"'/block/' + latestBlock.height\" class=\"text-xs font-semibold text-purple-600 dark:text-purple-400 hover:underline\" x-text=\"'#' + latestBlock.height\"></a></div><div class=\"flex justify-between\"><span class=\"text-xs text-gray-600 dark:text-gray-400\">Proposer</span> <a :href=\"'/validator/' + latestBlock.proposer\" class=\"font-mono text-xs text-purple-600 dark:text-purple-400 hover:underline\" x-text=\"formatProposer(latestBlock.proposer)\"></a></div></div></template></div></div><div class=\"bg-white/90 dark:bg-[#141414]/90 backdrop-blur-md rounded-lg p-3 border border-white/20 dark:border-gray-700/50 shadow-lg\"><h4 class=\"text-xs font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide\">Recent Proposers</h4><div class=\"space-y-1\"><template x-if=\"recentBlocks.length > 0\"><template x-for=\"(block, index) in recentBlocks\" :key=\"block.height\"><div class=\"flex items-center justify-between\"><span class=\"text-xs text-gray-500 dark:text-gray-500\" x-text=\"'#' + (index + 1)\"></span> <a :href=\"'/validator/' + block.proposer\" class=\"font-mono text-xs text-purple-600 dark:text-purple-400 hover:underline truncate\" x-text=\"formatProposer(block.proposer)\"></a></div></template></template><template x-if=\"recentBlocks.length === 0\"><div class=\"text-center py-1\"><p class=\"text-gray-500 dark:text-gray-400 text-xs\">No recent proposers</p><p class=\"text-xs text-gray-400 dark:text-gray-500\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if stats.IsSyncing {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 103, "Syncing...")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 101, "Syncing...")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 104, "Waiting...")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 102, "Waiting...")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 105, "</p></div></template></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 103, "</p></div></template></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/pkg/console/templates/pages/hello_templ.go b/pkg/console/templates/pages/hello_templ.go
index bdf7060d..d15c0c24 100644
--- a/pkg/console/templates/pages/hello_templ.go
+++ b/pkg/console/templates/pages/hello_templ.go
@@ -50,7 +50,7 @@ func Hello(name string) templ.Component {
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/pages/hello.templ`, Line: 8, Col: 89}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/hello.templ`, Line: 8, Col: 89}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
diff --git a/pkg/console/templates/pages/rollups.templ b/pkg/console/templates/pages/rollups.templ
index b4e33037..27d6decf 100644
--- a/pkg/console/templates/pages/rollups.templ
+++ b/pkg/console/templates/pages/rollups.templ
@@ -19,7 +19,7 @@ type RollupsProps struct {
 
 templ Rollups(props RollupsProps) {
 	@layouts.Base("SLA Rollups") {
-		<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+		<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 			<div class="flex justify-between items-center mb-6">
 				<h2 class="text-2xl font-light text-gray-900 dark:text-gray-100">SLA Rollups</h2>
 				<div class="text-sm text-gray-500 dark:text-gray-400">
@@ -72,20 +72,20 @@ templ Rollups(props RollupsProps) {
 				<div class="flex justify-between items-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
 					<div class="flex gap-3">
 						if props.HasPrev {
-							<a href={ templ.SafeURL(fmt.Sprintf("/rollups?page=%d&count=%d", props.CurrentPage-1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
+							<a href={ templ.SafeURL(fmt.Sprintf("/rollups?page=%d&count=%d", props.CurrentPage-1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
 								← Previous
 							</a>
 						} else {
-							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed">
+							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed">
 								← Previous
 							</span>
 						}
 						if props.HasNext {
-							<a href={ templ.SafeURL(fmt.Sprintf("/rollups?page=%d&count=%d", props.CurrentPage+1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
+							<a href={ templ.SafeURL(fmt.Sprintf("/rollups?page=%d&count=%d", props.CurrentPage+1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
 								Next →
 							</a>
 						} else {
-							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed">
+							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed">
 								Next →
 							</span>
 						}
diff --git a/pkg/console/templates/pages/rollups_templ.go b/pkg/console/templates/pages/rollups_templ.go
index 409ed2d7..f86dff97 100644
--- a/pkg/console/templates/pages/rollups_templ.go
+++ b/pkg/console/templates/pages/rollups_templ.go
@@ -58,7 +58,7 @@ func Rollups(props RollupsProps) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">SLA Rollups</h2><div class=\"text-sm text-gray-500 dark:text-gray-400\">Page ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">SLA Rollups</h2><div class=\"text-sm text-gray-500 dark:text-gray-400\">Page ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -218,12 +218,12 @@ func Rollups(props RollupsProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">← Previous</a> ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">← Previous</a> ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed\">← Previous</span> ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed\">← Previous</span> ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -242,12 +242,12 @@ func Rollups(props RollupsProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">Next →</a>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">Next →</a>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed\">Next →</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed\">Next →</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
diff --git a/pkg/console/templates/pages/transaction.templ b/pkg/console/templates/pages/transaction.templ
index 77db0be6..b6325efe 100644
--- a/pkg/console/templates/pages/transaction.templ
+++ b/pkg/console/templates/pages/transaction.templ
@@ -56,7 +56,7 @@ templ Transaction(props TransactionProps) {
 	@layouts.Base(fmt.Sprintf("Transaction %s", props.Transaction.TxHash[:8])) {
 		<div class="space-y-6">
 			<!-- Transaction Info Card -->
-			<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+			<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 				<div class="flex justify-between items-start mb-4">
 					<div>
 						<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Transaction Details</h2>
@@ -124,7 +124,7 @@ templ Transaction(props TransactionProps) {
 				case *db.EtlStorageProofVerification:
 					@StorageProofVerificationSection(props.Content.(*db.EtlStorageProofVerification))
 				default:
-					<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+					<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 						<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Transaction Content</h3>
 						<p class="text-gray-500 dark:text-gray-400">No detailed transaction content available for this transaction type.</p>
 					</div>
@@ -134,7 +134,7 @@ templ Transaction(props TransactionProps) {
 }
 
 templ TrackPlaysSection(plays []*db.EtlPlay) {
-	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 		<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Track Plays ({ fmt.Sprintf("%d", len(plays)) })</h3>
 		<div class="overflow-x-auto">
 			<table class="min-w-full table-auto">
@@ -178,7 +178,7 @@ templ TrackPlaysSection(plays []*db.EtlPlay) {
 }
 
 templ ManageEntitySection(entity *db.EtlManageEntity) {
-	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 		<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Manage Entity</h3>
 		<div class="overflow-x-auto">
 			<table class="min-w-full table-auto">
@@ -200,7 +200,7 @@ templ ManageEntitySection(entity *db.EtlManageEntity) {
 							<td class="py-2 px-4">{ entity.EntityType }</td>
 							<td class="py-2 px-4">{ fmt.Sprintf("%d", entity.EntityID) }</td>
 							<td class="py-2 px-4">
-								<span class="px-2 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
+								<span class="px-2 py-1 text-xs rounded bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200">
 									{ entity.Action }
 								</span>
 							</td>
@@ -215,7 +215,7 @@ templ ManageEntitySection(entity *db.EtlManageEntity) {
 			if entity.Metadata.Valid {
 				<div class="mt-4">
 					<h4 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Metadata</h4>
-					<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 overflow-x-auto border border-gray-200 dark:border-gray-700">
+					<div class="bg-gray-50 dark:bg-[#141414] rounded-lg p-4 overflow-x-auto border border-gray-200 dark:border-gray-700">
 						<pre class="text-sm font-mono leading-relaxed whitespace-pre-wrap">
 							@templ.Raw(highlightJSON(string(entity.Metadata.String)))
 						</pre>
@@ -227,7 +227,7 @@ templ ManageEntitySection(entity *db.EtlManageEntity) {
 }
 
 templ ValidatorRegistrationSection(registration *db.EtlValidatorRegistration) {
-	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 		<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Validator Registrations 1</h3>
 		<div class="overflow-x-auto">
 			<table class="min-w-full table-auto">
@@ -263,7 +263,7 @@ templ ValidatorRegistrationSection(registration *db.EtlValidatorRegistration) {
 }
 
 templ ValidatorDeregistrationSection(deregistration *db.EtlValidatorDeregistration) {
-	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 		<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Validator Deregistrations 1</h3>
 		<div class="overflow-x-auto">
 			<table class="min-w-full table-auto">
@@ -293,7 +293,7 @@ templ ValidatorDeregistrationSection(deregistration *db.EtlValidatorDeregistrati
 }
 
 templ SlaRollupSection(slaRollup *db.EtlSlaRollup) {
-	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 		<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">SLA Rollup</h3>
 		<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
 			<div>
@@ -319,7 +319,7 @@ templ SlaRollupSection(slaRollup *db.EtlSlaRollup) {
 }
 
 templ StorageProofSection(storageProof *db.EtlStorageProof) {
-	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 		<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Storage Proof</h3>
 		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 			<div>
@@ -342,7 +342,7 @@ templ StorageProofSection(storageProof *db.EtlStorageProof) {
 				<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Prover Addresses</label>
 				<div class="flex flex-wrap gap-2">
 					for _, addr := range storageProof.ProverAddresses {
-						<span class="px-2 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
+						<span class="px-2 py-1 text-xs rounded bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200">
 							@templates.StringWithTooltip(addr)
 						</span>
 					}
@@ -361,7 +361,7 @@ templ StorageProofSection(storageProof *db.EtlStorageProof) {
 }
 
 templ StorageProofVerificationSection(storageProofVerification *db.EtlStorageProofVerification) {
-	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+	<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 		<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Storage Proof Verification</h3>
 		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 			<div>
diff --git a/pkg/console/templates/pages/transaction_templ.go b/pkg/console/templates/pages/transaction_templ.go
index 094e0231..413d2b42 100644
--- a/pkg/console/templates/pages/transaction_templ.go
+++ b/pkg/console/templates/pages/transaction_templ.go
@@ -93,7 +93,7 @@ func Transaction(props TransactionProps) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"space-y-6\"><!-- Transaction Info Card --><div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><div class=\"flex justify-between items-start mb-4\"><div><h2 class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">Transaction Details</h2><div class=\"text-gray-500 dark:text-gray-400 mt-1\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"space-y-6\"><!-- Transaction Info Card --><div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><div class=\"flex justify-between items-start mb-4\"><div><h2 class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">Transaction Details</h2><div class=\"text-gray-500 dark:text-gray-400 mt-1\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -262,7 +262,7 @@ func Transaction(props TransactionProps) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			default:
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Transaction Content</h3><p class=\"text-gray-500 dark:text-gray-400\">No detailed transaction content available for this transaction type.</p></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Transaction Content</h3><p class=\"text-gray-500 dark:text-gray-400\">No detailed transaction content available for this transaction type.</p></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -302,7 +302,7 @@ func TrackPlaysSection(plays []*db.EtlPlay) templ.Component {
 			templ_7745c5c3_Var11 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Track Plays (")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Track Plays (")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -431,7 +431,7 @@ func ManageEntitySection(entity *db.EtlManageEntity) templ.Component {
 			templ_7745c5c3_Var16 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Manage Entity</h3><div class=\"overflow-x-auto\"><table class=\"min-w-full table-auto\"><thead><tr class=\"border-b border-gray-200 dark:border-gray-700\"><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Address</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Entity Type</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Entity ID</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Action</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Signer</th></tr></thead> <tbody>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Manage Entity</h3><div class=\"overflow-x-auto\"><table class=\"min-w-full table-auto\"><thead><tr class=\"border-b border-gray-200 dark:border-gray-700\"><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Address</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Entity Type</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Entity ID</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Action</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Signer</th></tr></thead> <tbody>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -470,7 +470,7 @@ func ManageEntitySection(entity *db.EtlManageEntity) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</td><td class=\"py-2 px-4\"><span class=\"px-2 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</td><td class=\"py-2 px-4\"><span class=\"px-2 py-1 text-xs rounded bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -501,7 +501,7 @@ func ManageEntitySection(entity *db.EtlManageEntity) templ.Component {
 			return templ_7745c5c3_Err
 		}
 		if entity.Metadata.Valid {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "<div class=\"mt-4\"><h4 class=\"text-lg font-medium text-gray-900 dark:text-gray-100 mb-2\">Metadata</h4><div class=\"bg-gray-50 dark:bg-gray-900 rounded-lg p-4 overflow-x-auto border border-gray-200 dark:border-gray-700\"><pre class=\"text-sm font-mono leading-relaxed whitespace-pre-wrap\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "<div class=\"mt-4\"><h4 class=\"text-lg font-medium text-gray-900 dark:text-gray-100 mb-2\">Metadata</h4><div class=\"bg-gray-50 dark:bg-[#141414] rounded-lg p-4 overflow-x-auto border border-gray-200 dark:border-gray-700\"><pre class=\"text-sm font-mono leading-relaxed whitespace-pre-wrap\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -543,7 +543,7 @@ func ValidatorRegistrationSection(registration *db.EtlValidatorRegistration) tem
 			templ_7745c5c3_Var20 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Validator Registrations 1</h3><div class=\"overflow-x-auto\"><table class=\"min-w-full table-auto\"><thead><tr class=\"border-b border-gray-200 dark:border-gray-700\"><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Address</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Comet Address</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Node Type</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Voting Power</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">SPID</th></tr></thead> <tbody>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Validator Registrations 1</h3><div class=\"overflow-x-auto\"><table class=\"min-w-full table-auto\"><thead><tr class=\"border-b border-gray-200 dark:border-gray-700\"><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Address</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Comet Address</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Node Type</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Voting Power</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">SPID</th></tr></thead> <tbody>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -650,7 +650,7 @@ func ValidatorDeregistrationSection(deregistration *db.EtlValidatorDeregistratio
 			templ_7745c5c3_Var25 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Validator Deregistrations 1</h3><div class=\"overflow-x-auto\"><table class=\"min-w-full table-auto\"><thead><tr class=\"border-b border-gray-200 dark:border-gray-700\"><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Comet Address</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Public Key</th></tr></thead> <tbody>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Validator Deregistrations 1</h3><div class=\"overflow-x-auto\"><table class=\"min-w-full table-auto\"><thead><tr class=\"border-b border-gray-200 dark:border-gray-700\"><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Comet Address</th><th class=\"text-left py-2 px-4 font-medium text-gray-900 dark:text-gray-100\">Public Key</th></tr></thead> <tbody>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -718,7 +718,7 @@ func SlaRollupSection(slaRollup *db.EtlSlaRollup) templ.Component {
 			templ_7745c5c3_Var27 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">SLA Rollup</h3><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\"><div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Block Range</label><p class=\"text-gray-900 dark:text-gray-100\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">SLA Rollup</h3><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\"><div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Block Range</label><p class=\"text-gray-900 dark:text-gray-100\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -791,7 +791,7 @@ func StorageProofSection(storageProof *db.EtlStorageProof) templ.Component {
 			templ_7745c5c3_Var30 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Storage Proof</h3><div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\"><div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Height</label><p class=\"text-gray-900 dark:text-gray-100\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Storage Proof</h3><div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\"><div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Height</label><p class=\"text-gray-900 dark:text-gray-100\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -825,7 +825,7 @@ func StorageProofSection(storageProof *db.EtlStorageProof) templ.Component {
 			return templ_7745c5c3_Err
 		}
 		for _, addr := range storageProof.ProverAddresses {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "<span class=\"px-2 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "<span class=\"px-2 py-1 text-xs rounded bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -885,7 +885,7 @@ func StorageProofVerificationSection(storageProofVerification *db.EtlStorageProo
 			templ_7745c5c3_Var32 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 70, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Storage Proof Verification</h3><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Height</label><p class=\"text-gray-900 dark:text-gray-100\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 70, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Storage Proof Verification</h3><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Height</label><p class=\"text-gray-900 dark:text-gray-100\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/pkg/console/templates/pages/transactions.templ b/pkg/console/templates/pages/transactions.templ
index bfce3225..7359fa87 100644
--- a/pkg/console/templates/pages/transactions.templ
+++ b/pkg/console/templates/pages/transactions.templ
@@ -18,7 +18,7 @@ type TransactionsProps struct {
 
 templ Transactions(props TransactionsProps) {
 	@layouts.Base("Transactions") {
-		<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+		<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 			<div class="flex justify-between items-center mb-6">
 				<h2 class="text-2xl font-light text-gray-900 dark:text-gray-100">Latest Transactions</h2>
 				<div class="text-sm text-gray-500 dark:text-gray-400">
@@ -39,7 +39,7 @@ templ Transactions(props TransactionsProps) {
 									</div>
 									<div class="flex-1">
 										<div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Type</div>
-										<span class="px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded">
+										<span class="px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded">
 											{ tx.TxType }
 										</span>
 									</div>
@@ -73,20 +73,20 @@ templ Transactions(props TransactionsProps) {
 				<div class="flex justify-between items-center mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
 					<div class="flex gap-3">
 						if props.HasPrev {
-							<a href={ templ.SafeURL(fmt.Sprintf("/transactions?page=%d&count=%d", props.CurrentPage-1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
+							<a href={ templ.SafeURL(fmt.Sprintf("/transactions?page=%d&count=%d", props.CurrentPage-1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
 								← Previous
 							</a>
 						} else {
-							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed">
+							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed">
 								← Previous
 							</span>
 						}
 						if props.HasNext {
-							<a href={ templ.SafeURL(fmt.Sprintf("/transactions?page=%d&count=%d", props.CurrentPage+1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
+							<a href={ templ.SafeURL(fmt.Sprintf("/transactions?page=%d&count=%d", props.CurrentPage+1, props.PageSize)) } class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">
 								Next →
 							</a>
 						} else {
-							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed">
+							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed">
 								Next →
 							</span>
 						}
diff --git a/pkg/console/templates/pages/transactions_templ.go b/pkg/console/templates/pages/transactions_templ.go
index 9feea506..e73ef573 100644
--- a/pkg/console/templates/pages/transactions_templ.go
+++ b/pkg/console/templates/pages/transactions_templ.go
@@ -57,7 +57,7 @@ func Transactions(props TransactionsProps) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Latest Transactions</h2><div class=\"text-sm text-gray-500 dark:text-gray-400\">Page ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Latest Transactions</h2><div class=\"text-sm text-gray-500 dark:text-gray-400\">Page ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -114,7 +114,7 @@ func Transactions(props TransactionsProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div></div><div class=\"flex-1\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Type</div><span class=\"px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div></div><div class=\"flex-1\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Type</div><span class=\"px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -206,12 +206,12 @@ func Transactions(props TransactionsProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">← Previous</a> ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">← Previous</a> ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed\">← Previous</span> ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed\">← Previous</span> ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -230,12 +230,12 @@ func Transactions(props TransactionsProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">Next →</a>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">Next →</a>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed\">Next →</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed\">Next →</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
diff --git a/pkg/console/templates/pages/validator.templ b/pkg/console/templates/pages/validator.templ
index 0384937a..104457f3 100644
--- a/pkg/console/templates/pages/validator.templ
+++ b/pkg/console/templates/pages/validator.templ
@@ -60,7 +60,7 @@ templ Validator(props ValidatorProps) {
 	@layouts.Base(fmt.Sprintf("Validator %s", props.Validator.Address[:8])) {
 		<div class="space-y-6">
 			<!-- Validator Info Card -->
-			<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+			<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 				<div class="flex justify-between items-start mb-4">
 					<div>
 						<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Validator Details</h2>
@@ -75,7 +75,7 @@ templ Validator(props ValidatorProps) {
 							case "misbehavior_deregistered":
 								<span class="px-3 py-1 text-sm rounded-full bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200">Misbehavior</span>
 							default:
-								<span class="px-3 py-1 text-sm rounded-full bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200">Unknown</span>
+								<span class="px-3 py-1 text-sm rounded-full bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200">Unknown</span>
 						}
 					</div>
 				</div>
@@ -128,7 +128,7 @@ templ Validator(props ValidatorProps) {
 			</div>
 			<!-- Events History -->
 			if len(props.Events) > 0 {
-				<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+				<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 					<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">Event History</h3>
 					<div class="space-y-4">
 						for _, event := range props.Events {
@@ -143,7 +143,7 @@ templ Validator(props ValidatorProps) {
 											case "misbehavior_deregistration":
 												<span class="px-2 py-1 text-xs rounded bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200">Misbehavior Deregistration</span>
 											default:
-												<span class="px-2 py-1 text-xs rounded bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200">Unknown</span>
+												<span class="px-2 py-1 text-xs rounded bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200">Unknown</span>
 										}
 									</div>
 									<div class="text-sm text-gray-500 dark:text-gray-400">
@@ -176,7 +176,7 @@ templ Validator(props ValidatorProps) {
 				</div>
 			}
 			<!-- Uptime History Section -->
-			<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800">
+			<div class="shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]">
 				<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">SLA Rollup History</h3>
 				<p class="text-gray-500 dark:text-gray-400 text-sm mb-4">
 					Recent SLA rollup performance for this validator. Green indicates meeting SLA requirements, red indicates missing SLA, and dark gray indicates no activity.
diff --git a/pkg/console/templates/pages/validator_templ.go b/pkg/console/templates/pages/validator_templ.go
index 29e8d6ba..8a38a805 100644
--- a/pkg/console/templates/pages/validator_templ.go
+++ b/pkg/console/templates/pages/validator_templ.go
@@ -97,7 +97,7 @@ func Validator(props ValidatorProps) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"space-y-6\"><!-- Validator Info Card --><div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><div class=\"flex justify-between items-start mb-4\"><div><h2 class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">Validator Details</h2><p class=\"text-gray-500 dark:text-gray-400 font-mono text-sm mt-1\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"space-y-6\"><!-- Validator Info Card --><div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><div class=\"flex justify-between items-start mb-4\"><div><h2 class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">Validator Details</h2><p class=\"text-gray-500 dark:text-gray-400 font-mono text-sm mt-1\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -131,7 +131,7 @@ func Validator(props ValidatorProps) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			default:
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<span class=\"px-3 py-1 text-sm rounded-full bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200\">Unknown</span>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<span class=\"px-3 py-1 text-sm rounded-full bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200\">Unknown</span>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -251,7 +251,7 @@ func Validator(props ValidatorProps) templ.Component {
 				return templ_7745c5c3_Err
 			}
 			if len(props.Events) > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Event History</h3><div class=\"space-y-4\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">Event History</h3><div class=\"space-y-4\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -277,7 +277,7 @@ func Validator(props ValidatorProps) templ.Component {
 							return templ_7745c5c3_Err
 						}
 					default:
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<span class=\"px-2 py-1 text-xs rounded bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200\">Unknown</span>")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<span class=\"px-2 py-1 text-xs rounded bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200\">Unknown</span>")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
@@ -352,7 +352,7 @@ func Validator(props ValidatorProps) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<!-- Uptime History Section --><div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-gray-800\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">SLA Rollup History</h3><p class=\"text-gray-500 dark:text-gray-400 text-sm mb-4\">Recent SLA rollup performance for this validator. Green indicates meeting SLA requirements, red indicates missing SLA, and dark gray indicates no activity.</p><div class=\"flex items-center gap-6 text-sm text-gray-600 dark:text-gray-400 mb-6\"><div class=\"flex items-center gap-2\"><div class=\"w-4 h-5 bg-green-500 rounded-sm\"></div><span>Meeting SLA</span></div><div class=\"flex items-center gap-2\"><div class=\"w-4 h-5 bg-red-500 rounded-sm\"></div><span>Missing SLA</span></div><div class=\"flex items-center gap-2\"><div class=\"w-4 h-5 bg-gray-800 rounded-sm\"></div><span>Offline/Dead</span></div></div><!-- Uptime bars with actual rollup data --><div class=\"flex items-center gap-2 mb-6\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<!-- Uptime History Section --><div class=\"shadow-xl rounded-lg p-6 bg-white dark:bg-[#141414]\"><h3 class=\"text-xl font-bold text-gray-900 dark:text-gray-100 mb-4\">SLA Rollup History</h3><p class=\"text-gray-500 dark:text-gray-400 text-sm mb-4\">Recent SLA rollup performance for this validator. Green indicates meeting SLA requirements, red indicates missing SLA, and dark gray indicates no activity.</p><div class=\"flex items-center gap-6 text-sm text-gray-600 dark:text-gray-400 mb-6\"><div class=\"flex items-center gap-2\"><div class=\"w-4 h-5 bg-green-500 rounded-sm\"></div><span>Meeting SLA</span></div><div class=\"flex items-center gap-2\"><div class=\"w-4 h-5 bg-red-500 rounded-sm\"></div><span>Missing SLA</span></div><div class=\"flex items-center gap-2\"><div class=\"w-4 h-5 bg-gray-800 rounded-sm\"></div><span>Offline/Dead</span></div></div><!-- Uptime bars with actual rollup data --><div class=\"flex items-center gap-2 mb-6\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
diff --git a/pkg/console/templates/pages/validators.templ b/pkg/console/templates/pages/validators.templ
index a7c072df..abf3825e 100644
--- a/pkg/console/templates/pages/validators.templ
+++ b/pkg/console/templates/pages/validators.templ
@@ -26,7 +26,13 @@ func extractHost(endpoint string) string {
 		endpoint = endpoint[:idx]
 	}
 
-	return endpoint
+	trimLen := 28
+
+	if len(endpoint) <= trimLen {
+		return endpoint
+	}
+
+	return endpoint[:trimLen] + "..."
 }
 
 func buildValidatorsPaginationURL(page int32, pageSize int32, queryType string, endpointFilter string) string {
@@ -74,7 +80,7 @@ type ValidatorsProps struct {
 
 templ Validators(props ValidatorsProps) {
 	@layouts.Base("Validators") {
-		<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+		<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 			<div class="flex items-center gap-6 mb-6">
 				<h2 class="text-2xl font-light text-gray-900 dark:text-gray-100">Validators</h2>
 				<div class="flex-1 max-w-md">
@@ -83,7 +89,7 @@ templ Validators(props ValidatorsProps) {
 						id="endpointFilter"
 						placeholder="Filter by endpoint (e.g. audius.co)..."
 						value={ props.EndpointFilter }
-						class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+						class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-[#141414] text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
 						onchange="updateFilters()"
 					/>
 				</div>
@@ -125,7 +131,7 @@ templ Validators(props ValidatorsProps) {
 											<div class="font-mono text-sm text-gray-700 dark:text-gray-300 overflow-x-auto scrollbar-hide whitespace-nowrap pb-1">
 												{ extractHost(validator.Endpoint) }
 											</div>
-											<div class="absolute top-0 right-0 w-8 h-full bg-gradient-to-l from-white dark:from-gray-800 to-transparent pointer-events-none"></div>
+											<div class="absolute top-0 right-0 w-8 h-full bg-white dark:bg-[#141414] pointer-events-none"></div>
 										</div>
 									</div>
 									<div class="flex-1">
@@ -136,7 +142,7 @@ templ Validators(props ValidatorsProps) {
 									</div>
 									<div class="flex-1">
 										<div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Node Type</div>
-										<span class="px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded">
+										<span class="px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded">
 											{ validator.NodeType }
 										</span>
 									</div>
@@ -153,11 +159,11 @@ templ Validators(props ValidatorsProps) {
 												case "active":
 													<span class="px-2 py-1 text-xs font-medium bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded">Active</span>
 												case "deregistered":
-													<span class="px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded">Deregistered</span>
+													<span class="px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded">Deregistered</span>
 												case "misbehavior_deregistered":
-													<span class="px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded">Misbehavior</span>
+													<span class="px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded">Misbehavior</span>
 												default:
-													<span class="px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded">Unknown</span>
+													<span class="px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded">Unknown</span>
 											}
 											<span class="text-gray-400 dark:text-gray-500">|</span>
 											<div class="text-xs text-gray-500 dark:text-gray-400">
@@ -182,12 +188,12 @@ templ Validators(props ValidatorsProps) {
 												}
 												// Fill remaining slots with empty bars if less than 5 rollups
 												for i := len(rollups); i < 5; i++ {
-													<div class="w-3 h-4 bg-gray-200 dark:bg-gray-700 rounded-sm" title="No data available"></div>
+													<div class="w-3 h-4 bg-gray-200 dark:bg-[#141414] rounded-sm" title="No data available"></div>
 												}
 											} else {
 												// Show placeholder bars if no uptime data available
 												for i := 0; i < 5; i++ {
-													<div class="w-3 h-4 bg-gray-200 dark:bg-gray-700 rounded-sm" title="No uptime data available"></div>
+													<div class="w-3 h-4 bg-gray-200 dark:bg-[#141414] rounded-sm" title="No uptime data available"></div>
 												}
 											}
 										</div>
@@ -202,24 +208,24 @@ templ Validators(props ValidatorsProps) {
 						if props.HasPrev {
 							<a
 								href={ templ.SafeURL(buildValidatorsPaginationURL(props.CurrentPage-1, props.PageSize, props.QueryType, props.EndpointFilter)) }
-								class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
+								class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
 							>
 								← Previous
 							</a>
 						} else {
-							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed">
+							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed">
 								← Previous
 							</span>
 						}
 						if props.HasNext {
 							<a
 								href={ templ.SafeURL(buildValidatorsPaginationURL(props.CurrentPage+1, props.PageSize, props.QueryType, props.EndpointFilter)) }
-								class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
+								class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
 							>
 								Next →
 							</a>
 						} else {
-							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed">
+							<span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed">
 								Next →
 							</span>
 						}
diff --git a/pkg/console/templates/pages/validators_templ.go b/pkg/console/templates/pages/validators_templ.go
index 8d26b1e4..341a188d 100644
--- a/pkg/console/templates/pages/validators_templ.go
+++ b/pkg/console/templates/pages/validators_templ.go
@@ -34,7 +34,13 @@ func extractHost(endpoint string) string {
 		endpoint = endpoint[:idx]
 	}
 
-	return endpoint
+	trimLen := 28
+
+	if len(endpoint) <= trimLen {
+		return endpoint
+	}
+
+	return endpoint[:trimLen] + "..."
 }
 
 func buildValidatorsPaginationURL(page int32, pageSize int32, queryType string, endpointFilter string) string {
@@ -113,27 +119,27 @@ func Validators(props ValidatorsProps) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex items-center gap-6 mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Validators</h2><div class=\"flex-1 max-w-md\"><input type=\"text\" id=\"endpointFilter\" placeholder=\"Filter by endpoint (e.g. audius.co)...\" value=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex items-center gap-6 mb-6\"><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Validators</h2><div class=\"flex-1 max-w-md\"><input type=\"text\" id=\"endpointFilter\" placeholder=\"Filter by endpoint (e.g. audius.co)...\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(props.EndpointFilter)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 85, Col: 34}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 91, Col: 34}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\" class=\"w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent\" onchange=\"updateFilters()\"></div><div class=\"flex items-center gap-4 ml-auto\"><div class=\"text-sm text-gray-500 dark:text-gray-400\">Page ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\" class=\"w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-[#141414] text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent\" onchange=\"updateFilters()\"></div><div class=\"flex items-center gap-4 ml-auto\"><div class=\"text-sm text-gray-500 dark:text-gray-400\">Page ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprint(props.CurrentPage))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 92, Col: 42}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 98, Col: 42}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
@@ -146,7 +152,7 @@ func Validators(props ValidatorsProps) templ.Component {
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprint(props.PageSize))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 92, Col: 77}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 98, Col: 77}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
@@ -168,7 +174,7 @@ func Validators(props ValidatorsProps) templ.Component {
 			var templ_7745c5c3_Var7 templ.SafeURL
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("?type=active&endpoint_filter=%s", props.EndpointFilter)))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 96, Col: 97}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 102, Col: 97}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -203,7 +209,7 @@ func Validators(props ValidatorsProps) templ.Component {
 			var templ_7745c5c3_Var10 templ.SafeURL
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("?type=registrations&endpoint_filter=%s", props.EndpointFilter)))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 102, Col: 104}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 108, Col: 104}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
@@ -238,7 +244,7 @@ func Validators(props ValidatorsProps) templ.Component {
 			var templ_7745c5c3_Var13 templ.SafeURL
 			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("?type=deregistrations&endpoint_filter=%s", props.EndpointFilter)))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 108, Col: 106}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 114, Col: 106}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 			if templ_7745c5c3_Err != nil {
@@ -274,7 +280,7 @@ func Validators(props ValidatorsProps) templ.Component {
 					var templ_7745c5c3_Var15 templ.SafeURL
 					templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/validator/%s", validator.Address)))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 119, Col: 78}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 125, Col: 78}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 					if templ_7745c5c3_Err != nil {
@@ -287,13 +293,13 @@ func Validators(props ValidatorsProps) templ.Component {
 					var templ_7745c5c3_Var16 string
 					templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(extractHost(validator.Endpoint))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 126, Col: 45}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 132, Col: 45}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</div><div class=\"absolute top-0 right-0 w-8 h-full bg-gradient-to-l from-white dark:from-gray-800 to-transparent pointer-events-none\"></div></div></div><div class=\"flex-1\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Address</div><div class=\"font-mono text-sm text-purple-600 dark:text-purple-400\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</div><div class=\"absolute top-0 right-0 w-8 h-full bg-white dark:bg-[#141414] pointer-events-none\"></div></div></div><div class=\"flex-1\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Address</div><div class=\"font-mono text-sm text-purple-600 dark:text-purple-400\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -301,14 +307,14 @@ func Validators(props ValidatorsProps) templ.Component {
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div></div><div class=\"flex-1\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Node Type</div><span class=\"px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div></div><div class=\"flex-1\"><div class=\"text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1\">Node Type</div><span class=\"px-3 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var17 string
 					templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(validator.NodeType)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 140, Col: 31}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 146, Col: 31}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 					if templ_7745c5c3_Err != nil {
@@ -321,7 +327,7 @@ func Validators(props ValidatorsProps) templ.Component {
 					var templ_7745c5c3_Var18 string
 					templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d", validator.VotingPower))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 146, Col: 53}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 152, Col: 53}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 					if templ_7745c5c3_Err != nil {
@@ -338,17 +344,17 @@ func Validators(props ValidatorsProps) templ.Component {
 							return templ_7745c5c3_Err
 						}
 					case "deregistered":
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<span class=\"px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded\">Deregistered</span> ")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<span class=\"px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded\">Deregistered</span> ")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					case "misbehavior_deregistered":
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "<span class=\"px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded\">Misbehavior</span> ")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "<span class=\"px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded\">Misbehavior</span> ")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					default:
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<span class=\"px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded\">Unknown</span> ")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<span class=\"px-2 py-1 text-xs font-medium bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded\">Unknown</span> ")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
@@ -399,7 +405,7 @@ func Validators(props ValidatorsProps) templ.Component {
 							var templ_7745c5c3_Var21 string
 							templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("SLA #%d: %d blocks, %d/%d challenges", rollups[i].SlaRollupID, rollups[i].NumBlocksProposed, rollups[i].ChallengesFailed, rollups[i].ChallengesReceived))
 							if templ_7745c5c3_Err != nil {
-								return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 180, Col: 187}
+								return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 186, Col: 187}
 							}
 							_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 							if templ_7745c5c3_Err != nil {
@@ -415,14 +421,14 @@ func Validators(props ValidatorsProps) templ.Component {
 							return templ_7745c5c3_Err
 						}
 						for i := len(rollups); i < 5; i++ {
-							templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<div class=\"w-3 h-4 bg-gray-200 dark:bg-gray-700 rounded-sm\" title=\"No data available\"></div>")
+							templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<div class=\"w-3 h-4 bg-gray-200 dark:bg-[#141414] rounded-sm\" title=\"No data available\"></div>")
 							if templ_7745c5c3_Err != nil {
 								return templ_7745c5c3_Err
 							}
 						}
 					} else {
 						for i := 0; i < 5; i++ {
-							templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<div class=\"w-3 h-4 bg-gray-200 dark:bg-gray-700 rounded-sm\" title=\"No uptime data available\"></div>")
+							templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<div class=\"w-3 h-4 bg-gray-200 dark:bg-[#141414] rounded-sm\" title=\"No uptime data available\"></div>")
 							if templ_7745c5c3_Err != nil {
 								return templ_7745c5c3_Err
 							}
@@ -445,18 +451,18 @@ func Validators(props ValidatorsProps) templ.Component {
 					var templ_7745c5c3_Var22 templ.SafeURL
 					templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(buildValidatorsPaginationURL(props.CurrentPage-1, props.PageSize, props.QueryType, props.EndpointFilter)))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 204, Col: 134}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 210, Col: 134}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">← Previous</a> ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">← Previous</a> ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed\">← Previous</span> ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed\">← Previous</span> ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -469,18 +475,18 @@ func Validators(props ValidatorsProps) templ.Component {
 					var templ_7745c5c3_Var23 templ.SafeURL
 					templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(buildValidatorsPaginationURL(props.CurrentPage+1, props.PageSize, props.QueryType, props.EndpointFilter)))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 216, Col: 134}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/pages/validators.templ`, Line: 222, Col: 134}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">Next →</a>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\" class=\"px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-[#141414] hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors\">Next →</a>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-700 rounded cursor-not-allowed\">Next →</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "<span class=\"px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-[#141414] rounded cursor-not-allowed\">Next →</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
diff --git a/pkg/console/templates/pages/validators_uptime.templ b/pkg/console/templates/pages/validators_uptime.templ
index 0bd0a96a..827038a7 100644
--- a/pkg/console/templates/pages/validators_uptime.templ
+++ b/pkg/console/templates/pages/validators_uptime.templ
@@ -86,7 +86,7 @@ func getStatusText(validatorStatus string, report *db.EtlSlaNodeReport, blockQuo
 		statusClass = "bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200"
 	default:
 		statusText = "Unknown"
-		statusClass = "bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200"
+		statusClass = "bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200"
 	}
 
 	// Then determine SLA status for active validators
@@ -142,7 +142,7 @@ func getValidatorStatusClass(validatorInfo *ValidatorUptimeInfo, rollupData *db.
 	case "misbehavior_deregistered":
 		return "bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200"
 	default:
-		return "bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200"
+		return "bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200"
 	}
 }
 
@@ -176,7 +176,7 @@ func getSlaStatusClass(validatorInfo *ValidatorUptimeInfo, rollupData *db.EtlSla
 	}
 
 	if len(validatorInfo.RecentRollups) == 0 {
-		return "bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200"
+		return "bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200"
 	}
 
 	report := validatorInfo.RecentRollups[0]
@@ -244,7 +244,7 @@ func getTotalValidatorsCount(validators []*ValidatorUptimeInfo) int {
 
 templ ValidatorsUptime(props ValidatorsUptimeProps) {
 	@layouts.Base("Validators Uptime") {
-		<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+		<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 			<div class="flex items-center justify-between mb-6">
 				<div>
 					<h2 class="text-2xl font-light text-gray-900 dark:text-gray-100">Validators Uptime</h2>
@@ -277,7 +277,7 @@ templ ValidatorsUptime(props ValidatorsUptimeProps) {
 
 templ ValidatorsUptimeByRollup(props ValidatorsUptimeByRollupProps) {
 	@layouts.Base(fmt.Sprintf("SLA Rollup #%d Uptime", props.RollupID)) {
-		<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
+		<div class="bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6">
 			<div class="flex items-center justify-between mb-6">
 				<div>
 					<h2 class="text-2xl font-light text-gray-900 dark:text-gray-100">SLA Rollup #{ fmt.Sprint(props.RollupID) } Uptime</h2>
@@ -298,7 +298,7 @@ templ ValidatorsUptimeByRollup(props ValidatorsUptimeByRollupProps) {
 
 templ ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) {
 	<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-		<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+		<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 			<dt class="text-lg font-semibold text-gray-900 dark:text-gray-100">
 				if rollupData.CreatedAt.Valid {
 					{ rollupData.CreatedAt.Time.Format("06-01-02") }
@@ -310,7 +310,7 @@ templ ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) {
 			</dt>
 			<dd class="text-sm text-gray-500 dark:text-gray-400 mt-1">Latest Rollup Date</dd>
 		</div>
-		<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+		<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 			<dt class="text-2xl font-bold text-gray-900 dark:text-gray-100">
 				<a href={ templ.SafeURL(fmt.Sprintf("/uptime/%d", rollupData.ID)) } class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline">
 					{ fmt.Sprintf("#%d", rollupData.ID) }
@@ -318,7 +318,7 @@ templ ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) {
 			</dt>
 			<dd class="text-sm text-gray-500 dark:text-gray-400 mt-1">Latest SLA Rollup</dd>
 		</div>
-		<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+		<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 			<dt class="text-2xl font-bold text-gray-900 dark:text-gray-100">
 				<a href={ templ.SafeURL(fmt.Sprintf("/block/%d", rollupData.BlockStart)) } class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline">
 					{ fmt.Sprintf("%d", rollupData.BlockStart) }
@@ -330,7 +330,7 @@ templ ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) {
 			</dt>
 			<dd class="text-sm text-gray-500 dark:text-gray-400 mt-1">Block Range</dd>
 		</div>
-		<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+		<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 			<dt class="text-2xl font-bold text-gray-900 dark:text-gray-100">
 				{ fmt.Sprintf("%d", rollupData.ValidatorCount) }
 			</dt>
@@ -339,13 +339,13 @@ templ ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) {
 	</div>
 	// Add additional metrics row
 	<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-		<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+		<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 			<dt class="text-2xl font-bold text-gray-900 dark:text-gray-100">
 				{ fmt.Sprintf("%d", rollupData.BlockQuota) }
 			</dt>
 			<dd class="text-sm text-gray-500 dark:text-gray-400 mt-1">Block Quota</dd>
 		</div>
-		<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+		<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 			<dt class="text-sm font-mono text-gray-900 dark:text-gray-100 break-all">
 				if rollupData.TxHash != "" {
 					<a href={ templ.SafeURL(fmt.Sprintf("/transaction/%s", rollupData.TxHash)) } class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline">
@@ -363,7 +363,7 @@ templ ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) {
 templ ValidatorsUptimeSummaryForRollup(validators []*ValidatorUptimeInfo, rollupId int32, rollupData *db.EtlSlaRollup) {
 	if rollupData != nil {
 		<div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
-			<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+			<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 				<dt class="text-lg font-semibold text-gray-900 dark:text-gray-100">
 					if rollupData.CreatedAt.Valid {
 						{ rollupData.CreatedAt.Time.Format("06-01-02") }
@@ -375,13 +375,13 @@ templ ValidatorsUptimeSummaryForRollup(validators []*ValidatorUptimeInfo, rollup
 				</dt>
 				<dd class="text-sm text-gray-500 dark:text-gray-400 mt-1">Date Created</dd>
 			</div>
-			<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+			<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 				<dt class="text-2xl font-bold text-gray-900 dark:text-gray-100">
 					{ fmt.Sprintf("#%d", rollupData.ID) }
 				</dt>
 				<dd class="text-sm text-gray-500 dark:text-gray-400 mt-1">SLA Rollup ID</dd>
 			</div>
-			<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+			<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 				<dt class="text-2xl font-bold text-gray-900 dark:text-gray-100">
 					<a href={ templ.SafeURL(fmt.Sprintf("/block/%d", rollupData.BlockStart)) } class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline">
 						{ fmt.Sprintf("%d", rollupData.BlockStart) }
@@ -393,13 +393,13 @@ templ ValidatorsUptimeSummaryForRollup(validators []*ValidatorUptimeInfo, rollup
 				</dt>
 				<dd class="text-sm text-gray-500 dark:text-gray-400 mt-1">Block Range</dd>
 			</div>
-			<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+			<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 				<dt class="text-2xl font-bold text-gray-900 dark:text-gray-100">
 					{ fmt.Sprintf("%d", rollupData.BlockEnd - rollupData.BlockStart + 1) }
 				</dt>
 				<dd class="text-sm text-gray-500 dark:text-gray-400 mt-1">Total Blocks</dd>
 			</div>
-			<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+			<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 				<dt class="text-2xl font-bold text-gray-900 dark:text-gray-100">
 					{ fmt.Sprintf("%d", rollupData.ValidatorCount) }
 				</dt>
@@ -408,13 +408,13 @@ templ ValidatorsUptimeSummaryForRollup(validators []*ValidatorUptimeInfo, rollup
 		</div>
 		// Add additional metrics row
 		<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-			<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+			<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 				<dt class="text-2xl font-bold text-gray-900 dark:text-gray-100">
 					{ fmt.Sprintf("%d", rollupData.BlockQuota) }
 				</dt>
 				<dd class="text-sm text-gray-500 dark:text-gray-400 mt-1">Block Quota</dd>
 			</div>
-			<div class="bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center">
+			<div class="bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center">
 				<dt class="text-sm font-mono text-gray-900 dark:text-gray-100 break-all">
 					if rollupData.TxHash != "" {
 						<a href={ templ.SafeURL(fmt.Sprintf("/tx/%s", rollupData.TxHash)) } class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline">
diff --git a/pkg/console/templates/pages/validators_uptime_templ.go b/pkg/console/templates/pages/validators_uptime_templ.go
index 7ab81fc9..f2966170 100644
--- a/pkg/console/templates/pages/validators_uptime_templ.go
+++ b/pkg/console/templates/pages/validators_uptime_templ.go
@@ -94,7 +94,7 @@ func getStatusText(validatorStatus string, report *db.EtlSlaNodeReport, blockQuo
 		statusClass = "bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200"
 	default:
 		statusText = "Unknown"
-		statusClass = "bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200"
+		statusClass = "bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200"
 	}
 
 	// Then determine SLA status for active validators
@@ -150,7 +150,7 @@ func getValidatorStatusClass(validatorInfo *ValidatorUptimeInfo, rollupData *db.
 	case "misbehavior_deregistered":
 		return "bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200"
 	default:
-		return "bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200"
+		return "bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200"
 	}
 }
 
@@ -184,7 +184,7 @@ func getSlaStatusClass(validatorInfo *ValidatorUptimeInfo, rollupData *db.EtlSla
 	}
 
 	if len(validatorInfo.RecentRollups) == 0 {
-		return "bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200"
+		return "bg-gray-100 dark:bg-[#141414] text-gray-800 dark:text-gray-200"
 	}
 
 	report := validatorInfo.RecentRollups[0]
@@ -283,7 +283,7 @@ func ValidatorsUptime(props ValidatorsUptimeProps) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex items-center justify-between mb-6\"><div><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Validators Uptime</h2><p class=\"text-gray-500 dark:text-gray-400 text-sm mt-1\">Recent SLA rollup performance across all validators. Green indicates meeting SLA requirements, red indicates missing SLA.</p></div><div class=\"flex items-center gap-6 text-sm text-gray-600 dark:text-gray-400\"><div class=\"flex items-center gap-2\"><div class=\"w-4 h-4 bg-green-500 rounded\"></div><span>Meeting SLA</span></div><div class=\"flex items-center gap-2\"><div class=\"w-4 h-4 bg-red-500 rounded\"></div><span>Missing SLA</span></div><div class=\"flex items-center gap-2\"><div class=\"w-4 h-4 bg-gray-800 rounded\"></div><span>Offline/Dead</span></div></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex items-center justify-between mb-6\"><div><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">Validators Uptime</h2><p class=\"text-gray-500 dark:text-gray-400 text-sm mt-1\">Recent SLA rollup performance across all validators. Green indicates meeting SLA requirements, red indicates missing SLA.</p></div><div class=\"flex items-center gap-6 text-sm text-gray-600 dark:text-gray-400\"><div class=\"flex items-center gap-2\"><div class=\"w-4 h-4 bg-green-500 rounded\"></div><span>Meeting SLA</span></div><div class=\"flex items-center gap-2\"><div class=\"w-4 h-4 bg-red-500 rounded\"></div><span>Missing SLA</span></div><div class=\"flex items-center gap-2\"><div class=\"w-4 h-4 bg-gray-800 rounded\"></div><span>Offline/Dead</span></div></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -344,7 +344,7 @@ func ValidatorsUptimeByRollup(props ValidatorsUptimeByRollupProps) templ.Compone
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6\"><div class=\"flex items-center justify-between mb-6\"><div><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">SLA Rollup #")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"bg-white dark:bg-[#141414] rounded-lg shadow-xl p-6\"><div class=\"flex items-center justify-between mb-6\"><div><h2 class=\"text-2xl font-light text-gray-900 dark:text-gray-100\">SLA Rollup #")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -430,7 +430,7 @@ func ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) templ.Component
 			templ_7745c5c3_Var8 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"grid grid-cols-1 md:grid-cols-4 gap-4 mb-6\"><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-lg font-semibold text-gray-900 dark:text-gray-100\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"grid grid-cols-1 md:grid-cols-4 gap-4 mb-6\"><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-lg font-semibold text-gray-900 dark:text-gray-100\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -463,7 +463,7 @@ func ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) templ.Component
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Latest Rollup Date</dd></div><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"><a href=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Latest Rollup Date</dd></div><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"><a href=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -489,7 +489,7 @@ func ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) templ.Component
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</a></dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Latest SLA Rollup</dd></div><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"><a href=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</a></dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Latest SLA Rollup</dd></div><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"><a href=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -541,7 +541,7 @@ func ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) templ.Component
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</a></dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Block Range</dd></div><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</a></dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Block Range</dd></div><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -554,7 +554,7 @@ func ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) templ.Component
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Active Validators</dd></div></div><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\"><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Active Validators</dd></div></div><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\"><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -567,7 +567,7 @@ func ValidatorsUptimeSummaryForMain(rollupData *db.EtlSlaRollup) templ.Component
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Block Quota</dd></div><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-sm font-mono text-gray-900 dark:text-gray-100 break-all\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Block Quota</dd></div><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-sm font-mono text-gray-900 dark:text-gray-100 break-all\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -633,7 +633,7 @@ func ValidatorsUptimeSummaryForRollup(validators []*ValidatorUptimeInfo, rollupI
 		}
 		ctx = templ.ClearChildren(ctx)
 		if rollupData != nil {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<div class=\"grid grid-cols-1 md:grid-cols-5 gap-4 mb-6\"><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-lg font-semibold text-gray-900 dark:text-gray-100\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<div class=\"grid grid-cols-1 md:grid-cols-5 gap-4 mb-6\"><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-lg font-semibold text-gray-900 dark:text-gray-100\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -666,7 +666,7 @@ func ValidatorsUptimeSummaryForRollup(validators []*ValidatorUptimeInfo, rollupI
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Date Created</dd></div><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Date Created</dd></div><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -679,7 +679,7 @@ func ValidatorsUptimeSummaryForRollup(validators []*ValidatorUptimeInfo, rollupI
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">SLA Rollup ID</dd></div><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"><a href=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">SLA Rollup ID</dd></div><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"><a href=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -731,7 +731,7 @@ func ValidatorsUptimeSummaryForRollup(validators []*ValidatorUptimeInfo, rollupI
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</a></dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Block Range</dd></div><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</a></dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Block Range</dd></div><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -744,7 +744,7 @@ func ValidatorsUptimeSummaryForRollup(validators []*ValidatorUptimeInfo, rollupI
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Total Blocks</dd></div><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Total Blocks</dd></div><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -757,7 +757,7 @@ func ValidatorsUptimeSummaryForRollup(validators []*ValidatorUptimeInfo, rollupI
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Active Validators</dd></div></div> <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\"><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Active Validators</dd></div></div> <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\"><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -770,7 +770,7 @@ func ValidatorsUptimeSummaryForRollup(validators []*ValidatorUptimeInfo, rollupI
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Block Quota</dd></div><div class=\"bg-slate-100 dark:bg-gray-700 rounded-md p-4 text-center\"><dt class=\"text-sm font-mono text-gray-900 dark:text-gray-100 break-all\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</dt><dd class=\"text-sm text-gray-500 dark:text-gray-400 mt-1\">Block Quota</dd></div><div class=\"bg-slate-100 dark:bg-[#141414] rounded-md p-4 text-center\"><dt class=\"text-sm font-mono text-gray-900 dark:text-gray-100 break-all\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
diff --git a/pkg/console/templates/string.templ b/pkg/console/templates/string.templ
index 3270bb22..ef13ddea 100644
--- a/pkg/console/templates/string.templ
+++ b/pkg/console/templates/string.templ
@@ -53,7 +53,7 @@ templ StringWithTooltip(value string) {
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
 		</svg>
 		<!-- Tooltip -->
-		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm">
+		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm">
 			<div class="absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
 			<div class="font-mono text-xs break-all">{ value }</div>
 		</div>
@@ -68,7 +68,7 @@ templ StringWithTooltipCustom(value string, front, back int) {
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
 		</svg>
 		<!-- Tooltip -->
-		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm">
+		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm">
 			<div class="absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
 			<div class="font-mono text-xs break-all">{ value }</div>
 		</div>
@@ -83,7 +83,7 @@ templ StringWithTooltipClass(value string, classes string) {
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
 		</svg>
 		<!-- Tooltip -->
-		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm">
+		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm">
 			<div class="absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
 			<div class="font-mono text-xs break-all">{ value }</div>
 		</div>
@@ -98,7 +98,7 @@ templ TruncatedStringWithTooltip(value string, maxLen int) {
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
 		</svg>
 		<!-- Tooltip -->
-		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm">
+		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm">
 			<div class="absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
 			<div class="font-mono text-xs break-all">{ value }</div>
 		</div>
diff --git a/pkg/console/templates/string_templ.go b/pkg/console/templates/string_templ.go
index 37e1bec2..958ba5f3 100644
--- a/pkg/console/templates/string_templ.go
+++ b/pkg/console/templates/string_templ.go
@@ -100,20 +100,20 @@ func StringWithTooltip(value string) templ.Component {
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(shortenString(value))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/string.templ`, Line: 50, Col: 50}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/string.templ`, Line: 50, Col: 50}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</span><!-- Copy icon - shows on hover --><svg class=\"w-3 h-3 ml-1 opacity-0 group-hover:opacity-60 transition-opacity duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"></path></svg><!-- Tooltip --><div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><div class=\"font-mono text-xs break-all\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</span><!-- Copy icon - shows on hover --><svg class=\"w-3 h-3 ml-1 opacity-0 group-hover:opacity-60 transition-opacity duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"></path></svg><!-- Tooltip --><div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><div class=\"font-mono text-xs break-all\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(value)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/string.templ`, Line: 58, Col: 51}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/string.templ`, Line: 58, Col: 51}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -168,20 +168,20 @@ func StringWithTooltipCustom(value string, front, back int) templ.Component {
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(shortenStringCustom(value, front, back))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/string.templ`, Line: 65, Col: 69}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/string.templ`, Line: 65, Col: 69}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</span><!-- Copy icon - shows on hover --><svg class=\"w-3 h-3 ml-1 opacity-0 group-hover:opacity-60 transition-opacity duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"></path></svg><!-- Tooltip --><div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><div class=\"font-mono text-xs break-all\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</span><!-- Copy icon - shows on hover --><svg class=\"w-3 h-3 ml-1 opacity-0 group-hover:opacity-60 transition-opacity duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"></path></svg><!-- Tooltip --><div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><div class=\"font-mono text-xs break-all\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(value)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/string.templ`, Line: 73, Col: 51}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/string.templ`, Line: 73, Col: 51}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -232,7 +232,7 @@ func StringWithTooltipClass(value string, classes string) templ.Component {
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var10).String())
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/string.templ`, Line: 1, Col: 0}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/string.templ`, Line: 1, Col: 0}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
@@ -254,20 +254,20 @@ func StringWithTooltipClass(value string, classes string) templ.Component {
 		var templ_7745c5c3_Var13 string
 		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(shortenString(value))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/string.templ`, Line: 80, Col: 50}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/string.templ`, Line: 80, Col: 50}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</span><!-- Copy icon - shows on hover --><svg class=\"w-3 h-3 ml-1 opacity-0 group-hover:opacity-60 transition-opacity duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"></path></svg><!-- Tooltip --><div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><div class=\"font-mono text-xs break-all\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</span><!-- Copy icon - shows on hover --><svg class=\"w-3 h-3 ml-1 opacity-0 group-hover:opacity-60 transition-opacity duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"></path></svg><!-- Tooltip --><div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><div class=\"font-mono text-xs break-all\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var14 string
 		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(value)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/string.templ`, Line: 88, Col: 51}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/string.templ`, Line: 88, Col: 51}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 		if templ_7745c5c3_Err != nil {
@@ -322,20 +322,20 @@ func TruncatedStringWithTooltip(value string, maxLen int) templ.Component {
 		var templ_7745c5c3_Var17 string
 		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(truncateString(value, maxLen))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/string.templ`, Line: 95, Col: 59}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/string.templ`, Line: 95, Col: 59}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</span><!-- Copy icon - shows on hover --><svg class=\"w-3 h-3 ml-1 opacity-0 group-hover:opacity-60 transition-opacity duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"></path></svg><!-- Tooltip --><div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><div class=\"font-mono text-xs break-all\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</span><!-- Copy icon - shows on hover --><svg class=\"w-3 h-3 ml-1 opacity-0 group-hover:opacity-60 transition-opacity duration-200\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"></path></svg><!-- Tooltip --><div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none z-50 border border-gray-700 dark:border-gray-600 min-w-max max-w-sm\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><div class=\"font-mono text-xs break-all\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var18 string
 		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(value)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/string.templ`, Line: 103, Col: 51}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/string.templ`, Line: 103, Col: 51}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 		if templ_7745c5c3_Err != nil {
diff --git a/pkg/console/templates/time.templ b/pkg/console/templates/time.templ
index 70d01f94..27211472 100644
--- a/pkg/console/templates/time.templ
+++ b/pkg/console/templates/time.templ
@@ -8,7 +8,7 @@ import (
 templ TimeWithTooltip(t time.Time) {
 	<span class="relative group inline-block" data-utc-time={ t.Format(time.RFC3339) }>
 		{ humanize.Time(t) }
-		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50 border border-gray-700 dark:border-gray-600">
+		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50 border border-gray-700 dark:border-gray-600">
 			<div class="absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
 			<span class="local-time-display">{ t.Format("2006-01-02 15:04:05 UTC") }</span>
 		</div>
@@ -18,7 +18,7 @@ templ TimeWithTooltip(t time.Time) {
 templ TimeWithTooltipClass(t time.Time, classes string) {
 	<span class={ "relative group inline-block " + classes } data-utc-time={ t.Format(time.RFC3339) }>
 		{ humanize.Time(t) }
-		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50 border border-gray-700 dark:border-gray-600">
+		<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50 border border-gray-700 dark:border-gray-600">
 			<div class="absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
 			<span class="local-time-display">{ t.Format("2006-01-02 15:04:05 UTC") }</span>
 		</div>
diff --git a/pkg/console/templates/time_templ.go b/pkg/console/templates/time_templ.go
index 7a4a357a..7a6090b7 100644
--- a/pkg/console/templates/time_templ.go
+++ b/pkg/console/templates/time_templ.go
@@ -41,7 +41,7 @@ func TimeWithTooltip(t time.Time) templ.Component {
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(t.Format(time.RFC3339))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/time.templ`, Line: 9, Col: 81}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/time.templ`, Line: 9, Col: 81}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -54,20 +54,20 @@ func TimeWithTooltip(t time.Time) templ.Component {
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(humanize.Time(t))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/time.templ`, Line: 10, Col: 20}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/time.templ`, Line: 10, Col: 20}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50 border border-gray-700 dark:border-gray-600\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><span class=\"local-time-display\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50 border border-gray-700 dark:border-gray-600\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><span class=\"local-time-display\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(t.Format("2006-01-02 15:04:05 UTC"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/time.templ`, Line: 13, Col: 73}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/time.templ`, Line: 13, Col: 73}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -114,7 +114,7 @@ func TimeWithTooltipClass(t time.Time, classes string) templ.Component {
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/time.templ`, Line: 1, Col: 0}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/time.templ`, Line: 1, Col: 0}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -127,7 +127,7 @@ func TimeWithTooltipClass(t time.Time, classes string) templ.Component {
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(t.Format(time.RFC3339))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/time.templ`, Line: 19, Col: 96}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/time.templ`, Line: 19, Col: 96}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -140,20 +140,20 @@ func TimeWithTooltipClass(t time.Time, classes string) templ.Component {
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(humanize.Time(t))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/time.templ`, Line: 20, Col: 20}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/time.templ`, Line: 20, Col: 20}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50 border border-gray-700 dark:border-gray-600\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><span class=\"local-time-display\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-[#141414] rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap z-50 border border-gray-700 dark:border-gray-600\"><div class=\"absolute top-full left-1/2 transform -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700\"></div><span class=\"local-time-display\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(t.Format("2006-01-02 15:04:05 UTC"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/console/templates/time.templ`, Line: 23, Col: 73}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/time.templ`, Line: 23, Col: 73}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
diff --git a/pkg/core/console/assets/css/fonts.css b/pkg/core/console/assets/css/fonts.css
new file mode 100644
index 00000000..b786c863
--- /dev/null
+++ b/pkg/core/console/assets/css/fonts.css
@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'Satoshi';
+  src: url('/assets/fonts/satoshi/Satoshi-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('/assets/fonts/satoshi/Satoshi-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('/assets/fonts/satoshi/Satoshi-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('/assets/fonts/satoshi/Satoshi-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/pkg/core/console/assets/fonts/satoshi/Satoshi-Black.woff2 b/pkg/core/console/assets/fonts/satoshi/Satoshi-Black.woff2
new file mode 100644
index 00000000..64492d52
Binary files /dev/null and b/pkg/core/console/assets/fonts/satoshi/Satoshi-Black.woff2 differ
diff --git a/pkg/core/console/assets/fonts/satoshi/Satoshi-Bold.woff2 b/pkg/core/console/assets/fonts/satoshi/Satoshi-Bold.woff2
new file mode 100644
index 00000000..0a8db7a4
Binary files /dev/null and b/pkg/core/console/assets/fonts/satoshi/Satoshi-Bold.woff2 differ
diff --git a/pkg/core/console/assets/fonts/satoshi/Satoshi-Medium.woff2 b/pkg/core/console/assets/fonts/satoshi/Satoshi-Medium.woff2
new file mode 100644
index 00000000..ffd0ac96
Binary files /dev/null and b/pkg/core/console/assets/fonts/satoshi/Satoshi-Medium.woff2 differ
diff --git a/pkg/core/console/assets/fonts/satoshi/Satoshi-Regular.woff2 b/pkg/core/console/assets/fonts/satoshi/Satoshi-Regular.woff2
new file mode 100644
index 00000000..81c40ab0
Binary files /dev/null and b/pkg/core/console/assets/fonts/satoshi/Satoshi-Regular.woff2 differ